/* --- got-game.css --- */
/* Game of Thrones (Whispers of Westeros) - Custom Theme */
/* Base foundation might derive from hp-game.css principles but heavily themed */
/* ADDED: Scroll enhancements and adjustments based on user feedback */

/* --- Root Variables (GoT Theme) --- */
:root {
    /* Core Palette - Stone, Steel, Deep Shadows, Rich Accents */
    --got-bg-deep: #0a0a0a; /* Near black, deeper */
    --got-bg-primary: #14161a; /* Dark stone/castle wall */
    --got-bg-secondary: #1f2329; /* Slightly lighter stone/sidebar */
    --got-bg-content: #242930; /* Modal bodies, darker parchment */
    --got-bg-input: #1a1e24; /* Dark input fields */
    --got-bg-hover: rgba(200, 205, 215, 0.07); /* Subtle cool hover */
    --got-bg-selected: rgba(170, 180, 190, 0.15); /* Selection highlight */
    --got-bg-gradient-header: linear-gradient(to bottom, rgba(20, 22, 26, 0.98), rgba(20, 22, 26, 0.85));
    --got-bg-gradient-footer: linear-gradient(to top, rgba(10, 10, 10, 0.95), rgba(10, 10, 10, 0.8));
    --got-bg-gradient-sidebar: linear-gradient(170deg, var(--got-bg-secondary), #2a3038);

    /* Text Palette */
    --got-text-primary: #d1d5db; /* Off-white, slightly cooler */
    --got-text-secondary: #9ca3af; /* Stone gray */
    --got-text-muted: #6b7280; /* Darker muted gray */
    --got-text-link: #87ceeb; /* Sky Blue / Ice */
    --got-text-link-hover: #aaddff; /* Lighter Ice Blue */
    --got-text-highlight: #facc15; /* Gold/Yellow */

    /* Accents (House/Region Influenced) */
    --got-accent-gold: #facc15; /* Lannister/Wealth Gold */
    --got-accent-gold-hover: #fde047;
    --got-accent-red: #dc2626; /* Lannister/Blood Red */
    --got-accent-red-hover: #ef4444;
    --got-accent-green: #16a34a; /* Tyrell Green? */
    --got-accent-blue: #3b82f6; /* Stark/North Blue? Water? */
    --got-accent-orange: #f97316; /* Martell Orange? Fire? */
    --got-accent-gray: #6b7280; /* Stark Gray */
    --got-accent-white: #f9fafb; /* Snow/Ice */
    --got-accent-purple: #a855f7; /* Targaryen? Magic? */


    /* Borders */
    --got-border-primary: #374151; /* Dark stone edges */
    --got-border-secondary: #4b5563; /* Lighter stone edges */
    --got-border-accent: var(--got-accent-blue); /* Focus highlight border */
    --got-border-gold: #b45309; /* Darker gold border */
    --got-border-modal: #4b5563; /* Border for modal components */

    /* Scrollbar */
    --got-scroll-track: rgba(10, 10, 10, 0.6); /* Dark transparent track */
    --got-scroll-thumb: #4b5563;
    --got-scroll-thumb-hover: #6b7280;

    /* Shadows */
    --shadow-color-base-got: rgba(0, 0, 0, 0.5);
    --shadow-color-highlight-got: rgba(59, 130, 246, 0.3); /* Use Blue for focus glow */
    --shadow-sm-got: 0 2px 4px var(--shadow-color-base-got);
    --shadow-md-got: 0 5px 10px var(--shadow-color-base-got);
    --shadow-lg-got: 0 12px 35px var(--shadow-color-base-got);
    --shadow-inset-got: inset 0 2px 5px rgba(0,0,0,0.4);
    --shadow-focus-got: 0 0 0 3px var(--shadow-color-highlight-got);
    --shadow-text-got: 1px 1px 3px rgba(0, 0, 0, 0.8);

    /* Fonts */
    --font-primary-text-got: 'Georgia', Cambria, "Times New Roman", Times, serif; /* Maintain classic readability */
    --font-ui-got: 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif; /* Cleaner UI font */
    --font-title-got: 'Cinzel', serif; /* Epic title font */
    --font-accent-got: 'Marcellus SC', serif; /* Or another thematic font */


    /* Sizes */
    --header-height-got: 60px;
    --footer-height-got: auto; /* Let content define height, min 65px */
    --min-footer-height-got: 65px;
    --sidebar-width-got: 280px;
    --utility-sidebar-width-got: 260px;
    --container-padding-got: 1.4rem; /* ~22px */

    /* Animations & Radius */
    --transition-fast-got: 0.18s ease-out;
    --transition-med-got: 0.35s ease-out;
    --transition-smooth-got: 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    --transition-bounce-got: 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);

    --radius-sm-got: 3px; /* Sharper edges */
    --radius-md-got: 6px;
    --radius-lg-got: 10px;
    --radius-xl-got: 14px;
    --radius-full-got: 50%;

    /* Z-Index */
    --z-base: 1;
    --z-content: 10;
    --z-sticky: 100;
    --z-modal-backdrop: 990;
    --z-sidebar: 995; /* Mobile sidebar */
    --z-modal: 1000;
    --z-overlay: 1050; /* Loading/Error */
    --z-header: 500;
    --z-footer: 500;

    /* GoT House Colors */
    --got-stark: #6b7280; --got-stark-accent: #f9fafb; /* Gray, White */
    --got-lannister: #dc2626; --got-lannister-accent: #facc15; /* Red, Gold */
    --got-targaryen: #1f2329; --got-targaryen-accent: #ef4444; /* Black/Dark Gray, Red */
    --got-baratheon: #facc15; --got-baratheon-accent: #1f2329; /* Gold, Black */
    --got-tyrell: #16a34a; --got-tyrell-accent: #facc15; /* Green, Gold */
    --got-martell: #f97316; --got-martell-accent: #facc15; /* Orange, Gold */
    --got-greyjoy: #111827; --got-greyjoy-accent: #ca8a04; /* Dark Gray/Black, Dark Gold */
    --got-arryn: #3b82f6; --got-arryn-accent: #f9fafb; /* Blue, White */

    /* Health Colors */
    --got-health-good: var(--got-accent-green);
    --got-health-medium: var(--got-accent-orange);
    --got-health-low: var(--got-accent-red);

    /* Relation Colors */
    --got-relation-positive: var(--got-accent-green);
    --got-relation-negative: var(--got-accent-red);
    --got-relation-neutral: var(--got-text-secondary);

    /* Message Backgrounds */
    --got-msg-ai-bg: rgba(31, 35, 41, 0.85); /* --got-bg-secondary */
    --got-msg-user-bg: rgba(41, 46, 54, 0.9); /* Darker, less blue */
    --got-msg-sys-bg: rgba(10, 10, 10, 0.6); /* Deeper background */

    /* Noise BG (Keep simple one) */
    --bg-noise-url-got: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3Cfilter id='opacity'><feComponentTransfer><feFuncA type='linear' slope='0.06'/></feComponentTransfer></feFilter>%3Crect width='100%25' height='100%25' filter='url(%23n) url(%23opacity)'/%3E%3C/svg%3E");
}


/* --- Base Styles --- */
html {
    box-sizing: border-box;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

*, *:before, *:after {
    box-sizing: inherit;
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

/* Use GoT theme class */
body.got-theme {
    font-family: var(--font-ui-got);
    line-height: 1.65; /* Slightly more spacing */
    color: var(--got-text-primary);
    background-color: var(--got-bg-deep);
    /* Apply noise */
    background-image: var(--bg-noise-url-got), linear-gradient(to bottom right, var(--got-bg-deep), #050607);
    background-attachment: fixed, fixed;
    min-height: 100vh;
    overflow: hidden;
    display: flex;
    position: relative;
}

/* Removing Mist Effect for GoT theme */
body.got-theme::before { display: none; }


/* Specific element defaults */
button { background: none; border: none; color: inherit; font: inherit; cursor: pointer; }
input, textarea, select { font-family: var(--font-ui-got); color: var(--got-text-primary); background-color: transparent; }
ul, ol { list-style: none; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--got-text-link); text-decoration: none; transition: color var(--transition-fast-got); }
a:hover { color: var(--got-text-link-hover); }
strong { font-weight: 600; color: var(--got-text-highlight); /* Highlight strong text */ }
em { font-style: italic; color: var(--got-text-secondary); }
h1, h2, h3, h4, h5, h6 { font-weight: 600; line-height: 1.3; margin-bottom: 0.75em; }

/* Global Title Styles */
.got-theme h1,
.got-theme #game-title,
.got-theme h2,
.got-theme h3
{
    font-family: var(--font-title-got);
    color: var(--got-text-primary);
    letter-spacing: 0.8px;
    text-shadow: var(--shadow-text-got); /* Add subtle text shadow */
}
.got-theme h2 { font-size: 1.6rem; /* Adjusted sizes */ }
.got-theme h3 { font-size: 1.25rem; color: var(--got-text-secondary); font-family: var(--font-accent-got);} /* Use accent font for H3 */
.got-theme h4 { /* Block titles */
    font-family: var(--font-ui-got);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--got-text-secondary);
    margin-bottom: 0.8em;
    border-bottom: 1px solid var(--got-border-secondary); /* Underline titles */
    padding-bottom: 0.4rem;
}

/* --- Scrollbar Styling --- */
body.got-theme ::-webkit-scrollbar { width: 9px; height: 9px; }
body.got-theme ::-webkit-scrollbar-track { background: var(--got-scroll-track); border-radius: 3px; }
body.got-theme ::-webkit-scrollbar-thumb { background: var(--got-scroll-thumb); border-radius: 3px; border: 1px solid var(--got-scroll-track); }
body.got-theme ::-webkit-scrollbar-thumb:hover { background: var(--got-scroll-thumb-hover); }
body.got-theme ::-webkit-scrollbar-corner { background: transparent; }
body.got-theme { scrollbar-width: thin; scrollbar-color: var(--got-scroll-thumb) var(--got-scroll-track); }

/* REUSABLE SCROLL AREA STYLING */
.scrollable-area {
    overflow-y: auto;  /* Enable vertical scroll when needed */
    overflow-x: hidden; /* Prevent horizontal scroll */
    scrollbar-gutter: stable both-edges; /* Reserve space for scrollbar to prevent layout shift */
    position: relative; /* Needed for potential absolute positioned children or ::before/::after masks */
    z-index: 1;
    /* Stronger mask for GoT */
    mask-image: linear-gradient(to bottom, transparent 0%, black 25px, black calc(100% - 25px), transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 25px, black calc(100% - 25px), transparent 100%);
    mask-mode: alpha;
    -webkit-mask-mode: alpha;
    /* Add padding to right side to account for scrollbar width IF scrollbar-gutter doesn't work as expected or looks bad */
    /* padding-right: 8px; */
}
/* Hide mask if not overflowing (requires JS to add/remove 'scrolled' class or rely on ':not(:active)') */
.scrollable-area:not(.scrolled):not(:active) {
     mask-image: none; -webkit-mask-image: none;
}
/* You might need JS to add a 'scrolled' class based on scrollHeight > clientHeight */

/* --- Main Game Layout --- */
#game-screen { display: flex; flex-direction: column; height: 100vh; width: 100%; background-color: var(--got-bg-primary); }
#game-main-content {
    flex-grow: 1; display: grid;
    grid-template-columns: [sidebar-start] var(--sidebar-width-got) [sidebar-end chat-start] 1fr [chat-end utils-start] var(--utility-sidebar-width-got) [utils-end];
    gap: var(--container-padding-got);
    padding: var(--container-padding-got);
    padding-top: 0; overflow: hidden;
}

