/* =========================================
   Reverys Game Styles
   Parchment & Fantasy Theme
   ========================================= */

/* CSS Variables for theming */
:root {
    --parchment-light: #f4e4bc;
    --parchment-dark: #d4c4a0;
    --parchment-edge: #b8a070;
    --ink-brown: #3d2914;
    --ink-light: #5c4033;
    --gold: #c9a227;
    --gold-light: #e6c84a;
    --wood-dark: #2d1810;
    --wood-medium: #5c3a21;
    --shadow: rgba(0, 0, 0, 0.3);
    --highlight: rgba(255, 255, 255, 0.1);
}

/* Reset & Base */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Georgia', 'Times New Roman', serif;
    background-color: #1a1a2e;
    color: var(--ink-brown);
    overflow: hidden;
    width: 100vw;
    height: 100vh;
}

.hidden {
    display: none !important;
}

/* =========================================
   Login Screen
   ========================================= */
#login-screen {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100vw;
    height: 100vh;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
}

.login-container {
    text-align: center;
    padding: 60px 80px;
    background: var(--parchment-light);
    border: 4px solid var(--parchment-edge);
    border-radius: 8px;
    box-shadow: 0 10px 40px var(--shadow);
}

.login-container h1 {
    font-size: 3em;
    color: var(--ink-brown);
    margin-bottom: 10px;
    text-shadow: 1px 1px 2px var(--shadow);
}

.login-container p {
    font-size: 1.2em;
    color: var(--ink-light);
    margin-bottom: 30px;
    font-style: italic;
}

.login-button {
    padding: 15px 40px;
    font-size: 1.1em;
    font-family: inherit;
    background: #5865F2; /* Discord blue */
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

.login-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(88, 101, 242, 0.4);
}

/* =========================================
   Game Screen
   ========================================= */
#game-screen {
    position: relative;
    width: 100vw;
    height: 100vh;
}

#game-container {
    width: 100%;
    height: 100%;
}

#game-container canvas {
    display: block;
}

/* =========================================
   Chat Panel (Parchment Style)
   ========================================= */
.chat-panel {
    position: fixed;
    right: 0;
    top: 0;
    width: 320px;
    height: 100vh;
    background: linear-gradient(180deg, var(--parchment-light) 0%, var(--parchment-dark) 100%);
    border-left: 4px solid var(--parchment-edge);
    box-shadow: -5px 0 20px var(--shadow);
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease;
    z-index: 100;
}

.chat-panel.collapsed {
    transform: translateX(280px);
}

.chat-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background: var(--wood-medium);
    color: var(--parchment-light);
    border-bottom: 2px solid var(--wood-dark);
}

.chat-header span {
    font-size: 1.1em;
    font-weight: bold;
}

.chat-toggle-btn {
    background: none;
    border: none;
    font-size: 1.5em;
    cursor: pointer;
    color: var(--parchment-light);
    transition: transform 0.2s;
}

.chat-toggle-btn:hover {
    transform: scale(1.1);
}

.chat-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 15px;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><rect fill="%23f4e4bc" width="100" height="100"/><circle fill="%23e8d4a8" cx="50" cy="50" r="2" opacity="0.3"/></svg>');
}

.chat-message {
    margin-bottom: 12px;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 4px;
    border-left: 3px solid var(--gold);
}

.chat-message .author {
    font-weight: bold;
    color: var(--wood-medium);
    margin-bottom: 4px;
}

.chat-message .content {
    color: var(--ink-brown);
    line-height: 1.4;
}

.chat-message.dm-message {
    border-left-color: #9b59b6;
    background: rgba(155, 89, 182, 0.1);
}

.chat-message.system-message {
    border-left-color: var(--ink-light);
    font-style: italic;
    opacity: 0.8;
}

.chat-input-area {
    display: flex;
    padding: 10px;
    background: var(--parchment-dark);
    border-top: 2px solid var(--parchment-edge);
}

#chat-input {
    flex: 1;
    padding: 10px 15px;
    font-family: inherit;
    font-size: 0.95em;
    border: 2px solid var(--parchment-edge);
    border-radius: 4px;
    background: var(--parchment-light);
    color: var(--ink-brown);
}

#chat-input:focus {
    outline: none;
    border-color: var(--gold);
}

#chat-send {
    margin-left: 8px;
    padding: 10px 20px;
    font-family: inherit;
    background: var(--wood-medium);
    color: var(--parchment-light);
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.2s;
}

#chat-send:hover {
    background: var(--wood-dark);
}

/* =========================================
   Stats HUD
   ========================================= */
.stats-hud {
    position: fixed;
    top: 20px;
    left: 20px;
    display: flex;
    gap: 15px;
    z-index: 50;
}

.stat-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 15px;
    background: linear-gradient(180deg, var(--parchment-light) 0%, var(--parchment-dark) 100%);
    border: 2px solid var(--parchment-edge);
    border-radius: 6px;
    box-shadow: 2px 2px 10px var(--shadow);
}

.stat-icon {
    font-size: 1.2em;
}

/* =========================================
   Action Bar
   ========================================= */
.action-bar {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    padding: 10px 20px;
    background: var(--wood-medium);
    border: 3px solid var(--wood-dark);
    border-radius: 8px;
    box-shadow: 0 5px 20px var(--shadow);
    z-index: 50;
}

.action-btn {
    width: 50px;
    height: 50px;
    font-size: 1.5em;
    background: var(--parchment-light);
    border: 2px solid var(--parchment-edge);
    border-radius: 6px;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

.action-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 3px 10px var(--shadow);
}

/* Action groups with sub-menu popups */
.action-group {
    display: block;
    position: relative;
}

.action-group-trigger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    font-size: 1.5em;
    background: var(--parchment-light);
    border: 2px solid var(--parchment-edge);
    border-radius: 6px;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

.action-group-trigger:hover {
    transform: translateY(-3px);
    box-shadow: 0 3px 10px var(--shadow);
}

.action-group-trigger.active {
    background: var(--gold);
    border-color: var(--wood-dark);
}

.action-group-menu {
    display: none;
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 8px;
    background: var(--wood-medium);
    border: 3px solid var(--wood-dark);
    border-radius: 8px;
    padding: 8px;
    box-shadow: 0 -4px 20px var(--shadow);
    z-index: 51;
    min-width: 170px;
}

.action-group-menu.open {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.action-group-menu .action-btn {
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    font-size: 1em;
    text-align: left;
    border-radius: 6px;
}

.action-group-menu .action-label {
    display: inline;
    font-size: 0.95em;
    color: var(--ink-brown);
}

/* Mobile adjustments */
@media (pointer: coarse), (max-width: 768px) {
    .action-bar {
        bottom: 15px;
        gap: 6px;
        padding: 8px 12px;
        position: fixed;
        left: 50%;
        transform: translateX(-50%);
        z-index: 50;
    }

    .action-bar > .action-btn {
        width: 44px;
        height: 44px;
        font-size: 1.3em;
    }

    .action-group-trigger {
        width: 44px;
        height: 44px;
        font-size: 1.3em;
    }

    /* Reposition the floating chat button above the action bar */
    .mobile-chat-btn {
        bottom: 85px !important;
        right: 15px !important;
        width: 50px !important;
        height: 50px !important;
    }
}

/* =========================================
   Inventory Panel
   ========================================= */
.inventory-panel {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 500px;
    max-height: 70vh;
    background: var(--parchment-light);
    border: 4px solid var(--wood-medium);
    border-radius: 8px;
    box-shadow: 0 10px 40px var(--shadow);
    z-index: 200;
}

.panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background: var(--wood-medium);
    color: var(--parchment-light);
    border-radius: 4px 4px 0 0;
}

.panel-header span {
    font-size: 1.2em;
    font-weight: bold;
}

.close-btn {
    background: none;
    border: none;
    font-size: 1.5em;
    color: var(--parchment-light);
    cursor: pointer;
}

.panel-content {
    padding: 20px;
    max-height: 50vh;
    overflow-y: auto;
}

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

.inventory-slot {
    aspect-ratio: 1;
    background: var(--parchment-dark);
    border: 2px solid var(--parchment-edge);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: border-color 0.2s;
}

.inventory-slot:hover {
    border-color: var(--gold);
}

.inventory-slot.equipped {
    border-color: var(--gold);
    box-shadow: 0 0 10px var(--gold-light);
}

.inventory-slot {
    position: relative;
    font-size: 20px;
    font-weight: bold;
    color: var(--brown);
}

.item-icon {
    width: 32px;
    height: 32px;
    image-rendering: pixelated;
    object-fit: contain;
}

.item-quantity {
    position: absolute;
    bottom: 2px;
    right: 2px;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    font-size: 11px;
    font-weight: bold;
    padding: 1px 4px;
    border-radius: 3px;
    min-width: 14px;
    text-align: center;
}

/* Rarity border glow effects */
.inventory-slot[style*="border-color: #ff8800"] {
    box-shadow: 0 0 6px rgba(255, 136, 0, 0.5);
}

.inventory-slot[style*="border-color: #aa44ff"] {
    box-shadow: 0 0 6px rgba(170, 68, 255, 0.5);
}

.inventory-slot[style*="border-color: #44aa44"] {
    box-shadow: 0 0 6px rgba(68, 170, 68, 0.4);
}

/* =========================================
   Companion Display
   ========================================= */
.companion-display {
    position: fixed;
    bottom: 90px;
    left: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 15px;
    background: var(--parchment-light);
    border: 2px solid var(--parchment-edge);
    border-radius: 20px;
    z-index: 50;
    max-width: 180px;
    overflow: hidden;
}

#companion-sprite {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 50%;
}

#companion-name {
    font-weight: bold;
    color: var(--ink-brown);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Mobile companion display - move above joystick */
@media (pointer: coarse), (max-width: 768px) {
    .companion-display {
        bottom: 280px;
        left: 10px;
        padding: 8px 12px;
        max-width: 150px;
    }

    #companion-sprite {
        width: 32px;
        height: 32px;
        min-width: 32px;
    }

    #companion-name {
        font-size: 0.85em;
    }
}

/* =========================================
   Scrollbar Styling
   ========================================= */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: var(--parchment-dark);
}

::-webkit-scrollbar-thumb {
    background: var(--parchment-edge);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--wood-medium);
}

/* =========================================
   NPC Dialogue Panel
   ========================================= */
.npc-dialogue-panel {
    position: fixed;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%);
    width: 600px;
    max-width: 90vw;
    background: url('../assets/ui/Complete_UI_Book_Styles_Pack_Free/Complete_UI_Book_Styles_Pack_Free_v1.0/01_TravelBookLite/Sprites/UI_TravelBook_Popup01a.png') center/100% 100% no-repeat;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 10px 40px var(--shadow);
    z-index: 150;
    animation: dialogueSlideIn 0.3s ease-out;
}

/* Fallback if image doesn't load */
.npc-dialogue-panel {
    background-color: var(--parchment-light);
    border: 4px solid var(--wood-medium);
}

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

.npc-dialogue-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--parchment-edge);
}

.npc-portrait {
    width: 80px;
    height: 80px;
    border-radius: 8px;
    border: 3px solid var(--wood-medium);
    object-fit: cover;
    background: var(--parchment-dark);
}

.npc-info {
    flex: 1;
}

.npc-name {
    font-size: 1.4em;
    font-weight: bold;
    color: var(--ink-brown);
    margin-bottom: 4px;
}

.npc-title {
    font-size: 0.9em;
    color: var(--ink-light);
    font-style: italic;
}

.npc-dialogue-close {
    background: var(--wood-medium);
    color: var(--parchment-light);
    border: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    font-size: 1.2em;
    cursor: pointer;
    transition: background 0.2s;
}

.npc-dialogue-close:hover {
    background: var(--wood-dark);
}

.npc-dialogue-content {
    min-height: 80px;
    padding: 15px;
    background: rgba(255, 255, 255, 0.4);
    border-radius: 6px;
    margin-bottom: 15px;
    line-height: 1.6;
    color: var(--ink-brown);
}

.npc-dialogue-text {
    white-space: pre-wrap;
}

