/* ==================================================================
   TV 송출 모드 · 전체화면 버튼 · 모바일 설정창
   구 style.css 4372~4728줄
   ⚠️ 파일명 번호 = 로드 순서. 뒤 파일이 앞을 덮어쓰므로 순서를 바꾸면 화면이 깨진다.
   ================================================================== */
/* ========== TV 송출 모드 사이버펑크 스타일 ========== */

body.tv-mode {
    background: #03050a !important;
}

/* 배경 그리드 */
body.tv-mode::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image:
        linear-gradient(rgba(0,243,255,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,243,255,0.03) 1px, transparent 1px);
    background-size: 40px 40px;
    pointer-events: none;
    z-index: 0;
}

/* 스캔라인 */
body.tv-mode::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    background: repeating-linear-gradient(
        0deg, transparent, transparent 2px,
        rgba(0,0,0,0.07) 2px, rgba(0,0,0,0.07) 4px
    );
    z-index: 0;
    animation: admin-scan 10s linear infinite;
}

/* 타이머 헤더 */
body.tv-mode .timer-area {
    background: rgba(3,5,10,0.95) !important;
    border-bottom: 1px solid rgba(0,243,255,0.2) !important;
    padding: 10px 15px !important;
    backdrop-filter: blur(8px);
    position: relative;
    z-index: 10000;
}
body.tv-mode .timer-area::before {
    content: 'MARKET LIVE';
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    font-family: 'Orbitron', sans-serif;
    font-size: 0.52rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    color: rgba(0,243,255,0.3);
    pointer-events: none;
}
body.tv-mode .date-display {
    font-family: 'Orbitron', sans-serif !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: #e0f4ff !important;
    letter-spacing: 0.06em !important;
    text-shadow: 0 0 12px rgba(0,243,255,0.4) !important;
}
body.tv-mode .year-badge {
    background: rgba(255,184,0,0.15) !important;
    border: 1px solid rgba(255,184,0,0.5) !important;
    color: #ffb800 !important;
    padding: 3px 10px !important;
    border-radius: 0 !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    box-shadow: 0 0 10px rgba(255,184,0,0.2) !important;
}
body.tv-mode .timer-bar-container {
    background: rgba(0,0,0,0.5) !important;
    border: 1px solid rgba(0,243,255,0.15) !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    height: 6px !important;
}
body.tv-mode .timer-bar {
    height: 100%;
    background: linear-gradient(90deg, #00f3ff, #b026ff, #ff00aa, #ffb800) !important;
    background-size: 300% 100% !important;
    animation: neonGradient 3s ease infinite !important;
    box-shadow: 0 0 10px rgba(0,243,255,0.6) !important;
}

/* 주식 카드 */
body.tv-mode .stock-card {
    background: rgba(8,12,20,0.85) !important;
    border: 1px solid rgba(0,243,255,0.12) !important;
    border-top: 2px solid rgba(0,243,255,0.25) !important;
    border-radius: 0 !important;
    backdrop-filter: blur(4px);
}
body.tv-mode .stock-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        0deg, transparent, transparent 3px,
        rgba(0,243,255,0.008) 3px, rgba(0,243,255,0.008) 4px
    );
    pointer-events: none;
}
body.tv-mode .stock-card .stock-name  { color: rgba(255,255,255,0.82) !important; font-weight: 600 !important; }
body.tv-mode .stock-card .stock-price { color: #00f3ff !important; font-weight: 700 !important; text-shadow: 0 0 10px rgba(0,243,255,0.5) !important; }
body.tv-mode .stock-card .up          { color: #ff4d6d !important; text-shadow: 0 0 8px rgba(255,77,109,0.6) !important; font-weight: 700 !important; }
body.tv-mode .stock-card .down        { color: #4d9fff !important; text-shadow: 0 0 8px rgba(77,159,255,0.6) !important; font-weight: 700 !important; }

/* 차트 박스 */
body.tv-mode .chart-box {
    background: rgba(4,8,18,0.9) !important;
    border: 1px solid rgba(0,243,255,0.15) !important;
    border-top: 2px solid rgba(0,243,255,0.25) !important;
    border-radius: 0 !important;
    box-shadow: 0 0 30px rgba(0,243,255,0.05) !important;
}

/* 뉴스 티커 */
body.tv-mode .floating-footer {
    background: rgba(2,4,10,0.96) !important;
    backdrop-filter: blur(12px) !important;
    border-top: 1px solid rgba(0,243,255,0.18) !important;
}
body.tv-mode .news-ticker-container {
    background: rgba(0,243,255,0.03) !important;
    border-bottom: 1px solid rgba(0,243,255,0.1) !important;
    border-top: none !important;
}
body.tv-mode .ticker-label {
    background: transparent !important;
    border-right: 1px solid rgba(0,243,255,0.2) !important;
    color: #00f3ff !important;
    font-family: 'Orbitron', sans-serif !important;
    font-size: 0.62rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.15em !important;
    border-radius: 0 !important;
}
body.tv-mode .ticker-content {
    color: rgba(255,255,255,0.55) !important;
    font-size: 0.82rem !important;
}

/* [Mobile Optimization] Reduce Chart Area */
@media (max-width: 768px) {

    /* Restore Admin Global Chart to 200px (or keep default behavior effectively) */
    .chart-box {
        min-height: 200px !important;
        padding: 5px !important;
        flex-grow: 1 !important;
        height: auto !important;
    }

    /* Apply reduction ONLY to Viewer/Player Mode */
    .viewer-mode .chart-box {
        min-height: 50px !important;
        padding: 2px !important;
        flex-grow: 0 !important;
        height: 50px !important;
    }

    .status-board .stock-card {
        height: 65px !important;
        min-height: 65px !important;
        max-height: 65px !important;
        padding: 3px 2px !important;
    }

    .stock-number {
        width: 14px !important;
        height: 14px !important;
        font-size: 0.5rem !important;
    }
}

/* Player Selection Grid */
.player-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 10px;
}

.player-grid-btn {
    background: #333;
    border: 1px solid #555;
    padding: 8px;
    /* Reduced from 15px */
    border-radius: 5px;
    text-align: center;
    cursor: pointer;
    transition: 0.2s;
    /* min-height removed or reduced to avoid large buttons */
    font-size: 0.9rem;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 40px;
    /* Fixed compact height */
}

.player-grid-btn:hover {
    background: #444;
    border-color: #ffd700;
}

/* [Mobile Modal Fix] Ensure modals are above the fixed header */
.modal,
#ledger-modal,
#transfer-modal,
#stock-selection-modal,
#player-selection-modal,
#player-list-modal,
#player-detail-modal,
#transaction-history-modal {
    z-index: 100005 !important;
}

/* [Ledger Scroll Fix] Prevent modal from expanding endlessly */
#ledger-list,
#history-table-body {
    max-height: 50vh;
    /* Limit height to 50% of viewport */
    overflow-y: auto;
    /* Enable vertical scrolling */
    -webkit-overflow-scrolling: touch;
    /* Smooth scroll on mobile */
    border: 1px solid #444;
    /* Optional visual boundary */
    border-radius: 5px;
    padding: 5px;
}

