html {
background-color: #fff; /* scrollbar track inherits this β keep it neutral */
height: calc(var(--vh, 1vh) * 100);
overflow-x: hidden;
}
body {
background-color: #0b1c34; /* dark base for PWA splash / loading */
min-height: 100%;
}
html, body {
width: 100%;
margin: 0;
padding: 0;
}
/* ============================================================
PWA SPLASH / LOADING SCREEN
============================================================ */
#pwa-splash {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, #1a365d 0%, #0b1c34 100%);
display: flex;
align-items: center;
justify-content: center;
z-index: 99999;
transition: opacity 0.4s ease, visibility 0.4s ease;
}
#pwa-splash.hidden {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
.splash-content {
text-align: center;
animation: splashFadeIn 0.5s ease;
}
@keyframes splashFadeIn {
from { opacity: 0; transform: scale(0.9); }
to { opacity: 1; transform: scale(1); }
}
.splash-logo {
max-width: 280px;
width: 80%;
height: auto;
margin-bottom: 24px;
animation: splashPulse 2s ease-in-out infinite;
}
@keyframes splashPulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}
.splash-spinner {
width: 40px;
height: 40px;
margin: 0 auto 16px;
border: 3px solid rgba(255, 255, 255, 0.2);
border-top-color: #4ade80;
border-radius: 50%;
animation: splashSpin 0.8s linear infinite;
}
@keyframes splashSpin {
to { transform: rotate(360deg); }
}
.splash-text {
color: rgba(255, 255, 255, 0.8);
font-size: 1rem;
font-weight: 500;
margin: 0;
letter-spacing: 0.5px;
}
/* ============================================================
BUTTONS β unified LexiLayers style
============================================================ */
.btnunified {
display: inline-block;
padding: 12px 24px;
font-size: 1.1rem;
font-weight: 600;
border-radius: 10px;
border: none;
cursor: pointer;
text-align: center;
transition: all 0.2s ease-in-out;
user-select: none;
font-family: inherit;
color: #fff;
background: #1487c6; /* default blue tone */
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
}
.btnunified:hover {
transform: translateY(-2px);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
filter: brightness(1.05);
}
.btnunified:active {
transform: translateY(0);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
}
/* Color variants */
/* Blue (existing, normalized) */
.btnunified-blue {
background: linear-gradient(135deg, #1487c6, #0c74b0);
box-shadow: 0 3px 10px rgba(20, 135, 198, 0.35);
}
/* Green (existing, normalized) */
.btnunified-green {
background: linear-gradient(135deg, var(--brand-green), #27945e);
box-shadow: 0 3px 10px rgba(89, 226, 138, 0.25);
}
/* π΄ Red β now with shadow */
.btnunified-red {
background: linear-gradient(135deg, #e14b4b, #c73737);
box-shadow: 0 3px 10px rgba(225, 75, 75, 0.30);
}
/* π‘ Yellow β now with shadow */
.btnunified-yellow {
background: linear-gradient(135deg, #f8c44f, #e6b037);
color: #333;
box-shadow: 0 3px 10px rgba(248, 196, 79, 0.35);
}
/* π Orange β new */
.btnunified-orange {
background: linear-gradient(135deg, #ff914d, #e57a32);
box-shadow: 0 3px 10px rgba(255, 145, 77, 0.30);
}
/* π£ Purple β new */
.btnunified-purple {
background: linear-gradient(135deg, #9d60ff, #7b39e6);
box-shadow: 0 3px 10px rgba(157, 96, 255, 0.30);
}
/* βͺ Gray β secondary/back buttons */
.btnunified-gray {
background: linear-gradient(135deg, #4b5563, #374151);
box-shadow: 0 3px 10px rgba(75, 85, 99, 0.40);
color: #f3f4f6;
}
[data-theme="light"] .btnunified-gray {
background: linear-gradient(135deg, #9ca3af, #6b7280);
box-shadow: 0 3px 8px rgba(107, 114, 128, 0.25);
color: #fff;
}
body.dark-mode .btnunified-gray {
background: linear-gradient(135deg, #4b5563, #374151);
box-shadow: 0 3px 10px rgba(75, 85, 99, 0.40);
color: #f3f4f6;
}
/* =====================================================================
News Landing Page (Hero Section)
===================================================================== */
/* Sticky footer using flexbox - never overlaps content */
body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
/* Main content areas grow to push footer down */
#landing,
#mp-lobby,
#daily-page,
#sp-hub-page,
#mp-hub-page,
#party-mode-hub-page,
#versus-hub,
#versus-lobby,
#settings-page,
#elimination-hub-page,
#social-page,
#profile-page,
#shop-page,
#faceoff-hub-page,
#timeattack-hub-page {
flex: 1 0 auto;
width: 100%;
}
footer#site-footer {
flex-shrink: 0;
width: 100%;
text-align: center;
font-size: 0.9rem;
opacity: 0.6;
padding: 12px 0;
color: #333;
background: #fff;
border-top: 1px solid #ddd;
margin-top: auto;
}
/* =====hide footer in these cases===== */
body.in-game #site-footer,
body.is-mp #site-footer {
display: none !important;
}
/* Hide footer on mobile for Face-Off page */
@media (max-width: 768px) {
body:has(#faceoff-hub-page.active) #site-footer {
display: none !important;
}
}
html {
box-sizing: border-box;
scroll-padding-top: var(--header-h, 52px);
}
/* Thin scrollbar styling β uses standard CSS properties so the browser
keeps native overlay behaviour (scrollbar floats over content, no gap). */
* {
scrollbar-width: thin;
scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
}
/* Landing Page - warm gradient */
#landing {
min-height: calc(100vh - var(--header-h));
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: linear-gradient(180deg, #54a1e3 0%, #ffffff 60%);
text-align: center;
padding: 10px 20px 24px;
box-sizing: border-box;
transition: opacity 0.8s ease-in-out;
}
/* Single Player Hub - green gradient background */
#sp-hub-page {
min-height: calc(100vh - var(--header-h));
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
background: linear-gradient(180deg, #69e578 0%, #ffffff 60%);
text-align: center;
padding: 20px;
padding-top: calc(-14px + var(--header-h, 52px));
padding-bottom: 40px;
box-sizing: border-box;
transition: opacity 0.8s ease-in-out;
overflow-y: auto;
}
#sp-hub-page .hub-title {
margin: 0;
}
#landing img {
filter: drop-shadow(0 22px 22px rgba(0,0,0,0.18));
}
#landing h1 {
font-size: 3rem;
font-weight: 800;
margin-bottom: 12px;
color: var(--ink);
letter-spacing: 0.2px;
font-family: 'Segoe UI', Arial, sans-serif;
}
#landing p {
font-size: 1rem;
color: #333;
margin-bottom: 2px;
max-width: 600px;
line-height: 1.5;
}
#landing-buttons {
display: flex;
gap: 16px;
justify-content: center;
flex-wrap: wrap;
margin-top: 20px; /* optional breathing space */
}
#multiplayer-btn {
background: var(--brand-blue);
color: #fff;
box-shadow: 0 3px 12px #53c2e825;
}
/* =====================================================================
LEXILAYERS β Global Styles & Variables
===================================================================== */
:root {
/* Brand / theme colors */
--brand-green: #40c455;
--brand-blue: #18a2ee;
--ink: #174a87;
/* Surfaces */
--surface: #ffffff;
--surface-warm: #fffbe9;
--surface-hero: #fffbee;
/* Accents / borders / shadows */
--shadow-soft: 0 4px 30px #aad3ff50;
--border-gold: #d6c69a;
/* Text */
--text-strong: #0e6725;
--text-muted: #9d711b;
/* Scoreboard check glow */
--check-glow: rgba(0,255,136,0.8);
/* Theme-specific variables */
--bg-primary: #ffffff;
--bg-secondary: #fafafa;
--text-primary: #111;
--text-secondary: #666;
--border-color: #eee;
--card-bg: #ffffff;
--header-bg: #353535;
--header-text: #ffffff;
}
/* Dark Mode Theme */
body.dark-mode {
--bg-primary: #1a1f2e;
--bg-secondary: #242b3d;
--text-primary: #e8eaed;
--text-secondary: #a8aab0;
--border-color: #374151;
--card-bg: #242b3d;
--header-bg: #1a1f2e;
--header-text: #e8eaed;
background: #1a1f2e;
color: #e8eaed;
}
/* Dark mode gradient backgrounds */
body.dark-mode #landing {
background: linear-gradient(180deg, #1a4a6e 0%, #1e293b 60%);
}
body.dark-mode #sp-hub-page {
background: linear-gradient(180deg, #1a5c2a 0%, #1e293b 60%);
}
body.dark-mode #mp-hub-page,
body.dark-mode #party-mode-hub-page {
background: linear-gradient(180deg, #1a3a5c 0%, #1e293b 60%);
}
/* Versus hub/lobby dark mode styles moved to versus.css */
body.dark-mode #mp-lobby {
background: linear-gradient(180deg, #5c3d1a 0%, #3d2e1a 40%, #1e293b 70%);
}
/* Dark mode card styling */
body.dark-mode .lp-card {
background: rgba(26, 31, 46, 0.9);
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
color: var(--text-primary);
}
body.dark-mode .lp-card:hover {
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}
/* Dark mode text adjustments - better contrast */
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3 {
color: #ffffff !important;
}
/* Subtitle/hero text on landing page */
body.dark-mode #landing h1 {
color: #ffffff !important;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
body.dark-mode #landing p {
color: rgba(255, 255, 255, 0.9) !important;
}
body.dark-mode .app-header {
background: var(--header-bg);
border-bottom: 1px solid var(--border-color);
}
body.dark-mode .drawer {
background: var(--bg-secondary);
border-right: 1px solid var(--border-color);
}
body.dark-mode .drawer-item {
color: var(--text-primary);
}
body.dark-mode .drawer-item:hover {
background: #389b3b !important;
color: #ffffff !important;
}
body.dark-mode .drawer-item.active {
background: linear-gradient(90deg, rgba(24, 162, 238, 0.2) 0%, transparent 100%);
}
/* Settings page dark mode */
body.dark-mode #settings-page {
background: var(--bg-primary);
color: var(--text-primary);
}
body.dark-mode .settings-header {
background: var(--header-bg);
border-bottom: 1px solid var(--border-color);
color: var(--text-primary);
}
body.dark-mode .settings-tabs {
background: var(--bg-secondary);
border-bottom: none;
}
body.dark-mode .settings-tab {
color: var(--text-secondary);
border-bottom: 2px solid transparent;
}
body.dark-mode .settings-tab.active {
color: var(--brand-blue);
border-bottom-color: var(--brand-blue);
}
body.dark-mode .settings-card {
background: var(--card-bg);
border: 1px solid var(--border-color);
}
body.dark-mode .settings-card-header {
border-bottom: 1px solid var(--border-color);
}
body.dark-mode .settings-card-header h3 {
color: var(--text-primary) !important;
}
body.dark-mode .switch-label {
color: var(--text-primary);
}
body.dark-mode input[type="text"],
body.dark-mode input[type="email"],
body.dark-mode input[type="password"] {
background: var(--bg-secondary);
border-color: var(--border-color);
color: var(--text-primary);
}
/* Game browser cards (party mode) */
body.dark-mode .game-browser-card,
body.dark-mode .lobby-card {
background: rgba(26, 31, 46, 0.95) !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
color: var(--text-primary) !important;
}
body.dark-mode .game-browser-card h3,
body.dark-mode .game-browser-card h4,
body.dark-mode .lobby-card h3,
body.dark-mode .lobby-card h4 {
color: #ffffff !important;
}
/* Pills/Mode selector buttons */
body.dark-mode .mode-pill,
body.dark-mode .game-mode-pill {
background: rgba(26, 31, 46, 0.9);
color: var(--text-primary);
}
body.dark-mode .mode-pill.active,
body.dark-mode .game-mode-pill.active {
background: var(--brand-blue);
color: #ffffff;
border-color: var(--brand-blue);
}
/* Leaderboard dark mode */
body.dark-mode .leaderboard,
body.dark-mode #leaderboard-panel {
background: rgba(26, 31, 46, 0.95) !important;
border: 1px solid rgba(255, 255, 255, 0.1);
color: var(--text-primary) !important;
}
body.dark-mode .leaderboard h2,
body.dark-mode .leaderboard h3,
body.dark-mode #leaderboard-panel h2,
body.dark-mode #leaderboard-panel h3 {
color: #ffffff !important;
}
body.dark-mode .leaderboard-item,
body.dark-mode .player-item {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
color: var(--text-primary);
}
/* Game room dark mode */
body.dark-mode #game-container,
body.dark-mode #game-page {
background: var(--bg-primary);
}
body.dark-mode .game-panel {
background: rgba(26, 31, 46, 0.95);
border: 1px solid rgba(255, 255, 255, 0.1);
}
body.dark-mode .scoreboard,
body.dark-mode #scoreboard-panel {
background: rgba(26, 31, 46, 0.95) !important;
color: var(--text-primary) !important;
}
body.dark-mode .scoreboard-row {
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
/* Bottom nav dark mode */
body.dark-mode .bottom-nav {
background: var(--header-bg);
border-top: 1px solid var(--border-color);
}
body.dark-mode .bn-item {
color: var(--text-secondary);
}
body.dark-mode .bn-item.active {
color: var(--brand-blue);
}
/* Buttons in dark mode */
body.dark-mode .btnunified {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
/* Make sure card titles are visible */
body.dark-mode .lp-card-title {
color: #ffffff !important;
}
body.dark-mode .lp-card-text {
color: rgba(255, 255, 255, 0.85) !important;
}
/* Pills in dark mode - comprehensive coverage */
body.dark-mode .pill,
body.dark-mode .mode-pill,
body.dark-mode .roundstotal-pill,
body.dark-mode .roundms-pill,
body.dark-mode .flips-pill {
background: rgba(26, 31, 46, 0.9) !important;
color: #ffffff !important;
}
/* Hub cards in dark mode */
body.dark-mode .mp-hub-card {
background: rgba(26, 31, 46, 0.95) !important;
border: 1px solid rgba(255, 255, 255, 0.15) !important;
color: var(--text-primary) !important;
}
body.dark-mode .mp-hub-card h3,
body.dark-mode .mp-hub-card h4,
body.dark-mode .mp-hub-card p {
color: #ffffff !important;
}
/* Leaderboard entries in dark mode */
body.dark-mode .leaderboard-entry {
background: rgba(255, 255, 255, 0.05) !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
color: var(--text-primary) !important;
}
body.dark-mode .leaderboard-entry.current-user {
background: rgba(24, 162, 238, 0.2) !important;
border: 1px solid var(--brand-blue) !important;
}
body.dark-mode .leaderboard-entry td {
color: var(--text-primary) !important;
}
/* Settings tabs - fix faint text */
body.dark-mode .settings-tab {
color: rgba(255, 255, 255, 0.7) !important;
border-bottom: 2px solid transparent;
}
body.dark-mode .settings-tab.active {
color: #ffffff !important;
border-bottom-color: var(--brand-blue);
}
/* Drawer menu items - fix white text issue */
body.dark-mode .drawer-item span {
color: var(--text-primary) !important;
}
/* Additional leaderboard elements */
body.dark-mode #daily-leaderboard-list,
body.dark-mode #daily-leaderboard-yesterday-list,
body.dark-mode .leaderboard-table {
background: transparent;
}
body.dark-mode .leaderboard-table th {
color: #ffffff !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
/* Versus/MP room list items */
body.dark-mode .room-item {
background: rgba(255, 255, 255, 0.05) !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
color: var(--text-primary) !important;
}
body.dark-mode .room-item:hover {
background: rgba(255, 255, 255, 0.1) !important;
}
body.dark-mode .room-item.selected {
background: rgba(24, 162, 238, 0.2) !important;
border-color: var(--brand-blue) !important;
}
/* =====================================================================
LAYOUT UTILITY CLASSES - Replacing inline styles
===================================================================== */
/* Hub Section - Flex column centered container */
.hub-section {
display: flex;
flex-direction: column;
align-items: center;
padding: 20px 0 28px;
}
.hub-section-sm { width: min(700px, 90vw); gap: 24px; }
.hub-section-md { width: min(900px, 90vw); gap: 16px; }
.hub-section-lg { width: min(1200px, 95vw); gap: 20px; }
/* Hero Section - Landing page intro */
.hero-section {
text-align: center;
max-width: 820px;
padding: 0 28px 18px;
}
/* Landing Logo */
.landing-logo {
max-width: 450px;
width: 90%;
height: auto;
margin: 0 auto 2px;
display: block;
}
/* Hub Titles */
.hub-title {
font-size: 2.2rem;
margin: 20px 0 10px;
letter-spacing: 0.2px;
color: var(--ink);
}
.hub-title-lg {
font-size: 2.6rem;
margin: 20px 0 10px;
letter-spacing: 0.2px;
}
.hub-title-md {
font-size: 2rem;
margin: 10px 0;
letter-spacing: 0.2px;
color: var(--ink);
}
/* Hub Subtitles */
.hub-subtitle {
font-size: 1.1rem;
color: var(--ink-60, rgba(23, 74, 135, 0.6));
margin-bottom: 10px;
text-align: center;
max-width: 500px;
}
body.dark-mode .hub-subtitle {
color: rgba(255, 255, 255, 0.7);
}
.hub-subtitle-lg {
font-size: 1.05rem;
opacity: 0.85;
margin: 40px 0 22px;
}
/* Card Grids */
.card-grid {
display: grid;
gap: 16px;
width: 100%;
}
.card-grid-sm { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.card-grid-md { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.card-grid-lg { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
/* Card Grid Containers with padding */
.card-grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 14px;
width: min(940px, 90vw);
padding: 16px 0 28px;
}
.card-grid-container-md {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 16px;
width: min(900px, 90vw);
padding: 16px 0 28px;
}
/* ============================================================
LANDING PAGE - Mode Cards (redesigned)
============================================================ */
.landing-mode-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
width: min(1200px, 90vw);
padding: 24px 0;
}
.landing-mode-card {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 24px 20px 20px;
cursor: pointer;
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.3s ease;
position: relative;
overflow: hidden;
background: #fff;
}
/* Animated shimmer on hover */
.landing-mode-card::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.2),
transparent
);
pointer-events: none;
}
.landing-mode-card:hover::before {
animation: shimmer 0.6s ease forwards;
}
@keyframes shimmer {
from { left: -100%; }
to { left: 100%; }
}
.landing-mode-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}
.landing-mode-btn {
width: 100%;
margin-top: auto;
}
/* Card colored borders matching button colors - Daily styles moved to daily.css */
#landing-sp-card {
border: 2px solid #30a46c;
}
#landing-mp-card {
border: 2px solid #1487c6;
}
#landing-vs-card {
border: 2px solid #9d60ff;
}
#landing-faceoff-card {
border: 2px solid #ef4444;
}
/* Colored glow on hover - Daily hover styles moved to daily.css */
#landing-sp-card:hover {
box-shadow: 0 8px 30px rgba(48, 164, 108, 0.4), 0 0 20px rgba(48, 164, 108, 0.2);
}
#landing-mp-card:hover {
box-shadow: 0 8px 30px rgba(20, 135, 198, 0.4), 0 0 20px rgba(20, 135, 198, 0.2);
}
#landing-vs-card:hover {
box-shadow: 0 8px 30px rgba(157, 96, 255, 0.4), 0 0 20px rgba(157, 96, 255, 0.2);
}
#landing-faceoff-card:hover {
box-shadow: 0 8px 30px rgba(239, 68, 68, 0.4), 0 0 20px rgba(239, 68, 68, 0.2);
}
/* Live Player Counts - Header Online Indicator */
.header-online-indicator {
display: none;
align-items: center;
gap: 5px;
font-size: 0.75rem;
font-weight: 500;
color: rgba(255, 255, 255, 0.7);
white-space: nowrap;
padding: 0 6px;
}
.header-online-indicator.active {
display: flex;
}
.online-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: #22c55e;
display: inline-block;
flex-shrink: 0;
animation: pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot {
0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.5); }
50% { opacity: 0.8; box-shadow: 0 0 0 4px rgba(34, 197, 94, 0); }
}
/* Live Count Badge (top-right corner of cards) */
.live-count-badge {
position: absolute;
top: 8px;
right: 10px;
font-size: 0.72rem;
font-weight: 600;
color: #22c55e;
display: flex;
align-items: center;
gap: 4px;
visibility: hidden;
}
.live-count-badge.active {
visibility: visible;
}
.live-count-badge::before {
content: '';
width: 5px;
height: 5px;
border-radius: 50%;
background: #22c55e;
flex-shrink: 0;
}
/* Dark mode */
body.dark-mode .live-count-badge {
color: #4ade80;
}
body.dark-mode .live-count-badge::before {
background: #4ade80;
}
/* Card Title, Description, Icon (shared across all mode cards) */
.card-title {
font-size: 1.5rem;
font-weight: 800;
margin: 8px 0 8px;
}
.card-icon {
margin-right: 4px;
}
.card-desc {
font-size: 1rem;
line-height: 1.4;
opacity: 0.85;
margin: 0 0 18px;
flex-grow: 1;
}
/* Card Features List (shared across all mode cards) */
.card-features {
display: inline-block;
list-style: none;
padding: 0;
margin: 12px 0;
text-align: left;
}
.card-features li {
position: relative;
padding-left: 20px;
margin-bottom: 6px;
font-size: 0.85rem;
color: var(--text-secondary, #666);
}
.card-features li::before {
content: "\2713";
position: absolute;
left: 0;
color: #4caf50;
font-weight: bold;
}
/* Hub mode card border colors */
.mp-type-card { border: 2px solid rgba(20, 135, 198, 0.3); }
.mp-type-card:hover { border-color: rgba(20, 135, 198, 0.6); }
body.dark-mode .mp-type-card { border-color: rgba(20, 135, 198, 0.4); }
.party-variant-card { border: 2px solid rgba(20, 135, 198, 0.3); }
.party-variant-card:hover { border-color: rgba(20, 135, 198, 0.6); }
body.dark-mode .party-variant-card { border-color: rgba(20, 135, 198, 0.4); }
.elim-variant-card { border: 2px solid rgba(243, 156, 18, 0.3); }
.elim-variant-card:hover { border-color: rgba(243, 156, 18, 0.6); }
body.dark-mode .elim-variant-card { border-color: rgba(243, 156, 18, 0.4); }
.versus-variant-card { border: 2px solid rgba(157, 96, 255, 0.3); }
.versus-variant-card:hover { border-color: rgba(157, 96, 255, 0.6); }
body.dark-mode .versus-variant-card { border-color: rgba(157, 96, 255, 0.4); }
/* Landing Features Row */
.landing-features-grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 12px;
width: min(800px, 90vw);
padding-bottom: 40px;
}
.landing-feature-card {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 18px;
background: rgba(255, 255, 255, 0.8);
border-radius: 50px;
font-size: 0.85rem;
font-weight: 500;
color: #555;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
transition: transform 0.2s ease;
}
.landing-feature-card:hover {
transform: translateY(-2px);
}
.landing-feature-icon {
font-size: 1.1rem;
}
/* Tablet: 2 columns */
@media (max-width: 900px) {
.landing-mode-grid {
grid-template-columns: repeat(2, 1fr);
}
}
/* Mobile: Stack cards vertically */
@media (max-width: 600px) {
.landing-mode-grid {
grid-template-columns: 1fr;
gap: 16px;
}
.landing-mode-card {
min-height: auto;
padding: 24px 20px 20px;
}
/* Daily card responsive styles moved to daily.css */
.landing-features-grid {
gap: 8px;
}
.landing-feature-card {
padding: 8px 14px;
font-size: 0.8rem;
}
}
/* Dark mode for landing cards */
body.dark-mode .landing-mode-card {
background: #242b3d;
}
/* Daily dark mode styles moved to daily.css */
body.dark-mode #landing-sp-card {
border-color: #30a46c;
}
body.dark-mode #landing-mp-card {
border-color: #1487c6;
}
body.dark-mode #landing-vs-card {
border-color: #9d60ff;
}
body.dark-mode #landing-faceoff-card {
border-color: #ef4444;
}
body.dark-mode .landing-feature-card {
background: rgba(26, 31, 46, 0.8);
color: #e8eaed;
}
/* ============================================================
SITE BADGE (admin-controlled, e.g. "OPEN BETA")
============================================================ */
.site-badge {
display: inline-block;
padding: 6px 18px;
background: var(--badge-color, #e74c3c);
color: #fff;
font-size: 0.7rem;
font-weight: 800;
letter-spacing: 1.5px;
text-transform: uppercase;
text-decoration: none;
border-radius: 50px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
align-self: flex-start;
margin: 0 0 10px;
cursor: default;
transition: filter 0.15s;
}
.site-badge[href]:not([href="#"]) {
cursor: pointer;
}
.site-badge[href]:not([href="#"]):hover {
filter: brightness(1.15);
}
/* ============================================================
NEWS BANNER (landing page announcements)
============================================================ */
.news-banner-container {
max-width: 700px;
margin: 0 auto 18px;
min-height: 80px;
transition: opacity 0.3s ease, transform 0.3s ease;
position: relative;
}
.news-banner-nav {
position: absolute;
top: 0;
bottom: 0;
width: 32px;
min-width: 32px;
height: auto;
border-radius: 0;
border: none;
background: rgba(0, 0, 0, 0.06);
color: rgba(0, 0, 0, 0.4);
font-size: 1.1rem;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.15s, color 0.15s;
z-index: 2;
padding: 0;
line-height: 1;
}
.news-banner-nav:hover {
background: rgba(0, 0, 0, 0.1);
color: rgba(0, 0, 0, 0.6);
}
.news-banner-nav.nav-prev {
left: 0;
border-radius: 10px 0 0 10px;
}
.news-banner-nav.nav-next {
right: 0;
border-radius: 0 10px 10px 0;
}
.news-banner-item.has-nav {
padding-left: 40px;
padding-right: 40px;
}
.news-banner-item {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 12px 16px;
border-radius: 10px;
background: #f0f7ff;
border-left: 4px solid #3498db;
position: relative;
min-height: 56px;
}
.news-banner-item.type-sale {
background: #fef9e7;
border-left-color: #f39c12;
}
.news-banner-item.type-event {
background: #f0faf0;
border-left-color: #27ae60;
}
.news-banner-item.type-update {
background: #f4f0ff;
border-left-color: #8e44ad;
}
.news-banner-item.type-warning {
background: #fdf2f2;
border-left-color: #e74c3c;
}
.news-banner-icon {
font-size: 1.3rem;
flex-shrink: 0;
line-height: 1;
margin-top: 1px;
}
.news-banner-content {
flex: 1;
min-width: 0;
}
.news-banner-title {
font-weight: 700;
font-size: 0.9rem;
color: #1a1a2e;
margin-bottom: 2px;
}
.news-banner-body {
font-size: 0.82rem;
color: #555;
line-height: 1.4;
}
.news-banner-link {
display: inline-block;
margin-top: 4px;
font-size: 0.8rem;
font-weight: 600;
color: #3498db;
text-decoration: none;
}
.news-banner-link:hover {
text-decoration: underline;
}
.news-banner-dots {
display: flex;
justify-content: center;
gap: 6px;
margin-top: 8px;
}
.news-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: rgba(0, 0, 0, 0.15);
transition: background 0.3s, transform 0.15s;
cursor: pointer;
}
.news-dot:hover {
background: rgba(0, 0, 0, 0.35);
transform: scale(1.3);
}
.news-dot.active {
background: rgba(0, 0, 0, 0.45);
}
/* Dark mode */
body.dark-mode .news-banner-item {
background: rgba(52, 152, 219, 0.1);
border-left-color: #5dade2;
}
body.dark-mode .news-banner-item.type-sale {
background: rgba(243, 156, 18, 0.1);
border-left-color: #f5b041;
}
body.dark-mode .news-banner-item.type-event {
background: rgba(39, 174, 96, 0.1);
border-left-color: #58d68d;
}
body.dark-mode .news-banner-item.type-update {
background: rgba(142, 68, 173, 0.1);
border-left-color: #bb8fce;
}
body.dark-mode .news-banner-item.type-warning {
background: rgba(231, 76, 60, 0.1);
border-left-color: #ec7063;
}
body.dark-mode .news-banner-title {
color: #e8eaed;
}
body.dark-mode .news-banner-body {
color: #b0b0b0;
}
body.dark-mode .news-banner-nav {
background: rgba(255, 255, 255, 0.06);
color: rgba(255, 255, 255, 0.4);
}
body.dark-mode .news-banner-nav:hover {
background: rgba(255, 255, 255, 0.12);
color: rgba(255, 255, 255, 0.65);
}
body.dark-mode .news-dot {
background: rgba(255, 255, 255, 0.2);
}
body.dark-mode .news-dot:hover {
background: rgba(255, 255, 255, 0.45);
}
body.dark-mode .news-dot.active {
background: rgba(255, 255, 255, 0.6);
}
@media (max-width: 600px) {
.site-badge {
font-size: 0.65rem;
padding: 4px 12px;
}
.news-banner-container {
margin: 0 10px 14px;
min-height: 70px;
}
.news-banner-item {
min-height: 46px;
}
.news-banner-nav {
width: 26px;
font-size: 0.9rem;
}
}
/* ============================================================
LANDING PAGE AD SLOTS (left + right sidebars)
============================================================ */
.landing-ad-banner {
width: 100%;
max-width: 728px;
margin: 24px auto 0;
display: flex;
justify-content: center;
}
.landing-ad-banner-inner {
width: 100%;
min-height: 90px;
background: rgba(0, 0, 0, 0.02);
border: 1px dashed rgba(0, 0, 0, 0.08);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
color: rgba(0, 0, 0, 0.15);
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 1px;
}
body.dark-mode .landing-ad-banner-inner {
background: rgba(255, 255, 255, 0.02);
border-color: rgba(255, 255, 255, 0.06);
color: rgba(255, 255, 255, 0.1);
}
/* Section Ad Banners (News, Help, Shop, Lobbies, SP Hub) */
.section-ad-banner {
width: 100%;
max-width: 728px;
margin: 24px auto 0;
display: flex;
justify-content: center;
}
.section-ad-banner-inner {
width: 100%;
min-height: 90px;
background: rgba(0, 0, 0, 0.02);
border: 1px dashed rgba(0, 0, 0, 0.08);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
color: rgba(0, 0, 0, 0.15);
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 1px;
}
body.dark-mode .section-ad-banner-inner {
background: rgba(255, 255, 255, 0.02);
border-color: rgba(255, 255, 255, 0.06);
color: rgba(255, 255, 255, 0.1);
}
/* Mode Icon (emoji icons in cards) */
.mode-icon {
font-size: 3rem;
}
/* Back Button Container */
.back-btn-container {
text-align: center;
margin-top: 20px;
}
/* Large Play Button */
.btn-play-lg {
font-size: 1.2rem;
padding: 12px 40px;
}
/* Leaderboard Container */
.leaderboard-container {
width: 100%;
max-width: 900px;
background: var(--bg-color, #fff);
border: 1px solid var(--border-color);
border-radius: 12px;
padding: 24px;
margin-top: 20px;
}
.leaderboard-title {
font-size: 1.5rem;
margin-bottom: 20px;
color: var(--ink);
text-align: center;
}
.leaderboard-tabs {
display: flex;
justify-content: center;
gap: 10px;
margin-bottom: 20px;
flex-wrap: wrap;
}
.leaderboard-search {
width: 100%;
padding: 10px;
border: 1px solid var(--border-color);
border-radius: 8px;
background: var(--bg-color, #fff);
color: var(--ink);
font-size: 1rem;
}
.leaderboard-table {
width: 100%;
border-collapse: collapse;
}
.leaderboard-table th,
.leaderboard-table td {
padding: 10px;
}
.leaderboard-table thead tr {
border-bottom: 2px solid var(--border-color);
}
/* Text alignment utilities */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
/* Margin utilities */
.mb-10 { margin-bottom: 10px; }
.mb-20 { margin-bottom: 20px; }
.mt-20 { margin-top: 20px; }
/* Display utilities (for JS toggling - keep inline) */
/* Note: display:none for JS-toggled elements should stay inline */
/* =====================================================================
LEADERBOARD DARK MODE FIXES
===================================================================== */
body.dark-mode .leaderboard-container {
background: var(--card-bg, #242b3d);
border-color: var(--border-color, #374151);
}
body.dark-mode .leaderboard-title {
color: #fff;
}
body.dark-mode .leaderboard-search {
background: var(--bg-primary, #1a1f2e);
border-color: var(--border-color, #374151);
color: #fff;
}
body.dark-mode .leaderboard-search::placeholder {
color: #94a3b8;
}
body.dark-mode .leaderboard-table th {
color: #94a3b8;
}
body.dark-mode .leaderboard-table td {
color: #e2e8f0;
border-bottom: 1px solid var(--border-color, #374151);
}
body.dark-mode .leaderboard-table tbody tr:hover {
background: rgba(255, 255, 255, 0.05);
}
body.dark-mode .leaderboard-table thead tr {
border-bottom-color: var(--border-color, #374151);
}
/* Also fix the sp-mode-details section background in dark mode */
body.dark-mode #sp-mode-details .hub-title-md,
body.dark-mode #sp-mode-details .hub-subtitle {
color: #fff;
}
body.dark-mode #sp-mode-details .hub-subtitle {
color: #94a3b8;
}
/* ========== COMPREHENSIVE DARK MODE FIXES ========== */
/* Game Cards (mp-card) - FIX WHITE CARDS */
body.dark-mode .mp-card {
background: var(--card-bg) !important;
border: 1px solid var(--border-color) !important;
color: var(--text-primary) !important;
}
body.dark-mode .mp-card-header,
body.dark-mode .mp-card-room-name,
body.dark-mode .mp-card h3,
body.dark-mode .mp-card h4 {
color: #ffffff !important;
}
body.dark-mode .mp-card-player {
background: rgba(255, 255, 255, 0.05) !important;
border-color: var(--border-color) !important;
}
body.dark-mode .mp-card-player-name,
body.dark-mode .mp-card-player-rating,
body.dark-mode .mp-card-player-tier {
color: var(--text-primary) !important;
}
body.dark-mode .room-status {
background: rgba(255, 255, 255, 0.1) !important;
color: var(--text-primary) !important;
}
/* Drawer Menu - FIX WHITE TEXT */
body.dark-mode .drawer {
background: var(--bg-secondary) !important;
border-right: 1px solid var(--border-color) !important;
}
body.dark-mode .drawer-item,
body.dark-mode .drawer-item span,
body.dark-mode .drawer-item i {
color: var(--text-primary) !important;
}
body.dark-mode .drawer-item:hover {
background: #389b3b !important;
color: #ffffff !important;
}
/* Daily Challenge dark mode styles moved to daily.css */
/* Settings Page - MORE COMPREHENSIVE */
body.dark-mode #settings-page {
background: #1e293b !important;
}
body.dark-mode .settings-tab {
color: rgba(255, 255, 255, 0.7) !important;
background: transparent !important;
}
body.dark-mode .settings-tab.active {
color: #ffffff !important;
background: rgba(24, 162, 238, 0.15) !important;
}
body.dark-mode .settings-card {
background: var(--card-bg) !important;
border: 1px solid var(--border-color) !important;
}
body.dark-mode .settings-card h3 {
color: #ffffff !important;
}
body.dark-mode .settings-card label,
body.dark-mode .settings-card p {
color: var(--text-primary) !important;
}
body.dark-mode input[type="text"],
body.dark-mode input[type="email"],
body.dark-mode input[type="password"],
body.dark-mode textarea,
body.dark-mode select {
background: var(--bg-secondary) !important;
border-color: var(--border-color) !important;
color: var(--text-primary) !important;
}
/* Leaderboard - COMPREHENSIVE FIX */
body.dark-mode .mp-lobby-leaderboard {
background: var(--card-bg) !important;
border: 1px solid var(--border-color) !important;
}
body.dark-mode .mp-lobby-leaderboard h2,
body.dark-mode .mp-lobby-leaderboard h3 {
color: #ffffff !important;
}
body.dark-mode .rank-entry {
background: rgba(255, 255, 255, 0.05) !important;
border-bottom: 1px solid var(--border-color) !important;
color: var(--text-primary) !important;
}
body.dark-mode .rank-name,
body.dark-mode .rank-rating,
body.dark-mode .rank-tier-text {
color: var(--text-primary) !important;
}
/* Lobby Grid and List */
body.dark-mode .lobby-grid,
body.dark-mode .lobby-list {
background: transparent !important;
}
/* Party Header Bar */
body.dark-mode .party-header-bar {
background: linear-gradient(135deg, #1a237e, #283593) !important;
border-color: #5c6bc0 !important;
}
body.dark-mode .party-title-text {
color: #90caf9 !important;
}
body.dark-mode .party-coin-balance-display {
/* No background needed - matches Face-Off */
}
body.dark-mode .party-coin-amount {
background: linear-gradient(135deg, #ffd54f, #ffab40) !important;
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent !important;
background-clip: text !important;
}
/* Games Section */
body.dark-mode .mp-lobby-games {
background: var(--card-bg) !important;
border: 1px solid var(--border-color) !important;
}
body.dark-mode .mp-lobby-games h3 {
color: #ffffff !important;
border-color: var(--border-color) !important;
}
/* Compact Game Cards */
body.dark-mode .mp-card-compact {
background: rgba(255, 255, 255, 0.05) !important;
border-color: transparent !important;
}
body.dark-mode .mp-card-compact:hover {
background: rgba(249, 168, 37, 0.1) !important;
border-color: #f9a825 !important;
}
body.dark-mode .mp-card-compact.expanded {
background: rgba(249, 168, 37, 0.08) !important;
border-color: #f9a825 !important;
}
body.dark-mode .mp-card-compact-name {
color: #ffffff !important;
}
body.dark-mode .mp-card-compact-meta {
color: #aaa !important;
}
body.dark-mode .mp-card-compact-details {
border-color: var(--border-color) !important;
}
body.dark-mode .mp-card-compact-player {
background: rgba(255, 255, 255, 0.08) !important;
}
body.dark-mode .mp-card-compact-player-name {
color: #fff !important;
}
body.dark-mode .mp-card-compact-player-rating {
color: #aaa !important;
}
body.dark-mode .mp-card-compact-empty {
color: #888 !important;
}
/* Lobby Chat */
body.dark-mode .mp-lobby-chat {
background: var(--card-bg) !important;
border: 1px solid var(--border-color) !important;
}
body.dark-mode .mp-lobby-chat h3 {
color: #ffffff !important;
border-color: var(--border-color) !important;
}
/* Make sure ALL text is readable */
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6 {
color: #ffffff !important;
}
/* Removed duplicate broad selector - using more specific rules below instead */
/* Visibility helpers */
.is-hidden {
display: none !important;
}
/* (optional) lock page scroll while a modal is open */
.modal-open {
overflow: hidden;
}
html {
overflow-y: scroll; /* always show scrollbar β prevents layout shift */
}
/* margin/padding already reset at top of file */
body {
font-family: 'Segoe UI', Arial, sans-serif;
background: #fff;
color: #111;
}
/* Hide scrollbars only while an overlay is open */
body .overlay-open {
overflow: hidden;
}
/* =====================================================================
Landing Page (Header, Cards)
===================================================================== */
/* Small helper cards used on the landing page */
.lp-card {
background: linear-gradient(180deg, #ffffff 0%, #f8f9fa 100%);
border: 1px solid #0000000e;
border-radius: 14px;
padding: 14px;
margin: 10px 0;
box-shadow:
0 6px 18px rgba(0,0,0,.08),
inset 0 1px 0 rgba(255,255,255,0.9);
position: relative;
overflow: hidden;
transition: transform 0.2s ease, box-shadow 0.2s ease;
opacity: 0;
transform: translateY(10px);
animation: fadeUp 0.6s ease forwards;
}
@keyframes fadeUp {
to {
opacity: 1;
transform: translateY(0);
}
}
.lp-card:hover {
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.9);
}
/* Glossy shine effect */
.lp-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 50%;
background: linear-gradient(180deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0) 100%);
border-radius: 14px 14px 0 0;
pointer-events: none;
}
/* Dark mode glossy cards */
body.dark-mode .lp-card {
background: linear-gradient(180deg, #2d3748 0%, #1a202c 100%);
box-shadow:
0 6px 18px rgba(0,0,0,.3),
inset 0 1px 0 rgba(255,255,255,0.1);
}
body.dark-mode .lp-card::before {
background: linear-gradient(180deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0) 100%);
}
/* ============================================================
MODE-SPECIFIC CARD BORDERS
Consistent colors across landing page and hub pages
============================================================ */
/* Card borders now handled by per-card variant classes (e.g. .sp-casual-card, .mp-type-card) */
/* Versus .lp-card styles moved to versus.css */
/* Daily .lp-card styles moved to daily.css */
.lp-card-title {
font-weight: 800;
margin-bottom: 8px;
}
.lp-card-text {
opacity: .85;
line-height: 1.35;
margin: 0;
font-size: 0.9rem !important;
margin-bottom: 8px;
}
/* header user row as a tidy flex line */
#lp-user {
display: flex;
align-items: center;
gap: 8px;
}
/* small round gear button */
.gear-btn {
width: 34px;
height: 34px;
border-radius: 80%;
display: inline-grid;
place-items: center;
background: rgba(0,0,0,.06);
box-shadow: 0 2px 6px rgba(0,0,0,.12);
border: 0;
cursor: pointer;
font-size: 16px; /* scales the emoji */
}
.gear-btn:hover {
background: rgba(0,0,0,.10);
}
.gear-btn:focus-visible {
outline: 2px solid #7aa7ff;
outline-offset: 2px;
}
/* =====================================================================
EXPANDABLE LEADERBOARDS SECTION
===================================================================== */
.leaderboards-section {
width: 100%;
max-width: 600px;
margin: 20px auto;
display: flex;
flex-direction: column;
gap: 16px;
padding: 0 16px;
box-sizing: border-box;
}
.leaderboard-expandable {
background: white;
border-radius: 12px;
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);
overflow: hidden;
}
.leaderboard-toggle {
width: 100%;
background: white;
border: none;
padding: 16px 20px;
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
transition: background 0.2s ease;
font-family: inherit;
}
.leaderboard-toggle:hover {
background: #f8f9fa;
}
.toggle-title {
font-size: 1.1rem;
font-weight: 700;
color: #333;
}
.toggle-icon {
font-size: 1rem;
transition: transform 0.3s ease;
color: #666;
}
.leaderboard-expandable.expanded .toggle-icon {
transform: rotate(180deg);
}
.leaderboard-content {
max-height: 0;
overflow: hidden;
transition: max-height 0.4s ease;
}
.leaderboard-expandable.expanded .leaderboard-content {
max-height: 1000px;
padding-bottom: 12px;
}
/* Override table width for new narrower layout */
.leaderboard-expandable .daily-table {
width: 100%;
}
/* =====================================================================
DAILY LEADERBOARD CARD WITH TOGGLE TABS (Old card layout - scoped)
===================================================================== */
.daily-card-modern .daily-leaderboard-card {
width: 100%;
background: var(--bg-color, white);
border: 1px solid var(--border-color, #ddd);
border-radius: 12px;
padding: 24px;
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);
}
/* =====================================================================
Game Shell Layout (container, top-bar, timer, score)
===================================================================== */
/* ==== Four-chip header: compact dark chips with label inside ============ */
.chip-bar {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
margin-bottom: 6px;
}
/* Compact chip */
.chip {
position: relative;
min-height: 38px; /* close to your old height but comfy */
border-radius: 10px;
background: rgb(255 255 255 / 0%);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border-top: outset 3px #2fd663;
border-bottom: inset 1px #2fd663;
color: #ffffffee;
display: flex;
align-items: center;
justify-content: center;
font-weight: 800;
padding: 4px 10px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Timer urgent pulse when <= 10 seconds */
#timer-chip.timer-urgent {
animation: timer-pulse 1s ease-in-out infinite;
}
@keyframes timer-pulse {
0%, 100% { border-top-color: #f33; border-bottom-color: #f33; color: #ffffffee; }
50% { border-top-color: #ff8080; border-bottom-color: #ff8080; color: #ff6666; }
}
/* Label INSIDE chip (from data-title) */
.chip::before {
content: attr(data-title);
position: absolute;
top: 4px;
left: 0;
right: 0;
text-align: center; /* center label */
font-size: 0.65rem;
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
color: #ffffffcc;
opacity: .95;
pointer-events: none;
}
/* Value (number/text) inside chip */
.chip > span {
font-size: 1.15rem; /* compact value size */
line-height: 1;
margin-top: 12px; /* sits under the label */
}
/* Optional: keep score chip from growing too wide */
#score-chip {
min-width: 64px;
}
/* ===== Container (unchanged from your block) ============================ */
.container {
max-width: 700px;
width: 99vw;
margin: 0 auto;
background: #00000000;
border-radius: 18px;
box-shadow: var(--shadow-soft);
padding: 10px 10px 22px 10px;
}
/* Hide/show for word points chip */
#word-points[hidden] {
display: none;
}
/* Round info text under the top-bar */
.round {
font-size: 15px;
font-weight: 600;
color: #0e56a0;
margin: 0 auto 4px auto;
max-width: 460px;
}
/* =====================================================================
Working Row, Board, Tiles
===================================================================== */
.working-row {
display: flex;
justify-content: center;
gap: 4px;
margin-bottom: 4px;
align-items: center; /* keep tiles vertically centered */
}
/* Single tile style (also reused for empty placeholder) */
.tile, .empty-tile {
aspect-ratio: 1 / 1;
width: 100%;
max-width: 100%;
min-width: 0;
min-height: 0;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
border-radius: 8px;
border: 1.3px solid #c6b791;
background: linear-gradient(180deg, #f7e8c4 70%, #ecd099 100%);
box-shadow: 0 2px 7px #adadad1c, 0 1px 3px #0002;
box-sizing: border-box;
font-size: 16px;
font-weight: 700;
cursor: pointer;
user-select: none;
position: relative;
transition: box-shadow 0.1s, background 0.1s, transform 0.15s ease;
}
.tile:hover:not(.empty):not(.opponent-covered):not(.tile-flying) {
transform: scale(0.90);
box-shadow: 0 1px 3px #adadad1c, 0 0px 2px #0002;
}
.tile:active:not(.empty):not(.opponent-covered):not(.tile-flying) {
transform: scale(0.85);
box-shadow: 0 0px 2px #0001;
}
/* Flying tile animation clone */
.tile.tile-flying {
aspect-ratio: unset;
box-shadow: 0 4px 16px rgba(0,0,0,0.25);
}
/* Ghost effect afterimages */
.tile.tile-flying-ghost {
aspect-ratio: unset;
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
filter: blur(1px);
}
/* Selected/removable state */
.tile.selected, .tile.removable {
box-shadow: 0 0 0 2.5px #33b3ff, 0 2px 6px #0064c81f;
background: linear-gradient(180deg, #ffe7b2 75%, #ffe5a3 100%);
}
.tile.removable {
cursor: pointer !important;
box-shadow: 0 0 0 2px #ffcc00, 0 2px 6px #edc53722;
outline: 1px solid #dd9b00;
}
/* VERSUS MODE: Opponent's tile selection - tiles appear covered/disappeared */
.tile.opponent-covered {
opacity: 0.3;
background: #999 !important;
color: #666 !important;
pointer-events: none;
position: relative;
}
.tile.opponent-covered::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: repeating-linear-gradient(
45deg,
transparent,
transparent 10px,
rgba(0, 0, 0, 0.1) 10px,
rgba(0, 0, 0, 0.1) 20px
);
}
/* Placeholder "empty tile" */
.tile.empty {
background: transparent;
border: 1px solid rgba(0,0,0,.06);
box-shadow: none;
cursor: default;
}
.empty-tile {
background: #efe7d8 !important;
color: #b2b2b2 !important;
font-size: 13px;
cursor: default;
border: 1.2px solid #d8d3c0;
}
/* Small value number in the tile corner */
.tile-value {
position: absolute;
bottom: 2px;
right: 3px;
font-size: 10px;
color: #6b5421 !important;
font-weight: 600;
opacity: 0.88;
text-shadow: 1px 1px 0 #fff, 0 1px 1px #cfc4b4;
pointer-events: none;
}
/* Multipliers - uses CSS variables defined in :root (see end of file)
Tile themes override these variables to change colors */
/* The grid board itself */
.board {
margin: 0 auto 10px auto;
display: grid;
grid-template-columns: repeat(10, minmax(0, 1fr));
gap: 0.3px;
background: #e6dcc6;
border-radius: 10px;
padding: 2px;
width: 100%;
aspect-ratio: 1 / 1; /* 10x10 square tiles = square board β prevents height flash on DOM rebuild */
box-shadow: 0 5px 14px #bcb49722;
box-sizing: border-box;
}
.board-row {
display: contents;
}
/* Keep important parts at unified width */
.board, .buttons, .working-row {
max-width: var(--center-max, 430px);
margin-left: auto;
margin-right: auto;
}
/* =====================================================================
Controls: Buttons, Score Preview, Flip Count Badge
===================================================================== */
/* Word points chip: compact, fixed basis so it doesn't shove the buttons */
.word-chip {
flex: 0 0 88px; /* fixed footprint */
height: 44px;
padding: 0 12px;
border-radius: 1px;
border: 1px solid #40c455;
background: #eaf9ee;
color: #167a3a;
font-weight: 800;
font-size: 0.95rem;
display: inline-flex;
align-items: center;
justify-content: center;
box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 2px 6px rgba(0,0,0,.06);
}
/* Muted look when <3 letters (keeps size, stops layout jump) */
.word-chip.is-empty {
background: #f3f5f8;
border-color: #e3e7ee;
color: #9aa4b2;
}
/* --------------------------------------------------
In-Game Status Bar (no visible bar background)
-------------------------------------------------- */
.play-msg {
box-sizing: border-box;
height: 30px;
line-height: 30px;
display: flex;
align-items: center;
justify-content: center;
font-weight: 800;
letter-spacing: 2px; /* optional for balance */
color: #fff !important;
text-transform: uppercase;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
background: transparent !important;
border: none !important;
box-shadow: none !important;
position: relative;
z-index: 2;
margin-bottom: 4px;
font-size: clamp(22px, 2vw, 22px); /* adaptive text size */
}
/* --- Info Bar Base --- */
.play-msg {
perspective: 800px;
}
.play-msg span {
display: inline-block;
opacity: 0;
transform: translateY(-20px);
animation: fadeInUp 0.4s ease-out forwards; /* default generic animation */
vertical-align: middle;
}
/* ============================================================
MESSAGE ANIMATIONS (Top Info Bar)
------------------------------------------------------------
OK β quick pop success
ERROR β soft bounce fall (like something went wrong)
INFO β steady entry (no fade-out) β used for round display
============================================================ */
/* Keep long OK messages from expanding bar */
.play-msg.ok {
font-size: clamp(18px, 1.6vw, 22px);
letter-spacing: 1px;
}
/* --- OK tone: pop-in success, then hold visible --- */
.play-msg.ok span {
animation: okPop 0.6s ease-out forwards;
text-shadow: 0 0 6px #3fff7a;
}
/* pop + stay visible */
@keyframes okPop {
0% {
opacity: 0;
transform: scale(0.6);
}
60% {
opacity: 1;
transform: scale(1.15);
}
80% {
transform: scale(0.95);
}
100% {
opacity: 1;
transform: scale(1);
}
/* β
stays fully visible */
}
/* --- ERROR tone: smooth bounce fall --- */
.play-msg.error span {
animation: softBounceFall 0.9s cubic-bezier(0.28, 0.84, 0.42, 1) forwards;
text-shadow: 0 0 6px #ff5a5a;
}
@keyframes softBounceFall {
0% {
opacity: 0;
transform: translateY(-80px) scaleY(0.9);
}
30% {
opacity: 1;
transform: translateY(0) scaleY(1.1);
}
45% {
transform: translateY(-8px) scaleY(0.95);
}
60% {
transform: translateY(5px) scaleY(1.05);
}
75% {
transform: translateY(-3px) scaleY(0.98);
}
90% {
transform: translateY(2px) scaleY(1.02);
}
100% {
opacity: 1;
transform: translateY(0) scaleY(1);
}
}
/* --- INFO tone: simple steady reveal (used for round info) --- */
.play-msg.info span {
animation: infoSteady 1s ease-out forwards;
text-shadow: 0 0 6px #6eb8ff;
}
@keyframes infoSteady {
0% {
opacity: 0;
transform: translateY(10px);
filter: blur(2px);
}
100% {
opacity: 1;
transform: translateY(0);
filter: none;
}
}
/* --------------------------------------------------
In-Game Play buttons (OK, CLEAR, PASS, FLIP)
-------------------------------------------------- */
/* Buttons row: tidy flex layout */
.buttons {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
padding-left: 0;
padding-bottom: 6px;
}
/* Buttons themselvesβno random margins */
.buttons .btn {
margin: 0;
}
button, .btn {
font-family: inherit;
font-size: 14px;
border: none;
border-radius: 50px;
min-width: 44px;
padding: 8px 13px;
cursor: pointer;
font-weight: 700;
transition: 0.1s;
}
.buttons > button {
flex: 1 1 0;
min-width: 0;
padding-left: 0;
padding-right: 0;
}
/* ==========================
UNIVERSAL BUTTON BASE STYLE
========================== */
#ok-btn,
#clear-btn,
#pass-btn,
#flip-btn {
position: relative;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
width: 60px;
height: 40px;
border: none;
outline: none;
cursor: pointer;
padding: 0;
overflow: hidden;
color: transparent;
font-size: 0;
user-select: none;
-webkit-tap-highlight-color: transparent;
transition: transform 0.12s ease, filter 0.12s ease;
filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.5)) brightness(1);
background-color: transparent;
background-blend-mode: multiply;
transform: translateY(-1px); /* raised by default */
}
/* Active (pressed) */
#ok-btn:active,
#clear-btn:active,
#pass-btn:active,
#flip-btn:active {
transform: translateY(1px) scale(0.95);
filter: brightness(0.9) drop-shadow(0 1px 1px rgba(0, 0, 0, 0.5));
}
/* ==========================
INDIVIDUAL BACKGROUNDS
========================== */
#ok-btn {
background-image: url("../images/board/button_ok.png");
}
#clear-btn {
background-image: url("../images/board/button_clear.png");
}
#pass-btn {
background-image: url("../images/board/button_pass.png");
}
#flip-btn {
background-image: url("../images/board/button_flip.png");
}
/* ==========================
DISABLED STATES
========================== */
#ok-btn[disabled],
#pass-btn[disabled],
#flip-btn[disabled] {
opacity: 0.4;
cursor: not-allowed;
pointer-events: none;
filter: brightness(0.9) drop-shadow(0 1px 1px rgba(0, 0, 0, 0.3));
transform: none;
}
/* Keep the "clear" button active state same look as others */
#clear-btn[disabled] {
opacity: 0.4;
cursor: not-allowed;
pointer-events: none;
filter: brightness(0.9) drop-shadow(0 1px 1px rgba(0, 0, 0, 0.3));
transform: none;
}
/* ==========================
ENABLED POP / REACTIVATION ANIMATION
========================== */
/* Keyframes for the quick pulse */
@keyframes buttonReenabled {
0% {
transform: scale(0.9);
filter: brightness(1.2) drop-shadow(0 6px 6px rgba(0, 0, 0, 0.6));
}
50% {
transform: scale(1.1);
filter: brightness(1.3) drop-shadow(0 5px 5px rgba(0, 0, 0, 0.4));
}
100% {
transform: scale(1);
filter: brightness(1) drop-shadow(0 3px 3px rgba(0, 0, 0, 0.5));
}
}
/* Add a flash/pulse when a button transitions from disabled β enabled */
#ok-btn:not([disabled]).just-enabled,
#clear-btn:not([disabled]).just-enabled,
#pass-btn:not([disabled]).just-enabled,
#flip-btn:not([disabled]).just-enabled {
animation: buttonReenabled 0.25s ease-out;
}
/* ==========================
FLIP COUNTER
========================== */
#flip-btn {
position: relative !important;
}
#flip-btn .flip-count {
position: absolute;
top: 35%;
right: 4px;
transform: translateY(-50%);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 10px;
font-weight: bold;
background: #000;
color: #fff;
border-radius: 50%;
min-width: 18px;
height: 20px;
padding: 0 2px;
box-shadow: 0 0 4px rgba(0, 0, 0, .4);
}
/* Score preview line under the working row */
.score-preview {
text-align: center;
font-size: 16px;
margin: 1px 0 10px 0;
color: #0b753d;
min-height: 20px;
}
/* Generic message line helper */
.message {
text-align: center;
font-size: 14px;
margin: 6px 0 0 0;
color: #cc1133;
min-height: 16px;
}
/* =====================================================================
Start Overlay / Settings Modal / Login / Countdown
===================================================================== */
#auth-modal .btn {
cursor: pointer;
}
.auth-box {
background: #fff;
border-radius: 12px;
padding: 20px;
width: 100%;
max-width: 360px;
box-shadow: 0 10px 30px #0003;
}
.auth-title {
margin: 0 0 12px 0;
text-align: center; /* center the heading */
}
.auth-divider {
display: flex;
align-items: center;
text-align: center;
color: #888;
font-size: 0.8rem;
margin: 12px 0;
}
.auth-divider::before,
.auth-divider::after {
content: "";
flex: 1;
border-bottom: 1px solid #ccc;
}
.auth-divider:not(:empty)::before {
margin-right: 0.75em;
}
.auth-divider:not(:empty)::after {
margin-left: 0.75em;
}
.auth-actions {
display: flex;
flex-direction: column;
gap: 8px;
margin-top: 12px;
}
.auth-actions button {
width: 100%;
padding: 8px 12px;
border-radius: 8px;
font-size: 14px;
font-weight: 500;
text-align: center;
}
.auth-actions .signup {
background: #18a2ee;
color: #fff;
}
.auth-actions .btn-clear {
background: hsl(2, 74%, 48%);
color: #444;
}
.or-divider {
text-align: center;
margin: 12px 0;
font-size: 0.9rem;
opacity: 0.6;
}
/* Google abd Microsoft Login Button */
.google-btn, .microsoft-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
width: calc(100% - 4px); /* shrink slightly so it fits inside */
background: #fff;
color: #444;
border: 1px solid #ccc;
border-radius: 6px;
font-size: 14px;
font-weight: 500;
padding: 8px 12px;
text-decoration: none;
transition: background 0.2s, box-shadow 0.2s;
box-sizing: border-box; /* respect padding inside width */
}
.google-btn:hover, .microsoft-btn:hover {
background: #edf4f5;
box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
.google-btn img, .microsoft-btn img {
width: 18px;
height: 18px;
}
/* Generic overlay (login, signup) */
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5); /* dim backdrop */
display: flex;
align-items: center;
justify-content: center;
z-index: 1200; /* above header, below drawer maybe */
}
.overlay.is-hidden {
display: none !important;
}
/* Change username overlay */
/* Username Overlay */
.username-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
}
.username-overlay.is-hidden {
display: none;
}
.username-overlay-content {
background: #fff;
border-radius: 16px;
padding: 28px 24px;
max-width: 420px;
width: 90%;
box-shadow: 0 14px 40px rgba(25,40,80,.15);
text-align: center;
}
#username-overlay h2 {
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 12px;
color: #40c455;
}
#username-overlay p {
font-size: 1rem;
margin: 6px 0;
color: #444;
}
#username-overlay .username-hint {
font-size: 0.85rem;
color: #888;
font-style: italic;
margin-top: 2px;
}
#username-input {
width: 100%;
padding: 12px 14px;
border: 1px solid #ccc;
border-radius: 8px;
margin-top: 14px;
font-size: 1rem;
box-sizing: border-box;
align-items: center;
}
.username-overlay-actions {
margin-top: 16px;
display: flex;
gap: 10px;
justify-content: center;
}
#username-submit {
background: #2ecc71; /* green */
color: #fff;
font-weight: 600;
}
#username-close {
background: #f1c40f; /* yellow */
color: #333;
font-weight: 600;
}
.btn {
transition: background-color 0.2s ease, opacity 0.2s ease;
}
.btn:hover {
opacity: 0.9;
cursor: pointer;
}
.btn-ok:hover {
background-color: #2e7d32; /* darker green */
color: #fff;
}
/* Settings modal */
.settings-modal {
position: fixed;
left: 0;
top: 0;
width: 100vw;
height: 100vh;
background: rgba(0,0,0,0.25);
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
}
.settings-modal-content {
background: var(--surface-warm);
border-radius: 20px;
box-shadow: 0 6px 40px #0002;
padding: 36px 40px 20px 40px;
min-width: 320px;
text-align: center;
}
.settings-modal h2 {
margin-bottom: 20px;
}
.switch {
display: flex;
align-items: center;
font-size: 1.1em;
margin: 12px 0;
gap: 10px;
}
.switch input {
display: none;
}
.switch .slider {
display: inline-block;
width: 44px;
height: 24px;
background: #e4e4e4;
border-radius: 13px;
position: relative;
margin-right: 10px;
cursor: pointer;
transition: background 0.25s;
}
.switch input:checked + .slider {
background: var(--brand-green);
}
.switch .slider:before {
content: "";
position: absolute;
left: 3px;
top: 3px;
width: 18px;
height: 18px;
border-radius: 50%;
background: #fff;
transition: left 0.22s;
box-shadow: 0 2px 4px #0001;
}
.switch input:checked + .slider:before {
left: 23px;
}
/* General modal backdrop */
.modal-backdrop {
position: fixed;
top: 0;
right: 0;
left: 0;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.65);
z-index: 950;
}
/* Visuals */
.modal-backdrop {
background: #fff; /* solid white card backdrop */
}
/* your existing overlay rule should keep display:flex by default */
.modal-backdrop {
display: flex;
}
/* hide it with the helper */
.modal-backdrop.is-hidden {
display: none !important;
}
/* ===============================
Single Player / Daily overlay
Fullscreen backdrop
=============================== */
/* White card also used by daily start / end overlays*/
.modal-card {
background: #fff;
width: min(92vw, 460px);
border-radius: 14px;
box-shadow: 0 12px 32px rgba(0,0,0,0.2);
padding: 18px 20px 20px;
}
/* Title for end overlay */
.modal-title {
margin: 0 0 10px;
font-size: 20px;
font-weight: 700;
}
/* Align Daily overlays (start + end) vertically like SP overlay */
#daily-start-overlay,
#daily-end-overlay {
position: fixed;
left: 0;
top: 0; /* full viewport */
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0,0,0,0.5);
z-index: 1200;
padding-bottom: 20px; /* optional visual tweak */
}
/* ===============================
Unified Daily Top 3 List (Start + End overlay)
=============================== */
#daily-start-top3 li,
#daily-end-top3 li {
display: grid;
grid-template-columns: 0.6em auto auto; /* π slightly tighter than 1.4em */
align-items: center;
gap: 6px; /* π was 8px before */
padding: 8px 12px;
border: 1px solid #e5e5e5;
border-radius: 8px;
margin-top: 6px;
background: #fff;
font-size: 0.95rem;
line-height: 1.3;
}
/* Text + avatar styling */
#daily-start-top3 li strong,
#daily-end-top3 li strong {
font-weight: 600;
}
#daily-start-top3 li img,
#daily-end-top3 li img {
width: 22px;
height: 22px;
border-radius: 50%;
object-fit: cover;
margin-right: 4px;
}
/* Score + time column */
#daily-start-top3 li .score-wrap,
#daily-end-top3 li .score-wrap {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-end;
text-align: right;
gap: 60px; /* π was 6px before */
min-width: 100px;
}
#daily-start-top3 li .time,
#daily-end-top3 li .time {
color: #777;
font-size: 0.8em;
}
#daily-start-top3 li .score,
#daily-end-top3 li .score {
font-weight: 600;
}
/* Highlights for top 3 */
#daily-start-top3 li:nth-child(1),
#daily-end-top3 li:nth-child(1) {
background: #fffbea;
border-color: #f7d560;
}
#daily-start-top3 li:nth-child(2),
#daily-end-top3 li:nth-child(2) {
background: #f8fafc;
border-color: #c9d3dc;
}
#daily-start-top3 li:nth-child(3),
#daily-end-top3 li:nth-child(3) {
background: #fff3f3;
border-color: #e2b6b6;
}
/* Dark mode for Daily Top 3 lists */
body.dark-mode #daily-start-top3 li,
body.dark-mode #daily-end-top3 li {
background: #1e293b;
border-color: #374151;
color: #e2e8f0;
}
body.dark-mode #daily-start-top3 li strong,
body.dark-mode #daily-end-top3 li strong {
color: #fff;
}
body.dark-mode #daily-start-top3 li .time,
body.dark-mode #daily-end-top3 li .time {
color: #94a3b8;
}
/* Dark mode medal colors - subtle tints */
body.dark-mode #daily-start-top3 li:nth-child(1),
body.dark-mode #daily-end-top3 li:nth-child(1) {
background: rgba(251, 191, 36, 0.15);
border-color: rgba(251, 191, 36, 0.4);
}
body.dark-mode #daily-start-top3 li:nth-child(2),
body.dark-mode #daily-end-top3 li:nth-child(2) {
background: rgba(148, 163, 184, 0.15);
border-color: rgba(148, 163, 184, 0.4);
}
body.dark-mode #daily-start-top3 li:nth-child(3),
body.dark-mode #daily-end-top3 li:nth-child(3) {
background: rgba(180, 83, 9, 0.15);
border-color: rgba(180, 83, 9, 0.4);
}
/* Header (avatar + name) */
.sp-header {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 12px;
}
.sp-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
background: #eee;
object-fit: cover;
}
.sp-username {
font-weight: 700;
}
.sp-subtitle {
font-size: 12px;
color: #777;
}
/* Rows like MP standings */
.sp-stats, .sp-results {
display: grid;
gap: 8px;
margin: 10px 0 14px;
}
.sp-stats .row, .sp-results .row {
display: flex;
justify-content: space-between;
align-items: baseline;
background: #fafafa;
border: 1px solid #eee;
border-radius: 10px;
padding: 10px 12px;
}
.label {
color: #555;
}
.value {
font-weight: 700;
}
.muted {
color: #888;
margin-left: 6px;
}
/* =====================================================================
SP START OVERLAY - Redesigned with larger avatar card
===================================================================== */
/* Semi-transparent backdrop to show hub behind */
#sp-start-overlay.modal-backdrop {
background: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
/* Larger modal card for start overlay */
#sp-start-overlay .modal-card {
background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
border-radius: 20px;
padding: 32px 40px;
min-width: 340px;
max-width: 400px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
text-align: center;
}
/* Redesigned header - centered with large avatar */
#sp-start-overlay .sp-header {
flex-direction: column;
align-items: center;
gap: 16px;
margin-bottom: 24px;
}
#sp-start-overlay .sp-avatar {
width: 100px;
height: 100px;
border-radius: 50%;
border: 4px solid var(--brand-green, #40c455);
box-shadow: 0 8px 24px rgba(64, 196, 85, 0.3);
}
#sp-start-overlay .sp-user {
text-align: center;
}
#sp-start-overlay .sp-username {
font-size: 1.5rem;
font-weight: 700;
color: var(--ink, #174a87);
margin-bottom: 4px;
}
#sp-start-overlay .sp-subtitle {
font-size: 0.95rem;
color: #666;
font-weight: 500;
}
/* Stats section - cleaner look */
#sp-start-overlay .sp-stats {
background: #f1f5f9;
border-radius: 12px;
padding: 16px;
margin: 0 0 24px;
}
#sp-start-overlay .sp-stats .row {
background: #ffffff;
border: none;
border-radius: 8px;
padding: 12px 16px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
#sp-start-overlay .sp-stats .label {
font-size: 0.9rem;
color: #64748b;
}
#sp-start-overlay .sp-stats .value {
font-size: 1.1rem;
color: var(--ink, #174a87);
}
/* Action buttons container */
#sp-start-overlay .actions {
margin-top: 8px;
display: flex;
gap: 12px;
}
#sp-start-overlay #sp-btn-cancel {
flex: 1;
padding: 16px 24px;
font-size: 1.1rem;
font-weight: 600;
border-radius: 12px;
background: linear-gradient(135deg, #6b7280, #4b5563);
color: #fff;
border: none;
cursor: pointer;
box-shadow: 0 4px 12px rgba(107, 114, 128, 0.3);
transition: all 0.2s ease;
}
#sp-start-overlay #sp-btn-cancel:hover {
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(107, 114, 128, 0.4);
}
#sp-start-overlay #sp-btn-start {
flex: 2;
padding: 16px 32px;
font-size: 1.2rem;
font-weight: 700;
border-radius: 12px;
background: linear-gradient(135deg, var(--brand-green, #40c455), #27945e);
color: #fff;
border: none;
cursor: pointer;
box-shadow: 0 4px 16px rgba(64, 196, 85, 0.4);
transition: all 0.2s ease;
}
#sp-start-overlay #sp-btn-start:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(64, 196, 85, 0.5);
}
/* Dark mode support for sp-start-overlay */
body.dark-mode #sp-start-overlay.modal-backdrop {
background: rgba(0, 0, 0, 0.75);
}
body.dark-mode #sp-start-overlay .modal-card {
background: linear-gradient(145deg, #1e293b 0%, #0f172a 100%);
}
body.dark-mode #sp-start-overlay .sp-username {
color: #fff;
}
body.dark-mode #sp-start-overlay .sp-subtitle {
color: #94a3b8;
}
body.dark-mode #sp-start-overlay .sp-stats {
background: #0f172a;
}
body.dark-mode #sp-start-overlay .sp-stats .row {
background: #1e293b;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
body.dark-mode #sp-start-overlay .sp-stats .label {
color: #94a3b8;
}
body.dark-mode #sp-start-overlay .sp-stats .value {
color: #fff;
}
/* =====================================================================
SP END OVERLAY - Redesigned Game Over screen
===================================================================== */
/* Semi-transparent backdrop to show game behind */
#sp-end-overlay.modal-backdrop {
background: rgba(0, 0, 0, 0.7);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
/* Larger modal card for end overlay */
#sp-end-overlay .modal-card {
background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
border-radius: 20px;
padding: 32px 40px;
min-width: 360px;
max-width: 420px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
text-align: center;
}
/* Redesigned header - centered with large avatar */
#sp-end-overlay .sp-header {
flex-direction: column;
align-items: center;
gap: 12px;
margin-bottom: 16px;
}
#sp-end-overlay .sp-avatar {
width: 80px;
height: 80px;
border-radius: 50%;
border: 4px solid var(--brand-blue, #18a2ee);
box-shadow: 0 6px 20px rgba(24, 162, 238, 0.3);
}
#sp-end-overlay .sp-user {
text-align: center;
}
#sp-end-overlay .sp-username {
font-size: 1.3rem;
font-weight: 700;
color: var(--ink, #174a87);
margin-bottom: 2px;
}
#sp-end-overlay .sp-subtitle {
font-size: 0.9rem;
color: #666;
font-weight: 500;
}
/* Game Over title */
#sp-end-overlay .modal-title {
font-size: 1.8rem;
font-weight: 800;
color: var(--ink, #174a87);
margin: 8px 0 20px;
letter-spacing: -0.5px;
}
/* Results section - prominent display */
#sp-end-overlay .sp-results {
background: #f1f5f9;
border-radius: 12px;
padding: 16px;
margin: 0 0 16px;
}
#sp-end-overlay .sp-results .row {
background: #ffffff;
border: none;
border-radius: 8px;
padding: 14px 16px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
#sp-end-overlay .sp-results .label {
font-size: 0.9rem;
color: #64748b;
}
#sp-end-overlay .sp-results .value {
font-size: 1.2rem;
font-weight: 700;
color: var(--ink, #174a87);
}
/* NEW badge styling */
#sp-end-overlay .badge-new {
display: inline-block;
background: linear-gradient(135deg, #f59e0b, #d97706);
color: #fff;
font-size: 0.65rem;
font-weight: 700;
padding: 3px 8px;
border-radius: 10px;
margin-left: 8px;
text-transform: uppercase;
letter-spacing: 0.5px;
animation: badge-pulse 1.5s ease-in-out infinite;
}
@keyframes badge-pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.1); }
}
/* Result message styling */
#sp-end-overlay .result-msg {
margin: 16px 0;
padding: 12px 16px;
border-radius: 10px;
font-size: 0.95rem;
}
/* Action buttons */
#sp-end-overlay .actions {
display: flex;
gap: 12px;
margin-top: 8px;
}
#sp-end-overlay #sp-btn-again {
flex: 1;
padding: 14px 24px;
font-size: 1.1rem;
font-weight: 700;
border-radius: 12px;
background: linear-gradient(135deg, var(--brand-green, #40c455), #27945e);
color: #fff;
border: none;
cursor: pointer;
box-shadow: 0 4px 16px rgba(64, 196, 85, 0.4);
transition: all 0.2s ease;
}
#sp-end-overlay #sp-btn-again:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(64, 196, 85, 0.5);
}
#sp-end-overlay #sp-btn-quit {
flex: 1;
padding: 14px 24px;
font-size: 1.1rem;
font-weight: 600;
border-radius: 12px;
background: #e2e8f0;
color: #475569;
border: none;
cursor: pointer;
transition: all 0.2s ease;
}
#sp-end-overlay #sp-btn-quit:hover {
background: #cbd5e1;
transform: translateY(-2px);
}
/* Dark mode support for sp-end-overlay */
body.dark-mode #sp-end-overlay.modal-backdrop {
background: rgba(0, 0, 0, 0.8);
}
body.dark-mode #sp-end-overlay .modal-card {
background: linear-gradient(145deg, #1e293b 0%, #0f172a 100%);
}
body.dark-mode #sp-end-overlay .sp-username,
body.dark-mode #sp-end-overlay .modal-title {
color: #fff;
}
body.dark-mode #sp-end-overlay .sp-subtitle {
color: #94a3b8;
}
body.dark-mode #sp-end-overlay .sp-results {
background: #0f172a;
}
body.dark-mode #sp-end-overlay .sp-results .row {
background: #1e293b;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
body.dark-mode #sp-end-overlay .sp-results .label {
color: #94a3b8;
}
body.dark-mode #sp-end-overlay .sp-results .value {
color: #fff;
}
body.dark-mode #sp-end-overlay #sp-btn-quit {
background: #334155;
color: #e2e8f0;
}
body.dark-mode #sp-end-overlay #sp-btn-quit:hover {
background: #475569;
}
/* SP Result messages styling (after game) */
.result-msg {
text-align: center;
margin: 12px 0 16px;
font-size: 15px;
font-weight: 600;
padding: 8px 12px;
border-radius: 10px;
}
.result-msg.success {
color: #155724;
background: #d4edda;
border: 1px solid #c3e6cb;
}
.result-msg.partial {
color: #856404;
background: #fff3cd;
border: 1px solid #ffeeba;
}
.result-msg.fail {
color: #721c24;
background: #f8d7da;
border: 1px solid #f5c6cb;
}
/* Row highlight when a new record is set */
.row.is-new {
background: #e9f7ef; /* soft green */
border-color: #c8e6c9;
}
.row.is-new .value {
color: #1b5e20;
}
/* Alternative highlight for word-only record (a little warmer) */
.row.is-new--word {
background: #fff7e0; /* soft yellow */
border-color: #ffe7ad;
}
.row.is-new--word .value {
color: #7a5700;
}
/* Tiny "NEW" badge */
.badge-new {
display: inline-block;
margin-left: 8px;
padding: 2px 6px;
font-size: 11px;
font-weight: 700;
border-radius: 8px;
background: #ffd76a;
border: 1px solid #f0c657;
color: #4a3a00;
vertical-align: middle;
}
/* Buttons */
.actions {
display: flex;
gap: 10px;
justify-content: center;
margin-top: 6px;
}
.btn-primary {
background: #ffd76a;
border: none;
border-radius: 10px;
padding: 10px 14px;
font-weight: 700;
cursor: pointer;
}
.btn-primary:hover {
filter: brightness(0.98);
}
.btn-secondary {
background: #f1f1f1;
border: 1px solid #ddd;
border-radius: 10px;
padding: 10px 14px;
font-weight: 600;
cursor: pointer;
}
.btn-secondary:hover {
filter: brightness(0.98);
}
/* Prevent page scroll while overlay visible */
body.overlay-open {
overflow: hidden;
}
/* ===================================================
START - Multiplayer Game Over RESULTS Overlay (blurred layer)
=================================================== */
/* ===================================================
Multiplayer Game Over Overlay + Mini Tiles
=================================================== */
/* --- Middle-column container between name and PTS --- */
#go-standings .best-col {
display: flex;
align-items: center;
gap: 8px;
}
/* --- Group of mini tiles --- */
:is(#go-standings, .go-best) .mini-tiles {
display: flex;
gap: 2px;
flex-wrap: nowrap;
}
/* --- Compact mini tile --- */
:is(#go-standings, .go-best) .mini-tile {
width: 20px;
height: 18px;
border-radius: 3px;
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 10px;
position: relative;
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.12);
letter-spacing: 0.02em;
}
:is(#go-standings, .go-best) .mini-tile .mini-val {
position: absolute;
bottom: 0px;
right: 0px;
font-size: 0.4rem;
opacity: 0.85;
}
/* --- Score label next to tiles --- */
:is(#go-standings, .go-best) .mini-word-score,
.go-best .pts {
font-size: 10px;
font-weight: 800;
color: #495675;
}
/* --- Tile colors --- */
.mini-tile.x1 {
background: var(--tile-x1-bg);
color: var(--tile-x1-color);
text-shadow: var(--tile-x1-shadow);
}
.mini-tile.lblue {
background: var(--tile-lblue-bg);
color: var(--tile-lblue-color);
text-shadow: var(--tile-lblue-shadow);
}
.mini-tile.dblue {
background: var(--tile-dblue-bg);
color: var(--tile-dblue-color);
text-shadow: var(--tile-dblue-shadow);
}
.mini-tile.lgreen {
background: var(--tile-lgreen-bg);
color: var(--tile-lgreen-color);
text-shadow: var(--tile-lgreen-shadow);
}
.mini-tile.dgreen {
background: var(--tile-dgreen-bg);
color: var(--tile-dgreen-color);
text-shadow: var(--tile-dgreen-shadow);
}
/* ===================================================
Layout + Overlay
=================================================== */
.go-title {
margin: 0 0 4px 0;
}
.go-standings {
margin: 4px 0 6px 0;
}
.go-bestword {
font-size: 0.9em;
opacity: 0.9;
margin-bottom: 10px;
border: 1px solid rgba(255, 255, 255, 0.86);
border-radius: 6px;
background: rgba(255, 255, 255, 0.34);
padding: 0 4px 2px;
}
.go-footer {
display: flex;
align-items: center;
justify-content: space-between;
}
.go-countdown {
font-weight: 700;
}
.go-leave {
padding: 6px 12px;
border-radius: 8px;
}
/* ===================================================
Multiplayer Game Over RESULTS Overlay (blurred layer)
=================================================== */
#gameover-results-overlay {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.55);
backdrop-filter: blur(10px);
z-index: 9500;
opacity: 0;
pointer-events: none;
transition: opacity 0.4s ease;
border-radius: 12px;
width: 100%;
}
#gameover-results-overlay.active {
opacity: 1;
pointer-events: auto;
}
/* --- Inner content --- */
#gameover-results-content {
text-align: center;
color: #0000009e;
width: min(95vw, 700px); /* Wider on desktop, similar to Versus overlay */
max-width: 700px;
max-height: 85vh;
overflow-y: auto;
padding: 4px 4px 6px;
background: #faf5f5;
border: 1px solid rgba(243, 243, 243, 0.29);
border-radius: 12px;
font-size: 0.9rem;
}
#gameover-results-content h2.go-title {
font-size: 1.1rem;
margin-bottom: 0;
margin-top: 2px;
font-weight: 800;
}
/* Compact coin rewards block when at bottom */
#mp-rewards-container > div {
padding: 8px 12px !important;
margin: 8px auto !important;
}
#mp-rewards-container [style*="font-size: 1.8rem"] {
font-size: 1.4rem !important;
}
/* --- Row styling (high readability + smooth animation) --- */
.go-row {
background: rgba(255, 255, 255, 0.97); /* nearly solid white for clarity */
color: #222;
border: 1px solid rgba(0, 0, 0, 0.12);
border-radius: 5px;
margin-bottom: 2px;
padding: 1px 5px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
transition: transform 0.15s ease, box-shadow 0.15s ease;
/* --- Fade-in slide for results --- */
opacity: 0;
transform: translateY(8px);
animation: fadeInUp 0.4s ease forwards;
font-size: 0.75rem;
}
.go-row:hover {
transform: translateY(-1px);
box-shadow: 0 3px 8px rgba(0,0,0,0.2);
}
/* --- Podium backgrounds for top 10 players --- */
#go-standings .go-row:nth-child(1) {
background: linear-gradient(180deg, #ffe77a 0%, #ffcc00 100%) !important;
color: #222;
font-weight: 800;
border: 1px solid #f3d24b;
}
#go-standings .go-row:nth-child(2) {
background: linear-gradient(353deg, #afa3a3 0%, #e1e1e1 100%) !important;
color: #222;
font-weight: 700;
border: 1px solid #d0d0d0;
}
#go-standings .go-row:nth-child(3) {
background: linear-gradient(180deg, #ffecd1 0%, #e9ce9d 100%) !important;
color: #222;
font-weight: 700;
border: 1px solid #d79550;
}
/* a subtle glow for top 3 */
#go-standings .go-row:nth-child(-n+3) {
box-shadow: 0 0 10px rgba(255, 215, 0, 0.4);
}
/* Make top-3 backgrounds shinier without altering your chosen colors */
#go-standings .go-row:nth-child(1),
#go-standings .go-row:nth-child(2),
#go-standings .go-row:nth-child(3) {
position: relative;
overflow: hidden;
}
/* Add a soft highlight gradient overlay */
#go-standings .go-row:nth-child(-n+3)::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient( to bottom right, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.15) 40%, rgba(255, 255, 255, 0) 100% );
pointer-events: none;
mix-blend-mode: screen;
border-radius: inherit;
}
/* Enhance glow effect */
#go-standings .go-row:nth-child(-n+3) {
box-shadow: 0 0 12px rgba(255, 255, 255, 0.4), 0 0 20px rgba(255, 215, 0, 0.25);
}
/* Keep the rest plain white */
#go-standings .go-row:nth-child(n+4) {
background: rgba(255, 255, 255, 0.97);
}
/* --- Podium colors for top 10 players --- */
/* --- Medals directly behind player names --- */
#go-standings .go-row:nth-child(1) .player-name::after {
content: " π₯";
}
#go-standings .go-row:nth-child(2) .player-name::after {
content: " π₯";
}
#go-standings .go-row:nth-child(3) .player-name::after {
content: " π₯";
}
/* optional fine-tuning */
#go-standings .go-row .player-name::after {
margin-left: 6px;
font-size: 1rem;
vertical-align: middle;
opacity: 0.9;
}
@keyframes fadeInUp {
to {
opacity: 1;
transform: translateY(0);
}
}
/* --- Tighter spacing inside row --- */
.go-row > div {
display: flex;
align-items: center;
gap: 10px;
}
/* --- Best word footer --- */
#best {
margin-top: 18px;
font-weight: 600;
text-align: center;
opacity: 0.85;
}
/* ===================================================
DARK MODE - Multiplayer Game Over Overlay
=================================================== */
body.dark-mode #gameover-results-content {
background: rgba(26, 31, 46, 0.95);
color: var(--text-primary);
border: 1px solid rgba(255, 255, 255, 0.1);
}
body.dark-mode #gameover-results-content h2.go-title {
color: #ffffff !important;
}
body.dark-mode .go-bestword {
color: rgba(255, 255, 255, 0.9) !important;
border: 1px solid rgba(255, 255, 255, 0.2);
background: rgba(255, 255, 255, 0.05);
}
body.dark-mode .go-countdown {
color: #ffffff !important;
}
body.dark-mode .go-row {
background: rgba(255, 255, 255, 0.1);
color: #e8eaed;
border: 1px solid rgba(255, 255, 255, 0.15);
}
/* Keep top 3 podium colors vibrant in dark mode */
body.dark-mode #go-standings .go-row:nth-child(1) {
background: linear-gradient(180deg, #ffe77a 0%, #ffcc00 100%) !important;
color: #222 !important;
}
body.dark-mode #go-standings .go-row:nth-child(2) {
background: linear-gradient(353deg, #afa3a3 0%, #e1e1e1 100%) !important;
color: #222 !important;
}
body.dark-mode #go-standings .go-row:nth-child(3) {
background: linear-gradient(180deg, #ffecd1 0%, #e9ce9d 100%) !important;
color: #222 !important;
}
/* ===================================================
END - Multiplayer Game Over RESULTS Overlay (blurred layer)
=================================================== */
/* ===================================================
START - Multiplayer GAME OVER SECOND AND THIRD Overlay. COUNTDOWN
===================================================== */
/* Ad Overlay styles */
#ad-overlay {
position: fixed;
inset: 0; /* top:0; right:0; bottom:0; left:0 */
background: #f0f2f5; /* soft neutral background β not harsh white */
display: flex;
align-items: center;
justify-content: center;
z-index: 9000; /* above game, below big timer */
border-radius: inherit;
}
#ad-overlay.is-hidden {
display: none;
}
#ad-content {
max-width: 90%;
max-height: 90%;
display: flex;
align-items: center;
justify-content: center;
}
/* House ad text styling */
.house-ad-text {
font-size: 1.25rem;
font-weight: 600;
text-align: center;
line-height: 1.5;
color: #333;
max-width: 500px;
padding: 1rem;
}
/* Ad countdown badge - bottom right corner */
.ad-countdown {
position: absolute;
bottom: 20px;
right: 20px;
background: rgba(0, 0, 0, 0.7);
color: #fff;
padding: 8px 14px;
border-radius: 20px;
font-size: 0.9rem;
font-weight: 500;
backdrop-filter: blur(4px);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
transition: opacity 0.3s ease;
z-index: 10;
}
.ad-countdown.is-hidden {
display: none;
}
.ad-countdown #ad-countdown-value {
font-weight: 700;
font-variant-numeric: tabular-nums;
}
/* ββ House Ad Promo Cards βββββββββββββββββββββββββββββββββββββββββββ */
.house-ad-card {
position: relative;
width: 380px;
max-width: 90vw;
padding: 2.5rem 2rem 2rem;
border-radius: 20px;
background: linear-gradient(145deg, var(--ha-grad-start), var(--ha-grad-end));
color: #fff;
text-align: center;
overflow: hidden;
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.35),
0 0 0 1px rgba(255, 255, 255, 0.08) inset;
animation: houseAdFadeIn 0.4s ease-out;
}
@keyframes houseAdFadeIn {
from { opacity: 0; transform: scale(0.92) translateY(12px); }
to { opacity: 1; transform: scale(1) translateY(0); }
}
/* Soft glow effect behind the card */
.house-ad-card__glow {
position: absolute;
top: -40%;
left: -20%;
width: 140%;
height: 140%;
background: radial-gradient(ellipse at center, rgba(255,255,255,0.12) 0%, transparent 70%);
pointer-events: none;
}
/* Icon circle */
.house-ad-card__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 64px;
height: 64px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.18);
backdrop-filter: blur(6px);
margin: 0 auto 1rem;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
}
.house-ad-card__icon svg {
width: 30px;
height: 30px;
stroke: #fff;
stroke-width: 2;
}
/* Title */
.house-ad-card__title {
margin: 0 0 0.5rem;
font-size: 1.5rem;
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1.2;
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}
/* Subtitle / description */
.house-ad-card__subtitle {
margin: 0 0 1.5rem;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
opacity: 0.9;
}
/* CTA button */
.house-ad-card__cta {
display: inline-block;
padding: 0.65rem 2rem;
border: none;
border-radius: 50px;
background: rgba(255, 255, 255, 0.95);
color: var(--ha-grad-end, #333);
font-size: 0.95rem;
font-weight: 700;
cursor: pointer;
transition: transform 0.15s ease, box-shadow 0.15s ease;
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.2);
pointer-events: auto !important;
}
.house-ad-card__cta:hover {
transform: translateY(-1px);
box-shadow: 0 5px 18px rgba(0, 0, 0, 0.3);
}
.house-ad-card__cta:active {
transform: translateY(0);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
/* LexiLayers badge at the bottom */
.house-ad-card__badge {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
margin-top: 1.5rem;
font-size: 0.75rem;
font-weight: 500;
opacity: 0.6;
letter-spacing: 0.03em;
}
.house-ad-card__badge-logo {
width: 16px;
height: 16px;
border-radius: 3px;
}
/* Dark-mode ad overlay background β match the game theme instead of white */
body.dark-mode #ad-overlay {
background: #1a1f2e;
}
/* Mobile responsive ad styles */
@media (max-width: 600px) {
.house-ad-text {
font-size: 1rem;
padding: 0.75rem;
max-width: 90%;
}
.house-ad-card {
width: 320px;
padding: 2rem 1.5rem 1.5rem;
}
.house-ad-card__icon {
width: 52px;
height: 52px;
}
.house-ad-card__icon svg {
width: 24px;
height: 24px;
}
.house-ad-card__title {
font-size: 1.25rem;
}
.house-ad-card__subtitle {
font-size: 0.9rem;
}
.ad-countdown {
/* Position above bottom-nav (58px) + safe area + margin */
bottom: calc(var(--bottom-nav-h, 58px) + env(safe-area-inset-bottom, 0px) + 12px);
right: 12px;
padding: 6px 10px;
font-size: 0.75rem;
border-radius: 16px;
}
}
/* Used for pre-challenge and game over overlays */
#big-timer {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgb(0 0 0 / 37%);
backdrop-filter: blur(10px);
color: #fff;
z-index: 25;
pointer-events: none;
opacity: 0;
transform: scale(0.96);
transition: opacity .3s ease, transform .3s ease;
border-radius: 12px;
}
#big-timer.active {
opacity: 1;
transform: scale(1);
}
#big-timer.active,
#ad-overlay:not(.is-hidden) {
pointer-events: all;
}
#big-timer.active *,
#ad-overlay * {
pointer-events: none;
}
#big-timer .center {
display: flex;
flex-direction: column; /* β stack vertically */
align-items: center;
justify-content: center;
text-align: center;
}
#big-timer .label {
font-size: 1.8rem;
font-weight: 700;
margin: 0px 16px 24px 16px;
color: #fff;
text-shadow: 0 0 25px rgba(0,0,0,.8);
max-width: 90%;
line-height: 1.3;
}
/* The circle that holds only the number */
#big-timer .countdown {
position: relative;
width: 140px;
height: 140px;
border-radius: 50%;
border: 8px solid rgba(255,255,255,0.25);
display: flex;
align-items: center;
justify-content: center;
background: rgba(0,0,0,.6);
box-shadow: 0 0 35px rgba(0,0,0,.9);
animation: countdownPulse 1.5s ease-in-out infinite;
}
#big-timer .num {
font-size: 4rem;
font-weight: 900;
line-height: 1;
}
/* Mobile responsive big timer */
@media (max-width: 600px) {
#big-timer .label {
font-size: 1.2rem;
margin: 0px 12px 16px 12px;
}
#big-timer .countdown {
width: 100px;
height: 100px;
border-width: 6px;
}
#big-timer .num {
font-size: 3rem;
}
}
@keyframes countdownPulse {
0%,100% {
transform: scale(1);
border-color: rgba(255,255,255,.25);
}
40%,60% {
transform: scale(1.08);
border-color: rgba(255,255,255,.55);
}
}
/* --- LABEL FADE OUT (for last few seconds) --- */
#big-timer .label.fade-out {
opacity: 0;
transform: translateY(-10px);
transition: opacity 1s ease, transform 1s ease;
}
/* --- COUNTDOWN TICK SOUND & COLOR HINT --- */
#big-timer .countdown.flash {
border-color: rgba(255, 255, 255, 0.65);
box-shadow: 0 0 25px rgba(255, 255, 255, 0.6);
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
@keyframes goPop {
0% {
transform: scale(0.5);
opacity: 0;
}
60% {
transform: scale(1.2);
opacity: 1;
}
100% {
transform: scale(1);
}
}
#big-timer .countdown.go {
animation: goPop 0.4s ease-out;
}
/* ===================================================
END - Multiplayer GAME OVER Overlays. COUNTDOWN
===================================================== */
/*===============================
GAME LAYOUT (single source of truth)
=============================== */
:root {
--card-max: 870px; /* total white card width */
--gap: 0px; /* space between columns */
--sb-col: 240px; /* scoreboard column width */
--chat-col: min(300px, 25vw); /* right chat column width */
--center-max: 420px; /* max width for board area β tune */
}
body.in-game {
overflow: hidden; /* prevent scrolling under header */
height: 100vh; /* full viewport height */
}
/* Background of the page where the game-layout sits on */
#game-area {
background-image: url('../images/background/bg_dark_texture.png');
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-color: #000; /* fallback color */
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
padding-top: 10px;
/* height: calc(100vh - 60px); */ /* subtract header height */
overflow: hidden; /* lock content within game area */
}
#game-area,
#game-area .game-layout,
.game-wrapper,
.game-wrapper .container {
min-height: 100%;
position: relative; /* β¬
οΈ this is what anchors the overlay */
}
/* ===============================
GAME LAYOUT (3-column structure)
=============================== */
#game-area .game-layout {
display: grid;
grid-template-columns: var(--sb-col) var(--center-max) var(--chat-col);
justify-content: center;
align-items: start;
gap: 24px;
max-width: 1000px;
margin: 0 auto;
padding: 10px 20px;
background: linear-gradient(to bottom, #2e4b6e 0%, #3775b0 30%, #1d487c 85%);
backdrop-filter: blur(18px);
border-radius: 0px;
box-shadow: 0 6px 25px rgba(0, 0, 0, 0.4);
}
/* ===== Pill with GRID layout (no absolute positioning) ===== */
/* ===== Scoreboard Pill (namespaced) ===== */
:root {
--scoreboard-pill-avatar-size: 30px;
--scoreboard-pill-gap: 8px;
}
/* Match visual structure with right panel */
.left-panel {
display: flex;
position: relative; /* β
makes the logo anchor to this panel, not the game board */
flex-direction: column;
align-self: stretch; /* π same height as board */
align-items: center;
width: var(--sb-col);
background: linear-gradient(to bottom, #2e4b6e 0%, #3775b0 30%, #1d487c 85%);
border: 1px solid #0f2f5c;
box-shadow: inset -1px -2px 7px rgba(255, 255, 255, 0.3), inset 0 -1px 0 rgba(0, 0, 0, 0.2), 0 0 14px rgba(0, 0, 0, 0.25), 0 8px 20px rgba(0, 0, 0, 0.35);
border-radius: 16px;
padding: 0px;
gap: 0px;
margin-left: 0px;
}
/* ===== Tile Legend (shows current theme's tile meanings) ===== */
.tile-legend {
position: absolute;
bottom: 7px;
left: 50%;
transform: translateX(-50%);
display: flex;
flex-direction: row;
justify-content: center;
gap: 14px;
padding: 2px 0px;
background: rgba(0, 0, 0, 0.25);
border-radius: 8px;
}
.tile-legend-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
padding: 2px 3px;
}
.tile-legend-item .mini-tile {
width: 20px;
height: 20px;
font-size: 10px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px;
}
.tile-legend-item span {
font-size: 8px;
font-weight: 600;
color: rgba(255, 255, 255, 0.9);
text-transform: uppercase;
letter-spacing: 0.2px;
white-space: nowrap;
line-height: 1;
}
.left-panel-logo {
position: absolute;
bottom: 16px;
left: 50%;
transform: translateX(-50%);
width: 80%;
max-width: 180px;
opacity: 1;
pointer-events: none;
display: none; /* Hidden - replaced by tile legend */
}
/* ===== Scoreboard Panel Title (in-panel header) ===== */
.left-panel .scoreboard-title {
margin: 0;
padding: 4px 10px;
background: linear-gradient(to bottom, #b5c7bb 0%, #2a9d4e 40%, #73cb62 100%);
border-bottom: 1px solid rgba(255,255,255,0.1);
font-size: 15px;
font-weight: 700;
color: #fff;
text-align: center;
letter-spacing: 0.5px;
border-top-left-radius: 16px;
border-top-right-radius: 16px;
box-shadow: 0 0 10px rgba(20, 135, 198, 0.4);
}
.left-panel #scoreboard {
width: calc(var(--sb-col) - 0px);
padding: 0;
border: 0;
box-shadow: none;
margin-left: 0; /* keep if you still like this nudge */
}
/* List flush left */
.left-panel #scoreboard-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 4px; /* gap between pills */
margin-top: 20px; /* gap between title and first pill */
}
.left-panel #scoreboard-list > li {
margin: 0;
padding: 0;
width: 100%;
}
/* === WORD HISTORY (Versus, SP, Daily) === */
.word-history {
margin-top: 12px;
padding-top: 8px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.word-history-title {
font-size: 0.65rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
color: rgba(255, 255, 255, 0.5);
margin: 0 0 6px 0;
padding: 0;
}
.word-history-list {
display: flex;
flex-direction: column;
gap: 4px;
}
.word-history-entry {
display: flex;
align-items: center;
gap: 6px;
padding: 3px 6px;
background: rgba(0, 0, 0, 0.2);
border-radius: 4px;
font-size: 0.7rem;
}
/* VERSUS MODE: Background colors for player entries */
.word-history-entry.player-red {
background: rgb(255 75 67 / 0.6);
border-left: 0px solid #ff6b6b;
}
.word-history-entry.player-blue {
background: rgba(69, 144, 244);
border-left: 0px solid #4dabf7;
}
.history-player {
font-weight: 700;
font-size: 0.6rem;
text-transform: uppercase;
letter-spacing: 0.5px;
min-width: 40px;
max-width: 60px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Player colors for history */
.history-player.p-red { color: #ff6b6b; }
.history-player.p-blue { color: #4dabf7; }
.history-player.p-green { color: #69db7c; }
.history-player.p-yellow { color: #ffe066; }
.history-player.p-purple { color: #da77f2; }
.history-player.p-orange { color: #ffa94d; }
.history-word {
flex: 1;
display: flex;
justify-content: center;
}
.history-word .mini-tiles {
display: flex;
gap: 1px;
}
.history-word .mini-tile {
width: 16px;
height: 16px;
font-size: 0.5rem;
border-radius: 2px;
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: 700;
}
.history-word .mini-tile .mini-val {
display: none; /* Hide point values in history tiles */
}
.history-points {
font-weight: 700;
font-size: 0.65rem;
color: #ffd43b;
min-width: 30px;
text-align: right;
}
.history-points::before {
content: '+';
}
/* Pass indicator styling for word history */
.history-pass {
opacity: 0.7;
}
.pass-indicator {
font-style: italic;
font-size: 0.6rem;
color: #ffffff;
text-transform: uppercase;
letter-spacing: 2px;
}
.history-pass-points {
color: #666;
}
.history-pass-points::before {
content: '';
}
/*THE ACTUAL PLAYERS PILL THAT HOLDS NAME, CHECK AND PASS AND AVATAR*/
.scoreboard-pill {
box-sizing: border-box;
display: block;
width: 90%;
padding: 2px 2px;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border-top-right-radius: 12px;
border-bottom-right-radius: 12px;
line-height: 1;
color: #fff;
text-shadow: 0 1px 2px rgba(0,0,0,.35);
box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 4px 10px rgba(0,0,0,.10);
position: relative;
}
/* VERSUS MODE: Current turn indicator */
.scoreboard-pill.current-turn {
box-shadow:
inset 0 1px 0 rgba(255,255,255,.35),
0 4px 10px rgba(0,0,0,.10),
0 0 12px 3px rgba(255, 215, 0, 0.6);
animation: turnPulse 1.5s ease-in-out infinite;
}
.scoreboard-pill.current-turn::after {
content: "βΆ";
position: absolute;
left: -16px;
top: 50%;
transform: translateY(-50%);
font-size: 0.6rem;
color: #ffd700;
text-shadow: 0 0 4px rgba(255, 215, 0, 0.8);
animation: arrowBounce 1s ease-in-out infinite;
}
@keyframes turnPulse {
0%, 100% {
box-shadow:
inset 0 1px 0 rgba(255,255,255,.35),
0 4px 10px rgba(0,0,0,.10),
0 0 8px 2px rgba(255, 215, 0, 0.4);
}
50% {
box-shadow:
inset 0 1px 0 rgba(255,255,255,.35),
0 4px 10px rgba(0,0,0,.10),
0 0 16px 5px rgba(255, 215, 0, 0.7);
}
}
@keyframes arrowBounce {
0%, 100% { transform: translateY(-50%) translateX(0); }
50% { transform: translateY(-50%) translateX(3px); }
}
.scoreboard-pill::before {
content: "";
position: absolute;
left: 0;
right: 6px;
top: 2px;
height: 22%;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border-top-right-radius: 12px;
border-bottom-right-radius: 12px;
background: linear-gradient(to bottom, rgba(255,255,255,.6), rgba(255,255,255,0));
pointer-events: none;
}
.scoreboard-pill > * {
position: relative;
z-index: 1;
}
/* Grid: [avatar] [text] */
.scoreboard-pill-content {
display: grid;
grid-template-columns: var(--scoreboard-pill-avatar-size) 1fr;
grid-auto-rows: auto;
column-gap: var(--scoreboard-pill-gap);
align-items: center;
width: 100%;
}
.scoreboard-pill-header {
display: contents;
}
/* Avatar */
.scoreboard-pill-avatar {
grid-column: 1;
grid-row: 1 / span 2;
width: var(--scoreboard-pill-avatar-size);
max-width: 100% !important;
margin-top: 0px !important;
height: var(--scoreboard-pill-avatar-size);
border-radius: 8px;
object-fit: cover;
border: 1px solid rgba(0,0,0,.25);
box-shadow: 0 0 0 2px rgba(255,255,255,.25), 0 4px 8px rgba(0,0,0,.12);
background: #e9eef8;
display: grid;
place-items: center;
}
.scoreboard-pill-avatar.initials {
font-size: .8rem;
font-weight: 800;
color: #2b3550;
text-transform: uppercase;
}
.scoreboard-pill-name {
grid-column: 2;
grid-row: 1;
font-weight: 600;
font-size: .90rem;
margin: 0;
}
.scoreboard-pill-score {
grid-column: 2;
grid-row: 2;
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
font-family: 'DIN Condensed', 'Arial Rounded MT Bold', 'Helvetica Neue', sans-serif;
font-size: .92rem;
font-weight: 700;
letter-spacing: 0.5px;
margin-top: 2px;
opacity: .97;
}
.scoreboard-pill-score .score-pts {
font-size: .55em;
font-weight: 600;
opacity: .9;
margin-left: 4px;
}
.scoreboard-pill-score .check {
width: 18px;
text-align: right;
font-weight: 700;
font-size: 1.6em;
color: #fff;
text-shadow: 0 0 4px rgba(0,0,0,.45);
margin-right: 6px;
margin-top: -8px;
}
/* PASS stamp */
.scoreboard-pill-score .check.pass {
position: absolute;
right: -5px;
top: 13px;
transform: rotate(-18deg);
transform-origin: right center;
width: auto;
padding: 0px 4px;
border-radius: 8px;
font-size: 0.75rem;
font-weight: 900;
letter-spacing: .3px;
color: #fff;
text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
background: rgba(255, 255, 255, .18);
border: 1px solid rgba(255, 255, 255, .28);
opacity: .96;
}
/* ELIMINATED badge (Elimination mode) */
.scoreboard-pill-score .check.eliminated-badge {
position: absolute;
right: -5px;
top: 10px;
transform: rotate(-12deg);
transform-origin: right center;
width: auto;
padding: 2px 6px;
border-radius: 4px;
font-size: 0.7rem;
font-weight: 900;
letter-spacing: 1px;
color: #fff;
text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
background: linear-gradient(135deg, #ff4444 0%, #cc0000 100%);
border: 1px solid #990000;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
/* Defender icon inside scoreboard pill */
.scoreboard-pill .defender-icon {
position: absolute;
right: 42px;
transform: translateY(-24%);
width: 25px;
height: 25px;
filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.4));
pointer-events: none;
opacity: 0.95;
}
/* Defender icon shimmer animation */
@keyframes shieldShimmer {
0% {
filter: brightness(1) drop-shadow(0 0 3px rgba(255,255,255,0.2));
}
50% {
filter: brightness(1.8) drop-shadow(0 0 6px rgba(255,255,255,0.5));
}
100% {
filter: brightness(1) drop-shadow(0 0 3px rgba(255,255,255,0.2));
}
}
/* Apply shimmer only during active challenge */
.defender-icon.shimmer {
animation: shieldShimmer 5s ease-in-out infinite;
}
/* ===== Center board column ===== */
.game-wrapper {
display: flex;
justify-content: center;
align-items: flex-start;
}
.game-wrapper .container {
width: var(--center-max);
max-width: var(--center-max);
overflow: hidden; /* prevent child elements from expanding container width */
background: linear-gradient(to bottom, #2e4b6e 0%, #3775b0 30%, #1d487c 85%);
border: 1px solid #0f2f5c;
box-shadow: inset -1px -2px 7px rgba(255, 255, 255, 0.3), inset 0 -1px 0 rgba(0, 0, 0, 0.2), 0 0 14px rgba(0, 0, 0, 0.25), 0 8px 20px rgba(0, 0, 0, 0.35);
border-radius: 18px;
padding: 0px 8px 0px 8px;
padding-top: 4px;
}
/* ===== Right controls + chat ===== */
.right-panel {
display: flex;
flex-direction: column;
gap: 1px;
height: auto; /* let content define its height */
max-height: 100vh; /* never taller than viewport */
overflow: hidden; /* stop flex children from pushing height */
/*width: var(--chat-col); */
background: linear-gradient(to bottom, #2e4b6e 0%, #3775b0 30%, #1d487c 85%);
border: 1px solid #0f2f5c;
border-radius: 18px;
box-shadow: inset -1px -2px 7px rgba(255, 255, 255, 0.3), inset 0 -1px 0 rgba(0, 0, 0, 0.2), 0 0 14px rgba(0, 0, 0, 0.25), 0 8px 20px rgba(0, 0, 0, 0.35);
border-radius: 16px;
padding: 8px;
align-self: stretch; /* π stretch to the tallest item in the grid row */
}
/* Control bar container */
#game-controls {
display: flex;
flex-direction: column;
flex: 0 0 auto; /* keep its height */
align-items: center;
gap: 6px;
margin-bottom: 12px;
margin-top: 6px;
flex-wrap: wrap;
}
/* Room pill (same base as buttons) */
#game-controls .room-pill {
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 1.1rem;
border: none;
border-radius: 999px; /* pill shape */
padding: 6px 14px;
white-space: nowrap;
box-shadow: 0 3px 6px rgba(0,0,0,0.2);
/* Room pill colors */
background: linear-gradient(135deg, #6ab04c, #27ae60);
color: #fff;
align-self: stretch; /* take full width of parent */
text-align: center; /* keep text centered */
min-width: calc(70px * 3 + 10px); /* 3 buttons + 2 gaps */
}
#game-controls .button-row {
display: flex;
justify-content: center; /* center all */
align-items: center; /* fix vertical */
gap: 14px;
margin-top: 4px;
max-width: 100%;
}
/* Base button style */
#game-controls button {
min-width: 30px; /* keep buttons same size */
max-width: 85px; /* keep buttons same size */
width: 85px;
height: 34px;
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: 600;
font-size: 0.85rem;
border: none;
border-radius: 8px;
padding: 6px 14px;
cursor: pointer;
box-shadow: 0 3px 6px rgba(0,0,0,0.2);
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
/* Red Leave button */
#leave-btn-board {
background: linear-gradient(135deg, #e53935, #c62828);
color: #fff;
}
#leave-btn-board:hover {
background: linear-gradient(135deg, #f44336, #d32f2f);
transform: translateY(-2px);
box-shadow: 0 5px 10px rgba(0,0,0,0.25);
}
/* Blue buttons */
#sfx-btn,
#music-btn {
background: linear-gradient(135deg, #42a5f5, #1565c0);
color: #fff;
}
#sfx-btn:hover,
#music-btn:hover {
background: linear-gradient(135deg, #64b5f6, #1976d2);
transform: translateY(-2px);
box-shadow: 0 5px 10px rgba(0,0,0,0.25);
}
.button-row {
display: flex;
justify-content: center;
gap: 8px;
}
.icon-btn {
background: rgba(255, 255, 255, 0.15);
border: none;
border-radius: 8px;
padding: 8px;
cursor: pointer;
transition: background 0.2s;
}
.icon-btn:hover {
background: rgba(255, 255, 255, 0.25);
}
.rank-panel {
background: linear-gradient(180deg, #193764, #0f2444);
border: 1px solid #204a8b;
border-radius: 16px 16px 4px 4px;
color: #fff;
font-family: var(--font-ui, "Inter", sans-serif);
display: flex;
flex-direction: column;
/* 𧩠layout fix */
flex: 1 1 auto;
height: auto; /* don't stretch full column */
min-height: 160px; /* visible with few players */
max-height: 380px; /* visual balance, fits above chat */
overflow: hidden;
margin-bottom: 8px;
box-shadow: inset 0 0 8px rgba(0,0,0,0.3);
}
.rank-title {
padding: 4px 0;
margin: 0px;
background: linear-gradient(to bottom, #b5c7bb 0%, #2a9d4e 40%, #73cb62 100%);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
font-size: 15px;
font-weight: 700;
color: #fff;
text-align: center;
letter-spacing: 0.5px;
}
.rank-list {
flex: 1;
overflow-y: auto;
padding: 2px 0px;
display: flex;
flex-direction: column;
gap: 1px;
}
.rank-entry {
display: grid;
grid-template-columns: 0.4fr 1.4fr 0.4fr 0.4fr 0.8fr; /* Avatar | Name | ΞΌ | Icon | Tier */
align-items: center;
background: rgba(255,255,255,0.07);
padding: 2px 4px;
font-size: 0.7rem;
gap: 0px;
}
.rank-entry.placeholder {
opacity: 0.5;
font-style: italic;
}
/* Sub-elements for readability */
.rank-name {
display: flex;
align-items: center;
gap: 6px;
font-weight: 400;
color: #fff;
}
.rank-avatar-wrap.loading {
opacity: 0.5;
}
.rank-avatar-wrap:not(.loading) {
opacity: 1;
transition: opacity 0.25s ease-in;
}
.rank-default-avatar {
width: 16px;
height: 16px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 12%;
color: #fff;
opacity: 0.8; /* optional slight dimming to match photo avatars */
}
.rank-default-avatar svg {
width: 16px;
height: 16px;
stroke-width: 2;
}
/* === Avatar cell and image === */
.rank-avatar-wrap {
display: flex;
align-items: center;
justify-content: center;
width: 16px; /* small, compact square */
height: 16px;
border-radius: 4px;
overflow: hidden;
}
.rank-avatar {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 4px;
}
/* Lucide fallback user icon (same scale) */
.rank-default-avatar svg,
.rank-default-avatar {
width: 18px;
height: 18px;
stroke-width: 2;
color: #ccc;
}
.rank-rating {
text-align: right;
font-weight: 600;
color: #7dd3fc; /* soft blue */
}
/* === Tier icon cell === */
.rank-tier-icon {
display: flex;
align-items: center;
justify-content: flex-end;
}
/* Fix Lucide icon sizing */
.rank-tier-icon svg {
width: 16px !important;
height: 16px !important;
stroke-width: 3;
}
/* Use color on wrapper, Lucide follows via currentColor */
.tier-icon[data-tier="bronze"] { color: #cd7f32; }
.tier-icon[data-tier="silver"] { color: #c0c0c0; }
.tier-icon[data-tier="gold"] { color: #ffd700; }
.tier-icon[data-tier="platinum"] { color: #64d1c8; }
.tier-icon[data-tier="diamond"] { color: #6ee7ff; }
.tier-icon[data-tier="unranked"] { color: #888; }
/* Tier text cell */
.rank-tier-text {
text-align: right;
min-width: 60px;
font-weight: 600;
}
/* Optional: highlight tier text */
.rank-tier {
text-align: right;
font-weight: 600;
color: #ffd966; /* warm gold tint */
}
/* Chat panel moved to chat.css (hidden by default in SP) */
/* === MINI-LEADERBOARD PANEL (SP/Daily modes) === */
.mini-leaderboard-panel {
background: linear-gradient(180deg, #64371f, #4a2612);
border: 1px solid #8b5a3c;
border-radius: 16px;
color: #fff;
font-family: var(--font-ui, "Inter", sans-serif);
display: flex;
flex-direction: column;
flex: 1 1 auto;
height: auto;
min-height: 200px;
max-height: 400px;
overflow: hidden;
margin-bottom: 8px;
}
.mini-lb-title {
padding: 4px 0;
margin: 0px;
background: linear-gradient(to bottom, #ffd966 0%, #d4a02e 40%, #b8860b 100%);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
font-size: 15px;
font-weight: 700;
color: #fff;
text-align: center;
letter-spacing: 0.5px;
}
.mini-lb-list {
flex: 1;
overflow-y: auto;
padding: 2px 0px;
display: flex;
flex-direction: column;
gap: 1px;
}
.mini-lb-entry {
display: grid;
grid-template-columns: 0.4fr 1.6fr 0.8fr; /* Rank | Name | Score */
align-items: center;
background: rgba(255,255,255,0.07);
padding: 4px 6px;
font-size: 0.7rem;
gap: 6px;
}
.mini-lb-entry.placeholder {
opacity: 0.5;
font-style: italic;
grid-template-columns: 1fr; /* Full width for placeholder */
}
.mini-lb-rank {
font-weight: 700;
color: #ffd966;
text-align: center;
}
.mini-lb-name {
display: flex;
align-items: center;
gap: 6px;
font-weight: 400;
color: #fff;
}
.mini-lb-score {
text-align: right;
font-weight: 600;
color: #fff;
}
/* === FACE-OFF MINI-LEADERBOARD ENTRIES === */
/* Matches Party Mode rank-entry styling */
.faceoff-lb-entry {
display: grid;
grid-template-columns: 0.4fr 1.4fr 0.4fr 0.4fr 0.8fr; /* Avatar | Name | ΞΌ | Icon | Tier */
align-items: center;
background: rgba(255,255,255,0.07);
padding: 2px 4px;
font-size: 0.7rem;
gap: 0px;
}
.faceoff-lb-entry.is-self {
background: rgba(255, 215, 0, 0.15);
}
.faceoff-lb-avatar-wrap {
display: flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
border-radius: 4px;
overflow: hidden;
background: rgba(255, 255, 255, 0.1);
}
.faceoff-lb-avatar {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 4px;
}
.faceoff-lb-name {
display: flex;
align-items: center;
gap: 6px;
font-weight: 400;
color: #fff;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.faceoff-lb-name.player-name-clickable {
cursor: pointer;
text-decoration: underline;
text-decoration-color: rgba(255, 255, 255, 0.6);
}
.faceoff-lb-name.player-name-clickable:hover {
color: #ffd966;
text-decoration-color: #ffd966;
}
.faceoff-lb-rating {
text-align: right;
font-weight: 600;
color: #7dd3fc; /* soft blue, same as Party Mode */
}
.faceoff-lb-tier-icon {
display: flex;
align-items: center;
justify-content: flex-end;
}
.faceoff-lb-tier-icon svg {
width: 16px !important;
height: 16px !important;
stroke-width: 3;
}
.faceoff-lb-tier-text {
text-align: right;
min-width: 60px;
font-weight: 600;
}
/* === INFO FEED PANEL (SP/Daily modes) === */
.info-feed-panel {
background: linear-gradient(180deg, #1f3764, #0f1f44);
border: 1px solid #2a4a8b;
border-radius: 16px;
color: #fff;
font-family: var(--font-ui, "Inter", sans-serif);
display: flex;
flex-direction: column;
flex: 1 1 auto;
height: auto;
min-height: 200px;
max-height: 400px;
overflow: hidden;
}
.info-feed-title {
padding: 4px 0;
margin: 0px;
background: linear-gradient(to bottom, #6b9fff 0%, #4a7adb 40%, #3257b8 100%);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
font-size: 15px;
font-weight: 700;
color: #fff;
text-align: center;
letter-spacing: 0.5px;
}
.info-feed-messages {
flex: 1;
overflow-y: auto;
padding: 8px;
display: flex;
flex-direction: column-reverse; /* Latest at bottom */
gap: 6px;
}
.info-feed-message {
background: rgba(255,255,255,0.07);
padding: 6px 8px;
border-radius: 8px;
font-size: 0.7rem;
line-height: 1.4;
border-left: 3px solid #4a7adb;
}
.info-feed-message.high-score {
border-left-color: #ffd700;
background: rgba(255, 215, 0, 0.1);
}
.info-feed-message.achievement {
border-left-color: #7fff00;
background: rgba(127, 255, 0, 0.1);
}
.info-feed-timestamp {
font-size: 0.6rem;
color: rgba(255, 255, 255, 0.5);
margin-top: 2px;
}
/* MULTIPLAYER (enabled by a class on ) */
body.is-mp #game-area .game-layout {
/* fixed 3-column layout that prevents board stretch */
grid-template-columns: var(--sb-col) var(--center-max) var(--chat-col);
justify-content: center; /* keeps everything centered */
align-items: start;
}
/* ensure the board column (middle) stays tight */
body.is-mp #game-area .game-layout .game-wrapper {
display: flex;
justify-content: center;
}
/* keep container (board) fixed inside wrapper */
body.is-mp #game-area .game-layout .game-wrapper .container {
width: var(--center-max);
max-width: var(--center-max);
margin: 0 auto;
}
/* All game modes show left and right panels on desktop */
/* Panels will be hidden on mobile via responsive styles below (lines 4403+) */
/* The game column (your existing .container) */
#game-area .container {
flex: 0 1 var(--center-max);
max-width: var(--center-max);
width: 100%;
margin: 0 auto;
}
/* Timer bubble nudge */
#game-area .top-bar .timer {
margin-left: 0;
}
/* ===========================
START - Pre-Game Lobby Styling
=========================== */
/* Shared pill container styling */
.gb-title, .pre-game-lobby-header {
display: flex;
flex-wrap: wrap;
justify-content: center; /* Center all pills as a group */
align-items: center; /* Vertically align them */
gap: 8px; /* space between pills */
margin-bottom: 16px;
}
.pre-game-lobby-title {
font-size: 2rem;
font-weight: 700;
text-align: center;
margin-bottom: 12px;
}
.pre-game-lobby-status {
text-align: center;
margin: 10px 0;
}
/* Wrapper to align avatar + name in one row */
.pre-game-lobby-player {
display: flex;
align-items: center;
gap: 6px;
padding-left: 24px; /*space from left edge */
}
.pre-game-lobby-avatar {
width: 24px;
height: 24px;
border-radius: 6px;
background: #eaeaea;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1.2rem;
}
/* Ensure image avatars scale correctly inside the avatar box */
.pre-game-lobby-avatar img {
width: 100%;
height: 100%;
border-radius: 6px;
object-fit: cover;
}
.pre-game-lobby-name {
font-weight: 700;
letter-spacing: 0.3px;
color: #004aad; /* match Game Browser ROOM */
}
/*leave button */
.close-game-browser {
display: block;
margin: 20px auto;
background: #ffea93;
color: #444;
}
.close-game-browser:hover {
background: #ffd54f;
}
/* Hide mobile span class (see html renderInGameRoom in MP) */
.games-mobile, .rank-mobile {
display: none;
}
/* ===========================
End - Pre-Game Lobby Styling
=========================== */
/* =====================================================================
Toast messages
===================================================================== */
.toast-message {
position: fixed;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
background: rgba(0,0,0,0.8);
color: #fff;
padding: 10px 18px;
border-radius: 8px;
font-size: 14px;
opacity: 0;
transition: opacity 0.5s ease;
z-index: 9999;
}
.toast-message.show {
opacity: 1;
}
/* =========================================================
π± MOBILE/TABLET STYLES - CONSOLIDATED
All touch device styles are now at the END of this file
in the "RESPONSIVE STYLES - ALL BREAKPOINTS CONSOLIDATED" section
========================================================= */
/* =========================
START - PLAYING TILES (polished styles)
========================= */
/* === Polished Tile Styles Testing === */
:root {
/* Beige (x1) */
--tile-x1-bg: linear-gradient(180deg, #f7e8c4 70%, #ecd099 100%);
--tile-x1-color: #16233f;
--tile-x1-shadow: none;
/* Light Blue */
--tile-lblue-bg: radial-gradient(ellipse at 60% 65%, rgba(255,255,255,0.6) 0%, transparent 60%), linear-gradient(145deg, rgba(255,255,255,0.3), transparent 60%), linear-gradient(180deg, #6fbeff 60%, #2299ee 100%);
--tile-lblue-color: #fff;
--tile-lblue-shadow: 0 1px 1px #045, 0 2px 2px #179fd2;
/* Dark Blue */
--tile-dblue-bg: radial-gradient(ellipse at 30% 25%, rgba(255,255,255,0.5) 0%, transparent 60%), linear-gradient(145deg, rgba(255,255,255,0.25), transparent 60%), linear-gradient(180deg, #415bfb 20%, #092e7e 100%);
--tile-dblue-color: #fff;
--tile-dblue-shadow: 0 1px 2px #02133b, 0 2px 2px #124c8d;
/* Light Green */
--tile-lgreen-bg: radial-gradient(ellipse at 30% 25%, rgba(255,255,255,0.55) 0%, transparent 60%), linear-gradient(145deg, rgba(255,255,255,0.25), transparent 60%), linear-gradient(180deg, #85e4b1 70%, #19bf45 100%);
--tile-lgreen-color: #185530;
--tile-lgreen-shadow: 0 1px 0 #fff;
/* Dark Green */
--tile-dgreen-bg: radial-gradient(ellipse at 30% 25%, rgba(255,255,255,0.4) 0%, transparent 60%), linear-gradient(145deg, rgba(255,255,255,0.25), transparent 60%), linear-gradient(180deg, #26b950 50%, #087c25 100%);
--tile-dgreen-color: #fff;
--tile-dgreen-shadow: 0 1px 2px #083913;
}
.tile.x1 {
background: var(--tile-x1-bg);
color: var(--tile-x1-color);
text-shadow: var(--tile-x1-shadow);
box-shadow: var(--tile-x1-boxshadow, none);
}
.tile.lblue {
background: var(--tile-lblue-bg);
color: var(--tile-lblue-color);
text-shadow: var(--tile-lblue-shadow);
box-shadow: var(--tile-lblue-boxshadow, none);
}
.tile.dblue {
background: var(--tile-dblue-bg);
color: var(--tile-dblue-color);
text-shadow: var(--tile-dblue-shadow);
box-shadow: var(--tile-dblue-boxshadow, none);
}
.tile.lgreen {
background: var(--tile-lgreen-bg);
color: var(--tile-lgreen-color);
text-shadow: var(--tile-lgreen-shadow);
box-shadow: var(--tile-lgreen-boxshadow, none);
}
.tile.dgreen {
background: var(--tile-dgreen-bg);
color: var(--tile-dgreen-color);
text-shadow: var(--tile-dgreen-shadow);
box-shadow: var(--tile-dgreen-boxshadow, none);
}
/* =========================
END - PLAYING TILES (polished styles)
========================= */
/* =========================
START - APP HEADER (sticky top, dark)
========================= */
.app-header {
position: sticky;
top: 0;
z-index: 1400;
width: 100%; /* scrollbar is always visible, so 100% = correct width */
box-sizing: border-box;
height: 52px;
display: flex;
align-items: center;
justify-content: space-between; /* optional: space logo vs. buttons */
gap: 4px;
padding: 0 8px 0 0px; /* top right bottom left */
background: #353535; /* dark gray */
color: #fff;
border-bottom: 1px solid rgba(255,255,255,0.06);
}
.app-header .app-title {
display: flex;
align-items: center;
justify-content: center;
}
.app-header .app-title img {
height: 22px; /* default size */
width: auto;
display: block;
filter: drop-shadow(0 0 4px rgba(255,255,255,0.65));
}
.app-header .hamburger {
appearance: none;
border: 0;
background: transparent;
color: #fff; /* if SVG uses currentColor this is enough */
font-size: 22px;
line-height: 1;
cursor: pointer;
padding: 6px 8px;
border-radius: 8px;
}
.app-header .hamburger:focus-visible {
outline: 2px solid #8ad;
outline-offset: 2px;
}
/* if the Lucide icon inside hamburger doesn't inherit color, force it */
.app-header .hamburger svg path {
stroke: #fff !important;
fill: #fff !important;
}
.app-header .app-actions {
margin-left: auto;
display: flex;
align-items: center;
gap: 10px;
}
.app-header .avatar {
width: 28px;
height: 28px;
border-radius: 50%;
display: inline-block;
object-fit: cover;
border: 1px solid #0002;
}
.app-header a,
.app-header button {
color: #fff;
}
/* Fullscreen toggle button */
.fullscreen-toggle-btn {
background: transparent;
border: none;
color: #fff;
cursor: pointer;
padding: 6px;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.2s ease;
}
.fullscreen-toggle-btn:hover {
background: rgba(255, 255, 255, 0.1);
}
.fullscreen-toggle-btn svg {
width: 20px;
height: 20px;
}
/* Header icon button (dark mode toggle, etc.) */
.header-icon-btn {
background: transparent;
border: none;
color: #fff;
cursor: pointer;
padding: 6px;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.2s ease;
}
.header-icon-btn:hover {
background: rgba(255, 255, 255, 0.1);
}
.header-icon-btn svg {
width: 20px;
height: 20px;
}
/* =========================
END - APP HEADER (sticky top, dark)
========================= */
/* =========================
Face-Off Top 10 Ticker
========================= */
.faceoff-ticker {
display: none; /* Hidden by default, shown on desktop only */
align-items: center;
justify-content: center;
gap: 10px;
margin: 0 auto;
padding: 0 20px;
overflow: hidden;
}
/* Hide ticker during games */
.faceoff-ticker.ticker-hidden {
display: none !important;
}
.faceoff-ticker-label {
font-size: 0.7rem;
font-weight: 600;
color: rgba(255, 255, 255, 0.7);
white-space: nowrap;
}
.faceoff-ticker-track {
overflow: hidden;
height: 22px;
position: relative;
}
.faceoff-ticker-content {
display: flex;
flex-direction: column;
transition: transform 0.4s ease-out;
}
.faceoff-ticker-item {
display: flex;
align-items: center;
gap: 6px;
white-space: nowrap;
font-size: 0.75rem;
color: rgba(255, 255, 255, 0.9);
cursor: pointer;
transition: color 0.2s;
height: 22px;
}
.faceoff-ticker-item:hover {
color: #a78bfa;
}
.faceoff-ticker-rank {
font-weight: 700;
color: #fbbf24;
min-width: 20px;
text-align: right;
}
.faceoff-ticker-rank.gold { color: #fbbf24; }
.faceoff-ticker-rank.silver { color: #cbd5e1; }
.faceoff-ticker-rank.bronze { color: #f59e0b; }
.faceoff-ticker-avatar {
width: 18px;
height: 18px;
border-radius: 50%;
object-fit: cover;
}
.faceoff-ticker-name {
font-weight: 500;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100px;
}
.faceoff-ticker-rating {
color: #a78bfa;
font-weight: 600;
font-size: 0.7rem;
}
/* Only show Face-Off ticker on desktop (min-width: 900px) */
@media (min-width: 900px) {
.faceoff-ticker {
display: flex;
}
}
/* =========================
Face-Off Time Attack Top 10 Ticker
========================= */
.timeattack-ticker {
display: none; /* Hidden by default, shown on desktop only */
align-items: center;
justify-content: center;
gap: 10px;
margin: 0 auto;
padding: 0 20px;
overflow: hidden;
}
/* Hide ticker during games */
.timeattack-ticker.ticker-hidden {
display: none !important;
}
.timeattack-ticker-label {
font-size: 0.7rem;
font-weight: 600;
color: rgba(255, 255, 255, 0.7);
white-space: nowrap;
}
.timeattack-ticker-track {
overflow: hidden;
height: 22px;
position: relative;
}
.timeattack-ticker-content {
display: flex;
flex-direction: column;
transition: transform 0.4s ease-out;
}
.timeattack-ticker-item {
display: flex;
align-items: center;
gap: 6px;
white-space: nowrap;
font-size: 0.75rem;
color: rgba(255, 255, 255, 0.9);
cursor: pointer;
transition: color 0.2s;
height: 22px;
}
.timeattack-ticker-item:hover {
color: #ff8c5a; /* Time Attack orange accent */
}
.timeattack-ticker-rank {
font-weight: 700;
color: #fbbf24;
min-width: 20px;
text-align: right;
}
.timeattack-ticker-rank.gold { color: #fbbf24; }
.timeattack-ticker-rank.silver { color: #cbd5e1; }
.timeattack-ticker-rank.bronze { color: #f59e0b; }
.timeattack-ticker-avatar {
width: 18px;
height: 18px;
border-radius: 50%;
object-fit: cover;
}
.timeattack-ticker-name {
font-weight: 500;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100px;
}
.timeattack-ticker-rating {
color: #ff8c5a; /* Time Attack orange accent */
font-weight: 600;
font-size: 0.7rem;
}
/* Only show Time Attack ticker on desktop (min-width: 1100px - offset from Face-Off ticker) */
@media (min-width: 1100px) {
.timeattack-ticker {
display: flex;
}
}
/* =========================
START - SIDE DRAWER + SCRIM
========================= */
.app-drawer {
position: fixed;
top: var(--header-h); /* was: 53px */
left: 0;
width: min(84vw, 270px);
height: 100vh;
z-index: 1300; /* below overlays */
background: #fff;
border-right: 1px solid #eee;
transform: translateX(-100%);
transition: transform 180ms ease;
will-change: transform;
display: flex;
flex-direction: column;
}
.app-drawer.open {
transform: translateX(0%);
}
.drawer-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 14px 8px;
border-bottom: 1px solid #f1f1f1;
}
.drawer-title {
font-weight: 700;
}
.drawer-close {
appearance: none;
border: none;
background: none;
cursor: pointer;
font-size: 22px;
line-height: 1;
padding: 6px 8px;
border-radius: 8px;
}
.drawer-list {
list-style: none;
margin: 0;
padding: 8px 0;
overflow: auto;
flex: 1;
}
/* Drawer nested lists */
.drawer-sublist {
margin: 4px 0 6px 10px;
padding-left: 12px;
border-left: 1px solid #eee;
}
#app-drawer .drawer-sublist .drawer-item {
padding: 10px 10px;
font-weight: 600;
}
.drawer-item {
width: 100%;
text-align: left;
background: none;
border: none;
cursor: pointer;
padding: 12px 12px; /* make menu items taller and space between left side */
font-size: 1rem;
font-weight: 600;
line-height: 1.3; /* keep text aligned properly */
color: #333; /* Explicit color to prevent iOS blue text on buttons */
}
.drawer-item:hover {
background: #fff3d6;
color: #7a5c00;
}
.drawer-list .divider {
height: 1px;
background: #eee;
margin: 8px 0;
}
/* Optional: scrim when drawer is open */
.drawer-scrim {
position: fixed;
top: 53px;
inset: 0;
z-index: 1290;
background: rgba(0,0,0,0.25);
opacity: 0;
pointer-events: none;
transition: opacity 150ms ease;
}
.drawer-scrim.show {
opacity: 1;
pointer-events: auto;
}
/* drawer icons inherit text color */
.drawer-item .lucide,
.nav-icon {
width: 22px;
height: 22px;
stroke: currentColor;
stroke-width: 2;
margin-right: 10px;
}
/* VS text icon for left drawer */
.nav-icon-vs {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
margin-right: 10px;
font-size: 18px;
font-weight: 700;
letter-spacing: -0.5px;
color: currentColor;
}
.drawer-item {
display: flex;
align-items: center;
}
/* =========================
END - SIDE DRAWER + SCRIM
========================= */
/* =========================
USER MENU (slide-out from right)
========================= */
/* Header avatar button with badge */
.user-menu-btn {
position: relative;
appearance: none;
border: none;
background: none;
padding: 4px;
cursor: pointer;
border-radius: 50%;
transition: transform 0.2s ease;
}
.user-menu-btn:hover {
transform: scale(1.05);
}
.user-menu-btn:active {
transform: scale(0.95);
}
.user-menu-btn .avatar {
width: 36px;
height: 36px;
border-radius: 50%;
border: 2px solid rgba(255, 255, 255, 0.4);
object-fit: cover;
display: block;
}
/* Notification badge on header avatar */
.header-badge {
position: absolute;
top: 0;
right: -9px;
background: #e74c3c;
color: white;
font-size: 0.65rem;
font-weight: 700;
padding: 2px 5px;
border-radius: 10px;
min-width: 10px;
max-width: 16px;
text-align: center;
line-height: 1.2;
border: 2px solid var(--header-bg, #1b2530);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
/* User menu panel */
.user-menu {
position: fixed;
top: 0;
right: 0;
height: 80vh;
width: min(85vw, 270px);
z-index: 1400;
background: #fff;
box-shadow: -4px 0 20px rgba(0,0,0,0.15);
transform: translateX(100%);
transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
will-change: transform;
display: flex;
flex-direction: column;
}
.user-menu.open {
transform: translateX(0%);
}
/* User menu header with profile info */
.user-menu-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
padding: 20px 16px;
background: linear-gradient(135deg, #1b2530 0%, #2c3e50 100%);
color: white;
}
.user-menu-profile {
display: flex;
align-items: center;
gap: 12px;
flex: 1;
min-width: 0;
}
.user-menu-avatar {
width: 50px;
height: 50px;
border-radius: 50%;
border: 2px solid rgba(255,255,255,0.3);
object-fit: cover;
flex-shrink: 0;
}
.user-menu-info {
display: flex;
flex-direction: column;
min-width: 0;
}
.user-menu-username {
font-weight: 700;
font-size: 1rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.user-menu-email {
font-size: 0.8rem;
opacity: 0.75;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.user-menu-close {
appearance: none;
border: none;
background: rgba(255,255,255,0.1);
color: white;
width: 32px;
height: 32px;
border-radius: 50%;
font-size: 20px;
line-height: 1;
cursor: pointer;
transition: background 0.2s;
flex-shrink: 0;
}
.user-menu-close:hover {
background: rgba(255,255,255,0.2);
}
/* Navigation items */
.user-menu-nav {
flex: 1;
overflow-y: auto;
padding: 12px 0;
}
.user-menu-item {
width: 100%;
display: flex;
align-items: center;
gap: 14px;
padding: 8px 20px;
appearance: none;
border: none;
background: none;
font-size: 0.95rem;
font-weight: 500;
color: #333;
cursor: pointer;
text-align: left;
transition: background 0.15s;
position: relative;
}
.user-menu-item:hover {
background: #fff3d6;
color: #7a5c00;
}
.user-menu-item i {
width: 22px;
height: 22px;
stroke: #555;
flex-shrink: 0;
}
.user-menu-item:hover i {
stroke: #7a5c00;
}
/* Badge in menu items */
.user-menu-badge {
margin-left: auto;
background: #e74c3c;
color: white;
font-size: 0.75rem;
font-weight: 700;
padding: 3px 8px;
border-radius: 12px;
min-width: 22px;
text-align: center;
}
/* Badge color variants */
.user-menu-badge.badge-blue,
#user-menu-inbox-badge {
background: #3498db;
}
.user-menu-badge.badge-purple,
#user-menu-game-invites-badge {
background: #9b59b6;
}
.user-menu-badge.badge-red {
background: #e74c3c;
}
/* Online friends count badge */
.online-count-badge {
background: #27ae60;
color: white;
font-size: 0.7rem;
font-weight: 600;
padding: 2px 8px;
border-radius: 10px;
}
.user-menu-divider {
height: 1px;
background: #eee;
margin: 8px 16px;
}
/* Section labels for grouped items */
.user-menu-section-label {
font-size: 0.75rem;
font-weight: 600;
color: #888;
text-transform: uppercase;
letter-spacing: 0.5px;
padding: 12px 16px 4px;
margin-top: 4px;
}
[data-theme="dark"] .user-menu-section-label,
body.dark-mode .user-menu-section-label {
color: #999;
}
/* Footer with logout */
.user-menu-footer {
border-top: 1px solid #eee;
padding: 8px 0;
}
.user-menu-logout {
color: #c0392b !important;
}
.user-menu-logout i {
stroke: #c0392b !important;
}
.user-menu-logout:hover {
background: #fdf2f2 !important;
}
/* Scrim/backdrop */
.user-menu-scrim {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.4);
z-index: 1399;
opacity: 0;
visibility: hidden;
transition: opacity 200ms ease, visibility 200ms;
}
.user-menu-scrim.show {
opacity: 1;
visibility: visible;
}
/* Dark mode support */
[data-theme="dark"] .user-menu,
body.dark-mode .user-menu {
background: #242b3d !important;
}
[data-theme="dark"] .user-menu-header,
body.dark-mode .user-menu-header {
background: linear-gradient(135deg, #0d1117 0%, #161b22 100%) !important;
}
[data-theme="dark"] .user-menu-item,
body.dark-mode .user-menu-item {
color: #e0e0e0 !important;
}
[data-theme="dark"] .user-menu-item:hover,
body.dark-mode .user-menu-item:hover {
background: #389b3b !important;
color: #ffffff !important;
}
[data-theme="dark"] .user-menu-item i,
body.dark-mode .user-menu-item i {
stroke: #aaa !important;
}
[data-theme="dark"] .user-menu-item:hover i,
body.dark-mode .user-menu-item:hover i {
stroke: #fff !important;
}
[data-theme="dark"] .user-menu-divider,
body.dark-mode .user-menu-divider {
background: #3d4556 !important;
}
[data-theme="dark"] .user-menu-footer,
body.dark-mode .user-menu-footer {
border-top-color: #3d4556 !important;
}
[data-theme="dark"] .header-badge {
border-color: #1e1e1e;
}
/* =========================
END - USER MENU
========================= */
/* =========================
BOTTOM NAV (mobile)
========================= */
.bottom-nav {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 1000; /* below overlays */
height: 58px;
background: #fff;
border-top: 1px solid #eee;
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 0;
padding-bottom: env(safe-area-inset-bottom);
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
will-change: transform;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.bn-item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
appearance: none;
border: none;
background: none;
font-size: 10px;
font-weight: 600;
cursor: pointer;
color: #444;
white-space: nowrap;
overflow: hidden;
min-width: 0;
padding: 0 1px;
}
.bn-item i {
width: 20px;
height: 20px;
stroke: currentColor; /* icon color follows text color */
}
/* VS text icon for bottom nav */
.bn-icon-vs {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
font-size: 26px;
font-weight: 700;
letter-spacing: -0.5px;
color: currentColor;
}
#bn-versus.bn-item {
gap: 6px;
}
.bn-item.active {
color: #18a2ee; /* both text and icon turn blue */
}
/* (volume toggle buttons removed - now in options panel) */
/* Vertical volume slider popup (mobile) */
.volume-slider-popup {
display: none;
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
background: linear-gradient(135deg, #2d3a5a 0%, #1d2844 100%);
border-radius: 12px;
padding: 12px 8px;
margin-bottom: 8px;
box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.4);
z-index: 1100;
flex-direction: column;
align-items: center;
gap: 6px;
touch-action: none; /* Prevent scrolling while adjusting */
}
.volume-slider-popup.active {
display: flex;
}
.volume-slider-track {
width: 28px;
height: 120px;
background: rgba(255, 255, 255, 0.15);
border-radius: 14px;
position: relative;
overflow: hidden;
}
.volume-slider-fill {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(to top, #18a2ee, #4fc3f7);
border-radius: 14px;
transition: height 0.05s ease-out;
}
.volume-slider-value {
font-size: 11px;
font-weight: 600;
color: rgba(255, 255, 255, 0.9);
min-width: 32px;
text-align: center;
}
/* Arrow pointer at bottom of popup */
.volume-slider-popup::after {
content: '';
position: absolute;
bottom: -6px;
left: 50%;
transform: translateX(-50%);
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 8px solid #1d2844;
}
:root {
--header-h: 52px;
--bottom-nav-h: 58px;
}
/* Hide bottom-nav on desktop/laptop - only show on touch devices */
@media (hover: hover) and (pointer: fine) {
.bottom-nav {
display: none !important;
}
}
/* ==========================================================
Multiplayer Lobby - Main styles moved to multiplayer.css
========================================================== */
.lobby-container {
max-width: 960px;
margin: 0 auto;
}
/* Shared pill layout for lobby + waiting room */
.pill-wrap {
display: grid;
grid-template-columns: repeat(2, 1fr); /* equal-width columns */
text-align: center;
gap: 4px 4px;
margin-bottom: 24px;
}
/* Optional tweak if the waiting-room container already uses #mp-room */
#mp-room .pill-wrap {
margin-bottom: 36px; /* slightly more breathing space */
}
/* Lobby pills styled like scoreboard */
.pill {
border-radius: 12px;
padding: 3px 10px;
font-size: 0.75rem;
font-weight: 700;
color: #fff;
background: linear-gradient(180deg, #66a8ff 0%, #2f80ed 100%);
border: 1px solid #2566bd;
border-radius: 8px;
box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
/* Make the room name pill span both columns */
.room-pill {
grid-column: 1 / -1; /* span both columns */
background: linear-gradient(180deg, #1487c6 0%, #0c74b0 100%);
border: 1px solid #0c74b0;
color: #fff;
font-weight: 700;
font-size: 0.95rem;
padding: 6px 16px;
border-radius: 12px;
text-align: center;
justify-self: center; /* β
centers within grid */
width: 100%; /* β
spans across both columns evenly */
}
/* Mode pill variants */
.mode-pill.normal {
background: linear-gradient(180deg,#40c455 0%,#4fad3d 100%);
border: 1px solid #a9ddab !important;
color: #fff;
}
.mode-pill.fast {
background: linear-gradient(180deg,#ffa84c 0%,#ff7b00 100%);
border: 1px solid #cc6200 !important;
color: #fff;
}
.mode-pill.blitz {
background: linear-gradient(180deg,#ff6b6b 0%,#ff3b30 100%);
border: 1px solid #d12d26 !important;
color: #fff;
}
.mode-pill.ultra {
background: linear-gradient(180deg,#b685ff 0%,#7a49ff 100%);
border: 1px solid #5c36c4 !important;
color: #fff;
}
.roundstotal-pill {
background: linear-gradient(180deg,#b91ccb, 0%, #d04bc9 100%);
border: 1px solid #e567f3 !important;
}
.roundms-pill {
background: linear-gradient(180deg,#18a2ee, 0%, #47b5ed 100%);
border: 1px solid #23b2c1 !important;
}
.flips-pill {
background: linear-gradient(180deg, #edcd3d 0%, #dd941c 100%);
border: 1px solid #ffdd39 !important;
color: #fff;
}
.mp-card-body {
display: flex;
flex-direction: column;
gap: 6px;
font-size: 0.9rem;
}
.room-status {
font-weight: 600;
color: #333;
}
.room-count {
color: #666;
}
/* #mp-room and #room-name styles moved to multiplayer.css */
#player-list {
display: flex;
flex-wrap: wrap;
gap: 12px;
justify-content: center;
margin: 16px 0;
width: 100%;
max-width: 600px;
}
.player-card {
background: #fff;
border: 1px solid #ddd;
border-radius: 12px;
box-shadow: 0 3px 10px rgba(0,0,0,.08);
padding: 10px;
width: 120px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.player-card .avatar {
width: 48px;
height: 48px;
border-radius: 50%;
background: linear-gradient(135deg,#ccc,#eee);
margin-bottom: 6px;
}
.player-card .name {
font-weight: 600;
font-size: 0.9rem;
}
.player-card .badge {
font-size: 0.7rem;
margin-left: 4px;
padding: 2px 6px;
border-radius: 8px;
}
.player-card .badge.host {
background: gold;
color: #333;
}
.player-card .badge.ready {
background: #4caf50;
color: #fff;
}
/* Highlight your own card */
.player-card.me {
border: 2px solid #3b82f6; /* nice blue */
box-shadow: 0 0 8px rgba(59,130,246,.5);
}
.room-countdown {
font-size: 1.1rem;
font-weight: 600;
margin: 12px 0;
color: #444;
text-align: center;
}
#mp-room .btn {
margin-top: 8px;
padding: 10px 18px;
border-radius: 8px;
font-weight: 600;
}
/* Mode Pills (Party Mode + details) */
.pill-row {
display: flex;
gap: 8px;
justify-content: center;
align-items: center;
margin-bottom: 10px;
}
/* Center the leave button */
#leave-game {
display: block;
margin: 20px auto;
}
body.is-mp.in-game {
overflow: visible !important;
}
/* 𧩠Lock scroll when game is active. Always keep at bottom*/
body.in-game {
overflow: hidden !important;
height: 100%;
touch-action: none; /* disables mobile bounce/scroll gestures */
}
/* ============================================================
SINGLE PLAYER HUB - Mode Selection Cards
============================================================ */
.sp-mode-card {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 24px 20px;
cursor: pointer;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.sp-mode-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}
.sp-mode-icon {
font-size: 3rem;
margin-bottom: 12px;
}
.sp-mode-details {
font-size: 0.9rem;
color: #a0b0c0;
margin: 12px 0 16px;
}
.sp-mode-play-btn {
width: 100%;
margin-top: auto;
}
/* ============================================================
MULTIPLAYER HUB - Moved to multiplayer.css
============================================================ */
/* ============================================================
GAME BROWSER / LOBBY - Styles moved to multiplayer.css
============================================================ */
/* Versus lobby styles moved to versus.css */
/* ============================================================
COMPACT GAME CARDS, LEGACY CARDS, LEADERBOARD - Moved to multiplayer.css
============================================================ */
.mp-lb-stats svg {
width: 11px;
height: 11px;
display: inline-block;
vertical-align: middle;
}
/* ============================================================
AUTH FORM MODERNIZATION
============================================================ */
.auth-subtitle {
text-align: center;
color: #666;
font-size: 0.95rem;
margin: -8px 0 12px 0;
line-height: 1.4;
}
.auth-form-group {
margin-bottom: 10px;
}
.auth-label {
display: block;
font-weight: 600;
color: #333;
margin-bottom: 4px;
font-size: 0.85rem;
}
.auth-input {
width: 100%;
padding: 10px 12px;
border: 2px solid #e0e0e0;
border-radius: 8px;
font-size: 0.95rem;
transition: border-color 0.3s, box-shadow 0.3s;
font-family: inherit;
box-sizing: border-box;
}
.auth-input:focus {
outline: none;
border-color: #1487c6;
box-shadow: 0 0 0 3px rgba(20, 135, 198, 0.1);
}
.auth-hint {
margin: 3px 0 0 0;
font-size: 0.75rem;
color: #999;
line-height: 1.2;
text-align: right;
}
/* Auth box should keep light styling in dark mode */
body.dark-mode .auth-box .auth-input {
background: #fff !important;
border: 2px solid #e0e0e0 !important;
color: #333 !important;
}
body.dark-mode .auth-box .btnunified {
color: #666 !important;
}
body.dark-mode .auth-box .btnunified-blue {
color: #fff !important;
}
.auth-forgot-password {
text-align: right;
margin: 8px 0 16px 0;
}
.auth-forgot-password a {
color: #1487c6;
text-decoration: none;
font-size: 0.9rem;
font-weight: 500;
}
.auth-forgot-password a:hover {
text-decoration: underline;
}
.auth-error {
background: linear-gradient(135deg, #f8d7da, #f5c6cb);
color: #721c24;
padding: 12px;
border-radius: 8px;
border: 2px solid #f5c6cb;
font-size: 0.9rem;
margin-top: 12px;
}
.auth-error.is-hidden {
display: none;
}
.auth-success {
background: linear-gradient(135deg, #d4edda, #c3e6cb);
color: #155724;
padding: 12px;
border-radius: 8px;
border: 2px solid #c3e6cb;
font-size: 0.9rem;
margin-top: 12px;
text-align: center;
font-weight: 600;
}
.auth-success.is-hidden {
display: none;
}
.auth-actions {
display: flex;
flex-direction: column;
gap: 10px;
margin-top: 16px;
}
.auth-switch {
text-align: center;
margin-top: 16px;
font-size: 0.9rem;
color: #666;
}
.auth-switch a {
color: #1487c6;
text-decoration: none;
font-weight: 600;
}
.auth-switch a:hover {
text-decoration: underline;
}
/* Logout success animations */
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes slideIn {
from {
opacity: 0;
transform: translateY(-20px) scale(0.95);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
/* Versus hub and room styles moved to versus.css */
/* =====================================================================
GAME OVER OVERLAY (shared across modes)
===================================================================== */
.game-over-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
display: flex;
align-items: center;
justify-content: center;
z-index: 2000;
animation: fadeIn 0.3s ease-in-out;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.game-over-content {
background: linear-gradient(180deg, #ffffff 0%, #f5f5f5 100%);
border-radius: 20px;
padding: 25px 30px;
max-width: 600px;
width: 90%;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
text-align: center;
animation: slideUp 0.4s ease-out;
}
@keyframes slideUp {
from {
transform: translateY(50px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
.game-over-content h2 {
font-size: 2rem;
font-weight: 800;
margin: 0 0 18px 0;
letter-spacing: 0.5px;
}
.game-over-content h2.win {
color: #4caf50;
text-shadow: 2px 2px 4px rgba(76, 175, 80, 0.3);
}
.game-over-content h2.lose {
color: #f44336;
text-shadow: 2px 2px 4px rgba(244, 67, 54, 0.3);
}
/* VERSUS MODE: Tie game styling */
.game-over-content h2.tie {
color: #ff9800;
text-shadow: 2px 2px 4px rgba(255, 152, 0, 0.3);
}
.game-over-scores {
display: flex;
align-items: center;
justify-content: space-around;
gap: 15px;
margin: 18px 0;
padding: 15px;
background: rgba(255, 255, 255, 0.5);
border-radius: 12px;
}
.player-result {
flex: 1;
text-align: center;
}
.player-result .player-name {
font-size: 1rem;
font-weight: 700;
color: #333;
margin-bottom: 6px;
}
.player-result .player-score {
font-size: 1.6rem;
font-weight: 800;
color: #1976d2;
margin-bottom: 8px;
}
.player-result .player-badge {
display: inline-block;
padding: 6px 16px;
border-radius: 20px;
font-size: 0.9rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.player-result .player-badge.win {
background: #4caf50;
color: white;
}
.player-result .player-badge.lose {
background: #f44336;
color: white;
}
/* VERSUS MODE: Tie badge styling */
.player-result .player-badge.tie {
background: #ff9800;
color: white;
}
.vs-separator {
font-size: 1.4rem;
font-weight: 900;
color: #ff9800;
opacity: 0.7;
}
.rank-change {
margin: 15px 0;
padding: 12px 15px;
background: rgba(33, 150, 243, 0.1);
border-radius: 12px;
border: 2px solid rgba(33, 150, 243, 0.3);
}
.rank-change p {
margin: 5px 0;
font-size: 0.95rem;
font-weight: 600;
color: var(--ink, #333);
}
.rank-change .positive {
color: #4caf50;
font-weight: 800;
}
.rank-change .negative {
color: #f44336;
font-weight: 800;
}
/* Dark mode rank change */
body.dark-mode .rank-change p {
color: #ffffff;
}
body.dark-mode .rank-change .positive {
color: #81c784;
}
body.dark-mode .rank-change .negative {
color: #ef5350;
}
/* ============================================
GAME OVERLAY - Persistent Floating Container
============================================ */
.game-overlay {
position: fixed;
top: 55px;
left: 50%;
transform: translateX(-50%);
width: 1040px;
max-width: 105vw;
height: auto;
max-height: calc(100vh);
background: #1a1a2e;
border-radius: 12px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.1);
z-index: 800;
display: flex;
flex-direction: column;
overflow: hidden;
transition: transform 0.3s ease, opacity 0.3s ease;
transform-origin: top center;
}
.game-overlay.is-hidden {
display: none !important;
}
/* Overlay Header */
.game-overlay-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 12px;
background: linear-gradient(135deg, #2d3a5a 0%, #1d2844 100%);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
user-select: none;
flex-shrink: 0;
/* cursor: grab; - uncomment when dragging is enabled */
}
.game-overlay-drag-handle {
display: flex;
align-items: center;
gap: 8px;
color: rgba(255, 255, 255, 0.8);
font-weight: 600;
font-size: 0.9rem;
}
.game-overlay-drag-handle i {
display: none; /* Hide grip icon since dragging is disabled */
}
.game-overlay-controls {
display: flex;
gap: 4px;
}
.game-overlay-btn {
background: rgba(255, 255, 255, 0.1);
border: none;
border-radius: 6px;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: rgba(255, 255, 255, 0.7);
transition: all 0.15s ease;
}
.game-overlay-btn:hover {
background: rgba(255, 255, 255, 0.2);
color: #fff;
}
.game-overlay-btn.game-overlay-close:hover {
background: rgba(239, 68, 68, 0.8);
color: #fff;
}
.game-overlay-btn i {
width: 16px;
height: 16px;
}
/* Volume Controls in Header */
.game-overlay-volume {
display: flex;
align-items: center;
gap: 16px;
margin-left: auto;
margin-right: 16px;
}
.volume-control {
display: flex;
align-items: center;
gap: 8px;
}
.volume-btn {
flex-shrink: 0;
}
.volume-btn.muted {
color: rgba(255, 100, 100, 0.8);
margin-left: 0 !important; /* Override generic .muted margin */
}
.volume-btn.muted:hover {
color: #ff6464;
}
.volume-slider {
-webkit-appearance: none;
appearance: none;
width: 80px;
height: 6px;
border-radius: 3px;
background: rgba(255, 255, 255, 0.2);
outline: none;
cursor: pointer;
}
.volume-slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 14px;
height: 14px;
border-radius: 50%;
background: #18a2ee;
cursor: pointer;
transition: transform 0.1s ease;
}
.volume-slider::-webkit-slider-thumb:hover {
transform: scale(1.2);
}
.volume-slider::-moz-range-thumb {
width: 14px;
height: 14px;
border-radius: 50%;
background: #18a2ee;
cursor: pointer;
border: none;
}
.volume-slider:disabled {
opacity: 0.4;
cursor: not-allowed;
}
/* Tile Customization Dropdowns (Desktop Header) */
.game-overlay-customization {
display: flex;
align-items: center;
gap: 4px;
margin-right: 8px;
}
.header-dropdown {
position: relative;
}
.header-dropdown-menu {
display: none;
position: absolute;
top: calc(100% + 8px);
left: 50%;
transform: translateX(-50%);
background: linear-gradient(180deg, #1e2d4f, #152040);
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 12px;
padding: 10px;
min-width: 240px;
max-width: 360px;
max-height: 400px;
overflow-y: auto;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
z-index: 900;
}
.header-dropdown-menu::before {
content: '';
position: absolute;
top: -6px;
left: 50%;
transform: translateX(-50%);
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-bottom: 7px solid rgba(255, 255, 255, 0.15);
}
.header-dropdown-menu::after {
content: '';
position: absolute;
top: -5px;
left: 50%;
transform: translateX(-50%);
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #1e2d4f;
}
.header-dropdown-menu.open {
display: block;
}
.header-dropdown-title {
font-size: 0.75rem;
font-weight: 600;
color: rgba(255, 255, 255, 0.5);
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 8px;
padding: 0 2px;
}
.header-dropdown-items {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
gap: 6px;
}
.header-dropdown-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
padding: 8px 6px;
border-radius: 8px;
background: rgba(255, 255, 255, 0.05);
border: 2px solid transparent;
cursor: pointer;
transition: all 0.15s ease;
}
.header-dropdown-item:hover {
background: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.2);
}
.header-dropdown-item.active {
border-color: #18a2ee;
background: rgba(24, 162, 238, 0.15);
}
.header-dropdown-item.locked {
opacity: 0.35;
cursor: not-allowed;
}
.header-dropdown-item.locked:hover {
background: rgba(255, 255, 255, 0.05);
border-color: transparent;
}
.header-dropdown-item-name {
font-size: 0.7rem;
color: rgba(255, 255, 255, 0.8);
font-weight: 500;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 90px;
}
.header-dropdown-hint {
font-size: 0.65rem;
color: rgba(255, 255, 255, 0.35);
text-align: center;
padding: 8px 4px 2px;
border-top: 1px solid rgba(255, 255, 255, 0.07);
margin-top: 8px;
}
/* Effect dropdown active indicator (amber) */
#header-effect-menu .header-dropdown-item.active {
border-color: #f59e0b;
background: rgba(245, 158, 11, 0.15);
}
/* Options Panel (mobile sliding panel) */
.options-panel {
background: linear-gradient(180deg, #193764, #0f2444);
border: 1px solid #204a8b;
border-radius: 16px;
display: none;
flex-direction: column;
overflow: hidden;
}
.options-panel-title {
padding: 4px 0;
margin: 0;
background: linear-gradient(to bottom, #8b7fc7 0%, #5b4fa0 40%, #3d3480 100%);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
font-size: 15px;
font-weight: 700;
color: #fff;
text-align: center;
}
.options-panel-content {
padding: 12px 14px;
overflow-y: auto;
flex: 1;
}
.options-section {
margin-bottom: 16px;
}
.options-section:last-child {
margin-bottom: 0;
}
.options-section-title {
font-size: 0.75rem;
font-weight: 600;
color: rgba(255, 255, 255, 0.5);
text-transform: uppercase;
letter-spacing: 0.5px;
margin: 0 0 8px 0;
}
/* Options theme selector (compact grid) */
.options-theme-selector {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
gap: 6px;
}
.options-theme-item,
.options-effect-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
padding: 8px 6px;
border-radius: 8px;
background: rgba(255, 255, 255, 0.05);
border: 2px solid transparent;
cursor: pointer;
transition: all 0.15s ease;
}
.options-theme-item:hover,
.options-effect-item:hover {
background: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.2);
}
.options-theme-item.active {
border-color: #18a2ee;
background: rgba(24, 162, 238, 0.15);
}
.options-effect-item.active {
border-color: #f59e0b;
background: rgba(245, 158, 11, 0.15);
}
.options-theme-item.locked,
.options-effect-item.locked {
opacity: 0.35;
cursor: not-allowed;
}
.options-theme-item.locked:hover,
.options-effect-item.locked:hover {
background: rgba(255, 255, 255, 0.05);
border-color: transparent;
}
.options-item-preview {
display: flex;
gap: 2px;
}
.options-item-preview .mini-tile {
width: 18px;
height: 18px;
border-radius: 3px;
font-size: 7px;
font-weight: bold;
display: flex;
align-items: center;
justify-content: center;
}
.options-item-icon,
.options-theme-item-icon,
.options-effect-item-icon,
.header-dropdown-item-icon {
font-size: 1.4rem;
line-height: 1;
}
.options-item-name,
.options-theme-item-name,
.options-effect-item-name {
font-size: 0.7rem;
color: rgba(255, 255, 255, 0.8);
font-weight: 500;
text-align: center;
}
.options-effect-selector {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
gap: 6px;
}
.options-loading {
color: rgba(255, 255, 255, 0.4);
font-size: 0.8rem;
text-align: center;
padding: 12px;
}
/* Options audio controls */
.options-audio-controls {
display: flex;
flex-direction: column;
gap: 10px;
}
.options-audio-row {
display: flex;
align-items: center;
gap: 10px;
padding: 6px 8px;
background: rgba(255, 255, 255, 0.05);
border-radius: 8px;
}
.options-audio-btn {
background: rgba(255, 255, 255, 0.1);
border: none;
border-radius: 6px;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: rgba(255, 255, 255, 0.8);
transition: all 0.15s ease;
flex-shrink: 0;
}
.options-audio-btn:hover {
background: rgba(255, 255, 255, 0.2);
color: #fff;
}
.options-audio-btn.muted {
color: rgba(255, 100, 100, 0.8);
}
.options-audio-btn i,
.options-audio-btn svg {
width: 16px;
height: 16px;
}
.options-audio-label {
font-size: 0.8rem;
color: rgba(255, 255, 255, 0.7);
font-weight: 500;
min-width: 40px;
}
.options-audio-slider {
-webkit-appearance: none;
appearance: none;
flex: 1;
height: 6px;
border-radius: 3px;
background: rgba(255, 255, 255, 0.2);
outline: none;
cursor: pointer;
}
.options-audio-slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 16px;
height: 16px;
border-radius: 50%;
background: #18a2ee;
cursor: pointer;
}
.options-audio-slider::-moz-range-thumb {
width: 16px;
height: 16px;
border-radius: 50%;
background: #18a2ee;
cursor: pointer;
border: none;
}
.options-audio-slider:disabled {
opacity: 0.4;
cursor: not-allowed;
}
/* Overlay Content */
.game-overlay-content {
flex: 1;
padding: 0;
position: relative;
overflow: visible;
}
/* Game area inside overlay - preserve original layout and dimensions */
.game-overlay-content #game-area {
display: block !important;
padding: 0;
margin: 0;
}
/* Don't constrain the game layout - let it use its natural size */
.game-overlay-content .game-layout {
/* Remove height constraint to prevent left/right panels from stretching */
}
/* Override center-max constraints when inside overlay to fix buttons and working row */
.game-overlay-content .board,
.game-overlay-content .buttons,
.game-overlay-content .working-row {
max-width: none !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
/* Resize Handle - DISABLED for fixed size */
.game-overlay-resize-handle {
display: none; /* Disable resizing to maintain fixed layout */
}
/* Fullscreen State */
.game-overlay.fullscreen {
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
width: 100% !important;
height: 100% !important;
max-width: none !important;
max-height: none !important;
transform: none !important;
border-radius: 0;
}
.game-overlay.fullscreen .game-overlay-resize-handle {
display: none;
}
/* Dragging State */
.game-overlay.dragging {
cursor: grabbing;
opacity: 0.95;
transition: none;
}
/* Zoom States - using CSS zoom for sharp rendering (re-renders content) */
.game-overlay.zoom-85 {
zoom: 0.85;
}
.game-overlay.zoom-90 {
zoom: 0.9;
}
.game-overlay.zoom-95 {
zoom: 0.95;
}
.game-overlay.zoom-100 {
zoom: 1.0;
}
.game-overlay.zoom-105 {
zoom: 1.05;
}
.game-overlay.zoom-110 {
zoom: 1.1;
}
.game-overlay.zoom-115 {
zoom: 1.15;
}
.game-overlay.zoom-120 {
zoom: 1.2;
}
/* ============================================
Minimized Game Button (Floating)
============================================ */
.game-minimized-btn {
position: fixed;
bottom: 80px;
right: 20px;
width: 56px;
height: 56px;
border-radius: 50%;
background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
border: none;
box-shadow: 0 4px 16px rgba(76, 175, 80, 0.4), 0 0 0 3px rgba(76, 175, 80, 0.2);
cursor: pointer;
z-index: 850;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
color: #fff;
}
.game-minimized-btn:hover {
transform: scale(1.1);
box-shadow: 0 6px 24px rgba(76, 175, 80, 0.5), 0 0 0 4px rgba(76, 175, 80, 0.3);
}
.game-minimized-btn i {
width: 24px;
height: 24px;
}
.game-minimized-btn.is-hidden {
display: none !important;
}
/* Pulsing indicator on minimized button */
.game-minimized-pulse {
position: absolute;
top: -2px;
right: -2px;
width: 14px;
height: 14px;
background: #ff5722;
border-radius: 50%;
animation: pulse-ring 1.5s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
}
@keyframes pulse-ring {
0% {
transform: scale(0.8);
opacity: 1;
}
50% {
transform: scale(1.2);
opacity: 0.7;
}
100% {
transform: scale(0.8);
opacity: 1;
}
}
/* ============================================
Return to Game Button (Header)
============================================ */
.return-to-game-btn {
display: flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
border: none;
border-radius: 8px;
color: #fff;
font-size: 0.85rem;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
animation: gentle-pulse 2s ease-in-out infinite;
margin-right: 8px;
}
.return-to-game-btn:hover {
transform: scale(1.05);
box-shadow: 0 4px 12px rgba(76, 175, 80, 0.4);
}
.return-to-game-btn i {
width: 16px;
height: 16px;
}
.return-to-game-btn.is-hidden {
display: none !important;
}
@keyframes gentle-pulse {
0%, 100% {
box-shadow: 0 2px 8px rgba(76, 175, 80, 0.3);
}
50% {
box-shadow: 0 4px 16px rgba(76, 175, 80, 0.5);
}
}
/* ============================================
Mobile Responsive Adjustments
============================================ */
@media (max-width: 768px), ((pointer: coarse) and (orientation: portrait) and (max-width: 1400px)) {
.game-overlay {
top: var(--header-h, 52px) !important;
left: 0 !important;
right: 0 !important;
bottom: var(--bottom-nav-h, 58px) !important;
width: 100% !important;
height: 100% !important;
max-width: none !important;
max-height: none !important;
min-width: unset !important;
min-height: unset !important;
transform: none !important;
zoom: 1.0 !important;
border-radius: 0;
overflow: hidden;
/* Disable pull-to-refresh */
overscroll-behavior: contain;
touch-action: pan-y pan-x;
}
/* Mobile content - prevent overscroll and pull-to-refresh */
.game-overlay-content {
overflow-y: auto !important;
overflow-x: hidden !important;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
height: 100%;
}
/* Disable zoom on mobile */
.game-overlay.zoom-85,
.game-overlay.zoom-90,
.game-overlay.zoom-110,
.game-overlay.zoom-120 {
zoom: 1.0 !important;
}
.game-overlay-header {
padding: 6px 10px;
}
.game-overlay-drag-handle span {
font-size: 0.8rem;
}
.game-overlay-resize-handle {
display: none;
}
.game-minimized-btn {
bottom: calc(var(--bottom-nav-h, 58px) + 16px);
width: 48px;
height: 48px;
}
.return-to-game-btn span {
display: none; /* Icon only on mobile */
}
.return-to-game-btn {
padding: 6px;
margin-right: 4px;
}
}
@media (max-width: 600px), ((pointer: coarse) and (orientation: portrait) and (max-width: 1400px)) {
.game-overlay-btn {
width: 28px;
height: 28px;
}
.game-overlay-btn i {
width: 14px;
height: 14px;
}
}
/* When body has game-overlay-open class, prevent background scroll */
body.game-overlay-open {
overflow: hidden;
}
/* Disable navigation buttons during active game */
.nav-disabled {
opacity: 0.3;
pointer-events: none;
cursor: default;
}
/* Disable all back buttons during active game */
body.game-nav-locked [id*="back-btn"] {
opacity: 0.3;
pointer-events: none;
cursor: default;
}
/* Ensure game-area styles work inside overlay */
.game-overlay-content .container {
height: 100%;
display: flex;
flex-direction: column;
}
/* Adjust game layout for overlay context */
.game-overlay-content .game-layout {
padding: 10px;
gap: 10px;
}
.game-overlay-content .left-panel,
.game-overlay-content .right-panel {
max-height: none;
}
/* Dark scrim behind overlay when active */
.game-overlay-scrim {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.3);
z-index: 799;
opacity: 0;
pointer-events: none;
transition: opacity 0.2s ease;
}
.game-overlay-scrim.active {
opacity: 1;
pointer-events: auto;
}
/* ============================================================
DARK MODE OVERRIDES - MUST BE LAST TO OVERRIDE EVERYTHING
============================================================ */
/* Force dark mode backgrounds */
body.dark-mode {
background: #1e293b !important;
}
body.dark-mode #mp-lobby,
body.dark-mode #versus-lobby,
body.dark-mode #settings-page {
background: #1e293b !important;
}
/* Settings cards - FORCE DARK */
body.dark-mode .settings-card {
background: #242b3d !important;
border: 1px solid #374151 !important;
}
body.dark-mode .settings-card-header,
body.dark-mode .settings-card-body {
background: transparent !important;
}
body.dark-mode .settings-card h3,
body.dark-mode .settings-card-header h3 {
color: #ffffff !important;
}
body.dark-mode .settings-card label,
body.dark-mode .settings-card p,
body.dark-mode .switch-label {
color: #e8eaed !important;
}
/* Daily cards - FORCE DARK */
body.dark-mode .daily-card,
body.dark-mode .daily-card-hero {
background: #242b3d !important;
border: 1px solid #374151 !important;
}
body.dark-mode .daily-card-header {
background: rgba(36, 43, 61, 0.8) !important;
border-bottom: 1px solid #374151 !important;
}
body.dark-mode .daily-card-title,
body.dark-mode .daily-card h2,
body.dark-mode .daily-card h3 {
color: #ffffff !important;
}
body.dark-mode .daily-card-body,
body.dark-mode .daily-card p {
color: #e8eaed !important;
}
/* Game cards (mp-card) - FORCE DARK */
body.dark-mode .mp-card {
background: #242b3d !important;
border: 1px solid #374151 !important;
}
/* Note: .mp-card-header dark mode styles are in multiplayer.css */
body.dark-mode .mp-card-room-name,
body.dark-mode .mp-card h3 {
color: #ffffff !important;
}
body.dark-mode .mp-card-body {
background: transparent !important;
}
body.dark-mode .mp-card-player {
background: rgba(255, 255, 255, 0.05) !important;
}
body.dark-mode .mp-card-player-name,
body.dark-mode .mp-card-player-rating {
color: #e8eaed !important;
}
/* Drawer - FORCE READABLE */
body.dark-mode #app-drawer,
body.dark-mode .drawer {
background: #242b3d !important;
}
body.dark-mode .drawer-header {
border-bottom-color: #3d4556 !important;
}
body.dark-mode .drawer-title {
color: #e8eaed !important;
}
body.dark-mode .drawer-close {
color: #e8eaed !important;
}
body.dark-mode .drawer-close:hover {
background: rgba(255, 255, 255, 0.1) !important;
}
body.dark-mode .drawer-item,
body.dark-mode .drawer-item span,
body.dark-mode .drawer-item i {
color: #b8bcc4 !important;
}
body.dark-mode .drawer-item:hover {
background: #389b3b !important;
color: #ffffff !important;
}
body.dark-mode .drawer-list li {
color: #e8eaed !important;
}
body.dark-mode .drawer-list .divider {
border-color: #3d4556 !important;
}
body.dark-mode .drawer-sublist {
border-left-color: #3d4556 !important;
}
/* Footer - also mentioned by user */
body.dark-mode #site-footer,
body.dark-mode footer {
background: #1a1f2e !important;
border-top: 1px solid #374151 !important;
color: #e8eaed !important;
}
body.dark-mode #site-footer a {
color: #60a5fa !important;
}
/* Make absolutely sure ALL text is readable */
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4 {
color: #ffffff !important;
}
/* Buttons should keep their colors */
body.dark-mode .btnunified,
body.dark-mode button.btnunified {
color: #ffffff !important;
}
/* Input fields */
body.dark-mode input,
body.dark-mode textarea,
body.dark-mode select {
background: #1a1f2e !important;
border: 1px solid #374151 !important;
color: #e8eaed !important;
}
/* Leaderboard expandable sections - FORCE DARK */
body.dark-mode .leaderboard-expandable {
background: #242b3d !important;
border: 1px solid #374151 !important;
}
body.dark-mode .leaderboard-toggle {
background: #242b3d !important;
color: #ffffff !important;
}
body.dark-mode .leaderboard-toggle:hover {
background: rgba(255, 255, 255, 0.1) !important;
}
body.dark-mode .toggle-title {
color: #ffffff !important;
}
body.dark-mode .toggle-icon {
color: #e8eaed !important;
}
/* Modal backdrop and cards - FORCE DARK */
body.dark-mode .modal-backdrop {
background: rgba(30, 41, 59, 0.95) !important;
}
body.dark-mode .modal-card {
background: #242b3d !important;
border: 1px solid #374151 !important;
}
body.dark-mode .modal-title {
color: #ffffff !important;
}
body.dark-mode .modal-card p,
body.dark-mode .modal-card span {
color: #e8eaed !important;
}
/* Fix dark mode for OverlayManager modals */
body.dark-mode .modal-overlay .modal-content,
body.dark-mode .overlay.modal-overlay .modal-content {
background: #242b3d !important;
border: 1px solid #374151 !important;
color: #e8eaed !important;
}
body.dark-mode .modal-overlay .modal-title,
body.dark-mode .overlay.modal-overlay .modal-title {
color: #ffffff !important;
}
body.dark-mode .modal-overlay .modal-body,
body.dark-mode .overlay.modal-overlay .modal-body {
color: #e8eaed !important;
}
/* Settings tabs - fix inactive state borders */
body.dark-mode .settings-tab {
background: rgba(26, 31, 46, 0.9) !important;
border: 2px solid #374151 !important;
color: rgba(255, 255, 255, 0.7) !important;
}
body.dark-mode .settings-tab:hover {
background: rgba(255, 255, 255, 0.1) !important;
border-color: var(--brand-blue) !important;
color: #ffffff !important;
}
body.dark-mode .settings-tab.active {
background: linear-gradient(135deg, #1487c6, #18a2ee) !important;
color: #ffffff !important;
border-color: #1487c6 !important;
}
/* Verified email badge - improve readability */
body.dark-mode .badge.verified {
background: linear-gradient(135deg, #1b4d3e, #2d7a5f) !important;
color: #90ee90 !important;
border-color: #2d7a5f !important;
}
body.dark-mode .badge.unverified {
background: linear-gradient(135deg, #5a4a1f, #7a6a2f) !important;
color: #ffd700 !important;
border-color: #7a6a2f !important;
}
/* Single-player and Daily overlay stats rows - dark mode fix */
body.dark-mode .sp-stats .row,
body.dark-mode .sp-results .row {
background: rgba(26, 31, 46, 0.6) !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
color: #e8eaed !important;
}
body.dark-mode .sp-stats .label,
body.dark-mode .sp-results .label,
body.dark-mode .sp-stats .value,
body.dark-mode .sp-results .value {
color: #e8eaed !important;
}
/* Daily countdown label - improve contrast */
body.dark-mode .daily-countdown .countdown-label {
color: rgba(255, 255, 255, 0.8) !important;
}
body.dark-mode .daily-countdown .countdown-time {
color: #18a2ee !important;
}
/* Daily stat labels and values */
body.dark-mode .stat-label {
color: rgba(255, 255, 255, 0.8) !important;
}
body.dark-mode .stat-value {
color: #ffffff !important;
}
/* Daily play button - ensure it's visible */
body.dark-mode #daily-play-btn,
body.dark-mode .daily-play-btn {
background: linear-gradient(135deg, #1487c6, #18a2ee) !important;
color: #ffffff !important;
border: none !important;
}
body.dark-mode #daily-play-btn:hover,
body.dark-mode .daily-play-btn:hover {
box-shadow: 0 8px 20px rgba(24, 162, 238, 0.4) !important;
}
/* Multiplayer/Party leaderboard hover - fix readability */
body.dark-mode .mp-lb-player:hover {
background: rgba(255, 255, 255, 0.08) !important;
}
/* Daily table rows hover */
body.dark-mode .daily-table tbody tr:hover {
background: rgba(255, 255, 255, 0.08) !important;
}
/* Top 3 mini display in daily cards */
body.dark-mode .top3-mini .top3-item {
background: rgba(26, 31, 46, 0.6) !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
}
body.dark-mode .top3-name,
body.dark-mode .top3-score,
body.dark-mode .top3-rank {
color: #e8eaed !important;
}
body.dark-mode .top3-item:nth-child(even) {
background: rgba(35, 42, 60, 0.7) !important;
}
body.dark-mode .how-to-play-btn {
background: rgba(255, 255, 255, 0.1);
color: #e8eaed;
}
body.dark-mode .how-to-play-btn:hover {
background: rgba(255, 255, 255, 0.2);
}
/* Versus hub dark mode styles moved to versus.css */
/* MP hub dark mode styles moved to multiplayer.css */
/* Versus player cards dark mode moved to versus.css */
/* Game over overlay dark mode (shared) */
body.dark-mode .game-over-content {
background: var(--bg-secondary) !important;
}
/* Single-player hub mode cards */
body.dark-mode .sp-mode-card {
background: rgba(26, 31, 46, 0.9) !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
}
body.dark-mode .sp-mode-card:hover {
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4) !important;
}
body.dark-mode .sp-mode-details {
color: rgba(255, 255, 255, 0.8) !important;
}
/* Daily already played message */
body.dark-mode .daily-status-message-inline {
background: rgba(76, 175, 80, 0.2) !important;
border: 1px solid rgba(76, 175, 80, 0.4) !important;
}
body.dark-mode .status-text {
color: #90ee90 !important;
}
/* Avatar Editor - FORCE DARK MODE READABILITY */
body.dark-mode .avatar-scroll-arrow {
background: #242b3d !important;
border-color: #374151 !important;
color: #e8eaed !important;
}
body.dark-mode .avatar-scroll-arrow:hover {
background: rgba(255, 255, 255, 0.1) !important;
border-color: #667eea !important;
}
body.dark-mode .avatar-tab {
color: #e8eaed !important;
border-color: #374151 !important;
}
body.dark-mode .avatar-tab.active {
background: #667eea !important;
color: #ffffff !important;
border-color: #667eea !important;
}
body.dark-mode .avatar-option {
background: #242b3d !important;
border-color: #374151 !important;
}
body.dark-mode .avatar-option.active {
border-color: #667eea !important;
}
/* Avatar option text labels */
body.dark-mode .avatar-option div[style*="color: #666"] {
color: #e8eaed !important;
}
/* ================================================
TILE THEME SELECTOR (Settings β Appearance)
================================================ */
.tile-theme-section {
border-top: 1px solid #e0e0e0;
padding-top: 15px;
}
.settings-label {
display: block;
font-weight: 600;
margin-bottom: 12px;
color: #333;
}
.tile-theme-selector {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 12px;
}
.tile-theme-loading {
grid-column: 1 / -1;
text-align: center;
color: #888;
padding: 20px;
}
.tile-theme-option {
border: 2px solid #ddd;
border-radius: 10px;
padding: 10px;
cursor: pointer;
transition: all 0.2s ease;
background: #f9f9f9;
}
.tile-theme-option:hover {
border-color: #18a2ee;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.tile-theme-option.active {
border-color: #18a2ee;
background: rgba(24, 162, 238, 0.1);
}
.tile-theme-option.locked {
opacity: 0.5;
cursor: not-allowed;
}
.tile-theme-option.locked:hover {
transform: none;
border-color: #ddd;
box-shadow: none;
}
.tile-theme-preview {
display: flex;
gap: 4px;
justify-content: center;
margin-bottom: 8px;
}
.tile-theme-preview-tile {
width: 28px;
height: 28px;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
font-size: 10px;
font-weight: bold;
}
.tile-theme-name {
text-align: center;
font-size: 0.85rem;
font-weight: 600;
color: #333;
}
.tile-theme-price {
text-align: center;
font-size: 0.75rem;
color: #888;
margin-top: 4px;
}
.tile-theme-price.owned {
color: #22c55e;
}
/* Dark mode styles for tile theme selector */
body.dark-mode .tile-theme-section {
border-top-color: #374151;
}
body.dark-mode .settings-label {
color: #e8eaed;
}
body.dark-mode .tile-theme-option {
background: #242b3d;
border-color: #374151;
}
body.dark-mode .tile-theme-option:hover {
border-color: #667eea;
}
body.dark-mode .tile-theme-option.active {
border-color: #667eea;
background: rgba(102, 126, 234, 0.2);
}
body.dark-mode .tile-theme-name {
color: #e8eaed;
}
body.dark-mode .tile-theme-hint {
color: #9ca3af !important;
}
body.dark-mode .tile-theme-hint a {
color: #667eea !important;
}
/* Tile Effect Selector (Settings > Game Preferences) */
.tile-effect-selector {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
gap: 10px;
}
.tile-effect-loading {
grid-column: 1 / -1;
text-align: center;
color: #888;
padding: 20px;
}
.tile-effect-option {
border: 2px solid #ddd;
border-radius: 10px;
padding: 8px 6px;
cursor: pointer;
transition: all 0.2s ease;
background: #f9f9f9;
text-align: center;
}
.tile-effect-option:hover {
border-color: #f59e0b;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.tile-effect-option.active {
border-color: #f59e0b;
background: rgba(245, 158, 11, 0.1);
}
.tile-effect-option.locked {
opacity: 0.5;
cursor: not-allowed;
}
.tile-effect-option.locked:hover {
transform: none;
border-color: #ddd;
box-shadow: none;
}
.tile-effect-option-icon {
font-size: 1.8rem;
margin-bottom: 4px;
}
.tile-effect-name {
font-size: 0.8rem;
font-weight: 600;
color: #333;
}
.tile-effect-price {
font-size: 0.7rem;
color: #888;
margin-top: 4px;
}
.tile-effect-price.owned {
color: #22c55e;
}
/* Dark mode styles for tile effect selector */
body.dark-mode .tile-effect-option {
background: #242b3d;
border-color: #374151;
}
body.dark-mode .tile-effect-option:hover {
border-color: #f59e0b;
}
body.dark-mode .tile-effect-option.active {
border-color: #f59e0b;
background: rgba(245, 158, 11, 0.2);
}
body.dark-mode .tile-effect-name {
color: #e8eaed;
}
body.dark-mode .tile-effect-hint {
color: #9ca3af !important;
}
body.dark-mode .tile-effect-hint a {
color: #667eea !important;
}
/* =========================================================
π± ROTATE DEVICE OVERLAY (Mobile/Tablet Landscape Block)
========================================================= */
.rotate-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, #0f1f44 0%, #1a3a6e 50%, #0d1a33 100%);
z-index: 99999;
justify-content: center;
align-items: center;
flex-direction: column;
}
.rotate-content {
text-align: center;
color: #fff;
padding: 40px;
animation: gentlePulse 2s ease-in-out infinite;
}
.rotate-icon {
color: #6fbeff;
margin-bottom: 20px;
animation: rotateHint 3s ease-in-out infinite;
}
.rotate-text {
font-size: 1.2rem;
font-weight: 600;
color: #e8f4ff;
margin: 0;
text-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
@keyframes gentlePulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.85; }
}
@keyframes rotateHint {
0%, 100% { transform: rotate(0deg); }
25% { transform: rotate(-15deg); }
75% { transform: rotate(15deg); }
}
/* =========================================================
π± BOTTOM NAV - GAME MODE BUTTONS
Only show game buttons on touch devices (mobile/tablet)
========================================================= */
/* Hide game buttons by default (on all devices) */
.bn-game {
display: none !important;
}
/* Hide old mobile panel buttons on ALL devices */
#mobile-panel-buttons {
display: none !important;
visibility: hidden !important;
height: 0 !important;
overflow: hidden !important;
}
/* Also hide the individual panel buttons */
.panel-btn {
display: none !important;
}
/* Show nav buttons by default */
.bn-nav {
display: flex !important;
}
/* During game: hide nav buttons on ALL devices */
body.is-sp .bn-nav,
body.is-mp .bn-nav,
body.is-vs .bn-nav,
body.is-daily .bn-nav,
body.is-elim .bn-nav {
display: none !important;
}
/* Game mode bottom nav - only show on mobile/touch devices */
@media (hover: none) or (pointer: coarse) {
body.is-sp .bottom-nav,
body.is-mp .bottom-nav,
body.is-vs .bottom-nav,
body.is-daily .bottom-nav,
body.is-elim .bottom-nav {
display: flex !important;
justify-content: space-evenly !important;
gap: 0;
background: linear-gradient(180deg, #1a3a6e 0%, #0f2347 100%);
border-top: 1px solid #2a4a8b;
}
}
/* Game nav button styling */
.bn-game {
color: #fff !important;
min-width: 0;
flex: 1 1 0 !important; /* Equal width for all buttons */
max-width: 80px;
text-align: center;
overflow: hidden;
box-sizing: border-box;
}
.bn-game i,
.bn-game svg {
stroke: currentColor;
width: 20px !important;
height: 20px !important;
min-width: 20px;
max-width: 20px;
min-height: 20px;
max-height: 20px;
flex-shrink: 0;
flex-grow: 0;
box-sizing: content-box;
}
.bn-game .bn-label {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Active state for game buttons */
.bn-game.active {
color: #4ade80 !important;
}
/* ============================================================
π RESPONSIVE STYLES - ALL BREAKPOINTS CONSOLIDATED
============================================================
Structure:
1. LARGE DESKTOP (min-width: 1200px)
2. DESKTOP (min-width: 900px)
3. TABLET PORTRAIT (min-width: 768px)
4. TABLET (max-width: 1024px)
5. MEDIUM SCREENS (max-width: 1100px)
6. MOBILE (max-width: 768px)
7. TOUCH DEVICES (pointer: coarse)
8. MOBILE + TOUCH (max-width: 900px OR touch portrait)
9. SMALL MOBILE (max-width: 480px)
10. HOVER CAPABILITY (hover: hover)
============================================================ */
/* --- 1. LARGE DESKTOP (min-width: 1200px) --- */
@media (min-width: 1200px) {
/* GB panel - wider on large screens */
.gb-panel {
width: min(700px, 70vw);
}
}
/* --- 2. DESKTOP (min-width: 900px) --- */
@media (min-width: 900px) {
/* Daily leaderboards - side-by-side layout */
.daily-leaderboards-wrapper {
grid-template-columns: 1fr 1fr;
}
/* Daily leaderboard - remove centering for side-by-side */
.daily-leaderboard {
max-width: none;
}
/* Hide bottom nav on desktop */
.bottom-nav {
display: none;
}
}
/* --- 3. TABLET PORTRAIT (min-width: 768px) --- */
@media (min-width: 768px) {
/* Daily hub cards - 2-column grid */
.daily-hub-cards {
grid-template-columns: 1fr 1fr;
}
.daily-card-hero {
grid-column: 1 / -1; /* Hero card spans both columns */
}
}
/* --- 4. TABLET (max-width: 1024px) --- */
/* MP lobby responsive styles moved to multiplayer.css */
/* --- 5. MEDIUM SCREENS (max-width: 1100px) --- */
@media (max-width: 1100px) {
/* 2-column layout: Scoreboard + Game; Chat drops below */
#game-area .game-layout {
grid-template-columns: var(--sb-col) 1fr;
}
#chat-panel {
grid-column: 1 / -1; /* full width under board */
}
}
/* --- 6. MOBILE (max-width: 768px) --- */
@media (max-width: 768px) {
/* Daily page mobile layout */
#daily-page {
padding: 18px;
box-sizing: border-box;
}
.daily-hub-cards {
grid-template-columns: 1fr;
padding: 0;
margin: 20px 0;
width: 100%;
max-width: 100%;
box-sizing: border-box;
}
.daily-card {
width: 100%;
max-width: 100%;
margin: 0;
box-sizing: border-box;
}
.daily-stats-row {
grid-template-columns: 1fr;
}
.daily-card-header {
flex-direction: column;
align-items: flex-start;
}
.daily-card-body {
width: 100%;
box-sizing: border-box;
}
.top3-mini {
width: 100%;
box-sizing: border-box;
}
.top3-item {
width: 100%;
box-sizing: border-box;
}
.leaderboards-section {
padding: 0;
width: 100%;
margin: 40px 0 20px;
box-sizing: border-box;
}
.leaderboard-expandable {
width: 100%;
box-sizing: border-box;
}
/* Game over results - narrower on mobile */
#gameover-results-content {
width: min(95vw, 480px);
max-width: 480px;
}
/* MP lobby responsive styles moved to multiplayer.css */
/* Versus room mobile styles moved to versus.css */
/* Game over content mobile */
.game-over-content {
padding: 20px 18px;
max-height: 90vh;
overflow-y: auto;
}
.game-over-content h2 {
font-size: 1.6rem;
margin: 0 0 12px 0;
}
.game-over-scores {
gap: 10px;
margin: 12px 0;
padding: 12px;
}
.player-result .player-name {
font-size: 0.9rem;
margin-bottom: 4px;
}
.player-result .player-score {
font-size: 1.4rem;
margin-bottom: 6px;
}
.vs-separator {
font-size: 1.2rem;
}
.rank-change {
margin: 10px 0;
padding: 10px;
}
.rank-change p {
margin: 3px 0;
font-size: 0.85rem;
}
}
/* --- 7. TOUCH DEVICES (pointer: coarse) --- */
/* =========================================================
π± TOUCH DEVICES ONLY - Show game buttons
Uses pointer: coarse to detect touch devices
========================================================= */
@media (pointer: coarse) {
/* Show game buttons on touch devices during game */
body.is-sp .bn-game,
body.is-mp .bn-game,
body.is-vs .bn-game,
body.is-daily .bn-game,
body.is-elim .bn-game {
display: flex !important;
}
/* (volume button display rules removed - now in options panel) */
/* SP mode: hide chat and rank, show feed + scores + music + sfx */
body.is-sp #gn-chat,
body.is-sp #gn-rank {
display: none !important;
}
/* MP mode: hide feed, show chat + rank + scores + music + sfx */
body.is-mp #gn-feed {
display: none !important;
}
/* VS/Elim mode: similar to MP */
body.is-vs #gn-feed,
body.is-elim #gn-feed {
display: none !important;
}
/* Daily mode: similar to SP */
body.is-daily #gn-chat,
body.is-daily #gn-rank {
display: none !important;
}
/* Hide volume sliders in overlay header on touch devices */
.game-overlay-volume {
display: none !important;
}
}
/* =========================================================
π± TOUCH DEVICE LAYOUT (Mobile & Tablet < 900px)
Since we force portrait mode on all touch devices,
we can use a single consolidated rule set.
Uses clamp() and vw units for responsive scaling.
========================================================= */
@media (max-width: 900px), ((pointer: coarse) and (orientation: portrait) and (max-width: 1400px)) {
/* --- FIX iOS SAFARI FLOATING FIXED-NAV ---
Make body a fixed-height scroll container instead of letting the
document/html scroll. This prevents position:fixed elements from
bouncing during iOS overscroll / address-bar show/hide. */
html {
overflow: hidden !important;
height: 100% !important;
}
body {
height: 100% !important;
overflow-x: hidden !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch;
overscroll-behavior: none !important;
scroll-padding-top: var(--header-h, 52px);
}
html, body {
max-width: 100% !important;
touch-action: pan-y !important;
}
/* --- LOCK SCROLL WHEN GAME IS ACTIVE --- */
/* Prevent any scrolling/wiggle when in game mode */
body.is-sp,
body.is-mp,
body.is-vs,
body.is-daily,
body.is-elim {
position: fixed !important;
width: 100% !important;
height: 100% !important;
overflow: hidden !important;
overscroll-behavior: none !important;
touch-action: none !important;
}
body.is-sp #game-area,
body.is-mp #game-area,
body.is-vs #game-area,
body.is-daily #game-area,
body.is-elim #game-area,
body.is-sp .game-overlay,
body.is-mp .game-overlay,
body.is-vs .game-overlay,
body.is-daily .game-overlay,
body.is-elim .game-overlay {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
width: 100% !important;
max-width: 100% !important;
overflow: hidden !important;
overscroll-behavior: none !important;
z-index: 100 !important;
}
/* Ensure modals appear above game on mobile */
.modal-backdrop,
.modal-overlay,
.overlay.modal-overlay {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
width: 100% !important;
height: 100% !important;
z-index: 99999 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
background: rgba(0, 0, 0, 0.7) !important;
}
.modal-overlay .modal-content,
.overlay.modal-overlay .modal-content {
background: #fff !important;
border-radius: 12px !important;
padding: 20px !important;
max-width: 90% !important;
max-height: 80vh !important;
overflow-y: auto !important;
z-index: 100000 !important;
}
/* --- OVERRIDE ROOT VARIABLES --- */
:root {
--center-max: 100% !important;
--sb-col: 0px !important;
--chat-col: 0px !important;
}
/* --- HIDE DESKTOP ELEMENTS ON MOBILE --- */
/* Hide sub-header (zoom controls, minimize, close) - not needed on mobile */
.game-overlay-header {
display: none !important;
}
#mobile-panel-buttons {
display: none !important;
}
.mini-leaderboard-panel {
display: none !important;
}
body.is-sp #game-controls,
body.is-mp #game-controls,
body.is-vs #game-controls,
body.is-daily #game-controls,
body.is-elim #game-controls {
display: none !important;
}
/* --- HIDE HEADER DURING GAME (full-screen feel) --- */
body.is-sp .app-header,
body.is-mp .app-header,
body.is-vs .app-header,
body.is-daily .app-header,
body.is-elim .app-header {
display: none !important;
}
/* Hide hamburger menu during game to prevent UI issues */
body.is-sp .hamburger,
body.is-mp .hamburger,
body.is-vs .hamburger,
body.is-daily .hamburger,
body.is-elim .hamburger {
display: none !important;
}
/* Exit button styling - show on right side */
#gn-exit {
color: #ff6b6b !important;
margin-left: auto !important;
}
#gn-exit:hover {
color: #ff4444 !important;
}
/* --- COLLAPSE SIDE PANELS --- */
body.is-sp .left-panel,
body.is-mp .left-panel,
body.is-vs .left-panel,
body.is-daily .left-panel,
body.is-elim .left-panel {
width: 0 !important;
min-width: 0 !important;
max-width: 0 !important;
padding: 0 !important;
margin: 0 !important;
overflow: hidden !important;
height: 0 !important;
border: none !important;
background: none !important;
}
body.is-sp .right-panel,
body.is-mp .right-panel,
body.is-vs .right-panel,
body.is-daily .right-panel,
body.is-elim .right-panel {
width: 0 !important;
min-width: 0 !important;
max-width: 0 !important;
padding: 0 !important;
margin: 0 !important;
overflow: visible !important;
border: none !important;
background: none !important;
}
/* --- GAME LAYOUT CENTERING --- */
body.is-sp #game-area,
body.is-mp #game-area,
body.is-vs #game-area,
body.is-daily #game-area,
body.is-elim #game-area {
display: flex !important;
justify-content: center !important;
align-items: stretch !important;
padding: 0 !important;
}
body.is-sp .game-layout,
body.is-mp .game-layout,
body.is-vs .game-layout,
body.is-daily .game-layout,
body.is-elim .game-layout {
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important;
align-items: center !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
gap: 0 !important;
border-radius: 0 !important;
min-height: 100% !important;
}
body.is-sp .game-wrapper,
body.is-mp .game-wrapper,
body.is-vs .game-wrapper,
body.is-daily .game-wrapper,
body.is-elim .game-wrapper {
display: flex !important;
justify-content: center !important;
align-items: stretch !important;
width: 100% !important;
max-width: 100% !important;
transform: none !important;
margin: 0 !important;
padding: 0 !important;
flex: 1 !important;
min-height: 0 !important;
}
body.is-sp .game-wrapper .container,
body.is-mp .game-wrapper .container,
body.is-vs .game-wrapper .container,
body.is-daily .game-wrapper .container,
body.is-elim .game-wrapper .container {
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 4px 6px !important;
background: linear-gradient(to bottom, #2e4b6e 0%, #3775b0 30%, #1d487c 85%) !important;
border: none !important;
border-radius: 0 !important;
box-shadow: none !important;
/* Flex column - UI elements grow to fill space, board stays fixed */
display: flex !important;
flex-direction: column !important;
align-items: center !important;
flex: 1 !important;
min-height: 0 !important;
max-height: calc(100svh - var(--bottom-nav-height, 65px)) !important;
overflow: hidden !important;
}
/* UI elements grow to absorb extra vertical space on tall phones */
body.is-sp .game-wrapper .container > *,
body.is-mp .game-wrapper .container > *,
body.is-vs .game-wrapper .container > *,
body.is-daily .game-wrapper .container > *,
body.is-elim .game-wrapper .container > * {
flex-shrink: 0 !important;
width: 100% !important;
}
/* Play-msg, chip-bar, working-row, buttons all grow to fill space */
body.is-sp .game-wrapper .container .play-msg,
body.is-mp .game-wrapper .container .play-msg,
body.is-vs .game-wrapper .container .play-msg,
body.is-daily .game-wrapper .container .play-msg,
body.is-elim .game-wrapper .container .play-msg {
flex: 1 0 28px !important;
max-height: 60px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
body.is-sp .game-wrapper .container .chip-bar,
body.is-mp .game-wrapper .container .chip-bar,
body.is-vs .game-wrapper .container .chip-bar,
body.is-daily .game-wrapper .container .chip-bar,
body.is-elim .game-wrapper .container .chip-bar {
flex: 1 0 40px !important;
max-height: 65px !important;
align-items: stretch !important;
}
body.is-sp .game-wrapper .container .working-row,
body.is-mp .game-wrapper .container .working-row,
body.is-vs .game-wrapper .container .working-row,
body.is-daily .game-wrapper .container .working-row,
body.is-elim .game-wrapper .container .working-row {
flex: 1 0 40px !important;
max-height: 70px !important;
align-items: center !important;
}
body.is-sp .game-wrapper .container .buttons,
body.is-mp .game-wrapper .container .buttons,
body.is-vs .game-wrapper .container .buttons,
body.is-daily .game-wrapper .container .buttons,
body.is-elim .game-wrapper .container .buttons {
flex: 1 0 46px !important;
max-height: 80px !important;
align-items: center !important;
}
/* Board stays fixed - no grow, no shrink */
body.is-sp .game-wrapper .container .board,
body.is-mp .game-wrapper .container .board,
body.is-vs .game-wrapper .container .board,
body.is-daily .game-wrapper .container .board,
body.is-elim .game-wrapper .container .board {
flex: 0 0 auto !important;
}
/* --- DYNAMIC BOARD SIZING --- */
/*
* Board sizes itself to fit available space on ANY device.
* Uses min() to pick the smaller of width or height constraint.
* 10x10 grid = 1:1 aspect ratio (square)
*
* Header is hidden during game on mobile β 0px.
* UI heights scale with viewport: on phones flex items stay at minimums (~180px),
* on tablets they grow toward max-heights (~270px). clamp() tracks this automatically.
*/
body.is-sp,
body.is-mp,
body.is-vs,
body.is-daily,
body.is-elim {
--header-height: 0px;
--ui-height: clamp(180px, 25svh, 270px);
--bottom-nav-height: 65px;
--safety-buffer: clamp(12px, 1.5svh, 24px);
--available-height: calc(100svh - var(--header-height) - var(--ui-height) - var(--bottom-nav-height) - var(--safety-buffer));
--available-width: 96vw;
--board-size: min(var(--available-width), var(--available-height));
}
body.is-sp .board,
body.is-mp .board,
body.is-vs .board,
body.is-daily .board,
body.is-elim .board {
width: var(--board-size) !important;
max-width: var(--board-size) !important;
height: var(--board-size) !important; /* explicit height β prevents flex from overriding aspect-ratio */
aspect-ratio: 1 / 1 !important;
margin: 0 auto !important; /* center horizontally */
gap: clamp(1px, 0.4vw, 3px) !important;
}
/* Match board width for other elements */
body.is-sp .buttons,
body.is-mp .buttons,
body.is-vs .buttons,
body.is-daily .buttons,
body.is-elim .buttons,
body.is-sp .working-row,
body.is-mp .working-row,
body.is-vs .working-row,
body.is-daily .working-row,
body.is-elim .working-row,
body.is-sp #working-row,
body.is-mp #working-row,
body.is-vs #working-row,
body.is-daily #working-row,
body.is-elim #working-row,
body.is-sp .chip-bar,
body.is-mp .chip-bar,
body.is-vs .chip-bar,
body.is-daily .chip-bar,
body.is-elim .chip-bar,
body.is-sp .top-bar,
body.is-mp .top-bar,
body.is-vs .top-bar,
body.is-daily .top-bar,
body.is-elim .top-bar {
width: var(--board-size) !important;
max-width: var(--board-size) !important;
margin: 0 auto !important;
}
/* Chips row - flex to fit within board width */
body.is-sp .chip-bar,
body.is-mp .chip-bar,
body.is-vs .chip-bar,
body.is-daily .chip-bar,
body.is-elim .chip-bar {
display: flex !important;
justify-content: space-between !important;
gap: 4px !important;
padding: 0 !important;
overflow: hidden !important;
margin-bottom: 4px !important;
}
/* Play message bar - scales up on tall phones */
body.is-sp .play-msg,
body.is-mp .play-msg,
body.is-vs .play-msg,
body.is-daily .play-msg,
body.is-elim .play-msg {
margin-bottom: 2px !important;
font-size: clamp(1.05rem, 6.2vw, 1.6rem) !important;
letter-spacing: 2.5px !important;
}
/* --- TILE STYLING --- */
/* Tiles fill their grid cells automatically - just style the text */
.tile, .empty-tile {
font-size: clamp(10px, calc(var(--board-size, 300px) / 16), 28px) !important;
font-weight: 600;
}
.tile-value {
font-size: clamp(5px, calc(var(--board-size, 300px) / 40), 12px) !important;
bottom: 1px;
right: 1px;
}
/* --- UI ELEMENTS - Comfortable sizing for full-screen feel --- */
body.is-sp .chip,
body.is-mp .chip,
body.is-vs .chip,
body.is-daily .chip,
body.is-elim .chip {
flex: 1 1 0 !important;
padding: clamp(2px, 1vw, 6px) clamp(4px, 1vw, 8px) !important;
font-size: clamp(0.7rem, 2.3vw, 0.95rem) !important;
min-width: 0 !important;
max-width: 25% !important;
height: 75% !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
}
body.is-sp .chip::before,
body.is-mp .chip::before,
body.is-vs .chip::before,
body.is-daily .chip::before,
body.is-elim .chip::before {
font-size: clamp(0.6rem, 2vw, 0.85rem) !important;
}
body.is-sp .chip > span,
body.is-mp .chip > span,
body.is-vs .chip > span,
body.is-daily .chip > span,
body.is-elim .chip > span {
font-size: clamp(1.45rem, 4vw, 1.6rem) !important;
}
/* Working row */
body.is-sp #working-row,
body.is-mp #working-row,
body.is-vs #working-row,
body.is-daily #working-row,
body.is-elim #working-row {
display: flex !important;
justify-content: center !important;
gap: 3px !important;
margin: 3px auto !important;
}
/* Game buttons - OK, CLEAR, PASS, FLIP */
body.is-sp .buttons,
body.is-mp .buttons,
body.is-vs .buttons,
body.is-daily .buttons,
body.is-elim .buttons {
display: flex !important;
justify-content: center !important;
gap: 5px !important;
margin: 3px auto !important;
}
body.is-sp .buttons button,
body.is-sp .buttons .btn-flip,
body.is-mp .buttons button,
body.is-mp .buttons .btn-flip,
body.is-vs .buttons button,
body.is-vs .buttons .btn-flip,
body.is-daily .buttons button,
body.is-daily .buttons .btn-flip,
body.is-elim .buttons button,
body.is-elim .buttons .btn-flip {
font-size: clamp(0.7rem, 2.3vw, 0.95rem) !important;
padding: clamp(6px, 1.5vw, 12px) clamp(10px, 2.5vw, 16px) !important;
min-height: clamp(36px, 7vw, 46px) !important;
height: 100% !important;
position: relative !important;
}
/* --- GAME AREA BACKGROUND --- */
/* Ensure blue background fills entire game area (header hidden β full screen) */
body.is-sp #game-area,
body.is-mp #game-area,
body.is-vs #game-area,
body.is-daily #game-area,
body.is-elim #game-area {
background: linear-gradient(to bottom, #1a3a5c 0%, #0d2240 100%) !important;
min-height: 100svh !important;
}
/* Header logo smaller on mobile */
.app-header .app-title img {
height: clamp(14px, 4vw, 20px) !important;
}
/* --- SLIDING PANELS --- */
#scoreboard,
#info-feed-panel,
#rank-panel,
#chat-panel,
#options-panel,
#audio-panel {
position: fixed !important;
top: 8px !important;
left: 50% !important;
transform: translateX(-50%) translateY(-120%) !important;
width: 88% !important;
max-width: 400px !important;
height: clamp(300px, 55vh, 500px) !important;
border-radius: 12px !important;
z-index: 500 !important;
opacity: 0;
pointer-events: none;
transition: transform 0.25s ease-out, opacity 0.2s ease-out;
background: rgba(15, 30, 60, 0.97) !important;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
box-shadow: 0 8px 32px rgba(0,0,0,0.6);
overflow-y: auto;
display: flex !important;
flex-direction: column;
will-change: transform, opacity;
}
/* Scoreboard & Chat - taller */
#scoreboard,
#chat-panel {
height: clamp(350px, 65vh, 600px) !important;
}
/* Rank panel - same height, just narrower (already set above) */
#rank-panel {
height: clamp(280px, 50vh, 450px) !important;
}
/* Options/Themes panel - themes + effects only */
#options-panel {
height: clamp(420px, 76vh, 680px) !important;
}
/* Audio panel - compact, just music + SFX sliders */
#audio-panel {
height: auto !important;
max-height: clamp(140px, 25vh, 200px) !important;
min-height: 0 !important;
}
/* Open state - slide down */
#scoreboard.open,
#info-feed-panel.open,
#rank-panel.open,
#chat-panel.open,
#options-panel.open,
#audio-panel.open {
transform: translateX(-50%) translateY(0) !important;
opacity: 1;
pointer-events: auto;
}
/* Override is-hidden class for panels during game */
body.is-sp #scoreboard.is-hidden,
body.is-mp #scoreboard.is-hidden,
body.is-sp #info-feed-panel.is-hidden,
body.is-mp #info-feed-panel.is-hidden,
body.is-sp #rank-panel.is-hidden,
body.is-mp #rank-panel.is-hidden,
body.is-sp #chat-panel.is-hidden,
body.is-mp #chat-panel.is-hidden,
body.is-sp #options-panel.is-hidden,
body.is-mp #options-panel.is-hidden,
body.is-vs #options-panel.is-hidden,
body.is-daily #options-panel.is-hidden,
body.is-elim #options-panel.is-hidden,
body.is-sp #audio-panel.is-hidden,
body.is-mp #audio-panel.is-hidden,
body.is-vs #audio-panel.is-hidden,
body.is-daily #audio-panel.is-hidden,
body.is-elim #audio-panel.is-hidden {
display: flex !important;
}
/* Hide logo in scoreboard on mobile */
#scoreboard .left-panel-logo {
display: none !important;
}
}
/* --- 9. SMALL MOBILE (max-width: 480px) --- */
@media (max-width: 480px) {
/* Daily leaderboard card - tighter spacing */
.daily-leaderboard-card {
padding: 12px !important;
}
.daily-leaderboard-card table th,
.daily-leaderboard-card table td {
padding: 8px 6px !important;
font-size: 0.9rem;
}
.daily-leaderboard-card table th:first-child,
.daily-leaderboard-card table td:first-child {
width: 28px !important;
padding-right: 2px !important;
}
.daily-leaderboard-card table th:nth-child(3),
.daily-leaderboard-card table td:nth-child(3) {
width: 65px !important;
}
.daily-leaderboard-card table th:nth-child(4),
.daily-leaderboard-card table td:nth-child(4) {
width: 45px !important;
}
/* Smaller avatars on small mobile */
.daily-leaderboard-card table td img {
width: 26px !important;
height: 26px !important;
}
/* Daily tabs - smaller buttons */
.daily-lb-tab-btn {
padding: 8px 14px !important;
font-size: 0.85rem !important;
}
/* Leaderboards section - less padding */
.leaderboards-section {
padding: 0 10px;
margin: 16px auto;
}
}
/* --- 10. HOVER CAPABILITY --- */
@media (hover: hover) {
/* Game button hover states - slight brightness + shadow */
#ok-btn:hover,
#clear-btn:hover,
#pass-btn:hover,
#flip-btn:hover {
filter: brightness(1.08) drop-shadow(0 3px 3px rgba(0, 0, 0, 0.4));
transform: translateY(-2px);
}
/* Extra noticeable hover effect */
#ok-btn:hover:not([disabled]),
#clear-btn:hover:not([disabled]),
#pass-btn:hover:not([disabled]),
#flip-btn:hover:not([disabled]) {
filter: brightness(1.15) drop-shadow(0 0 10px rgba(80, 255, 150, 0.5));
}
}
/* ============================================================
FACE-OFF MODE STYLES
Uses CSS variables for light/dark mode compatibility
============================================================ */
/* βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
Face-Off Hub Page
βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ */
#faceoff-hub-page {
display: flex;
flex-direction: column;
align-items: center;
padding: 20px;
padding-top: calc(-14px + var(--header-h, 52px));
padding-bottom: 40px;
background: linear-gradient(180deg, #f1968f 0%, #ffffff 60%);
color: var(--text-primary);
box-sizing: border-box;
min-height: calc(100vh - var(--header-h, 52px));
overflow-y: auto;
}
/* Mobile scrolling fix for Face-Off hub */
@media (pointer: coarse), (max-width: 768px) {
#faceoff-hub-page {
padding-bottom: 100px;
min-height: auto;
height: auto;
}
}
body.dark-mode #faceoff-hub-page {
background: linear-gradient(180deg, #5c1a1a 0%, #1e293b 60%);
}
.faceoff-hub {
width: 100%;
max-width: 1200px;
display: flex;
flex-direction: column;
gap: 16px;
}
/* Main layout with sidebar */
.faceoff-hub-layout {
display: flex;
gap: 24px;
width: 100%;
align-items: stretch;
}
.faceoff-hub-main {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 24px;
}
/* Invites Sidebar */
.faceoff-invites-sidebar {
width: 220px;
flex-shrink: 0;
display: flex;
flex-direction: column;
background: linear-gradient(135deg, rgba(76, 175, 80, 0.1), rgba(0, 150, 136, 0.1));
border: 2px solid rgba(76, 175, 80, 0.3);
border-radius: 12px;
padding: 10px;
align-self: stretch;
}
body.dark-mode .faceoff-invites-sidebar {
background: var(--surface-secondary, #2a2a2a);
border-color: var(--border-dark, #444);
}
.faceoff-invites-sidebar-header {
text-align: center;
margin-bottom: 8px;
padding-bottom: 6px;
border-bottom: 1px solid var(--border-light, #e0e0e0);
flex-shrink: 0;
}
.faceoff-invites-sidebar-header h3 {
margin: 0;
font-size: 0.9rem;
color: var(--text-primary, #333);
}
body.dark-mode .faceoff-invites-sidebar-header {
border-bottom-color: var(--border-dark, #444);
}
body.dark-mode .faceoff-invites-sidebar-header h3 {
color: var(--text-primary-dark, #fff);
}
.faceoff-invites-sidebar .faceoff-invites-list {
display: flex;
flex-direction: column;
gap: 6px;
overflow-y: auto;
flex: 1;
/* Hide scrollbar but keep functionality */
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE/Edge */
}
.faceoff-invites-sidebar .faceoff-invites-list::-webkit-scrollbar {
display: none; /* Chrome/Safari/Opera */
}
/* Invite Card (compact button-style) */
.faceoff-invite-card {
background: linear-gradient(180deg, #fafafa 0%, #e9edf3 100%);
border: 1px solid #d0d5dd;
border-radius: 8px;
padding: 8px 10px;
display: flex;
flex-direction: column;
gap: 2px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
body.dark-mode .faceoff-invite-card {
background: linear-gradient(180deg, #3a4556 0%, #2d3748 100%);
border-color: #4a5568;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
/* Invite card buttons row */
.invite-card-buttons {
display: flex;
gap: 6px;
margin-top: 4px;
}
.invite-card-btn-accept {
flex: 1;
padding: 5px 6px !important;
font-size: 0.7rem !important;
}
.invite-card-btn-decline {
flex: 0 0 auto;
padding: 5px 8px !important;
font-size: 0.7rem !important;
background: linear-gradient(180deg, #f5f5f5 0%, #e0e0e0 100%) !important;
border: 1px solid #ccc !important;
color: #666 !important;
}
.invite-card-btn-decline:hover {
background: linear-gradient(180deg, #eee 0%, #d5d5d5 100%) !important;
color: #444 !important;
}
body.dark-mode .invite-card-btn-decline {
background: linear-gradient(180deg, #444 0%, #333 100%) !important;
border-color: #555 !important;
color: #aaa !important;
}
body.dark-mode .invite-card-btn-decline:hover {
background: linear-gradient(180deg, #555 0%, #444 100%) !important;
color: #ccc !important;
}
/* Fade out animation for dismissed cards */
@keyframes fadeOut {
from { opacity: 1; transform: scale(1); }
to { opacity: 0; transform: scale(0.95); }
}
.invite-card-from {
font-size: 0.8rem;
color: var(--text-primary, #333);
line-height: 1.2;
}
body.dark-mode .invite-card-from {
color: var(--text-primary-dark, #fff);
}
.invite-card-time {
font-size: 0.65rem;
color: var(--text-secondary, #666);
}
.invite-card-details {
display: flex;
justify-content: space-between;
font-size: 0.7rem;
color: var(--text-secondary, #666);
align-items: center;
}
.invite-card-fee {
display: flex;
align-items: center;
gap: 3px;
}
.invite-card-fee .fee-amount {
font-weight: 600;
}
.invite-card-fee img {
width: 14px;
height: 14px;
flex-shrink: 0;
}
.invite-card-players {
text-align: right;
}
/* Invites Pagination */
.invites-pagination {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin-top: auto;
padding-top: 8px;
border-top: 1px solid var(--border-light, #e0e0e0);
}
body.dark-mode .invites-pagination {
border-top-color: var(--border-dark, #444);
}
.invites-page-btn {
width: 24px;
height: 24px;
padding: 0;
border: 1px solid var(--border-light, #ddd);
background: var(--surface-secondary, #f5f5f5);
color: var(--text-primary, #333);
border-radius: 4px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
display: flex;
align-items: center;
justify-content: center;
}
.invites-page-btn:hover:not(:disabled) {
background: var(--surface-tertiary, #e0e0e0);
}
.invites-page-btn:disabled {
opacity: 0.4;
cursor: not-allowed;
}
body.dark-mode .invites-page-btn {
background: var(--surface-tertiary, #333);
border-color: var(--border-dark, #555);
color: var(--text-primary-dark, #fff);
}
.invites-page-info {
font-size: 0.7rem;
color: var(--text-secondary, #666);
min-width: 30px;
text-align: center;
}
/* Count badges for titles */
.invites-count-badge,
.challenges-count-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 20px;
height: 20px;
padding: 0 6px;
background: #ef5350;
color: #fff;
font-size: 0.7rem;
font-weight: 700;
border-radius: 10px;
margin-left: 6px;
}
.challenges-count-badge {
background: #6366f1;
}
/* Challenges Pagination */
.challenges-pagination {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin-top: auto;
padding-top: 6px;
border-top: 1px solid var(--border-light, #e0e0e0);
}
body.dark-mode .challenges-pagination {
border-top-color: var(--border-dark, #444);
}
.challenges-page-btn {
width: 20px;
height: 20px;
padding: 0;
border: 1px solid var(--border-light, #ddd);
background: var(--surface-secondary, #f5f5f5);
color: var(--text-primary, #333);
border-radius: 4px;
font-size: 12px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
display: flex;
align-items: center;
justify-content: center;
}
.challenges-page-btn:hover:not(:disabled) {
background: var(--surface-tertiary, #e0e0e0);
}
.challenges-page-btn:disabled {
opacity: 0.4;
cursor: not-allowed;
}
body.dark-mode .challenges-page-btn {
background: var(--surface-tertiary, #333);
border-color: var(--border-dark, #555);
color: var(--text-primary-dark, #fff);
}
.challenges-page-info {
font-size: 0.65rem;
color: var(--text-secondary, #666);
min-width: 24px;
text-align: center;
}
/* Mobile: Sidebar becomes horizontal strip below main content */
@media (max-width: 900px) {
.faceoff-hub-layout {
flex-direction: column;
}
.faceoff-hub-main {
order: 2;
}
.faceoff-invites-sidebar {
order: 1;
width: 100%;
max-width: 100%;
max-height: none;
flex-direction: column;
box-sizing: border-box;
}
.faceoff-invites-sidebar .faceoff-invites-list {
flex-direction: row;
flex-wrap: wrap;
gap: 8px;
}
.faceoff-invite-card {
flex: 1 1 calc(50% - 4px);
min-width: 140px;
max-width: 100%;
box-sizing: border-box;
}
}
@media (max-width: 500px) {
.faceoff-invite-card {
flex: 1 1 100%;
}
}
.faceoff-hub-header {
text-align: center;
margin-bottom: 10px;
}
.faceoff-hub-header h1 {
font-size: 2.5rem;
color: #c62828;
margin: 0;
}
body.dark-mode .faceoff-hub-header h1 {
color: #ff8a80;
}
.faceoff-subtitle {
color: var(--text-secondary, #666);
font-size: 1.1rem;
margin-top: 8px;
}
/* βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
Face-Off Cards Grid (Public + Private side by side)
βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ */
.faceoff-cards-grid {
display: grid;
grid-template-columns: 1fr;
gap: 20px;
width: 100%;
}
@media (min-width: 768px) {
.faceoff-cards-grid {
grid-template-columns: 1fr 1fr;
}
}
.faceoff-cards-grid .faceoff-section {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.faceoff-cards-grid .faceoff-section h3 {
border-bottom: none;
padding-bottom: 0;
margin-bottom: 4px;
}
/* βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
Face-Off 2x2 Cards Grid (Public + Private / Challenges + Stats)
βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ */
.faceoff-cards-grid-2x2 {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
width: 100%;
}
@media (min-width: 768px) {
.faceoff-cards-grid-2x2 {
grid-template-columns: 1fr 1fr;
}
}
.faceoff-cards-grid-2x2 .faceoff-section {
display: flex;
flex-direction: column;
text-align: center;
min-height: 230px;
}
.faceoff-cards-grid-2x2 .faceoff-section h3 {
border-bottom: none;
padding-bottom: 0;
margin-bottom: 10px;
font-size: 1.1rem;
}
/* Section header with help icon */
.faceoff-section-header {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
position: relative;
}
.faceoff-section-header h3 {
margin-bottom: 0 !important;
}
.faceoff-help-icon {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
width: 20px;
height: 20px;
border-radius: 50%;
background: rgba(99, 102, 241, 0.15);
color: #4f46e5;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.75rem;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
}
.faceoff-help-icon:hover {
background: rgba(99, 102, 241, 0.25);
transform: translateY(-50%) scale(1.1);
}
body.dark-mode .faceoff-help-icon {
background: rgba(129, 140, 248, 0.2);
color: #a5b4fc;
}
body.dark-mode .faceoff-help-icon:hover {
background: rgba(129, 140, 248, 0.35);
}
/* βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
Face-Off Compact Pending Challenges Section
βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ */
.faceoff-pending-section-compact {
background: linear-gradient(135deg, rgba(99, 102, 241, 0.08), rgba(139, 92, 246, 0.06)) !important;
border-radius: 12px;
padding: 14px;
border: 1px solid rgba(99, 102, 241, 0.2) !important;
min-height: 220px;
max-height: 220px;
display: flex;
flex-direction: column;
overflow: hidden;
}
body.dark-mode .faceoff-pending-section-compact {
background: linear-gradient(135deg, rgba(99, 102, 241, 0.15), rgba(139, 92, 246, 0.1)) !important;
border-color: rgba(139, 92, 246, 0.3) !important;
}
.faceoff-pending-list-compact {
display: flex;
flex-direction: column;
gap: 2px;
flex: 1;
overflow-y: auto;
}
/* Row-style pending challenge item */
.faceoff-pending-item-compact {
display: flex;
align-items: center;
gap: 8px;
background: linear-gradient(180deg, #fafafa 0%, #e9edf3 100%);
border: 1px solid #d0d5dd;
border-radius: 6px;
padding: 6px 10px;
font-size: 0.75rem;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
body.dark-mode .faceoff-pending-item-compact {
background: linear-gradient(180deg, #3a4556 0%, #2d3748 100%);
border-color: #4a5568;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.faceoff-pending-item-compact .pending-code {
font-weight: 700;
color: #6366f1;
letter-spacing: 0.5px;
font-size: 0.7rem;
}
body.dark-mode .faceoff-pending-item-compact .pending-code {
color: #a5b4fc;
}
.faceoff-pending-item-compact .pending-info {
flex: 1;
color: var(--text-secondary, #666);
font-size: 0.7rem;
display: flex;
gap: 6px;
}
.faceoff-pending-item-compact .pending-time {
color: var(--text-secondary, #888);
font-size: 0.65rem;
}
.faceoff-pending-item-compact .pending-actions {
display: flex;
gap: 4px;
}
.faceoff-pending-item-compact .pending-actions .btnunified {
padding: 3px 8px !important;
font-size: 0.65rem !important;
border-radius: 4px !important;
}
/* βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
Face-Off Open Challenges Section (Unified)
βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ */
.open-challenges-filters {
display: flex;
gap: 6px;
margin-bottom: 8px;
}
.filter-btn {
flex: 1;
padding: 6px 10px;
border-radius: 6px;
font-size: 0.75rem;
font-weight: 600;
border: 1px solid rgba(79, 70, 229, 0.3);
background: transparent;
color: var(--text-primary, #333);
cursor: pointer;
transition: all 0.2s ease;
}
.filter-btn:hover {
background: rgba(79, 70, 229, 0.1);
}
.filter-btn.active {
background: #4f46e5;
color: white;
border-color: #4f46e5;
}
body.dark-mode .filter-btn {
border-color: rgba(129, 140, 248, 0.3);
background: transparent;
color: var(--text-primary-dark, #e0e0e0);
}
body.dark-mode .filter-btn:hover {
background: rgba(129, 140, 248, 0.1);
}
body.dark-mode .filter-btn.active {
background: #6366f1;
border-color: #818cf8;
color: white;
}
/* Challenge type badges */
.challenge-type-badge {
display: inline-block;
padding: 2px 8px;
border-radius: 10px;
font-size: 0.6rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.challenge-type-badge.public {
background: rgba(34, 197, 94, 0.2);
color: #16a34a;
}
.challenge-type-badge.private {
background: rgba(249, 115, 22, 0.2);
color: #ea580c;
}
body.dark-mode .challenge-type-badge.public {
background: rgba(34, 197, 94, 0.3);
color: #4ade80;
}
body.dark-mode .challenge-type-badge.private {
background: rgba(249, 115, 22, 0.3);
color: #fb923c;
}
/* Open challenge items */
.faceoff-open-challenge-item {
display: grid;
grid-template-columns: 58px 65px 70px 1fr;
align-items: center;
gap: 6px;
background: linear-gradient(180deg, #fafafa 0%, #e9edf3 100%);
border: 1px solid #d0d5dd;
border-radius: 6px;
padding: 6px 10px;
margin-bottom: 4px;
cursor: pointer;
transition: all 0.2s ease;
font-size: 0.75rem;
}
.faceoff-open-challenge-item:hover {
border-color: #4f46e5;
box-shadow: 0 2px 6px rgba(79, 70, 229, 0.15);
}
body.dark-mode .faceoff-open-challenge-item {
background: linear-gradient(180deg, #3a4556 0%, #2d3748 100%);
border-color: #4a5568;
}
body.dark-mode .faceoff-open-challenge-item:hover {
border-color: #6366f1;
box-shadow: 0 2px 6px rgba(99, 102, 241, 0.25);
}
/* Grid-aligned card elements */
.challenge-pot {
font-weight: 600;
color: #f59e0b;
display: flex;
align-items: center;
justify-content: flex-end;
gap: 2px;
}
body.dark-mode .challenge-pot {
color: #fbbf24;
}
.challenge-progress {
color: var(--text-secondary, #666);
font-size: 0.7rem;
text-align: left;
}
.challenge-time {
color: var(--text-secondary, #888);
font-size: 0.7rem;
text-align: right;
display: flex;
align-items: center;
justify-content: flex-end;
gap: 4px;
}
.challenge-time .time-icon {
margin: 0 2px;
}
.challenge-time .time-value {
font-weight: 600;
color: var(--text-primary, #333);
}
/* Challenge detail modal */
.challenge-detail-modal {
padding: 10px 0;
}
.challenge-detail-modal .detail-header {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 12px;
}
.challenge-detail-modal .detail-help-icon {
margin-left: auto;
width: 22px;
height: 22px;
border-radius: 50%;
background: rgba(99, 102, 241, 0.15);
color: #4f46e5;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.85rem;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
}
.challenge-detail-modal .detail-help-icon:hover {
background: rgba(99, 102, 241, 0.25);
transform: scale(1.1);
}
body.dark-mode .challenge-detail-modal .detail-help-icon {
background: rgba(129, 140, 248, 0.2);
color: #a5b4fc;
}
body.dark-mode .challenge-detail-modal .detail-help-icon:hover {
background: rgba(129, 140, 248, 0.35);
}
/* Game info row (entry fee + mode) */
.challenge-detail-modal .detail-game-info {
display: flex;
justify-content: center;
align-items: center;
gap: 16px;
padding: 8px 0;
margin-bottom: 8px;
font-size: 0.8rem;
color: var(--text-secondary, #666);
}
.challenge-detail-modal .detail-entry {
display: flex;
align-items: center;
gap: 3px;
}
.challenge-detail-modal .detail-mode {
color: var(--text-secondary, #888);
}
.challenge-detail-modal .detail-pot-section {
text-align: center;
margin-bottom: 16px;
}
.challenge-detail-modal .detail-pot-label {
display: block;
font-size: 1rem;
font-weight: 700;
color: var(--text-primary, #333);
margin-bottom: 6px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
body.dark-mode .challenge-detail-modal .detail-pot-label {
color: var(--text-primary, #e2e8f0);
}
.challenge-detail-modal .detail-pot {
font-size: 1.4rem;
font-weight: 700;
color: #f59e0b;
}
body.dark-mode .challenge-detail-modal .detail-pot {
color: #fbbf24;
}
.challenge-detail-modal .detail-pot-note {
font-size: 0.7rem;
font-style: italic;
color: var(--text-secondary, #888);
margin: 4px 0 0 0;
}
.challenge-detail-modal .detail-info {
background: rgba(0, 0, 0, 0.03);
border-radius: 8px;
padding: 12px;
margin-bottom: 16px;
}
body.dark-mode .challenge-detail-modal .detail-info {
background: rgba(255, 255, 255, 0.05);
}
.challenge-detail-modal .detail-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 6px 0;
font-size: 0.85rem;
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.challenge-detail-modal .detail-row:last-child {
border-bottom: none;
}
body.dark-mode .challenge-detail-modal .detail-row {
border-color: rgba(255, 255, 255, 0.08);
}
.challenge-detail-modal .detail-code {
font-family: monospace;
background: rgba(79, 70, 229, 0.1);
padding: 2px 8px;
border-radius: 4px;
color: #4f46e5;
}
body.dark-mode .challenge-detail-modal .detail-code {
background: rgba(99, 102, 241, 0.2);
color: #818cf8;
}
/* Invite code container with inline buttons */
.challenge-detail-modal .detail-code-container {
display: inline-flex;
align-items: center;
gap: 6px;
}
.challenge-detail-modal .detail-code-icon-btn {
background: none;
border: none;
padding: 2px 4px;
cursor: pointer;
font-size: 0.85rem;
opacity: 0.7;
transition: opacity 0.2s, transform 0.15s;
border-radius: 4px;
}
.challenge-detail-modal .detail-code-icon-btn:hover {
opacity: 1;
background: rgba(79, 70, 229, 0.15);
transform: scale(1.1);
}
.challenge-detail-modal .detail-code-icon-btn:active {
transform: scale(0.95);
}
body.dark-mode .challenge-detail-modal .detail-code-icon-btn:hover {
background: rgba(99, 102, 241, 0.25);
}
.challenge-detail-modal h4 {
margin: 0 0 10px 0;
font-size: 0.9rem;
color: var(--text-secondary, #666);
}
.challenge-detail-modal .detail-players {
max-height: 150px;
overflow-y: auto;
margin-bottom: 16px;
}
.challenge-detail-modal .player-name {
font-weight: 500;
}
.challenge-detail-modal .player-status {
color: var(--text-secondary, #888);
}
.challenge-detail-modal .detail-actions {
display: flex;
gap: 8px;
justify-content: flex-end;
flex-wrap: wrap;
}
/* Detail modal compact info row */
.challenge-detail-modal .detail-info-compact {
display: flex;
justify-content: center;
align-items: center;
gap: 16px;
padding: 8px 0;
margin-bottom: 12px;
font-size: 0.8rem;
color: var(--text-secondary, #666);
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
body.dark-mode .challenge-detail-modal .detail-info-compact {
border-color: rgba(255, 255, 255, 0.08);
}
/* Section header in detail modal */
.challenge-detail-modal .detail-section-header {
font-size: 0.75rem;
font-weight: 600;
color: var(--text-secondary, #666);
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 8px;
}
/* Progress info for public matches */
.challenge-detail-modal .detail-progress-info {
font-size: 0.85rem;
color: var(--text-primary, #333);
padding: 10px 0;
}
body.dark-mode .challenge-detail-modal .detail-progress-info {
color: var(--text-primary, #e2e8f0);
}
/* Player row with rank, name, score, payout */
.challenge-detail-modal .detail-player {
display: grid;
grid-template-columns: 24px 1fr auto auto;
gap: 8px;
align-items: center;
padding: 8px;
background: rgba(0, 0, 0, 0.02);
border-radius: 6px;
margin-bottom: 4px;
font-size: 0.8rem;
}
body.dark-mode .challenge-detail-modal .detail-player {
background: rgba(255, 255, 255, 0.03);
}
.challenge-detail-modal .player-rank {
font-size: 1rem;
text-align: center;
}
.challenge-detail-modal .player-score {
color: var(--text-secondary, #666);
font-size: 0.75rem;
}
.challenge-detail-modal .player-payout {
font-weight: 600;
color: #f59e0b;
display: flex;
align-items: center;
gap: 2px;
min-width: 50px;
justify-content: flex-end;
}
body.dark-mode .challenge-detail-modal .player-payout {
color: #fbbf24;
}
/* More players indicator */
.challenge-detail-modal .detail-player-more {
font-size: 0.75rem;
color: var(--text-secondary, #888);
text-align: center;
padding: 6px 0;
font-style: italic;
}
/* Payout note */
.challenge-detail-modal .detail-payout-note {
font-size: 0.7rem;
font-style: italic;
color: var(--text-secondary, #888);
text-align: center;
margin: 8px 0 16px 0;
}
/* Invited players section (friends-only challenges) */
.challenge-detail-modal .detail-invited-players {
display: flex;
flex-direction: column;
gap: 4px;
margin-bottom: 12px;
max-height: 120px;
overflow-y: auto;
}
.challenge-detail-modal .detail-invited-player {
display: flex;
justify-content: space-between;
align-items: center;
padding: 6px 10px;
background: rgba(0, 0, 0, 0.03);
border-radius: 6px;
font-size: 0.8rem;
}
body.dark-mode .challenge-detail-modal .detail-invited-player {
background: rgba(255, 255, 255, 0.03);
}
.challenge-detail-modal .detail-invited-player.played {
opacity: 0.7;
}
.challenge-detail-modal .detail-invited-player .invited-player-name {
font-weight: 500;
color: var(--text-primary, #333);
}
body.dark-mode .challenge-detail-modal .detail-invited-player .invited-player-name {
color: var(--text-primary-dark, #e0e0e0);
}
.challenge-detail-modal .detail-invited-player .invited-player-status {
font-size: 0.75rem;
color: var(--text-secondary, #666);
}
.challenge-detail-modal .detail-invited-player.played .invited-player-status {
color: #10b981;
}
body.dark-mode .challenge-detail-modal .detail-invited-player .invited-player-status {
color: var(--text-secondary-dark, #aaa);
}
body.dark-mode .challenge-detail-modal .detail-invited-player.played .invited-player-status {
color: #34d399;
}
/* βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
Face-Off Compact Stats Section
βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ */
.faceoff-stats-section-compact {
background: linear-gradient(135deg, rgba(16, 185, 129, 0.06), rgba(5, 150, 105, 0.04)) !important;
border-radius: 12px;
padding: 14px;
border: 1px solid rgba(16, 185, 129, 0.2) !important;
min-height: 166px;
display: flex;
flex-direction: column;
}
body.dark-mode .faceoff-stats-section-compact {
background: linear-gradient(135deg, rgba(16, 185, 129, 0.12), rgba(5, 150, 105, 0.08)) !important;
border-color: rgba(16, 185, 129, 0.3) !important;
}
.faceoff-stats-grid-compact {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 6px;
}
.stat-box-compact {
background: linear-gradient(180deg, #fafafa 0%, #e9edf3 100%);
border-radius: 8px;
padding: 10px 6px;
text-align: center;
border: 1px solid #d0d5dd;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
body.dark-mode .stat-box-compact {
background: linear-gradient(180deg, #3a4556 0%, #2d3748 100%);
border-color: #4a5568;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.stat-box-compact .stat-value {
font-size: 1rem;
font-weight: 700;
color: var(--text-primary);
line-height: 1.2;
}
.stat-box-compact .stat-label {
font-size: 0.6rem;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 0.3px;
margin-top: 2px;
}
/* Tier badge styling inside stat box */
.stat-box-compact .tier-badge {
font-size: 0.7rem;
padding: 2px 8px;
border-radius: 4px;
font-weight: 600;
}
/* βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
Face-Off Empty States
βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ */
.faceoff-empty-small {
color: var(--text-secondary, #888);
font-size: 0.85rem;
font-style: italic;
text-align: center;
padding: 12px 8px;
margin: 0;
}
.faceoff-no-invites {
color: var(--text-secondary, #888);
font-size: 0.9rem;
font-style: italic;
text-align: center;
padding: 20px 12px;
margin: 0;
}
/* βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
Extra Small Button Variant
βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ */
.btnunified-xs {
padding: 6px 12px !important;
font-size: 0.8rem !important;
border-radius: 6px !important;
}
/* βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
Face-Off Public Section (Quick Play)
βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ */
.faceoff-section.faceoff-public-section {
background: linear-gradient(135deg, rgba(255, 152, 0, 0.25), rgba(255, 87, 34, 0.2));
border-radius: 12px;
padding: 20px;
border: 1px solid rgba(255, 152, 0, 0.5);
}
body.dark-mode .faceoff-section.faceoff-public-section {
background: rgba(30, 41, 59, 0.9);
border-color: rgba(198, 40, 40, 0.4);
}
.faceoff-public-subtitle {
color: var(--text-secondary);
font-size: 0.9rem;
margin: 0 0 16px 0;
}
/* βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
Face-Off Invites Section (You're Invited!)
βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ */
.faceoff-invites-section {
background: linear-gradient(135deg, rgba(156, 39, 176, 0.1), rgba(103, 58, 183, 0.1));
border-radius: 12px;
padding: 20px;
margin-bottom: 20px;
border: 2px solid rgba(156, 39, 176, 0.3);
}
body.dark-mode .faceoff-invites-section {
background: linear-gradient(135deg, rgba(156, 39, 176, 0.15), rgba(103, 58, 183, 0.15));
border-color: rgba(186, 104, 200, 0.4);
}
.faceoff-invites-section h3 {
color: #9c27b0;
font-size: 1.3rem;
margin: 0 0 4px 0;
display: flex;
align-items: center;
gap: 8px;
}
body.dark-mode .faceoff-invites-section h3 {
color: #ce93d8;
}
.faceoff-invites-section .section-subtitle {
color: var(--text-secondary);
font-size: 0.85rem;
margin: 0 0 16px 0;
}
.faceoff-invites-list {
display: flex;
flex-direction: column;
gap: 12px;
}
.faceoff-invite-item {
display: flex;
align-items: center;
justify-content: space-between;
background: var(--card-bg, rgba(255, 255, 255, 0.9));
border-radius: 10px;
padding: 12px 16px;
gap: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
body.dark-mode .faceoff-invite-item {
background: rgba(30, 41, 59, 0.9);
}
.faceoff-invite-item .invite-creator {
display: flex;
align-items: center;
gap: 10px;
flex: 1;
}
.faceoff-invite-item .invite-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
object-fit: cover;
}
.faceoff-invite-item .invite-info {
display: flex;
flex-direction: column;
}
.faceoff-invite-item .invite-name {
font-weight: 600;
color: var(--text-primary);
}
.faceoff-invite-item .invite-details {
font-size: 0.8rem;
color: var(--text-secondary);
display: flex;
align-items: center;
gap: 8px;
}
.faceoff-invite-item .invite-fee {
display: flex;
align-items: center;
gap: 4px;
}
.faceoff-invite-item .invite-fee .coin-icon {
width: 14px;
height: 14px;
}
.faceoff-no-invites {
text-align: center;
color: var(--text-secondary);
font-size: 0.9rem;
padding: 12px;
font-style: italic;
}
/* βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
Face-Off Quick Play Section (legacy support)
βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ */
.faceoff-quick-play {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
padding: 24px;
background: var(--card-bg, rgba(255,255,255,0.9));
border-radius: 16px;
border: 2px solid #ef5350;
}
body.dark-mode .faceoff-quick-play {
background: rgba(30, 41, 59, 0.9);
border-color: #c62828;
}
.faceoff-play-btn {
font-size: 1.3rem;
padding: 16px 48px;
min-width: 200px;
}
.faceoff-hint {
color: var(--text-secondary, #666);
font-size: 0.9rem;
margin: 0;
}
/* Face-Off Mode Selector */
.faceoff-mode-selector {
display: flex;
gap: 12px;
margin-bottom: 12px;
justify-content: center;
}
.faceoff-mode-btn {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
padding: 16px 24px;
border: 2px solid var(--border-color, rgba(0,0,0,0.2));
border-radius: 12px;
background: var(--card-bg, rgba(0,0,0,0.05));
cursor: pointer;
transition: all 0.2s ease;
min-width: 100px;
}
.faceoff-mode-btn:hover {
border-color: #e53935;
transform: translateY(-2px);
}
.faceoff-mode-btn.active {
border-color: #e53935;
background: rgba(229, 57, 53, 0.15);
}
/* Light mode: Use subtle gray background for unselected cards (similar to dark mode behavior) */
body:not(.dark-mode) .faceoff-mode-btn {
background: rgba(0, 0, 0, 0.08);
border: 2px solid rgba(0, 0, 0, 0.15);
}
body:not(.dark-mode) .faceoff-mode-btn.active {
border-color: #e53935;
background: rgba(229, 57, 53, 0.15);
}
.faceoff-mode-btn .mode-icon {
font-size: 1.5rem;
}
.faceoff-mode-btn .mode-label {
font-size: 0.9rem;
font-weight: 600;
color: var(--text-primary);
}
/* βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
Face-Off Header Bar (Title + Balance)
βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ */
.faceoff-header-bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 12px 20px;
background: linear-gradient(135deg, #e7b9c59e, #e7b9c59e);
border-radius: 16px;
border: 2px solid #db57a6;
box-shadow: 0 4px 12px rgb(110 37 104 / 0%);
}
body.dark-mode .faceoff-header-bar {
background: linear-gradient(135deg, #3d1414, #47233d);
border-color: #6d2568;
}
.faceoff-header-title {
display: flex;
align-items: center;
gap: 10px;
}
.faceoff-title-icon {
font-size: 1.8rem;
}
.faceoff-title-text {
font-size: 1.6rem;
font-weight: 700;
color: #c62828;
text-transform: uppercase;
letter-spacing: 1px;
}
body.dark-mode .faceoff-title-text {
color: #ff8a80;
}
/* βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
Face-Off Coin Balance Display
βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ */
.faceoff-coin-balance-display {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
padding: 8px 16px;
}
body.dark-mode .faceoff-coin-balance-display {
/* No background needed */
}
.faceoff-coin-icon-large {
width: 48px;
height: 48px;
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
}
.faceoff-balance-label {
font-size: 1.1rem;
font-weight: 600;
color: #8d6e00;
text-transform: uppercase;
letter-spacing: 1px;
}
body.dark-mode .faceoff-balance-label {
color: #ffd54f;
}
.faceoff-coin-balance-display .faceoff-coin-amount {
font-size: 2.2rem;
font-weight: 700;
background: linear-gradient(135deg, #f9a825, #e65100);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
body.dark-mode .faceoff-coin-balance-display .faceoff-coin-amount {
background: linear-gradient(135deg, #ffd54f, #ffab40);
-webkit-background-clip: text;
background-clip: text;
}
/* Mobile responsive header bar */
@media (max-width: 480px) {
.faceoff-header-bar {
padding: 10px 14px;
gap: 10px;
}
.faceoff-title-icon {
font-size: 1.4rem;
}
.faceoff-title-text {
font-size: 1.2rem;
}
.faceoff-coin-balance-display {
padding: 6px 10px;
gap: 8px;
}
.faceoff-coin-balance-display .faceoff-coin-amount {
font-size: 1.4rem;
}
.faceoff-coin-icon-large {
width: 32px;
height: 32px;
}
}
.faceoff-coin-balance-display .faceoff-coin-label {
font-size: 0.9rem;
font-weight: 600;
color: #8d6e00;
text-transform: uppercase;
letter-spacing: 1px;
}
body.dark-mode .faceoff-coin-balance-display .faceoff-coin-label {
color: #ffd54f;
}
/* βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
Face-Off Rewards Info (inside quick play box)
βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ */
.faceoff-rewards-info {
display: flex;
justify-content: center;
gap: 24px;
padding: 12px 16px;
margin-top: 12px;
background: rgba(255, 215, 0, 0.1);
border-radius: 10px;
border: 1px dashed rgba(212, 168, 0, 0.4);
}
body.dark-mode .faceoff-rewards-info {
background: rgba(255, 215, 0, 0.08);
border-color: rgba(255, 193, 7, 0.3);
}
.faceoff-rewards-info .reward-item {
display: flex;
align-items: center;
gap: 6px;
color: #8d6e00;
font-size: 0.9rem;
font-weight: 600;
}
body.dark-mode .faceoff-rewards-info .reward-item {
color: #ffd54f;
}
.faceoff-rewards-info .reward-icon {
font-size: 1rem;
}
.faceoff-rewards-info .reward-text {
white-space: nowrap;
}
/* βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
Face-Off Action Buttons (side by side)
βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ */
.faceoff-action-buttons {
display: flex;
justify-content: center;
gap: 12px;
flex-wrap: wrap;
}
.faceoff-action-buttons .btnunified {
min-width: 140px;
}
/* βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
Face-Off Sections
βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ */
.faceoff-section {
background: linear-gradient(180deg, #ffffff 0%, #f8f9fa 100%);
border-radius: 12px;
padding: 20px;
border: 1px solid rgba(229, 57, 53, 0.3);
position: relative;
overflow: hidden;
box-shadow: 0 6px 18px rgba(0,0,0,.08);
}
/* Shimmer sweep effect - top 50% with fade out */
.faceoff-section::after {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 50%;
background: linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.3),
transparent
);
mask-image: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
-webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
pointer-events: none;
}
.faceoff-section:hover::after {
animation: shimmer 0.6s ease forwards;
}
body.dark-mode .faceoff-section {
background: linear-gradient(180deg, #2d3748 0%, #1a202c 100%);
border-color: rgba(198, 40, 40, 0.4);
box-shadow:
0 6px 18px rgba(0,0,0,.3),
inset 0 1px 0 rgba(255,255,255,0.1);
}
body.dark-mode .faceoff-section::after {
background: linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.15),
transparent
);
}
.faceoff-section h3 {
color: var(--text-primary);
font-size: 1.2rem;
margin: 0 0 16px 0;
padding-bottom: 12px;
border-bottom: 1px solid var(--border-color, rgba(0,0,0,0.1));
}
/* βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
Face-Off Private Challenge Section
βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ */
.faceoff-private-section {
background: linear-gradient(135deg, rgba(156, 39, 176, 0.1), rgba(103, 58, 183, 0.1));
border: 1px solid rgba(156, 39, 176, 0.3);
}
body.dark-mode .faceoff-private-section {
background: linear-gradient(135deg, rgba(156, 39, 176, 0.15), rgba(103, 58, 183, 0.15));
border-color: rgba(156, 39, 176, 0.4);
}
.faceoff-private-subtitle {
color: var(--text-secondary);
font-size: 0.9rem;
margin: 4px 0 16px 0;
text-align: center;
}
.faceoff-private-actions {
display: flex;
justify-content: center;
margin-bottom: 16px;
}
.faceoff-private-btn {
min-width: 200px;
}
.faceoff-join-code-section {
border-top: 1px solid rgba(156, 39, 176, 0.2);
padding-top: 16px;
margin-top: 8px;
}
.faceoff-join-label {
color: var(--text-secondary);
font-size: 0.85rem;
margin-top: 26px;
margin-bottom: 8px;
text-align: center;
}
.faceoff-join-input-row {
display: flex;
justify-content: center;
gap: 8px;
}
.faceoff-code-input {
width: 120px;
padding: 8px 10px;
font-size: 0.7rem;
font-family: 'Courier New', monospace;
text-transform: uppercase;
letter-spacing: 1px;
border: 2px solid var(--border-color, #ddd);
border-radius: 6px;
text-align: center;
background: var(--input-bg, #fff);
color: var(--text-primary);
}
body.dark-mode .faceoff-code-input {
background: rgba(30, 41, 59, 0.8);
border-color: rgba(156, 39, 176, 0.4);
}
.faceoff-code-input:focus {
outline: none;
border-color: #9c27b0;
}
/* Pending Challenges Section */
.faceoff-pending-section {
background: rgba(255, 193, 7, 0.1);
border: 1px solid rgba(255, 193, 7, 0.3);
}
body.dark-mode .faceoff-pending-section {
background: rgba(255, 193, 7, 0.1);
border-color: rgba(255, 193, 7, 0.3);
}
.faceoff-pending-list {
display: flex;
flex-direction: column;
gap: 10px;
}
.faceoff-pending-item {
background: var(--card-bg, rgba(255,255,255,0.9));
border-radius: 8px;
padding: 12px;
border: 1px solid rgba(255, 193, 7, 0.3);
}
body.dark-mode .faceoff-pending-item {
background: rgba(30, 41, 59, 0.6);
}
.pending-item-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 8px;
}
.pending-code {
font-family: 'Courier New', monospace;
font-size: 1.1rem;
font-weight: bold;
color: #9c27b0;
letter-spacing: 1px;
}
.pending-time {
font-size: 0.85rem;
color: var(--text-secondary);
}
.pending-item-info {
display: flex;
justify-content: space-between;
font-size: 0.9rem;
color: var(--text-secondary);
margin-bottom: 8px;
}
.pending-item-actions {
display: flex;
gap: 8px;
}
.pending-item-actions .btnunified-small {
flex: 1;
}
.pending-copy-btn {
width: 100%;
}
/* Private Face-Off Modal */
.faceoff-private-modal-content {
display: flex;
flex-direction: column;
gap: 12px;
}
.faceoff-private-step h4 {
color: var(--text-primary);
font-size: 0.9rem;
margin: 0 0 8px 0;
}
.faceoff-friends-list {
max-height: 120px;
overflow-y: auto;
border: 1px solid var(--border-color, #ddd);
border-radius: 8px;
padding: 6px;
}
/* Error styling for entry fee */
.faceoff-fee-error {
color: #d32f2f;
font-size: 0.85rem;
margin-top: 8px;
padding: 6px 10px;
background: rgba(211, 47, 47, 0.1);
border-radius: 6px;
}
.input-error {
border-color: #d32f2f !important;
background: rgba(211, 47, 47, 0.05) !important;
}
.faceoff-friend-item {
display: flex;
align-items: center;
gap: 10px;
padding: 4px;
cursor: pointer;
border-radius: 6px;
transition: background 0.2s;
}
.faceoff-friend-item:hover {
background: rgba(156, 39, 176, 0.1);
}
.faceoff-friend-checkbox {
width: 18px;
height: 18px;
accent-color: #9c27b0;
}
.friend-avatar-mini {
width: 24px;
height: 24px;
border-radius: 50%;
background: linear-gradient(135deg, #9c27b0, #673ab7);
color: white;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
font-size: 0.9rem;
}
.friend-name {
flex: 1;
color: var(--text-primary);
}
.faceoff-no-friends {
padding: 20px;
text-align: center;
color: var(--text-secondary);
}
.faceoff-friends-hint {
font-size: 0.85rem;
color: var(--text-secondary);
margin: 8px 0 0 0;
text-align: center;
}
.faceoff-friends-hint.hint-warning {
color: #f59e0b;
}
.faceoff-fee-options {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 8px;
}
.faceoff-fee-option {
display: flex;
align-items: center;
gap: 4px;
padding: 6px 10px;
border: 2px solid var(--border-color, #ddd);
border-radius: 6px;
cursor: pointer;
transition: all 0.2s;
font-size: 0.9rem;
}
.faceoff-fee-option:hover,
.faceoff-fee-option.selected {
border-color: #9c27b0;
background: rgba(156, 39, 176, 0.1);
}
.faceoff-fee-option input[type="radio"] {
accent-color: #9c27b0;
}
.faceoff-custom-fee {
display: flex;
align-items: center;
gap: 8px;
}
.faceoff-custom-fee label {
display: flex;
align-items: center;
gap: 4px;
padding: 6px 10px;
border: 2px solid var(--border-color, #ddd);
border-radius: 6px;
cursor: pointer;
transition: all 0.2s;
font-size: 0.9rem;
}
.faceoff-custom-fee label:hover,
.faceoff-custom-fee label.selected {
border-color: #9c27b0;
background: rgba(156, 39, 176, 0.1);
}
.faceoff-custom-fee input[type="number"] {
width: 100px;
padding: 8px;
border: 2px solid var(--border-color, #ddd);
border-radius: 6px;
background: var(--input-bg, #fff);
color: var(--text-primary);
}
body.dark-mode .faceoff-custom-fee input[type="number"] {
background: rgba(30, 41, 59, 0.8);
}
.faceoff-private-summary {
background: rgba(156, 39, 176, 0.1);
border-radius: 6px;
padding: 8px 12px;
font-size: 0.9rem;
}
.faceoff-private-summary .summary-row {
display: flex;
justify-content: space-between;
padding: 3px 0;
}
.faceoff-private-notice {
font-size: 0.85rem;
color: var(--text-secondary);
text-align: center;
margin: 0;
padding: 12px;
background: rgba(255, 193, 7, 0.1);
border-radius: 8px;
}
/* Sharing Mode Options */
.faceoff-sharing-options {
display: flex;
flex-direction: column;
gap: 6px;
}
.faceoff-sharing-option {
display: flex;
align-items: flex-start;
gap: 8px;
padding: 8px 10px;
border: 2px solid var(--border-color, #ddd);
border-radius: 8px;
cursor: pointer;
transition: all 0.2s;
}
.faceoff-sharing-option:hover {
border-color: #9c27b0;
}
.faceoff-sharing-option.selected {
border-color: #9c27b0;
background: rgba(156, 39, 176, 0.1);
}
.faceoff-sharing-option input[type="radio"] {
margin-top: 2px;
accent-color: #9c27b0;
}
.sharing-option-content {
display: flex;
flex-direction: column;
gap: 2px;
}
.sharing-option-icon {
font-size: 1rem;
display: inline-block;
margin-right: 4px;
}
.sharing-option-label {
font-weight: 600;
font-size: 0.9rem;
color: var(--text-primary);
}
.sharing-option-desc {
font-size: 0.8rem;
color: var(--text-secondary);
line-height: 1.3;
}
/* Disabled create button state */
#faceoff-create-play-btn:disabled,
#faceoff-create-play-btn.disabled,
#timeattack-create-play-btn:disabled,
#timeattack-create-play-btn.disabled {
opacity: 0.5;
cursor: not-allowed;
pointer-events: none;
}
/* Invite mode icon in cards */
.invite-mode-icon {
font-size: 0.85rem;
margin-left: 6px;
opacity: 0.8;
}
/* Invite code section in post-game */
.faceoff-invite-code-section {
background: rgba(156, 39, 176, 0.1);
border-radius: 10px;
padding: 16px;
margin: 12px 0;
text-align: center;
}
.invite-code-label {
margin: 0 0 10px 0;
color: var(--text-primary);
font-size: 0.9rem;
}
.invite-code-display {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
.invite-code-text {
font-family: monospace;
font-size: 1.3rem;
font-weight: 700;
letter-spacing: 2px;
color: #9c27b0;
padding: 8px 16px;
background: var(--card-bg, #fff);
border-radius: 8px;
}
body.dark-mode .invite-code-text {
background: rgba(30, 41, 59, 0.8);
}
.invite-code-copy-btn {
padding: 8px 16px !important;
font-size: 0.85rem !important;
}
/* Friends-only section in post-game */
.faceoff-friends-only-section {
background: rgba(76, 175, 80, 0.1);
border-radius: 10px;
padding: 12px 16px;
margin: 12px 0;
text-align: center;
}
.faceoff-friends-only-section p {
margin: 0;
color: var(--text-primary);
}
.friends-only-hint {
font-size: 0.85rem;
color: var(--text-secondary) !important;
margin-top: 6px !important;
}
/* Join hint in friends-only modal */
.faceoff-join-hint {
font-size: 0.9rem;
color: var(--text-secondary);
padding: 10px;
background: rgba(76, 175, 80, 0.1);
border-radius: 8px;
text-align: center;
}
/* Join Modal */
.faceoff-join-modal-content {
display: flex;
flex-direction: column;
gap: 16px;
}
.join-challenge-info {
background: var(--card-bg, rgba(255,255,255,0.8));
border-radius: 8px;
padding: 16px;
border: 1px solid var(--border-color, #ddd);
margin-bottom: 8px;
}
body.dark-mode .join-challenge-info {
background: rgba(30, 41, 59, 0.6);
}
.join-row {
display: flex;
justify-content: space-between;
padding: 8px 0;
border-bottom: 1px solid rgba(0,0,0,0.05);
}
.join-row:last-child {
border-bottom: none;
}
.join-label {
color: var(--text-secondary);
}
.join-value {
font-weight: 600;
color: var(--text-primary);
}
.join-value.highlight {
color: #4caf50;
}
.join-balance {
text-align: center;
padding: 12px;
background: rgba(76, 175, 80, 0.1);
border-radius: 8px;
}
.join-balance.insufficient {
background: rgba(244, 67, 54, 0.1);
}
.join-balance .balance-warning {
display: block;
color: #f44336;
font-size: 0.85rem;
margin-top: 4px;
}
.join-notice {
text-align: center;
color: var(--text-secondary);
font-size: 0.9rem;
margin: 0;
}
/* Invite Code Display (in results modal) */
.faceoff-invite-code-section {
margin-top: 16px;
padding-top: 16px;
border-top: 1px solid var(--border-color, rgba(0,0,0,0.1));
text-align: center;
}
.invite-code-label {
color: var(--text-secondary);
font-size: 0.9rem;
margin: 0 0 10px 0;
}
.invite-code-display {
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
}
.invite-code-text {
font-family: 'Courier New', monospace;
font-size: 1.4rem;
font-weight: bold;
color: #9c27b0;
letter-spacing: 3px;
padding: 8px 16px;
background: rgba(156, 39, 176, 0.1);
border-radius: 8px;
border: 2px solid rgba(156, 39, 176, 0.3);
}
body.dark-mode .invite-code-text {
background: rgba(156, 39, 176, 0.2);
}
.invite-copy-btn,
.invite-share-btn {
padding: 8px 16px;
}
/* βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
Face-Off Confirmation Modal
βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ */
.faceoff-confirm-content {
display: flex;
flex-direction: column;
gap: 16px;
padding: 8px 0;
}
.faceoff-confirm-mode {
display: flex;
justify-content: center;
}
.faceoff-confirm-mode .mode-badge {
display: inline-block;
padding: 8px 20px;
background: linear-gradient(135deg, #ef5350, #c62828);
color: white;
border-radius: 20px;
font-weight: 600;
font-size: 1rem;
}
.faceoff-confirm-info {
display: flex;
flex-direction: column;
gap: 8px;
padding: 16px;
background: var(--card-bg, rgba(0,0,0,0.05));
border-radius: 12px;
}
.faceoff-confirm-info .confirm-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 0;
}
.faceoff-confirm-info .confirm-row.highlight {
padding-top: 12px;
margin-top: 4px;
border-top: 1px solid var(--border-color, rgba(0,0,0,0.1));
}
.faceoff-confirm-info .confirm-label {
color: var(--text-secondary, #666);
font-size: 1rem;
}
.faceoff-confirm-info .confirm-value {
font-weight: 700;
font-size: 1.1rem;
}
.faceoff-confirm-info .confirm-value.cost {
color: #e53935;
}
.faceoff-confirm-info .confirm-value.reward {
color: #2e7d32;
font-size: 1.2rem;
}
.faceoff-confirm-balance {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 8px;
padding: 12px 16px;
background: linear-gradient(135deg, #fff8e1, #ffecb3);
border-radius: 10px;
border: 1px solid #ffd54f;
}
body.dark-mode .faceoff-confirm-balance {
background: linear-gradient(135deg, #3d3000, #5a4500);
border-color: #ffc107;
}
.faceoff-confirm-balance.insufficient {
background: linear-gradient(135deg, #ffebee, #ffcdd2);
border-color: #ef5350;
}
body.dark-mode .faceoff-confirm-balance.insufficient {
background: linear-gradient(135deg, #4a1010, #5a1515);
border-color: #ef5350;
}
.faceoff-confirm-balance .balance-label {
color: var(--text-secondary, #666);
}
.faceoff-confirm-balance .balance-value {
font-weight: 700;
font-size: 1.1rem;
color: #f9a825;
}
.faceoff-confirm-balance .balance-warning {
width: 100%;
text-align: center;
color: #e53935;
font-weight: 600;
font-size: 0.9rem;
margin-top: 4px;
}
.faceoff-confirm-rules {
text-align: center;
color: var(--text-secondary, #666);
font-size: 0.9rem;
margin: 0;
line-height: 1.4;
}
/* βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
Face-Off Active Challenges List
βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ */
.faceoff-list {
display: flex;
flex-direction: column;
gap: 12px;
}
.faceoff-empty {
text-align: center;
color: var(--text-secondary, #666);
padding: 20px;
font-style: italic;
}
.faceoff-card {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px;
background: var(--card-bg, rgba(0,0,0,0.05));
border-radius: 10px;
border: 1px solid var(--border-color, rgba(0,0,0,0.1));
transition: transform 0.2s, box-shadow 0.2s;
}
.faceoff-card:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.faceoff-card.waiting {
border-left: 4px solid #ffc107;
}
.faceoff-card.ready {
border-left: 4px solid #28a745;
}
.faceoff-card-info {
display: flex;
flex-direction: column;
gap: 4px;
}
.faceoff-card-players {
color: var(--text-primary);
font-weight: 600;
}
.faceoff-card-state {
color: var(--text-secondary, #666);
font-size: 0.85rem;
}
/* Dark mode for Face-Off cards */
body.dark-mode .faceoff-card {
background: linear-gradient(180deg, #2d3748 0%, #1e2a3a 100%);
border-color: rgba(255, 255, 255, 0.15);
}
body.dark-mode .faceoff-card-players {
color: #e0e0e0;
}
body.dark-mode .faceoff-card-state {
color: #a0aec0;
}
/* Light mode - ensure text is readable */
.faceoff-card {
color: #333;
}
.faceoff-card-players {
color: #1a1a1a;
}
/* βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
Face-Off Stats Grid
βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ */
.faceoff-stats-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
}
@media (max-width: 500px) {
.faceoff-stats-grid {
grid-template-columns: repeat(2, 1fr);
}
}
.faceoff-stats-grid .stat-box {
background: var(--card-bg, rgba(0,0,0,0.05));
border-radius: 10px;
padding: 16px 12px;
text-align: center;
border: 1px solid var(--border-color, rgba(0,0,0,0.1));
}
.faceoff-stats-grid .stat-value {
font-size: 1.5rem;
font-weight: 700;
color: var(--text-primary);
}
.faceoff-stats-grid .stat-label {
font-size: 0.8rem;
color: var(--text-secondary, #666);
margin-top: 4px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
Face-Off Button Containers
βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ */
.faceoff-history-btn-container,
.faceoff-back-btn-container {
display: flex;
justify-content: center;
}
/* βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
Face-Off Waiting Room
βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ */
.faceoff-waiting-room,
.faceoff-ready-room,
.faceoff-waiting-results {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 32px;
max-width: 500px;
margin: 0 auto;
}
.faceoff-waiting-room h2,
.faceoff-ready-room h2,
.faceoff-waiting-results h2 {
color: var(--text-primary);
font-size: 1.8rem;
margin-bottom: 12px;
}
.faceoff-waiting-text,
.faceoff-ready-text {
color: var(--text-secondary, #666);
font-size: 1.1rem;
margin-bottom: 24px;
}
/* βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
Face-Off Player Cards
βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ */
.faceoff-players-container {
display: flex;
justify-content: center;
gap: 24px;
margin: 24px 0;
flex-wrap: wrap;
}
.faceoff-player-card {
display: flex;
flex-direction: column;
align-items: center;
padding: 20px;
background: var(--card-bg, rgba(0,0,0,0.05));
border-radius: 12px;
min-width: 120px;
border: 2px solid var(--border-color, rgba(0,0,0,0.2));
}
.faceoff-player-card.empty {
border: 2px dashed var(--border-color, rgba(0,0,0,0.2));
background: transparent;
}
.faceoff-player-card.finished {
border-color: #28a745;
}
.faceoff-player-avatar {
width: 64px;
height: 64px;
border-radius: 50%;
margin-bottom: 12px;
border: 3px solid var(--border-color, rgba(0,0,0,0.2));
}
.faceoff-player-avatar-placeholder {
width: 64px;
height: 64px;
border-radius: 50%;
background: var(--card-bg, rgba(0,0,0,0.1));
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
color: var(--text-secondary, #666);
margin-bottom: 12px;
}
.faceoff-player-name {
color: var(--text-primary);
font-weight: 600;
font-size: 1rem;
}
.faceoff-player-status {
color: #28a745;
font-size: 0.85rem;
margin-top: 4px;
}
/* βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
Face-Off Invite Code
βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ */
.faceoff-invite-section {
margin-top: 24px;
padding: 20px;
background: var(--card-bg, rgba(0,0,0,0.05));
border-radius: 12px;
}
.faceoff-invite-section p {
color: var(--text-secondary, #666);
margin-bottom: 12px;
}
.faceoff-invite-code {
font-family: monospace;
font-size: 2rem;
font-weight: 700;
color: var(--accent-gold, #d4a800);
letter-spacing: 4px;
margin-bottom: 16px;
user-select: all;
}
/* βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
Face-Off Game Info
βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ */
.faceoff-game-info {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 16px;
margin: 24px 0;
padding: 16px;
background: var(--card-bg, rgba(0,0,0,0.05));
border-radius: 10px;
}
.faceoff-game-info p {
color: var(--text-secondary, #666);
margin: 0;
font-size: 0.95rem;
}
/* βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
Face-Off Actions
βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ */
.faceoff-waiting-actions,
.faceoff-ready-actions,
.faceoff-results-actions {
display: flex;
gap: 12px;
margin-top: 24px;
flex-wrap: wrap;
justify-content: center;
}
/* βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
Face-Off Results
βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ */
.faceoff-results-container {
max-width: 500px;
margin: 0 auto;
padding: 24px;
}
.faceoff-results-header {
text-align: center;
margin-bottom: 24px;
}
.faceoff-results-header h2 {
color: var(--text-primary);
font-size: 1.8rem;
margin-bottom: 12px;
}
.faceoff-winner-badge {
display: inline-block;
background: linear-gradient(135deg, #ffd700 0%, #ffaa00 100%);
color: #1a1a2e;
padding: 8px 24px;
border-radius: 20px;
font-weight: 700;
font-size: 1rem;
letter-spacing: 2px;
}
.faceoff-results-list {
display: flex;
flex-direction: column;
gap: 12px;
}
.faceoff-result-row {
display: flex;
align-items: center;
gap: 12px;
padding: 16px;
background: var(--card-bg, rgba(0,0,0,0.05));
border-radius: 10px;
border: 1px solid var(--border-color, rgba(0,0,0,0.1));
}
.faceoff-result-row.winner {
background: rgba(255, 215, 0, 0.1);
border-color: rgba(255, 215, 0, 0.3);
}
.faceoff-result-row.is-me {
border-color: rgba(0, 123, 255, 0.5);
}
.faceoff-result-rank {
min-width: 40px;
font-weight: 700;
color: var(--accent-gold, #d4a800);
font-size: 1.1rem;
}
.faceoff-result-avatar {
width: 48px;
height: 48px;
border-radius: 50%;
}
.faceoff-result-info {
flex: 1;
}
.faceoff-result-name {
color: var(--text-primary);
font-weight: 600;
}
.faceoff-result-word {
color: var(--text-secondary, #666);
font-size: 0.85rem;
margin-top: 2px;
}
.faceoff-result-score {
font-size: 1.3rem;
font-weight: 700;
color: var(--text-primary);
}
.faceoff-result-coins {
color: var(--accent-gold, #d4a800);
font-weight: 600;
font-size: 0.95rem;
min-width: 50px;
text-align: right;
}
/* βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
Face-Off Results Modal Overlay
βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ */
.faceoff-results-overlay-container {
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
padding: 24px;
max-width: 400px;
width: 100%;
}
.faceoff-results-modal-content {
width: 100%;
}
.faceoff-results-header-modal {
text-align: center;
margin-bottom: 20px;
}
.faceoff-results-header-modal .winner-crown {
font-size: 3rem;
animation: crownBounce 1s ease-out;
}
@keyframes crownBounce {
0% { transform: translateY(-20px) scale(0.5); opacity: 0; }
50% { transform: translateY(5px) scale(1.1); }
100% { transform: translateY(0) scale(1); opacity: 1; }
}
.faceoff-results-header-modal .result-title {
font-size: 1.8rem;
font-weight: 700;
color: #fff;
margin-top: 8px;
}
.faceoff-results-header-modal.winner .result-title {
color: #ffd700;
text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
.faceoff-results-header-modal .game-id {
color: rgba(255,255,255,0.6);
font-size: 0.85rem;
margin-top: 4px;
}
.faceoff-results-list-modal {
display: flex;
flex-direction: column;
gap: 8px;
background: rgba(0,0,0,0.2);
border-radius: 12px;
padding: 12px;
}
.faceoff-result-row-modal {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
background: rgba(255,255,255,0.1);
border-radius: 8px;
animation: fadeSlideIn 0.4s ease-out both;
}
.faceoff-result-row-modal.winner {
background: rgba(255, 215, 0, 0.2);
border: 1px solid rgba(255, 215, 0, 0.3);
}
.faceoff-result-row-modal.is-me {
background: rgba(0, 123, 255, 0.2);
border: 1px solid rgba(0, 123, 255, 0.4);
}
.faceoff-result-row-modal.is-me.winner {
background: linear-gradient(135deg, rgba(255, 215, 0, 0.25), rgba(0, 123, 255, 0.15));
border: 2px solid rgba(255, 215, 0, 0.5);
}
.faceoff-result-row-modal .result-rank {
font-size: 1.3rem;
min-width: 32px;
}
.faceoff-result-row-modal .result-rank.gold { color: #ffd700; }
.faceoff-result-row-modal .result-rank.silver { color: #c0c0c0; }
.faceoff-result-row-modal .result-rank.bronze { color: #cd7f32; }
.faceoff-result-row-modal .result-avatar {
width: 36px;
height: 36px;
border-radius: 50%;
border: 2px solid rgba(255,255,255,0.2);
}
.faceoff-result-row-modal .result-info {
flex: 1;
display: flex;
flex-direction: column;
gap: 2px;
}
.faceoff-result-row-modal .result-name {
color: #fff;
font-weight: 600;
font-size: 0.95rem;
}
.faceoff-result-row-modal .result-word {
color: rgba(255,255,255,0.6);
font-size: 0.75rem;
}
.faceoff-result-row-modal .result-score {
font-size: 1.2rem;
font-weight: 700;
color: #fff;
}
.faceoff-coins-won, .faceoff-coins-lost {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 12px 20px;
border-radius: 10px;
margin-top: 16px;
}
.faceoff-coins-won {
background: linear-gradient(135deg, rgba(255, 215, 0, 0.2), rgba(255, 170, 0, 0.15));
border: 1px solid rgba(255, 215, 0, 0.3);
}
.faceoff-coins-lost {
background: rgba(239, 83, 80, 0.15);
border: 1px solid rgba(239, 83, 80, 0.3);
}
.faceoff-coins-won .coins-icon, .faceoff-coins-lost .coins-icon {
font-size: 1.3rem;
}
.faceoff-coins-won .coins-label, .faceoff-coins-lost .coins-label {
color: rgba(255,255,255,0.8);
}
.faceoff-coins-won .coins-amount {
font-size: 1.3rem;
font-weight: 700;
color: #ffd700;
}
.faceoff-coins-lost .coins-amount {
font-size: 1.2rem;
font-weight: 600;
color: #ef5350;
}
.faceoff-results-buttons {
display: flex;
gap: 12px;
width: 100%;
margin-top: 8px;
}
.faceoff-results-buttons .btnunified {
flex: 1;
padding: 14px 20px;
}
/* βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
Face-Off Results In-Overlay (shown inside game overlay)
βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ */
.faceoff-overlay-results {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 20px;
padding: 24px;
width: 100%;
height: 100%;
max-width: 450px;
margin: 0 auto;
box-sizing: border-box;
}
.faceoff-overlay-results .faceoff-results-header-modal {
margin-bottom: 8px;
}
.faceoff-overlay-results .faceoff-results-list-modal {
width: 100%;
max-height: 300px;
overflow-y: auto;
}
.faceoff-overlay-results .faceoff-results-buttons {
margin-top: 16px;
}
/* Waiting state styles */
.faceoff-overlay-results.faceoff-waiting {
text-align: center;
}
.faceoff-waiting-score {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
padding: 20px 40px;
background: rgba(0, 123, 255, 0.15);
border-radius: 12px;
border: 1px solid rgba(0, 123, 255, 0.3);
}
.faceoff-waiting-score .score-label {
color: rgba(255, 255, 255, 0.7);
font-size: 0.9rem;
}
.faceoff-waiting-score .score-value {
font-size: 2.5rem;
font-weight: 700;
color: #fff;
}
.faceoff-waiting-message {
color: rgba(255, 255, 255, 0.8);
font-size: 0.95rem;
line-height: 1.5;
max-width: 320px;
margin: 0;
}
.faceoff-waiting-message strong {
color: #fff;
}
/* βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
Face-Off History (Improved with avatars)
βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ */
.faceoff-history-modal .overlay-modal-content {
max-width: 480px;
overflow-x: hidden;
}
.faceoff-history-modal .btn {
padding: 8px 16px;
font-size: 0.85rem;
}
.faceoff-history-list {
display: flex;
flex-direction: column;
gap: 12px;
max-height: 330px;
overflow-y: auto;
overflow-x: hidden;
padding: 8px;
}
/* History Header Row */
.history-header-row {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
margin-bottom: 10px;
}
/* History Filter Buttons */
.history-filter-buttons {
display: flex;
gap: 4px;
}
.history-filter-btn {
padding: 5px 10px;
border: 1px solid rgba(0,0,0,0.15);
border-radius: 6px;
background: rgba(0,0,0,0.03);
color: var(--text-secondary, #666);
font-size: 0.75rem;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
text-align: center;
user-select: none;
}
body.dark-mode .history-filter-btn {
border-color: rgba(255,255,255,0.15);
background: rgba(255,255,255,0.05);
color: #9ca3af;
}
.history-filter-btn:hover {
background: rgba(0,0,0,0.08);
}
body.dark-mode .history-filter-btn:hover {
background: rgba(255,255,255,0.1);
}
.history-filter-btn.active {
background: #6366f1;
border-color: #6366f1;
color: #fff;
}
body.dark-mode .history-filter-btn.active {
background: #6366f1;
border-color: #6366f1;
color: #fff;
}
/* Showing count text */
.faceoff-history-showing {
font-size: 0.7rem;
color: var(--text-secondary, #888);
white-space: nowrap;
flex-shrink: 0;
}
body.dark-mode .faceoff-history-showing {
color: #9ca3af;
}
.faceoff-history-row {
display: flex;
flex-direction: column;
gap: 10px;
padding: 14px 16px;
background: var(--card-bg, rgba(255,255,255,0.95));
border-radius: 12px;
border-left: 4px solid;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
transition: transform 0.2s, box-shadow 0.2s;
position: relative;
}
body.dark-mode .faceoff-history-row {
background: rgba(30, 41, 59, 0.95);
}
.faceoff-history-row:hover {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}
.faceoff-history-row.winner {
border-left-color: #28a745;
background: linear-gradient(90deg, rgba(40, 167, 69, 0.08), transparent 30%);
}
body.dark-mode .faceoff-history-row.winner {
background: linear-gradient(90deg, rgba(40, 167, 69, 0.15), rgba(30, 41, 59, 0.95) 30%);
}
.faceoff-history-row.loser {
border-left-color: #dc3545;
background: linear-gradient(90deg, rgba(220, 53, 69, 0.06), transparent 30%);
}
body.dark-mode .faceoff-history-row.loser {
background: linear-gradient(90deg, rgba(220, 53, 69, 0.12), rgba(30, 41, 59, 0.95) 30%);
}
.faceoff-history-row.refunded {
border-left-color: #6c757d;
background: linear-gradient(90deg, rgba(108, 117, 125, 0.08), transparent 30%);
}
body.dark-mode .faceoff-history-row.refunded {
background: linear-gradient(90deg, rgba(108, 117, 125, 0.15), rgba(30, 41, 59, 0.95) 30%);
}
/* Result Badge */
.faceoff-history-result-badge {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 4px;
}
.faceoff-history-result-badge .result-text {
font-weight: 700;
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 1px;
}
.faceoff-history-row.winner .faceoff-history-result-badge .result-text {
color: #28a745;
}
.faceoff-history-row.loser .faceoff-history-result-badge .result-text {
color: #dc3545;
}
.faceoff-history-row.refunded .faceoff-history-result-badge .result-text {
color: #6c757d;
}
/* Players section with avatars */
.faceoff-history-players {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
}
.faceoff-history-player {
display: flex;
align-items: center;
gap: 8px;
flex: 1;
max-width: 150px;
}
.faceoff-history-player.me {
justify-content: flex-end;
text-align: right;
}
.faceoff-history-player.me .player-details {
order: -1;
align-items: flex-end;
}
.faceoff-history-player.opponent {
justify-content: flex-start;
}
.faceoff-history-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
object-fit: cover;
border: 2px solid rgba(0,0,0,0.1);
flex-shrink: 0;
}
body.dark-mode .faceoff-history-avatar {
border-color: rgba(255,255,255,0.15);
}
.faceoff-history-row.winner .faceoff-history-player.me .faceoff-history-avatar {
border-color: #28a745;
}
.faceoff-history-row.loser .faceoff-history-player.opponent .faceoff-history-avatar {
border-color: #28a745;
}
.faceoff-history-player .player-details {
display: flex;
flex-direction: column;
gap: 2px;
}
.faceoff-history-player .player-name {
font-weight: 600;
font-size: 0.9rem;
color: var(--text-primary);
}
.faceoff-history-player .player-score {
font-size: 0.8rem;
color: var(--text-secondary, #666);
}
.faceoff-history-vs-badge {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
font-weight: 700;
font-size: 0.75rem;
color: var(--text-secondary, #999);
padding: 4px 10px;
background: rgba(0,0,0,0.05);
border-radius: 12px;
flex-shrink: 0;
}
body.dark-mode .faceoff-history-vs-badge {
background: rgba(255,255,255,0.08);
color: rgba(255,255,255,0.6);
}
.faceoff-history-refund-reason {
font-size: 0.55rem;
font-weight: 500;
color: #6c757d;
text-transform: lowercase;
letter-spacing: 0;
white-space: nowrap;
}
body.dark-mode .faceoff-history-refund-reason {
color: #9ca3af;
}
/* Meta info (game ID, best word) */
.faceoff-history-meta {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 8px;
border-top: 1px solid rgba(0,0,0,0.06);
}
body.dark-mode .faceoff-history-meta {
border-top-color: rgba(255,255,255,0.08);
}
.faceoff-history-game {
color: var(--text-secondary, #888);
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.faceoff-history-word {
color: var(--text-secondary, #666);
font-size: 0.75rem;
font-style: italic;
}
/* Coins display - positioned to align with VS badge */
.faceoff-history-coins {
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
font-weight: 700;
font-size: 0.95rem;
padding: 4px 10px;
background: rgba(0, 0, 0, 0.05);
border-radius: 16px;
position: absolute;
top: 10px;
left: 50%;
transform: translateX(-50%);
z-index: 1;
}
body.dark-mode .faceoff-history-coins {
background: rgba(255, 255, 255, 0.1);
}
.faceoff-history-coins.positive {
color: #28a745;
}
.faceoff-history-coins.negative {
color: #dc3545;
}
.faceoff-history-coins.neutral {
color: #6c757d;
}
/* Rating info in meta section */
.faceoff-history-rating-info {
font-size: 0.75rem;
font-weight: 600;
}
.faceoff-history-rating-info.positive {
color: #28a745 !important;
}
.faceoff-history-rating-info.negative {
color: #dc3545 !important;
}
body.dark-mode .faceoff-history-rating-info.positive {
color: #34d399 !important;
}
body.dark-mode .faceoff-history-rating-info.negative {
color: #f87171 !important;
}
.coin-icon-small {
width: 16px;
height: 16px;
}
/* Mobile adjustments */
@media (max-width: 400px) {
.faceoff-history-player {
max-width: 120px;
}
.faceoff-history-avatar {
width: 32px;
height: 32px;
}
.faceoff-history-player .player-name {
font-size: 0.8rem;
}
}
/* Multi-Player Face-Off History Layout (3+ players) */
.faceoff-history-row.multi-player {
padding: 16px;
}
.faceoff-history-players.multi-player {
flex-wrap: nowrap;
gap: 10px;
justify-content: center;
align-items: center;
}
/* "You" player in multi-player mode - stays compact on left */
.faceoff-history-row.multi-player .faceoff-history-player.me {
flex: 0 0 auto;
max-width: 100px;
}
/* Opponents group - vertical stack on right side */
.faceoff-history-opponents-group {
display: flex;
flex-direction: column;
gap: 6px;
flex: 0 0 auto;
}
/* Each opponent in multi-player mode */
.faceoff-history-row.multi-player .faceoff-history-opponents-group .faceoff-history-player {
max-width: none;
flex: 0 0 auto;
}
.faceoff-history-row.multi-player .faceoff-history-avatar {
width: 32px;
height: 32px;
flex-shrink: 0;
}
.faceoff-history-row.multi-player .player-name {
font-size: 0.82rem;
max-width: 110px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.faceoff-history-row.multi-player .player-score {
font-size: 0.75rem;
white-space: nowrap;
}
/* Opponent rank badge for 5+ player games */
.opponent-rank {
font-size: 1rem;
margin-right: 4px;
flex-shrink: 0;
}
/* "... and X more players" text */
.faceoff-history-more-players {
font-size: 0.8rem;
color: var(--text-secondary, #888);
font-style: italic;
padding: 4px 8px;
text-align: center;
}
body.dark-mode .faceoff-history-more-players {
color: rgba(255, 255, 255, 0.6);
}
/* Make VS badge smaller in multi-player mode */
.faceoff-history-row.multi-player .faceoff-history-vs-badge {
padding: 3px 8px;
font-size: 0.7rem;
flex-shrink: 0;
}
/* Mobile adjustments for 4-player */
@media (max-width: 450px) {
.faceoff-history-row.multi-player .faceoff-history-player.me {
max-width: 85px;
}
.faceoff-history-row.multi-player .faceoff-history-avatar {
width: 28px;
height: 28px;
}
.faceoff-history-row.multi-player .player-name {
max-width: 90px;
font-size: 0.78rem;
}
}
/* βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
Enhanced Face-Off History Modal
βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ */
/* Container */
.faceoff-history-container {
display: flex;
flex-direction: column;
gap: 12px;
overflow-x: hidden;
max-width: 100%;
}
/* Search Input */
.faceoff-history-search {
position: relative;
max-width: 100%;
}
.faceoff-history-search input {
width: 100%;
padding: 10px 14px;
border: 1px solid rgba(0, 0, 0, 0.12);
border-radius: 8px;
font-size: 0.9rem;
background: var(--input-bg, #fff);
color: var(--text-primary);
transition: border-color 0.2s, box-shadow 0.2s;
box-sizing: border-box;
}
.faceoff-history-search input:focus {
outline: none;
border-color: #8b5cf6;
box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15);
}
.faceoff-history-search input::placeholder {
color: var(--text-secondary, #999);
}
body.dark-mode .faceoff-history-search input {
background: rgba(30, 41, 59, 0.8);
border-color: rgba(255, 255, 255, 0.1);
}
body.dark-mode .faceoff-history-search input:focus {
border-color: #a78bfa;
box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.2);
}
/* No Results Message */
.faceoff-history-no-results {
text-align: center;
color: var(--text-secondary, #666);
padding: 30px 20px;
font-style: italic;
}
/* Header with result badge and dates (coins now absolute positioned) */
.faceoff-history-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 8px;
}
.faceoff-history-dates {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 2px;
}
.faceoff-history-date {
font-size: 0.75rem;
color: var(--text-secondary, #888);
}
.faceoff-history-date-created {
font-size: 0.68rem;
color: var(--text-secondary, #999);
opacity: 0.8;
}
/* Load More Button */
.faceoff-history-load-more {
width: 100%;
padding: 8px;
background: linear-gradient(135deg, #8b5cf6, #6366f1);
color: white;
border: none;
border-radius: 6px;
font-size: 0.8rem;
font-weight: 600;
cursor: pointer;
transition: transform 0.15s, box-shadow 0.15s;
margin-top: 6px;
text-align: center;
user-select: none;
box-sizing: border-box;
}
.faceoff-history-load-more:hover:not(.disabled) {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
}
.faceoff-history-load-more.disabled {
opacity: 0.6;
cursor: not-allowed;
}
body.dark-mode .faceoff-history-load-more {
background: linear-gradient(135deg, #a78bfa, #818cf8);
}
/* Mobile adjustments for enhanced history */
@media (max-width: 400px) {
.history-header-row {
flex-wrap: wrap;
gap: 6px;
}
.faceoff-history-list {
max-height: 250px;
}
.history-filter-buttons {
gap: 3px;
}
.history-filter-btn {
padding: 4px 6px;
font-size: 0.7rem;
}
.faceoff-history-showing {
font-size: 0.65rem;
}
.faceoff-history-search input {
padding: 8px 10px;
font-size: 0.85rem;
}
.faceoff-history-load-more {
padding: 10px;
font-size: 0.85rem;
}
}
/* βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
Face-Off History Cards (Redesigned)
βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ */
.history-card {
display: flex;
flex-direction: column;
background: var(--card-bg, #fff);
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
border-left: 4px solid #ccc;
}
body.dark-mode .history-card {
background: rgba(30, 41, 59, 0.95);
}
.history-card.winner {
border-left-color: #28a745;
}
.history-card.loser {
border-left-color: #dc3545;
}
.history-card.refunded {
border-left-color: #6c757d;
}
/* Header section with badges and coins */
.history-card-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
padding: 12px 16px;
background: linear-gradient(135deg, rgba(0,0,0,0.02), transparent);
}
body.dark-mode .history-card-header {
background: linear-gradient(135deg, rgba(255,255,255,0.03), transparent);
}
.history-card.winner .history-card-header {
background: linear-gradient(135deg, rgba(40, 167, 69, 0.1), transparent);
}
.history-card.loser .history-card-header {
background: linear-gradient(135deg, rgba(220, 53, 69, 0.08), transparent);
}
.history-card.refunded .history-card-header {
background: linear-gradient(135deg, rgba(108, 117, 125, 0.08), transparent);
}
.history-card-badges {
display: flex;
flex-direction: column;
gap: 6px;
}
.history-card-result-badge {
font-weight: 700;
font-size: 0.9rem;
text-transform: uppercase;
letter-spacing: 1px;
}
.history-card.winner .history-card-result-badge {
color: #28a745;
}
.history-card.loser .history-card-result-badge {
color: #dc3545;
}
.history-card.refunded .history-card-result-badge {
color: #6c757d;
}
.history-card-coins {
display: flex;
align-items: center;
gap: 4px;
font-weight: 700;
font-size: 1rem;
padding: 4px 10px;
border-radius: 16px;
background: rgba(0,0,0,0.05);
}
body.dark-mode .history-card-coins {
background: rgba(255,255,255,0.1);
}
.history-card-coins.positive {
color: #28a745;
}
.history-card-coins.negative {
color: #dc3545;
}
.history-card-coins.neutral {
color: #6c757d;
}
.history-card-coins .coin-icon-small {
width: 18px;
height: 18px;
}
/* Players section */
.history-card-players {
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
padding: 6px;
}
.history-card-player {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
min-width: 80px;
}
.history-card-player.me {
text-align: right;
align-items: flex-end;
}
.history-card-player.opponent {
text-align: left;
align-items: flex-start;
}
.history-card-avatar {
width: 48px;
height: 48px;
border-radius: 50%;
object-fit: cover;
border: 2px solid rgba(0,0,0,0.1);
}
body.dark-mode .history-card-avatar {
border-color: rgba(255,255,255,0.15);
}
.history-card.winner .history-card-player.me .history-card-avatar {
border-color: #28a745;
}
.history-card.loser .history-card-player.opponent .history-card-avatar {
border-color: #28a745;
}
.history-card-player-info {
display: flex;
flex-direction: column;
gap: 2px;
}
.history-card-player-name {
font-weight: 600;
font-size: 0.9rem;
color: var(--text-primary, #333);
}
body.dark-mode .history-card-player-name {
color: #e5e7eb;
}
.history-card-player-score {
font-size: 0.8rem;
color: var(--text-secondary, #666);
}
body.dark-mode .history-card-player-score {
color: #9ca3af;
}
.history-card-vs {
font-weight: 600;
font-size: 0.85rem;
color: var(--text-secondary, #999);
text-transform: lowercase;
}
/* Multi-player layout */
.history-card-players.multi {
flex-wrap: wrap;
gap: 12px;
}
.history-card-opponents {
display: flex;
flex-direction: column;
gap: 8px;
align-items: flex-start;
}
.history-card-opponent-mini {
display: flex;
align-items: center;
gap: 8px;
}
.history-card-avatar-small {
width: 28px;
height: 28px;
border-radius: 50%;
object-fit: cover;
border: 1px solid rgba(0,0,0,0.1);
}
body.dark-mode .history-card-avatar-small {
border-color: rgba(255,255,255,0.15);
}
.history-card-opponent-name {
font-weight: 500;
font-size: 0.8rem;
color: var(--text-primary, #333);
}
body.dark-mode .history-card-opponent-name {
color: #e5e7eb;
}
.history-card-opponent-score {
font-size: 0.75rem;
color: var(--text-secondary, #666);
}
body.dark-mode .history-card-opponent-score {
color: #9ca3af;
}
.history-card-more {
font-size: 0.75rem;
color: var(--text-secondary, #666);
font-style: italic;
}
/* Details table section */
.history-card-details {
padding: 12px 16px;
}
.history-card-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0px 0;
border-bottom: 1px solid rgba(0,0,0,0.04);
}
body.dark-mode .history-card-row {
border-bottom-color: rgba(255,255,255,0.04);
}
.history-card-row:last-child {
border-bottom: none;
}
.history-card-label {
font-size: 0.8rem;
color: var(--text-secondary, #666);
}
body.dark-mode .history-card-label {
color: #9ca3af;
}
.history-card-value {
font-size: 0.85rem;
font-weight: 500;
color: var(--text-primary, #333);
text-align: right;
}
body.dark-mode .history-card-value {
color: #e5e7eb;
}
.history-card-value.winner,
body.dark-mode .history-card-value.winner {
color: #28a745;
}
.history-card-value.loser,
body.dark-mode .history-card-value.loser {
color: #dc3545;
}
.history-card-value.refunded,
body.dark-mode .history-card-value.refunded {
color: #6c757d;
}
.history-card-value.positive,
body.dark-mode .history-card-value.positive {
color: #28a745;
}
.history-card-value.negative,
body.dark-mode .history-card-value.negative {
color: #dc3545;
}
.history-card-value.highlight {
color: #6366f1;
font-weight: 600;
}
body.dark-mode .history-card-value.highlight {
color: #a78bfa;
}
/* Mobile adjustments for history cards */
@media (max-width: 400px) {
.history-card-header {
padding: 10px 12px;
}
.history-card-result-badge {
font-size: 0.8rem;
}
.history-card-coins {
font-size: 0.9rem;
padding: 3px 8px;
}
.history-card-players {
padding: 12px;
gap: 12px;
}
.history-card-avatar {
width: 40px;
height: 40px;
}
.history-card-player-name {
font-size: 0.85rem;
}
.history-card-player-score {
font-size: 0.75rem;
}
.history-card-details {
padding: 10px 12px;
}
.history-card-row {
padding: 5px 0;
}
.history-card-label {
font-size: 0.75rem;
}
.history-card-value {
font-size: 0.8rem;
}
}
/* βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
Face-Off Results Improvements
βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ */
.faceoff-game-id {
color: var(--text-secondary, #666);
font-size: 0.85rem;
margin-top: 4px;
}
/* Rank badge colors */
.faceoff-result-rank.gold {
color: #d4a800;
}
.faceoff-result-rank.silver {
color: #8a8a8a;
}
.faceoff-result-rank.bronze {
color: #cd7f32;
}
/* Improve winner card readability in light mode */
.faceoff-result-row.winner {
background: rgba(255, 215, 0, 0.15);
border: 2px solid rgba(212, 168, 0, 0.5);
}
.faceoff-result-row.winner .faceoff-result-name,
.faceoff-result-row.winner .faceoff-result-score {
color: #1a1a2e;
}
body.dark-mode .faceoff-result-row.winner .faceoff-result-name,
body.dark-mode .faceoff-result-row.winner .faceoff-result-score {
color: #fff;
}
/* Coin breakdown section */
.faceoff-coin-breakdown {
background: var(--card-bg, rgba(255,255,255,0.9));
border: 1px solid var(--accent-gold, #d4a800);
border-radius: 10px;
padding: 16px;
margin-top: 20px;
}
body.dark-mode .faceoff-coin-breakdown {
background: rgba(30, 41, 59, 0.9);
}
.faceoff-coin-title {
font-weight: 700;
color: var(--accent-gold, #d4a800);
margin-bottom: 12px;
font-size: 0.95rem;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.faceoff-coin-row {
display: flex;
justify-content: space-between;
padding: 6px 0;
color: var(--text-secondary, #666);
font-size: 0.9rem;
}
.faceoff-coin-amount {
color: var(--accent-gold, #d4a800);
font-weight: 600;
}
.faceoff-coin-row.loss .faceoff-coin-amount {
color: var(--error-color, #dc3545);
}
.faceoff-coin-total {
display: flex;
justify-content: space-between;
padding-top: 10px;
margin-top: 10px;
border-top: 1px solid var(--border-color, rgba(0,0,0,0.1));
font-weight: 700;
color: var(--text-primary);
}
.faceoff-coin-total .faceoff-coin-amount {
font-size: 1.1rem;
color: #28a745;
}
/* βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
Face-Off Modal Results (OverlayManager.createModal style)
βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ */
.faceoff-modal-results {
text-align: center;
}
.faceoff-modal-subtitle {
color: var(--text-secondary, #666);
font-size: 0.9rem;
margin-bottom: 16px;
font-weight: 500;
}
body.dark-mode .faceoff-modal-subtitle {
color: rgba(255, 255, 255, 0.7);
}
.faceoff-modal-game-id {
color: var(--text-secondary, #666);
font-size: 0.8rem;
margin-bottom: 16px;
text-transform: uppercase;
letter-spacing: 1px;
}
body.dark-mode .faceoff-modal-game-id {
color: rgba(255, 255, 255, 0.6);
}
.faceoff-modal-standings {
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 16px;
}
.faceoff-modal-player {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
background: rgba(0, 0, 0, 0.05);
border-radius: 8px;
border: 1px solid rgba(0, 0, 0, 0.1);
}
body.dark-mode .faceoff-modal-player {
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.faceoff-modal-player.winner {
background: rgba(255, 215, 0, 0.15);
border-color: rgba(255, 215, 0, 0.4);
}
.faceoff-modal-player.is-me {
background: rgba(0, 123, 255, 0.12);
border-color: rgba(0, 123, 255, 0.3);
}
body.dark-mode .faceoff-modal-player.is-me {
background: rgba(0, 123, 255, 0.2);
border-color: rgba(0, 123, 255, 0.4);
}
.faceoff-modal-player.is-me.winner {
background: linear-gradient(135deg, rgba(255, 215, 0, 0.2), rgba(0, 123, 255, 0.15));
border-color: rgba(255, 215, 0, 0.5);
}
.faceoff-modal-player .player-rank {
font-weight: 700;
font-size: 0.85rem;
min-width: 32px;
color: var(--text-secondary, #666);
}
body.dark-mode .faceoff-modal-player .player-rank {
color: rgba(255, 255, 255, 0.7);
}
.faceoff-modal-player .player-rank.gold { color: #b8860b; }
.faceoff-modal-player .player-rank.silver { color: #708090; }
.faceoff-modal-player .player-rank.bronze { color: #cd7f32; }
body.dark-mode .faceoff-modal-player .player-rank.gold { color: #ffd700; }
body.dark-mode .faceoff-modal-player .player-rank.silver { color: #c0c0c0; }
.faceoff-modal-player .player-avatar {
width: 36px;
height: 36px;
border-radius: 50%;
object-fit: cover;
border: 2px solid rgba(0, 0, 0, 0.15);
}
body.dark-mode .faceoff-modal-player .player-avatar {
border-color: rgba(255, 255, 255, 0.2);
}
.faceoff-modal-player .player-info {
flex: 1;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 2px;
}
.faceoff-modal-player .player-name {
color: var(--text-primary, #333);
font-weight: 600;
font-size: 0.95rem;
}
body.dark-mode .faceoff-modal-player .player-name {
color: #fff;
}
.faceoff-modal-player .player-best {
color: var(--text-secondary, #666);
font-size: 0.75rem;
}
body.dark-mode .faceoff-modal-player .player-best {
color: rgba(255, 255, 255, 0.6);
}
.faceoff-modal-player .player-score {
font-size: 1.2rem;
font-weight: 700;
color: var(--text-primary, #174a87);
}
body.dark-mode .faceoff-modal-player .player-score {
color: #fff;
}
.faceoff-modal-reward {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 12px 20px;
border-radius: 10px;
margin-top: 8px;
}
.faceoff-modal-reward.winner {
background: linear-gradient(135deg, rgba(40, 167, 69, 0.15), rgba(255, 215, 0, 0.15));
border: 1px solid rgba(40, 167, 69, 0.3);
}
.faceoff-modal-reward.loser {
background: rgba(220, 53, 69, 0.1);
border: 1px solid rgba(220, 53, 69, 0.25);
}
.faceoff-modal-reward .reward-icon {
font-size: 1.5rem;
font-weight: 700;
}
.faceoff-modal-reward.winner .reward-icon {
color: #28a745;
}
.faceoff-modal-reward.loser .reward-icon {
color: #dc3545;
}
.faceoff-modal-reward .reward-label {
color: var(--text-secondary, #555);
font-size: 0.9rem;
}
body.dark-mode .faceoff-modal-reward .reward-label {
color: rgba(255, 255, 255, 0.8);
}
.faceoff-modal-reward .coin-icon-reward {
width: 24px;
height: 24px;
filter: drop-shadow(0 1px 2px rgba(0,0,0,0.2));
}
/* Rating card in game over modal */
.faceoff-modal-rating {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 10px 20px;
border-radius: 10px;
margin-top: 8px;
font-size: 1rem;
}
.faceoff-modal-rating.positive {
background: rgba(40, 167, 69, 0.1);
border: 1px solid rgba(40, 167, 69, 0.25);
}
.faceoff-modal-rating.negative {
background: rgba(220, 53, 69, 0.1);
border: 1px solid rgba(220, 53, 69, 0.25);
}
.faceoff-modal-rating .rating-label {
color: var(--text-secondary, #555);
font-weight: 500;
}
.faceoff-modal-rating .rating-change {
font-weight: 700;
}
.faceoff-modal-rating.positive .rating-change {
color: #28a745;
}
.faceoff-modal-rating.negative .rating-change {
color: #dc3545;
}
.faceoff-modal-rating .rating-arrow {
color: var(--text-secondary, #666);
}
.faceoff-modal-rating .rating-new {
font-weight: 700;
color: var(--text-primary, #333);
}
body.dark-mode .faceoff-modal-rating .rating-label,
body.dark-mode .faceoff-modal-rating .rating-arrow {
color: rgba(255, 255, 255, 0.7);
}
body.dark-mode .faceoff-modal-rating .rating-new {
color: rgba(255, 255, 255, 0.95);
}
/* Waiting modal specific styles */
.faceoff-modal-results.faceoff-waiting .faceoff-modal-score-display {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
padding: 20px 40px;
background: rgba(0, 123, 255, 0.12);
border-radius: 12px;
border: 1px solid rgba(0, 123, 255, 0.25);
margin-bottom: 16px;
}
.faceoff-modal-results.faceoff-waiting .score-label {
color: var(--text-secondary, #555);
font-size: 0.9rem;
}
.faceoff-modal-results.faceoff-waiting .score-value {
font-size: 2.5rem;
font-weight: 700;
color: var(--text-primary, #174a87);
}
body.dark-mode .faceoff-modal-results.faceoff-waiting .score-label {
color: rgba(255, 255, 255, 0.7);
}
body.dark-mode .faceoff-modal-results.faceoff-waiting .score-value {
color: #fff;
}
.faceoff-modal-message {
color: var(--text-secondary, #555);
font-size: 0.95rem;
line-height: 1.5;
text-align: center;
}
.faceoff-modal-message strong {
color: var(--text-primary, #333);
}
body.dark-mode .faceoff-modal-message {
color: rgba(255, 255, 255, 0.8);
}
body.dark-mode .faceoff-modal-message strong {
color: #fff;
}
/* βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
Face-Off Loading & Error States
βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ */
.faceoff-loading,
.faceoff-disabled,
.faceoff-error {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 48px;
min-height: 300px;
}
.faceoff-loading p,
.faceoff-disabled p,
.faceoff-error p {
color: var(--text-secondary, #666);
margin: 16px 0;
}
.faceoff-disabled h2,
.faceoff-error h2 {
color: var(--text-primary);
}
/* βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
Face-Off Progress Indicator
βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ */
.faceoff-progress {
color: #ffc107;
font-size: 1.1rem;
margin-bottom: 24px;
}
/* Face-Off Spinner */
.faceoff-loading .spinner {
width: 40px;
height: 40px;
border: 4px solid var(--border-color, rgba(0,0,0,0.1));
border-top-color: var(--accent-primary, #ff6b35);
border-radius: 50%;
animation: faceoff-spin 1s linear infinite;
}
@keyframes faceoff-spin {
to { transform: rotate(360deg); }
}
/* βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
MOBILE BOTTOM NAVIGATION PADDING
Must be at END of file to override base page padding styles
βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ */
/* Add bottom padding on mobile/touch devices for bottom navigation */
/* Generous padding to account for app nav (58px) + system nav (~48px on Android) */
@media (pointer: coarse) {
#landing,
#mp-lobby,
#daily-page,
#sp-hub-page,
#mp-hub-page,
#party-mode-hub-page,
#versus-hub,
#versus-lobby,
#versus-area,
#settings-page,
#elimination-hub-page,
#social-page,
#profile-page,
#shop-page,
#faceoff-hub-page,
#about-page {
padding-bottom: 110px !important;
}
}
/* ============================================================
NEWS PAGE
============================================================ */
#news-page {
padding: 20px;
max-width: 900px;
margin: 0 auto;
box-sizing: border-box;
}
.news-page-list {
display: flex;
flex-direction: column;
gap: 20px;
}
.news-article {
background: #fff;
border-radius: 12px;
padding: 24px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
border-left: 4px solid #3498db;
}
.news-article.type-sale { border-left-color: #f39c12; }
.news-article.type-event { border-left-color: #27ae60; }
.news-article.type-update { border-left-color: #8e44ad; }
.news-article.type-warning { border-left-color: #e74c3c; }
.news-article-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
}
.news-article-badge {
display: inline-block;
padding: 3px 10px;
border-radius: 50px;
font-size: 0.75rem;
font-weight: 700;
background: #eaf2fb;
color: #3498db;
}
.news-article-badge.type-sale { background: #fef3dc; color: #d68910; }
.news-article-badge.type-event { background: #e8f8e8; color: #1e8449; }
.news-article-badge.type-update { background: #f3ecf9; color: #7d3c98; }
.news-article-badge.type-warning { background: #fde8e8; color: #c0392b; }
.news-article-date {
font-size: 0.8rem;
color: #999;
}
.news-article-title {
font-size: 1.2rem;
font-weight: 700;
color: #1a1a2e;
margin: 0 0 8px;
}
.news-article-body {
font-size: 0.95rem;
color: #555;
line-height: 1.6;
margin: 0;
}
.news-article-link {
display: inline-block;
margin-top: 12px;
font-size: 0.9rem;
font-weight: 600;
color: #3498db;
text-decoration: none;
}
.news-article-link:hover {
text-decoration: underline;
}
/* Dark mode */
body.dark-mode .news-article {
background: var(--card-dark, #1e1e2e);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
body.dark-mode .news-article-title {
color: #e8eaed;
}
body.dark-mode .news-article-body {
color: #b0b0b0;
}
body.dark-mode .news-article-date {
color: #777;
}
body.dark-mode .news-article-badge {
background: rgba(52, 152, 219, 0.15);
color: #5dade2;
}
body.dark-mode .news-article-badge.type-sale { background: rgba(243, 156, 18, 0.15); color: #f5b041; }
body.dark-mode .news-article-badge.type-event { background: rgba(39, 174, 96, 0.15); color: #58d68d; }
body.dark-mode .news-article-badge.type-update { background: rgba(142, 68, 173, 0.15); color: #bb8fce; }
body.dark-mode .news-article-badge.type-warning { background: rgba(231, 76, 60, 0.15); color: #ec7063; }
.news-page-list .loading-state,
.news-page-list .empty-state,
.news-page-list .error-state {
text-align: center;
padding: 60px 20px;
color: #999;
font-size: 1rem;
}
@media (max-width: 600px) {
.news-article {
padding: 16px;
}
.news-article-title {
font-size: 1.05rem;
}
}
/* ============================================================
ABOUT PAGE (Terms of Service, Privacy Policy)
============================================================ */
#about-page {
padding: 20px;
max-width: 900px;
margin: 0 auto;
box-sizing: border-box;
}
.about-header {
margin-bottom: 24px;
}
.about-header h2 {
font-size: 2rem;
color: var(--ink, #333);
margin: 10px 0 0;
font-weight: 700;
}
.about-header .back-btn {
display: inline-flex;
align-items: center;
gap: 6px;
background: none;
border: none;
color: var(--link-color, #1487c6);
font-size: 0.95rem;
cursor: pointer;
padding: 4px 0;
}
.about-header .back-btn:hover {
text-decoration: underline;
}
.about-tabs {
display: flex;
gap: 8px;
margin-bottom: 24px;
flex-wrap: wrap;
}
.about-tab {
padding: 10px 20px;
background: var(--card-bg, #f5f5f5);
border: 2px solid var(--border-color, #e0e0e0);
border-radius: 8px;
font-size: 0.95rem;
font-weight: 600;
color: var(--ink-muted, #666);
cursor: pointer;
transition: all 0.2s;
}
.about-tab:hover {
border-color: #1487c6;
color: var(--ink, #333);
}
.about-tab.active {
background: linear-gradient(135deg, #1487c6, #18a2ee);
color: #fff;
border-color: #1487c6;
}
.about-tab-content {
display: none;
}
.about-tab-content.active {
display: block;
}
.about-section {
color: var(--ink, #333);
line-height: 1.7;
}
.about-section h3 {
font-size: 1.25rem;
margin: 28px 0 12px;
color: var(--ink, #333);
font-weight: 700;
}
.about-section h3:first-child {
margin-top: 0;
}
.about-section h4 {
font-size: 1.05rem;
margin: 20px 0 8px;
color: var(--ink, #444);
font-weight: 600;
}
.about-section p {
margin: 0 0 12px;
color: var(--ink-muted, #555);
}
.about-section ul {
margin: 0 0 12px;
padding-left: 24px;
}
.about-section li {
margin-bottom: 6px;
color: var(--ink-muted, #555);
}
.about-last-updated {
font-style: italic;
color: var(--ink-muted, #888) !important;
font-size: 0.9rem;
}
@media (max-width: 768px) {
#about-page {
padding: 16px;
}
.about-header h2 {
font-size: 1.6rem;
}
.about-tabs {
gap: 6px;
}
.about-tab {
padding: 8px 14px;
font-size: 0.85rem;
}
}
body.dark-mode .about-header h2 {
color: #e8ecf0;
}
body.dark-mode .about-section {
color: #d0d6dc;
}
body.dark-mode .about-section h3 {
color: #e8ecf0;
}
body.dark-mode .about-section h4 {
color: #dce1e6;
}
body.dark-mode .about-section p,
body.dark-mode .about-section li {
color: #b0bac4;
}
body.dark-mode .about-last-updated {
color: #8a95a0 !important;
}
/* ====================================================
COMMUNITY PAGE
==================================================== */
.community-page-container {
max-width: 900px;
margin: 0 auto;
padding: 16px;
}
.community-header {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 16px;
}
.community-header h2 {
margin: 0;
font-size: 1.4rem;
}
/* Tabs */
.community-tabs {
margin-bottom: 16px;
}
.community-tab-content {
display: none;
}
.community-tab-content.active {
display: block;
}
/* Mode selector */
.community-mode-selector {
margin-bottom: 12px;
}
.community-select {
width: 100%;
padding: 10px 12px;
border-radius: 8px;
border: 1px solid #d0d5dd;
background: #fff;
font-size: 0.95rem;
color: #1a1a2e;
appearance: auto;
}
body.dark-mode .community-select {
background: #1e2a3a;
border-color: #3a4a5e;
color: #e0e6ed;
}
/* SP sort (shown only for SP modes) */
.community-sp-sort {
margin-bottom: 12px;
}
/* Search bar */
.community-search-bar {
position: relative;
margin-bottom: 16px;
}
.community-search-icon {
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
width: 16px;
height: 16px;
color: #888;
pointer-events: none;
}
.community-search-input {
width: 100%;
padding: 10px 12px 10px 36px;
border-radius: 8px;
border: 1px solid #d0d5dd;
background: #fff;
font-size: 0.95rem;
color: #1a1a2e;
box-sizing: border-box;
}
body.dark-mode .community-search-input {
background: #1e2a3a;
border-color: #3a4a5e;
color: #e0e6ed;
}
.community-search-input::placeholder {
color: #999;
}
/* Empty / loading states */
.community-empty-state {
text-align: center;
padding: 32px 16px;
color: #888;
font-size: 0.95rem;
}
/* ββ Skeleton Loading ββ */
@keyframes skeleton-shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
.skeleton {
background: linear-gradient(90deg, #e0e0e0 25%, #ececec 50%, #e0e0e0 75%);
background-size: 200% 100%;
animation: skeleton-shimmer 1.5s ease-in-out infinite;
border-radius: 4px;
}
body.dark-mode .skeleton {
background: linear-gradient(90deg, #2a3344 25%, #344052 50%, #2a3344 75%);
background-size: 200% 100%;
}
.skeleton-row {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 6px;
border-bottom: 1px solid #f0f0f0;
}
body.dark-mode .skeleton-row {
border-bottom-color: #2a3a4e;
}
.skeleton-row .skeleton-circle {
width: 28px;
height: 28px;
border-radius: 50%;
flex-shrink: 0;
}
.skeleton-row .skeleton-rank {
width: 24px;
height: 16px;
flex-shrink: 0;
}
.skeleton-row .skeleton-name {
height: 16px;
flex: 1;
max-width: 140px;
}
.skeleton-row .skeleton-stat {
height: 16px;
width: 60px;
flex-shrink: 0;
}
.skeleton-row .skeleton-badge {
height: 20px;
width: 70px;
border-radius: 10px;
flex-shrink: 0;
}
/* Skeleton for player search cards */
.skeleton-card {
display: flex;
align-items: center;
gap: 12px;
padding: 12px;
border-radius: 10px;
background: #fff;
border: 1px solid #e8e8e8;
}
body.dark-mode .skeleton-card {
background: #1e2a3a;
border-color: #2e3e52;
}
.skeleton-card .skeleton-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
flex-shrink: 0;
}
.skeleton-card .skeleton-card-name {
height: 16px;
width: 120px;
}
.skeleton-card .skeleton-card-btn {
height: 32px;
width: 60px;
border-radius: 6px;
margin-left: auto;
}
/* Skeleton lobby game card β mimics .mp-card-compact / .elim-card-compact */
.skeleton-lobby-card {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 14px;
border-radius: 10px;
background: #fff;
border: 1px solid #e8e8e8;
margin-bottom: 8px;
}
body.dark-mode .skeleton-lobby-card {
background: #1e2a3a;
border-color: #2e3e52;
}
.skeleton-lobby-card .skeleton-lobby-name {
height: 14px;
border-radius: 4px;
}
.skeleton-lobby-card .skeleton-lobby-meta {
display: flex;
align-items: center;
gap: 8px;
margin-top: 6px;
}
.skeleton-lobby-card .skeleton-lobby-players {
height: 12px;
width: 40px;
border-radius: 4px;
}
.skeleton-lobby-card .skeleton-lobby-status {
height: 12px;
border-radius: 4px;
}
.skeleton-lobby-card .skeleton-lobby-btn {
height: 32px;
width: 56px;
border-radius: 6px;
flex-shrink: 0;
}
/* Skeleton news article */
.skeleton-news-article {
padding: 16px 20px;
border-radius: 10px;
background: #fff;
border: 1px solid #e8e8e8;
border-left: 4px solid #ddd;
margin-bottom: 12px;
}
body.dark-mode .skeleton-news-article {
background: #1e2a3a;
border-color: #2e3e52;
border-left-color: #3e4e62;
}
.skeleton-news-article .skeleton-news-header {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 10px;
}
.skeleton-news-article .skeleton-news-badge {
height: 22px;
width: 80px;
border-radius: 12px;
}
.skeleton-news-article .skeleton-news-date {
height: 12px;
width: 100px;
border-radius: 4px;
}
.skeleton-news-article .skeleton-news-title {
height: 18px;
border-radius: 4px;
margin-bottom: 8px;
}
.skeleton-news-article .skeleton-news-body {
height: 12px;
border-radius: 4px;
margin-bottom: 5px;
}
/* Fade-in for real content replacing skeletons */
.skeleton-fade-in {
animation: skeletonFadeIn 0.25s ease-out;
}
@keyframes skeletonFadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
/* ββ Leaderboard Table ββ */
.community-lb-data {
width: 100%;
border-collapse: collapse;
font-size: 0.9rem;
}
.community-lb-data th {
text-align: left;
padding: 8px 6px;
border-bottom: 2px solid #e0e0e0;
font-weight: 600;
font-size: 0.8rem;
text-transform: uppercase;
color: #666;
white-space: nowrap;
}
body.dark-mode .community-lb-data th {
border-bottom-color: #3a4a5e;
color: #8a95a0;
}
.community-lb-data td {
padding: 8px 6px;
border-bottom: 1px solid #f0f0f0;
vertical-align: middle;
}
body.dark-mode .community-lb-data td {
border-bottom-color: #2a3a4e;
}
.community-lb-row {
cursor: pointer;
transition: background 0.15s;
}
.community-lb-row:hover {
background: rgba(59, 130, 246, 0.06);
}
body.dark-mode .community-lb-row:hover {
background: rgba(59, 130, 246, 0.12);
}
.rank-col {
width: 40px;
text-align: center;
font-weight: 700;
color: #555;
}
body.dark-mode .rank-col {
color: #aab;
}
.player-col {
min-width: 120px;
}
.community-player-cell {
display: flex;
align-items: center;
gap: 8px;
}
.community-avatar {
width: 28px;
height: 28px;
border-radius: 50%;
flex-shrink: 0;
object-fit: cover;
}
.community-username {
font-weight: 500;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Tier badges */
.tier-badge {
display: inline-block;
padding: 2px 8px;
border-radius: 10px;
font-size: 0.75rem;
font-weight: 600;
text-transform: capitalize;
}
.tier-badge.tier-diamond { background: #e3f0ff; color: #1a6dd4; }
.tier-badge.tier-platinum { background: #ede8f5; color: #6b4ea0; }
.tier-badge.tier-gold { background: #fff8e1; color: #b8860b; }
.tier-badge.tier-silver { background: #f0f0f0; color: #666; }
.tier-badge.tier-bronze { background: #fbe9e2; color: #a0522d; }
.tier-badge.tier-unranked { background: #f5f5f5; color: #999; }
body.dark-mode .tier-badge.tier-diamond { background: #1a3550; color: #6db3f8; }
body.dark-mode .tier-badge.tier-platinum { background: #2d234a; color: #b19cd9; }
body.dark-mode .tier-badge.tier-gold { background: #3a3018; color: #daa520; }
body.dark-mode .tier-badge.tier-silver { background: #2a2a2a; color: #aaa; }
body.dark-mode .tier-badge.tier-bronze { background: #3a2518; color: #cd853f; }
body.dark-mode .tier-badge.tier-unranked { background: #222; color: #777; }
/* ββ Leaderboard table enhancements ββ */
.community-lb-data {
border-radius: 10px;
overflow: hidden;
}
.community-lb-data thead tr {
background: linear-gradient(135deg, #f8f9fb 0%, #eef1f5 100%);
}
body.dark-mode .community-lb-data thead tr {
background: linear-gradient(135deg, #1e2a3a 0%, #253344 100%);
}
.community-lb-row:nth-child(even) {
background: rgba(0, 0, 0, 0.02);
}
body.dark-mode .community-lb-row:nth-child(even) {
background: rgba(255, 255, 255, 0.02);
}
/* Hide W/L column on mobile */
@media (max-width: 520px) {
.wl-col {
display: none;
}
}
/* ββ Player Search Results ββ */
.community-player-list {
display: flex;
flex-direction: column;
gap: 8px;
}
.community-player-card {
display: flex;
align-items: center;
gap: 12px;
padding: 12px;
border-radius: 10px;
background: #fff;
border: 1px solid #e8e8e8;
cursor: pointer;
transition: box-shadow 0.15s, border-color 0.15s;
}
.community-player-card:hover {
border-color: #3b82f6;
box-shadow: 0 2px 8px rgba(59, 130, 246, 0.12);
}
body.dark-mode .community-player-card {
background: #1e2a3a;
border-color: #2e3e52;
}
body.dark-mode .community-player-card:hover {
border-color: #3b82f6;
}
.community-avatar-wrap {
width: 40px;
height: 40px;
border-radius: 50%;
overflow: hidden;
flex-shrink: 0;
background: #eee;
}
.community-avatar-wrap svg {
width: 100%;
height: 100%;
}
.community-player-info {
flex: 1;
min-width: 0;
display: flex;
align-items: center;
gap: 8px;
}
.community-player-name {
font-weight: 600;
font-size: 1rem;
}
.community-friend-badge {
font-size: 0.75rem;
padding: 2px 8px;
border-radius: 10px;
background: #dcfce7;
color: #16a34a;
font-weight: 500;
}
body.dark-mode .community-friend-badge {
background: #14532d;
color: #86efac;
}
.community-view-btn {
flex-shrink: 0;
padding: 6px 14px !important;
font-size: 0.85rem !important;
}
/* ββ Profile Badge Count ββ */
.profile-badge-count {
font-size: 0.8rem;
font-weight: 500;
color: #888;
margin-left: 8px;
}
body.dark-mode .profile-badge-count {
color: #8a95a0;
}
/* ββ Profile Daily Podium ββ */
.profile-podium-row {
display: flex;
justify-content: center;
gap: 80px;
padding: 8px 0;
}
.profile-podium-item {
display: flex;
flex-direction: column;
align-items: center;
min-width: 70px;
}
.profile-podium-medal {
font-size: 2.8rem;
line-height: 1;
margin-bottom: 4px;
}
.profile-podium-count {
font-weight: 700;
font-size: 1.3rem;
color: #1a1a2e;
}
body.dark-mode .profile-podium-count {
color: #e0e6ed;
}
.profile-podium-label {
font-size: 0.7rem;
text-transform: uppercase;
color: #888;
letter-spacing: 0.5px;
}
/* ββ Standings Table ββ */
.community-standings-table {
width: 100%;
border-collapse: collapse;
font-size: 0.85rem;
}
.community-standings-table th {
text-align: left;
padding: 8px 6px;
border-bottom: 2px solid #e0e0e0;
font-weight: 600;
font-size: 0.75rem;
text-transform: uppercase;
color: #666;
white-space: nowrap;
}
body.dark-mode .community-standings-table th {
border-bottom-color: #3a4a5e;
color: #8a95a0;
}
.community-standings-table td {
padding: 8px 6px;
border-bottom: 1px solid #f0f0f0;
}
body.dark-mode .community-standings-table td {
border-bottom-color: #2a3a4e;
}
.standings-rank {
font-weight: 600;
white-space: nowrap;
}
.standings-total {
font-weight: 400;
font-size: 0.75em;
color: #999;
}
body.dark-mode .standings-total {
color: #6a7580;
}
.standings-group-row th {
text-align: left;
padding: 8px 6px;
border-bottom: 2px solid #e0e0e0;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
white-space: nowrap;
color: #666;
}
.standings-group-row-gap th {
padding-top: 36px;
}
.standings-group-row th.standings-group-header {
font-size: 0.8rem;
font-weight: 700;
letter-spacing: 0.04em;
color: #4a90d9;
}
body.dark-mode .standings-group-row th {
border-bottom-color: #3a4a5e;
color: #8a95a0;
}
body.dark-mode .standings-group-row th.standings-group-header {
color: #5ba0e8;
}
/* ββ Responsive ββ */
@media (max-width: 600px) {
.community-lb-data,
.community-standings-table {
font-size: 0.8rem;
}
.community-lb-data th,
.community-lb-data td,
.community-standings-table th,
.community-standings-table td {
padding: 6px 4px;
}
.profile-podium-row {
gap: 16px;
}
.standings-group-row-gap th {
padding-top: 36px;
}
}