#character-sidebar, #utility-sidebar, #chat-area {
    max-height: calc(100vh - var(--header-height-got) - var(--min-footer-height-got) - var(--container-padding-got) * 1.5);
    min-height: 300px; overflow: hidden; display: flex; flex-direction: column;
    border-radius: var(--radius-md-got); /* Sharper radius */
    border: 1px solid var(--got-border-primary);
}
#character-sidebar, #utility-sidebar { background: var(--got-bg-secondary); box-shadow: var(--shadow-md-got); }
#chat-area { background-color: rgba(20, 22, 26, 0.85); border: 1px solid var(--got-border-secondary); box-shadow: var(--shadow-inset-got), var(--shadow-sm-got); display: flex; flex-direction: column; }

/* Sidebar/Utility Inner Content - THIS is what should scroll */
#character-sidebar .sidebar-content,
#utility-sidebar .sidebar-content {
    padding: calc(var(--container-padding-got) * 0.9); /* Inner padding */
    flex-grow: 1;
    /* Apply scrollable styling DIRECTLY or use the .scrollable-area class in HTML */
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-gutter: stable both-edges;
    /* Apply mask if needed */
     /* mask-image: ... */
     /* -webkit-mask-image: ... */
}


/* Chat Log Area */
#chat-log {
    flex-grow: 1; /* Takes available space */
    overflow-y: auto; /* Scrolls vertically */
    overflow-x: hidden;
    scroll-behavior: smooth;
    padding: var(--container-padding-got);
    background-image: var(--bg-noise-url-got);
    position: relative;
     scrollbar-gutter: stable both-edges;
     /* Removed fixed padding-right, let scrollbar-gutter handle space */
 }
/* Chat log fade effect (Optional - uncomment if desired) */
/*
#chat-log.got-chat-log::before, #chat-log.got-chat-log::after {
    content: '';
    position: sticky; z-index: 2; left: 0; right: 0;
    height: 30px; pointer-events: none;
}
#chat-log.got-chat-log::before { top: 0; background: linear-gradient(to bottom, var(--got-msg-ai-bg, #1f2329) 10%, transparent); }
#chat-log.got-chat-log::after { bottom: 0; background: linear-gradient(to top, var(--got-msg-ai-bg, #1f2329) 10%, transparent); }
*/

/* --- Header --- */
#game-header {
    height: var(--header-height-got); flex-shrink: 0; display: flex; align-items: center;
    padding: 0 var(--container-padding-got); background: var(--got-bg-primary);
    border-bottom: 1px solid var(--got-border-primary);
    position: relative; z-index: var(--z-header); box-shadow: 0 3px 7px rgba(0,0,0,0.3);
}
.game-header-content { width: 100%; max-width: 1920px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
#game-title { font-size: 1.6rem; font-weight: 700; font-family: var(--font-title-got); color: var(--got-text-primary); white-space: nowrap; display: flex; align-items: center; gap: 0.6rem; margin: 0; cursor: default; transition: color var(--transition-med-got); }
#game-title:hover { color: var(--got-accent-gold); }
#game-title::before { content: '🐺'; font-size: 1.5em; display: inline-block; transition: transform var(--transition-smooth-got); filter: grayscale(30%); }
#game-title:hover::before { transform: scale(1.1) rotate(-5deg); filter: grayscale(0%); }
.header-info-cluster { display: flex; align-items: center; gap: 1.2rem; position: absolute; left: 50%; transform: translateX(-50%); }
.header-info-block { display: flex; align-items: center; gap: 0.5rem; color: var(--got-text-secondary); font-size: 0.8rem; background-color: rgba(0,0,0,0.2); padding: 0.4rem 0.9rem; border-radius: var(--radius-md-got); border: 1px solid var(--got-border-primary); cursor: default; transition: background-color var(--transition-fast-got), border-color var(--transition-fast-got); }
.header-info-block:hover { background-color: var(--got-bg-content); border-color: var(--got-border-secondary); }
.header-info-block .info-icon-emoji { opacity: 0.6; font-size: 1.1em; }
.header-info-block .info-value { color: var(--got-text-primary); font-weight: 500; }
#game-header .controls { display: flex; align-items: center; gap: 0.6rem; }
#exit-game-btn { width: 36px; height: 36px; padding: 0; font-size: 1.2rem; border-radius: var(--radius-sm-got); line-height: 1; background: none; border: none; transition: color var(--transition-med-got), background-color var(--transition-med-got), box-shadow var(--transition-med-got); color: var(--got-text-secondary); }
#exit-game-btn:hover { background-color: rgba(220, 38, 38, 0.15); color: var(--got-accent-red); box-shadow: 0 0 8px rgba(220, 38, 38, 0.4); }
#exit-game-btn:active { background-color: rgba(220, 38, 38, 0.3); box-shadow: inset 0 1px 3px rgba(0,0,0,0.4); }
.mobile-toggle-button { display: none; }


/* --- Footer / Input Area --- */
#input-area {
    flex-shrink: 0; padding: calc(var(--container-padding-got) / 1.5) var(--container-padding-got);
    background: var(--got-bg-gradient-footer); border-top: 1px solid var(--got-border-primary);
    position: relative; z-index: var(--z-footer); backdrop-filter: blur(4px); min-height: var(--min-footer-height-got);
}
.input-container { display: flex; align-items: flex-end; gap: 0.6rem; max-width: 1920px; margin: 0 auto; }
#player-input {
    flex-grow: 1; background-color: var(--got-bg-input); color: var(--got-text-primary);
    border: 1px solid var(--got-border-primary); border-radius: var(--radius-md-got); padding: 0.7rem 1rem; /* Adjust padding */
    font-family: var(--font-primary-text-got); font-size: 1rem; line-height: 1.5; resize: none;
    min-height: 46px; /* Example fixed height */ max-height: 180px; overflow-y: auto; /* Let it scroll if it exceeds max-height */
    transition: border-color var(--transition-fast-got), box-shadow var(--transition-fast-got), background-color var(--transition-fast-got);
    box-shadow: var(--shadow-inset-got); scrollbar-gutter: stable both-edges; /* Reserve space */
}
#player-input:focus { outline: none; border-color: var(--got-border-accent); box-shadow: var(--shadow-focus-got), var(--shadow-inset-got); background-color: #1e2229; }
#player-input::placeholder { color: var(--got-text-muted); font-style: italic; opacity: 0.7; }
#send-button {
    flex-shrink: 0; height: 46px; /* Match input min-height */ width: 46px; font-size: 1.6rem;
    padding: 0; line-height: 1; border-radius: var(--radius-md-got);
    /* Inherits primary button style .btn-primary */
}
#send-button .btn-icon-emoji { line-height: 1; display: block; text-align: center;}

/* --- Character Sidebar (Left - GoT Theme) --- */
#character-sidebar .sidebar-content { display: flex; flex-direction: column; gap: 1.5rem; /* Adjust gap */ }
#character-profile-top { display: flex; flex-direction: column; align-items: center; gap: 0.8rem; padding-bottom: 1rem; border-bottom: 1px solid var(--got-border-primary); }
#character-avatar-area {
    width: 90px; height: 90px; border-radius: var(--radius-full-got); overflow: hidden;
    border: 3px solid var(--got-border-secondary); /* Stone border */
    background-color: var(--got-bg-deep); box-shadow: var(--shadow-inset-got);
    transition: border-color var(--transition-med-got), transform var(--transition-smooth-got);
}
#character-avatar-area:hover { border-color: var(--got-text-secondary); transform: scale(1.05); }
#character-avatar { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--transition-smooth-got); }
#character-avatar-area:hover #character-avatar { transform: scale(1.1); }

#character-name.sidebar-char-name { font-family: var(--font-title-got); font-size: 1.4rem; font-weight: 600; color: var(--got-text-primary); text-align: center; word-break: break-word; line-height: 1.2; }
/* Base for Info Blocks in Sidebar */
.info-block { background-color: rgba(10, 10, 10, 0.15); border: 1px solid var(--got-border-primary); border-radius: var(--radius-md-got); padding: 0.9rem 1.1rem; box-shadow: var(--shadow-sm-got); transition: background-color var(--transition-fast-got); position: relative; }
/* Block Titles - GoT */
.info-block .block-title {
    margin: -0.9rem -1.1rem 1rem -1.1rem; padding: 0.6rem 1.1rem;
    background-color: rgba(255, 255, 255, 0.04);
    border-bottom: 1px solid var(--got-border-primary);
    border-top-left-radius: var(--radius-md-got); border-top-right-radius: var(--radius-md-got);
    color: var(--got-text-secondary); font-size: 0.7rem; font-weight: 600;
    letter-spacing: 1.3px; display: flex; align-items: center; gap: 0.5rem;
}
.info-block .block-title .info-icon-emoji { opacity: 0.6; font-size: 1em; line-height: 1; }


