/* static/style.css */
:root {
    --primary-bg: #1a1a1a; /* Dark background */
    --secondary-bg: #2a2a2a;
    --border-color: #444;
    --text-color: #e0e0e0;
    --highlight-color: #007ab8; /* Dark blue */
    --success-color: #00cc66;
    --danger-color: #ff4d4d;
    --warning-color: #ffcc00;
    --font-family: 'Roboto', sans-serif;
    --header-bg: #0d0d0d; /* Very dark header */
    --header-text: #f0f0f0;
    --sidebar-bg: #222;
    --accent-light: rgba(255, 204, 0, 0.2); /* Light yellow background */
}

#exit-button:hover {
    background-color: #ff4d4d;
    border-color: #ff4d4d;
    box-shadow: 0 0 10px rgba(255, 77, 77, 0.4);
}

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: var(--font-family);
    background-color: var(--primary-bg);
    color: var(--text-color);
    overflow: hidden; /* Prevent body scrolling */
}

/* --- Dashboard Grid Layout --- */
.dashboard-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
    padding: 10px;
    box-sizing: border-box;
    gap: 10px;
}

/* --- Top Row: Logo, Players & System Controls --- */
#top-row {
    display: flex;
    height: 150px; /* Header height */
    gap: 10px;
    z-index: 1000; /* Ensure header is above main body */
}

#top-logo-container {
    background-color: var(--header-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#players-section {
    flex: 1;
    background-color: var(--header-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 10px;
    display: flex;
    align-items: center;
    overflow-x: visible; /* Allow slideouts to overflow the container */
    overflow-y: visible;
    position: relative;
    min-width: 0; /* Allow shrinking */
}

#system-controls {
    width: 100px;
    height: auto;
    padding: 4px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-shrink: 0;
}

.system-controls-inner {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#system-controls button {
    font-size: 0.85em;
    padding: 4px 8px;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

#player-list {
    display: flex;
    flex-direction: row;
    gap: 15px; /* Reduced gap since cards now grow */
    height: 100%;
    align-items: center;
    width: max-content; /* Ensure container expands to fit content */
    padding-bottom: 5px;
}


/* --- Main Body Row: Sidebar & Center --- */
#main-body {
    display: flex;
    flex: 1; /* Takes remaining vertical space */
    gap: 10px;
    min-height: 0; /* Prevent overflow issues in flex children */
}

/* --- Left Sidebar: Market Prices & Log --- */
#market-sidebar {
    width: 220px;
    background-color: var(--sidebar-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    overflow-y: hidden; /* No outer scrolling */
    flex-shrink: 0;
}

/* Market Section inside sidebar */
#market-section {
    flex-shrink: 0; /* Don't shrink prices */
}

#market-prices-columns {
    display: flex;
    flex-direction: column;
}

.market-category-column {
    background-color: rgba(255, 255, 255, 0.05);
    padding: 5px 8px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.market-category-column h4 {
    color: var(--warning-color);
    margin: 0 0 5px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    padding-bottom: 2px;
    font-size: 0.9em;
    text-align: center;
}

.market-category-column ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.market-category-column li {
    display: flex;
    justify-content: space-between;
    padding: 5px 0;
    font-size: 0.85em;
    border-bottom: 1px dotted rgba(255, 255, 255, 0.15);
}
.market-category-column li:last-child { border-bottom: none; }
.market-category-column li .value { font-weight: 600; color: #fff; }

/* Log Section */
#log-section-sidebar {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 200px; /* Minimum height for log */
}

#game-log {
    flex: 1;
    overflow-y: auto;
    font-size: 0.8em;
    padding: 5px;
    background: rgba(0,0,0,0.2);
}

#game-log ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

#game-log li {
    margin-bottom: 4px;
    padding-left: 10px;
    text-indent: -10px;
}

#chat-section {
    margin-top: 5px;
}
#chat-input { padding: 6px; font-size: 0.85em; background: #333; color: #fff; border: 1px solid #555; border-radius: 4px; }
#chat-send-button { padding: 6px 10px; font-size: 0.85em; }

/* --- Center Area --- */
#center-area {
    flex: 1;
    display: flex;
    gap: 10px;
    min-width: 0;
}

/* Col 2: Play Area Wrapper */
#center-content {
    flex: 1; /* Takes remaining space */
    background-color: var(--secondary-bg);
    padding: 15px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Prevent spill */
    margin: 1em;
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

#center-content.my-turn-active {
    border-color: var(--success-color);
    box-shadow: 0 0 15px rgba(0, 204, 102, 0.4);
}

#center-content.turn-flash-green { animation: turn-flash-green-anim 0.8s ease-out; }
#center-content.turn-flash-yellow { animation: turn-flash-yellow-anim 0.8s ease-out; }
#center-content.turn-flash-orange { animation: turn-flash-orange-anim 0.8s ease-out; }
#center-content.turn-flash-red { animation: turn-flash-red-anim 0.8s ease-out; }