.npc-dialogue-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

.npc-action-btn {
    padding: 10px 20px;
    font-family: inherit;
    font-size: 0.95em;
    background: var(--wood-medium);
    color: var(--parchment-light);
    border: 2px solid var(--wood-dark);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 8px;
}

.npc-action-btn:hover {
    background: var(--gold);
    color: var(--ink-brown);
    transform: translateY(-2px);
}

.npc-action-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.npc-action-btn .icon {
    font-size: 1.1em;
}

/* Quest marker in dialogue */
.quest-available {
    color: var(--gold);
    font-weight: bold;
}

/* Shop/Menu items list */
.npc-items-list {
    max-height: 200px;
    overflow-y: auto;
    margin-bottom: 15px;
}

.npc-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 4px;
    margin-bottom: 6px;
}

.npc-item:hover {
    background: rgba(255, 255, 255, 0.5);
}

.npc-item-name {
    font-weight: bold;
}

.npc-item-price {
    color: var(--gold);
}

/* Quest-specific styles */
.quest-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 12px;
}

.quest-info {
    width: 100%;
}

.quest-objective {
    font-size: 0.9em;
    color: var(--ink-light);
    margin: 4px 0;
}

.quest-reward {
    font-size: 0.85em;
    color: var(--gold);
    font-weight: bold;
}

.quest-progress {
    font-size: 0.85em;
    color: var(--ink-light);
    padding: 4px 8px;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 4px;
}

.accept-quest-btn {
    padding: 6px 16px;
    background: var(--wood-medium);
    color: var(--parchment-light);
    border: 2px solid var(--wood-dark);
    border-radius: 4px;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.2s;
    align-self: flex-end;
}

.accept-quest-btn:hover {
    background: var(--gold);
    color: var(--ink-brown);
}

.complete-quest-btn {
    padding: 8px 20px;
    background: linear-gradient(135deg, var(--gold) 0%, #d4af37 100%);
    color: var(--ink-brown);
    border: 2px solid var(--wood-dark);
    border-radius: 4px;
    cursor: pointer;
    font-family: inherit;
    font-weight: bold;
    transition: all 0.2s;
    align-self: flex-end;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.complete-quest-btn:hover {
    background: linear-gradient(135deg, #ffd700 0%, #ffed4a 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.active-quest {
    border: 2px solid var(--gold);
    background: rgba(201, 162, 39, 0.1);
}

.quest-progress-bar {
    height: 16px;
    background: var(--parchment-dark);
    border: 2px solid var(--parchment-edge);
    border-radius: 8px;
    overflow: hidden;
    margin: 8px 0;
}

.quest-progress-bar .progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--gold) 0%, var(--gold-light) 100%);
    transition: width 0.3s ease;
}

.quest-progress-text {
    font-size: 0.85em;
    color: var(--ink-light);
    text-align: center;
}

.difficulty-badge {
    font-size: 0.7em;
    padding: 2px 6px;
    border-radius: 3px;
    margin-left: 8px;
    text-transform: uppercase;
}

.difficulty-easy {
    background: #4a7c4a;
    color: white;
}

.difficulty-medium {
    background: #c9a227;
    color: white;
}

.difficulty-hard {
    background: #8b4049;
    color: white;
}

/* Shop-specific styles */
.shop-category-header {
    font-weight: bold;
    color: var(--ink-brown);
    padding: 8px 4px;
    margin-top: 8px;
    border-bottom: 1px solid var(--parchment-edge);
    font-size: 0.95em;
}

.shop-category-header:first-child {
    margin-top: 0;
}

.shop-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.shop-item-info {
    flex: 1;
}

.shop-item-desc {
    font-size: 0.85em;
    color: var(--ink-light);
    margin-top: 2px;
}

.buy-btn {
    padding: 6px 12px;
    background: var(--gold);
    color: var(--ink-brown);
    border: 2px solid var(--wood-medium);
    border-radius: 4px;
    cursor: pointer;
    font-family: inherit;
    font-weight: bold;
    transition: all 0.2s;
    min-width: 50px;
}

.buy-btn:hover {
    background: var(--parchment-light);
    transform: scale(1.05);
}

/* Rarity colors */
.rarity-common {
    border-left: 3px solid #888;
}

.rarity-uncommon {
    border-left: 3px solid #4a7c4a;
}

.rarity-rare {
    border-left: 3px solid #4a6fa5;
}

.rarity-epic {
    border-left: 3px solid #8b4a8b;
}

.rarity-legendary {
    border-left: 3px solid var(--gold);
}

/* =========================================
   Character Customization Panel
   ========================================= */
.customization-panel {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 700px;
    max-width: 95vw;
    max-height: 90vh;
    background: var(--parchment-light);
    border: 4px solid var(--wood-medium);
    border-radius: 8px;
    box-shadow: 0 10px 40px var(--shadow);
    z-index: 200;
    overflow: hidden;
}

.customization-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background: var(--wood-medium);
    color: var(--parchment-light);
}

.customization-body {
    display: flex;
    height: calc(90vh - 60px);
    max-height: 500px;
}

.customization-preview {
    width: 200px;
    background: var(--parchment-dark);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    border-right: 2px solid var(--parchment-edge);
}

.preview-character {
    width: 128px;
    height: 128px;
    image-rendering: pixelated;
}

.customization-options {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
}

.option-section {
    margin-bottom: 20px;
}

.option-section h3 {
    font-size: 1em;
    color: var(--ink-brown);
    margin-bottom: 10px;
    border-bottom: 1px solid var(--parchment-edge);
    padding-bottom: 5px;
}

.color-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.color-swatch {
    width: 36px;
    height: 36px;
    border: 3px solid var(--parchment-edge);
    border-radius: 6px;
    cursor: pointer;
    transition: transform 0.2s, border-color 0.2s;
}

.color-swatch:hover {
    transform: scale(1.1);
}

.color-swatch.selected {
    border-color: var(--gold);
    box-shadow: 0 0 10px var(--gold-light);
}

.style-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.style-btn {
    padding: 8px 16px;
    font-family: inherit;
    font-size: 0.85em;
    background: var(--parchment-dark);
    color: var(--ink-brown);
    border: 2px solid var(--parchment-edge);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
}

.style-btn:hover {
    border-color: var(--gold);
}

.style-btn.selected {
    background: var(--gold);
    border-color: var(--wood-medium);
}

/* =========================================
   Mobile Touch Controls
   ========================================= */
.touch-controls {
    position: fixed;
    bottom: 120px;
    left: 30px;
    z-index: 60;
    display: none; /* Shown via JS on mobile */
    pointer-events: none;
}

.touch-controls.visible {
    display: block;
}

.joystick-container {
    width: 140px;
    height: 140px;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 50%;
    border: 4px solid rgba(255, 255, 255, 0.2);
    position: relative;
    pointer-events: auto;
    touch-action: none;
    transition: border-color 0.2s, background 0.2s;
}

.joystick-container.active {
    background: rgba(0, 0, 0, 0.35);
    border-color: rgba(255, 255, 255, 0.4);
}

.joystick-knob {
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.4);
    border: 3px solid rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -30px;
    margin-top: -30px;
    touch-action: none;
    transition: background 0.1s;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.joystick-container.active .joystick-knob {
    background: rgba(255, 255, 255, 0.6);
}

/* Interaction button for mobile (tap to interact) */
.touch-interact-btn {
    position: fixed;
    bottom: 120px;
    right: 30px;
    width: 80px;
    height: 80px;
    background: var(--gold);
    border: 4px solid var(--wood-medium);
    border-radius: 50%;
    font-size: 2em;
    color: var(--ink-brown);
    cursor: pointer;
    z-index: 60;
    display: none;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    transition: transform 0.1s, background 0.2s;
}

.touch-interact-btn:active {
    transform: scale(0.95);
    background: var(--gold-light);
}

.touch-controls.visible + .touch-interact-btn,
.touch-controls.visible ~ .touch-interact-btn {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Touch device adjustments - hide joystick, show mobile chat */
@media (pointer: coarse) {
    /* Hide the joystick - tap-to-move works better */
    .touch-controls {
        display: none !important;
    }

    .touch-interact-btn {
        display: none;
    }

    /* Show mobile chat button on touch devices */
    .mobile-chat-btn {
        display: flex !important;
    }

    /* Action bar mobile adjustments handled in action-bar section above */

    /* Make stats HUD more compact on mobile */
    .stats-hud {
        font-size: 0.85em;
        padding: 8px 12px;
    }
}

/* =========================================
   Responsive Adjustments
   ========================================= */
@media (max-width: 768px) {
    /* Hide chat by default on mobile - it becomes a popup */
    .chat-panel {
        display: none;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 90vw;
        height: 70vh;
        max-height: 500px;
        right: auto;
        border-radius: 12px;
        z-index: 1001;
    }

    .chat-panel.mobile-open {
        display: flex;
    }

    .chat-panel.collapsed {
        transform: translate(-50%, -50%);
    }

    /* Hide the collapse toggle on mobile - use close button instead */
    .chat-panel .chat-toggle-btn {
        display: none;
    }

    /* Chat overlay/backdrop for mobile */
    .chat-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 1000;
    }

    .chat-overlay.active {
        display: block;
    }

    .inventory-panel {
        width: 90vw;
    }

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

/* Desktop: keep chat visible and on the side */
@media (min-width: 769px) {
    .chat-overlay {
        display: none !important;
    }

    .mobile-only {
        display: none !important;
    }
}

/* Mobile-only elements */
@media (max-width: 768px) {
    .mobile-only {
        display: block;
    }

    .chat-header .mobile-only {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 30px;
        height: 30px;
        font-size: 1.5em;
        background: var(--parchment-dark);
        border: none;
        border-radius: 50%;
        cursor: pointer;
        margin-left: auto;
    }
}

/* =========================================
   Quest Panel
   ========================================= */
.quest-panel {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 450px;
    max-width: 90vw;
    max-height: 80vh;
    background: var(--parchment-light);
    border: 4px solid var(--wood-medium);
    border-radius: 8px;
    box-shadow: 0 10px 40px var(--shadow);
    z-index: 200;
    overflow: hidden;
}

.current-quest {
    padding: 15px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 6px;
    margin-bottom: 15px;
}

.current-quest h3 {
    font-size: 1.1em;
    color: var(--wood-medium);
    margin-bottom: 10px;
    border-bottom: 2px solid var(--gold);
    padding-bottom: 5px;
}

.quest-details {
    color: var(--ink-brown);
}

.quest-details .no-quest {
    font-style: italic;
    color: var(--ink-light);
    opacity: 0.7;
}

.quest-title {
    font-weight: bold;
    font-size: 1.1em;
    color: var(--ink-brown);
    margin-bottom: 8px;
}

.quest-description {
    font-size: 0.95em;
    color: var(--ink-light);
    margin-bottom: 12px;
    line-height: 1.4;
}

.quest-objective {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    background: var(--parchment-dark);
    border-radius: 4px;
    margin-bottom: 10px;
}

.quest-objective .objective-icon {
    font-size: 1.5em;
}

.quest-objective .objective-text {
    flex: 1;
}

.quest-progress {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
}

.progress-bar {
    flex: 1;
    height: 20px;
    background: var(--parchment-dark);
    border: 2px solid var(--parchment-edge);
    border-radius: 10px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--gold) 0%, var(--gold-light) 100%);
    transition: width 0.3s ease;
}

.progress-text {
    font-weight: bold;
    color: var(--ink-brown);
    min-width: 60px;
    text-align: right;
}

.quest-rewards {
    margin-top: 12px;
    padding: 10px;
    background: rgba(201, 162, 39, 0.1);
    border: 1px solid var(--gold);
    border-radius: 4px;
}

.quest-rewards h4 {
    font-size: 0.9em;
    color: var(--gold);
    margin-bottom: 5px;
}

.reward-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.reward-item {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    background: var(--parchment-dark);
    border-radius: 4px;
    font-size: 0.9em;
}

.quest-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    padding-top: 15px;
    border-top: 1px solid var(--parchment-edge);
}

