/* ============================================================
   CSS Variables — change fonts and colors here in one place
   ============================================================ */
:root {
    --font_main: 'Montserrat', sans-serif;

    /* Colors */
    --color_background:       #0f0f0f;
    --color_surface:          #1a1a1a;
    --color_surface_raised:   #222222;
    --color_border:           #333333;
    --color_text_primary:     #f0f0f0;
    --color_text_secondary:   #999999;
    --color_text_hint:        #666666;
    --color_accent:           #c9a84c;
    --color_accent_hover:     #e0bc6a;
    --color_danger:           #c0392b;
    --color_danger_hover:     #e74c3c;
    --color_success:          #27ae60;

    /* Player status colors */
    --status_healthy:          #22c55e;
    --status_wounded:          #facc15;
    --status_heavily_wounded:  #f97316;
    --status_critical:         #ef4444;
    --status_dead:             #6b7280;
    --status_sick:             #f97316;
    --status_asleep:           #3b82f6;
    --status_spellbound:       #a855f7;
    --status_unconscious:      #ec4899;
    --status_cursed:           #6b7280;
    --status_paralyzed:        #eab308;

    /* Spacing */
    --radius:    8px;
    --radius_lg: 16px;
}

/* ============================================================
   Base Styles
   ============================================================ */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%;
    width: 100%;
    background-color: var(--color_background);
    background-image: 
        radial-gradient(ellipse at 20% 50%, rgba(201, 168, 76, 0.03) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 20%, rgba(201, 168, 76, 0.02) 0%, transparent 40%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Crect width='4' height='4' fill='%230f0f0f'/%3E%3Crect width='1' height='1' fill='%23151515'/%3E%3Crect x='2' y='2' width='1' height='1' fill='%23151515'/%3E%3C/svg%3E");
    color: var(--color_text_primary);
    font-family: var(--font_main);
    font-size: 15px;
    line-height: 1.6;
    overflow: hidden;
}

/* ============================================================
   Utility
   ============================================================ */
.hidden {
    display: none !important;
}

/* ============================================================
   Modal System
   ============================================================ */
.modal_overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    z-index: 100;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.modal_overlay.active {
    display: flex;
}

.modal_box {
    background: var(--color_surface);
    border: 1px solid var(--color_border);
    border-radius: var(--radius_lg);
    padding: 40px;
    width: 100%;
    max-width: 480px;
    max-height: 90vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Wide variant for host setup modal */
.modal_box_wide {
    max-width: 780px;
}

/* Two-column grid for host setup form */
.host_setup_grid {
    display: grid;
    grid-template-columns: 55% 43%;
    gap: 0 2%;
}

.host_col_left,
.host_col_right {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Taller, non-scrolling description box for wide layout */
.character_description_box_wide {
    max-height: 90px;
    min-height: 90px;
}

/* ============================================================
   Typography
   ============================================================ */
.game_title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--color_accent);
    text-align: center;
    letter-spacing: 1px;
}

.game_subtitle {
    font-size: 0.9rem;
    color: var(--color_text_secondary);
    text-align: center;
}

.modal_title {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--color_accent);
}

.roster_heading {
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--color_text_secondary);
    margin-bottom: 12px;
}

/* ============================================================
   Form Elements
   ============================================================ */
.form_group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form_label {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--color_text_secondary);
}

.form_label_optional {
    font-size: 0.75rem;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: var(--color_text_hint);
}

.campaign_description_input {
    resize: vertical;
    min-height: 70px;
    line-height: 1.5;
}

.form_input {
    background: var(--color_surface_raised);
    border: 1px solid var(--color_border);
    border-radius: var(--radius);
    color: var(--color_text_primary);
    font-family: var(--font_main);
    font-size: 0.95rem;
    padding: 10px 14px;
    width: 100%;
    transition: border-color 0.2s;
    outline: none;
}

.form_input:focus {
    border-color: var(--color_accent);
}

.form_input option {
    background: var(--color_surface_raised);
}

.room_code_input {
    text-transform: uppercase;
    letter-spacing: 6px;
    font-size: 1.2rem;
    font-weight: 600;
    text-align: center;
}

