/* TODO: Review box-shadow values - consider using design system shadow variables (--shadow-xs, --shadow-sm, etc.) */
/**
 * SMUGGLER: PLAYER PAGE LAYOUT IMPROVEMENTS
 * Clean, spacious, modern design
 */

/* Prevent horizontal overflow */
html {
    overflow-x: hidden;
    width: 100%;
    max-width: 100vw;

/* Main Container Improvements */
body.has-sidebar {
    padding-left: calc(var(--spacing-2xl) * 4.67); /* ~280px */

#app-container,
#warden-container {
    padding: calc(var(--spacing-md) - calc(var(--spacing-xs) * 1.25)) calc(var(--spacing-md) + calc(var(--spacing-xs) * 1.25)) !important;
    max-width: 100% !important;
    width: 100%;
    box-sizing: border-box;

/* Reduce body padding to minimize black space */
body:not(.warden-body),
body.warden-body {
    padding: var(--spacing-sm) !important;
    margin: 0;
    background: var(--color-bg-primary);

/* Header Improvements */
header,
.warden-header {
    margin-bottom: calc(var(--spacing-md) - calc(var(--spacing-xs) * 1.25)) !important;
    padding-bottom: var(--spacing-sm) !important;

header h1,
.warden-header h1 {
    margin-bottom: var(--spacing-sm);
    font-size: var(--font-size-2xl);
    letter-spacing: var(--letter-spacing-tight);

/* Character Info Section - Compact */
.character-info {
    padding: calc(var(--spacing-md) - calc(var(--spacing-xs) * 1.25)) calc(var(--spacing-md) - calc(var(--spacing-xs) / 2));
    margin-bottom: calc(var(--spacing-md) - calc(var(--spacing-xs) * 1.25));
    background: rgba(var(--color-bg-primary-rgb, 26, 26, 26), 0.4);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(74, 144, 226, 0.2);

.name-input-group {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: calc(var(--spacing-sm) + calc(var(--spacing-xs) / 2));
    flex-wrap: wrap;

.name-input-group label {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    color: var(--color-info);
    min-width: calc(var(--spacing-2xl) * 1.67); /* ~100px */

.name-input-group input[type="text"] {
    flex: 1;
    min-width: calc(var(--spacing-2xl) * 4.17); /* ~250px */
    padding: calc(var(--spacing-sm) + calc(var(--spacing-xs) / 2)) calc(var(--spacing-sm) + calc(var(--spacing-xs) * 1.5));
    font-size: calc(var(--font-size-base) - 1px);
    background: rgba(var(--color-bg-primary-rgb, 26, 26, 26), 0.6);
    border: 2px solid rgba(74, 144, 226, 0.3);
    border-radius: var(--radius-lg);
    color: var(--color-text-primary);
    transition: all var(--transition-slow);

.name-input-group input[type="text"]:focus {
    outline: none;
    border-color: var(--color-info);
    box-shadow: 0 0 calc(var(--spacing-md) - 5px) rgba(74, 144, 226, 0.3);

/* Identity Section - Compact */
.identity-input-group {
    margin-top: calc(var(--spacing-sm) + calc(var(--spacing-xs) / 2));
    padding: calc(var(--spacing-sm) + calc(var(--spacing-xs) / 2)) calc(var(--spacing-md) - calc(var(--spacing-xs) * 1.25));
    background: rgba(var(--color-bg-primary-rgb, 26, 26, 26), 0.3);
    border: 1px solid rgba(74, 144, 226, 0.2);
    border-radius: var(--radius-lg);

.identity-input-group > div {
    display: flex;
    gap: calc(var(--spacing-sm) + calc(var(--spacing-xs) / 2));
    flex-wrap: wrap;
    align-items: flex-start;

.identity-input-group > div > div {
    flex: 1;
    min-width: calc(var(--spacing-2xl) * 3.33); /* ~200px */

.identity-input-group label {
    display: block;
    margin-bottom: var(--spacing-xs);
    font-size: var(--font-size-sm);
    color: var(--color-info);
    font-weight: var(--font-weight-normal);
    text-transform: uppercase;
    letter-spacing: calc(var(--letter-spacing-tight) / 2);

.identity-input-group select,
.identity-input-group input[type="text"] {
    width: 100%;
    padding: var(--spacing-sm) calc(var(--spacing-sm) + var(--spacing-xs));
    background: rgba(var(--color-bg-primary-rgb, 26, 26, 26), 0.5);
    border: 2px solid rgba(74, 144, 226, 0.3);
    border-radius: var(--radius-lg);
    color: var(--color-text-primary);
    font-family: var(--font-body);
    font-size: calc(var(--font-size-base) - 2px);
    transition: all var(--transition-slow);

.identity-input-group select:focus,
.identity-input-group input[type="text"]:focus {
    outline: none;
    border-color: var(--color-info);
    box-shadow: 0 0 var(--spacing-sm) rgba(74, 144, 226, 0.2);

.identity-input-group p {
    margin-top: calc(var(--spacing-md) - calc(var(--spacing-xs) * 1.25));
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    font-style: italic;
    line-height: var(--line-height-normal);

/* Stat Block - Compact Grid - ENHANCED FOR PROMINENCE - 3 columns on desktop, stack on mobile */
.stat-block {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: calc(var(--spacing-sm) + calc(var(--spacing-xs) / 2));
    margin: calc(var(--spacing-md) - calc(var(--spacing-xs) * 1.25)) 0;
    padding: calc(var(--spacing-md) - calc(var(--spacing-xs) * 1.25));
    background: rgba(74, 144, 226, 0.1);
    border: 2px solid rgba(74, 144, 226, 0.3);
    border-radius: var(--radius-lg);
    position: relative; /* Changed from sticky - takes less space */
    top: auto;
    z-index: 100;
    box-shadow: 0 4px 12px rgba(var(--color-bg-primary-rgb, 26, 26, 26), 0.3);

.stat-item {
    background: linear-gradient(135deg, rgba(var(--color-bg-primary-rgb, 26, 26, 26), 0.6) 0%, rgba(var(--color-bg-primary-rgb, 26, 26, 26), 0.4) 100%);
    border: 2px solid;
    border-radius: var(--radius-lg);
    padding: calc(var(--spacing-sm) + calc(var(--spacing-xs) / 2)) calc(var(--spacing-md) - calc(var(--spacing-xs) * 1.25));
    transition: all var(--transition-slow);
    box-shadow: var(--shadow-sm);

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

.stat-item.pilot {
    border-color: rgba(74, 144, 226, 0.4);

.stat-item.pilot:hover {
    border-color: rgba(74, 144, 226, 0.7);
    box-shadow: 0 6px 25px rgba(74, 144, 226, 0.3);

.stat-item.fight {
    border-color: rgba(220, 53, 69, 0.4);

.stat-item.fight:hover {
    border-color: rgba(220, 53, 69, 0.7);
    box-shadow: 0 6px 25px rgba(220, 53, 69, 0.3);

.stat-item.smooth {
    border-color: rgba(40, 167, 69, 0.4);

.stat-item.smooth:hover {
    border-color: rgba(40, 167, 69, 0.7);
    box-shadow: 0 6px 25px rgba(40, 167, 69, 0.3);

.stat-header {
    margin-bottom: var(--spacing-sm);

.stat-header label {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    display: block;
    margin-bottom: calc(var(--spacing-xs) / 2);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-tight);

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

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

.stat-value {
    width: calc(var(--spacing-2xl) * 1.33); /* ~80px */
    padding: calc(var(--spacing-sm) + calc(var(--spacing-xs) / 2));
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    text-align: center;
    background: rgba(var(--color-bg-primary-rgb, 26, 26, 26), 0.5);
    border: 2px solid rgba(var(--color-text-primary-rgb, 224, 224, 224), 0.1);
    border-radius: var(--radius-lg);
    color: var(--color-text-primary);

.roll-btn {
    flex: 1;
    min-width: calc(var(--spacing-2xl) * 1.67); /* ~100px */
    padding: var(--spacing-sm) calc(var(--spacing-sm) + calc(var(--spacing-xs) * 1.5));
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    border-radius: calc(var(--radius-md) + 1px);
    border: none;
    cursor: pointer;
    transition: all var(--transition-slow);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing-xs) + 1px);
    text-transform: uppercase;
    letter-spacing: calc(var(--letter-spacing-tight) / 2);

.crew-btn {
    min-width: calc(var(--spacing-xl) + calc(var(--spacing-xs) * 1.25)); /* ~45px */
    padding: var(--spacing-sm);

/* Position & Effect Section - Compact */
.position-effect-section,
.position-effect {
    margin: calc(var(--spacing-md) - calc(var(--spacing-xs) * 1.25)) 0;
    padding: calc(var(--spacing-sm) + calc(var(--spacing-xs) / 2)) calc(var(--spacing-md) - calc(var(--spacing-xs) * 1.25));
    background: rgba(var(--color-bg-primary-rgb, 26, 26, 26), 0.4);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(74, 144, 226, 0.2);

.position-effect-section h3 {
    font-size: calc(var(--font-size-base) - 2px);
    color: var(--color-info);
    margin-bottom: var(--spacing-sm);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-tight);

.position-effect-controls {
    display: flex;
    gap: calc(var(--spacing-md) - calc(var(--spacing-xs) * 1.25));
    flex-wrap: wrap;
    align-items: flex-start;

.position-control,
.effect-control {
    flex: 1;
    min-width: calc(var(--spacing-2xl) * 3.33); /* ~200px */

.position-control label,
.effect-control label {
    display: block;
    margin-bottom: var(--spacing-xs);
    font-size: var(--font-size-sm);
    color: var(--color-info);
    font-weight: var(--font-weight-normal);
    text-transform: uppercase;
    letter-spacing: calc(var(--letter-spacing-tight) / 2);

.position-control select,
.effect-control select {
    width: 100%;
    padding: var(--spacing-sm) calc(var(--spacing-sm) + var(--spacing-xs));
    background: rgba(var(--color-bg-primary-rgb, 26, 26, 26), 0.5);
    border: 2px solid rgba(74, 144, 226, 0.3);
    border-radius: var(--radius-lg);
    color: var(--color-text-primary);
    font-family: var(--font-body);
    font-size: calc(var(--font-size-base) - 2px);

.modifier-display {
    margin-top: var(--spacing-md);
    padding: var(--spacing-sm);
    background: rgba(var(--color-bg-primary-rgb, 26, 26, 26), 0.3);
    border-radius: var(--radius-lg);
    text-align: center;
    font-size: var(--font-size-sm);
    color: #aaa;

/* Buttons - Better Spacing */
.btn {
    padding: calc(var(--spacing-sm) + calc(var(--spacing-xs) / 2)) calc(var(--spacing-md) + var(--spacing-xs));
    font-size: calc(var(--font-size-base) - 2px);
    font-weight: var(--font-weight-bold);
    border-radius: var(--radius-lg);
    border: none;
    cursor: pointer;
    transition: all var(--transition-slow);
    text-transform: uppercase;
    letter-spacing: calc(var(--letter-spacing-tight) / 2);

.roll-char-btn {
    background: linear-gradient(135deg, #28a745, #20c997);
    color: var(--color-text-primary);
    box-shadow: var(--shadow-sm);

.roll-char-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);

/* Quick Start Section - Compact */
.quick-start-section {
    margin-bottom: calc(var(--spacing-sm) + calc(var(--spacing-xs) / 2));
    padding: calc(var(--spacing-sm) + calc(var(--spacing-xs) / 2)) calc(var(--spacing-md) - calc(var(--spacing-xs) * 1.25));
    background: linear-gradient(135deg, rgba(74, 144, 226, 0.1), rgba(74, 144, 226, 0.05));
    border: 2px dashed rgba(74, 144, 226, 0.3);
    border-radius: var(--radius-lg);
    text-align: center;

.quick-start-btn {
    margin-bottom: calc(var(--spacing-md) - calc(var(--spacing-xs) * 1.25));
    padding: calc(var(--spacing-md) - calc(var(--spacing-xs) * 1.25)) calc(var(--spacing-lg));
    font-size: var(--font-size-base);

.quick-start-note {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: var(--line-height-normal);

/* Section Headers - Compact */
section h2,
section h3 {
    margin-top: 0;
    margin-bottom: var(--spacing-sm);
    color: var(--color-info);
    font-size: var(--font-size-lg);

/* General Spacing Improvements - Compact */
section {
    margin-bottom: calc(var(--spacing-md) - calc(var(--spacing-xs) * 1.25));

.divider {
    margin: calc(var(--spacing-sm) + calc(var(--spacing-xs) / 2)) 0 !important;
    border-top-width: 1px;
    opacity: 0.2;

/* Status Block - Compact */
.status-block {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: calc(var(--spacing-sm) + calc(var(--spacing-xs) / 2));
    margin: calc(var(--spacing-md) - calc(var(--spacing-xs) * 1.25)) 0;

.tracker {
    padding: calc(var(--spacing-sm) + calc(var(--spacing-xs) / 2)) calc(var(--spacing-md) - calc(var(--spacing-xs) * 1.25));
    background: rgba(var(--color-bg-primary-rgb, 26, 26, 26), 0.4);
    border-radius: var(--radius-lg);
    border: 2px solid rgba(74, 144, 226, 0.2);

.tracker h2 {
    margin-bottom: var(--spacing-sm);
    font-size: var(--font-size-base);

/* Financial Section - Compact */
.financial-section {
    padding: calc(var(--spacing-sm) + calc(var(--spacing-xs) / 2)) calc(var(--spacing-md) - calc(var(--spacing-xs) * 1.25));
    background: rgba(var(--color-bg-primary-rgb, 26, 26, 26), 0.3);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(74, 144, 226, 0.2);

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

.financial-item {
    padding: var(--spacing-sm) calc(var(--spacing-sm) + calc(var(--spacing-xs) / 2));
    background: rgba(var(--color-bg-primary-rgb, 26, 26, 26), 0.3);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-sm) + calc(var(--spacing-xs) / 2));
    flex-wrap: wrap;

/* Crew Section - Compact */
.crew-section {
    padding: calc(var(--spacing-sm) + calc(var(--spacing-xs) / 2)) calc(var(--spacing-md) - calc(var(--spacing-xs) * 1.25));
    background: rgba(var(--color-bg-primary-rgb, 26, 26, 26), 0.3);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(74, 144, 226, 0.2);

/* Inventory Section - Compact */
.inventory-section {
    padding: calc(var(--spacing-sm) + calc(var(--spacing-xs) / 2)) calc(var(--spacing-md) - calc(var(--spacing-xs) * 1.25));
    background: rgba(var(--color-bg-primary-rgb, 26, 26, 26), 0.3);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(74, 144, 226, 0.2);

.inventory-section textarea {
    min-height: calc(var(--spacing-2xl) * 1.67); /* ~100px */
    padding: var(--spacing-sm);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-normal);

/* Game Log - Compact */
.game-log-section {
    padding: calc(var(--spacing-sm) + calc(var(--spacing-xs) / 2)) calc(var(--spacing-md) - calc(var(--spacing-xs) * 1.25));
    background: rgba(var(--color-bg-primary-rgb, 26, 26, 26), 0.4);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(74, 144, 226, 0.2);

#game-log {
    min-height: calc(var(--spacing-2xl) * 2.5); /* ~150px */
    max-height: calc(var(--spacing-2xl) * 5); /* ~300px */
    padding: calc(var(--spacing-sm) + calc(var(--spacing-xs) / 2));
    font-size: var(--font-size-sm);
    line-height: var(--line-height-normal);

/* Responsive */
@media (max-width: 1200px) {
    /* Keep stat-block as 3 columns on desktop/tablet - only reduce gap slightly */
    .stat-block {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--spacing-xs);

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

@media (max-width: 904px) {
    /* Keep stat-block as 3 columns on tablet - reduce gap */
    .stat-block {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--spacing-xs);

@media (max-width: 768px) {
    body.has-sidebar {
        padding-left: 0;

    .character-info {
        padding: var(--spacing-md);

    /* Tablet portrait: Keep 3 columns with smaller gap */
    .stat-block {
        grid-template-columns: repeat(3, 1fr);
        gap: calc(var(--spacing-xs) / 2);

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

    .name-input-group input[type="text"] {
        min-width: 100%;

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

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