.quest-btn {
    padding: 10px 20px;
    font-family: inherit;
    font-weight: bold;
    border: 2px solid var(--parchment-edge);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
}

.quest-btn.abandon {
    background: var(--parchment-dark);
    color: #8b4049;
}

.quest-btn.abandon:hover {
    background: #8b4049;
    color: white;
    border-color: #8b4049;
}

.quest-btn.complete {
    background: var(--gold);
    color: var(--ink-brown);
    border-color: var(--wood-medium);
}

.quest-btn.complete:hover {
    background: var(--gold-light);
    transform: scale(1.02);
}

/* =========================================
   Hunt Modal
   ========================================= */
.hunt-modal {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 300;
    animation: slideInRight 0.3s ease;
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(100px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.hunt-modal-content {
    width: 380px;
    max-width: 90vw;
    background: var(--parchment-light);
    border: 4px solid var(--wood-medium);
    border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.hunt-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background: var(--wood-medium);
    color: var(--parchment-light);
    border-radius: 4px 4px 0 0;
}

.hunt-header span {
    font-size: 1.2em;
    font-weight: bold;
}

.hunt-result {
    padding: 20px;
    line-height: 1.6;
    color: var(--ink-brown);
}

.hunt-result .combat-header {
    font-weight: bold;
    font-size: 1.1em;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.hunt-result .roll-line {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 0;
}

.hunt-result .roll-icon {
    font-size: 1.2em;
}

.hunt-result .critical {
    color: #d4af37;
    font-weight: bold;
}

.hunt-result .hit {
    color: #4a7c4a;
}

.hunt-result .miss {
    color: #8b4049;
}

.hunt-result .fumble {
    color: #8b4049;
    font-weight: bold;
}

.hunt-result .message {
    margin-top: 15px;
    padding: 10px;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 4px;
    font-weight: bold;
}

.hunt-result .success-message {
    background: rgba(74, 124, 74, 0.1);
    border-left: 3px solid #4a7c4a;
}

.hunt-result .fail-message {
    background: rgba(139, 64, 73, 0.1);
    border-left: 3px solid #8b4049;
}

.hunt-ok-btn {
    display: block;
    width: calc(100% - 40px);
    margin: 0 20px 20px;
    padding: 12px 20px;
    font-family: inherit;
    font-size: 1em;
    font-weight: bold;
    background: var(--gold);
    color: var(--ink-brown);
    border: 2px solid var(--wood-medium);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
}

.hunt-ok-btn:hover {
    background: var(--gold-light);
    transform: scale(1.02);
}

/* =========================================
   Clickable Wildlife
   ========================================= */
.wildlife-clickable {
    cursor: crosshair;
}

.wildlife-clickable:hover {
    filter: brightness(1.2) drop-shadow(0 0 5px rgba(255, 200, 0, 0.5));
}

/* Wildlife tooltip */
.wildlife-tooltip {
    position: absolute;
    padding: 6px 12px;
    background: rgba(0, 0, 0, 0.85);
    color: white;
    font-size: 0.9em;
    border-radius: 4px;
    pointer-events: none;
    white-space: nowrap;
    z-index: 100;
}

.wildlife-tooltip .danger-icon {
    color: #ff6b6b;
}

/* =========================================
   Crafting Panel
   ========================================= */
.crafting-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 400;
    animation: fadeIn 0.2s ease;
}

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

.crafting-panel {
    width: 700px;
    max-width: 95vw;
    max-height: 85vh;
    background: var(--parchment-light);
    border: 4px solid var(--wood-medium);
    border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.crafting-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background: var(--wood-medium);
    color: var(--parchment-light);
}

.crafting-header h2 {
    margin: 0;
    font-size: 1.3em;
}

.crafting-header .close-btn {
    background: none;
    border: none;
    color: var(--parchment-light);
    font-size: 1.8em;
    cursor: pointer;
    line-height: 1;
    padding: 0 5px;
    opacity: 0.8;
}

.crafting-header .close-btn:hover {
    opacity: 1;
}

.crafting-tabs {
    display: flex;
    background: var(--parchment-dark);
    border-bottom: 2px solid var(--wood-medium);
}

.crafting-tabs .tab-btn {
    flex: 1;
    padding: 12px 20px;
    font-family: inherit;
    font-size: 1em;
    background: transparent;
    border: none;
    color: var(--ink-brown);
    cursor: pointer;
    transition: all 0.2s;
}

.crafting-tabs .tab-btn:hover {
    background: var(--parchment-light);
}

.crafting-tabs .tab-btn.active {
    background: var(--parchment-light);
    font-weight: bold;
    box-shadow: 0 2px 0 var(--gold);
}

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

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

/* Recipe Filters */
.recipe-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 15px;
}

.recipe-filters .filter-btn {
    padding: 6px 14px;
    font-family: inherit;
    font-size: 0.9em;
    background: var(--parchment-dark);
    border: 1px solid var(--parchment-edge);
    border-radius: 15px;
    cursor: pointer;
    transition: all 0.2s;
}

.recipe-filters .filter-btn:hover {
    background: var(--gold-light);
}

.recipe-filters .filter-btn.active {
    background: var(--gold);
    border-color: var(--wood-medium);
    font-weight: bold;
}

/* Recipe Cards */
.recipes-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 15px;
}

.recipe-card {
    background: white;
    border: 2px solid var(--parchment-edge);
    border-radius: 6px;
    padding: 12px;
    transition: all 0.2s;
}

.recipe-card.craftable {
    border-color: var(--gold);
}

.recipe-card.locked {
    opacity: 0.7;
}

.recipe-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.recipe-name {
    font-weight: bold;
    font-size: 1.1em;
    color: var(--ink-brown);
}

.recipe-type {
    font-size: 0.8em;
    padding: 3px 8px;
    border-radius: 10px;
    background: var(--parchment-dark);
}