/* === 전체화면 플로팅 버튼 === */
.fullscreen-btn {
    position: fixed;
    right: 20px;
    bottom: 100px;
    /* footer(~80px) + 여유 */
    width: 50px;
    height: 50px;
    background: rgba(255, 215, 0, 0.6);
    /* 반투명 골드 */
    border: 2px solid rgba(255, 215, 0, 0.8);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2500;
    /* NEWS바(1999)보다 높고 모달(3000)보다 낮게 */
    transition: all 0.3s ease;
    font-size: 1.5rem;
    color: #000;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.fullscreen-btn:hover {
    opacity: 1;
    background: rgba(255, 215, 0, 1);
    transform: scale(1.1);
}

.fullscreen-btn:active {
    transform: scale(0.95);
}

/* 홈 화면 앱(standalone)·이미 전체화면이면 버튼이 불필요 → 숨김 */
@media (display-mode: standalone), (display-mode: fullscreen) {
    .fullscreen-btn { display: none !important; }
}
/* iOS는 사파리가 진짜 전체화면을 지원하지 않아(주소창 숨김 불가) 버튼이 무의미 → 숨김 */
body.is-standalone .fullscreen-btn,
body.is-ios .fullscreen-btn { display: none !important; }

/* 모바일 환경: 버튼 위치 조정 (safe-area 고려) */
@media (max-width: 768px) {
    .fullscreen-btn {
        right: 15px;
        bottom: calc(100px + env(safe-area-inset-bottom));
        width: 45px;
        height: 45px;
        font-size: 1.3rem;
    }
}

/* 전체화면 모드일 때 버튼 아이콘 변경 (선택사항) */
body:fullscreen .fullscreen-btn::before,
body:-webkit-full-screen .fullscreen-btn::before,
body:-moz-full-screen .fullscreen-btn::before {
    content: "⤓";
    /* 전체화면 해제 아이콘 */
}

/* === 모바일 설정창 스타일 === */
@media (max-width: 768px) {

    /* 설정창 모바일 최적화 */
    #admin-modal .scenario-panel>div[style*="display:flex"][style*="flex-wrap:wrap"] {
        gap: 10px !important;
        row-gap: 10px !important;
    }

    /* 각 설정 항목을 균등하게 배치 (3개씩 1줄) */
    #admin-modal .scenario-panel>div[style*="display:flex"]>div {
        flex: 1 1 30% !important;
        min-width: 110px !important;
        justify-content: center !important;
    }

    /* 모드 선택을 별도 줄로 (width 100%) */
    #admin-modal .scenario-panel>div[style*="display:flex"]>div:last-child {
        flex: 1 1 100% !important;
        margin-left: 0 !important;
        border-left: none !important;
        border-top: 1px solid #555 !important;
        padding-left: 0 !important;
        padding-top: 10px !important;
        justify-content: center !important;
        gap: 15px !important;
    }

    /* 라벨 간격 확보로 줄바꿈 방지 */
    #admin-modal .scenario-panel label.radio-label {
        padding: 0 10px !important;
        white-space: nowrap !important;
    }

    /* 타이머, 종목, 라운드 아이콘과 라벨 크기 조정 */
    #admin-modal .scenario-panel span[style*="font-size:0.85rem"] {
        font-size: 1rem !important;
    }

    #admin-modal .scenario-panel span[style*="font-size:0.8rem"] {
        font-size: 0.75rem !important;
    }

    /* 버튼 터치 영역 확대 */
    #admin-modal .stock-control-btn {
        min-width: 32px !important;
        min-height: 32px !important;
        font-size: 1rem !important;
    }

    /* 라운드 숫자 표시 */
    #admin-modal #round-display-value {
        min-width: 32px !important;
        font-size: 1rem !important;
    }
}