/* ═══════════════════════════════════════════════════════════
   INFINITE CRAPS - LAYOUT STYLES
   Page structure, grid, containers, main sections
   ═══════════════════════════════════════════════════════════ */

/* ===== TICKER BAR AT TOP ===== */
.ticker-bar {
    width: 100%;
    height: 50px;
    background: linear-gradient(90deg, #0a0a0a 0%, #1a1a1a 50%, #0a0a0a 100%);
    border-bottom: 3px solid #ffd700;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.8);
    position: relative;
    z-index: 100;
    gap: 20px;
}

.ticker-section {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ticker-current-compact {
    flex: 0 0 auto;
    white-space: nowrap;
}

.ticker-history-expanded {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    overflow: hidden;
    min-width: 0;
}

.ticker-total-compact {
    flex: 0 0 auto;
    white-space: nowrap;
}

.ticker-total {
    flex: 0 0 auto;
}

/* ===== TAB BAR (Logo, Tagline, Tabs) ===== */
/* Header styles are in mobile.css */

.logo-section {
    display: flex;
    align-items: center;
    gap: 15px;
}

.logo {
    font-size: 32px;
    font-weight: 400;
    color: #ffd700;
    font-family: 'Anton', sans-serif;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
    letter-spacing: 2px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Feedback btn styles in mobile.css */

/* Tagline styles in mobile.css */

.tabs {
    display: flex;
    gap: 15px;
    align-items: center;
}

.tab {
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    color: rgba(200,195,170,0.8);
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 14px;
    font-weight: 500;
}

.tab:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.3);
}

.tab.active {
    background: rgba(255, 215, 0, 0.2);
    border-color: #ffd700;
    color: #ffd700;
}

/* ===== MAIN CONTAINER ===== */
.container {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* ═══════════════════════════════════════════════════════════
   CONTENT GRID (A/B/C/D/E sections)
   
   SECTION POINTERS:
     #sectionA = Row 1 left  (2/3 width) — DICE AREA
     #sectionB = Row 1 right (1/3 width)
     #sectionC = Row 2 left  (2/3 width)
     #sectionD = Row 2 right (1/3 width)
     #sectionE = Row 3       (full width)
   ═══════════════════════════════════════════════════════════ */
.content-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px;
    background: linear-gradient(135deg, #1a1410 0%, #0f0a08 100%);
    min-height: calc(100vh - 120px); /* fill below header/ticker */
}

.content-row {
    display: flex;
    gap: 12px;
}

/* Row 1 (A+B): tallest — dice area needs space */
.content-row:nth-child(1) {
    flex: 5;
    min-height: 450px;
}

/* Row 2 (C+D): medium */
.content-row:nth-child(2) {
    flex: 3;
    min-height: 300px;
}

/* Row 3 (E): shorter */
.content-row:nth-child(3) {
    flex: 2;
    min-height: 200px;
}

.content-panel {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(139, 115, 85, 0.3);
    border-radius: 8px;
    padding: 20px;
}

/* 2/3 width panels (A, C) */
.content-panel--wide {
    flex: 2;
}

/* 1/3 width panels (B, D) */
.content-panel--narrow {
    flex: 1;
}

/* Full width panel (E) */
.content-panel--full {
    flex: 1;
    width: 100%;
}

/* Placeholder labels for layout scaffolding */
.section-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-size: 48px;
    font-weight: 700;
    color: rgba(255, 215, 0, 0.15);
    font-family: 'Roboto', sans-serif;
    letter-spacing: 4px;
    user-select: none;
}

/* Dice area = Section A (sized by row flex + content-panel--wide) */
.dice-area {
    height: auto;
    background: 
        radial-gradient(ellipse at 30% 40%, rgba(15, 60, 15, 0.3) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 60%, rgba(10, 50, 10, 0.2) 0%, transparent 50%),
        linear-gradient(135deg, #0a3d0a 0%, #082d08 50%, #061f06 100%);
    border: 3px solid #4a3820;
    border-radius: 8px;
    position: relative;
    box-shadow: 
        inset 0 0 40px rgba(0,0,0,0.6),
        inset 0 4px 8px rgba(0,0,0,0.4),
        0 4px 15px rgba(0,0,0,0.7);
    overflow: hidden;
    perspective: 900px;
    perspective-origin: 50% 50%;
    padding-bottom: 80px;
}