/* TODO: Review box-shadow values - consider using design system shadow variables (--shadow-xs, --shadow-sm, etc.) */
/* ===================================
   SMUGGLER: THE GALAXY'S MOST WANTED
   Main Stylesheet
   =================================== */

/* Note: Design tokens are defined in design-system.css */

body {
    padding: var(--spacing-md);

/* === CONNECTION STATUS === */
#connection-status {
    position: fixed;
    top: var(--spacing-sm);
    right: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    z-index: var(--z-fixed);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    transition: all var(--transition-base);
    backdrop-filter: blur(10px);
    box-shadow: var(--shadow-md);

#connection-status.connected {
    background-color: rgba(var(--color-success-rgb, 92, 184, 92), 0.2);
    border: 1px solid var(--color-success);

#connection-status.disconnected {
    background-color: rgba(var(--color-failure-rgb, 217, 83, 79), 0.2);
    border: 1px solid var(--color-failure);

#status-indicator {
    font-size: var(--font-size-xl); /* Relative to parent, keep as-is */
    line-height: 1;

#connection-status.connected #status-indicator {
    color: var(--color-success);
    animation: pulse 2s infinite;

#connection-status.disconnected #status-indicator {
    color: var(--color-failure);

/* === MAIN CONTAINER === */
#app-container {
    max-width: calc(var(--spacing-2xl) * 23.33); /* ~1400px */
    margin: 0 auto;
    background-color: var(--color-bg-primary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: var(--spacing-lg);
    box-shadow: var(--glow-green), var(--shadow-lg);
    animation: fadeIn 0.5s ease-out;

/* Warden container styling now matches player page - see player-layout.css */
/* Keeping original styles as fallback but player-layout.css takes precedence */
#warden-container {
    max-width: 100%;
    width: 100%;
    margin: 0;
    background-color: var(--color-bg-primary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: var(--spacing-lg);
    box-shadow: var(--glow-blue), var(--shadow-lg);
    animation: fadeIn 0.5s ease-out;
    box-sizing: border-box;

/* === HEADER === */
header {
    text-align: center;
    margin-bottom: var(--spacing-lg);
    padding-bottom: var(--spacing-md);
    border-bottom: calc(var(--spacing-xs) / 2) solid var(--color-border);
    position: relative;
    width: 100%;
    box-sizing: border-box;

.warden-header {
    position: relative;
    z-index: 1;

header::after {
    content: '';
    position: absolute;
    bottom: -calc(var(--spacing-xs) / 2);
    left: 50%;
    transform: translateX(-50%);
    width: calc(var(--spacing-2xl) * 1.67); /* ~100px */
    height: calc(var(--spacing-xs) / 2);
    background: linear-gradient(90deg, transparent, var(--color-success), transparent);

h1 {
    margin-bottom: var(--spacing-sm);
    text-shadow: var(--glow-green);
    animation: fadeIn 0.6s ease-out;

.header-info {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--spacing-sm) var(--spacing-md);
    width: 100%;
    box-sizing: border-box;
    margin-top: var(--spacing-sm);

.session-id {
    font-weight: var(--font-weight-bold);

#session-code {
    color: var(--color-info);
    font-family: var(--font-heading);
    letter-spacing: var(--letter-spacing-tight);

/* Header buttons and links */
.header-user-info {
    display: none;
    margin-left: var(--spacing-sm);
    align-items: center;
    gap: var(--spacing-sm);

.header-btn {
    display: none;
    margin-left: var(--spacing-sm);
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--font-size-sm);
    font-family: var(--font-body);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-base);
    border: 1px solid;

.header-btn.btn-info {
    background: linear-gradient(135deg, var(--color-info), var(--color-info-dark));
    border-color: var(--color-info);
    color: var(--color-bg-primary);

.header-btn.btn-info:hover {
    transform: translateY(-2px);
    box-shadow: var(--glow-blue), var(--shadow-sm);

.header-btn.btn-secondary {
    background: var(--color-bg-tertiary);
    border-color: var(--color-border);
    color: var(--color-text-primary);

.header-btn.btn-secondary:hover {
    background: var(--color-bg-hover);
    border-color: var(--color-border-light);

.header-nav-links {
    margin-left: var(--spacing-md);
    display: inline-block;

.header-nav-link {
    color: var(--color-info);
    text-decoration: none;
    margin: 0 var(--spacing-sm);
    font-size: var(--font-size-sm);
    font-family: var(--font-body);
    transition: all var(--transition-base);
    position: relative;

.header-nav-link::after {
    content: '';
    position: absolute;
    bottom: -calc(var(--spacing-xs) / 2);
    left: 0;
    width: 0;
    height: calc(var(--spacing-xs) / 2);
    background: var(--color-info);
    transition: width var(--transition-base);

.header-nav-link:hover {
    color: var(--color-info);
    text-shadow: var(--glow-blue);

.header-nav-link:hover::after {
    width: 100%;

.header-btn.btn-google {
    background: var(--color-info);
    border-color: var(--color-info);
    color: white;

.header-btn.btn-google:hover {
    background: var(--color-info-dark);
    border-color: var(--color-info-dark);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);

/* === TYPOGRAPHY === */
/* Typography base styles are in design-system.css */
/* Additional typography enhancements below */

h2 {
    position: relative;
    padding-bottom: var(--spacing-xs);

h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: calc(var(--spacing-2xl)); /* ~60px */
    height: calc(var(--spacing-xs) / 2);
    background: linear-gradient(90deg, var(--color-info), transparent);

/* === SECTIONS === */
section {
    margin-bottom: var(--spacing-lg);

.divider {
    border: none;
    border-top: 1px solid var(--color-border);
    margin: var(--spacing-lg) 0;

/* === CHARACTER INFO === */
.character-info {
    margin-bottom: var(--spacing-lg);
    animation: fadeInUp 0.6s ease-out;

.quick-start-section {
    margin-bottom: var(--spacing-md);
    padding: var(--spacing-md);
    background: rgba(var(--color-info-rgb, 91, 192, 222), 0.1);
    border: 2px solid var(--color-info);
    border-radius: var(--radius-lg);
    display: none;
    animation: fadeInUp 0.6s ease-out;
    position: relative;
    overflow: hidden;

.quick-start-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
        transparent, 
        rgba(var(--color-info-rgb, 91, 192, 222), 0.2), 
        transparent);
    animation: shimmer 3s infinite;

@keyframes shimmer {
    0% { left: -100%; }
    100% { left: 100%; }

.quick-start-btn {
    width: 100%;
    font-size: var(--font-size-md);
    padding: var(--spacing-md);

.quick-start-note {
    margin-top: var(--spacing-sm);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    text-align: center;
    font-family: var(--font-body);

.name-input-group {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    flex-wrap: wrap;

.name-input-group label {
    min-width: calc(var(--spacing-2xl) * 1.67); /* ~100px */
    font-family: var(--font-heading);
    letter-spacing: var(--letter-spacing-tight);

.roll-char-btn {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-sm);

.character-template-select {
    padding: var(--spacing-xs) var(--spacing-sm);
    background: var(--color-bg-input);
    border: 1px solid var(--color-info);
    color: var(--color-text-primary);
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    cursor: pointer;
    transition: all var(--transition-base);

.character-template-select:hover {
    border-color: var(--color-info);
    box-shadow: 0 0 0 3px rgba(var(--color-info-rgb, 91, 192, 222), 0.1);

.character-template-select:focus {
    outline: none;
    border-color: var(--color-info);
    box-shadow: 0 0 0 3px rgba(var(--color-info-rgb, 91, 192, 222), 0.1), var(--glow-blue);

#character-name {
    flex: 1;
    padding: calc(var(--spacing-sm) + calc(var(--spacing-xs) / 2)) calc(var(--spacing-md) - calc(var(--spacing-xs) * 1.25));
    font-size: var(--font-size-md);
    background-color: var(--color-bg-input);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-sm);
    color: var(--color-text-primary);
    font-family: var(--font-heading);
    letter-spacing: var(--letter-spacing-tight);
    transition: all var(--transition-base);

#character-name:focus {
    outline: none;
    border-color: var(--color-success);
    box-shadow: var(--glow-green);

/* === STAT BLOCK === */
.stat-block {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Always 3 columns: left/mid/right */
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);

.stat-item {
    background-color: var(--color-bg-secondary);
    padding: var(--spacing-md);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    transition: all var(--transition-base);
    position: relative;
    overflow: hidden;

.stat-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: calc(var(--spacing-xs) * 0.75); /* Thin accent line, keep as-is */
    height: 100%;
    transition: width var(--transition-base);

.stat-item:hover {
    border-color: var(--color-border-light);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);

.stat-item:hover::before {
    width: calc(var(--spacing-xs) * 1.25); /* Slightly thicker on hover, keep as-is */

.stat-item.pilot {
    border-left: calc(var(--spacing-xs) * 0.75) solid var(--color-accent-pilot);

.stat-item.pilot::before {
    background: var(--color-accent-pilot);

.stat-item.fight {
    border-left: calc(var(--spacing-xs) * 0.75) solid var(--color-accent-fight);

.stat-item.fight::before {
    background: var(--color-accent-fight);

.stat-item.smooth {
    border-left: calc(var(--spacing-xs) * 0.75) solid var(--color-accent-smooth);

.stat-item.smooth::before {
    background: var(--color-accent-smooth);

.stat-header {
    margin-bottom: var(--spacing-md);
    position: relative;

.stat-header label {
    display: block;
    font-size: var(--font-size-md);
    margin-bottom: var(--spacing-xs);
    font-family: var(--font-heading);
    letter-spacing: var(--letter-spacing-tight);
    transition: all var(--transition-base);

.stat-item:hover .stat-header label {
    text-shadow: 0 0 10px currentColor;

.stat-description {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    font-style: italic;
    font-family: var(--font-body);
    line-height: var(--line-height-normal);

.stat-controls {
    display: flex;
    gap: var(--spacing-sm);
    align-items: center;

.stat-value {
    width: calc(var(--spacing-2xl) * 1.33); /* ~80px */
    padding: var(--spacing-sm);
    font-size: var(--font-size-xl);
    text-align: center;
    background-color: var(--color-bg-input);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    color: var(--color-text-primary);
    font-family: var(--font-heading);
    font-weight: var(--font-weight-bold);
    transition: all var(--transition-base);

.stat-value:focus {
    outline: none;
    border-color: var(--color-border-focus);
    box-shadow: 0 0 0 3px rgba(var(--color-success-rgb, 92, 184, 92), 0.1), var(--glow-green);
    transform: scale(1.05);

/* === BUTTONS === */
/* Base button styles are in design-system.css */
/* Additional button enhancements below */

.crew-btn {
    flex: 0 0 auto;
    width: calc(var(--spacing-2xl) * 0.83); /* ~50px */
    padding: calc(var(--spacing-sm) + calc(var(--spacing-xs) / 2)) var(--spacing-xs);
    margin-left: var(--spacing-xs);
    font-size: var(--font-size-lg); /* Relative to parent, keep as-is */
    letter-spacing: var(--letter-spacing-tight);
    border: 1px solid var(--color-info);
    border-radius: var(--radius-md);
    background: var(--color-bg-secondary);
    color: var(--color-info);
    font-family: var(--font-heading);
    transition: all var(--transition-base);

.crew-btn:hover:not(:disabled) {
    background: var(--color-info);
    color: var(--color-bg-primary);
    transform: translateY(-2px);
    box-shadow: var(--glow-blue);

.btn-icon {
    font-size: var(--font-size-lg); /* Relative to parent, keep as-is */
    display: inline-block;
    transition: transform var(--transition-base);

.roll-btn:hover .btn-icon {
    transform: rotate(15deg) scale(1.1);

/* === STATUS BLOCK === */
.status-block {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(calc(var(--spacing-2xl) * 4.17), 1fr)); /* ~250px */
    gap: var(--spacing-md);

.tracker {
    background-color: var(--color-bg-secondary);
    padding: var(--spacing-md);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    transition: all var(--transition-base);
    position: relative;
    overflow: hidden;

.tracker::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: calc(var(--spacing-xs) * 0.75); /* Thin accent line, keep as-is */
    height: 100%;
    transition: width var(--transition-base);

.tracker:hover {
    border-color: var(--color-border-light);
    box-shadow: var(--shadow-md);

.tracker:hover::before {
    width: calc(var(--spacing-xs) * 1.25); /* Slightly thicker on hover, keep as-is */

.stress-tracker {
    border-left: calc(var(--spacing-xs) * 0.75) solid var(--color-warning);

.stress-tracker::before {
    background: var(--color-warning);

.wounds-tracker {
    border-left: calc(var(--spacing-xs) * 0.75) solid var(--color-failure);

.wounds-tracker::before {
    background: var(--color-failure);

.tracker h2 {
    font-size: var(--font-size-lg);
    margin-bottom: var(--spacing-md);

/* Stress Visual */
.stress-visual,
.wounds-visual {
    margin-bottom: var(--spacing-md);

.stress-bar,
.wounds-bar,
.integrity-bar {
    display: flex;
    gap: calc(var(--spacing-xs) / 2);
    margin-bottom: var(--spacing-sm);

.stress-pip,
.wound-pip,
.integrity-pip {
    flex: 1;
    height: calc(var(--spacing-lg)); /* ~30px */
    background-color: var(--color-bg-input);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    transition: all var(--transition-slow);
    cursor: pointer;
    position: relative;

.stress-pip:hover,
.wound-pip:hover,
.integrity-pip:hover {
    border-color: var(--color-border-light);
    transform: scale(1.05);

.stress-pip.active {
    background: linear-gradient(135deg, var(--color-warning), var(--color-warning-dark));
    box-shadow: var(--glow-amber);
    animation: fadeIn 0.3s ease-out;

.wound-pip.active {
    background: linear-gradient(135deg, var(--color-failure), var(--color-failure-dark));
    box-shadow: var(--glow-red);
    animation: fadeIn 0.3s ease-out;

.integrity-pip.active {
    background: linear-gradient(135deg, var(--color-success), var(--color-success-dark));
    box-shadow: var(--glow-green);
    animation: fadeIn 0.3s ease-out;

.stress-display,
.wounds-display,
.integrity-display {
    text-align: center;
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    font-family: var(--font-heading);
    margin-bottom: var(--spacing-sm);
    transition: all var(--transition-base);

.stress-display {
    color: var(--color-warning);

.wounds-display {
    color: var(--color-failure);

.integrity-display {
    color: var(--color-success);

.tracker-controls {
    display: flex;
    gap: var(--spacing-sm);

/* Control buttons are styled in design-system.css */
/* Additional enhancements below */

.tracker-note {
    margin-top: var(--spacing-sm);
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    font-style: italic;
    font-family: var(--font-body);
    line-height: var(--line-height-normal);

.tracker-note strong {
    color: var(--color-warning);
    font-weight: var(--font-weight-bold);

/* === FINANCIAL SECTION === */
.financial-section {
    margin-bottom: var(--spacing-lg);

.financial-display {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);

.financial-item {
    background-color: var(--color-bg-secondary);
    padding: var(--spacing-md);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
    transition: all var(--transition-base);

.financial-item:hover {
    border-color: var(--color-border-light);
    box-shadow: var(--shadow-sm);
    transform: translateX(4px);

.financial-item label {
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    min-width: calc(var(--spacing-2xl) * 1.33); /* ~80px */

.financial-value {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-success);
    font-family: var(--font-heading);
    flex: 1;
    text-align: right;

.financial-controls {
    display: flex;
    gap: var(--spacing-xs);

.financial-item.has-debt .financial-value {
    color: var(--color-failure);

/* === CREW SECTION === */
.crew-section {
    margin-bottom: var(--spacing-lg);

.crew-display {
    background-color: var(--color-bg-secondary);
    padding: var(--spacing-md);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    transition: all var(--transition-base);

.crew-display:hover {
    border-color: var(--color-border-light);
    box-shadow: var(--shadow-sm);

.crew-summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--color-border);

.crew-summary label {
    font-weight: bold;
    color: var(--color-text-primary);

.crew-value {
    font-size: var(--font-size-xl);
    font-weight: bold;
    color: var(--color-info);
    font-family: var(--font-heading);

.crew-breakdown {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-md);

.crew-type {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);

.crew-type label {
    font-weight: bold;
    color: var(--color-text-primary);
    font-size: var(--font-size-sm);

.crew-type span:first-of-type {
    font-size: var(--font-size-lg);
    font-weight: bold;
    color: var(--color-info);
    font-family: var(--font-heading);

.crew-description {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    font-style: italic;

/* === SCARS SECTION === */
.scars-section {
    margin-bottom: var(--spacing-lg);

.scars-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);

/* === INVENTORY === */
.inventory-section {
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-md);
    transition: all var(--transition-base);
    position: relative;
    overflow: hidden;

.inventory-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: calc(var(--spacing-xs) * 0.75);
    height: 100%;
    background: var(--color-info);
    transition: width var(--transition-base);

.inventory-section:hover {
    border-color: var(--color-border-light);
    box-shadow: var(--shadow-md);

.inventory-section:hover::before {
    width: calc(var(--spacing-xs) * 1.25);

.equipment-section {
    margin-bottom: var(--spacing-md);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    transition: all var(--transition-base);

.equipment-section:hover {
    background: var(--color-bg-hover);
    border-color: var(--color-border-light);

.equipment-label {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    cursor: pointer;
    margin-bottom: var(--spacing-xs);

.equipment-label input[type="checkbox"] {
    width: calc(var(--spacing-lg) * 1.25);
    height: calc(var(--spacing-lg) * 1.25);
    cursor: pointer;
    accent-color: var(--color-info);

.equipment-text {
    color: var(--color-text-primary);
    font-weight: var(--font-weight-bold);
    font-family: var(--font-body);

.equipment-description {
    margin: var(--spacing-xs) 0 0 calc(var(--spacing-xl) * 1.25);
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    font-family: var(--font-body);
    line-height: var(--line-height-normal);

.inventory-textarea {
    width: 100%;
    padding: var(--spacing-md);
    font-family: var(--font-body);
    font-size: var(--font-size-base);
    background-color: var(--color-bg-input);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text-primary);
    resize: vertical;
    min-height: 152px;
    transition: all var(--transition-base);
    line-height: var(--line-height-relaxed);

.inventory-textarea:focus {
    outline: none;
    border-color: var(--color-info);
    box-shadow: 0 0 0 3px rgba(var(--color-info-rgb, 91, 192, 222), 0.1), var(--glow-blue);

.inventory-textarea::placeholder {
    color: var(--color-text-dim);

.shared-inventory-section {
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-md);
    transition: all var(--transition-base);
    position: relative;
    overflow: hidden;

.shared-inventory-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: calc(var(--spacing-xs) * 0.75);
    height: 100%;
    background: var(--color-success);
    transition: width var(--transition-base);

.shared-inventory-section:hover {
    border-color: var(--color-border-light);
    box-shadow: var(--shadow-md);

.shared-inventory-section:hover::before {
    width: calc(var(--spacing-xs) * 1.25);

/* === WARDEN NAME INPUT === */
.warden-name-group {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin: 0;
    flex-wrap: wrap;
    max-width: 100%;

.warden-name-label {
    font-size: var(--font-size-xs);
    font-family: var(--font-body);
    color: var(--color-text-primary);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-tight);

.warden-name-input {
    padding: var(--spacing-xs) var(--spacing-sm);
    background: var(--color-bg-input);
    border: 1px solid var(--color-info);
    color: var(--color-text-primary);
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    transition: all var(--transition-base);
    min-width: calc(var(--spacing-2xl) * 2.5); /* ~150px */
    max-width: calc(var(--spacing-2xl) * 3.33); /* ~200px */
    box-sizing: border-box;

.warden-name-input:focus {
    outline: none;
    border-color: var(--color-info);
    box-shadow: 0 0 0 3px rgba(var(--color-info-rgb, 91, 192, 222), 0.1), var(--glow-blue);

.warden-name-input::placeholder {
    color: var(--color-text-dim);

/* === GAME LOG === */
.game-log-section {
    margin-top: 0;
    margin-bottom: var(--spacing-md);

.log-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-md);

.clear-log-btn {
    padding: var(--spacing-xs) calc(var(--spacing-md) - calc(var(--spacing-xs) * 1.25));
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    background-color: var(--color-bg-tertiary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: all var(--transition-base);

.clear-log-btn:hover {
    background-color: var(--color-failure);
    color: white;
    border-color: var(--color-failure);

.game-log {
    background-color: var(--color-bg-primary);
    padding: var(--spacing-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    height: 400px;
    overflow-y: auto;
    font-size: var(--font-size-sm);
    line-height: var(--line-height-relaxed);
    font-family: var(--font-body);
    /* Prevent layout shifts from message additions */
    contain: layout style;
    /* Don't use content-visibility - it causes flicker */
    /* Isolate from parent layout calculations */
    position: relative;
    /* Prevent affecting parent height */
    flex-shrink: 0;

.game-log p {
    margin-bottom: var(--spacing-sm);
    padding: var(--spacing-sm);
    border-left: calc(var(--spacing-xs) * 0.75) solid transparent;
    transition: all var(--transition-base);
    animation: slideIn 0.3s ease-out;
    border-radius: var(--radius-sm);

/* Disable animations for right column game log to prevent flicker (WARDEN PAGE ONLY) */
body.warden-body .dashboard-right .game-log p {
    animation: none !important;
    transition: none !important;
    will-change: auto !important;

.game-log p:hover {
    background-color: rgba(var(--color-text-primary-rgb, 224, 224, 224), 0.03);
    transform: translateX(4px);

/* Disable hover transform for right column to prevent flicker (WARDEN PAGE ONLY) */
body.warden-body .dashboard-right .game-log p:hover {
    transform: none !important;
    transition: none !important;

.game-log .timestamp {
    color: var(--color-text-dim);
    font-size: var(--font-size-sm);
    margin-right: var(--spacing-sm);

.game-log .player-name {
    font-weight: bold;
    color: var(--color-info);

.game-log p.success {
    color: var(--color-success);
    border-left-color: var(--color-success);

.game-log p.failure {
    color: var(--color-failure);
    border-left-color: var(--color-failure);

.game-log p.critical {
    color: var(--color-warning);
    border-left-color: var(--color-warning);
    font-weight: bold;
    animation: flash 1s;

/* Disable critical animation for right column to prevent flicker (WARDEN PAGE ONLY) */
body.warden-body .dashboard-right .game-log p.critical {
    animation: none !important;

.game-log p.alert {
    color: var(--color-warning);
    border-left-color: var(--color-warning);
    font-weight: bold;
    background-color: rgba(var(--color-warning-rgb, 255, 193, 7), 0.1);

.game-log p.system {
    color: var(--color-text-secondary);
    font-style: italic;
    border-left-color: var(--color-border);

.game-log p.gm {
    color: var(--color-info);
    border-left-color: var(--color-info);
    font-weight: bold;
    background-color: rgba(var(--color-info-rgb, 91, 192, 222), 0.1);

/* === ROLL RESULT INDICATORS === */
.roll-success {
    color: var(--color-success);
    font-size: var(--font-size-lg);
    font-weight: bold;
    text-shadow: 0 0 10px rgba(46, 204, 113, 0.5);
    display: inline-block;
    margin-right: var(--spacing-xs);

.roll-failure {
    color: var(--color-failure);
    font-size: var(--font-size-lg);
    font-weight: bold;
    text-shadow: 0 0 10px rgba(231, 76, 60, 0.5);
    display: inline-block;
    margin-right: var(--spacing-xs);

.roll-critical-success {
    color: var(--color-warning);
    font-size: var(--font-size-lg);
    font-weight: bold;
    text-shadow: 0 0 15px rgba(241, 196, 15, 0.7);
    display: inline-block;
    margin-right: var(--spacing-xs);
    animation: pulse 1.5s infinite;

.roll-critical-failure {
    color: var(--color-failure);
    font-size: var(--font-size-lg);
    font-weight: bold;
    text-shadow: 0 0 15px rgba(231, 76, 60, 0.7);
    display: inline-block;
    margin-right: var(--spacing-xs);
    animation: pulse 1.5s infinite;

/* === SESSION JOIN SECTION === */
.session-join-section {
    background: rgba(var(--color-bg-primary-rgb, 26, 26, 26), 0.3);
    border: 2px solid var(--color-info);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
    box-shadow: 0 0 20px rgba(74, 144, 226, 0.3);

.session-join-section h2 {
    margin-top: 0;
    margin-bottom: var(--spacing-md);
    color: var(--color-info);
    font-size: var(--font-size-lg);

.session-join-help {
    background: rgba(74, 144, 226, 0.1);
    border-left: calc(var(--spacing-xs) * 0.75) solid var(--color-info);
    padding: var(--spacing-sm) var(--spacing-md);
    margin-bottom: var(--spacing-md);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);

.session-join-input-group {
    display: flex;
    gap: var(--spacing-sm);
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: var(--spacing-sm);

.session-join-input-group label {
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    min-width: 120px;

.session-code-input {
    flex: 1;
    min-width: 200px;
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-bg-input);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text-primary);
    font-family: var(--font-heading);
    font-size: var(--font-size-md);
    text-transform: uppercase;
    letter-spacing: 2px;
    transition: all var(--transition-base);

.session-code-input:focus {
    outline: none;
    border-color: var(--color-info);
    box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.2), 0 0 15px rgba(74, 144, 226, 0.4);

.session-join-note {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    font-style: italic;
    margin-top: var(--spacing-sm);
    margin-bottom: 0;

/* === CHARACTER LIBRARY === */
.character-library-modal,
.npc-manager-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(var(--color-bg-primary-rgb, 26, 26, 26), 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;

.character-grid,
.npc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--spacing-md);
    max-height: 60vh;
    overflow-y: auto;
    padding: var(--spacing-sm);

.character-card,
.npc-card {
    background: rgba(var(--color-bg-primary-rgb, 26, 26, 26), 0.4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    transition: all var(--transition-base);

.character-card:hover,
.npc-card:hover {
    border-color: var(--color-info);
    box-shadow: 0 0 15px rgba(74, 144, 226, 0.3);
    transform: translateY(-2px);

.character-card.current-character,
.npc-card.current-character {
    border-color: var(--color-success);
    box-shadow: 0 0 20px rgba(46, 204, 113, 0.4);

.character-card-header,
.npc-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-sm);

.character-card-header h3,
.npc-card-header h3 {
    margin: 0;
    font-size: var(--font-size-md);
    color: var(--color-text-primary);

.current-badge {
    background: var(--color-success);
    color: var(--color-bg-primary);
    padding: calc(var(--spacing-xs) / 2.5) var(--spacing-xs);
    border-radius: var(--radius-sm);
    font-size: 0.7em;
    font-weight: bold;

.npc-faction {
    background: var(--color-info);
    color: var(--color-bg-primary);
    padding: calc(var(--spacing-xs) / 2.5) var(--spacing-xs);
    border-radius: var(--radius-sm);
    font-size: 0.7em;

.character-card-stats,
.npc-card-stats {
    margin-bottom: var(--spacing-sm);

.stat-row {
    display: flex;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-xs);
    font-size: var(--font-size-sm);

.character-card-meta,
.npc-card-meta {
    margin-top: var(--spacing-xs);
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);

.character-card-actions,
.npc-card-actions {
    display: flex;
    gap: var(--spacing-xs);
    flex-wrap: wrap;

.character-card-actions .action-btn,
.npc-card-actions .btn {
    flex: 1;
    min-width: 80px;
    font-size: var(--font-size-sm);
    padding: calc(var(--spacing-sm) - var(--spacing-xs)) var(--spacing-sm);

.npc-description {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin: var(--spacing-xs) 0;
    font-style: italic;

/* === CHARACTER HISTORY === */
.character-history-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(var(--color-bg-primary-rgb, 26, 26, 26), 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;

.character-history-stats {
    border: 1px solid var(--color-border);

.character-history-list {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--spacing-sm);
    background: rgba(var(--color-bg-primary-rgb, 26, 26, 26), 0.2);

.history-entry {
    background: rgba(var(--color-bg-primary-rgb, 26, 26, 26), 0.3);
    border-left: calc(var(--spacing-xs) * 0.75) solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    margin-bottom: var(--spacing-sm);
    transition: all var(--transition-base);

.history-entry:hover {
    background: rgba(var(--color-bg-primary-rgb, 26, 26, 26), 0.4);
    border-left-color: var(--color-info);

.history-entry-session {
    border-left-color: var(--color-info);

.history-entry-level-up {
    border-left-color: var(--color-warning);

.history-entry-achievement {
    border-left-color: var(--color-success);

.history-entry-death {
    border-left-color: var(--color-failure);

.history-entry-event {
    border-left-color: var(--color-text-secondary);

.history-entry-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-xs);

.history-entry-icon {
    font-size: var(--font-size-lg);

.history-entry-title {
    flex: 1;

.history-entry-description {
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    margin-left: calc(var(--spacing-sm) + 1.2em);

.history-entry-meta {
    margin-top: var(--spacing-xs);
    margin-left: calc(var(--spacing-sm) + 1.2em);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);

@keyframes flash {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }

/* === DICE ROLLER OVERLAY === */
.dice-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(var(--color-bg-primary-rgb, 26, 26, 26), 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000;
    transition: opacity 0.3s ease;

.dice-overlay.hidden {
    opacity: 0;
    pointer-events: none;

.dice-container {
    text-align: center;

.dice-result {
    animation: diceRoll 0.5s ease-out;

.dice-number {
    font-family: var(--font-heading);
    font-size: 8em;
    font-weight: 900;
    color: var(--color-success);
    text-shadow: var(--glow-green);
    line-height: 1;

.dice-label {
    font-size: var(--font-size-xl);
    color: var(--color-text-secondary);
    margin-top: var(--spacing-sm);

@keyframes diceRoll {
    0% {
        transform: scale(0.5) rotate(0deg);
        opacity: 0;

    50% {
        transform: scale(1.2) rotate(180deg);

    100% {
        transform: scale(1) rotate(360deg);
        opacity: 1;

/* === WARDEN-SPECIFIC STYLES === */
/* Warden body styling now matches player page - see player-layout.css */

/* Warden container styles moved above - see player-layout.css */

/* Warden header styling now matches player page - see player-layout.css */

.dashboard-grid {
    display: grid;
    grid-template-columns: minmax(300px, 350px) minmax(450px, 1fr) minmax(320px, 380px);
    gap: var(--spacing-md);
    width: 100%;
    box-sizing: border-box;
    align-items: start;

/* Lock grid layout on warden page to prevent recalculations during scroll */
body.warden-body .dashboard-grid {
    /* Prevent grid from recalculating during scroll */
    contain: layout style !important;
    /* Lock grid template to prevent recalculation */
    grid-template-columns: 350px 1fr 380px !important;
    /* Disable any transitions */
    transition: none !important;
    /* Prevent layout shifts */
    will-change: auto !important;
    transform: translateZ(0) !important;

.dashboard-left,
.dashboard-center,
.dashboard-right {
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    /* Auto-size: only scroll columns when content overflows viewport */
    max-height: none;
    overflow-y: visible;
    overflow-x: hidden;
    align-items: stretch;
    /* Light containment for performance */
    contain: layout style;
    opacity: 1 !important;
    visibility: visible !important;
    /* No transitions during initial load - transitions only enabled after loaded class */
    transition: none;
    /* Optimize rendering */
    will-change: auto;
    transform: translateZ(0); /* GPU acceleration for smoother rendering */
    position: relative;

/* Only apply scrolling to columns when they exceed viewport */
/* Only enable transitions after page is loaded */
body.loaded .dashboard-left.overflowing,
body.loaded .dashboard-center.overflowing {
    max-height: calc(100vh - 150px);
    overflow-y: auto;
    transition: max-height 0.2s ease, overflow-y 0.2s ease;

/* Disable ALL transitions on warden page columns to prevent bouncing during scroll */
body.warden-body .dashboard-left,
body.warden-body .dashboard-center {
    transition: none !important;
    will-change: auto !important;
    /* Lock dimensions to prevent grid recalculation */
    contain: layout style !important;
    transform: translateZ(0) !important;
    /* Prevent any layout shifts */
    position: relative !important;

body.warden-body .dashboard-left.overflowing,
body.warden-body .dashboard-center.overflowing {
    transition: none !important;
    /* Lock even when overflowing */
    contain: layout style !important;

/* Right column: Optimized for smooth scrolling (WARDEN PAGE ONLY) */
body.warden-body .dashboard-right {
    /* Use simpler flex layout */
    display: flex !important;
    flex-direction: column !important;
    /* Lock all properties - no transitions, no changes */
    max-height: none !important;
    overflow-y: visible !important;
    overflow-x: hidden !important;
    /* GPU acceleration for smooth scrolling */
    transform: translateZ(0) !important;
    /* Remove will-change - it can cause layout recalculations */
    will-change: auto !important;
    /* Remove ALL transitions */
    transition: none !important;
    /* Light containment - too much containment can cause lag */
    contain: layout style !important;
    /* Lock position */
    position: relative !important;
    /* Force stable dimensions - lock width to prevent grid recalculation */
    width: 100% !important;
    min-width: 320px !important;
    max-width: 384px !important;
    min-height: 0 !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    /* Prevent responding to viewport changes */
    resize: none !important;

/* Right column sections - completely locked (WARDEN PAGE ONLY) */
body.warden-body .dashboard-right .dashboard-section {
    max-height: none !important;
    overflow-y: visible !important;
    transition: none !important;
    contain: layout style !important; /* Reduced from paint - too aggressive */
    transform: translateZ(0);

body.warden-body .dashboard-right .dashboard-section-content {
    max-height: none !important;
    overflow-y: visible !important;
    transition: none !important;
    contain: layout style !important; /* Reduced from paint - too aggressive */
    /* Prevent any layout shifts */
    transform: translateZ(0);
    will-change: auto;

/* Disable scrollbar transitions on right column (WARDEN PAGE ONLY) */
body.warden-body .dashboard-right: :-webkit-scrollbar-thumb {
    transition: none !important;

body.warden-body .dashboard-right .dashboard-section::-webkit-scrollbar-thumb {
    transition: none !important;

/* Enhanced scrollbar for dashboard columns */
.dashboard-left: :-webkit-scrollbar,
.dashboard-center::-webkit-scrollbar,
.dashboard-right::-webkit-scrollbar {
    width: var(--spacing-md);

.dashboard-left: :-webkit-scrollbar-track,
.dashboard-center::-webkit-scrollbar-track,
.dashboard-right::-webkit-scrollbar-track {
    background: rgba(var(--color-bg-primary-rgb, 26, 26, 26), 0.1);
    border-radius: var(--radius-lg);

.dashboard-left: :-webkit-scrollbar-thumb,
.dashboard-center::-webkit-scrollbar-thumb,
.dashboard-right::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: var(--radius-lg);
    border: 2px solid transparent;
    background-clip: padding-box;
    min-height: calc(var(--spacing-2xl) * 1.25);
    transition: background 0.2s ease;

.dashboard-left: :-webkit-scrollbar-thumb:hover,
.dashboard-center::-webkit-scrollbar-thumb:hover,
.dashboard-right::-webkit-scrollbar-thumb:hover {
    background: var(--color-info);
    background-clip: padding-box;

.dashboard-left: :-webkit-scrollbar-thumb:active,
.dashboard-center::-webkit-scrollbar-thumb:active,
.dashboard-right::-webkit-scrollbar-thumb:active {
    background: var(--color-info-dark);
    background-clip: padding-box;

/* Firefox scrollbar for columns */
.dashboard-left,
.dashboard-center {
    scrollbar-width: thin;
    scrollbar-color: var(--color-border) rgba(var(--color-bg-primary-rgb, 26, 26, 26), 0.1);
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;

/* Right column: Enable smooth scrolling for better UX (WARDEN PAGE ONLY) */
body.warden-body .dashboard-right {
    scrollbar-width: thin;
    scrollbar-color: var(--color-border) rgba(var(--color-bg-primary-rgb, 26, 26, 26), 0.1);
    scroll-behavior: smooth !important; /* Enable smooth scrolling */
    -webkit-overflow-scrolling: touch !important;

@media (max-width: 1600px) {
    .dashboard-grid {
        grid-template-columns: minmax(280px, 320px) minmax(400px, 1fr) minmax(300px, 350px);

    /* Lock right column width on warden page to prevent flicker */
    body.warden-body .dashboard-right {
        width: 352px !important;
        min-width: 352px !important;
        max-width: 352px !important;

@media (max-width: 1400px) {
    .dashboard-grid {
        grid-template-columns: minmax(260px, 300px) minmax(350px, 1fr) minmax(280px, 320px);

    /* Lock right column width on warden page to prevent flicker */
    body.warden-body .dashboard-right {
        width: 320px !important;
        min-width: 320px !important;
        max-width: 320px !important;

@media (max-width: 1200px) {
    .dashboard-grid {
        grid-template-columns: 1fr;

    .dashboard-left,
    .dashboard-center,
    .dashboard-right {
        grid-column: 1;

    /* Lock right column width on warden page even in mobile */
    body.warden-body .dashboard-right {
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;

/* === PLAYER LIST === */
.player-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);

.player-card {
    background-color: var(--color-bg-secondary);
    padding: var(--spacing-md);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    border-left: calc(var(--spacing-xs) * 0.75) solid var(--color-info);
    transition: all var(--transition-base);
    position: relative;
    overflow: hidden;

.player-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: calc(var(--spacing-xs) * 0.75);
    height: 100%;
    background: var(--color-info);
    transition: width var(--transition-base);

.player-card:hover {
    border-color: var(--color-border-light);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);

.player-card:hover::before {
    width: calc(var(--spacing-xs) * 1.25);

.player-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-sm);

.player-card-name {
    font-family: var(--font-heading);
    font-size: var(--font-size-md);
    font-weight: bold;
    color: var(--color-info);

.player-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
    font-size: var(--font-size-sm);

.player-stat {
    text-align: center;
    padding: var(--spacing-xs);
    background-color: var(--color-bg-input);
    border-radius: var(--radius-sm);

.player-stat-label {
    display: block;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin-bottom: calc(var(--spacing-xs) * 0.75);

.player-stat-value {
    font-family: var(--font-heading);
    font-weight: bold;
    font-size: var(--font-size-lg);

.player-status-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);

.player-status {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-xs) var(--spacing-sm);
    background-color: var(--color-bg-input);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);

.player-controls {
    display: flex;
    gap: calc(var(--spacing-xs) / 2);

.mini-btn {
    padding: calc(var(--spacing-xs) / 2) var(--spacing-xs);
    font-size: var(--font-size-sm); /* Relative to parent, keep as-is */
    background-color: var(--color-bg-tertiary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-text-primary);
    cursor: pointer;
    transition: all var(--transition-base);

.mini-btn:hover {
    background-color: var(--color-border);

.empty-state {
    text-align: center;
    color: var(--color-text-dim);
    font-style: italic;
    padding: var(--spacing-lg);

/* === SHIP STATUS === */
.ship-status-section {
    margin-top: var(--spacing-md);

.ship-integrity {
    margin-bottom: var(--spacing-md);

.ship-systems h3 {
    font-size: var(--font-size-base);
    margin-bottom: var(--spacing-sm);

.system-status {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-sm);

.system-status label {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: var(--font-size-sm);
    cursor: pointer;

.system-status input[type="checkbox"] {
    width: calc(var(--spacing-md) - calc(var(--spacing-xs) / 2));
    height: calc(var(--spacing-md) - calc(var(--spacing-xs) / 2));
    min-width: calc(var(--spacing-md) - calc(var(--spacing-xs) / 2));
    min-height: calc(var(--spacing-md) - calc(var(--spacing-xs) / 2));
    cursor: pointer;

/* === SCENARIO SECTION === */
.scenario-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-md);

#scenario-select {
    padding: var(--spacing-xs) calc(var(--spacing-sm) + var(--spacing-xs));
    font-family: var(--font-body);
    background-color: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text-primary);
    cursor: pointer;

.scenario-content {
    background-color: var(--color-bg-secondary);
    padding: var(--spacing-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    max-height: 400px;
    overflow-y: auto;
    font-size: 0.95em;
    line-height: 1.8;

.scenario-content h3 {
    color: var(--color-success);
    margin-top: var(--spacing-md);

.scenario-content p {
    margin-bottom: var(--spacing-sm);

.scenario-content ul {
    margin-left: var(--spacing-md);
    margin-bottom: var(--spacing-sm);

/* === ENCOUNTERS === */
.encounter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--spacing-sm);

.encounter-btn {
    /* Standardized: Use btn-sm size */
    padding: var(--spacing-sm) var(--spacing-md) !important;
    font-family: var(--font-heading);
    font-size: var(--font-size-sm) !important;
    min-height: calc(var(--spacing-2xl) * 1.375) !important;
    background: linear-gradient(135deg, var(--color-bg-secondary), var(--color-bg-tertiary));
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text-primary);
    cursor: pointer;
    transition: all var(--transition-base);
    text-align: left;

.encounter-btn:hover {
    border-color: var(--color-info);
    box-shadow: var(--glow-blue);
    transform: translateY(-2px);

.encounter-btn:active {
    transform: translateY(0);

/* === NPC ROLLER === */
.npc-input-group {
    display: grid;
    grid-template-columns: 2fr 1fr 100px 1fr;
    gap: var(--spacing-sm);
    align-items: center;

.npc-input-group input,
.npc-input-group select {
    padding: var(--spacing-sm);
    font-family: var(--font-body);
    background-color: var(--color-bg-input);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text-primary);

.npc-roll-btn {
    background: linear-gradient(135deg, var(--color-warning), var(--color-warning-dark));
    color: var(--color-bg-primary);

.npc-roll-btn:hover {
    box-shadow: var(--glow-amber);

/* === GM TOOLS === */
.gm-actions {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    width: 100%;
    box-sizing: border-box;
    align-items: stretch; /* Ensure buttons align */

.gm-actions .btn {
    width: 100%;
    box-sizing: border-box;
    white-space: normal;
    word-wrap: break-word;

/* Base action-btn styles are in design-system.css */
/* Additional enhancements below */

.btn {
    text-align: left;
    position: relative;
    overflow: hidden;

.action-btn::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: var(--radius-full);
    background: rgba(var(--color-text-primary-rgb, 224, 224, 224), 0.1);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;

.action-btn:hover::after {
    width: 304px;
    height: 304px;

/* === MODAL === */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(var(--color-bg-primary-rgb, 26, 26, 26), 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10050;
    pointer-events: all;

.modal.hidden {
    display: none;
    pointer-events: none;

.modal-content {
    background-color: var(--color-bg-secondary);
    padding: var(--spacing-lg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    min-width: 400px;
    max-width: 600px;
    box-shadow: var(--shadow-xl);
    animation: fadeIn 0.3s ease-out;
    position: relative;
    z-index: 10051;
    pointer-events: all;

.modal-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: calc(var(--spacing-xs) * 0.75);
    background: linear-gradient(90deg, var(--color-info), var(--color-success), var(--color-info));
    pointer-events: none;
    z-index: 1;

.modal-content h3 {
    margin-bottom: var(--spacing-md);

.modal-content textarea {
    width: 100%;
    padding: calc(var(--spacing-sm) + var(--spacing-xs));
    font-family: var(--font-body);
    background-color: var(--color-bg-input);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text-primary);
    resize: vertical;
    margin-bottom: var(--spacing-md);

.modal-actions {
    display: flex;
    gap: var(--spacing-sm);
    justify-content: flex-end;
    position: relative;
    z-index: 10052;
    pointer-events: all;

.modal-actions button,
.modal-actions .btn {
    position: relative;
    z-index: 10053;
    pointer-events: all;
    cursor: pointer;

/* === RESPONSIVE === */
@media (max-width: 768px) {
    h1 {
        font-size: 1.8em;

    /* Tablet: Keep 3 columns, mobile will stack */
    .stat-block {
        grid-template-columns: repeat(3, 1fr);

    .status-block {
        grid-template-columns: 1fr;

@media (max-width: 600px) {
    /* Mobile: Stack vertically for better mobile experience */
    .stat-block {
        grid-template-columns: 1fr !important;

    .name-input-group {
        flex-direction: column;
        align-items: stretch;

    .npc-input-group {
        grid-template-columns: 1fr;

    .dashboard-grid {
        grid-template-columns: 1fr;

/* === SCROLLBAR STYLING === */
.game-log::-webkit-scrollbar,
.scenario-content::-webkit-scrollbar {
    width: var(--spacing-sm);

.game-log::-webkit-scrollbar-track,
.scenario-content::-webkit-scrollbar-track {
    background: var(--color-bg-input);

.game-log::-webkit-scrollbar-thumb,
.scenario-content::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: var(--radius-md);

.game-log::-webkit-scrollbar-thumb:hover,
.scenario-content::-webkit-scrollbar-thumb:hover {
    background: var(--color-border-light);

}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}