@keyframes turn-flash-green-anim {
    0% { box-shadow: 0 0 0px rgba(0, 204, 102, 0); }
    20% { box-shadow: 0 0 60px rgba(0, 204, 102, 0.8); border-color: #fff; }
    100% { box-shadow: 0 0 15px rgba(0, 204, 102, 0.4); }
}
@keyframes turn-flash-yellow-anim {
    0% { box-shadow: 0 0 0px rgba(255, 255, 0, 0); }
    20% { box-shadow: 0 0 60px rgba(255, 255, 0, 0.8); border-color: #fff; }
    100% { box-shadow: 0 0 15px rgba(255, 255, 0, 0.4); }
}
@keyframes turn-flash-orange-anim {
    0% { box-shadow: 0 0 0px rgba(255, 165, 0, 0); }
    20% { box-shadow: 0 0 60px rgba(255, 165, 0, 0.8); border-color: #fff; }
    100% { box-shadow: 0 0 15px rgba(255, 165, 0, 0.4); }
}
@keyframes turn-flash-red-anim {
    0% { box-shadow: 0 0 0px rgba(255, 77, 77, 0); }
    20% { box-shadow: 0 0 60px rgba(255, 77, 77, 0.8); border-color: #fff; }
    100% { box-shadow: 0 0 15px rgba(255, 77, 77, 0.4); }
}

/* Timer Borders - Overlay on top of #center-content border */
#center-content {
    position: relative; /* Anchor for absolute borders */
}

.timer-border {
    position: absolute;
    background-color: var(--success-color);
    box-shadow: 0 0 10px var(--success-color);
    display: none; /* Hidden by default */
    z-index: 5;
    transition: background-color 0.5s ease, box-shadow 0.5s ease;
}

.timer-border.timer-green {
    background-color: var(--success-color);
    box-shadow: 0 0 10px var(--success-color);
}

.timer-border.timer-yellow {
    background-color: #ffff00;
    box-shadow: 0 0 15px #ffff00;
}

.timer-border.timer-orange {
    background-color: #ffa500;
    box-shadow: 0 0 18px #ffa500; 
}
.timer-border.timer-red {
    background-color: var(--danger-color);
    box-shadow: 0 0 20px var(--danger-color);
}

.timer-border.paused {
    animation-play-state: paused !important;
    opacity: 0.5;
}

/* HIDE static border when timer is active */
#center-content.timer-active {
    border-color: transparent !important;
    box-shadow: none !important;
}

/* Top Left: Shrinks Right -> Left (Start Point: 12:00) */
/* This covers from 9:00 to 12:00. Disappears starting at 12. */
/* Origin: Left (9:00). ScaleX 1 -> 0. */
#timer-border-top-left {
    top: -1px; left: -1px; width: 50%; height: 3px;
    transform-origin: left;
    animation: timer-top-left var(--timer-duration) linear forwards;
}

/* Left: Shrinks Top -> Bottom (9:00 -> 6:00) */
/* Origin: Bottom (6:00). ScaleY 1 -> 0. */
#timer-border-left {
    top: -1px; bottom: -1px; left: -1px; width: 3px;
    transform-origin: bottom;
    animation: timer-left var(--timer-duration) linear forwards;
}

/* Bottom: Shrinks Left -> Right (6:00 -> 3:00) */
/* Origin: Right (3:00). ScaleX 1 -> 0. */
#timer-border-bottom {
    bottom: -1px; left: -1px; right: -1px; height: 3px;
    transform-origin: right;
    animation: timer-bottom var(--timer-duration) linear forwards;
}

/* Right: Shrinks Bottom -> Top (3:00 -> 12:00) */
/* Origin: Top (12:00). ScaleY 1 -> 0. */
#timer-border-right {
    top: -1px; bottom: -1px; right: -1px; width: 3px;
    transform-origin: top;
    animation: timer-right var(--timer-duration) linear forwards;
}

/* Top Right: Shrinks Right -> Left ?? No. */
/* This covers 12:00 to 3:00. Wait. */
/* Cycle CCW: 12 -> 9 (TL), 9 -> 6 (L), 6 -> 3 (B), 3 -> 12 (R). */
/* If we start at 12 and go CCW: */
/* 1. Top-Left Segment (12 to 9). */
/* 2. Left Segment (9 to 6). */
/* 3. Bottom Segment (6 to 3). */
/* 4. Right Segment (3 to 12). */
/* 5. Top-Right Segment? NO. */
/* A rectangle has 4 sides. 12 o'clock splits the Top Side. */
/* Perimeter trace CCW: */
/* Start (12). Go CCW to Corner (TopLeft). That is the Top-Left Segment. */
/* Corner (TopLeft) to Corner (BottomLeft). Left Segment. */
/* Corner (BottomLeft) to Corner (BottomRight). Bottom Segment. */
/* Corner (BottomRight) to Corner (TopRight). Right Segment. */
/* Corner (TopRight) to Start (12). Top-Right Segment. */
/* TOTAL 5 Segments. */

/* Top Right Segment: Disappears last. */
/* Origin: Left? (No, that's Center). */
/* As we approach end, the bar burns from Right Corner towards Center (12). */
/* So the remaining bar is attached to Center. */
/* Origin: Left (Center). ScaleX 1 -> 0. */
#timer-border-top-right {
    top: -1px; right: -1px; width: 50%; height: 3px;
    transform-origin: left; /* Anchored at center */
    /* Usually CSS transform-origin "left" on a right-aligned element refers to its own left edge. */
    /* Since width is 50%, left edge IS the center. Correct. */
    animation: timer-top-right var(--timer-duration) linear forwards;
}

/* Timing (15% / 20% / 30% / 20% / 15%) */

@keyframes timer-top-left {
    0% { transform: scaleX(1); }
    15% { transform: scaleX(0); }
    100% { transform: scaleX(0); }
}

@keyframes timer-left {
    0% { transform: scaleY(1); }
    15% { transform: scaleY(1); }
    35% { transform: scaleY(0); }
    100% { transform: scaleY(0); }
}

@keyframes timer-bottom {
    0% { transform: scaleX(1); }
    35% { transform: scaleX(1); }
    65% { transform: scaleX(0); }
    100% { transform: scaleX(0); }
}

@keyframes timer-right {
    0% { transform: scaleY(1); }
    65% { transform: scaleY(1); }
    85% { transform: scaleY(0); }
    100% { transform: scaleY(0); }
}

@keyframes timer-top-right {
    0% { transform: scaleX(1); }
    85% { transform: scaleX(1); }
    100% { transform: scaleX(0); }
}