.character_description_box {
    background: var(--color_surface_raised);
    border: 1px solid var(--color_border);
    border-radius: var(--radius);
    padding: 12px 14px;
    font-size: 0.85rem;
    color: var(--color_text_secondary);
    line-height: 1.6;
    max-height: 120px;
    overflow-y: auto;
    white-space: normal;
}

/* ============================================================
   Buttons
   ============================================================ */
.primary_button {
    background: var(--color_accent);
    border: none;
    border-radius: var(--radius);
    color: #0f0f0f;
    cursor: pointer;
    font-family: var(--font_main);
    font-size: 0.9rem;
    font-weight: 700;
    padding: 12px 24px;
    transition: background 0.2s, transform 0.1s;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.primary_button:hover {
    background: var(--color_accent_hover);
}

.primary_button:active {
    transform: scale(0.98);
}

.secondary_button {
    background: transparent;
    border: 1px solid var(--color_border);
    border-radius: var(--radius);
    color: var(--color_text_secondary);
    cursor: pointer;
    font-family: var(--font_main);
    font-size: 0.9rem;
    font-weight: 600;
    padding: 12px 24px;
    transition: border-color 0.2s, color 0.2s;
}

.secondary_button:hover {
    border-color: var(--color_text_secondary);
    color: var(--color_text_primary);
}

.text_button {
    background: none;
    border: none;
    color: var(--color_text_hint);
    cursor: pointer;
    font-family: var(--font_main);
    font-size: 0.85rem;
    padding: 4px;
    text-align: center;
    text-decoration: underline;
    transition: color 0.2s;
}

.text_button:hover {
    color: var(--color_text_secondary);
}

.danger_button {
    background: transparent;
    border: 1px solid var(--color_danger);
    border-radius: var(--radius);
    color: var(--color_danger);
    cursor: pointer;
    font-family: var(--font_main);
    font-size: 0.85rem;
    font-weight: 600;
    padding: 8px 16px;
    transition: background 0.2s, color 0.2s;
}

.danger_button:hover {
    background: var(--color_danger);
    color: white;
}

.inline_button {
    background: var(--color_surface_raised);
    border: 1px solid var(--color_border);
    border-radius: var(--radius);
    color: var(--color_text_secondary);
    cursor: pointer;
    font-family: var(--font_main);
    font-size: 0.85rem;
    font-weight: 600;
    padding: 10px 16px;
    margin-top: 6px;
    transition: border-color 0.2s, color 0.2s;
    width: 100%;
}

.inline_button:hover {
    border-color: var(--color_accent);
    color: var(--color_accent);
}

.button_row {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.button_col {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    margin-top: 16px;
}

.landing_rejoin_row {
    justify-content: stretch;
}

.full_width {
    width: 100%;
}

/* ============================================================
   Error Messages
   ============================================================ */
.error_message {
    color: var(--color_danger);
    font-size: 0.85rem;
    min-height: 20px;
}

/* ============================================================
   Lobby Screen
   ============================================================ */
.room_code_display {
    background: var(--color_surface_raised);
    border: 1px solid var(--color_border);
    border-radius: var(--radius);
    padding: 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.room_code_label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--color_text_secondary);
}

.room_code_value {
    font-size: 2.5rem;
    font-weight: 700;
    letter-spacing: 12px;
    color: var(--color_accent);
}

.room_code_hint {
    font-size: 0.8rem;
    color: var(--color_text_hint);
}

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

.lobby_player_card {
    background: var(--color_surface_raised);
    border: 1px solid var(--color_border);
    border-radius: var(--radius);
    padding: 10px 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.lobby_player_name {
    font-weight: 600;
    font-size: 0.9rem;
}

.lobby_player_type {
    font-size: 0.8rem;
    color: var(--color_text_secondary);
}

.host_badge {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--color_accent);
    border: 1px solid var(--color_accent);
    border-radius: 4px;
    padding: 2px 6px;
}

.waiting_text {
    font-size: 0.85rem;
    color: var(--color_text_hint);
    text-align: center;
}

/* ============================================================
   Rejoin Character List
   ============================================================ */
.character_list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.character_card {
    background: var(--color_surface_raised);
    border: 1px solid var(--color_border);
    border-radius: var(--radius);
    padding: 12px 14px;
    cursor: pointer;
    transition: border-color 0.2s;
}

.character_card:hover {
    border-color: var(--color_accent);
}

.character_card.selected {
    border-color: var(--color_accent);
    background: rgba(201, 168, 76, 0.1);
}

.character_card_name {
    font-weight: 600;
    font-size: 0.9rem;
}

.character_card_type {
    font-size: 0.8rem;
    color: var(--color_text_secondary);
}

.character_card_status {
    font-size: 0.75rem;
    font-weight: 600;
    margin-top: 4px;
}

/* ============================================================
   Game Screen Layout
   ============================================================ */
#game_screen {
    display: flex;
    flex-direction: column;
    height: 100vh;
    width: 100vw;
}