/* === СТИЛИ ДЛЯ НОВОЙ СТРУКТУРЫ БЛОКА "Основные Данные" (GOT THEME) === */
/* Apply restructuring class in HTML if needed */
.info-block.character-core-stats.restructured-stats { padding: 0; background-color: transparent; border: none; box-shadow: none; }
.info-block.restructured-stats .block-title {
    margin: 0 0 0.8rem 0; /* Adjusted margin */
    padding: 0.6rem 1.1rem;
    background-color: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--got-border-primary);
    border-radius: var(--radius-md-got); /* All corners rounded */
    text-align: center; /* Center the title */
    border-bottom: 1px solid var(--got-border-primary); /* Keep bottom border */
}
.info-block.restructured-stats .core-stats-content { padding: 0.9rem 1.1rem; border: 1px solid var(--got-border-primary); border-radius: var(--radius-md-got); background-color: rgba(10, 10, 10, 0.15); box-shadow: var(--shadow-sm-got); }
/* FLEX Layout for info pairs */
.info-block.restructured-stats .core-stats-content .info-pair { display: flex; justify-content: space-between; align-items: baseline; gap: 0.7rem; margin-bottom: 0.7rem; font-size: 0.88rem; flex-wrap: wrap; }
.info-block.restructured-stats .core-stats-content .info-pair .info-label { flex-shrink: 0; }
.info-block.restructured-stats .core-stats-content .info-pair .info-value { flex-grow: 1; text-align: right; word-break: break-word; }
.info-block.restructured-stats .core-stats-content #character-status.info-value { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 140px; cursor: help; display: inline-block; vertical-align: baseline; }
.info-block.restructured-stats .core-stats-content #character-health.info-value { width: 100%; }
.info-block.restructured-stats .core-stats-content .info-pair:last-child { margin-bottom: 0; }
/* === END GOT CORE STATS RESTRUCTURE === */

/* -- GENERAL Info Pair Styling (GOT THEME) -- */
.info-pair { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 0.7rem; font-size: 0.88rem; font-family: var(--font-ui-got); gap: 0.8rem; flex-wrap: wrap; }
.info-pair:last-child { margin-bottom: 0; }
.info-label { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--got-text-secondary); flex-shrink: 0; }
.info-icon-emoji { opacity: 0.7; font-size: 1.05em; line-height: 1; display: inline-block; width: 1.2em; text-align: center; }
.info-value { color: var(--got-text-primary); font-weight: 500; text-align: right; word-break: break-word; flex-grow: 1; }

/* Span Values that need Tooltips */
.info-value.truncate-with-tooltip {
    display: block; /* Or inline-block */
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    cursor: help;
    vertical-align: baseline; /* Adjust alignment */
     max-width: 100%; /* Needed for ellipsis to work */
}
/* Apply this style to span summaries in the sidebar as needed */
.info-value.skills-list {
    font-style: normal; font-size: 0.83rem; color: var(--got-text-muted); cursor: help;
    border-bottom: 1px dotted var(--got-text-muted); padding-bottom: 1px; display: block; text-align: left;
    /* Make the list summary span itself truncatable */
    overflow: hidden; white-space: nowrap; text-overflow: ellipsis; max-width: 100%;
}
.list-like-pair .info-value { text-align: left; font-weight: 400; }


.info-pair .currency-value-wrapper { display: flex; align-items: baseline; gap: 0.2rem; justify-content: flex-end;}
.info-value.balance-value { font-weight: 600; color: var(--got-accent-gold); }
.currency-label { color: var(--got-accent-gold); opacity: 0.7; font-size: 0.75em; font-weight: 400;}
.info-value.token-value { color: var(--got-accent-purple); font-weight: 600; }