/* Current Turn Header (Restored Styling) */
#current-turn {
    font-weight: bold;
    font-size: 1.1em;
    padding: 8px 12px;
    border-radius: 5px;
    margin-bottom: 15px;
    border: 1px solid transparent;
    text-align: center;
    flex-shrink: 0;
}
#current-turn.my-turn { background-color: var(--highlight-color); color: #fff; border-color: var(--highlight-color); }
#current-turn.other-turn { background-color: rgba(255, 255, 255, 0.05); color: #888; border-color: var(--border-color); }
#current-turn.waiting, #current-turn.finished { background-color: rgba(255, 255, 255, 0.05); color: #888; border-color: var(--border-color); }
#current-turn.event-pending { background-color: #4d4d00; color: var(--warning-color); border-color: var(--warning-color); font-style: italic; }

/* Hand / Info Area */
#internal-hand-area {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    padding: 5px;
}

#waiting-info { text-align: center; margin-top: 20px; }

/* Action Buttons Row (Horizontal at bottom) */
#action-buttons-row {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid rgba(255,255,255,0.1);
}

#action-buttons-row button {
    min-width: 100px;
    padding: 10px 15px;
}

/* --- Col 3: Auctions --- */

.auction-title {
    font-size: 1em; 
    text-align: center;
    background-color: #3d1c1c;
    border-radius: 8px;
    padding: 10px;
    margin-top: 5px;
    margin-bottom: 0px;
}

#center-right-auctions {
    width: 240px;
    background-color: var(--secondary-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex-shrink: 0;
    overflow-y: hidden;
}

#auction-list {
    display: flex;
    flex-direction: column; /* Vertical stack */
    align-items: center;
    gap: 8px;
    flex: 0 1 auto; /* Don't force to fill space, allow log to take what's left */
}

#auction-list button {
    border: #3d1c1c 2px solid;
    background-color: black;
    width: 90%;
    height: auto;
    min-height: 6em;
    padding: 10px;
    margin: 0;
}

/* --- Player Card Styling --- */
.player-card {
    flex: 0 0 auto; /* Allow growth */
    width: 295px; /* Default width: 250 (card) + 45 (tabs) */
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: row; /* Layout content and slideout horizontally */
    background-color: var(--secondary-bg);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 0; /* Padding moved to inner elements */
    position: relative;
    z-index: 10;
    transition: width 0.3s ease;
    overflow: visible; /* Show tabs! */
}

.player-card.slideout-expanded {
    width: 545px; /* 250 (card) + 45 (tabs) + 250 (inner) */
}

.player-card.my-player { background-color: #003366; }

/* Main card info wrapper */
.player-card-main {
    flex: 0 0 250px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 8px;
    box-sizing: border-box;
    background-color: inherit;
}

.player-card-header {
    display: flex;
    justify-content: space-between;
    font-size: 0.9em;
    margin-bottom: 5px;
    font-weight: bold;
}

.player-card .financials {
    font-size: 1.05em;
    flex-grow: 1;
}

/* Slide-out drawer */
.player-slideout {
    flex: 0 0 auto;
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    pointer-events: none;
    background-color: inherit;
}

.player-slideout-tabs {
    display: flex;
    flex-direction: column;
    z-index: 2;
    gap: 1px;
    flex-shrink: 0;
    pointer-events: auto;
}

.slideout-tab {
    cursor: pointer;
    color: var(--highlight-color);
    background-color: inherit; /* Matches player card */
    border: 1px solid var(--border-color);
    border-left: none;
    border-radius: 0 4px 4px 0;
    padding: 5px 8px;
    font-size: 0.7em;
    white-space: nowrap;
    text-transform: uppercase;
    font-weight: bold;
    box-shadow: 2px 0 5px rgba(0,0,0,0.2);
    transition: all 0.2s ease;
    width: 45px; /* Fixed width to fit text horizontally */
    text-align: center;
    position: relative; /* Anchor for badge */
}

.tab-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    background-color: var(--danger-color);
    color: white;
    font-size: 0.75em;
    min-width: 16px;
    height: 16px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    box-sizing: border-box;
    border: 1px solid var(--border-color);
    z-index: 5;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.player-card.my-player .slideout-tab {
    background-color: #003366;
}

.slideout-tab:hover {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.05);
}

.slideout-tab.active {
    color: #fff;
    background-color: var(--highlight-color) !important;
    border-right: none;
    border-radius: 0;
    padding-right: 8px;
    box-shadow: none;
}

.player-slideout-inner {
    width: 0; /* Hidden initially */
    background-color: inherit; /* Matches player card */
    border: 1px solid var(--border-color);
    border-left: none;
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    opacity: 0;
    transition: width 0.3s ease, opacity 0.3s ease;
    box-shadow: 5px 0 10px rgba(0,0,0,0.3);
    height: 100%;
}

.player-card.my-player .player-slideout-inner {
    background-color: #003366;
}

.player-card.slideout-expanded .player-slideout {
    z-index: 50;
}

.player-card.slideout-expanded .player-slideout-inner {
    width: 250px; /* Expand to full width */
    opacity: 1;
    pointer-events: auto;
}

.player-card.slideout-expanded {
    z-index: 100;
}

.player-slideout-body {
    flex-grow: 1;
    overflow-y: auto;
    padding: 10px;
}

.slideout-content {
    display: none;
}

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

.slideout-content ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.slideout-content li {
    font-size: 0.85em;
    margin-bottom: 8px;
    padding-bottom: 5px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.mtg-stat {
    margin-right: 12px;
}

.slideout-content strong {
    color: var(--warning-color);
    display: block;
    margin-bottom: 3px;
    font-size: 0.9em;
}

.player-slideout-toggle {
    cursor: pointer;
    color: var(--highlight-color);
}
.player-slideout-toggle:hover { text-decoration: underline; color: #fff; }

#player-list {
    display: flex;
    flex-direction: row;
    gap: 15px; /* Reduced gap since cards now grow */
    height: 100%;
    align-items: center;
    width: max-content; /* Ensure container expands to fit content */
    padding-bottom: 5px;
}

#actions {
    display: flex;
    align-items: center;
    justify-content: center
}