.recipe-type.type-food { background: #d4edda; color: #155724; }
.recipe-type.type-potion { background: #cce5ff; color: #004085; }
.recipe-type.type-gear { background: #e2d5f7; color: #4a235a; }
.recipe-type.type-tool { background: #fff3cd; color: #856404; }
.recipe-type.type-companion_treat { background: #f8d7da; color: #721c24; }

.recipe-description {
    font-size: 0.9em;
    color: var(--ink-light);
    margin-bottom: 10px;
    font-style: italic;
}

.recipe-materials {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}

.recipe-materials .material {
    font-size: 0.85em;
    padding: 3px 8px;
    border-radius: 4px;
}

.recipe-materials .material.have {
    background: #d4edda;
    color: #155724;
}

.recipe-materials .material.need {
    background: #f8d7da;
    color: #721c24;
}

.recipe-benefit {
    font-size: 0.85em;
    color: var(--gold);
    margin-bottom: 10px;
}

.craft-btn {
    width: 100%;
    padding: 10px;
    font-family: inherit;
    font-size: 1em;
    font-weight: bold;
    background: var(--gold);
    color: var(--ink-brown);
    border: 2px solid var(--wood-medium);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
}

.craft-btn:hover:not([disabled]) {
    background: var(--gold-light);
    transform: scale(1.02);
}

.craft-btn[disabled] {
    background: var(--parchment-dark);
    color: var(--ink-light);
    cursor: not-allowed;
    border-color: var(--parchment-edge);
}

/* Processing Tab */
.processing-info {
    padding: 10px;
    background: var(--parchment-dark);
    border-radius: 6px;
    margin-bottom: 15px;
    font-style: italic;
}

.processable-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
}

.process-card {
    background: white;
    border: 2px solid var(--parchment-edge);
    border-radius: 6px;
    padding: 12px;
}

.process-card.fresh { border-color: #4a7c4a; }
.process-card.expiring { border-color: #e67e22; }
.process-card.spoiled { border-color: #8b4049; opacity: 0.6; }

.process-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.item-status {
    font-size: 0.85em;
    padding: 2px 8px;
    border-radius: 10px;
}

.item-status.fresh { background: #d4edda; color: #155724; }
.item-status.expiring { background: #fff3cd; color: #856404; }
.item-status.spoiled { background: #f8d7da; color: #721c24; }

.process-products {
    font-size: 0.9em;
    color: var(--ink-light);
    margin-bottom: 10px;
}

.process-btn {
    width: 100%;
    padding: 8px;
    font-family: inherit;
    font-size: 0.95em;
    font-weight: bold;
    background: var(--gold);
    color: var(--ink-brown);
    border: 2px solid var(--wood-medium);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
}

.process-btn:hover:not([disabled]) {
    background: var(--gold-light);
}

.process-btn[disabled] {
    background: var(--parchment-dark);
    color: var(--ink-light);
    cursor: not-allowed;
}

/* Inventory Tab */
.inventory-sections {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.inventory-section h3 {
    font-size: 1.1em;
    margin-bottom: 10px;
    padding-bottom: 5px;
    border-bottom: 2px solid var(--parchment-edge);
}

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

.inventory-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: white;
    border: 1px solid var(--parchment-edge);
    border-radius: 4px;
    font-size: 0.9em;
}

.inventory-item .item-name {
    flex: 1;
}

.inventory-item .item-count {
    font-weight: bold;
    color: var(--gold);
}

.inventory-item .item-actions {
    display: flex;
    gap: 4px;
}

.inventory-item .use-btn,
.inventory-item .drop-btn {
    padding: 4px 8px;
    font-size: 0.8em;
    border: 1px solid var(--parchment-edge);
    border-radius: 3px;
    cursor: pointer;
    background: var(--parchment-dark);
}

.inventory-item .use-btn:hover {
    background: var(--gold-light);
}

.inventory-item .drop-btn:hover {
    background: #f8d7da;
}

.inventory-item.perishable {
    border-left: 3px solid #4a7c4a;
}

.inventory-item.perishable.expiring {
    border-left-color: #e67e22;
}

.inventory-item.perishable.spoiled {
    border-left-color: #8b4049;
    opacity: 0.6;
}

.inventory-item .item-timer {
    font-size: 0.85em;
    padding: 2px 6px;
    border-radius: 8px;
}

.inventory-item .item-timer.fresh { background: #d4edda; }
.inventory-item .item-timer.expiring { background: #fff3cd; }
.inventory-item .item-timer.spoiled { background: #f8d7da; }

.inventory-item.crafted {
    border-left: 3px solid var(--gold);
}

.inventory-item .item-durability {
    font-size: 0.85em;
    color: var(--ink-light);
}

.inventory-item .item-type {
    font-size: 0.75em;
    padding: 2px 6px;
    background: var(--parchment-dark);
    border-radius: 8px;
}

/* Crafting Footer */
.crafting-footer {
    padding: 10px 15px;
    background: var(--parchment-dark);
    border-top: 2px solid var(--parchment-edge);
    min-height: 45px;
}

.crafting-result {
    text-align: center;
    font-size: 0.95em;
}

.panel-result-card {
    padding: 14px 16px;
    border-radius: 12px;
    border: 1px solid rgba(61, 41, 20, 0.18);
    background: rgba(255, 252, 245, 0.88);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.panel-result-card.panel-result-pending {
    background: rgba(255, 248, 220, 0.7);
    border-color: rgba(212, 167, 44, 0.35);
}

.panel-result-card.panel-result-success {
    background: rgba(224, 247, 231, 0.88);
    border-color: rgba(76, 175, 80, 0.4);
}

.panel-result-card.panel-result-warning {
    background: rgba(255, 243, 224, 0.9);
    border-color: rgba(255, 152, 0, 0.38);
}

.panel-result-card.panel-result-error {
    background: rgba(253, 236, 234, 0.9);
    border-color: rgba(211, 47, 47, 0.3);
}

.panel-result-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 8px;
}

.panel-result-icon {
    font-size: 1.5em;
    line-height: 1;
}

.panel-result-title {
    font-weight: 700;
    color: #3d2914;
}

.panel-result-message {
    color: #3d2914;
    line-height: 1.5;
}

.panel-result-meta {
    margin-top: 8px;
    font-size: 0.88em;
    color: #6a5440;
}

.panel-result-note {
    margin-top: 8px;
    font-size: 0.88em;
    font-weight: 600;
}

.panel-result-note.is-positive,
.panel-result-card.panel-result-success .panel-result-note {
    color: #1f7a3d;
}

.panel-result-note.is-warning,
.panel-result-card.panel-result-warning .panel-result-note {
    color: #a15c00;
}

.panel-result-note.is-error,
.panel-result-card.panel-result-error .panel-result-note {
    color: #b3261e;
}

.panel-result-stack {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
}

.panel-result-chip {
    padding: 8px 10px;
    border-radius: 8px;
    background: rgba(61, 41, 20, 0.08);
    color: #3d2914;
    font-size: 0.9em;
}

.crafting-result .success {
    color: #155724;
    font-weight: bold;
}

.crafting-result .error {
    color: #721c24;
    font-weight: bold;
}

.crafting-result .crafting,
.crafting-result .processing,
.crafting-result .using {
    color: var(--gold);
    font-style: italic;
}

.empty {
    text-align: center;
    color: var(--ink-light);
    font-style: italic;
    padding: 30px;
}

.loading {
    text-align: center;
    color: var(--ink-light);
    font-style: italic;
    padding: 30px;
}

.error {
    text-align: center;
    color: #721c24;
    padding: 20px;
}

/* =========================================
   NPC Chat Input
   ========================================= */
.npc-chat-input {
    display: flex;
    gap: 8px;
    padding: 10px 0;
    margin-top: 10px;
    border-top: 1px solid var(--parchment-edge);
}

#npc-message-input {
    flex: 1;
    padding: 10px 15px;
    font-family: inherit;
    font-size: 0.95em;
    border: 2px solid var(--parchment-edge);
    border-radius: 6px;
    background: var(--parchment-light);
    color: var(--ink-brown);
    transition: border-color 0.2s;
}

#npc-message-input:focus {
    outline: none;
    border-color: var(--gold);
}

#npc-message-input::placeholder {
    color: var(--ink-light);
    font-style: italic;
}

.npc-send-btn {
    padding: 10px 20px;
    font-family: inherit;
    font-size: 0.95em;
    font-weight: bold;
    background: var(--gold);
    color: var(--ink-brown);
    border: 2px solid var(--wood-medium);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
}

.npc-send-btn:hover {
    background: var(--gold-light);
    transform: translateY(-1px);
}

.npc-send-btn:active {
    transform: translateY(0);
}

.npc-send-btn:disabled {
    background: var(--parchment-dark);
    color: var(--ink-light);
    cursor: not-allowed;
    transform: none;
}

/* Mobile adjustments for NPC chat input */
@media (max-width: 768px) {
    .npc-chat-input {
        padding: 8px 0;
    }

    #npc-message-input {
        padding: 8px 12px;
        font-size: 0.9em;
    }

    .npc-send-btn {
        padding: 8px 16px;
        font-size: 0.9em;
    }
}

/* =========================================
   Companion Panel
   ========================================= */
.companion-panel {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 500px;
    max-width: 95vw;
    max-height: 85vh;
    background: var(--parchment-light);
    border: 4px solid var(--wood-medium);
    border-radius: 8px;
    box-shadow: 0 10px 40px var(--shadow);
    z-index: 200;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: dialogueSlideIn 0.3s ease-out;
}

.companion-panel-body {
    flex: 1;
    overflow-y: auto;
    padding: 15px;
}

.companion-panel-body h3 {
    font-size: 1.1em;
    color: var(--ink-brown);
    margin-bottom: 10px;
    padding-bottom: 5px;
    border-bottom: 2px solid var(--parchment-edge);
}

/* Active Companion Display */
.active-companion-section {
    margin-bottom: 20px;
}

.active-companion-display {
    background: rgba(255, 255, 255, 0.4);
    border-radius: 6px;
    padding: 15px;
}

.active-companion-display .no-companion {
    text-align: center;
    font-style: italic;
    color: var(--ink-light);
    padding: 20px;
}

.active-companion-card {
    display: flex;
    gap: 15px;
}

.active-companion-portrait {
    width: 80px;
    height: 80px;
    border-radius: 8px;
    border: 3px solid var(--gold);
    background: var(--parchment-dark);
    object-fit: contain;
    image-rendering: pixelated;
}

.active-companion-info {
    flex: 1;
}

.active-companion-name {
    font-size: 1.3em;
    font-weight: bold;
    color: var(--ink-brown);
    margin-bottom: 5px;
}

.active-companion-type {
    font-size: 0.9em;
    color: var(--ink-light);
    margin-bottom: 8px;
}

.companion-loyalty-bar {
    height: 20px;
    background: var(--parchment-dark);
    border: 2px solid var(--parchment-edge);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 8px;
}

.companion-loyalty-fill {
    height: 100%;
    background: linear-gradient(90deg, #e67e22 0%, var(--gold) 50%, #27ae60 100%);
    transition: width 0.5s ease;
    position: relative;
}

.companion-loyalty-fill::after {
    content: attr(data-loyalty);
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.75em;
    font-weight: bold;
    color: white;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.companion-bonuses {
    font-size: 0.85em;
    color: var(--ink-light);
}

.companion-bonus {
    display: inline-block;
    padding: 2px 8px;
    background: rgba(74, 124, 74, 0.1);
    border: 1px solid #4a7c4a;
    border-radius: 10px;
    margin: 2px;
    color: #4a7c4a;
}

.companion-penalty {
    display: inline-block;
    padding: 2px 8px;
    background: rgba(139, 64, 73, 0.1);
    border: 1px solid #8b4049;
    border-radius: 10px;
    margin: 2px;
    color: #8b4049;
}

.companion-abilities {
    margin-top: 8px;
    font-size: 0.85em;
    color: var(--gold);
}

/* Feed Section */
.feed-section {
    margin-bottom: 20px;
    padding: 15px;
    background: rgba(201, 162, 39, 0.1);
    border: 1px solid var(--gold);
    border-radius: 6px;
}

.food-items-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 10px;
}

.food-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px;
    background: var(--parchment-light);
    border: 2px solid var(--parchment-edge);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
}

.food-item:hover {
    border-color: var(--gold);
    background: rgba(255, 255, 255, 0.8);
}

.food-item-icon {
    font-size: 1.5em;
    margin-bottom: 5px;
}

.food-item-name {
    font-size: 0.85em;
    text-align: center;
    color: var(--ink-brown);
}

.food-item-quantity {
    font-size: 0.75em;
    color: var(--ink-light);
}

.food-item-loyalty {
    font-size: 0.75em;
    color: var(--gold);
    font-weight: bold;
}

.no-food {
    text-align: center;
    font-style: italic;
    color: var(--ink-light);
    padding: 10px;
}

/* Companions List */
.companions-list-section {
    margin-bottom: 20px;
}

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

.no-companions {
    text-align: center;
    font-style: italic;
    color: var(--ink-light);
    padding: 20px;
}

.companion-list-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.4);
    border: 2px solid var(--parchment-edge);
    border-radius: 6px;
    transition: all 0.2s;
}

.companion-list-card:hover {
    border-color: var(--gold);
    background: rgba(255, 255, 255, 0.6);
}

.companion-list-card.active {
    border-color: var(--gold);
    background: rgba(201, 162, 39, 0.1);
    box-shadow: 0 0 10px rgba(201, 162, 39, 0.3);
}

.companion-list-portrait {
    width: 50px;
    height: 50px;
    border-radius: 6px;
    border: 2px solid var(--parchment-edge);
    background: var(--parchment-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5em;
}

.companion-list-card.active .companion-list-portrait {
    border-color: var(--gold);
}

.companion-list-info {
    flex: 1;
}

.companion-list-name {
    font-weight: bold;
    color: var(--ink-brown);
}

.companion-list-meta {
    font-size: 0.85em;
    color: var(--ink-light);
}

.companion-list-loyalty {
    font-size: 0.85em;
}

.companion-list-loyalty.low {
    color: #8b4049;
}

.companion-list-loyalty.medium {
    color: #e67e22;
}

.companion-list-loyalty.high {
    color: #4a7c4a;
}

.companion-list-actions {
    display: flex;
    gap: 8px;
}

.companion-action-btn {
    padding: 6px 12px;
    font-family: inherit;
    font-size: 0.85em;
    background: var(--gold);
    color: var(--ink-brown);
    border: 2px solid var(--wood-medium);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
}

.companion-action-btn:hover {
    background: var(--gold-light);
    transform: translateY(-1px);
}

.companion-action-btn:disabled {
    background: var(--parchment-dark);
    color: var(--ink-light);
    cursor: not-allowed;
    transform: none;
}

.companion-action-btn.active-btn {
    background: var(--parchment-dark);
    color: var(--ink-light);
    cursor: default;
}

/* Rarity badges */
.rarity-badge {
    font-size: 0.7em;
    padding: 2px 6px;
    border-radius: 10px;
    text-transform: uppercase;
    margin-left: 6px;
}

.rarity-common {
    background: #888;
    color: white;
}

.rarity-uncommon {
    background: #4a7c4a;
    color: white;
}

.rarity-rare {
    background: #4a6fa5;
    color: white;
}

.rarity-legendary {
    background: linear-gradient(135deg, var(--gold) 0%, #ff6b6b 100%);
    color: white;
}

/* Mobile adjustments for companion panel */
@media (max-width: 768px) {
    .companion-panel {
        width: 95vw;
        max-height: 80vh;
    }

    .active-companion-card {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .food-items-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .companion-list-card {
        flex-direction: column;
        text-align: center;
    }

    .companion-list-actions {
        margin-top: 10px;
    }
}

/* =========================================
   Player Chat (Multiplayer)
   ========================================= */
.player-chat {
    position: fixed;
    bottom: 80px;
    left: 20px;
    width: 350px;
    max-width: calc(100vw - 40px);
    background: rgba(29, 26, 38, 0.95);
    border: 2px solid var(--gold);
    border-radius: 8px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);
    z-index: 250;
    display: flex;
    flex-direction: column;
    max-height: 400px;
    animation: fadeIn 0.2s ease;
}

.player-chat.hidden {
    display: none;
}

.player-chat-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    background: var(--wood-medium);
    border-radius: 6px 6px 0 0;
}

.player-chat-header .chat-title {
    color: var(--parchment-light);
    font-weight: bold;
    font-size: 1em;
}

.player-chat-header .chat-close-btn {
    background: none;
    border: none;
    color: var(--parchment-light);
    font-size: 1.5em;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

.player-chat-header .chat-close-btn:hover {
    color: var(--gold);
}

.player-chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
    max-height: 250px;
    min-height: 100px;
}

.player-chat-message {
    padding: 5px 0;
    color: #e0e0e0;
    font-size: 0.9em;
    word-wrap: break-word;
}

.player-chat-message .message-author {
    color: #00FFFF;
    font-weight: bold;
    cursor: pointer;
}

.player-chat-message .message-author:hover {
    text-decoration: underline;
}

.player-chat-message.whisper {
    color: #ff69b4;
    font-style: italic;
}

.player-chat-message.whisper .message-author {
    color: #ff69b4;
}

.player-chat-message.own-message .message-author {
    color: var(--gold);
}

.player-chat-message.companion-message {
    color: #c6f6d5;
    font-style: italic;
}

.player-chat-message.companion-message .message-author {
    color: #8ee3a2;
}

.player-chat-message.system {
    color: #888;
    font-style: italic;
    text-align: center;
}

.player-chat-input-container {
    display: flex;
    flex-direction: column;
    padding: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    gap: 5px;
}

.player-chat-input-container .whisper-indicator {
    font-size: 0.8em;
    color: #ff69b4;
    font-style: italic;
}

.player-chat-input-container .whisper-indicator.hidden {
    display: none;
}

.player-chat-input-container > div:last-child {
    display: flex;
    gap: 8px;
}

.player-chat-input {
    flex: 1;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    color: white;
    font-family: inherit;
    font-size: 0.9em;
}

.player-chat-input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.player-chat-input:focus {
    outline: none;
    border-color: var(--gold);
}

.player-chat-send {
    padding: 8px 15px;
    background: var(--gold);
    border: none;
    border-radius: 4px;
    color: var(--ink-brown);
    font-family: inherit;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.2s;
}

.player-chat-send:hover {
    background: var(--gold-light);
}

/* Chat notification flash */
.player-chat.has-notification::after {
    content: '';
    position: absolute;
    top: -5px;
    right: -5px;
    width: 12px;
    height: 12px;
    background: #ff4444;
    border-radius: 50%;
    animation: pulse 1s infinite;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.2); opacity: 0.7; }
}

/* Mobile adjustments for player chat */
@media (max-width: 768px) {
    .player-chat {
        left: 10px;
        right: 10px;
        bottom: 100px;
        width: auto;
        max-width: none;
    }
}

/* =========================================
   AI Partner Dialogue
   ========================================= */
.ai-partner-dialogue {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 450px;
    max-width: 95vw;
    max-height: 80vh;
    background: var(--parchment-light);
    border: 4px solid var(--gold);
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
    z-index: 400;
    display: flex;
    flex-direction: column;
    animation: fadeIn 0.2s ease;
}

.ai-partner-dialogue.hidden {
    display: none;
}

.ai-dialogue-header {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px 20px;
    background: linear-gradient(135deg, var(--wood-medium), var(--wood-dark));
    border-radius: 8px 8px 0 0;
    color: var(--parchment-light);
}

.ai-portrait-container {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 3px solid var(--gold);
    overflow: hidden;
    background: var(--parchment-dark);
}

.ai-portrait-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #5865F2, #7289DA);
    display: flex;
    align-items: center;
    justify-content: center;
}

.ai-info {
    flex: 1;
}

.ai-name {
    font-size: 1.3em;
    font-weight: bold;
    margin-bottom: 4px;
}

.ai-bond {
    font-size: 0.9em;
    color: var(--gold-light);
}

.ai-dialogue-close {
    background: none;
    border: none;
    color: var(--parchment-light);
    font-size: 1.8em;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    opacity: 0.8;
    transition: opacity 0.2s;
}

.ai-dialogue-close:hover {
    opacity: 1;
}

.ai-dialogue-messages {
    flex: 1;
    overflow-y: auto;
    padding: 15px;
    max-height: 300px;
    min-height: 150px;
    background: rgba(255, 255, 255, 0.5);
}

.ai-message {
    padding: 8px 0;
    line-height: 1.5;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.ai-message:last-child {
    border-bottom: none;
}

.ai-message.player .message-sender {
    color: var(--wood-medium);
    font-weight: bold;
}

.ai-message.partner .message-sender {
    color: #5865F2;
    font-weight: bold;
}

.ai-message.system {
    color: var(--ink-light);
    font-style: italic;
    font-size: 0.9em;
}

.ai-message.system .message-sender {
    color: var(--ink-light);
}

.typing-indicator .typing-dots {
    animation: typingDots 1s infinite;
}

@keyframes typingDots {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 1; }
}

.ai-dialogue-input-container {
    display: flex;
    gap: 10px;
    padding: 15px;
    background: var(--parchment-dark);
    border-top: 2px solid var(--parchment-edge);
}

.ai-dialogue-input {
    flex: 1;
    padding: 10px 15px;
    border: 2px solid var(--parchment-edge);
    border-radius: 20px;
    font-family: inherit;
    font-size: 0.95em;
    background: white;
}

.ai-dialogue-input:focus {
    outline: none;
    border-color: var(--gold);
}

.ai-dialogue-send {
    padding: 10px 20px;
    background: var(--gold);
    border: none;
    border-radius: 20px;
    color: var(--ink-brown);
    font-family: inherit;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.2s;
}

.ai-dialogue-send:hover {
    background: var(--gold-light);
}

.ai-dialogue-actions {
    display: flex;
    gap: 10px;
    padding: 15px;
    background: var(--parchment-light);
    border-top: 1px solid var(--parchment-edge);
    border-radius: 0 0 8px 8px;
}

.ai-action-btn {
    flex: 1;
    padding: 10px;
    background: var(--parchment-dark);
    border: 2px solid var(--parchment-edge);
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.9em;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.ai-action-btn:hover {
    background: var(--gold);
    border-color: var(--gold);
}

.ai-action-btn .icon {
    font-size: 1.1em;
}

/* Mobile adjustments for AI partner dialogue */
@media (max-width: 768px) {
    .ai-partner-dialogue {
        width: 95vw;
        max-height: 85vh;
    }

    .ai-dialogue-actions {
        flex-wrap: wrap;
    }

    .ai-action-btn {
        flex: 1 1 45%;
    }
}

/* =========================================
   Mobile Chat Button
   ========================================= */
.mobile-chat-btn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--gold), var(--gold-light));
    border: 3px solid var(--wood-dark);
    font-size: 28px;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
    z-index: 200;
    display: none; /* Hidden by default, shown on mobile via media query */
    align-items: center;
    justify-content: center;
    transition: transform 0.2s, box-shadow 0.2s;
}

.mobile-chat-btn:hover,
.mobile-chat-btn:active {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
}

.mobile-chat-btn.has-notification {
    animation: pulse 1s infinite;
}

.voice-settings-floating {
    position: fixed;
    right: 24px;
    bottom: 108px;
    z-index: 210;
}

.voice-settings-panel {
    position: fixed;
    right: 24px;
    bottom: 170px;
    width: min(380px, calc(100vw - 32px));
    max-height: calc(100vh - 210px);
    display: flex;
    flex-direction: column;
    background: rgba(16, 24, 37, 0.95);
    border: 1px solid rgba(208, 183, 135, 0.45);
    border-radius: 18px;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.35);
    overflow: hidden;
    z-index: 1600;
    backdrop-filter: blur(10px);
}

.voice-settings-panel.hidden {
    display: none;
}

.voice-settings-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px;
    background: linear-gradient(135deg, rgba(200, 169, 110, 0.22), rgba(64, 103, 150, 0.18));
    border-bottom: 1px solid rgba(208, 183, 135, 0.24);
}

.voice-settings-title {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.voice-settings-title strong {
    color: #f5e7c7;
    font-size: 16px;
}

.voice-settings-title span {
    color: rgba(239, 232, 214, 0.72);
    font-size: 12px;
}

.voice-settings-body {
    padding: 16px 18px 18px;
    overflow-y: auto;
    color: #f4efe2;
}

.voice-settings-status {
    padding: 12px 14px;
    margin-bottom: 14px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 13px;
    line-height: 1.45;
}

.voice-settings-status strong {
    display: block;
    margin-bottom: 4px;
}

.voice-settings-status.is-ready {
    border-color: rgba(127, 227, 161, 0.45);
}

.voice-settings-status.is-error {
    border-color: rgba(255, 138, 128, 0.45);
}

.voice-settings-grid {
    display: grid;
    gap: 14px;
}

.voice-settings-section {
    padding: 14px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.voice-settings-section h3 {
    margin: 0 0 10px 0;
    font-size: 14px;
    color: #f5e7c7;
}

.voice-settings-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.voice-settings-row:last-child {
    margin-bottom: 0;
}

.voice-settings-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
}

.voice-settings-toggle input {
    width: 18px;
    height: 18px;
}

.voice-settings-field {
    display: grid;
    gap: 6px;
}

.voice-settings-field label {
    font-size: 12px;
    color: rgba(239, 232, 214, 0.78);
}

.voice-settings-field input[type="text"],
.voice-settings-field input[type="range"],
.voice-settings-field textarea {
    width: 100%;
}

.voice-settings-field input[type="text"],
.voice-settings-field textarea {
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(9, 15, 24, 0.72);
    color: #fffaf0;
}

.voice-settings-field textarea {
    min-height: 72px;
    resize: vertical;
}

.voice-settings-meta {
    font-size: 12px;
    color: rgba(239, 232, 214, 0.66);
}

.voice-settings-actions {
    display: flex;
    gap: 10px;
    margin-top: 14px;
}

.voice-settings-actions .action-button,
.voice-settings-actions button {
    flex: 1;
}

@media (max-width: 900px) {
    .voice-settings-floating {
        right: 16px;
        bottom: 92px;
    }

    .voice-settings-panel {
        right: 16px;
        bottom: 150px;
        width: min(360px, calc(100vw - 24px));
        max-height: calc(100vh - 170px);
    }
}

/* =========================================
   Chat Bubbles (above player heads)
   ========================================= */
.chat-bubble {
    position: absolute;
    background: rgba(255, 255, 255, 0.95);
    border: 2px solid var(--gold);
    border-radius: 12px;
    padding: 8px 12px;
    max-width: 200px;
    font-size: 12px;
    color: var(--ink-brown);
    font-family: 'Georgia', serif;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
    pointer-events: none;
    z-index: 150;
    animation: bubbleFadeIn 0.3s ease;
    word-wrap: break-word;
}

.chat-bubble::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 10px 8px 0 8px;
    border-style: solid;
    border-color: var(--gold) transparent transparent transparent;
}

.chat-bubble::before {
    content: '';
    position: absolute;
    bottom: -7px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 8px 6px 0 6px;
    border-style: solid;
    border-color: rgba(255, 255, 255, 0.95) transparent transparent transparent;
    z-index: 1;
}

.chat-bubble.fading {
    animation: bubbleFadeOut 0.5s ease forwards;
}

@keyframes bubbleFadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes bubbleFadeOut {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-10px);
    }
}

