// Optimize Card component performance
// Optimize Card component for performance. Reduce reflows, optimize animations, minimize DOM manipulation.

// Optimize Card component performance
// Optimize Card component for performance. Reduce reflows, optimize animations, minimize DOM manipulation.

// Optimize Card component performance
// Optimize Card component for performance. Reduce reflows, optimize animations, minimize DOM manipulation.
/* TODO: Review box-shadow values - consider using design system shadow variables (--shadow-xs, --shadow-sm, etc.) */
/**
 * Layout Component Styles
 * Main containers, header, sections
 */

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

/* === 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;

/**
 * Mobile Improvements
 * Review and improve Card component for responsive design. Test on mobile, tablet, and desktop. Ensure touch targets are adequate.
 */

/**
 * Improve Card component accessibility
 * Enhance Card component for accessibility. Add ARIA labels, keyboard navigation, focus indicators, and screen reader support.
 */

/**
 * Layout Structure Improvements
 * Review the .warden-header CSS class in public/css/components/layout.css. Ensure it uses design system variables, aligns to 8px grid, and follows best practices.
 */

/**
 * Improve Card component accessibility
 * Enhance Card component for accessibility. Add ARIA labels, keyboard navigation, focus indicators, and screen reader support.
 */

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