/* Top bar */
.top_bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 24px;
    background: var(--color_surface);
    border-bottom: 1px solid var(--color_border);
    flex-shrink: 0;
}

.top_bar_title {
    font-weight: 700;
    font-size: 1rem;
    color: var(--color_accent);
    letter-spacing: 1px;
}

.top_bar_game_theme {
    font-size: 0.8rem;
    color: var(--color_text_secondary);
    letter-spacing: 1px;
    text-transform: uppercase;
}

.top_bar_room_code {
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 4px;
    color: var(--color_text_secondary);
}

/* TTS toggle button — sits between room code and end session button */
.tts_button {
    background: transparent;
    border: 1px solid var(--color_border);
    border-radius: var(--radius);
    color: var(--color_text_secondary);
    cursor: pointer;
    font-size: 1rem;
    padding: 6px 10px;
    transition: border-color 0.2s, color 0.2s;
    line-height: 1;
}

.tts_button:hover {
    border-color: var(--color_accent);
    color: var(--color_accent);
}

.tts_button.tts_active {
    border-color: var(--color_accent);
    color: var(--color_accent);
}

/* Main game layout */
.game_layout {
    display: flex;
    flex: 1;
    overflow: hidden;
}

/* ============================================================
   Story Panel (left side — width controlled by JS drag)
   ============================================================ */
.story_panel {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* Default width set here, overridden by JS on drag */
    width: 66.666%;
    min-width: 50%;
    flex-shrink: 0;
}

/* Draggable divider between story panel and roster panel */
.panel_divider {
    width: 6px;
    background: var(--color_border);
    cursor: col-resize;
    flex-shrink: 0;
    transition: background 0.15s;
    position: relative;
}

.panel_divider:hover,
.panel_divider.dragging {
    background: var(--color_accent);
}

.story_entry.raw_command {
    color: var(--color_text_hint);
    font-size: 0.78rem;
    font-family: monospace;
    border-left: 2px solid var(--color_text_hint);
    padding-left: 8px;
    opacity: 0.7;
}

.story_log {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    scroll-behavior: smooth;
}

/* Individual story entries */
.story_entry {
    background: var(--color_surface);
    border: 1px solid var(--color_border);
    border-radius: var(--radius);
    padding: 20px 28px;
    line-height: 1.9;
    font-size: 1rem;
    animation: fade_in 0.4s ease;
}

.story_entry p {
    margin-bottom: 1em;
}

.story_entry p:last-child {
    margin-bottom: 0;
}

.story_entry.player_action {
    border-left: 3px solid var(--color_accent);
    color: var(--color_text_secondary);
    font-style: italic;
}

.story_entry.dm_narration {
    border-left: 3px solid #555;
    color: var(--color_text_primary);
}

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

/* DM thinking indicator */
.dm_thinking_indicator {
    padding: 12px 24px;
    border-top: 1px solid var(--color_border);
}

.thinking_dots {
    font-size: 0.85rem;
    color: var(--color_text_hint);
    font-style: italic;
}

/* Action input area */
.action_area {
    border-top: 1px solid var(--color_border);
    padding: 16px 24px;
    flex-shrink: 0;
}