@keyframes fadeInOut {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
    15% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    85% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
}

/* Food item click feedback */
.food-item {
    cursor: pointer;
    transition: transform 0.1s, background 0.2s;
}

.food-item:hover {
    background: rgba(201, 162, 39, 0.2);
    transform: scale(1.02);
}

.food-item:active {
    transform: scale(0.98);
    background: rgba(201, 162, 39, 0.3);
}

/* =========================================
   Fishing Panel
   ========================================= */
.fishing-panel {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 400px;
    max-width: 90vw;
    max-height: 80vh;
    background: linear-gradient(180deg, var(--parchment-light) 0%, var(--parchment-dark) 100%);
    border: 4px solid var(--wood-dark);
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    z-index: 2000;
    overflow: hidden;
}

.fishing-panel .panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: linear-gradient(180deg, var(--wood-medium) 0%, var(--wood-dark) 100%);
    color: var(--gold);
    font-size: 1.2em;
    font-weight: bold;
}

.fishing-panel-body {
    padding: 16px;
    max-height: calc(80vh - 60px);
    overflow-y: auto;
}

.fishing-spot-info {
    margin-bottom: 16px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 8px;
}

.fishing-spot-info .no-spot {
    color: var(--ink-light);
    font-style: italic;
    text-align: center;
}

.fishing-spot-info .spot-available {
    color: var(--ink-brown);
}

.fishing-fish-list {
    margin-bottom: 16px;
}

.fishing-fish-list h4 {
    margin-bottom: 8px;
    color: var(--ink-brown);
}

#fish-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.fish-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
}

.fish-item.rare {
    background: rgba(255, 215, 0, 0.2);
    border: 1px solid var(--gold);
}

.fish-item.uncommon {
    background: rgba(100, 200, 255, 0.2);
}

.fish-icon {
    font-size: 1.2em;
}

.fish-name {
    font-weight: bold;
}

.fish-rarity {
    font-size: 0.8em;
    color: var(--ink-light);
}

.fishing-controls {
    text-align: center;
    margin-bottom: 16px;
}

#cast-line-btn {
    padding: 12px 30px;
    font-size: 1.1em;
    background: linear-gradient(180deg, var(--gold) 0%, var(--gold-light) 100%);
    border: 2px solid var(--wood-dark);
    border-radius: 8px;
    color: var(--wood-dark);
    font-weight: bold;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

#cast-line-btn:hover:not(:disabled) {
    transform: scale(1.05);
    box-shadow: 0 4px 15px rgba(201, 162, 39, 0.5);
}

#cast-line-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.fishing-cooldown {
    margin-top: 10px;
    color: var(--ink-light);
    font-style: italic;
}

.fishing-result {
    padding: 12px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    margin-bottom: 16px;
}