/* Health Bar */
#character-health { height: 10px; background-color: var(--got-bg-input); border-radius: var(--radius-full-got); overflow: hidden; border: 1px solid var(--got-border-primary); position: relative; display: block; }
.health-bar-fill { height: 100%; border-radius: var(--radius-full-got); transition: width var(--transition-smooth-got), background-color var(--transition-smooth-got); position: absolute; top: 0; left: 0; background-size: 200% auto; animation: gradient-shift-got 3s linear infinite; }
@keyframes gradient-shift-got { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
.health-bar-fill.health-good { background-image: linear-gradient(90deg, var(--got-health-good), #54d682, var(--got-health-good)); }
.health-bar-fill.health-medium { background-image: linear-gradient(90deg, var(--got-health-medium), #fbb676, var(--got-health-medium)); }
.health-bar-fill.health-low { background-image: linear-gradient(90deg, var(--got-health-low), #ef6969, var(--got-health-low)); }
.health-bar-text { display: none; } #character-health[title] { cursor: help; }

/* Character Status */
#character-status.info-value { background-color: rgba(10, 10, 10, 0.2); padding: 0.15rem 0.5rem; border-radius: var(--radius-sm-got); font-size: 0.83rem; border: 1px solid var(--got-border-primary); line-height: 1.3; }

/* Player Tokens */
#character-tokens { color: var(--got-accent-purple); font-weight: 600; font-size: 1.05em; }
.info-value.token-value.error-flash { animation: flash-red-got 0.5s 3 ease-in-out; }
@keyframes flash-red-got { 0%, 100% { color: var(--got-accent-purple); transform: scale(1); } 50% { color: var(--got-accent-red); transform: scale(1.1); } }

/* --- Chat Area --- */
#chat-log.got-chat-log { position: relative; padding: 1rem; overflow-y: auto; scrollbar-gutter: stable both-edges; }
.message { margin-bottom: 1.2rem; display: flex; align-items: flex-start; gap: 0.8rem; max-width: 92%; position: relative; opacity: 1; transition: opacity 0.5s ease-in-out; }
.message[data-is-command="true"] { display: none !important; }
.message.new-message { animation: fade-in-up-got 0.5s var(--transition-smooth-got); }
@keyframes fade-in-up-got { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
.message-avatar { width: 38px; height: 38px; border-radius: var(--radius-full-got); overflow: hidden; flex-shrink: 0; margin-top: 2px; border: 2px solid var(--got-border-primary); box-shadow: var(--shadow-sm-got); background-color: var(--got-bg-deep); transition: transform var(--transition-med-got), box-shadow var(--transition-med-got); }
.message-avatar:hover { transform: scale(1.1); box-shadow: 0 0 10px var(--got-accent-blue); }
.message-avatar img { width: 100%; height: 100%; object-fit: cover; }

.message-content { padding: 0.7rem 1.1rem; padding-bottom: 1.6rem; border-radius: var(--radius-lg-got); flex-grow: 1; position: relative; border: 1px solid transparent; box-shadow: var(--shadow-md-got); transition: background-color var(--transition-med-got); min-width: 0; }
.character-name { font-weight: 600; font-size: 0.8rem; margin-bottom: 0.3rem; font-family: var(--font-ui-got); letter-spacing: 0.4px; text-transform: uppercase; }
.message-text { font-family: var(--font-primary-text-got); font-size: 0.95rem; color: var(--got-text-primary); word-wrap: break-word; white-space: pre-wrap; line-height: 1.7; }
.message-text strong { color: var(--got-accent-gold); }
.message-text em { color: var(--got-text-secondary); }
.message-text .color-tag { display: inline; font-weight: 600; }

.timestamp { font-size: 0.65rem; font-family: var(--font-ui-got); color: var(--got-text-muted); position: absolute; bottom: 0.4rem; right: 0.8rem; opacity: 0.7; }

/* User Messages */
.user-message { margin-left: auto; flex-direction: row-reverse; }
.user-message .message-content { background-color: var(--got-msg-user-bg); border-color: var(--got-border-accent); border-radius: var(--radius-lg-got) var(--radius-sm-got) var(--radius-lg-got) var(--radius-lg-got); }
.user-message .character-name { text-align: right; color: var(--got-accent-blue); }
.user-message .message-avatar { border-color: var(--got-accent-blue); }

/* AI Messages */
.ai-message .message-content { background-color: var(--got-msg-ai-bg); border-color: var(--got-border-primary); border-radius: var(--radius-sm-got) var(--radius-lg-got) var(--radius-lg-got) var(--radius-lg-got); }
.ai-message .character-name { color: var(--got-text-secondary); /* Chronicler is more muted */ }
.ai-message .message-avatar { border-color: var(--got-border-secondary); filter: sepia(20%) opacity(90%); } /* Themed AI avatar */

/* System Messages */
.system-message { flex-direction: column; align-items: center; width: 100%; max-width: 85%; margin: 1rem auto; gap: 0; padding: 0.6rem 1rem; border-radius: var(--radius-md-got); background-color: var(--got-msg-sys-bg); border: 1px solid var(--got-border-primary); text-align: center; color: var(--got-text-secondary); font-style: italic; font-size: 0.8rem; box-shadow: none; opacity: 0.8; }
.system-message p { margin: 0; }
.system-message .color-tag { font-weight: 500; /* Less intense color */ }
.system-message [color=red] { color: var(--got-accent-red) !important; opacity: 0.9;}
.system-message [color=orange] { color: var(--got-accent-orange) !important; opacity: 0.9;}
.system-message [color=gray], .system-message [color=#CCCCCC] { color: var(--got-text-muted) !important; }


/* Thinking Indicator */
.message.thinking { max-width: 100%; justify-content: center; }
.message.thinking .message-content { background: transparent; border: none; box-shadow: none; padding: 0; }
.message.thinking .message-text { text-align: center; }
.message.thinking i { font-style: normal; color: var(--got-text-muted); font-size: 0.85rem; display: inline-block; letter-spacing: 0.8px; animation: pulse-fade-got 2s infinite ease-in-out; }
@keyframes pulse-fade-got { 0%, 100% { opacity: 0.4; } 50% { opacity: 0.8; } }


/* --- Utility Sidebar (Right - GoT Theme) --- */
#utility-sidebar .sidebar-content { padding-top: 1rem; display: flex; flex-direction: column; gap: 1.8rem; }
.sidebar-title-right { font-family: var(--font-title-got); font-size: 1.4rem; font-weight: 600; color: var(--got-text-secondary); text-align: center; border-bottom: 1px solid var(--got-border-primary); padding-bottom: 0.7rem; margin: 0; margin-bottom: 1.2rem; }
.utility-widget-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 0.7rem; }
.utility-widget {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.4rem; padding: 0.8rem 0.4rem; min-height: 95px; border-radius: var(--radius-md-got); background-color: rgba(10, 10, 10, 0.2); border: 1px solid var(--got-border-primary); text-align: center; color: var(--got-text-secondary); cursor: pointer; transition: all var(--transition-med-got); position: relative; overflow: hidden; box-shadow: none;
}
.utility-widget:hover:not(:disabled) { background-color: var(--got-bg-hover); border-color: var(--got-border-secondary); transform: translateY(-2px); color: var(--got-text-primary); box-shadow: var(--shadow-md-got); }
/* Remove gradient border for GoT */
.utility-widget::before { display: none; }
.utility-widget:active:not(:disabled) { transform: translateY(0px) scale(1); box-shadow: none; }
.utility-widget:disabled { opacity: 0.4; cursor: not-allowed; transform: none; background-color: transparent; border-color: var(--got-border-primary); box-shadow: none; filter: grayscale(70%); }
.widget-icon-emoji { font-size: 1.8rem; line-height: 1; filter: grayscale(20%) contrast(1.1); transition: transform 0.4s var(--transition-smooth-got), filter var(--transition-med-got); }
.utility-widget:hover:not(:disabled) .widget-icon-emoji { transform: scale(1.1) rotate(-3deg); filter: grayscale(0%); }
.widget-label { font-size: 0.7rem; font-weight: 600; display: block; line-height: 1.2; font-family: var(--font-ui-got); text-transform: uppercase; letter-spacing: 0.8px; }
.widget-status { font-size: 0.65rem; font-style: italic; opacity: 0.6; margin-top: 2px; display: block; color: var(--got-text-muted); }
.widget-status:empty { display: none; }

/* Faction/House Standing Display */
.utility-block.faction-standings-display { border: 1px solid var(--got-border-primary); border-radius: var(--radius-md-got); padding: 0; background: rgba(10, 10, 10, 0.2); box-shadow: var(--shadow-inset-got); }
.utility-block-title { /* 'Great Houses' title */ font-size: 1.1rem; color: var(--got-text-secondary); font-family: var(--font-ui-got); font-weight: 600; padding: 0.7rem 1rem; border-bottom: 1px solid var(--got-border-primary); display: flex; align-items: center; gap: 0.5rem; margin: 0; }
.utility-block-title .info-icon-emoji { font-size: 1.2em; opacity: 0.7; }
#faction-standings-list { list-style: none; padding: 0.4rem 1rem 0.8rem 1rem; margin: 0; display: flex; flex-direction: column; gap: 0.5rem; }
#faction-standings-list li { display: flex; justify-content: space-between; align-items: baseline; padding: 0.3rem 0; font-size: 0.88rem; border: none; transition: background-color var(--transition-fast-got); border-radius: var(--radius-sm-got); }
#faction-standings-list li:hover { background-color: var(--got-bg-hover); }
.got-house-label { font-weight: 500; font-family: var(--font-ui-got); display: inline-flex; align-items: center; gap: 0.4rem; flex-basis: 65%; color: var(--got-text-secondary); }
.got-house-label::before { display: none; /* Remove dot */ }
.got-relation-value { font-weight: 600; color: var(--got-text-primary); font-size: 0.95em; }
/* Apply relation colors */
.got-relation-value.positive { color: var(--got-relation-positive); }
.got-relation-value.negative { color: var(--got-relation-negative); }
.got-relation-value.neutral { color: var(--got-relation-neutral); }


/* --- Overlays & Modals --- */
.status-overlay, .modal-overlay { position: fixed; inset: 0; z-index: var(--z-overlay); display: flex; align-items: center; justify-content: center; padding: 1.2rem; background-color: rgba(5, 5, 5, 0.85); backdrop-filter: blur(5px) brightness(0.8); opacity: 0; visibility: hidden; transition: opacity var(--transition-med-got), visibility 0s var(--transition-med-got); }
.status-overlay.visible, .modal-overlay.visible,
.status-overlay[style*="display: flex"], .modal-overlay[style*="display: flex"]
{ opacity: 1; visibility: visible; transition: opacity var(--transition-med-got) ease-in-out, visibility 0s 0s; }

.overlay-content, .modal-content { background-color: var(--got-bg-primary); border-radius: var(--radius-lg-got); border: 1px solid var(--got-border-primary); box-shadow: var(--shadow-lg-got); max-width: 95%; max-height: 92vh; display: flex; flex-direction: column; opacity: 0; transform: scale(0.97) translateY(8px); transition: transform var(--transition-med-got) ease-out, opacity var(--transition-med-got) ease-out; overflow: hidden; }
.status-overlay.visible .overlay-content, .modal-overlay.visible .modal-content,
.status-overlay[style*="display: flex"] .overlay-content, .modal-overlay[style*="display: flex"] .modal-content
{ opacity: 1; transform: scale(1) translateY(0); }

.overlay-content { padding: 2rem 2.5rem; text-align: center; max-width: 500px; position: relative; }
/* Remove corner elements for GoT */
.overlay-content::before, .overlay-content::after { display: none; }

@keyframes spin-got { 100% { transform: rotate(360deg); } }
.spinner { width: 44px; height: 44px; margin: 0 auto 1.2rem auto; border: 4px solid var(--got-border-secondary); border-top-color: var(--got-accent-blue); border-radius: var(--radius-full-got); animation: spin-got 1s linear infinite; }
#loading-message { font-size: 1rem; color: var(--got-text-secondary); font-family: var(--font-ui-got); }
/* Error Overlay */
#error-overlay .overlay-title { color: var(--got-accent-red); font-size: 1.5rem; margin-bottom: 1rem; font-family: var(--font-title-got); }
#error-message.error-message { color: var(--got-text-secondary); margin-bottom: 1.8rem; font-size: 0.95rem; }
.error-actions { display: flex; justify-content: center; gap: 1rem; }

/* Creation Form Overlay */
.creation-form-container { max-width: 480px; width: 100%; }
.got-creation-form { padding: 1.8rem 2.2rem; }
.got-creation-form h2 { font-size: 1.7rem; margin-bottom: 0.5rem; font-family: var(--font-title-got); text-align: center; }
.got-creation-form > p { font-size: 0.9rem; color: var(--got-text-secondary); margin-bottom: 1.5rem; line-height: 1.6; text-align: center; }
.got-creation-form .form-group { margin-bottom: 1.1rem; }
.got-creation-form label { display: block; margin-bottom: 0.5rem; color: var(--got-text-secondary); font-weight: 600; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.6px; }
.got-creation-form input[type="text"], .got-creation-form select { width: 100%; padding: 0.65rem 0.9rem; background-color: var(--got-bg-input); border: 1px solid var(--got-border-primary); border-radius: var(--radius-md-got); color: var(--got-text-primary); font-size: 0.95rem; box-shadow: var(--shadow-inset-got); transition: border-color var(--transition-fast-got), box-shadow var(--transition-fast-got); scrollbar-width: thin; scrollbar-color: var(--got-scroll-thumb) var(--got-scroll-track); }
.got-creation-form input[type="text"]:focus, .got-creation-form select:focus { outline: none; border-color: var(--got-border-accent); box-shadow: var(--shadow-focus-got), var(--shadow-inset-got); }
.got-creation-form select { appearance: none; -webkit-appearance: none; padding-right: 2.3rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%239ca3af'%3E%3Cpath fill-rule='evenodd' d='M8 11.5a.5.5 0 0 1-.354-.146l-4-4a.5.5 0 0 1 .708-.708L8 10.293l3.646-3.647a.5.5 0 0 1 .708.708l-4 4A.5.5 0 0 1 8 11.5z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.7rem center; background-size: 15px; cursor: pointer; }
.got-creation-form .help-text { font-size: 0.8rem; text-align: center; color: var(--got-text-muted); margin-top: 1.2rem; padding: 0.7rem; background: rgba(0,0,0,0.15); border-radius: var(--radius-md-got); border: 1px dashed var(--got-border-secondary); }
.got-creation-form button[type="submit"] { display: block; width: 100%; margin-top: 1.8rem; }

/* Modals */
.got-modal .modal-content { max-width: 750px; width: 100%;}
.got-modal .modal-content.wide-modal { max-width: 950px; }
.got-modal .modal-header { display: flex; align-items: center; gap: 0.8rem; padding: 0.9rem 1.3rem; border-bottom: 1px solid var(--got-border-primary); flex-shrink: 0; background: var(--got-bg-secondary); border-top-left-radius: inherit; border-top-right-radius: inherit; position: relative; }
.got-modal h2 { margin: 0; flex-grow: 1; font-size: 1.3rem; line-height: 1.3; word-break: break-word; font-family: var(--font-title-got);}
.modal-title-icon { font-size: 1.2em; line-height: 1; opacity: 0.8; flex-shrink: 0; filter: grayscale(20%); }
.got-modal .modal-close-btn { position: absolute; top: 6px; right: 6px; width: 30px; height: 30px; border-radius: var(--radius-full-got); font-size: 1.7rem; line-height: 30px; text-align: center; color: var(--got-text-secondary); background: rgba(255, 255, 255, 0.04); border: 1px solid var(--got-border-primary); cursor: pointer; z-index: 15; transition: all var(--transition-fast-got); box-shadow: var(--shadow-sm-got); opacity: 0.7; }
.got-modal .modal-close-btn:hover { background-color: rgba(220, 38, 38, 0.2); color: var(--got-accent-red); transform: scale(1.1); border-color: var(--got-accent-red); box-shadow: var(--shadow-md-got); opacity: 1; }
.got-modal .modal-close-btn:active { transform: scale(0.95); background-color: rgba(220, 38, 38, 0.3); }
.got-modal .modal-close-btn .close-icon { display: block; line-height: 1; }
.got-modal .modal-body { padding: 1.3rem; overflow: hidden; flex-grow: 1; position: relative; display: flex; flex-direction: column; }
/* Scroll for MODAL BODY needed? Apply here or on child element */
/* .got-modal .modal-body.scrollable-area { overflow-y: auto; overflow-x: hidden; padding-right: calc(1.3rem + 8px); } */

.got-modal .modal-tabs { display: flex; flex-wrap: wrap; margin: -1.3rem -1.3rem 1.3rem -1.3rem; padding: 0 0.8rem; border-bottom: 1px solid var(--got-border-primary); background: var(--got-bg-secondary); position: sticky; top: 0; z-index: var(--z-sticky); backdrop-filter: blur(3px); box-shadow: 0 2px 5px rgba(0,0,0,0.25); }
.got-modal .tab-button { padding: 0.8rem 1rem; font-family: var(--font-ui-got); font-weight: 500; font-size: 0.85rem; color: var(--got-text-secondary); border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color var(--transition-fast-got), border-color var(--transition-fast-got), background-color var(--transition-fast-got); position: relative; background: transparent; }
.got-modal .tab-button:hover { color: var(--got-text-primary); background-color: var(--got-bg-hover); }
.got-modal .tab-button.active { color: var(--got-accent-blue); border-bottom-color: var(--got-accent-blue); background-color: transparent; font-weight: 600; }

.got-modal .tab-content { display: none; flex-grow: 1; overflow: hidden; padding-top: 0.4rem; /* Child needs scroll */}
.got-modal .tab-content.active { display: block; animation: fade-in-got 0.4s ease; }
@keyframes fade-in-got { from { opacity: 0; } to { opacity: 1; } }

/* Make tab content areas scrollable and constrained */
.got-modal .tab-content.scrollable-area {
    max-height: calc(85vh - 180px); /* Example height, adjust as needed */
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 8px; /* Account for scrollbar space */
    scrollbar-gutter: stable both-edges;
}
/* Apply the .scrollable-area class to tab-content divs in HTML where scrolling is needed */


.got-modal .tab-content h4 { font-family: var(--font-ui-got); font-size: 0.85rem; font-weight: 600; color: var(--got-text-secondary); margin-top: 0.8rem; margin-bottom: 0.7rem; text-transform: uppercase; letter-spacing: 1px; padding-bottom: 0.3rem; border-bottom: 1px solid var(--got-border-secondary); }

/* Styling for LISTS within modals */
.got-modal .modal-styled-list { list-style: none; margin: 0 0 1.2rem 0; padding: 0; border: 1px solid var(--got-border-modal); border-radius: var(--radius-md-got); background-color: rgba(10, 10, 10, 0.1); overflow: hidden; }

/* Container for lists THAT NEED SCROLLING THEMSELVES (inside non-scrolling parents) */
.got-modal .scrollable-list-container {
    max-height: 40vh; /* Example constraint, adjust */
    overflow-y: auto;
    scrollbar-gutter: stable both-edges;
    border: 1px solid var(--got-border-modal);
    border-radius: var(--radius-md-got);
    background-color: rgba(10, 10, 10, 0.1);
     padding: 0.5rem;
     padding-right: calc(0.5rem + 8px); /* Account for scrollbar */
}

/* Styling list items */
.got-modal .modal-styled-list li { display: flex; align-items: center; gap: 0.7rem; padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--got-border-modal); transition: background-color var(--transition-fast-got), transform var(--transition-fast-got), border-left-color var(--transition-fast-got); font-size: 0.9rem; position: relative; border-left: 3px solid transparent; }
.got-modal .modal-styled-list li:last-child { border-bottom: none; }
.got-modal .modal-styled-list li.selectable { cursor: pointer; }
.got-modal .modal-styled-list li.selectable:hover { background-color: var(--got-bg-hover); border-left-color: var(--got-accent-blue); transform: translateX(2px); }
.got-modal .modal-styled-list li.selected { background-color: var(--got-bg-selected); border-left-color: var(--got-accent-gold); font-weight: 500; transform: translateX(0); }
.got-modal .placeholder-text { color: var(--got-text-muted); font-style: italic; text-align: center; padding: 1.8rem 1rem; border: none !important; background: transparent !important; font-size: 0.85rem; border-left: none !important; display: block !important; width: 100% !important; }
.item-display-name { flex-grow: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.inventory-item-qty { font-size: 0.75rem; color: var(--got-text-muted); margin-left: auto; padding: 0.1rem 0.4rem; background: var(--got-bg-input); border-radius: var(--radius-sm-got); border: 1px solid var(--got-border-primary); flex-shrink: 0; }

/* Generic Item Actions Styling */
.modal-item-actions { margin-top: 1.2rem; padding: 0.8rem; background-color: rgba(0, 0, 0, 0.25); border-radius: var(--radius-md-got); border: 1px solid var(--got-border-secondary); display: flex; flex-wrap: wrap; gap: 0.7rem; align-items: center; box-shadow: var(--shadow-inset-got); justify-content: center; }
.modal-item-actions .btn { margin: 0; }
.modal-message { padding: 0.6rem 0.9rem; margin-top: 0.8rem; border-radius: var(--radius-md-got); font-size: 0.85rem; text-align: center; font-weight: 500; display: none; border: 1px solid transparent; word-wrap: break-word; overflow-wrap: break-word; }
.modal-message.info { background-color: rgba(59, 130, 246, 0.1); border-color: rgba(59, 130, 246, 0.3); color: var(--got-text-link); }
.modal-message.success { background-color: rgba(22, 163, 74, 0.1); border-color: rgba(22, 163, 74, 0.3); color: var(--got-accent-green); }
.modal-message.error { background-color: rgba(220, 38, 38, 0.1); border-color: rgba(220, 38, 38, 0.3); color: var(--got-accent-red); }
.modal-help-text { font-size: 0.78rem; color: var(--got-text-muted); margin-top: 1.2rem; padding-top: 0.8rem; border-top: 1px dashed var(--got-border-secondary); line-height: 1.5; text-align: center; font-style: italic; }
.modal-help-text strong { color: var(--got-accent-gold); font-style: normal; }

/* Character Sheet Detail Lists */
.details-list-modal li { gap: 0.8rem; justify-content: flex-start;} /* Default align left */
.details-list-modal .detail-label { color: var(--got-text-secondary); font-weight: 500; width: 180px; /* Adjust width */ text-align: right; flex-shrink: 0; padding-right: 0.5rem;}
.details-list-modal .detail-value { color: var(--got-text-primary); flex-grow: 1; text-align: left;}
/* Status colored values */
.detail-value.status-positive { color: var(--got-accent-green); }
.detail-value.status-negative { color: var(--got-accent-red); }
.detail-value.relation-positive { color: var(--got-relation-positive); }
.detail-value.relation-negative { color: var(--got-relation-negative); }
.detail-value.relation-neutral { color: var(--got-relation-neutral); }
/* Class for relation status like 'Friend', 'Enemy' etc */
.relation-status { font-style: italic; opacity: 0.9; }
.rep-pos { color: var(--got-accent-green); }
.rep-neg { color: var(--got-accent-red); }
.rep-neu { color: var(--got-text-secondary); }


/* Inventory Item Readable indicator */
.got-modal .modal-styled-list li.item-readable::after { content: "📖"; margin-left: 6px; font-size: 0.9em; opacity: 0.6; color: var(--got-text-link); cursor: pointer; flex-shrink: 0; pointer-events: all; line-height: 1; }
.got-modal .modal-styled-list li.item-readable:hover::after { opacity: 1; }
/* Inventory Item Icons (Using content property and data attributes) */
.got-modal .modal-styled-list li[data-item-type]::before { font-family: initial; /* Override for emoji */ font-size: 1em; margin-right: 0.5rem; opacity: 0.8; flex-shrink: 0; width: 1.2em; text-align: center; line-height: 1; content: '📦'; /* Default Box */}
/* --- GoT Item Icons --- */
li[data-item-type="Weapon"]::before { content: '⚔️'; } li[data-item-type="Armor"]::before { content: '🛡️'; }
li[data-item-type="Clothing"]::before { content: '🧥'; } li[data-item-type="Tool"]::before { content: '🛠️'; }
li[data-item-type="Food"]::before { content: '🍗'; } li[data-item-type="Potion_Salve"]::before { content: '🧪'; }
li[data-item-type="Poison"]::before { content: '☠️'; } li[data-item-type="Crafting_Material"]::before { content: '🧱'; }
li[data-item-type="Recipe_Scroll"]::before { content: '📜'; } li[data-item-type="Component"]::before { content: '🌿'; }
li[data-item-type="Book"]::before { content: '📖'; } li[data-item-type="Scroll"]::before { content: '📜'; }
li[data-item-type="Letter"]::before { content: '✉️'; } li[data-item-type="Note"]::before { content: '📝'; }
li[data-item-type="Map"]::before { content: '🗺️'; } li[data-item-type="Misc"]::before { content: '❓'; }
li[data-item-type="Valuable"]::before { content: '💎'; } li[data-item-type="Key"]::before { content: '🔑'; }
li[data-item-type="Quest_Item"]::before { content: '⭐'; }
li[data-item-type="Disease"]::before { content: '🤢'; } /* Disease Icon in Char Sheet list */
li[data-item-type="Spell"]::before { content: '✨'; }
li[data-item-type="Slave_Gear"]::before { content: '⛓️'; } /* Added Slave Gear */
li[data-item-type="Business_Ledger"]::before { content: '📈'; } /* Placeholder */
li[data-item-type="Slave"]::before { content: '⛓️'; } /* For Owned Slaves list */
li[data-item-type="Crime"]::before { content: '⚖️'; } /* For Criminal Record list */
li[data-item-type="House"]::before { content: '🏰'; } /* Faction Info list */
li[data-item-type="Faction"]::before { content: '🚩'; } /* Faction Info list */
/* --- GoT Pet Icons --- */
li[data-item-type="Horse"]::before, li[data-item-type="Pony"]::before, li[data-item-type="Mount"]::before { content: '🐎'; }
li[data-item-type="Mule"]::before { content: '🐴'; } li[data-item-type="Direwolf"]::before { content: '🐺'; }
li[data-item-type="Raven"]::before { content: '🐦'; } li[data-item-type="Cat"]::before { content: '🐈'; }
li[data-item-type="Dog"]::before { content: '🐕'; }

/* Item condition classes */
.item-condition-worn { opacity: 0.8; filter: saturate(70%); }
.item-condition-damaged { opacity: 0.6; filter: grayscale(40%); }
.item-condition-broken { opacity: 0.4; filter: grayscale(80%); text-decoration: line-through; color: var(--got-text-muted) !important; }

/* Item Content Reading Modal - Ensure it's scrollable */
.item-content-details { /* Parent container */
    flex-grow: 1; display: flex; flex-direction: column; overflow: hidden;
}
#item-content-display.prose-styles { /* The actual text display area */
    font-family: var(--font-primary-text-got); line-height: 1.75; color: var(--got-text-primary);
    background-color: rgba(0,0,0,0.2); border: 1px solid var(--got-border-modal);
    border-radius: var(--radius-md-got); padding: 1.3rem 1.8rem;
    font-size: 0.95rem; flex-grow: 1; /* Allow it to fill vertical space */
    max-height: 70vh; /* Maximum height */
    /* Apply scrolling directly to this element */
    overflow-y: auto;
    scrollbar-gutter: stable both-edges;
    word-wrap: break-word; overflow-wrap: break-word;
    /* Ensure enough bottom padding for scrollbar */
    padding-bottom: 1rem;
}
#item-content-message { margin-top: 0.8rem; }


/* Pets Modal Styles - List container MUST be scrollable */
.pets-details { flex-direction: column; overflow: hidden; display: flex; height: 100%; } /* Use full height */
.pets-list-container {
    flex-grow: 1; /* Allow list container to take available space */
    border: 1px solid var(--got-border-primary);
    border-radius: var(--radius-md-got);
    background-color: rgba(10,10,10,0.1);
    margin-bottom: 1rem; padding: 0.5rem;
    display: flex; /* Make it a flex container */
    flex-direction: column; /* Stack title + list vertically */
    /* Apply scrolling */
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-gutter: stable both-edges;
     padding-right: calc(0.5rem + 8px); /* Space for scrollbar */
}
.pets-list-container h4 { /* "Your Animals" header */
    font-size: 0.9rem; font-weight: 600; color: var(--got-text-secondary);
    padding: 0.5rem 0.5rem; margin: 0; border-bottom: 1px solid var(--got-border-secondary);
    text-transform: uppercase; letter-spacing: 1px; flex-shrink: 0; /* Don't shrink header */
}
#pets-list-modal { /* The actual list UL */
    display: flex; flex-direction: column; gap: 0.8rem;
    border: none; background: none; margin: 0; padding: 0.5rem 0.2rem;
    flex-grow: 1; /* Allow list itself to potentially take space if needed */
     /* Removed scroll styles here - parent .pets-list-container handles scrolling */
}
#pets-list-modal li { /* Individual pet card */
    display: flex; gap: 1rem; padding: 0.8rem; border: 1px solid var(--got-border-primary);
    border-radius: var(--radius-lg-got); background: var(--got-bg-secondary);
    box-shadow: var(--shadow-sm-got);
    transition: transform var(--transition-med-got), box-shadow var(--transition-med-got), border-color var(--transition-med-got);
    cursor: pointer; position: relative; border-left-width: 4px; flex-shrink: 0; /* Prevent cards from shrinking */
}
#pets-list-modal li.selected { border-color: var(--got-accent-gold); border-left-color: var(--got-accent-gold); box-shadow: 0 0 10px var(--got-accent-gold-hover); transform: scale(1.01); }
#pets-list-modal li:hover:not(.selected) { border-left-color: var(--got-border-secondary); transform: translateX(3px); box-shadow: var(--shadow-md-got); }
.pet-avatar-area { width: 50px; height: 50px; font-size: 2.5rem; display: flex; align-items: center; justify-content: center; background-color: rgba(0,0,0,0.2); border-radius: var(--radius-md-got); filter: drop-shadow(var(--shadow-sm-got)); transition: transform 0.4s var(--transition-smooth-got); position: relative; overflow: hidden; flex-shrink: 0;}
.pet-info { flex-grow: 1; display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.85rem; }
.pet-info .pet-card-name { font-family: var(--font-accent-got); font-size: 1.2rem; font-weight: normal; color: var(--got-text-primary); margin-bottom: 0.1rem; }
.pet-stats-summary { font-size: 0.8em; color: var(--got-text-secondary); opacity: 0.9;}
.pet-stats-summary .stat-hp { color: var(--got-health-good); } /* Default to good */
.pet-stats-summary .stat-hp.medium { color: var(--got-health-medium); }
.pet-stats-summary .stat-hp.low { color: var(--got-health-low); }
.pet-stats-summary .stat-l { margin-left: 0.5em; }
#pet-actions-context-area { margin-top: auto; padding: 0.8rem; border-radius: var(--radius-lg-got); background-color: rgba(0,0,0,0.15); border: 1px solid var(--got-border-primary); box-shadow: var(--shadow-inset-got); flex-shrink: 0; }
.pet-action-panel { padding: 0.8rem; background-color: rgba(0, 0, 0, 0.2); border-radius: var(--radius-lg-got); border: 1px solid var(--got-border-modal); margin-top: 0; box-shadow: var(--shadow-sm-got); display: flex; flex-direction: column; gap: 0.7rem; }
.pet-action-panel h4 { font-family: var(--font-ui-got); font-size: 0.9rem; text-align: center; color: var(--got-accent-gold); margin: 0 0 0.8rem 0; padding-bottom: 0.4rem; border-bottom: 1px solid var(--got-border-secondary); }
.pet-action-buttons { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; }
.pet-action-buttons .btn { /* Style action buttons */ flex-grow: 1; /* Allow buttons to share space */ min-width: 90px; /* Prevent buttons getting too small */ padding: 0.5rem 0.8rem; /* Smaller padding */ font-size: 0.8rem; /* Smaller text */ }
#pet-action-panel-message { margin-top: 0.5rem; }


/* --- Map Modal Specific Styles --- */
#map-modal-got .modal-body {
    /* Allow containers inside to manage scroll */
    overflow: hidden;
    display: flex;
    flex-direction: column;
     /* Ensure map body has height if children are to grow */
     height: 100%; /* Might need to be adjusted based on outer container */
}
#map-current-location-got { flex-shrink: 0; /* Don't shrink location text */}

#map-overview-container,
#map-detail-container {
    flex-grow: 1; /* Allow containers to take space */
    /* Apply scrollable styling DIRECTLY */
     overflow-y: auto;
     overflow-x: hidden;
     scrollbar-gutter: stable both-edges;
     padding: 5px; /* Small padding inside */
     padding-right: 8px; /* Space for scrollbar */
    max-height: calc(85vh - 180px); /* Adjust max height */
    /* Add the mask if desired for these specific areas */
     mask-image: linear-gradient(to bottom, transparent 0%, black 15px, black calc(100% - 15px), transparent 100%);
     -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 15px, black calc(100% - 15px), transparent 100%);
 }

/* Hide mask when not scrolled */
#map-overview-container:not(.scrolled),
#map-detail-container:not(.scrolled) {
    mask-image: none; -webkit-mask-image: none;
}

/* Style the list inside the map */
#map-location-list {
    border: none; /* Remove border from the list itself */
    background: none;
}
#map-location-list li {
    border-left-width: 3px;
    padding: 0.6rem 0.8rem; /* Adjust padding */
    font-weight: 500;
    background-color: rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid var(--got-border-modal);
}
#map-location-list li.selectable:hover {
    background-color: var(--got-bg-hover);
    border-left-color: var(--got-accent-blue);
    color: var(--got-text-primary);
}
/* Style for the selected location if needed */
#map-location-list li.selected {
     background-color: var(--got-bg-selected);
     border-left-color: var(--got-accent-gold);
     font-weight: 600;
}