/* Row containing both textarea groups and the submit button */
.action_input_row {
    display: flex;
    gap: 12px;
    align-items: flex-end;
}

/* Each labeled textarea column */
.action_input_group {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

/* Label above each textarea */
.action_input_label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--color_text_secondary);
}

/* Secret action textarea gets a subtle amber tint on the border
   to hint that it's special without being obvious to anyone else */
#secret_action_input {
    border-color: rgba(201, 168, 76, 0.3);
}

#secret_action_input:focus {
    border-color: var(--color_accent);
}

/* Submit button is visually dimmed when disabled */
.submit_button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.action_input {
    flex: 1;
    background: var(--color_surface_raised);
    border: 1px solid var(--color_border);
    border-radius: var(--radius);
    color: var(--color_text_primary);
    font-family: var(--font_main);
    font-size: 0.95rem;
    padding: 10px 14px;
    resize: none;
    outline: none;
    transition: border-color 0.2s;
}

.action_input:focus {
    border-color: var(--color_accent);
}

.submit_button {
    flex-shrink: 0;
    height: fit-content;
}

/* ============================================================
   Roster Panel (right side — tabbed)
   ============================================================ */
.roster_panel {
    flex: 1;
    min-width: 15%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--color_surface);
}

/* Tab buttons row */
.roster_tabs {
    display: flex;
    border-bottom: 1px solid var(--color_border);
    flex-shrink: 0;
}

.roster_tab {
    flex: 1;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--color_text_secondary);
    cursor: pointer;
    font-family: var(--font_main);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 1px;
    padding: 10px 4px;
    text-transform: uppercase;
    transition: color 0.2s, border-color 0.2s;
}

.roster_tab:hover {
    color: var(--color_text_primary);
}

.roster_tab.active {
    border-bottom-color: var(--color_accent);
    color: var(--color_accent);
}

/* Tab content panels */
.tab_content {
    display: none;
    flex: 1;
    overflow-y: auto;
    padding: 16px;
}

.tab_content.active {
    display: block;
}

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

/* Character sheet */
.character_sheet_name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color_accent);
    margin-bottom: 2px;
}

.character_sheet_meta {
    font-size: 0.8rem;
    color: var(--color_text_secondary);
    margin-bottom: 14px;
}

.character_sheet_section {
    margin-bottom: 14px;
}

.character_sheet_section_label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--color_text_hint);
    margin-bottom: 8px;
}

.stat_grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

.stat_item {
    background: var(--color_surface_raised);
    border: 1px solid var(--color_border);
    border-radius: var(--radius);
    padding: 6px 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.stat_name {
    font-size: 0.72rem;
    color: var(--color_text_secondary);
    font-weight: 600;
}

.stat_value {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--color_accent);
}

/* Inventory tab */
.inventory_category_heading {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--color_text_hint);
    margin: 12px 0 6px 0;
}

.inventory_category_heading:first-child {
    margin-top: 0;
}

.inventory_item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--color_surface_raised);
    border: 1px solid var(--color_border);
    border-radius: var(--radius);
    padding: 5px 8px;
    margin-bottom: 4px;
    font-size: 0.8rem;
}

.inventory_item_name {
    flex: 1;
    color: var(--color_text_primary);
}

.inventory_item_qty {
    font-size: 0.75rem;
    color: var(--color_text_hint);
    margin: 0 6px;
}

.inventory_item_equipped {
    font-size: 0.65rem;
    color: var(--color_accent);
    font-weight: 700;
    text-transform: uppercase;
    margin-right: 6px;
}

.inventory_item_location {
    font-size: 0.7rem;
    color: var(--color_text_hint);
    font-style: italic;
    margin-right: 6px;
}

.inventory_remove_btn {
    background: none;
    border: none;
    color: var(--color_text_hint);
    cursor: pointer;
    font-size: 0.8rem;
    padding: 0 2px;
    transition: color 0.15s;
}

.inventory_remove_btn:hover {
    color: var(--status_critical);
}

/* Add item form at bottom of inventory tab */
.inventory_add_form {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 10px 0 0 0;
    margin-top: 10px;
    border-top: 1px solid var(--color_border);
    flex-shrink: 0;
}