.fishing-result .panel-result-card,
.taming-result .panel-result-card,
.gathering-result .panel-result-card {
    text-align: center;
}

.fishing-result .casting {
    color: var(--ink-light);
    font-style: italic;
    text-align: center;
}

.catch-success {
    color: #228B22;
}

.catch-success .result-message {
    margin-bottom: 10px;
    line-height: 1.5;
}

.catch-success .catch-details {
    font-size: 0.9em;
    color: var(--ink-light);
}

.catch-success .critical {
    color: var(--gold);
    font-weight: bold;
}

.catch-fail {
    color: #8B4513;
}

.catch-fail .fumble {
    color: #CC0000;
    font-weight: bold;
}

.fishing-stats {
    padding: 12px;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 8px;
}

.fishing-stats h4 {
    margin-bottom: 8px;
    color: var(--ink-brown);
}

/* =========================================
   Taming Panel
   ========================================= */
.taming-panel {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 450px;
    max-width: 90vw;
    max-height: 85vh;
    background: linear-gradient(180deg, var(--parchment-light) 0%, var(--parchment-dark) 100%);
    border: 4px solid var(--wood-dark);
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    z-index: 2000;
    overflow: hidden;
}

.taming-panel .panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: linear-gradient(180deg, var(--wood-medium) 0%, var(--wood-dark) 100%);
    color: var(--gold);
    font-size: 1.2em;
    font-weight: bold;
}

.taming-panel-body {
    padding: 16px;
    max-height: calc(85vh - 60px);
    overflow-y: auto;
}

.taming-location-info {
    margin-bottom: 16px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 8px;
}

.taming-location-info .scanning {
    color: var(--ink-light);
    font-style: italic;
    text-align: center;
}

.taming-location-info .no-animals {
    color: var(--ink-light);
    font-style: italic;
    text-align: center;
}

.taming-animals-list {
    margin-bottom: 16px;
}

.taming-animals-list h4 {
    margin-bottom: 12px;
    color: var(--ink-brown);
}

#animals-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.animal-item {
    padding: 12px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    border: 2px solid rgba(0, 0, 0, 0.1);
}

.animal-item.rare {
    background: rgba(255, 215, 0, 0.15);
    border-color: var(--gold);
}

.animal-item.uncommon {
    background: rgba(100, 200, 255, 0.15);
    border-color: #5CACEE;
}

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

.animal-emoji {
    font-size: 1.5em;
}

.animal-name {
    font-weight: bold;
    font-size: 1.1em;
}

.animal-rarity {
    font-size: 0.85em;
    color: var(--ink-light);
}

.animal-info {
    margin-bottom: 10px;
    font-size: 0.9em;
}

.animal-info .difficulty {
    color: var(--ink-brown);
    margin-bottom: 4px;
}

.animal-info .tip {
    color: var(--ink-light);
    font-style: italic;
}

.tame-btn {
    width: 100%;
    padding: 8px 16px;
    background: linear-gradient(180deg, var(--gold) 0%, var(--gold-light) 100%);
    border: 2px solid var(--wood-dark);
    border-radius: 6px;
    color: var(--wood-dark);
    font-weight: bold;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

.tame-btn:hover:not(:disabled) {
    transform: scale(1.02);
    box-shadow: 0 3px 10px rgba(201, 162, 39, 0.4);
}

.tame-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.taming-approach {
    margin-bottom: 16px;
}

.taming-approach h4 {
    margin-bottom: 8px;
    color: var(--ink-brown);
}

#approach-input {
    width: 100%;
    min-height: 80px;
    padding: 10px;
    border: 2px solid var(--parchment-edge);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.5);
    font-family: inherit;
    font-size: 0.95em;
    resize: vertical;
}

#approach-input:focus {
    outline: none;
    border-color: var(--gold);
}

.approach-hint {
    margin-top: 6px;
    font-size: 0.8em;
    color: var(--ink-light);
    font-style: italic;
}

.taming-result {
    padding: 12px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    margin-bottom: 16px;
}

.taming-result .attempting {
    color: var(--ink-light);
    font-style: italic;
    text-align: center;
}

.tame-success {
    text-align: center;
}

.tame-success .success-header {
    margin-bottom: 12px;
}

.tame-success .big-emoji {
    font-size: 3em;
    display: block;
    margin-bottom: 8px;
}

.tame-success h3 {
    color: #228B22;
}

.tame-success .result-message {
    margin-bottom: 10px;
    color: var(--ink-brown);
}

.tame-success .tame-details {
    font-size: 0.9em;
    color: var(--ink-light);
    margin-bottom: 10px;
}

.tame-success .critical {
    color: var(--gold);
    font-weight: bold;
}

.tame-success .xp-gain {
    color: #228B22;
    font-weight: bold;
}

.tame-success .companion-info {
    padding: 10px;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 6px;
}

.tame-fail {
    color: #8B4513;
}

.tame-fail .fumble {
    color: #CC0000;
    font-weight: bold;
}

.tame-fail .damage {
    color: #CC0000;
    font-weight: bold;
    margin-top: 8px;
}

.tame-error {
    color: #CC0000;
    text-align: center;
}

.taming-stats {
    padding: 12px;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 8px;
}

.taming-stats h4 {
    margin-bottom: 8px;
    color: var(--ink-brown);
}

/* ============== Equipment Panel ============== */
.equipment-panel {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 420px;
    max-width: 90vw;
    max-height: 85vh;
    background: linear-gradient(180deg, var(--parchment-light) 0%, var(--parchment-dark) 100%);
    border: 4px solid var(--wood-dark);
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    z-index: 2000;
    overflow: hidden;
}

.equipment-panel .panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: linear-gradient(180deg, var(--wood-medium) 0%, var(--wood-dark) 100%);
    color: var(--gold);
    font-size: 1.2em;
    font-weight: bold;
}

.equipment-panel-body {
    padding: 16px;
    max-height: calc(85vh - 60px);
    overflow-y: auto;
}

.equipped-section {
    margin-bottom: 16px;
}

.equipped-section h3,
.bonuses-section h3,
.equippable-section h3 {
    margin-bottom: 12px;
    color: var(--ink-brown);
    font-size: 1em;
    border-bottom: 1px solid var(--wood-light);
    padding-bottom: 4px;
}

.equipment-slots {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.equipment-slot {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.4);
    border-radius: 8px;
    border: 2px solid var(--wood-light);
}

.equipment-slot .slot-icon {
    font-size: 1.5em;
    width: 36px;
    text-align: center;
}

.equipment-slot .slot-info {
    flex: 1;
}

.equipment-slot .slot-label {
    font-size: 0.8em;
    color: var(--ink-light);
    text-transform: uppercase;
}

.equipment-slot .slot-item {
    font-weight: bold;
    color: var(--ink-light);
}

.equipment-slot .slot-item.has-item {
    color: var(--ink-brown);
}

.equipment-slot .unequip-btn {
    background: #CC4444;
    color: white;
    border: none;
    border-radius: 4px;
    padding: 4px 8px;
    cursor: pointer;
    font-size: 0.9em;
}

.equipment-slot .unequip-btn:hover {
    background: #AA2222;
}

.bonuses-section {
    margin-bottom: 16px;
}

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

.bonuses-grid .bonus {
    background: rgba(0, 100, 0, 0.1);
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.9em;
    color: #228B22;
}

.bonuses-grid .no-bonus {
    color: var(--ink-light);
    font-style: italic;
}

.equippable-section {
    margin-bottom: 16px;
}

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

.equippable-list .no-items {
    color: var(--ink-light);
    font-style: italic;
    text-align: center;
    padding: 12px;
}

.equippable-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 6px;
    border: 1px solid var(--wood-light);
}

.equippable-item .item-name {
    color: var(--ink-brown);
}

.equippable-item .equip-btn {
    background: linear-gradient(180deg, var(--gold) 0%, var(--gold-dark) 100%);
    color: var(--ink-brown);
    border: 2px solid var(--wood-dark);
    border-radius: 4px;
    padding: 4px 12px;
    cursor: pointer;
    font-weight: bold;
    font-size: 0.85em;
}

.equippable-item .equip-btn:hover {
    background: linear-gradient(180deg, var(--gold-dark) 0%, var(--gold) 100%);
}

/* ============== Repair Section ============== */
.repair-section {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 2px solid var(--wood-light);
}

.repair-section h3 {
    margin-bottom: 8px;
    color: var(--ink-brown);
}

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

.repairable-list .no-items {
    color: var(--ink-light);
    font-style: italic;
    text-align: center;
    padding: 12px;
}

.repairable-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 6px;
    border: 1px solid var(--wood-light);
    gap: 12px;
}

.repairable-item.cannot-repair {
    opacity: 0.6;
}

.repair-item-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.repair-item-info .item-name {
    color: var(--ink-brown);
    font-weight: bold;
}

.durability-bar {
    width: 100%;
    height: 8px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    overflow: hidden;
}

.durability-fill {
    height: 100%;
    transition: width 0.3s ease;
}

.durability-text {
    font-size: 0.8em;
    color: var(--ink-light);
}

.repair-cost {
    font-size: 0.8em;
    color: var(--gold-dark);
    margin-top: 2px;
}