#map-detail-container h3 {
    font-family: var(--font-title-got);
    color: var(--got-accent-gold); flex-shrink: 0; /* Don't shrink title */
}
#map-back-button {
    float: left; /* Position button nicely */
    margin-right: 10px; flex-shrink: 0;
}

#map-detail-content {
    padding: 1rem;
    background-color: rgba(0, 0, 0, 0.1);
    border: 1px solid var(--got-border-secondary);
    border-radius: var(--radius-md-got);
    min-height: 100px; /* Ensure it has some height */
     flex-grow: 1; /* Ensure it can take space */
}

.spinner-container { /* Ensure spinner styles are present */
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 1.5rem 1rem; color: var(--got-text-muted); min-height: 90px;
}
.spinner-container .spinner { width: 34px; height: 34px; margin-bottom: 1rem; }
.spinner-container p { font-size: 0.85rem; font-style: italic; }
/* End Map Specifics */


/* --- Shop Modal Specific Styles - Ensure Scroll --- */
#shop-modal .modal-content.wide-modal {
    max-width: 1100px; /* Still wide */
}
#shop-modal .shop-details {
    padding: 0; overflow: hidden;
}
.shop-interface-grid {
    display: grid;
    grid-template-columns: minmax(300px, 1fr) 340px; /* Left flexible, Right fixed */
    gap: 0;
    height: calc(88vh - 100px); /* Limit height */
    overflow: hidden;
}