.inventory_add_input,
.inventory_add_category {
    font-size: 0.8rem;
    padding: 6px 10px;
}

.inventory_add_qty {
    font-size: 0.8rem;
    padding: 6px 10px;
    width: 70px;
}

.inventory_add_button {
    font-size: 0.75rem;
    padding: 7px 12px;
    align-self: flex-end;
}

.inventory_item_hidden .inventory_item_name {
    opacity: 0.4;
}

.inventory_hide_label {
    font-size: 0.7rem;
    color: var(--color_text_hint);
    display: flex;
    align-items: center;
    gap: 3px;
    cursor: pointer;
    margin-left: auto;
    margin-right: 4px;
}

/* Coin purse section in inventory tab */
.coin_purse {
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--color_border);
}

.coin_purse_row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
    font-size: 0.82rem;
}

.coin_purse_label {
    color: var(--color_text_secondary);
}

.coin_purse_amount {
    font-weight: 700;
    color: var(--color_accent);
    min-width: 40px;
    text-align: right;
}

/* Funds summary on Character tab */
.funds_total {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--color_accent);
    padding: 6px 10px;
    background: var(--color_surface_raised);
    border: 1px solid var(--color_border);
    border-radius: var(--radius);
}

.funds_unit {
    font-size: 0.72rem;
    font-weight: 400;
    color: var(--color_text_hint);
}

.funds_empty {
    font-weight: 400;
    color: var(--color_text_hint);
}

/* Player cards in the game roster */
.player_card_single_line {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px;
    font-size: 0.85rem;
    line-height: 1.5;
}

.player_card_status {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
}

.player_card_character_name {
    font-weight: 700;
    font-size: 0.9rem;
}

.player_card_real_name {
    font-size: 0.8rem;
    color: var(--color_text_secondary);
}

.player_card_character_type {
    font-size: 0.8rem;
    color: var(--color_text_secondary);
}

.player_card_status.status_healthy          { color: var(--status_healthy); }
.player_card_status.status_wounded          { color: var(--status_wounded); }
.player_card_status.status_heavily_wounded  { color: var(--status_heavily_wounded); }
.player_card_status.status_critical         { color: var(--status_critical); }
.player_card_status.status_dead             { color: var(--status_dead); }
.player_card_status.status_sick             { color: var(--status_sick); }
.player_card_status.status_asleep           { color: var(--status_asleep); }
.player_card_status.status_spellbound       { color: var(--status_spellbound); }
.player_card_status.status_unconscious      { color: var(--status_unconscious); }
.player_card_status.status_cursed           { color: var(--status_cursed); }
.player_card_status.status_paralyzed        { color: var(--status_paralyzed); }

/* HP bar row sits directly below the player name line */
.hp_bar_row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 5px;
}

/* The grey track the fill bar sits inside */
.hp_bar_track {
    flex: 1;
    height: 5px;
    background: var(--color_border);
    border-radius: 3px;
    overflow: hidden;
}

/* The colored fill — width is set inline as a percentage */
.hp_bar_fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.4s ease, background-color 0.4s ease;
}

/* Three color zones matching the existing status color palette */
.hp_bar_fill_high { background-color: var(--status_healthy); }  /* green — above 50% */
.hp_bar_fill_mid  { background-color: var(--status_sick); }    /* orange — 25% to 50% */
.hp_bar_fill_low  { background-color: var(--status_dead); }    /* red — below 25% */

/* current / max HP text to the right of the bar */
.hp_bar_label {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--color_text_hint);
    white-space: nowrap;
    min-width: 36px;
    text-align: right;
}

/* Scrollbar styling */
::-webkit-scrollbar {
    width: 6px;
}

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

::-webkit-scrollbar-thumb {
    background: var(--color_border);
    border-radius: 3px;
}

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

/* ============================================================
   Trade Modal
   ============================================================ */
.trade_columns {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.trade_side {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.trade_side_label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color_text_secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.trade_arrow {
    font-size: 1.4rem;
    color: var(--color_accent);
    padding-top: 28px;
}

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

.trade_timer_container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 8px 0;
}

.trade_timer_label {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--color_accent);
    min-width: 2ch;
}