.repair-btn {
    background: linear-gradient(180deg, #6a8, #4a6);
    color: white;
    border: 2px solid var(--wood-dark);
    border-radius: 4px;
    padding: 6px 12px;
    cursor: pointer;
    font-weight: bold;
    font-size: 0.85em;
    white-space: nowrap;
}

.repair-btn:hover:not([disabled]) {
    background: linear-gradient(180deg, #5a7, #396);
}

.repair-btn[disabled] {
    background: #888;
    cursor: not-allowed;
}

/* ============== Transformation Panel ============== */
.transformation-panel {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: linear-gradient(180deg, var(--parchment-light) 0%, var(--parchment-dark) 100%);
    border: 4px solid var(--wood-dark);
    border-radius: 15px;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
    width: 90%;
    max-width: 500px;
    max-height: 85vh;
    overflow: hidden;
    z-index: 9999;
}

.transformation-panel-body {
    padding: 16px;
    max-height: calc(85vh - 50px);
    overflow-y: auto;
}

.current-form-section {
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 2px solid var(--wood-light);
}

.current-form-section h3,
.available-forms-section h3 {
    color: var(--ink-brown);
    margin-bottom: 12px;
}

.current-form-display {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: rgba(255, 255, 255, 0.4);
    border-radius: 10px;
    border: 2px solid var(--gold);
}

.current-form-display .form-icon {
    font-size: 48px;
}

.current-form-display .form-info {
    flex: 1;
}

.current-form-display .form-name {
    font-size: 1.3em;
    font-weight: bold;
    color: var(--ink-brown);
}

.current-form-display .form-description {
    color: var(--ink-light);
    font-style: italic;
    margin-top: 4px;
}

.form-bonuses {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.form-bonuses .bonus {
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.9em;
}

.form-bonuses .bonus-positive {
    background: rgba(80, 180, 80, 0.3);
    border: 1px solid #4a4;
}

.form-bonuses .bonus-negative {
    background: rgba(180, 80, 80, 0.3);
    border: 1px solid #a44;
}

.form-bonuses .no-bonus {
    color: var(--ink-light);
    font-style: italic;
}

.form-effects {
    margin-top: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.effects-label,
.restrictions-label {
    width: 100%;
    font-size: 0.85em;
    color: var(--ink-light);
    margin-bottom: 4px;
}

.effect-tag {
    background: rgba(200, 150, 50, 0.3);
    border: 1px solid var(--gold);
    padding: 3px 8px;
    border-radius: 10px;
    font-size: 0.85em;
}

.restrictions {
    margin-top: 8px;
    width: 100%;
}

.restriction-tag {
    background: rgba(180, 80, 80, 0.2);
    border: 1px solid #a66;
    padding: 3px 8px;
    border-radius: 10px;
    font-size: 0.85em;
    display: inline-block;
    margin: 2px;
}

.character-type {
    font-size: 0.9em;
    color: var(--ink-light);
    margin-bottom: 12px;
    text-transform: capitalize;
}

.forms-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.forms-list .no-forms {
    color: var(--ink-light);
    font-style: italic;
    text-align: center;
    padding: 20px;
}

.form-card {
    background: rgba(255, 255, 255, 0.4);
    border: 2px solid var(--wood-light);
    border-radius: 10px;
    padding: 12px;
}

.form-card.on-cooldown {
    opacity: 0.6;
}

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

.form-card-icon {
    font-size: 32px;
}

.form-card-title {
    display: flex;
    flex-direction: column;
}

.form-card-name {
    font-weight: bold;
    color: var(--ink-brown);
}

.form-card-type {
    font-size: 0.8em;
    color: var(--ink-light);
    text-transform: capitalize;
}

.form-card-desc {
    font-size: 0.9em;
    color: var(--ink-light);
    margin-bottom: 8px;
    font-style: italic;
}

.form-card-bonuses {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}

.form-card-bonuses .bonus {
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.8em;
}

.cooldown-text {
    color: #a66;
    font-size: 0.9em;
    margin-bottom: 8px;
}

.transform-btn {
    width: 100%;
    background: linear-gradient(180deg, #8a6, #686);
    color: white;
    border: 2px solid var(--wood-dark);
    border-radius: 6px;
    padding: 8px 16px;
    cursor: pointer;
    font-weight: bold;
    font-size: 1em;
    transition: background 0.2s;
}

.transform-btn:hover:not([disabled]) {
    background: linear-gradient(180deg, #9b7, #797);
}

.transform-btn[disabled] {
    background: #888;
    cursor: not-allowed;
}

/* ============== Item Context Menu ============== */
.item-context-menu {
    background: linear-gradient(180deg, var(--parchment-light) 0%, var(--parchment-dark) 100%);
    border: 3px solid var(--wood-dark);
    border-radius: 10px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
    min-width: 180px;
    overflow: hidden;
}

.item-menu-header {
    padding: 12px 16px;
    background: rgba(0, 0, 0, 0.1);
    border-bottom: 3px solid var(--wood-light);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.item-menu-name {
    font-weight: bold;
    color: var(--ink-brown);
}

.item-menu-qty {
    background: var(--wood-dark);
    color: var(--gold);
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.85em;
}

.item-menu-options {
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.item-menu-btn {
    display: block;
    width: 100%;
    padding: 10px 12px;
    text-align: left;
    background: rgba(255, 255, 255, 0.4);
    border: 1px solid var(--wood-light);
    border-radius: 6px;
    cursor: pointer;
    color: var(--ink-brown);
    font-size: 0.95em;
    transition: background 0.2s;
}

.item-menu-btn:hover {
    background: rgba(255, 255, 255, 0.7);
}

.item-menu-close {
    position: absolute;
    top: 8px;
    right: 8px;
    background: none;
    border: none;
    font-size: 1.2em;
    cursor: pointer;
    color: var(--ink-light);
    padding: 4px 8px;
}

.item-menu-close:hover {
    color: var(--ink-brown);
}

/* ==================== PLAYER HUB ==================== */

.player-hub {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 450px;
    max-width: 95vw;
    max-height: 80vh;
    background: linear-gradient(135deg, #f4e4bc 0%, #d4c4a0 100%);
    border: 3px solid #5d4e37;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.player-hub.hidden {
    display: none;
}

/* Hub Tabs */
.hub-tabs {
    display: flex;
    background: var(--wood-dark);
    padding: 0;
    gap: 0;
}

.hub-tab {
    flex: 1;
    padding: 12px 8px;
    background: var(--wood-medium);
    border: none;
    border-right: 1px solid var(--wood-dark);
    color: var(--parchment);
    cursor: pointer;
    font-size: 0.9em;
    transition: all 0.2s;
}

.hub-tab:last-child {
    border-right: none;
}

.hub-tab:hover {
    background: var(--wood-light);
}

.hub-tab.active {
    background: var(--parchment);
    color: var(--ink-brown);
}

/* Hub Content */
.hub-content {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
}

.hub-tab-content {
    display: block;
}

.hub-tab-content.hidden {
    display: none;
}

/* ==================== ACHIEVEMENTS ==================== */

.achievements-summary {
    text-align: center;
    padding: 12px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 8px;
    margin-bottom: 16px;
    font-weight: bold;
    color: var(--ink-brown);
}

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

.achievement-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 8px;
    border-left: 4px solid var(--wood-light);
    transition: all 0.2s;
}

.achievement-item.unlocked {
    border-left-color: var(--gold);
    background: linear-gradient(90deg, rgba(255, 215, 0, 0.2) 0%, rgba(255, 255, 255, 0.6) 30%);
}

.achievement-item.locked {
    opacity: 0.7;
}

.achievement-item.hidden-ach {
    opacity: 0.5;
    font-style: italic;
}

.achievement-icon {
    font-size: 1.8em;
    min-width: 40px;
    text-align: center;
}

.achievement-info {
    flex: 1;
}

.achievement-name {
    font-weight: bold;
    color: var(--ink-brown);
    margin-bottom: 4px;
}

.achievement-desc {
    font-size: 0.9em;
    color: var(--ink-light);
}

.achievement-progress {
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.progress-bar {
    flex: 1;
    height: 8px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--gold), #ffd700);
    border-radius: 4px;
    transition: width 0.3s;
}

.progress-text {
    font-size: 0.8em;
    color: var(--ink-light);
    min-width: 50px;
    text-align: right;
}

.achievement-title {
    margin-top: 6px;
    font-size: 0.85em;
    color: var(--gold);
    font-style: italic;
}

.achievement-reward {
    font-size: 0.85em;
    color: var(--gold);
    font-weight: bold;
    background: rgba(0, 0, 0, 0.1);
    padding: 4px 8px;
    border-radius: 12px;
}

/* ==================== RELATIONSHIPS ==================== */

.relationships-intro {
    text-align: center;
    padding: 8px;
    color: var(--ink-light);
    margin-bottom: 12px;
}

.relationships-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.relationship-item {
    display: flex;
    gap: 12px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 8px;
}

.npc-portrait {
    font-size: 2em;
    min-width: 50px;
    text-align: center;
}

.relationship-info {
    flex: 1;
}

.npc-name {
    font-weight: bold;
    color: var(--ink-brown);
    margin-bottom: 8px;
}

.reputation-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}

.rep-label {
    font-size: 0.85em;
    color: var(--ink-light);
}

.rep-level {
    font-size: 0.85em;
    font-weight: bold;
    padding: 2px 8px;
    border-radius: 10px;
}

.rep-level.hostile { background: #8b0000; color: white; }
.rep-level.unfriendly { background: #cd5c5c; color: white; }
.rep-level.neutral { background: #808080; color: white; }
.rep-level.friendly { background: #3cb371; color: white; }
.rep-level.honored { background: #4169e1; color: white; }
.rep-level.exalted { background: linear-gradient(135deg, #ffd700, #ff8c00); color: #333; }

.rep-bar-container {
    flex: 1;
    min-width: 80px;
    height: 6px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
    overflow: hidden;
}

.rep-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s;
}

.rep-bar-fill.hostile { background: #8b0000; }
.rep-bar-fill.unfriendly { background: #cd5c5c; }
.rep-bar-fill.neutral { background: #808080; }
.rep-bar-fill.friendly { background: #3cb371; }
.rep-bar-fill.honored { background: #4169e1; }
.rep-bar-fill.exalted { background: linear-gradient(90deg, #ffd700, #ff8c00); }

.rep-value {
    font-size: 0.8em;
    color: var(--ink-light);
    min-width: 30px;
    text-align: right;
}

.flirt-status {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.9em;
}

.flirt-hearts {
    letter-spacing: -2px;
}

.flirt-level {
    color: #e75480;
    font-weight: bold;
}

.flirt-count {
    color: var(--ink-light);
    font-size: 0.85em;
}

.no-relationships {
    text-align: center;
    padding: 24px;
    color: var(--ink-light);
}

.no-relationships .hint {
    font-size: 0.9em;
    margin-top: 8px;
    opacity: 0.7;
}

/* ==================== DAILY REWARDS ==================== */

.daily-reward-container {
    text-align: center;
    padding: 24px;
}

.daily-icon {
    font-size: 4em;
    margin-bottom: 16px;
    animation: float 2s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.daily-description {
    color: var(--ink-light);
    margin-bottom: 20px;
}

.daily-cooldown {
    margin-top: 16px;
    padding: 12px;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 8px;
}

#daily-timer {
    font-size: 1.5em;
    font-weight: bold;
    color: var(--ink-brown);
    font-family: monospace;
}

.daily-result {
    margin-top: 16px;
}

.reward-success {
    padding: 16px;
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.3) 0%, rgba(255, 255, 255, 0.5) 100%);
    border-radius: 8px;
    border: 2px solid var(--gold);
}

.reward-sparkle {
    font-size: 2em;
    margin-bottom: 8px;
}

.reward-amount {
    font-size: 1.3em;
    font-weight: bold;
    color: var(--gold);
}

/* ==================== WEATHER DISPLAY ==================== */

.weather-display {
    position: fixed;
    top: 70px;
    right: 20px;
    background: rgba(255, 255, 255, 0.85);
    padding: 8px 16px;
    border-radius: 20px;
    border: 2px solid var(--wood-light);
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9em;
    z-index: 100;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.weather-icon {
    font-size: 1.3em;
}

.weather-text {
    color: var(--ink-brown);
}

.weather-effect {
    font-size: 0.8em;
    color: var(--ink-light);
    margin-left: 4px;
}

/* ==================== PVP COMBAT ==================== */

.pvp-panel {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 400px;
    max-width: 95vw;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border: 3px solid #e94560;
    border-radius: 12px;
    box-shadow: 0 0 30px rgba(233, 69, 96, 0.5);
    z-index: 1001;
    color: white;
    overflow: hidden;
}

.pvp-panel.hidden {
    display: none;
}

.pvp-header {
    background: linear-gradient(90deg, #e94560, #0f3460);
    text-align: center;
    font-size: 1.3em;
    font-weight: bold;
    padding: 12px;
    text-shadow: 0 0 10px rgba(255,255,255,0.5);
}

.pvp-arena {
    padding: 16px;
}

.pvp-combatants {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.pvp-player {
    text-align: center;
    flex: 1;
}

.pvp-name {
    font-weight: bold;
    margin-bottom: 8px;
    font-size: 1.1em;
}

.pvp-hp-bar {
    width: 100%;
    height: 12px;
    background: #333;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid #555;
}

.pvp-hp-fill {
    height: 100%;
    background: linear-gradient(90deg, #00ff00, #88ff88);
    transition: width 0.3s ease;
}

.pvp-self .pvp-hp-fill {
    background: linear-gradient(90deg, #4CAF50, #8BC34A);
}

.pvp-enemy .pvp-hp-fill {
    background: linear-gradient(90deg, #e94560, #ff6b6b);
}

.pvp-hp-text {
    font-size: 0.85em;
    margin-top: 4px;
    color: #aaa;
}

.pvp-vs {
    font-size: 1.5em;
    font-weight: bold;
    color: #e94560;
    text-shadow: 0 0 10px #e94560;
    padding: 0 16px;
}

.pvp-round {
    text-align: center;
    font-size: 0.9em;
    color: #888;
    margin-bottom: 12px;
}

.pvp-log {
    background: rgba(0,0,0,0.3);
    border-radius: 8px;
    padding: 12px;
    height: 150px;
    overflow-y: auto;
    margin-bottom: 16px;
    font-size: 0.9em;
}

.pvp-log-entry {
    margin: 4px 0;
    padding: 4px 8px;
    border-radius: 4px;
}

.pvp-log-entry.hit { color: #4CAF50; }
.pvp-log-entry.miss { color: #888; }
.pvp-log-entry.hurt { color: #e94560; }
.pvp-log-entry.dodge { color: #64b5f6; }
.pvp-log-entry.victory { color: #ffd700; font-weight: bold; }
.pvp-log-entry.defeat { color: #e94560; font-weight: bold; }
.pvp-log-entry.draw { color: #888; font-weight: bold; }
.pvp-log-entry.flee { color: #ff9800; }
.pvp-log-entry.reward { color: #4CAF50; }
.pvp-log-entry.penalty { color: #e94560; }

.pvp-actions {
    display: flex;
    gap: 12px;
}

.pvp-btn {
    flex: 1;
    padding: 12px;
    border: none;
    border-radius: 8px;
    font-size: 1em;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s;
}

.pvp-btn.attack {
    background: linear-gradient(135deg, #e94560, #ff6b6b);
    color: white;
}

.pvp-btn.attack:hover:not(:disabled) {
    transform: scale(1.05);
    box-shadow: 0 0 15px rgba(233, 69, 96, 0.6);
}

.pvp-btn.flee {
    background: linear-gradient(135deg, #555, #777);
    color: white;
}

.pvp-btn.flee:hover:not(:disabled) {
    background: linear-gradient(135deg, #666, #888);
}

.pvp-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.pvp-waiting {
    text-align: center;
    color: #888;
    padding: 12px;
}

/* Challenge Popups */
.pvp-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border: 3px solid #e94560;
    border-radius: 12px;
    padding: 24px;
    z-index: 1002;
    text-align: center;
    color: white;
    min-width: 300px;
    box-shadow: 0 0 30px rgba(233, 69, 96, 0.5);
}

.pvp-popup.hidden {
    display: none;
}

.pvp-popup h3 {
    margin: 0 0 16px 0;
    color: #e94560;
}

.pvp-timer-bar {
    width: 100%;
    height: 6px;
    background: #333;
    border-radius: 3px;
    margin: 16px 0;
    overflow: hidden;
}

.pvp-timer-fill {
    height: 100%;
    background: linear-gradient(90deg, #e94560, #ffd700);
    transition: width 1s linear;
}

.pvp-popup-buttons {
    display: flex;
    gap: 12px;
    margin-top: 16px;
}

.pvp-btn.accept {
    background: linear-gradient(135deg, #4CAF50, #8BC34A);
    color: white;
}

.pvp-btn.decline {
    background: linear-gradient(135deg, #666, #888);
    color: white;
}

.pvp-btn.cancel {
    background: linear-gradient(135deg, #666, #888);
    color: white;
    margin-top: 12px;
}

/* ==================== STEALING ==================== */

.steal-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: linear-gradient(135deg, var(--parchment) 0%, var(--parchment-dark) 100%);
    border: 3px solid var(--wood-dark);
    border-radius: 12px;
    padding: 24px;
    z-index: 1002;
    text-align: center;
    min-width: 320px;
    max-width: 90vw;
    box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}

.steal-popup.hidden {
    display: none;
}

.steal-popup.success {
    border-color: #4CAF50;
}

.steal-popup.caught {
    border-color: #e94560;
}

.steal-popup.warning {
    border-color: #ff9800;
}

.steal-popup.fail {
    border-color: #888;
}

.steal-icon {
    font-size: 3em;
    margin-bottom: 12px;
}

.steal-popup h3 {
    margin: 0 0 12px 0;
    color: var(--ink-brown);
}

.steal-popup.success h3 { color: #4CAF50; }
.steal-popup.caught h3 { color: #e94560; }
.steal-popup.warning h3 { color: #ff9800; }

.steal-popup p {
    color: var(--ink-brown);
    margin-bottom: 12px;
    white-space: pre-line;
}

.steal-details {
    font-size: 0.85em;
    color: var(--ink-light);
    background: rgba(0,0,0,0.05);
    padding: 8px;
    border-radius: 6px;
    margin-bottom: 16px;
    white-space: pre-line;
}

/* Notification animations */
@keyframes slideDown {
    from {
        transform: translateX(-50%) translateY(-20px);
        opacity: 0;
    }
    to {
        transform: translateX(-50%) translateY(0);
        opacity: 1;
    }
}

@keyframes fadeOut {
    to {
        opacity: 0;
    }
}

@keyframes fadeInOut {
    0% { opacity: 0; transform: translateX(-50%) translateY(-10px); }
    15% { opacity: 1; transform: translateX(-50%) translateY(0); }
    85% { opacity: 1; }
    100% { opacity: 0; }
}

/* ==================== PLAYER INTERACTION MENU ==================== */

.player-interaction-menu {
    animation: menuFadeIn 0.15s ease;
}

@keyframes menuFadeIn {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.player-menu-header {
    background: #8b4513;
    color: white;
    padding: 8px 12px;
    font-weight: bold;
    text-align: center;
}

.player-menu-options {
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.player-menu-btn {
    display: block;
    width: 100%;
    padding: 10px 12px;
    text-align: left;
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid #8b4513;
    border-radius: 6px;
    cursor: pointer;
    color: #3d2914;
    font-size: 0.95em;
    transition: all 0.2s;
}

.player-menu-btn:hover {
    background: rgba(255, 255, 255, 0.9);
    transform: translateX(3px);
}

.player-menu-btn.duel-btn:hover {
    background: linear-gradient(90deg, rgba(233, 69, 96, 0.2) 0%, rgba(255, 255, 255, 0.9) 30%);
    border-color: #e94560;
}

.player-menu-btn.steal-btn:hover {
    background: linear-gradient(90deg, rgba(128, 0, 128, 0.2) 0%, rgba(255, 255, 255, 0.9) 30%);
    border-color: purple;
}

.player-menu-btn.close-btn {
    background: rgba(0, 0, 0, 0.1);
    color: #666;
    text-align: center;
}

.player-menu-btn.close-btn:hover {
    background: rgba(0, 0, 0, 0.2);
}

/* ==================== GATHERING PANEL ==================== */

.gathering-panel {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 380px;
    max-width: 95vw;
    max-height: 80vh;
    background: linear-gradient(135deg, #f4e4bc 0%, #d4c4a0 100%);
    border: 3px solid #5d4e37;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.gathering-panel.hidden {
    display: none;
}

.gathering-body {
    padding: 16px;
    overflow-y: auto;
}

.gathering-location {
    text-align: center;
    font-weight: bold;
    color: #5d4e37;
    padding: 8px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 8px;
    margin-bottom: 16px;
}

.gathering-section {
    margin-bottom: 16px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.4);
    border-radius: 8px;
}

.gathering-section h4 {
    margin: 0 0 8px 0;
    color: #5d4e37;
}

.section-hint {
    font-size: 0.85em;
    color: #666;
    margin: 0 0 8px 0;
}

.resource-list, .collectible-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 12px;
}

.resource-item, .collectible-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 6px;
    font-size: 0.9em;
}

.resource-item.rare {
    background: linear-gradient(90deg, rgba(255, 215, 0, 0.3) 0%, rgba(255, 255, 255, 0.6) 30%);
    border: 1px solid gold;
}

.resource-icon, .collectible-icon {
    font-size: 1.2em;
}

.resource-name, .collectible-name {
    flex: 1;
    color: #3d2914;
}

.resource-dc {
    font-size: 0.8em;
    color: #666;
    background: rgba(0, 0, 0, 0.1);
    padding: 2px 6px;
    border-radius: 10px;
}

.gather-action, .search-action {
    width: 100%;
    margin-top: 8px;
}

.gather-action {
    background: linear-gradient(135deg, #4CAF50, #8BC34A) !important;
}

.search-action {
    background: linear-gradient(135deg, #9c27b0, #ce93d8) !important;
}

.cooldown-display {
    text-align: center;
    font-size: 0.9em;
    color: #666;
    margin-top: 8px;
}

.gathering-result {
    margin-top: 16px;
    padding: 16px;
    border-radius: 8px;
    text-align: center;
}

.gather-success, .search-success {
    background: rgba(76, 175, 80, 0.2);
    border: 1px solid #4CAF50;
    border-radius: 8px;
    padding: 12px;
}

.gather-fail, .search-fail {
    background: rgba(0, 0, 0, 0.05);
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 12px;
}

.result-icon {
    font-size: 2em;
    margin-bottom: 8px;
}

.result-message {
    font-weight: bold;
    color: #3d2914;
}

.result-roll {
    font-size: 0.85em;
    color: #666;
    margin-top: 8px;
}

.critical-text {
    color: gold;
    font-weight: bold;
    text-shadow: 0 0 5px rgba(255, 215, 0, 0.5);
}

.item-description {
    font-style: italic;
    color: #666;
    font-size: 0.9em;
    margin-top: 4px;
}

.no-resources, .no-items {
    text-align: center;
    color: #888;
    font-style: italic;
    padding: 12px;
}

/* =========================================
   Map Panel
   ========================================= */
.map-panel {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 800px;
    max-height: 85vh;
    background: var(--parchment-light);
    border: 4px solid var(--parchment-edge);
    border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    z-index: 10001;
    display: flex;
    flex-direction: column;
}

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

.map-body {
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    overflow: auto;
}

.map-container {
    position: relative;
    width: 100%;
    height: 350px;
    background: linear-gradient(135deg, #2a3a2a 0%, #1a2a1a 50%, #2a3a2a 100%);
    border: 3px solid var(--wood-dark);
    border-radius: 6px;
    overflow: hidden;
}

.map-connections {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.map-line {
    stroke: rgba(255, 255, 255, 0.3);
    stroke-width: 2;
    stroke-dasharray: 5, 5;
}

.map-line.current-path {
    stroke: var(--gold);
    stroke-width: 3;
    stroke-dasharray: none;
}

.map-locations {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.map-marker {
    position: absolute;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.map-marker:hover {
    transform: translate(-50%, -50%) scale(1.15);
    z-index: 10;
}

.marker-icon {
    font-size: 24px;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid rgba(255, 255, 255, 0.3);
}

.map-marker.current .marker-icon {
    border-color: var(--gold);
    box-shadow: 0 0 15px var(--gold), 0 0 30px rgba(201, 162, 39, 0.5);
    animation: pulse-glow 2s infinite;
}

.map-marker.connected .marker-icon {
    border-color: #4CAF50;
    background: rgba(76, 175, 80, 0.3);
}

/* Hub portal marker (The Crossroads) */
.map-marker.hub .marker-icon {
    border-color: #9c27b0;
    background: rgba(156, 39, 176, 0.3);
    box-shadow: 0 0 10px rgba(156, 39, 176, 0.5);
}

.map-marker.hub.connected .marker-icon {
    border-color: #e040fb;
    background: rgba(224, 64, 251, 0.3);
    box-shadow: 0 0 15px rgba(224, 64, 251, 0.6);
}

@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 15px var(--gold), 0 0 30px rgba(201, 162, 39, 0.5); }
    50% { box-shadow: 0 0 20px var(--gold), 0 0 40px rgba(201, 162, 39, 0.7); }
}

.marker-label {
    font-size: 10px;
    color: white;
    text-shadow: 1px 1px 2px black, -1px -1px 2px black;
    white-space: nowrap;
    margin-top: 4px;
    background: rgba(0, 0, 0, 0.6);
    padding: 2px 6px;
    border-radius: 4px;
}

.map-legend {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 15px;
    flex-wrap: wrap;
}

.location-info {
    flex: 1;
    min-width: 200px;
    background: var(--parchment-dark);
    padding: 12px;
    border-radius: 6px;
    border: 2px solid var(--parchment-edge);
}

.location-info h3 {
    margin: 0 0 8px 0;
    color: var(--ink-brown);
    font-size: 1.1em;
}

.location-info p {
    margin: 0;
    color: var(--ink-light);
    font-size: 0.95em;
}

.legend-items {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 0.85em;
    color: var(--ink-light);
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.legend-current { color: var(--gold); font-size: 1.2em; }
.legend-connected { color: #4CAF50; font-size: 1.2em; }
.legend-other { color: rgba(255, 255, 255, 0.5); font-size: 1.2em; }

/* Mobile adjustments for map */
@media (max-width: 600px) {
    .map-container {
        height: 280px;
    }
    
    .marker-icon {
        width: 32px;
        height: 32px;
        font-size: 18px;
    }
    
    .marker-label {
        font-size: 8px;
    }
    
    .map-legend {
        flex-direction: column;
    }
}