/* Left Panel - Scrollable Item List */
.shop-item-list-container {
    padding: 1.2rem;
    border-right: 1px solid var(--got-border-primary);
    display: flex;
    flex-direction: column;
    /* Apply scrollable styling DIRECTLY */
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-gutter: stable both-edges;
     padding-right: calc(1.2rem + 8px); /* Space for scrollbar */
    /* Add mask if desired */
     /* mask-image: ... */
     /* -webkit-mask-image: ... */
}
.shop-item-list-container h4 { /* Vendor Name Header */
    margin: 0 0 1rem 0; padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--got-border-secondary); font-size: 0.9rem;
    color: var(--got-text-secondary); flex-shrink: 0;
}
#shop-vendor-greeting .accent-value { color: var(--got-accent-gold); font-style: italic; }

#shop-item-list { /* The UL list */
    border: none; background: none; margin: 0; padding: 0;
    flex-grow: 1; /* Allows list to take space if container is flex */
}
#shop-item-list li { /* List item styling */
    border-left-width: 3px; padding: 0.6rem 0.8rem; font-weight: 500;
    background-color: rgba(255, 255, 255, 0.02); border-bottom: 1px solid var(--got-border-modal);
    align-items: center; /* Align icons/text vertically */
}
#shop-item-list li:last-child { border-bottom: none; }
#shop-item-list li.selected { background-color: var(--got-bg-selected); border-left-color: var(--got-accent-gold); }
#shop-item-list li:hover:not(.selected) { background-color: var(--got-bg-hover); border-left-color: var(--got-accent-blue); }
#shop-item-list .item-price { /* Item price display */
    margin-left: auto; font-weight: 600; font-size: 0.9em; color: var(--got-accent-gold);
    white-space: nowrap; padding-left: 0.8rem;
}
#shop-item-list li[data-item-type]::before { /* Icon styling, reused from main list styling */
     font-family: initial; font-size: 1em; margin-right: 0.5rem; opacity: 0.8; flex-shrink: 0; width: 1.2em; text-align: center; line-height: 1; content: '📦';
 }