.trade_incoming_summary {
    color: var(--color_text_secondary);
    font-size: 0.95rem;
    line-height: 1.5;
    text-align: center;
}

.modal_disclaimer {
    font-size: 0.75rem;
    color: var(--color_text_hint);
    text-align: center;
    margin-top: 12px;
}

.top_bar_party_name {
    font-size: 0.8rem;
    color: var(--color_accent);
    letter-spacing: 0.05em;
    opacity: 0.85;
}

.acknowledgment_text {
    font-size: 0.85rem;
    color: var(--color_text_secondary);
    line-height: 1.7;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.acknowledgment_label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.85rem;
    color: var(--color_text_secondary);
    margin-bottom: 20px;
    cursor: pointer;
    line-height: 1.5;
}

.acknowledgment_label input[type="checkbox"] {
    margin-top: 2px;
    accent-color: var(--color_accent);
    flex-shrink: 0;
}

#acknowledgment_modal {
    z-index: 1000;
}

/* ================================================================
   Whisper Channel
================================================================ */
.whisper_area {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    min-height: 0;
}

.whisper_log {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

.whisper_entry {
    background: var(--color_surface_alt);
    border-left: 3px solid var(--color_accent);
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 0.95rem;
    color: var(--color_text);
    line-height: 1.6;
}

.whisper_entry.whisper_sent {
    border-left-color: var(--color_text_secondary);
    font-style: italic;
}

.whisper_entry.whisper_received {
    border-left-color: var(--color_accent);
}

.whisper_label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.6;
    margin-bottom: 4px;
}

.whisper_input_row {
    display: flex;
    gap: 8px;
    align-items: flex-end;
}

.whisper_input {
    flex: 1;
    font-size: 0.85rem;
}

.whisper_button {
    white-space: nowrap;
    flex-shrink: 0;
}

#tab_content_character.active {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* ============================================================
   Stat Assignment Modal (Stage 3 character creation)
   ============================================================ */
.stat_assignment_instructions {
    font-size: 0.88rem;
    color: var(--color_text_secondary);
    margin-bottom: 20px;
    line-height: 1.6;
}

.stat_assignment_grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 24px;
    margin-bottom: 20px;
}

.stat_input_row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.stat_input_label {
    flex: 1;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--color_text_secondary);
    cursor: default;
    position: relative;
    display: flex;
    align-items: center;
    gap: 5px;
}

.stat_tooltip_icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 1px solid var(--color_text_hint);
    color: var(--color_text_hint);
    font-size: 0.65rem;
    font-weight: 700;
    cursor: help;
    flex-shrink: 0;
}

.stat_input_label[data-tooltip]:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 0;
    top: calc(100% + 6px);
    width: 220px;
    background: var(--color_surface);
    border: 1px solid var(--color_border);
    border-radius: var(--radius);
    padding: 8px 10px;
    font-size: 0.78rem;
    font-weight: 400;
    color: var(--color_text_primary);
    z-index: 100;
    line-height: 1.5;
    pointer-events: none;
}

.stat_number_input {
    width: 70px;
    flex-shrink: 0;
    text-align: center;
    padding: 6px 8px;
}

.stat_assignment_row {
    margin-top: 4px;
}

.stat_assignment_label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: var(--color_text_secondary);
    cursor: pointer;
}

.stat_assignment_label input[type="checkbox"] {
    accent-color: var(--color_accent);
    width: 15px;
    height: 15px;
    cursor: pointer;
}

.button_stack {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 16px;
}

.full_width_button {
    width: 100%;
    justify-content: center;
}

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

.trade_qty_row .form_label {
    white-space: nowrap;
    margin: 0;
}

.trade_qty_row .form_input {
    width: 70px;
}

.secret_message_area {
    margin-bottom: 8px;
    padding-bottom: 8px;
}

.secret_message_select {
    width: 100%;
    margin-bottom: 6px;
}

.character_message_areas {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--color_border);
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
    min-height: 0;
}