/* --- Hand Styling Updates (Horizontal Row) --- */
.hand-container {
    display: flex;
    flex-direction: row; /* Horizontal layout */
    flex-wrap: wrap;     /* Wrap if too many */
    justify-content: center;
    gap: 20px;
    padding: 10px;
}

/* --- Hand Cards (Bigger: ~220px width x 280px height) --- */
.hand-card {
    background-color: #222; border: 1px solid var(--border-color);
    border-radius: 8px; width: 220px; height: 280px; /* Increased by ~25% */
    display: flex; flex-direction: column; justify-content: space-between;
    overflow: hidden; transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3); position: relative;
    flex-shrink: 0;
}
.hand-card:hover { transform: translateY(-10px); border-color: var(--highlight-color); box-shadow: 0 5px 15px rgba(0,0,0,0.4); z-index: 100; }
.hand-card.clickable { cursor: pointer; }
.hand-card.viewer-mode { opacity: 0.85; pointer-events: none; filter: grayscale(80%); }

/* Bigger Fonts for Hand Cards */
.card-header {
    background-color: #333; padding: 10px 5px;
    font-size: 0.95em; /* Increased */
    font-weight: bold; text-transform: uppercase; border-bottom: 1px solid var(--border-color); color: #bbb; text-align: center;
}
.card-body {
    padding: 15px 10px;
    font-size: 1em; /* Increased */
    text-align: center; flex-grow: 1; display: flex; flex-direction: column; justify-content: center; align-items: center;
}
.card-name { font-size: 1.25em; font-weight: bold; margin-bottom: 10px; }
.card-stats { width: 100%; display: flex; flex-direction: column; gap: 6px; font-size: 1em; }
.stat-row { display: flex; justify-content: space-between; padding: 4px 0; border-bottom: 1px solid rgba(255,255,255,0.05); }

/* --- Event Card & Flip Animation (Restored & Enhanced) --- */
.event-card-container { perspective: 1200px; width: 320px; height: 450px; margin: 0 auto; position: relative; }
.event-card { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; transition: transform 0.6s ease-out; }
.event-card.flipped { transform: rotateY(180deg); }

.event-card-front, .event-card-back {
    width: 100%; 
    height: 100%; 
    position: absolute; 
    top: 0; 
    left: 0; 
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden; /* For Safari/Chrome */
    border-radius: 12px; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    padding: 25px; 
    box-sizing: border-box; 
    border: 2px solid #555;
    overflow: hidden; /* Ensure content doesn't bleed out */
}

.event-card-front { 
    background: linear-gradient(135deg, #1a1a1a, #0d0d0d); 
    border-color: var(--highlight-color); 
    justify-content: center; 
    z-index: 2; 
    transform: rotateY(0deg); /* Explicitly set for 3D context */
}

.event-card-back { 
    transform: rotateY(180deg); 
    background: linear-gradient(135deg, #2c3e50, #1a252f); 
    text-align: center; 
    justify-content: flex-start; 
    padding-top: 20px;
    z-index: 1; /* Start below front */
}

/* Ensure the back face stays on top when flipped */
.event-card.flipped .event-card-back {
    z-index: 3;
}

.event-details-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-grow: 1;
}

.event-details-container h3 {
    font-size: 1.4em;
    margin-bottom: 15px;
    color: var(--warning-color);
}

.event-details-container p {
    font-size: 1.1em;
    line-height: 1.4;
    padding: 0 10px;
}

.event-icon {
    font-size: 3em;
    margin-bottom: 10px;
}

.event-cover-img {
    max-width: 80%;
    height: auto;
    margin-bottom: 20px;
}
.animate-enter { animation: slideInRight 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; }
@keyframes slideInRight { 0% { transform: translateX(120%) scale(0.8); opacity: 0; } 100% { transform: translateX(0) scale(1); opacity: 1; } }

/* --- Misc --- */
h1, h2, h3 { color: var(--header-text); margin-top: 0; }

/* --- Responsive fixes --- */
@media (max-width: 1200px) {
    #center-right-auctions { width: 180px; }
    #market-sidebar { width: 180px; }
}

@media (max-width: 768px) {
    /* Stack everything on mobile */
    .dashboard-container { height: auto; overflow-y: auto; }
    #top-row { flex-direction: column; height: auto; }
    #players-section { width: 100%; overflow-x: auto; min-height: 150px; }
    #system-controls { width: 100%; flex-direction: row; }
    #main-body { flex-direction: column; }
    #market-sidebar { width: 100%; flex-direction: row; overflow-x: auto; height: auto; display: block; }
    #market-section { display: flex; overflow-x: auto; gap: 10px; }
    #log-section-sidebar { margin-top: 10px; height: 200px; }
    #center-area { flex-direction: column; }
    #internal-hand-area { flex: 1; height: auto; }
    #center-right-auctions { width: 100%; flex-direction: row; overflow-x: auto; }
}

/* Loan Selection List Styling */
#loan-selection-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.loan-select-item {
    background-color: #222;
    border: 1px solid #444;
    padding: 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
}
.loan-select-item:hover {
    border-color: var(--highlight-color);
    background-color: #2a2a2a;
}
.loan-select-item strong { color: #fff; }
.loan-select-item .interest { color: var(--warning-color); float: right; }

/* Tooltip fixes */
.tooltip-container {
    position: relative;
    display: inline-flex; /* Better alignment for button */
    align-items: center;
}

.tooltip {
    visibility: hidden;
    width: 180px;
    background-color: var(--secondary-bg);
    color: var(--text-color);
    text-align: left;
    border-radius: 6px;
    padding: 10px;
    position: absolute;
    z-index: 2000; /* Higher than modal overlays if needed */
    bottom: calc(100% + 10px); /* Position above the button */
    right: 0; /* Align with right edge of button */
    opacity: 0;
    transition: opacity 0.3s, visibility 0.3s;
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 8px rgba(0,0,0,0.5);
    pointer-events: none; /* Don't interfere with mouse */
}

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

.tooltip-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
    font-size: 0.85em;
}

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