/* Right Panel - Scrollable Details */
.shop-item-details-container {
    padding: 1.2rem;
    display: flex; flex-direction: column;
    background-color: rgba(10, 10, 10, 0.1);
     /* Parent handles potential overflow now */
}
.shop-item-details-container h4 { /* "Details" Header */
     margin: 0 0 1rem 0; padding-bottom: 0.5rem;
     border-bottom: 1px solid var(--got-border-secondary); font-size: 0.9rem;
     color: var(--got-text-secondary); flex-shrink: 0;
}
#shop-item-details-content { /* The actual details area */
    flex-grow: 1; /* Takes available vertical space */
    /* Apply scrolling */
    overflow-y: auto;
    scrollbar-gutter: stable both-edges;
    padding: 0.5rem;
    padding-right: calc(0.5rem + 8px); /* Space for scrollbar */
    background-color: rgba(0,0,0,0.1);
    border: 1px solid var(--got-border-modal);
    border-radius: var(--radius-md-got);
    min-height: 200px; /* Ensure minimum height */
    /* Add mask if desired */
     /* mask-image: ... */
     /* -webkit-mask-image: ... */
}
/* Details styling inside the content area */
#shop-item-details-content h5 { font-family: var(--font-title-got); font-size: 1.3rem; color: var(--got-text-highlight); margin-bottom: 0.6rem; }
#shop-item-details-content p { font-size: 0.95rem; color: var(--got-text-primary); line-height: 1.6; margin-bottom: 0.8rem; }
#shop-item-details-content #shop-detail-price { font-weight: 700; font-size: 1.1rem; color: var(--got-accent-gold); margin-top: 1rem; border-top: 1px dashed var(--got-border-secondary); padding-top: 0.8rem; }
#shop-detail-price .gold, #shop-detail-price .silver, #shop-detail-price .copper { margin-right: 0.5rem; }
#shop-detail-condition { font-style: italic; font-size: 0.9rem; color: var(--got-text-secondary); }
#shop-detail-stats { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--got-border-secondary); }
#shop-detail-stats ul { list-style: none; padding: 0; }
#shop-detail-stats li { font-size: 0.9rem; color: var(--got-text-secondary); margin-bottom: 0.3rem; }
#shop-detail-stats li span { color: var(--got-text-primary); font-weight: 500; margin-left: 0.5rem; }

/* Shop Actions */
.shop-actions {
    margin-top: 1rem; padding-top: 1rem;
    border-top: 1px solid var(--got-border-primary);
    display: flex; flex-direction: column; align-items: center;
    gap: 0.8rem; flex-shrink: 0; /* Don't shrink actions area */
}
#shop-buy-btn { width: 80%; /* Button not full width */ }
#shop-player-currency { border: none; padding: 0; margin: 0; }
/* End Shop Specifics */


