| |
|
| | navbar_css = """ |
| | /* Hide Gradio's default navigation */ |
| | .nav-holder { |
| | display: none !important; |
| | } |
| | |
| | /* Custom Navigation Bar */ |
| | .custom-navbar { |
| | background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
| | padding: 1rem 2rem; |
| | display: flex; |
| | justify-content: space-between; |
| | align-items: center; |
| | box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); |
| | border-bottom: 3px solid #5a67d8; |
| | position: sticky; |
| | top: 0; |
| | z-index: 1000; |
| | width: 100%; |
| | box-sizing: border-box; |
| | } |
| | |
| | /* Title styling */ |
| | .custom-navbar .navbar-title { |
| | font-size: 1.8rem; |
| | font-weight: bold; |
| | color: white; |
| | text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); |
| | letter-spacing: 0.5px; |
| | display: flex; |
| | align-items: center; |
| | } |
| | |
| | /* Navigation links container */ |
| | .custom-navbar .navbar-links { |
| | display: flex; |
| | gap: 0.5rem; |
| | align-items: center; |
| | } |
| | |
| | /* Navigation links */ |
| | .custom-navbar .nav-link { |
| | background: rgba(255, 255, 255, 0.1); |
| | color: white !important; |
| | border: 2px solid transparent; |
| | border-radius: 8px; |
| | padding: 0.6rem 1.5rem; |
| | font-weight: 600; |
| | font-size: 1rem; |
| | transition: all 0.3s ease; |
| | text-transform: uppercase; |
| | letter-spacing: 1px; |
| | text-decoration: none !important; |
| | cursor: pointer; |
| | } |
| | |
| | /* Navigation link hover effect */ |
| | .custom-navbar .nav-link:hover { |
| | background: rgba(255, 255, 255, 0.2); |
| | border-color: rgba(255, 255, 255, 0.5); |
| | transform: translateY(-2px); |
| | box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); |
| | } |
| | |
| | /* Active navigation link */ |
| | .custom-navbar .nav-link.active { |
| | background: white; |
| | color: #667eea !important; |
| | border-color: white; |
| | box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); |
| | } |
| | |
| | /* Active link hover */ |
| | .custom-navbar .nav-link.active:hover { |
| | background: white; |
| | color: #5a67d8 !important; |
| | transform: translateY(-2px); |
| | } |
| | |
| | nav.tabs button { |
| | background: rgba(255, 255, 255, 0.1) !important; |
| | color: white !important; |
| | border: 2px solid transparent !important; |
| | border-radius: 8px !important; |
| | padding: 0.5rem 1.5rem !important; |
| | margin: 0 0.25rem !important; |
| | font-weight: 600 !important; |
| | font-size: 1rem !important; |
| | transition: all 0.3s ease !important; |
| | text-transform: uppercase; |
| | letter-spacing: 1px; |
| | } |
| | |
| | nav.tabs button:hover { |
| | background: rgba(255, 255, 255, 0.2) !important; |
| | border-color: rgba(255, 255, 255, 0.5) !important; |
| | transform: translateY(-2px); |
| | box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); |
| | } |
| | |
| | nav.tabs button.selected { |
| | background: white !important; |
| | color: #667eea !important; |
| | border-color: white !important; |
| | box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); |
| | } |
| | |
| | nav.tabs button.selected:hover { |
| | background: white !important; |
| | color: #5a67d8 !important; |
| | transform: translateY(-2px); |
| | } |
| | |
| | .gradio-container { |
| | margin-top: 0 !important; |
| | } |
| | |
| | [data-tab-id="home_id_tab"], |
| | [data-tab-id="how_to_play_id_tab"], |
| | [data-tab-id="play_id_tab"], |
| | [data-tab-id="stats_id_tab"] { |
| | display: none !important; |
| | } |
| | |
| | |
| | #game_board_description{ |
| | flex-grow: 0 !important; |
| | } |
| | |
| | |
| | @media (max-width: 768px) { |
| | nav.tabs { |
| | padding: 0.5rem 1rem !important; |
| | flex-wrap: wrap; |
| | } |
| | |
| | .navbar-title { |
| | font-size: 1.2rem; |
| | margin-right: 1rem; |
| | padding-right: 1rem; |
| | width: 100%; |
| | border-right: none; |
| | border-bottom: 2px solid rgba(255, 255, 255, 0.3); |
| | padding-bottom: 0.5rem; |
| | margin-bottom: 0.5rem; |
| | } |
| | |
| | nav.tabs button { |
| | padding: 0.4rem 1rem !important; |
| | font-size: 0.9rem !important; |
| | margin: 0.2rem !important; |
| | } |
| | } |
| | """ |
| |
|
| | stats_css = """ |
| | |
| | #stats_container{ |
| | margin-left: 1%; |
| | margin-right: 1%; |
| | width: 98%; |
| | } |
| | |
| | #stats_tabs{ |
| | margin-left: 1%; |
| | margin-right: 1%; |
| | width: 98%; |
| | } |
| | |
| | .title_row { |
| | margin-left: 1% !important; |
| | margin-right: 1% !important; |
| | width: 98% !important; |
| | display: flex !important; |
| | align-items: center !important; |
| | gap: 15px !important; |
| | flex-wrap: nowrap !important; |
| | } |
| | |
| | .title_row > * { |
| | width: auto !important; |
| | flex-grow: 0 !important; |
| | flex-shrink: 0 !important; |
| | } |
| | |
| | .refresh_btn { |
| | height: 36px !important; |
| | min-height: 36px !important; |
| | max-height: 36px !important; |
| | padding: 6px 14px !important; |
| | font-size: 13px !important; |
| | width: auto !important; |
| | min-width: fit-content !important; |
| | display: none; |
| | } |
| | |
| | .custom-refresh-btn { |
| | height: 36px; |
| | padding: 6px 14px; |
| | font-size: 13px; |
| | background: linear-gradient(to bottom right, #3b82f6, #1d4ed8); |
| | color: white; |
| | border: none; |
| | border-radius: 6px; |
| | cursor: pointer; |
| | font-weight: 500; |
| | transition: all 0.2s; |
| | } |
| | |
| | .custom-refresh-btn:hover { |
| | background: linear-gradient(to bottom right, #2563eb, #1e40af); |
| | transform: translateY(-1px); |
| | box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); |
| | } |
| | |
| | .played-games-container { |
| | display: flex; |
| | align-items: center; |
| | justify-content: center; |
| | gap: 15px; |
| | padding: 20px 30px; |
| | background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
| | border-radius: 12px; |
| | box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); |
| | margin: 20px 1%; |
| | width: 98%; |
| | } |
| | |
| | .played-games-label { |
| | font-size: 40px; |
| | font-weight: 600; |
| | color: white; |
| | letter-spacing: 0.5px; |
| | } |
| | |
| | .played-games-count { |
| | font-size: 32px; |
| | font-weight: bold; |
| | color: white; |
| | background: rgba(255, 255, 255, 0.2); |
| | padding: 8px 20px; |
| | border-radius: 8px; |
| | min-width: 60px; |
| | text-align: center; |
| | } |
| | |
| | .stats-card { |
| | display: flex; |
| | align-items: center; |
| | gap: 20px; |
| | padding: 12px 15px; |
| | background: #2a2e37 !important; |
| | border-radius: 12px; |
| | box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08); |
| | width: 98%; |
| | transition: transform 0.2s ease, box-shadow 0.2s ease; |
| | margin-left: 1%; |
| | margin-right: 1%; |
| | } |
| | |
| | .stats-card:hover { |
| | transform: translateY(-2px); |
| | box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15), 0 4px 8px rgba(0, 0, 0, 0.1); |
| | } |
| | |
| | .stats-icon { |
| | font-size: 48px; |
| | background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
| | width: 80px; |
| | height: 80px; |
| | border-radius: 12px; |
| | display: flex; |
| | align-items: center; |
| | justify-content: center; |
| | box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3); |
| | } |
| | |
| | .stats-content { |
| | flex: 1; |
| | } |
| | |
| | .stats-label { |
| | font-size: 14px; |
| | color: white; |
| | font-weight: 500; |
| | text-transform: uppercase; |
| | letter-spacing: 0.5px; |
| | margin-bottom: 4px; |
| | } |
| | |
| | .stats-value { |
| | font-size: 36px; |
| | font-weight: bold; |
| | color: white; |
| | } |
| | |
| | .model_stats_tab{ |
| | margin-left: 1%; |
| | margin-right: 1%; |
| | width: 98%; |
| | box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08); |
| | transition: transform 0.2s ease, box-shadow 0.2s ease; |
| | } |
| | |
| | .grouped_stats_tab{ |
| | margin-left: 1%; |
| | margin-right: 1%; |
| | width: 98%; |
| | box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08); |
| | transition: transform 0.2s ease, box-shadow 0.2s ease; |
| | } |
| | |
| | .stats_title, .stats_table{ |
| | margin-left: 1%; |
| | margin-right: 1%; |
| | margin-top: 1%; |
| | } |
| | |
| | .stats_table{ |
| | width:98%; |
| | } |
| | |
| | .game-history-card { |
| | background: #2a2e37 !important; |
| | border-radius: 12px; |
| | padding: 24px; |
| | margin-bottom: 32px; |
| | box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08); |
| | transition: transform 0.2s ease, box-shadow 0.2s ease; |
| | } |
| | |
| | .game-history-card:hover { |
| | transform: translateY(-2px); |
| | box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15), 0 4px 8px rgba(0, 0, 0, 0.1); |
| | } |
| | |
| | .game-header { |
| | display: flex; |
| | justify-content: space-between; |
| | align-items: center; |
| | margin-bottom: 20px; |
| | padding-bottom: 16px; |
| | border-bottom: 2px solid #e9ecef; |
| | } |
| | |
| | .game-info { |
| | display: flex; |
| | gap: 20px; |
| | align-items: center; |
| | } |
| | |
| | .game-number { |
| | font-size: 20px; |
| | font-weight: bold; |
| | color: white; |
| | } |
| | |
| | .game-date { |
| | font-size: 14px; |
| | color: #A1B2C1; |
| | } |
| | |
| | .game-result { |
| | font-size: 16px; |
| | font-weight: bold; |
| | padding: 8px 20px; |
| | border-radius: 8px; |
| | display: flex; |
| | align-items: center; |
| | gap: 8px; |
| | color: white; |
| | } |
| | |
| | .result-red { |
| | background: linear-gradient(135deg, #dc3545 0%, #c82333 100%); |
| | } |
| | |
| | .result-blue { |
| | background: linear-gradient(135deg, #0d6efd 0%, #0b5ed7 100%); |
| | } |
| | |
| | .result-killer { |
| | background: linear-gradient(135deg, #6c757d 0%, #495057 100%); |
| | } |
| | |
| | .winner-badge { |
| | margin-top: 8px; |
| | padding: 6px 12px; |
| | background: rgba(255, 255, 255, 0.3); |
| | border: 2px solid rgba(255, 255, 255, 0.6); |
| | border-radius: 6px; |
| | font-size: 12px; |
| | font-weight: bold; |
| | letter-spacing: 0.5px; |
| | text-align: center; |
| | } |
| | |
| | .team-score { |
| | padding: 12px 16px; |
| | text-align: center; |
| | font-size: 14px; |
| | font-weight: bold; |
| | display: flex; |
| | justify-content: center; |
| | align-items: center; |
| | gap: 8px; |
| | border-bottom: 1px solid #e9ecef; |
| | } |
| | |
| | .score-winner { |
| | background: #d4edda; |
| | color: #155724; |
| | } |
| | |
| | .score-loser { |
| | background: #f8d7da; |
| | color: #721c24; |
| | } |
| | |
| | .score-label { |
| | font-size: 12px; |
| | opacity: 0.8; |
| | color: black; |
| | } |
| | |
| | .score-value { |
| | font-size: 20px; |
| | color: black; |
| | } |
| | |
| | @media (max-width: 1200px) { |
| | .teams-container { |
| | flex-direction: column; |
| | gap: 16px; |
| | } |
| | |
| | .vs-divider { |
| | min-width: auto; |
| | padding: 10px 0; |
| | } |
| | |
| | .vs-text { |
| | font-size: 24px; |
| | } |
| | } |
| | """ |
| |
|
| | css = """ |
| | /* ==================== COMPACT HEADER ==================== */ |
| | |
| | :root { |
| | color-scheme: dark !important; |
| | } |
| | |
| | .gradio-container { |
| | color-scheme: dark !important; |
| | } |
| | |
| | .app.svelte-18evea3.svelte-18evea3{ |
| | padding: 0.5rem; |
| | } |
| | |
| | /* Adjust container below navbar */ |
| | .gradio-container { |
| | margin-top: 0 !important; |
| | } |
| | |
| | #main_header_container { |
| | margin: 0 0 30px 0; |
| | margin-bottom: 0 |
| | } |
| | |
| | .header-content { |
| | text-align: center; |
| | padding: 0px !important; |
| | background: transparent; |
| | position: relative; |
| | } |
| | |
| | .header-icon { |
| | font-size: 3.5em; |
| | margin-bottom: 10px; |
| | filter: drop-shadow(0 4px 12px rgba(102, 126, 234, 0.3)); |
| | } |
| | |
| | .header-content h1 { |
| | margin: 0; |
| | font-size: 2.2em; |
| | background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
| | -webkit-background-clip: text; |
| | -webkit-text-fill-color: transparent; |
| | background-clip: text; |
| | font-weight: 800; |
| | letter-spacing: -0.5px; |
| | } |
| | |
| | .header-subtitle { |
| | margin: 8px 0 0 0; |
| | font-size: 1em; |
| | color: #6c757d; |
| | font-weight: 400; |
| | } |
| | |
| | /* ==================== CAROUSEL RULES SECTION ==================== */ |
| | |
| | #row_description { |
| | display: flex !important; |
| | gap: 1%; |
| | margin-left: 1%; |
| | margin-right: 1%; |
| | } |
| | |
| | #app_description { |
| | flex: 0 0 64% !important; |
| | width: 64% !important; |
| | max-width: 64% !important; |
| | padding: 1%; |
| | } |
| | |
| | #rules_accordion { |
| | flex: 0 0 33% !important; |
| | width: 33% !important; |
| | max-width: 33% !important; |
| | } |
| | |
| | #rules_accordion, |
| | #app_description { |
| | border: none; |
| | border-radius: 12px; |
| | background: #2a2e37; |
| | box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); |
| | overflow: hidden; |
| | padding-top: 0.5% !important; |
| | max-height: 78vh; |
| | } |
| | |
| | |
| | .rules-content { |
| | padding: 20px; |
| | padding-top: 0px !important; |
| | background: #2a2e37; |
| | } |
| | |
| | .rules-intro { |
| | text-align: center; |
| | margin-bottom: 20px; |
| | padding: 16px; |
| | background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%); |
| | border-radius: 10px; |
| | border: 2px solid rgba(102, 126, 234, 0.2); |
| | } |
| | |
| | .rules-intro-icon { |
| | font-size: 1.8em; |
| | margin-bottom: 8px; |
| | } |
| | |
| | .rules-intro h2 { |
| | margin: 0 0 8px 0; |
| | font-size: 1.4em; |
| | color: #667eea; |
| | font-weight: 700; |
| | } |
| | |
| | .rules-intro-text { |
| | font-size: 0.9em; |
| | color: #495057; |
| | line-height: 1.4; |
| | margin: 0; |
| | } |
| | |
| | /* Carousel Container - More Compact */ |
| | .rules-carousel-container { |
| | position: relative; |
| | padding: 0 50px; |
| | margin-bottom: 16px; |
| | max-width: 500px; |
| | margin-left: auto; |
| | margin-right: auto; |
| | } |
| | |
| | .rules-carousel { |
| | overflow: hidden; |
| | position: relative; |
| | } |
| | |
| | .rules-carousel-track { |
| | display: flex; |
| | transition: transform 0.4s ease-in-out; |
| | } |
| | |
| | .rule-card { |
| | min-width: 100%; |
| | background: #f5f5dc !important; |
| | border-radius: 12px; |
| | padding: 20px; |
| | box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08); |
| | border: 2px solid transparent; |
| | box-sizing: border-box; |
| | min-height: 320px; |
| | max-height: 450px; |
| | overflow-y: auto; |
| | } |
| | |
| | .rule-card-objective { |
| | border-color: rgba(255, 193, 7, 0.3); |
| | } |
| | |
| | .rule-card-teams { |
| | border-color: rgba(102, 126, 234, 0.3); |
| | } |
| | |
| | .rule-card-setup { |
| | border-color: rgba(23, 162, 184, 0.3); |
| | } |
| | |
| | .rule-card-gameplay { |
| | border-color: rgba(118, 75, 162, 0.3); |
| | } |
| | |
| | .rule-card-winning { |
| | border-color: rgba(40, 167, 69, 0.3); |
| | } |
| | |
| | .rule-card-tips { |
| | border-color: rgba(255, 152, 0, 0.3); |
| | } |
| | |
| | /* Carousel Navigation Buttons - Smaller */ |
| | .carousel-btn { |
| | position: absolute; |
| | top: 50%; |
| | transform: translateY(-50%); |
| | width: 36px; |
| | height: 36px; |
| | background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
| | border: none; |
| | border-radius: 50%; |
| | color: white; |
| | font-size: 18px; |
| | cursor: pointer; |
| | display: flex; |
| | align-items: center; |
| | justify-content: center; |
| | box-shadow: 0 2px 8px rgba(102, 126, 234, 0.4); |
| | transition: all 0.3s ease; |
| | z-index: 10; |
| | } |
| | |
| | .carousel-btn:hover { |
| | transform: translateY(-50%) scale(1.1); |
| | box-shadow: 0 4px 12px rgba(102, 126, 234, 0.6); |
| | } |
| | |
| | .carousel-btn:active { |
| | transform: translateY(-50%) scale(0.95); |
| | } |
| | |
| | .carousel-btn-prev { |
| | left: 5px; |
| | } |
| | |
| | .carousel-btn-next { |
| | right: 5px; |
| | } |
| | |
| | .carousel-btn:disabled { |
| | background: #ccc; |
| | cursor: not-allowed; |
| | box-shadow: none; |
| | } |
| | |
| | .carousel-btn:disabled:hover { |
| | transform: translateY(-50%) scale(1); |
| | } |
| | |
| | /* Carousel Indicators - Smaller */ |
| | .carousel-indicators { |
| | display: flex; |
| | justify-content: center; |
| | gap: 6px; |
| | margin-top: 12px; |
| | } |
| | |
| | .carousel-indicator { |
| | width: 8px; |
| | height: 8px; |
| | border-radius: 50%; |
| | background: #d0d0d0; |
| | border: none; |
| | cursor: pointer; |
| | transition: all 0.3s ease; |
| | } |
| | |
| | .carousel-indicator.active { |
| | background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
| | width: 20px; |
| | border-radius: 4px; |
| | } |
| | |
| | .rule-card-header { |
| | display: flex; |
| | align-items: center; |
| | gap: 10px; |
| | margin-bottom: 16px; |
| | padding-bottom: 12px; |
| | border-bottom: 2px solid rgba(0, 0, 0, 0.08); |
| | |
| | } |
| | |
| | .rule-icon { |
| | font-size: 1.5em; |
| | display: flex; |
| | align-items: center; |
| | justify-content: center; |
| | } |
| | |
| | .rule-card-header h3 { |
| | margin: 0; |
| | font-size: x-large; |
| | color: black; |
| | font-weight: 700; |
| | } |
| | |
| | .rule-card p { |
| | color: black; |
| | line-height: 1.5; |
| | margin: 0; |
| | font-size: 1.1em; |
| | } |
| | |
| | .message_content p { |
| | color: black !important; |
| | } |
| | |
| | strong { |
| | font-weight: bolder; |
| | color: #909055 !important; |
| | } |
| | |
| | .rule-list { |
| | display: flex; |
| | flex-direction: column; |
| | gap: 12px; |
| | } |
| | |
| | .rule-item { |
| | color: #495057; |
| | line-height: 1.5; |
| | padding: 10px; |
| | background: rgba(248, 249, 250, 0.5); |
| | border-radius: 6px; |
| | border-left: 3px solid #dee2e6; |
| | font-size: 1.1em; |
| | } |
| | |
| | .rule-item strong { |
| | color: #212529; |
| | font-weight: 600; |
| | } |
| | |
| | .role-list { |
| | list-style: none; |
| | padding: 8px 0 0 0; |
| | margin: 0; |
| | display: flex; |
| | flex-direction: column; |
| | gap: 8px; |
| | } |
| | |
| | .role-list li { |
| | padding: 6px 10px; |
| | background: white; |
| | border-radius: 5px; |
| | border-left: 3px solid #6c757d; |
| | font-size: 0.85em; |
| | color: black; |
| | } |
| | |
| | .role-highlight { |
| | padding: 2px 6px; |
| | border-radius: 4px; |
| | font-weight: 600; |
| | font-size: 0.9em; |
| | } |
| | |
| | .boss-highlight { |
| | background: rgba(255, 193, 7, 0.2); |
| | color: #856404; |
| | } |
| | |
| | .captain-highlight { |
| | background: rgba(23, 162, 184, 0.2); |
| | color: #0c5460; |
| | } |
| | |
| | .player-highlight { |
| | background: rgba(108, 117, 125, 0.2); |
| | color: #383d41; |
| | } |
| | |
| | .word-distribution { |
| | display: flex; |
| | flex-direction: column; |
| | gap: 8px; |
| | margin-top: 10px; |
| | } |
| | |
| | .distribution-item { |
| | padding: 8px 12px; |
| | border-radius: 6px; |
| | font-size: 1.1em; |
| | border-left: 3px solid; |
| | color: black; |
| | } |
| | |
| | .team-color-red { |
| | background: linear-gradient(to right, rgba(220, 53, 69, 0.1), rgba(13, 110, 253, 0.1)); |
| | border-left-color: rgb(255 0 0); |
| | } |
| | |
| | .team-color-blue { |
| | background: linear-gradient(to right, rgba(220, 53, 69, 0.1), rgba(13, 110, 253, 0.1)); |
| | border-left-color: #667eea; |
| | } |
| | |
| | .neutral-color { |
| | background: rgba(248, 249, 250, 0.8); |
| | border-left-color: #adb5bd; |
| | } |
| | |
| | .killer-color { |
| | background: rgba(33, 37, 41, 0.1); |
| | border-left-color: #212529; |
| | } |
| | |
| | .gameplay-steps { |
| | list-style: none; |
| | padding: 0; |
| | margin: 0; |
| | counter-reset: step-counter; |
| | display: flex; |
| | flex-direction: column; |
| | gap: 10px; |
| | } |
| | |
| | .gameplay-steps li { |
| | counter-increment: step-counter; |
| | position: relative; |
| | padding: 10px 10px 10px 42px; |
| | background: rgba(248, 249, 250, 0.5); |
| | border-radius: 6px; |
| | line-height: 1.5; |
| | color: #495057; |
| | font-size: 1.1em; |
| | } |
| | |
| | .gameplay-steps li::before { |
| | content: counter(step-counter); |
| | position: absolute; |
| | left: 10px; |
| | top: 10px; |
| | width: 26px; |
| | height: 26px; |
| | background: linear-gradient(135deg, #667eea, #764ba2); |
| | color: white; |
| | border-radius: 50%; |
| | display: flex; |
| | align-items: center; |
| | justify-content: center; |
| | font-weight: 700; |
| | font-size: 0.85em; |
| | } |
| | |
| | .gameplay-steps li strong { |
| | color: #212529; |
| | font-weight: 600; |
| | } |
| | |
| | .reveal-outcomes { |
| | margin-top: 8px; |
| | display: flex; |
| | flex-direction: column; |
| | gap: 6px; |
| | } |
| | |
| | .outcome-item { |
| | padding: 6px 10px; |
| | border-radius: 5px; |
| | font-size: 0.8em; |
| | border-left: 3px solid; |
| | color: black !important; |
| | } |
| | |
| | .outcome-item.success { |
| | background: rgba(40, 167, 69, 0.1); |
| | border-left-color: #28a745; |
| | } |
| | |
| | .outcome-item.opponent { |
| | background: rgba(220, 53, 69, 0.1); |
| | border-left-color: #dc3545; |
| | } |
| | |
| | .outcome-item.neutral { |
| | background: rgba(248, 249, 250, 0.8); |
| | border-left-color: #adb5bd; |
| | } |
| | |
| | .outcome-item.killer { |
| | background: rgba(33, 37, 41, 0.1); |
| | border-left-color: #212529; |
| | } |
| | |
| | .success-item { |
| | border-left-color: #28a745 !important; |
| | background: rgba(40, 167, 69, 0.05) !important; |
| | } |
| | |
| | .danger-item { |
| | border-left-color: #dc3545 !important; |
| | background: rgba(220, 53, 69, 0.05) !important; |
| | } |
| | |
| | .tip-item { |
| | border-left-color: #ffc107 !important; |
| | background: rgba(255, 193, 7, 0.05) !important; |
| | } |
| | |
| | .tips-list { |
| | list-style: none; |
| | padding: 0; |
| | margin: 0; |
| | display: flex; |
| | flex-direction: column; |
| | gap: 10px; |
| | } |
| | |
| | .tips-list li { |
| | padding: 10px 12px 10px 36px; |
| | background: rgba(255, 152, 0, 0.05); |
| | border-radius: 6px; |
| | position: relative; |
| | line-height: 1.5; |
| | color: #495057; |
| | border-left: 3px solid rgba(255, 152, 0, 0.4); |
| | font-size: 1.1em; |
| | } |
| | |
| | .tips-list li::before { |
| | content: '💡'; |
| | position: absolute; |
| | left: 10px; |
| | top: 10px; |
| | font-size: 1em; |
| | } |
| | |
| | .rules-footer { |
| | text-align: center; |
| | padding: 14px; |
| | background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%); |
| | border-radius: 10px; |
| | margin-top: 16px; |
| | } |
| | |
| | .rules-footer p { |
| | margin: 0; |
| | font-size: 1em; |
| | font-weight: 600; |
| | color: #667eea; |
| | } |
| | |
| | /* ==================== MAIN LAYOUT ==================== */ |
| | |
| | /* Start Game Button */ |
| | #start_game_btn { |
| | width: 100%; |
| | max-width: 500px; |
| | margin: 0 auto 30px auto; |
| | display: block; |
| | padding: 16px 32px !important; |
| | font-size: 1.2em !important; |
| | font-weight: bold !important; |
| | background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important; |
| | border: none !important; |
| | border-radius: 12px !important; |
| | box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4) !important; |
| | transition: all 0.3s ease !important; |
| | cursor: pointer; |
| | } |
| | |
| | #start_game_btn:hover { |
| | transform: translateY(-3px) !important; |
| | box-shadow: 0 10px 30px rgba(102, 126, 234, 0.6) !important; |
| | } |
| | |
| | #start_game_btn:active { |
| | transform: translateY(-1px) !important; |
| | } |
| | |
| | #new_game_btn, #send_message_btn { |
| | width: auto !important; |
| | display: block !important; |
| | margin: 0 auto !important; |
| | padding: 12px 24px !important; |
| | font-size: 1em !important; |
| | font-weight: 600 !important; |
| | color: white !important; |
| | border: 2px solid rgba(255, 255, 255, 0.2) !important; |
| | border-radius: 8px !important; |
| | box-shadow: 0 3px 10px rgba(75, 85, 99, 0.3) !important; |
| | transition: all 0.3s ease !important; |
| | cursor: pointer; |
| | } |
| | |
| | #new_game_btn{ |
| | background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%) !important; |
| | } |
| | |
| | #send_message_btn{ |
| | flex-grow: 0 !important; |
| | background: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%) !important; |
| | } |
| | |
| | #new_game_btn:hover, #send_message_btn:hover { |
| | transform: translateY(-2px) !important; |
| | box-shadow: 0 6px 15px rgba(75, 85, 99, 0.4) !important; |
| | } |
| | |
| | #new_game_btn:hover{ |
| | background: linear-gradient(135deg, #4b5563 0%, #374151 100%) !important; |
| | } |
| | |
| | #send_message_btn:hover { |
| | background: linear-gradient(315deg, #f59e0b 0%, #ef4444 100%) !important; |
| | } |
| | |
| | #new_game_btn:active, #send_message_btn:active { |
| | transform: translateY(0px) !important; |
| | } |
| | |
| | /* Boss Control Section */ |
| | #boss_control_row { |
| | margin: 16px 0; |
| | padding: 16px; |
| | background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%); |
| | border-radius: 12px; |
| | border: 1px solid rgba(102, 126, 234, 0.2); |
| | display: none; |
| | } |
| | |
| | #boss_control_row h3 { |
| | margin: 0 0 12px 0; |
| | color: #667eea; |
| | font-size: 16px; |
| | font-weight: 600; |
| | } |
| | |
| | /* Boss Input Sections */ |
| | .play-as-boss-btn { |
| | background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
| | color: white; |
| | border: none; |
| | padding: 8px 16px; |
| | border-radius: 8px; |
| | font-size: 13px; |
| | font-weight: 600; |
| | cursor: pointer; |
| | transition: all 0.3s ease; |
| | box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3); |
| | margin-left: auto; |
| | white-space: nowrap; |
| | } |
| | |
| | .play-as-boss-btn:hover { |
| | background: linear-gradient(135deg, #764ba2 0%, #667eea 100%); |
| | transform: translateY(-2px); |
| | box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4); |
| | } |
| | |
| | .play-as-boss-btn:active { |
| | transform: translateY(0); |
| | } |
| | |
| | #error_red_display, #error_blue_display { |
| | background: none; |
| | color: black; |
| | } |
| | |
| | /* Boss Name Input Menu */ |
| | .boss-name-input-menu { |
| | margin-top: 16px; |
| | padding: 20px; |
| | background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%); |
| | border-radius: 12px; |
| | border: 2px solid rgba(102, 126, 234, 0.3); |
| | animation: slideDown 0.3s ease; |
| | } |
| | |
| | .boss-name-input-content h4 { |
| | margin: 0 0 12px 0; |
| | color: #667eea; |
| | font-size: 16px; |
| | font-weight: 600; |
| | } |
| | |
| | .boss-name-input { |
| | width: 100%; |
| | padding: 12px; |
| | border: 2px solid #e0e7ff; |
| | border-radius: 8px; |
| | font-size: 14px; |
| | margin-bottom: 12px; |
| | transition: border-color 0.3s ease; |
| | box-sizing: border-box; |
| | } |
| | |
| | .boss-name-input:focus { |
| | outline: none; |
| | border-color: #667eea; |
| | box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1); |
| | } |
| | |
| | .boss-name-buttons { |
| | display: flex; |
| | gap: 8px; |
| | } |
| | |
| | #red_boss_input, #blue_boss_input { |
| | margin-left: 1%; |
| | margin-right: 1%; |
| | width: 98%; |
| | padding: 20px; |
| | background: linear-gradient(135deg, rgba(239, 68, 68, 0.05) 0%, rgba(220, 38, 38, 0.05) 100%); |
| | border-radius: 12px; |
| | border: 2px solid rgba(239, 68, 68, 0.3); |
| | animation: slideDown 0.3s ease; |
| | } |
| | |
| | #blue_boss_input { |
| | background: linear-gradient(135deg, rgba(59, 130, 246, 0.05) 0%, rgba(37, 99, 235, 0.05) 100%); |
| | border-color: rgba(59, 130, 246, 0.3); |
| | } |
| | |
| | @keyframes slideDown { |
| | from { |
| | opacity: 0; |
| | transform: translateY(-10px); |
| | } |
| | to { |
| | opacity: 1; |
| | transform: translateY(0); |
| | } |
| | } |
| | |
| | #red_boss_input h4, #blue_boss_input h4 { |
| | margin: 0 0 12px 0; |
| | font-size: 15px; |
| | font-weight: 600; |
| | } |
| | |
| | #red_boss_input h4 { |
| | color: #dc2626; |
| | } |
| | |
| | #blue_boss_input h4 { |
| | color: #2563eb; |
| | } |
| | |
| | /* Human Player Indicator */ |
| | .human-indicator { |
| | display: inline-block; |
| | background: linear-gradient(135deg, #10b981 0%, #059669 100%); |
| | color: white; |
| | padding: 4px 10px; |
| | border-radius: 12px; |
| | font-size: 11px; |
| | font-weight: 600; |
| | margin-left: 8px; |
| | box-shadow: 0 2px 4px rgba(16, 185, 129, 0.3); |
| | } |
| | |
| | /* Player row updates */ |
| | .player-row { |
| | display: flex; |
| | align-items: center; |
| | padding: 12px; |
| | background: rgba(255, 255, 255, 0.5); |
| | border-radius: 8px; |
| | margin-bottom: 8px; |
| | transition: all 0.2s ease; |
| | gap: 12px; |
| | } |
| | |
| | .player-row:hover { |
| | background: rgba(255, 255, 255, 0.8); |
| | transform: translateX(4px); |
| | } |
| | |
| | .player-details { |
| | flex: 1; |
| | min-width: 0; |
| | } |
| | |
| | .player-meta { |
| | display: flex; |
| | align-items: center; |
| | flex-wrap: wrap; |
| | gap: 6px; |
| | margin-top: 4px; |
| | } |
| | |
| | /* Game Content Area */ |
| | #game_content { |
| | animation: fadeIn 0.5s ease-in; |
| | } |
| | |
| | @keyframes fadeIn { |
| | from { |
| | opacity: 0; |
| | transform: translateY(20px); |
| | } |
| | to { |
| | opacity: 1; |
| | transform: translateY(0); |
| | } |
| | } |
| | |
| | /* Teams Accordion */ |
| | #game_setup_row{ |
| | display: flex; |
| | flex-direction: column; |
| | } |
| | |
| | #teams_accordion { |
| | margin-bottom: 20px; |
| | border: 2px solid #17a2b8; |
| | border-radius: 12px; |
| | background: rgb(42, 46, 55) !important; |
| | margin-left: 1%; |
| | margin-right: 1%; |
| | width: 98%; |
| | } |
| | |
| | /* Game Row - Horizontal Layout */ |
| | #game_row { |
| | display: flex; |
| | gap: 20px; |
| | align-items: stretch; |
| | margin-top: 20px; |
| | height: 70vh; |
| | margin-left: 1%; |
| | margin-right: 1%; |
| | width: 98%; |
| | flex-direction: row; |
| | max-height: 750px; |
| | } |
| | |
| | /* Board Column - FIXED IMAGE DISPLAY */ |
| | #board_column { |
| | background: rgb(42, 46, 55) !important; |
| | border-radius: 12px; |
| | padding: 20px; |
| | box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); |
| | min-width: 0; |
| | overflow: hidden; |
| | flex: 0 0 calc(39% - 10px); |
| | display: flex; |
| | flex-direction: column; /* Changed from row to column */ |
| | height: 100%; |
| | } |
| | |
| | #board_header { |
| | margin: 0 0 15px 0; |
| | color: #667eea; |
| | border-bottom: 2px solid #667eea; |
| | padding-bottom: 10px; |
| | flex-shrink: 0; |
| | } |
| | |
| | #game_board_img { |
| | border-radius: 8px; |
| | box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); |
| | width: 100% !important; |
| | height: 85% !important; |
| | object-fit: contain !important; |
| | display: flex !important; |
| | align-items: center !important; /* Center vertically */ |
| | justify-content: center !important; /* Center horizontally */ |
| | margin: 0 !important; |
| | max-width: 100% !important; |
| | max-height: 100% !important; |
| | flex-grow: 1 !important; |
| | overflow: hidden !important; |
| | } |
| | |
| | #game_board_img img { |
| | max-width: 100% !important; |
| | max-height: 100% !important; |
| | width: auto !important; /* Let it size naturally */ |
| | height: auto !important; /* Let it size naturally */ |
| | object-fit: contain !important; |
| | display: block !important; |
| | } |
| | |
| | /* Chat Column */ |
| | #chat_column { |
| | background: rgb(42, 46, 55) !important; |
| | border-radius: 12px; |
| | padding: 20px; |
| | box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); |
| | display: flex; |
| | flex-direction: column; |
| | height: 100%; |
| | flex: 0 0 calc(59% - 10px); |
| | min-width: 0; |
| | } |
| | |
| | #chat_header { |
| | margin: 0 0 15px 0; |
| | color: #764ba2; |
| | border-bottom: 2px solid #764ba2; |
| | padding-bottom: 10px; |
| | flex-shrink: 0; |
| | flex-grow: 0; |
| | } |
| | |
| | #input_game_section { |
| | display: flex; |
| | flex-flow: row; |
| | place-content: center; |
| | align-items: center; |
| | flex-shrink: 1; |
| | flex-direction: row; |
| | flex-wrap: nowrap; |
| | align-content: center; |
| | justify-content: center; |
| | flex-grow: 0 !important; |
| | } |
| | |
| | .game-chatbot { |
| | border-radius: 8px; |
| | border: 2px solid #e9ecef; |
| | } |
| | |
| | /* ==================== FIREWORKS ==================== */ |
| | |
| | /* Fireworks container */ |
| | .firework { |
| | position: fixed; |
| | width: 100%; |
| | height: 100%; |
| | top: 0; |
| | left: 0; |
| | pointer-events: none; |
| | z-index: 9999; |
| | } |
| | |
| | /* Firework particles */ |
| | .firework::before, |
| | .firework::after { |
| | content: ''; |
| | position: absolute; |
| | width: 5px; |
| | height: 5px; |
| | border-radius: 50%; |
| | } |
| | |
| | .firework::before { |
| | left: 30%; |
| | top: 40%; |
| | animation-delay: 0s; |
| | } |
| | |
| | .firework::after { |
| | left: 70%; |
| | top: 30%; |
| | animation-delay: 1s; |
| | } |
| | |
| | /* Red team fireworks */ |
| | .message_red.firework::before, |
| | .message_red.firework::after { |
| | animation: firework-red 2s ease-in-out infinite; |
| | } |
| | |
| | /* Blue team fireworks */ |
| | .message_blue.firework::before, |
| | .message_blue.firework::after { |
| | animation: firework-blue 2s ease-in-out infinite; |
| | } |
| | |
| | |
| | /* INTENSE RED FIREWORK */ |
| | @keyframes firework-red { |
| | 0% { |
| | opacity: 1; |
| | box-shadow: |
| | 0 0 0 0px #ff0000, |
| | 0 0 0 0px #ff0000, |
| | 0 0 0 0px #ff0000, |
| | 0 0 0 0px #ff0000; |
| | transform: translate(0, 0) scale(1); |
| | } |
| | 25% { opacity: 1; } |
| | 100% { |
| | opacity: 0; |
| | box-shadow: |
| | -120px -80px 0 3px #ff0000, |
| | -80px -120px 0 3px #b00000, |
| | 80px -120px 0 3px #ff4d4d, |
| | 120px -80px 0 3px #ff0000, |
| | 120px 80px 0 3px #b00000, |
| | 80px 120px 0 3px #ff4d4d, |
| | -80px 120px 0 3px #ff0000, |
| | -120px 80px 0 3px #b00000, |
| | -100px 0 0 3px #ff4d4d, |
| | 100px 0 0 3px #ff0000, |
| | 0 -100px 0 3px #b00000, |
| | 0 100px 0 3px #ff4d4d, |
| | -70px -70px 0 3px #ff0000, |
| | 70px -70px 0 3px #b00000, |
| | -70px 70px 0 3px #ff4d4d, |
| | 70px 70px 0 3px #ff0000, |
| | -90px -40px 0 2px #ffe066, |
| | 90px -40px 0 2px #ff0000, |
| | -90px 40px 0 2px #b00000, |
| | 90px 40px 0 2px #ff4d4d, |
| | -40px -90px 0 2px #ff0000, |
| | 40px -90px 0 2px #ffe066, |
| | -40px 90px 0 2px #b00000, |
| | 40px 90px 0 2px #ff4d4d, |
| | -110px -20px 0 2px #ff0000, |
| | 110px -20px 0 2px #b00000, |
| | -110px 20px 0 2px #ff4d4d, |
| | 110px 20px 0 2px #ff0000, |
| | -60px -100px 0 2px #ffe066, |
| | 60px -100px 0 2px #b00000, |
| | -60px 100px 0 2px #ff4d4d, |
| | 60px 100px 0 2px #ff0000, |
| | -130px 0 0 2px #b00000, |
| | 130px 0 0 2px #ff4d4d, |
| | 0 -130px 0 2px #ff0000, |
| | 0 130px 0 2px #ffe066, |
| | -100px -60px 0 1px #b00000, |
| | 100px -60px 0 1px #ff0000, |
| | -100px 60px 0 1px #ff4d4d, |
| | 100px 60px 0 1px #ff0000, |
| | -50px -110px 0 1px #b00000, |
| | 50px -110px 0 1px #ffe066, |
| | -50px 110px 0 1px #ff4d4d, |
| | 50px 110px 0 1px #ff0000, |
| | -85px -85px 0 1px #b00000, |
| | 85px -85px 0 1px #ff0000, |
| | -85px 85px 0 1px #ff4d4d, |
| | 85px 85px 0 1px #ffe066; |
| | transform: translate(0, -20px) scale(1.2); |
| | } |
| | } |
| | |
| | |
| | /* INTENSE BLUE FIREWORK */ |
| | @keyframes firework-blue { |
| | 0% { |
| | opacity: 1; |
| | box-shadow: |
| | 0 0 0 0px #0066ff, |
| | 0 0 0 0px #0066ff, |
| | 0 0 0 0px #0066ff, |
| | 0 0 0 0px #0066ff; |
| | transform: translate(0, 0) scale(1); |
| | } |
| | 25% { opacity: 1; } |
| | 100% { |
| | opacity: 0; |
| | box-shadow: |
| | -120px -80px 0 3px #0066ff, |
| | -80px -120px 0 3px #003399, |
| | 80px -120px 0 3px #4da6ff, |
| | 120px -80px 0 3px #0066ff, |
| | 120px 80px 0 3px #003399, |
| | 80px 120px 0 3px #4da6ff, |
| | -80px 120px 0 3px #0066ff, |
| | -120px 80px 0 3px #003399, |
| | -100px 0 0 3px #4da6ff, |
| | 100px 0 0 3px #0066ff, |
| | 0 -100px 0 3px #003399, |
| | 0 100px 0 3px #4da6ff, |
| | -70px -70px 0 3px #0066ff, |
| | 70px -70px 0 3px #003399, |
| | -70px 70px 0 3px #4da6ff, |
| | 70px 70px 0 3px #0066ff, |
| | -90px -40px 0 2px #ffe066, |
| | 90px -40px 0 2px #0066ff, |
| | -90px 40px 0 2px #003399, |
| | 90px 40px 0 2px #4da6ff, |
| | -40px -90px 0 2px #0066ff, |
| | 40px -90px 0 2px #ffe066, |
| | -40px 90px 0 2px #003399, |
| | 40px 90px 0 2px #4da6ff, |
| | -110px -20px 0 2px #0066ff, |
| | 110px -20px 0 2px #003399, |
| | -110px 20px 0 2px #4da6ff, |
| | 110px 20px 0 2px #0066ff, |
| | -60px -100px 0 2px #ffe066, |
| | 60px -100px 0 2px #003399, |
| | -60px 100px 0 2px #4da6ff, |
| | 60px 100px 0 2px #0066ff, |
| | -130px 0 0 2px #003399, |
| | 130px 0 0 2px #4da6ff, |
| | 0 -130px 0 2px #0066ff, |
| | 0 130px 0 2px #ffe066, |
| | -100px -60px 0 1px #003399, |
| | 100px -60px 0 1px #0066ff, |
| | -100px 60px 0 1px #4da6ff, |
| | 100px 60px 0 1px #0066ff, |
| | -50px -110px 0 1px #003399, |
| | 50px -110px 0 1px #ffe066, |
| | -50px 110px 0 1px #4da6ff, |
| | 50px 110px 0 1px #0066ff, |
| | -85px -85px 0 1px #003399, |
| | 85px -85px 0 1px #0066ff, |
| | -85px 85px 0 1px #4da6ff, |
| | 85px 85px 0 1px #ffe066; |
| | transform: translate(0, -20px) scale(1.2); |
| | } |
| | } |
| | |
| | |
| | /* ==================== TEAMS STYLING ==================== */ |
| | |
| | .teams-container { |
| | display: flex; |
| | gap: 20px; |
| | align-items: stretch; |
| | padding: 20px; |
| | background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); |
| | border-radius: 12px; |
| | } |
| | |
| | .vs-divider { |
| | display: flex; |
| | align-items: center; |
| | justify-content: center; |
| | min-width: 60px; |
| | } |
| | |
| | .vs-text { |
| | font-size: 32px; |
| | font-weight: bold; |
| | text-shadow: 2px 2px 4px rgba(0,0,0,0.1); |
| | animation: pulse 2s ease-in-out infinite; |
| | } |
| | |
| | @keyframes pulse { |
| | 0%, 100% { transform: scale(1); } |
| | 50% { transform: scale(1.1); } |
| | } |
| | |
| | .team-card { |
| | flex: 1; |
| | background: white; |
| | border-radius: 12px; |
| | overflow: hidden; |
| | box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08); |
| | transition: transform 0.2s ease, box-shadow 0.2s ease; |
| | } |
| | |
| | .team-card:hover { |
| | transform: translateY(-4px); |
| | box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15), 0 4px 8px rgba(0, 0, 0, 0.1); |
| | } |
| | |
| | .team-header { |
| | padding: 16px 20px; |
| | color: white; |
| | font-weight: bold; |
| | position: relative; |
| | } |
| | |
| | .team-red .team-header { |
| | background: linear-gradient(135deg, #dc3545 0%, #c82333 100%); |
| | } |
| | |
| | .team-blue .team-header { |
| | background: linear-gradient(135deg, #0d6efd 0%, #0b5ed7 100%); |
| | } |
| | |
| | .team-header h3 { |
| | margin: 0; |
| | font-size: 18px; |
| | letter-spacing: 0.5px; |
| | } |
| | |
| | .starting-badge { |
| | margin-top: 8px; |
| | padding: 6px 12px; |
| | background: rgba(255, 255, 255, 0.3); |
| | border: 2px solid rgba(255, 255, 255, 0.6); |
| | border-radius: 6px; |
| | font-size: 12px; |
| | font-weight: bold; |
| | letter-spacing: 0.5px; |
| | text-align: center; |
| | animation: glow 2s ease-in-out infinite; |
| | } |
| | |
| | @keyframes glow { |
| | 0%, 100% { |
| | box-shadow: 0 0 5px rgba(255, 255, 255, 0.5); |
| | } |
| | 50% { |
| | box-shadow: 0 0 20px rgba(255, 255, 255, 0.8); |
| | } |
| | } |
| | |
| | .team-body { |
| | padding: 16px; |
| | display: flex; |
| | flex-direction: column; |
| | gap: 12px; |
| | } |
| | |
| | .player-avatar { |
| | width: 48px; |
| | height: 48px; |
| | border-radius: 50%; |
| | object-fit: cover; |
| | border: 3px solid white; |
| | box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); |
| | flex-shrink: 0; |
| | } |
| | |
| | .player-name { |
| | font-weight: 600; |
| | font-size: 14px; |
| | color: #212529; |
| | margin-bottom: 4px; |
| | } |
| | |
| | .role-badge { |
| | display: inline-block; |
| | padding: 2px 8px; |
| | border-radius: 4px; |
| | font-size: 10px; |
| | font-weight: 600; |
| | letter-spacing: 0.5px; |
| | text-transform: uppercase; |
| | } |
| | |
| | .role-boss { |
| | background: #ffc107; |
| | color: #000; |
| | } |
| | |
| | .role-captain { |
| | background: #17a2b8; |
| | color: white; |
| | } |
| | |
| | .role-player { |
| | background: #6c757d; |
| | color: white; |
| | } |
| | |
| | .player-model { |
| | font-size: 11px; |
| | color: #6c757d; |
| | font-family: monospace; |
| | } |
| | |
| | /* Team Selection Row */ |
| | #team_selection_row { |
| | padding: 24px; |
| | background: linear-gradient(135deg, #dc3545 0%, #ff6b6b 40%, #0d6efd 100%); |
| | border-radius: 12px; |
| | margin-bottom: 20px; |
| | box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); |
| | margin-left: 1%; |
| | margin-right: 1%; |
| | width: 98%; |
| | display: flex; |
| | flex-direction: row; |
| | flex-wrap: wrap; /* Allow wrapping to next line */ |
| | align-items: center; |
| | justify-content: center; /* Optional: center horizontally */ |
| | gap: 16px; |
| | } |
| | |
| | #api_keys_section{ |
| | margin-left: 1%; |
| | width: 98%; |
| | margin-right: 1%; |
| | padding: 1%; |
| | } |
| | |
| | #new_game_btn { |
| | flex-basis: 100%; /* Force the button to occupy a full line */ |
| | text-align: center; |
| | display: flex; |
| | justify-content: center; |
| | margin-top: 20px !important; |
| | } |
| | |
| | .wrap:hover, #blue_team_dropdown .wrap:hover { |
| | box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15); |
| | } |
| | |
| | #red_team_dropdown .wrap:hover { |
| | border-color: #dc3545; |
| | box-shadow: 0 8px 16px rgba(220, 53, 69, 0.3); |
| | } |
| | |
| | #blue_team_dropdown .wrap:hover { |
| | border-color: #0d6efd; |
| | box-shadow: 0 8px 16px rgba(13, 110, 253, 0.3); |
| | } |
| | |
| | #red_team_dropdown input, #blue_team_dropdown input { |
| | background: linear-gradient(to bottom, #ffffff 0%, #f8f9fa 100%); |
| | border: none; |
| | padding: 14px 16px; |
| | font-size: 15px; |
| | font-weight: 600; |
| | border-radius: 8px; |
| | transition: all 0.2s ease; |
| | } |
| | |
| | #red_team_dropdown input:focus, #blue_team_dropdown input:focus { |
| | background: white; |
| | box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05); |
| | } |
| | |
| | #red_team_dropdown input { |
| | color: #dc3545; |
| | } |
| | |
| | #blue_team_dropdown input { |
| | color: #0d6efd; |
| | } |
| | |
| | #red_team_dropdown .icon, #blue_team_dropdown .icon { |
| | transition: transform 0.3s ease; |
| | } |
| | |
| | /* Boss Action Buttons */ |
| | #red_boss_btn, #blue_boss_btn { |
| | flex: 1; |
| | padding: 12px 20px; |
| | font-weight: 600; |
| | border-radius: 8px; |
| | transition: transform 0.2s ease, box-shadow 0.2s ease; |
| | border: none; |
| | font-size: 16px; |
| | display: none; |
| | } |
| | |
| | #red_boss_btn:hover, #blue_boss_btn:hover { |
| | transform: translateY(-2px); |
| | box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); |
| | } |
| | |
| | #red_boss_btn { |
| | background: linear-gradient(135deg, #dc3545 0%, #c82333 100%); |
| | color: white; |
| | } |
| | |
| | #red_boss_btn:hover { |
| | background: linear-gradient(135deg, #c82333 0%, #bd2130 100%); |
| | } |
| | |
| | #blue_boss_btn { |
| | background: linear-gradient(135deg, #0d6efd 0%, #0b5ed7 100%); |
| | color: white; |
| | } |
| | |
| | #blue_boss_btn:hover { |
| | background: linear-gradient(135deg, #0b5ed7 0%, #0a58ca 100%); |
| | } |
| | |
| | /* Boss Name Input */ |
| | #red_boss_name_input, #blue_boss_name_input { |
| | background: #f8f9fa; |
| | border: 2px solid #e9ecef; |
| | border-radius: 8px; |
| | padding: 10px 12px; |
| | font-size: 14px; |
| | transition: border-color 0.2s ease, background 0.2s ease; |
| | } |
| | |
| | #red_boss_name_input:focus { |
| | border-color: #dc3545; |
| | background: white; |
| | outline: none; |
| | } |
| | |
| | #blue_boss_name_input:focus { |
| | border-color: #0d6efd; |
| | background: white; |
| | outline: none; |
| | } |
| | |
| | /* Save Buttons */ |
| | #save_red_boss_btn, #save_blue_boss_btn { |
| | background: #28a745; |
| | color: white; |
| | padding: 8px 16px; |
| | border-radius: 6px; |
| | font-weight: 600; |
| | border: none; |
| | transition: background 0.2s ease, transform 0.2s ease; |
| | font-size: 16px; |
| | } |
| | |
| | #save_red_boss_btn:hover, #save_blue_boss_btn:hover { |
| | background: #218838; |
| | transform: translateY(-1px); |
| | } |
| | |
| | /* Cancel Buttons */ |
| | #cancel_red_boss_btn, #cancel_blue_boss_btn { |
| | background: #6c757d; |
| | color: white; |
| | padding: 8px 16px; |
| | border-radius: 6px; |
| | font-weight: 600; |
| | border: none; |
| | transition: background 0.2s ease, transform 0.2s ease; |
| | } |
| | |
| | #cancel_red_boss_btn:hover, #cancel_blue_boss_btn:hover { |
| | background: #5a6268; |
| | transform: translateY(-1px); |
| | } |
| | |
| | /* ==================== MESSAGE FEED STYLING ==================== */ |
| | |
| | #message_feed_container { |
| | flex: 1; |
| | display: flex; |
| | flex-direction: column; |
| | overflow: hidden; |
| | min-height: 400px; |
| | flex-grow: 1; |
| | min-height: 0; |
| | } |
| | |
| | #message_feed { |
| | flex: 1; |
| | overflow-y: auto; |
| | padding-right: 8px; |
| | } |
| | |
| | .message_card { |
| | background: white; |
| | border-radius: 12px; |
| | padding: 20px; |
| | margin-bottom: 16px; |
| | box-shadow: 0 2px 8px rgba(0,0,0,0.1); |
| | transition: transform 0.2s, box-shadow 0.2s; |
| | border-left: 8px solid #e0e0e0; |
| | } |
| | |
| | .message_card:hover { |
| | transform: translateY(-2px); |
| | box-shadow: 0 4px 12px rgba(0,0,0,0.15); |
| | } |
| | |
| | .message_header { |
| | display: flex; |
| | align-items: center; |
| | margin-bottom: 12px; |
| | gap: 12px; |
| | } |
| | |
| | .message_avatar { |
| | width: 40px; |
| | height: 40px; |
| | border-radius: 50%; |
| | object-fit: cover; |
| | border: 2px solid #e0e0e0; |
| | } |
| | |
| | .message_header_text { |
| | display: flex; |
| | flex-direction: column; |
| | flex: 1; |
| | } |
| | |
| | .message_sender { |
| | font-size: 14px; |
| | font-weight: 700; |
| | color: #262626; |
| | } |
| | |
| | .message_title { |
| | font-size: 12px; |
| | color: #8e8e8e; |
| | font-weight: 400; |
| | } |
| | |
| | .message_icon { |
| | font-size: 20px; |
| | margin-left: auto; |
| | } |
| | |
| | .message_content { |
| | color: #262626; |
| | line-height: 1.6; |
| | font-size: 14px; |
| | white-space: pre-wrap; |
| | padding-left: 52px; |
| | } |
| | |
| | .message_content, |
| | .message_content * { |
| | color: black; |
| | } |
| | |
| | .message_content think{ |
| | font-style: italic; |
| | } |
| | |
| | .message_content .prose * { |
| | color: #000000 !important; |
| | } |
| | |
| | .message_thinking { |
| | border-left-color: #9b59b6; |
| | background: linear-gradient(to right, #f8f4fc, white); |
| | } |
| | |
| | .message_tool { |
| | border-left-color: #3498db; |
| | background: linear-gradient(to right, #f0f8ff, white); |
| | } |
| | |
| | .message_red { |
| | border-left-color: #e74c3c; |
| | } |
| | |
| | .message_blue { |
| | border-left-color: #3498db; |
| | } |
| | |
| | .message_boss { |
| | background: linear-gradient(to right, #fff5f5, white); |
| | } |
| | |
| | .message_captain { |
| | background: linear-gradient(to right, #fffef5, white); |
| | } |
| | |
| | .message_agent { |
| | background: linear-gradient(to right, #f5fff5, white); |
| | } |
| | |
| | .message_judge { |
| | border-left-color: #95a5a6; |
| | background: linear-gradient(to right, #f8f9fa, white); |
| | } |
| | |
| | .message_red .message_avatar { |
| | border-color: #e74c3c; |
| | } |
| | |
| | .message_blue .message_avatar { |
| | border-color: #3498db; |
| | } |
| | |
| | .message_judge .message_avatar { |
| | border-color: #95a5a6; |
| | } |
| | |
| | /* Scrollbar styling */ |
| | #message_feed::-webkit-scrollbar { |
| | width: 8px; |
| | } |
| | |
| | #message_feed::-webkit-scrollbar-track { |
| | background: #f1f1f1; |
| | border-radius: 4px; |
| | } |
| | |
| | #message_feed::-webkit-scrollbar-thumb { |
| | background: #888; |
| | border-radius: 4px; |
| | } |
| | |
| | #message_feed::-webkit-scrollbar-thumb:hover { |
| | background: #555; |
| | } |
| | |
| | /* ==================== TABLE ==================== */ |
| | |
| | .provider-table { |
| | width: 100%; |
| | border-collapse: collapse; |
| | } |
| | |
| | .provider-table th, .provider-table td { |
| | border: 1px solid #ddd; |
| | padding: 8px; |
| | } |
| | |
| | .provider-table th { |
| | font-size: 26px; |
| | } |
| | |
| | .provider-table td { |
| | font-size: 18px; |
| | } |
| | |
| | .logo_cell { |
| | display: flex; |
| | flex-direction: row; |
| | flex-wrap: nowrap; |
| | align-content: center; |
| | align-items: center; |
| | } |
| | |
| | .provider-logo { |
| | height: 45px; |
| | vertical-align: middle; |
| | margin-right: 6px; |
| | } |
| | |
| | |
| | |
| | /* ==================== RESPONSIVE DESIGN ==================== */ |
| | |
| | @media (max-width: 1200px) { |
| | #game_row { |
| | flex-direction: column; |
| | min-height: auto; |
| | } |
| | |
| | #board_column { |
| | min-height: auto; |
| | max-height: 500px; |
| | } |
| | |
| | #chat_column { |
| | min-height: 500px; |
| | } |
| | |
| | .header-content h1 { |
| | font-size: 1.6em; |
| | } |
| | |
| | .rules-carousel-container { |
| | padding: 0 50px; |
| | } |
| | } |
| | |
| | @media (max-width: 768px) { |
| | |
| | nav.tabs { |
| | padding: 0.5rem 1rem !important; |
| | flex-wrap: wrap; |
| | } |
| | |
| | nav.tabs::before { |
| | font-size: 1.2rem; |
| | margin-right: 1rem; |
| | padding-right: 1rem; |
| | width: 100%; |
| | border-right: none; |
| | border-bottom: 2px solid rgba(255, 255, 255, 0.3); |
| | padding-bottom: 0.5rem; |
| | margin-bottom: 0.5rem; |
| | } |
| | |
| | nav.tabs button { |
| | padding: 0.4rem 1rem !important; |
| | font-size: 0.9rem !important; |
| | margin: 0.2rem !important; |
| | } |
| | |
| | .teams-container { |
| | flex-direction: column; |
| | } |
| | |
| | .vs-divider { |
| | min-width: auto; |
| | padding: 10px 0; |
| | } |
| | |
| | .vs-text { |
| | transform: rotate(90deg); |
| | } |
| | |
| | .header-content h1 { |
| | font-size: 1.5em; |
| | } |
| | |
| | .header-icon { |
| | font-size: 1.8em; |
| | } |
| | |
| | #start_game_btn { |
| | font-size: 1.1em !important; |
| | padding: 14px 28px !important; |
| | } |
| | |
| | .rules-intro h2 { |
| | font-size: 1.5em; |
| | } |
| | |
| | .rules-carousel-container { |
| | padding: 0 45px; |
| | } |
| | |
| | .carousel-btn { |
| | width: 35px; |
| | height: 35px; |
| | font-size: 18px; |
| | } |
| | |
| | #game_row { |
| | gap: 15px; |
| | } |
| | |
| | #board_column, #chat_column { |
| | padding: 15px; |
| | } |
| | |
| | #chat_column { |
| | min-height: 450px; |
| | } |
| | |
| | #message_feed_container { |
| | min-height: 300px; |
| | } |
| | |
| | .message_card { |
| | padding: 15px; |
| | } |
| | |
| | .message_content { |
| | padding-left: 0; |
| | margin-top: 8px; |
| | } |
| | } |
| | |
| | @media (max-width: 480px) { |
| | .header-content { |
| | padding: 15px 10px; |
| | } |
| | |
| | .header-content h1 { |
| | font-size: 1.3em; |
| | } |
| | |
| | .header-subtitle { |
| | font-size: 0.85em; |
| | } |
| | |
| | .rules-content { |
| | padding: 15px 10px; |
| | } |
| | |
| | .rules-intro { |
| | padding: 15px 10px; |
| | } |
| | |
| | .rules-carousel-container { |
| | padding: 0 40px; |
| | } |
| | |
| | .carousel-btn { |
| | width: 30px; |
| | height: 30px; |
| | font-size: 16px; |
| | } |
| | |
| | .carousel-btn-prev { |
| | left: 5px; |
| | } |
| | |
| | .carousel-btn-next { |
| | right: 5px; |
| | } |
| | |
| | .rule-card { |
| | padding: 16px; |
| | } |
| | |
| | .rule-card-header h3 { |
| | font-size: 1.2em; |
| | } |
| | |
| | #team_selection_row { |
| | padding: 15px; |
| | } |
| | |
| | #board_column, #chat_column { |
| | padding: 12px; |
| | } |
| | |
| | #chat_column { |
| | min-height: 400px; |
| | } |
| | |
| | #message_feed_container { |
| | min-height: 250px; |
| | } |
| | |
| | .message_card { |
| | padding: 12px; |
| | margin-bottom: 12px; |
| | } |
| | |
| | .message_avatar { |
| | width: 32px; |
| | height: 32px; |
| | } |
| | |
| | .message_sender { |
| | font-size: 13px; |
| | } |
| | |
| | .message_title { |
| | font-size: 11px; |
| | } |
| | |
| | .message_content { |
| | font-size: 13px; |
| | } |
| | } |
| | """ |
| |
|
| | |
| | final_css = navbar_css + stats_css + css + """ |
| | |
| | #message_feed_container { |
| | flex: 1; |
| | display: flex; |
| | flex-direction: column; |
| | overflow: hidden; /* prevent scroll outside */ |
| | } |
| | |
| | /* The feed itself is scrollable inside the container */ |
| | #message_feed { |
| | flex: 1; |
| | overflow-y: auto; |
| | height: 100%; |
| | } |
| | |
| | /* Optional: smooth animation */ |
| | #message_feed_container, #message_feed { |
| | transition: height 0.2s ease; |
| | } |
| | |
| | .message_card { |
| | background: white; |
| | border-radius: 12px; |
| | padding: 20px; |
| | margin-bottom: 16px; |
| | box-shadow: 0 2px 8px rgba(0,0,0,0.1); |
| | transition: transform 0.2s, box-shadow 0.2s; |
| | border-left: 8px solid #e0e0e0; |
| | } |
| | |
| | .message_card:hover { |
| | transform: translateY(-2px); |
| | box-shadow: 0 4px 12px rgba(0,0,0,0.15); |
| | } |
| | |
| | .message_header { |
| | display: flex; |
| | align-items: center; |
| | margin-bottom: 12px; |
| | gap: 12px; |
| | } |
| | |
| | .message_avatar { |
| | width: 40px; |
| | height: 40px; |
| | border-radius: 50%; |
| | object-fit: cover; |
| | border: 2px solid #e0e0e0; |
| | } |
| | |
| | .message_header_text { |
| | display: flex; |
| | flex-direction: column; |
| | flex: 1; |
| | } |
| | |
| | .message_sender { |
| | font-size: 14px; |
| | font-weight: 700; |
| | color: #262626; |
| | } |
| | |
| | .message_title { |
| | font-size: 12px; |
| | color: #8e8e8e; |
| | font-weight: 400; |
| | } |
| | |
| | .message_icon { |
| | font-size: 20px; |
| | margin-left: auto; |
| | } |
| | |
| | .message_content { |
| | color: #262626; |
| | line-height: 1.6; |
| | font-size: 14px; |
| | white-space: pre-wrap; |
| | padding-left: 52px; |
| | } |
| | |
| | .message_thinking { |
| | border-left-color: #9b59b6; |
| | background: linear-gradient(to right, #f8f4fc, white); |
| | } |
| | |
| | .message_tool { |
| | border-left-color: #3498db; |
| | background: linear-gradient(to right, #f0f8ff, white); |
| | } |
| | |
| | .message_red { |
| | border-left-color: #e74c3c; |
| | } |
| | |
| | .message_blue { |
| | border-left-color: #3498db; |
| | } |
| | |
| | .message_boss { |
| | background: linear-gradient(to right, #fff5f5, white); |
| | } |
| | |
| | .message_captain { |
| | background: linear-gradient(to right, #fffef5, white); |
| | } |
| | |
| | .message_agent { |
| | background: linear-gradient(to right, #f5fff5, white); |
| | } |
| | |
| | .message_judge { |
| | border-left-color: #95a5a6; |
| | background: linear-gradient(to right, #f8f9fa, white); |
| | } |
| | |
| | .message_red .message_avatar { |
| | border-color: #e74c3c; |
| | } |
| | |
| | .message_blue .message_avatar { |
| | border-color: #3498db; |
| | } |
| | |
| | .message_judge .message_avatar { |
| | border-color: #95a5a6; |
| | } |
| | |
| | /* Scrollbar styling */ |
| | #message_feed::-webkit-scrollbar { |
| | width: 8px; |
| | } |
| | |
| | #message_feed::-webkit-scrollbar-track { |
| | background: #f1f1f1; |
| | border-radius: 4px; |
| | } |
| | |
| | #message_feed::-webkit-scrollbar-thumb { |
| | background: #888; |
| | border-radius: 4px; |
| | } |
| | |
| | #message_feed::-webkit-scrollbar-thumb:hover { |
| | background: #555; |
| | } |
| | """ |
| |
|