.tooltip-row span:first-child {
    color: #888;
    margin-right: 10px;
}

.tooltip-row span:last-child {
    font-family: 'Space Mono', monospace;
    color: var(--warning-color);
}

.driver-js-overlay {
    background-color: rgba(0, 0, 0, 0.1) !important; /* Adjust the last value (0.7) for opacity */
}

/* Floating Cash */
.floating-cash {
    position: fixed; font-weight: 800; font-size: 1.4em; pointer-events: none; z-index: 9999;
    text-shadow: 0px 1px 3px rgba(0,0,0,0.8); opacity: 0; animation: floatUpFade 2.5s ease-out forwards;
}
.floating-cash.gain { color: #00cc66; }
.floating-cash.loss { color: #ff4d4d; }
@keyframes floatUpFade {
    0% { opacity: 1; transform: translateY(0) rotate(15deg); }
    50% { opacity: 1; }
    100% { opacity: 0; transform: translateY(-50px) rotate(15deg); }
}

/* --- Restored Modal & Component Styles --- */

/* General Button Styles */
button {
    background-color: var(--highlight-color);
    color: #fff;
    padding: 10px 15px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1em;
    transition: background-color 0.2s ease;
}
button:hover:not(:disabled) { background-color: #096dd9; }
button:disabled { background-color: #444; color: #888; cursor: not-allowed; opacity: 0.7; }
button.secondary { background-color: #333; color: var(--text-color); border: 1px solid var(--border-color); }
button.secondary:hover:not(:disabled) { background-color: #444; border-color: #666; }
button.success { background-color: #4a7c5a; color: #fff; }
button.success:hover:not(:disabled) { background-color: #5a8d6a; }
button.warning { background-color: #7c6a4a; color: #fff; }
button.warning:hover:not(:disabled) { background-color: #8d7a5a; }
button.danger { background-color: #7c4a4a; color: #fff; }
button.danger:hover:not(:disabled) { background-color: #8d5a5a; }

/* Modals */
.modal {
    display: none;
    position: fixed;
    z-index: 2100;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.5);
    align-items: center;
    justify-content: center;
}
.modal.active { display: flex; }

.modal-content {
    background-color: var(--secondary-bg);
    margin: auto;
    padding: 0;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    width: 90%;
    max-width: 650px;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    animation-name: animatetop;
    animation-duration: 0.4s;
    display: flex;
    flex-direction: column;
    transition: max-width 0.3s ease;
}

.modal-content.wide {
    max-width: 90vw !important;
    width: fit-content !important;
    min-width: 800px;
}
@keyframes animatetop { from {top: -300px; opacity: 0} to {top: 0; opacity: 1} }

.modal-header {
    padding: 15px 20px;
    background-color: var(--highlight-color);
    color: #fff;
    border-bottom: 1px solid #444;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}
.modal-header h2 { margin: 0; font-size: 1.4em; color: #fff; }

.modal-body {
    padding: 15px 20px;
    flex-grow: 1;
    max-height: 75vh;
    overflow-y: auto;
}
.modal-body label { display: block; margin-bottom: 8px; font-weight: 500; }
.modal-body input[type="text"], .modal-body input[type="number"], .modal-body select {
    width: 100%; padding: 10px; margin-bottom: 15px;
    border: 1px solid var(--border-color); border-radius: 4px;
    background-color: #333; color: var(--text-color); box-sizing: border-box;
}

.modal-footer {
    padding: 15px 20px;
    background-color: #111;
    border-top: 1px solid #444;
    text-align: right;
    border-bottom-left-radius: 8px; border-bottom-right-radius: 8px;
}
.modal-footer button { margin-left: 10px; }

/* Spinner */
.spinner {
    border: 4px solid rgba(0, 0, 0, 0.1); width: 36px; height: 36px;
    border-radius: 50%; border-left-color: #09f;
    animation: spin 1s ease infinite; margin: 15px auto;
}
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
.hidden { display: none !important; }

/* Opportunity / Info Cards */
.opportunity-formatted { padding: 10px 0; }
.opportunity-formatted h4 { text-align: center; margin: 0 0 15px; color: var(--highlight-color); font-size: 1.3em; }
.info-card-container { display: flex; justify-content: space-around; gap: 15px; margin-bottom: 15px; flex-wrap: wrap; }
.info-card {
    flex: 1; min-width: 120px; background-color: #111;
    border: 1px solid #444; border-radius: 6px; padding: 15px 10px;
    text-align: center; display: flex; flex-direction: column; justify-content: center;
}
.info-card .label { font-size: 0.85em; color: #888; margin-bottom: 8px; }
.info-card .value { font-size: 1.4em; font-weight: 600; color: var(--text-color); }

/* Opportunity Actions */
#opportunity-actions { text-align: center; margin-top: 15px; padding-top: 15px; border-top: 1px solid #444; }
#opportunity-actions button { margin: 5px 10px; min-width: 100px; }

/* Setup Modal */
.setup-stats { background-color: #222; padding: 15px; border-radius: 6px; border: 1px dashed #444; margin-bottom: 20px; text-align: center; }
.setup-stats p { margin: 8px 0; font-size: 1.1em; }
.setup-stats strong { color: var(--success-color); font-size: 1.2em; }
#setup-waiting-message { text-align: center; font-style: italic; color: var(--highlight-color); margin-top: 15px; animation: pulse 1.5s infinite; }
@keyframes pulse { 0% { opacity: 0.6; } 50% { opacity: 1; } 100% { opacity: 0.6; } }

.market-change-indicator.up {
    color: var(--success-color);
}

/* --- Scoreboard Container --- */
#scoreboard-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    z-index: 2000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

#scoreboard-container:not(.hidden) {
    opacity: 1;
}

#scoreboard-title {
    font-size: 3em;
    color: var(--warning-color);
    margin-bottom: 30px;
    text-shadow: 0 0 10px var(--warning-color);
}

#scoreboard-list {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
    max-width: 1200px;
}

.score-card {
    background-color: var(--secondary-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 24px;
    width: 320px;
    text-align: center;
    transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
    box-shadow: 0 4px 15px rgba(0,0,0,0.4);
}

.score-card h3 {
    margin-bottom: 20px;
    font-size: 1.8em;
    color: var(--highlight-color);
}

.score-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.score-card li {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px dotted var(--border-color);
}

.score-card li:last-child {
    border-bottom: none;
    font-weight: bold;
    font-size: 1.2em;
    margin-top: 10px;
}

.score-card .tally {
    font-weight: bold;
    color: var(--text-color);
}

.score-card.winner {
    transform: scale(1.1);
    box-shadow: 0 0 20px var(--success-color);
    border-color: var(--success-color);
}

.score-summary-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.expandable-score-row {
    display: flex;
    justify-content: space-between;
    padding: 10px 12px !important;
    margin: 4px -10px;
    border-radius: 6px;
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

.expandable-score-row.active {
    cursor: pointer;
}

.expandable-score-row.active:hover {
    background-color: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.1);
}

.expandable-score-row.expanded {
    background-color: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.15);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    margin-bottom: 0;
}

.expand-icon {
    font-size: 0.85em;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-block;
    color: var(--highlight-color);
    margin-left: 8px;
}

.score-sub-details {
    background-color: rgba(0, 0, 0, 0.3);
    margin: 0 -10px 8px -10px;
    padding: 10px 15px 12px 25px;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-top: none;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
}

.score-sub-details ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.score-sub-details li {
    display: flex;
    justify-content: space-between;
    font-size: 0.75em !important;
    padding: 6px 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #ccc;
}

.score-sub-details li strong {
    color: var(--text-color);
}

.score-sub-details li:last-child {
    border-bottom: none !important;
}

#scoreboard-footer {
    margin-top: 30px;
}

/* Odd Jobs */
.odd-job-popup {
    position: fixed; z-index: 9999; background-color: #2c3e50;
    border: 2px solid #f1c40f; border-radius: 8px; width: 220px;
    box-shadow: 0 0 20px rgba(241, 196, 15, 0.4); cursor: pointer;
    animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: flex; flex-direction: column; overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.odd-job-popup:hover {
    transform: scale(1.05);
    box-shadow: 0 0 25px rgba(241, 196, 15, 0.6);
}
.odd-job-header { background-color: rgba(0,0,0,0.4); color: #f1c40f; font-size: 0.75rem; font-weight: 800; text-align: center; padding: 6px 0; letter-spacing: 1px; }
.odd-job-body { padding: 15px 10px; text-align: center; color: #ecf0f1; font-weight: bold; font-size: 1.1em; }
.odd-job-body div:last-child { color: var(--success-color); font-size: 1.2em; margin-top: 5px; }

.odd-job-claim-bar {
    height: 35px;
    background-color: #1a252f;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.9em;
    color: #fff;
    text-transform: uppercase;
    overflow: hidden;
}

.odd-job-progress {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: var(--highlight-color);
    z-index: 1;
    animation: oddJobCountdown 5s linear forwards;
    transform-origin: left;
}

.odd-job-claim-text {
    position: relative;
    z-index: 2;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

.odd-job-popup.claimed { 
    pointer-events: none; 
    border-color: #27ae60;
    box-shadow: 0 0 10px rgba(39, 174, 96, 0.3);
}

.odd-job-popup.claimed .odd-job-progress {
    background-color: #27ae60;
    animation: none;
    width: 100%;
}

.odd-job-popup.claimed .odd-job-header {
    background-color: #27ae60;
    color: #fff;
}

.odd-job-popup.fading {
    opacity: 0;
    transition: opacity 1.5s ease-out;
}

@keyframes oddJobCountdown {
    from { transform: scaleX(1); }
    to { transform: scaleX(0); }
}
@keyframes popIn { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* Timed Ack Button */
.timed-ack-btn {
    position: relative;
    padding: 12px 24px;
    font-weight: bold;
    color: #e0e0e0;
    background-color: #333;
    border: 1px solid #555;
    border-radius: 4px;
    cursor: pointer;
    overflow: hidden;
    z-index: 1;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.timed-ack-btn:hover:not(:disabled) {
    background-color: #444;
    border-color: var(--highlight-color);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.2);
}

.timed-ack-btn:disabled {
    cursor: not-allowed;
    opacity: 0.7;
    background-color: #222;
}

.timed-ack-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0%;
    background-color: var(--highlight-color);
    z-index: -1;
    opacity: 0.4;
    transition: width var(--timer-duration, 7s) linear;
}

.timed-ack-btn.counting-down::before {
    width: 100%;
}

/* Badges & Tooltips */
.market-diff-badge { display: inline-block; padding: 3px 10px; border-radius: 15px; font-size: 0.7em; font-weight: bold; margin-left: 4px; color: #fff; }
.market-diff-badge.good { background-color: var(--success-color); }
.market-diff-badge.bad { background-color: var(--danger-color); }

/* Loan Modal Specifics */
.loan-quote-card {
    background: transparent;
    padding: 15px;
    border-radius: 8px;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.2s ease;
}

.loan-quote-card h4 {
    margin: 0 0 10px 0;
    color: #888;
}

.loan-quote-card p {
    margin: 5px 0;
    font-size: 0.9em;
    color: #777;
}

.loan-quote-card small {
    color: #666;
}

.loan-quote-card:hover {
    background: rgba(255, 255, 255, 0.02);
}

.loan-quote-card.active {
    background: var(--highlight-color);
    border: 2px solid #fff;
}

.loan-quote-card.active h4,
.loan-quote-card.active p,
.loan-quote-card.active small,
.loan-quote-card.active strong {
    color: #fff !important;
}
.edu-tooltip {
    visibility: hidden; width: 200px; background-color: var(--secondary-bg); color: var(--text-color);
    text-align: center; border-radius: 6px; padding: 8px; position: absolute; z-index: 1000;
    bottom: 125%; left: 50%; transform: translateX(-50%); opacity: 0; transition: opacity 0.3s;
    border: 1px solid var(--border-color); pointer-events: none;
}
.edu-item:hover .edu-tooltip { visibility: visible; opacity: 1; }

/* Market Tooltip */
#market-tooltip {
    position: absolute;
    background-color: var(--secondary-bg);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 6px 8px;
    font-size: 0.85em;
    font-family: var(--font-family);
    white-space: nowrap;
    z-index: 2000;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    pointer-events: none;
    display: none; /* Initially hidden, controlled by JS */
}

.modal #sell-asset-list ul {
    list-style: none;
    padding: 0;
    max-height: 150px;
    overflow-y: auto;
    border: 1px solid #444;
    border-radius: 4px;
    margin-top: 5px;
}
.modal #sell-asset-list li {
    padding: 8px 10px;
    border-bottom: 1px dotted #444;
    cursor: pointer;
}
.modal #sell-asset-list li:last-child {
    border-bottom: none;
}
.modal #sell-asset-list li:hover {
    background-color: #333;
}
.modal #sell-asset-list li.selected {
    background-color: var(--highlight-color);
    color: #fff;
    font-weight: bold;
}

.select-item-to-sell-label {
    padding-top: 25px;
}

/* --- Main Info Container --- */
#sell-info {
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 15px;
    margin: 25px 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    font-family: 'Space Mono', monospace;
    font-size: 1.05em;
    line-height: 1.5;
    color: var(--text-color);
}

#sell-info strong {
    color: var(--warning-color);
    font-weight: bold;
}

/* --- Top Row: Quantity Input Calculation (Quantity x Price = Total) --- */
/* These control the visuals next to the input box */
.sell-calc-symbol {
    font-size: 1.2em;
    font-weight: bold;
    color: var(--text-color);
    margin: 0 2px;
}

.sell-calc-value {
    font-family: 'Space Mono', monospace;
    font-size: 0.95em;
    color: var(--text-color);
    background-color: rgba(0, 0, 0, 0.3);
    padding: 4px 8px;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    min-width: 60px;
    text-align: center;
}

.sell-calc-equals {
    font-size: 1.1em;
    font-weight: bold;
    color: var(--warning-color);
    margin: 0 4px;
}

.sell-calc-result {
    font-family: 'Space Mono', monospace;
    font-size: 1em;
    font-weight: bold;
    color: var(--success-color);
    background-color: rgba(0, 204, 102, 0.1);
    padding: 6px 10px;
    border-radius: 6px;
    border: 2px solid var(--success-color);
    min-width: 70px;
    text-align: center;
}

/* --- Bottom Area: Breakdown Rows (Taxable Amt & Taxes Due) --- */

#sell-quantity {
    min-width: 100px; 
}
/* Container generated by JS */
#sell-total-display {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sell-math-row {
    display: flex;
    align-items: flex-end; /* Aligns the numbers */
    justify-content: space-between;
    gap: 6px;
    padding: 12px 8px;
    background-color: rgba(46, 204, 113, 0.1); /* Standard green box background */
    border-radius: 6px;
    border: 1px solid rgba(46, 204, 113, 0.2);
    overflow-x: auto; /* Safety for very small screens */
    width: 100%;
    box-sizing: border-box;
}

/* The vertical column for each number */
.sell-math-row > div {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centers label over number */
}

.sell-math-label {
    font-size: 0.7em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 2px;
    white-space: nowrap;
}

.sell-math-value {
    font-size: 1em;
    font-weight: bold;
    color: var(--text-color);
}

.sell-math-op {
    font-weight: bold;
    color: rgba(255, 255, 255, 0.2);
    padding-bottom: 2px; /* Align with text baseline */
}

/* Colors */
.val-proceeds { color: var(--success-color); }
.val-cost { color: #ffab91; }
.val-gain { color: #fff; text-decoration: underline rgba(255,255,255,0.3); }
.val-tax { color: var(--danger-color); }

.sell-math-row-container {
    display: flex;
    align-items: flex-end; /* This aligns the Inputs/Values to the bottom */
    gap: 8px;
    width: 100%;
}

/* Individual vertical columns (Label on top, value on bottom) */
.sell-col {
    display: flex;
    flex-direction: column;
    gap: 5px; /* Space between Label and Value */
}

/* Ensure labels look consistent */
.sell-col label {
    font-size: 0.8em;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
    white-space: nowrap; /* Prevents wrapping */
}

/* Wrapper to keep Input and MAX button together */
.qty-input-group {
    display: flex;
    align-items: stretch; /* Makes button same height as input */
}

/* Specific styling for the Input inside the group */
.qty-input-group input {
    margin-bottom: 0 !important; /* Override default form margins */
    width: 80px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: none;
}

/* Specific styling for the MAX button */
.qty-input-group button {
    margin: 0 !important;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    padding: 0 10px;
    font-size: 0.8em;
    font-weight: bold;
    display: flex;
    align-items: center;
}

/* The Math Symbols (x and =) */
.sell-symbol-wrapper {
    font-size: 1.2em;
    font-weight: bold;
    color: var(--text-color);
    /* Push the symbol down slightly so it centers with the input box, not the bottom edge */
    padding-bottom: 8px; 
}

/* Reuse your existing span styles, ensuring they act like blocks for flex */
.sell-calc-value, .sell-calc-result {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 38px; /* Match standard input height usually ~38-40px */
    box-sizing: border-box;
}

.sell-calc-container {
    display: flex;
    align-items: flex-end; /* This forces the inputs/numbers to align at the bottom */
    gap: 10px;
    line-height: 1;
}

.sell-calc-col {
    display: flex;
    flex-direction: column;
    gap: 5px; /* Space between label and input */
}

.sell-calc-col label {
    font-size: 0.8em;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
    line-height: 1;
}

#sell-tax-amount{
    min-width: 100px;
    width: 200px;
}

/* Quantity Input Group Styling */
.qty-group {
    display: flex;
    align-items: stretch;
}
.qty-group input {
    width: 70px;
    margin: 0 !important;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: none;
    height: 38px; /* Fixed height for alignment */
}
.qty-group button {
    margin: 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    padding: 0 10px;
    height: 38px; /* Match input height */
    font-size: 0.8em;
}

/* Value Spans (Price & Proceeds) */
.sell-calc-value, .sell-calc-result {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 38px; /* Match input height exactly */
    padding: 0 12px;
    font-family: 'Space Mono', monospace;
    border-radius: 4px;
    white-space: nowrap;
}

.sell-calc-value {
    background-color: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.sell-calc-result {
    background-color: rgba(0, 204, 102, 0.1);
    border: 1px solid var(--success-color);
    color: var(--success-color);
    font-weight: bold;
}

/* Symbols (x and =) */
.sell-calc-sym {
    padding-bottom: 6px; /* Visual tweak to center symbol with the 38px high inputs */
    font-weight: bold;
    font-size: 1.2em;
    color: rgba(255, 255, 255, 0.5);
}

/* --- Semantic Colors for Numbers --- */
.val-proceeds { color: var(--success-color); }          /* Green */
.val-cost     { color: #ffab91; }                       /* Light Orange/Red */
.val-gain     { color: #ffffff; } 
.val-tax      { color: var(--danger-color); font-weight: 900; } /* Red */

/* Tax Withhold Styling */
.tax-withhold-container {
    display: flex;
    align-items: center;
    gap: 10px;
}

.tax-withhold-container label {
    margin: 0;
    font-weight: bold;
    white-space: nowrap;
}

.tax-withhold-group {
    display: flex;
    align-items: stretch;
}

.tax-withhold-group input {
    margin: 0 !important;
    width: 100px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: none;
    height: 38px;
}

.tax-withhold-group button {
    margin: 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    padding: 0 10px;
    height: 38px;
    font-size: 0.8em;
}

/* Join Modal Specifics */
#join-modal .modal-header { background-color: var(--success-color); }
.room-item {
    display: flex; justify-content: space-between; align-items: center; padding: 10px;
    margin-bottom: 5px; border: 1px solid #eee; border-radius: 4px; cursor: pointer;
}
.room-item:hover { background-color: rgba(52, 152, 219, 0.05); }
.room-item.selected { background-color: var(--primary-color); color: white; border-color: var(--primary-color); }
.room-item.full { opacity: 0.6; cursor: not-allowed; border-color: #555; }
.room-item.full:hover { background-color: transparent; }
.room-item.full .room-status { color: var(--danger-color); font-weight: bold; }

/* Quick Sheet */
.quick-sheet-content h3 { color: var(--warning-color); border-bottom: 1px solid var(--border-color); margin-top: 20px; }

/* Loan Quotes */
.loan-quote-card { background: #222; padding: 15px; border-radius: 8px; cursor: pointer; border: 2px solid transparent; }
.loan-quote-card:hover { border-color: var(--highlight-color); }
.loan-quote-card.active { border-color: var(--primary-color); background: rgba(52, 152, 219, 0.05); }

/* Collateral Items */
.collateral-item, .collateral-fungible-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px; background: rgba(255,255,255,0.05); border: 1px solid var(--border-color);
    border-radius: 6px; margin-bottom: 5px; cursor: pointer;
}
.collateral-item.selected { border-color: var(--success-color); background: rgba(46, 204, 113, 0.1); }

/* Hand Card Types Colors */
.hand-card.card-real_estate .card-header { background-color: #3a1c1c; color: #ff9999; }
.hand-card.card-stock .card-header { background-color: #1c2a3a; color: #99ccff; }
.hand-card.card-commodity .card-header { background-color: #3a321c; color: #ffeb99; }
.hand-card.card-education .card-header { background-color: #1c3a2a; color: #99ffcc; }
.hand-card.card-superpower .card-header { background-color: #3a1c3a; color: #ff99ff; }
.dealing-card { animation: deal-card 0.6s ease-out forwards; opacity: 0; transform: translateY(30px) scale(0.8); }
@keyframes deal-card { 0% { transform: translateY(30px) scale(0.8); opacity: 0; } 100% { transform: translateY(0) scale(1); opacity: 1; } }
/* New Small Event Card for 3-card layout */
.event-card-container.small {
    width: 200px;
    height: 300px;
}

.event-sequence-container {
    padding: 20px 0;
}

/* Adjust fonts for smaller cards */
.event-card-container.small .event-details-container h3 {
    font-size: 1.1em;
    margin-bottom: 8px;
}

.event-card-container.small .event-details-container p {
    font-size: 0.9em;
    padding: 0 5px;
}

.event-card-container.small .event-icon {
    font-size: 2em;
}

/* Event Card Flash Animation */
.event-flash {
    animation: event-flash-anim 0.7s ease-out;
}

@keyframes event-flash-anim {
    0% { box-shadow: 0 0 0px rgba(255, 255, 255, 0); border-color: var(--border-color); }
    15% { box-shadow: 0 0 20px rgba(255, 204, 0, 0.8); }
    100% { box-shadow: 0 0 0px rgba(255, 204, 0, 0.8); }
}

/* --- Disabled Tax UI --- */
.disabled-section {
    position: relative;
    pointer-events: none; /* Disable interaction */
    user-select: none;
    border-radius: 8px;
    overflow: hidden;
}

.disabled-section::after {
    content: "TAXES DISABLED";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(30, 30, 30, 0.7); /* Dark overlay */
    backdrop-filter: blur(4px); /* Blur content behind */
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #aaa;
    font-weight: 900;
    font-size: 1.1em;
    text-transform: uppercase;
    z-index: 10;
    letter-spacing: 2px;
    border: 1px dashed rgba(255,255,255,0.2);
    box-sizing: border-box;
}