/* --- Buttons (Unified Styles) --- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.6rem 1.1rem; /* Base padding */ font-size: 0.85rem; font-family: var(--font-ui-got); font-weight: 600; border-radius: var(--radius-md-got); border: 1px solid transparent; cursor: pointer; line-height: 1.4; text-align: center; text-transform: uppercase; letter-spacing: 0.9px; transition: all var(--transition-med-got); user-select: none; box-shadow: var(--shadow-sm-got), inset 0 1px 0 rgba(255,255,255,0.04); position: relative; }
.btn:focus { outline: none; }
.btn:focus-visible { box-shadow: var(--shadow-focus-got), var(--shadow-sm-got); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none !important; box-shadow: none !important; filter: grayscale(60%); }
.btn .btn-icon-emoji { font-size: 1.1em; line-height: 1; }
.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
/* Primary Button (GoT Gold) */
.btn-primary { background: linear-gradient(to bottom, var(--got-accent-gold), #eab308); color: #422006; border-color: rgba(180, 83, 9, 0.6); text-shadow: 0 1px 1px rgba(253, 224, 71, 0.2); }
.btn-primary:hover:not(:disabled) { background: linear-gradient(to bottom, var(--got-accent-gold-hover), var(--got-accent-gold)); transform: translateY(-2px); box-shadow: var(--shadow-md-got); border-color: rgba(180, 83, 9, 0.9); }
.btn-primary:active:not(:disabled) { transform: translateY(0); box-shadow: var(--shadow-sm-got); }
/* Secondary Button (GoT Stone) */
.btn-secondary { background-color: var(--got-bg-secondary); color: var(--got-text-secondary); border-color: var(--got-border-primary); }
.btn-secondary:hover:not(:disabled) { background-color: var(--got-bg-content); border-color: var(--got-border-secondary); color: var(--got-text-primary); box-shadow: var(--shadow-md-got); }
/* Danger Button (GoT Red) */
.btn-danger { background: linear-gradient(to bottom, var(--got-accent-red), #b91c1c); color: #fef2f2; border-color: #7f1d1d; text-shadow: 0 1px 1px rgba(0,0,0,0.3); }
.btn-danger:hover:not(:disabled) { background: linear-gradient(to bottom, var(--got-accent-red-hover), var(--got-accent-red)); transform: translateY(-2px); box-shadow: var(--shadow-md-got); }
/* Accent/Info Button (GoT Blue) */
.btn-accent, .btn-info { background: linear-gradient(to bottom, var(--got-accent-blue), #2563eb); color: #eff6ff; border-color: #1d4ed8; text-shadow: 0 1px 1px rgba(0,0,0,0.2); }
.btn-accent:hover:not(:disabled), .btn-info:hover:not(:disabled) { background: linear-gradient(to bottom, #60a5fa, #3b82f6); transform: translateY(-2px); box-shadow: var(--shadow-md-got); }
.btn-small { padding: 0.45rem 0.9rem; font-size: 0.78rem; gap: 0.4rem;}
.btn-large { padding: 0.8rem 1.6rem; font-size: 0.95rem; letter-spacing: 1.1px;}


/* ########################################## */
/* ######## MOBILE RESPONSIVENESS ########### */
/* ########################################## */

@media (max-width: 1200px) { /* Tablet landscape / Small Desktops */
    :root {
        --sidebar-width-got: 250px;
        --utility-sidebar-width-got: 230px;
        --container-padding-got: 1.1rem;
    }
    .got-modal .modal-content { max-width: 700px; }
    .got-modal .modal-content.wide-modal { max-width: 850px; }
     .shop-interface-grid { grid-template-columns: minmax(280px, 1fr) 300px; } /* Adjust shop grid */
    .header-info-cluster { display: none; }
    /* #pets-list-modal li { flex-direction: column; align-items: stretch; } Keep row unless very cramped */
}

@media (max-width: 768px) { /* Tablets portrait / Large Phones */
    :root {
        --header-height-got: 52px;
        --container-padding-got: 0.9rem;
        font-size: 15px; /* Slightly increase base font */
    }

    #game-header .header-info-cluster { display: none; }
    /* Header styling for mobile (might add toggle buttons later) */
    #game-header .controls { gap: 0.5rem; }
    #exit-game-btn { width: 34px; height: 34px; font-size: 1.1rem; }

    #game-main-content {
        grid-template-columns: 1fr; padding: var(--container-padding-got);
        padding-top: 0.5rem; gap: 0.8rem; display: flex; /* Use flex for mobile stacking */
        flex-direction: column; overflow-y: hidden; /* Let body scroll? No, better allow main to handle it potentially */
         /* Remove fixed height, let flex grow/shrink */
    }
    #chat-area { max-height: none; min-height: 50vh; flex-grow: 1; flex-shrink: 1; } /* Let chat area take vertical space */
    #character-sidebar, #utility-sidebar { /* Sidebar overlay config */
        position: fixed; top: 0; left: -100%; width: 88%; max-width: 310px;
        height: 100%; max-height: 100vh; z-index: var(--z-sidebar);
        transition: transform 0.35s var(--transition-smooth-got);
        border-radius: 0; border: none; box-shadow: var(--shadow-lg-got);
        overflow: hidden; padding: 0; /* Apply scrollable-area inside */
    }
     #character-sidebar .sidebar-content,
     #utility-sidebar .sidebar-content { /* This should be scrollable */
         height: 100%; overflow-y: auto; padding: var(--container-padding-got);
         padding-right: calc(var(--container-padding-got) + 8px); /* Scrollbar space */
         scrollbar-gutter: stable both-edges;
     }

    #character-sidebar { border-right: 1px solid var(--got-border-primary); }
    #utility-sidebar { left: auto; right: -100%; border-left: 1px solid var(--got-border-primary); border-right: none; }
    #character-sidebar.mobile-visible, #utility-sidebar.mobile-visible { transform: translateX(0); }

    /* Sidebar Open Body Overlay */
    body.got-theme.sidebar-open::after { content: ''; position: fixed; inset: 0; background-color: rgba(5, 5, 5, 0.75); backdrop-filter: blur(4px); z-index: calc(var(--z-sidebar) - 1); opacity: 1; visibility: visible; transition: opacity 0.3s ease, visibility 0s 0s; pointer-events: auto; }
    body.got-theme:not(.sidebar-open)::after { opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0s 0.3s; pointer-events: none; }

    /* Mobile Layout Adjustments */
    #input-area { min-height: auto; padding: 0.6rem var(--container-padding-got);}
    #player-input { font-size: 0.95rem; padding: 0.6rem 0.8rem; min-height: 42px; max-height: 150px; } /* Adjust size */
    #send-button { height: 42px; width: 42px; font-size: 1.5rem; } /* Adjust size */
    .got-modal .modal-content { max-width: 94%; width: 94%; max-height: 90vh; } /* Use slightly more width/height */

    /* Stack shop interface on mobile */
     .shop-interface-grid {
         grid-template-columns: 1fr; /* Single column */
         height: auto; /* Let it take natural height */
         max-height: calc(85vh - 80px); /* Still constrain modal height */
         overflow: hidden; /* Prevent inner overflow */
     }
    .shop-item-list-container, .shop-item-details-container {
        border-right: none; /* Remove vertical border */
         max-height: 40vh; /* Limit heights of sections */
        overflow-y: auto; /* Allow individual scrolling */
        scrollbar-gutter: stable both-edges;
     }
    .shop-item-list-container { border-bottom: 1px solid var(--got-border-primary); padding-bottom: 1rem; }


    /* Adjust Pet Cards for slightly more space */
     #pets-list-modal li { flex-direction: row; gap: 0.8rem; } /* Back to row */
     .pet-avatar-area { width: 45px; height: 45px; font-size: 2.2rem; }
     .pet-info .pet-card-name { font-size: 1.1rem; }
     .pet-stats-summary { font-size: 0.75em; }


    #game-title { font-size: 1.4rem; }
    #game-title::before { font-size: 1.3em; }

    /* Display mobile toggle buttons (Placeholders for if added to HTML) */
    .mobile-toggle-button { display: inline-flex; width: 36px; height: 36px; padding: 0; font-size: 1.2rem; background: none; border: none; color: var(--got-text-secondary); transition: color 0.2s ease; border-radius: var(--radius-sm-got); align-items: center; justify-content: center; }
    .mobile-toggle-button:hover { color: var(--got-text-primary); background-color: rgba(255,255,255,0.05); }
}

@media (max-width: 480px) { /* Small Phones */
    :root { font-size: 14px; }
    #game-main-content { padding: 0.6rem; gap: 0.6rem; }
    #input-area { padding: 0.4rem 0.6rem; }
    #player-input { font-size: 0.9rem; padding: 0.5rem 0.7rem; min-height: 38px; }
    #send-button { height: 38px; width: 38px; font-size: 1.4rem; }
    .message { gap: 0.5rem; }
    .message-avatar { width: 32px; height: 32px; border-width: 1px; }
    .message-content { padding: 0.5rem 0.8rem; padding-bottom: 1.4rem; font-size: 0.9rem; }
    #character-avatar-area { width: 70px; height: 70px; border-width: 2px; }
    #character-name.sidebar-char-name { font-size: 1.2rem; }
    .info-pair { font-size: 0.85rem; }
    .utility-widget { min-height: 85px; padding: 0.6rem 0.3rem; }
    .widget-icon-emoji { font-size: 1.6rem; }
    .widget-label { font-size: 0.65rem; }
    .got-modal .modal-body { padding: 0.8rem; }
    .got-modal .modal-header { padding: 0.7rem 1rem; padding-right: 2.5rem; }
    .got-modal h2 { font-size: 1.15rem; }
    .got-modal .modal-close-btn { width: 28px; height: 28px; line-height: 28px; font-size: 1.5rem; top: 5px; right: 5px;}

     /* Further constrain scrollable heights inside modals on small screens */
     .got-modal .tab-content.scrollable-area,
     #map-overview-container, #map-detail-container,
     .shop-item-list-container, #shop-item-details-content,
     #item-content-display.prose-styles,
     .pets-list-container {
         max-height: calc(88vh - 150px); /* Reduce max height further */
     }
     #shop-item-details-content { min-height: 150px; } /* Adjust min height too */


     #pets-list-modal li { padding: 0.6rem; gap: 0.8rem; flex-direction: column; align-items: center; text-align: center;} /* Stack pet info again */
     .pet-avatar-area { width: 40px; height: 40px; font-size: 1.8rem; }
     .pet-info { align-items: center; } .pet-info .pet-card-name { text-align: center; }
     .pet-action-buttons .btn { min-width: 70px; padding: 0.4rem 0.5rem; font-size: 0.7rem; }
     .btn { padding: 0.55rem 1rem; font-size: 0.8rem; }
     .btn-small { padding: 0.4rem 0.7rem; font-size: 0.75rem; }
}
/* Ensure .details-list-modal list items handle word wrap */
.details-list-modal .detail-value, .details-list-modal .item-name {
     word-break: break-word; /* Allows long values/names to wrap */
     white-space: normal; /* Override potential nowrap */
}

/* УЛУЧШЕННОЕ ПРАВИЛО ДЛЯ ЖИРНОГО ТЕКСТА */
/* Это правило более надежно найдет **text** и применит к нему стили */
.message-text strong,
.message-text b { 
    font-weight: 700; /* Стандартный жирный */
    color: var(--got-text-highlight);
    text-shadow: 0 0 4px rgba(250, 204, 21, 0.3); /* Легкое свечение */
}


/* ================== WORLD ANIMATIONS ================== */
#world-animations-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none; /* Ключевое свойство, чтобы не блокировать клики */
    z-index: var(--z-content); /* Позади header/footer/modals, но поверх chat-log */
}

.weather-animation {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 1.5s ease-in-out, visibility 0s 1.5s;
}

.weather-animation.active {
    opacity: 1;
    visibility: visible;
    transition: opacity 1.5s ease-in-out, visibility 0s 0s;
}

/* ----- Day/Night Cycle ----- */
#day-night-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: background-color 5s ease-in-out;
    background-color: transparent; /* Default/Day */
}

#day-night-overlay.day { background-color: rgba(255, 255, 255, 0.0); }
#day-night-overlay.dusk { background-color: rgba(255, 120, 0, 0.15); }
#day-night-overlay.night { background-color: rgba(15, 23, 42, 0.35); } /* Slate-900 with alpha */
#day-night-overlay.dawn { background-color: rgba(239, 68, 68, 0.1); }


/* ----- Rain Animation ----- */
#rain-animation {
    background-image: 
        url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAKxJREFUSA2118ENwyAMBVD/aZIkLdqEZ9ol2ZIkQpTUd+kKFu7t308k+/qNq2tAZuMAOExxIeIQcQBxkfgMX5/gU4BzhR2AFfAFmAGx6qAHPADGAFPAGLDqLwPcgSzApJkEtgHswCLyALsR5sC4MggtwDYYBjbArL8MTAJVsI+8PqYIuAQaAjPgcFkQjpQ6v8oDRsDjeR9s9DvxU6Y22CVdAYVffn0BG2QyN62ba90AAAAASUVORK5CYII=),
        url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAgCAYAAAAbifjMAAAAAXNSR0IArs4c6QAAAIhJREFUOE9jZKAyYKSyeQz0wMDAwMAiDAz0zYBOpGlg/P//fwwAAYaBjaE+34A4lAyBsoGBgeEBYBqIEg2MDHRkEisZjAFiAemBhH8GDLgE5KLIAGfKAFLw8MGCYcZkBgNWAxnUQU2HjFg0A4lGIMpBCTPcwAyGaiAWxCDCEgB8WjO0cUNnEgAAAABJRU5ErkJggg==),
        url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAkCAYAAADo6MvCAAAAAXNSR0IArs4c6QAAANJJREFUWEft2GEOgkAURNGtOSSOlTu5ghfcwbE5lEcmmGz/K1x5Z71/nHS58r9aYyyD+5/sLwQsgQ2wbAALYNmAAWyZ3yYAD8As6AJsAIaAnRUogRcw/wkMfwG78q/iS8DdBK1Ajyq/w7UCrQqAitfP4bQCsAInajwXdgDkcgJWwAEo5nNAlwCYLhB4E3oBGxAGt6sC4XWArw1AAhsgAc0gAsQAcICECBqBCbBAHkYDCmAAmMFeowIsgF1YCSQAAH6/mg+aHdeSAAAAAElFTkSuQmCC);
    animation: rain-fall 2s linear infinite;
}

@keyframes rain-fall {
    0% { background-position: 0 0; }
    100% { background-position: 0 100%; }
}

/* ----- Snow Animation ----- */
@keyframes snow-fall {
  0% { transform: translateY(-10vh); }
  100% { transform: translateY(110vh); }
}

#snow-animation {
    background-image: 
        radial-gradient(4px 4px at 10px 30px, #fff, transparent),
        radial-gradient(6px 6px at 40px 60px, #eee, transparent),
        radial-gradient(3px 3px at 50px 10px, #fff, transparent),
        radial-gradient(4px 4px at 90px 40px, #ddd, transparent),
        radial-gradient(6px 6px at 20px 80px, #fff, transparent),
        radial-gradient(3px 3px at 80px 100px, #eee, transparent);
    background-size: 100px 100px;
    animation: snow-fall 20s linear infinite;
}

/* ----- Sandstorm Animation ----- */
#sandstorm-animation {
    background: url(https://www.transparenttextures.com/patterns/black-felt.png), linear-gradient(to top right, #c2b280, #d9ad7c);
    animation: sand-blow 4s linear infinite;
}

@keyframes sand-blow {
    0% { background-position: 0 0, 0 0; }
    100% { background-position: 250px 250px, 0 0; }
}
/* --- НАЧАЛО: ИСПРАВЛЕНИЕ ДЛЯ КНОПОК УПРАВЛЕНИЯ В ШАПКЕ --- */

/* 1. Общий стиль для обеих кнопок-иконок (Выход и Рестарт) */
#exit-game-btn,
#restart-game-btn {
    width: 36px;
    height: 36px;
    padding: 0;
    font-size: 1.1rem; /* Слегка уменьшим размер для иконки FontAwesome */
    border-radius: var(--radius-sm-got);
    line-height: 1;
    background: none;
    border: none;
    transition: all var(--transition-fast-got);
    color: var(--got-text-secondary);
    
    /* Дополнительные свойства для идеального центрирования иконки */
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* 2. Уникальный стиль при наведении для каждой кнопки */
#exit-game-btn:hover:not(:disabled) {
    background-color: rgba(220, 38, 38, 0.15); /* Красный фон */
    color: var(--got-accent-red);
    box-shadow: 0 0 8px rgba(220, 38, 38, 0.4);
}

#restart-game-btn:hover:not(:disabled) {
    background-color: rgba(135, 206, 235, 0.15); /* Голубой/ледяной фон */
    color: var(--got-text-link-hover);
    box-shadow: 0 0 8px rgba(135, 206, 235, 0.4);
}

/* 3. Эффект нажатия для обеих кнопок */
#exit-game-btn:active:not(:disabled) {
    background-color: rgba(220, 38, 38, 0.3);
    transform: scale(0.95);
    box-shadow: none;
}
#restart-game-btn:active:not(:disabled) {
    background-color: rgba(135, 206, 235, 0.3);
    transform: scale(0.95);
    box-shadow: none;
}

/* --- КОНЕЦ: ИСПРАВЛЕНИЯ --- */