/* CSS Variables */
:root {
    --board-size: 1040px;
    --board-scale: 1;
    --header-height: 50px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { 
    font-family: 'Segoe UI', sans-serif; 
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); 
    min-height: 100vh;
    height: 100vh;
    overflow: hidden;
}

.header { 
    background: white; 
    padding: 12px 20px; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    height: 60px;
    flex-shrink: 0;
}
.header h1 { color: #333; font-size: 22px; }
.status { padding: 6px 14px; border-radius: 20px; font-size: 13px; font-weight: bold; }
.status.connected { background: #00C851; color: white; }
.status.disconnected { background: #ff4444; color: white; }

.auth-indicator { padding: 6px 14px; border-radius: 20px; font-size: 13px; font-weight: bold; display: flex; align-items: center; gap: 8px; }
.auth-indicator.authenticated { background: #667eea; color: white; }
.auth-indicator.guest { background: #ffa726; color: white; }

/* Language Selector - Custom Dropdown */
.lang-dropdown {
    position: relative;
    display: inline-block;
}

.lang-dropdown-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
    border: none;
    background: #f0f0f0;
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
    color: #333;
    transition: background 0.2s;
}

.lang-dropdown-btn:hover {
    background: #e0e0e0;
}

.lang-flag {
    width: 20px;
    height: 14px;
    object-fit: cover;
    border-radius: 2px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

.lang-arrow {
    font-size: 10px;
    color: #666;
    margin-left: 2px;
}

.lang-dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 4px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    min-width: 140px;
    z-index: 1000;
    display: none;
    overflow: hidden;
}

.lang-dropdown-menu.show {
    display: block;
}

.lang-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    cursor: pointer;
    transition: background 0.2s;
    font-size: 13px;
}

.lang-option:hover {
    background: #f5f5f5;
}

.lang-option.selected {
    background: #e3f2fd;
}

/* Avatar styles */
.user-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255,255,255,0.5);
}

.user-avatar-fallback {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255,255,255,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: bold;
    color: white;
    border: 2px solid rgba(255,255,255,0.5);
}

/* Avatar piccolo nella lista giocatori */
.player-avatar-small {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
    vertical-align: middle;
    margin-right: 2px;
}

/* Auth Section Styles */
#authSection {
    max-height: calc(100vh - 100px);
    overflow-y: auto;
}

.auth-tabs {
    display: flex;
    margin-bottom: 20px;
    border-radius: 8px;
    overflow: hidden;
    border: 2px solid #667eea;
}

.auth-tab {
    flex: 1;
    padding: 12px;
    border: none;
    background: white;
    color: #667eea;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s;
}

.auth-tab.active {
    background: #667eea;
    color: white;
}

.auth-tab:hover:not(.active) {
    background: rgba(102, 126, 234, 0.1);
}

.auth-form {
    padding: 10px 0;
}

.form-group {
    margin-bottom: 15px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    color: #333;
}

.form-group input {
    width: 100%;
    padding: 12px;
    border: 2px solid #ddd;
    border-radius: 8px;
    font-size: 16px;
    transition: border-color 0.2s;
}

.form-group input:focus {
    border-color: #667eea;
    outline: none;
}

.auth-error {
    color: #ff4444;
    font-size: 14px;
    margin-top: 10px;
    text-align: center;
    min-height: 20px;
}

.auth-success {
    background: linear-gradient(135deg, #00C851 0%, #007E33 100%);
    color: white;
    font-size: 14px;
    margin-top: 15px;
    padding: 15px;
    border-radius: 8px;
    text-align: center;
    font-weight: bold;
    box-shadow: 0 2px 10px rgba(0, 200, 81, 0.3);
    animation: successPulse 2s ease-in-out infinite;
    display: none; /* Hidden by default, shown via JS */
}

.auth-success.visible {
    display: block;
}

@keyframes successPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.02); }
}

.auth-divider {
    display: flex;
    align-items: center;
    margin: 20px 0;
    color: #999;
}

.auth-divider::before,
.auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #ddd;
}

.auth-divider span {
    padding: 0 15px;
    font-size: 14px;
}

/* OAuth Buttons */
.oauth-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 15px 0;
}

.oauth-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 20px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    width: 100%;
}

.oauth-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.oauth-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.oauth-btn svg {
    width: 20px;
    height: 20px;
}

.oauth-btn.google {
    background: #fff;
    color: #333;
    border: 1px solid #ddd;
}

.oauth-btn.google:hover {
    background: #f8f8f8;
}

.oauth-btn.facebook {
    background: #1877F2;
    color: white;
}

.oauth-btn.facebook:hover {
    background: #166FE5;
}

.oauth-btn.twitch {
    background: #9146FF;
    color: white;
}

.oauth-btn.twitch:hover {
    background: #7C3AED;
}

.oauth-btn.discord {
    background: #5865F2;
    color: white;
}

.oauth-btn.discord:hover {
    background: #4752C4;
}

.btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.container { 
    max-width: 1800px; 
    margin: 0 auto; 
    padding: 15px; 
    height: calc(100vh - 60px);
    overflow: hidden;
}
.container.game-active {
    max-width: none;
    padding: 10px;
}

#lobbySection, #roomSection {
    max-height: calc(100vh - 100px);
    overflow-y: auto;
}

#gameSection {
    height: 100%;
    overflow: hidden;
}
.card { background: white; border-radius: 10px; padding: 20px; margin-bottom: 20px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); }
.card h2 { margin-bottom: 15px; color: #333; border-bottom: 2px solid #667eea; padding-bottom: 10px; }
.card h3 { margin: 15px 0 10px; color: #555; }

input, select { width: 100%; padding: 12px; border: 2px solid #ddd; border-radius: 8px; font-size: 16px; margin-bottom: 10px; }
input:focus, select:focus { border-color: #667eea; outline: none; }

.btn { padding: 12px 24px; border: none; border-radius: 8px; font-size: 16px; font-weight: bold; cursor: pointer; transition: all 0.2s; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.2); }
.btn:disabled { background: #ccc !important; cursor: not-allowed; transform: none; box-shadow: none; }
.btn-primary { background: #667eea; color: white; }
.btn-success { background: #00C851; color: white; }
.btn-warning { background: #ffbb33; color: #333; }
.btn-danger { background: #ff4444; color: white; }
.btn-secondary { background: #666; color: white; }
.btn-bot { background: #9c27b0; color: white; }
.btn-info { background: #17a2b8; color: white; }
.btn-sm { padding: 6px 12px; font-size: 12px; }

.game-exit-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }

/* Turn Timer */
.turn-timer {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: 15px;
    padding: 4px 10px;
    background: #e3f2fd;
    border-radius: 15px;
    font-weight: bold;
    font-size: 14px;
}

.turn-timer.warning {
    background: #fff3e0;
    color: #e65100;
    animation: pulse 1s infinite;
}

.turn-timer.critical {
    background: #ffebee;
    color: #c62828;
    animation: pulse 0.5s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

.timer-icon {
    font-size: 16px;
}

.room-list { max-height: 300px; overflow-y: auto; }
.room-item { background: #f8f9fa; padding: 15px; border-radius: 8px; margin-bottom: 10px; border-left: 4px solid #667eea; display: flex; justify-content: space-between; align-items: center; }
.room-item.in-progress { border-left-color: #ff9800; }
.room-info h4 { margin-bottom: 5px; }
.room-info p { color: #666; font-size: 14px; }
.room-actions { display: flex; gap: 8px; }

.player-list { display: flex; flex-wrap: wrap; gap: 10px; }
.player-tag { 
    background: #e3f2fd; 
    padding: 6px 12px 6px 6px; 
    border-radius: 20px; 
    font-size: 14px; 
    display: inline-flex; 
    align-items: center; 
    gap: 8px;
}
.player-tag.host { background: #fff3e0; }
.player-tag.bot { background: #f3e5f5; }
.player-tag.you { background: #e8f5e9; font-weight: bold; }
.player-tag .user-avatar,
.player-tag .user-avatar-fallback { 
    flex-shrink: 0;
}
.player-tag .bot-avatar {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}
.player-tag .player-name {
    white-space: nowrap;
}

/* =============================================================================
   COLLAPSIBLE PANELS
   ============================================================================= */
.collapsible-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    padding: 5px 0;
    margin: -5px 0 5px 0;
}

.collapsible-header h3,
.collapsible-header h4 {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 5px;
}

.collapse-toggle {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #f0f0f0;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    transition: transform 0.2s, background 0.2s;
    flex-shrink: 0;
}

.collapse-toggle:hover {
    background: #e0e0e0;
}

.collapsible-content {
    overflow: hidden;
    transition: max-height 0.3s ease-out, opacity 0.2s;
    max-height: 1000px;
    opacity: 1;
}

.collapsible-content.collapsed {
    max-height: 0;
    opacity: 0;
}

.collapse-toggle.collapsed {
    transform: rotate(-90deg);
}

.game-layout { 
    display: grid; 
    grid-template-columns: 1fr 360px;
    grid-template-rows: 1fr;
    gap: 10px; 
    height: calc(100vh - var(--header-height, 60px));
    max-height: calc(100vh - var(--header-height, 60px));
    overflow: hidden;
    padding: 5px;
}

/* Mobile responsive rules are in responsive.css */

/* ============================================================
   GAME BOARD
   ============================================================ */

.board-container {
    background: #c0e3e2;
    border-radius: 10px;
    padding: 5px;
    overflow: hidden;
    font-family: 'Hammersmith One', sans-serif;
    color: #2e464d;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    min-width: 0;
}

.table {
    display: block;
    position: relative;
    width: var(--board-size, 1040px);
    height: var(--board-size, 1040px);
    border-radius: 14px;
    transform-origin: center center;
    transform: scale(var(--board-scale, 1));
    flex-shrink: 0;
}

.side-panel {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 0;
    height: 100%;
    overflow: hidden;
}

.side-panel > .card {
    flex-shrink: 0;
    margin-bottom: 0;
}

/* Card Giocatori - si adatta allo spazio disponibile */
.side-panel > .card.players-card {
    flex: 0 1 auto;
    min-height: 100px;
    max-height: none;
    overflow-y: auto;
}

.game-exit-actions {
    flex-shrink: 0;
    margin-top: auto;
}

.frame {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    padding: 10px;
    border-radius: 14px;
    background: #2e464d;
}

.frame > div {
    display: block;
    position: absolute;
    background: #b2e0c8;
}

/* Corners */
.frame > div.corner { width: 120px; height: 120px; }
.frame > div.corner.br { border-radius: 4px 1px 8px 1px; }
.frame > div.corner.bl { border-radius: 1px 4px 1px 8px; }
.frame > div.corner.tl { border-radius: 8px 1px 4px 1px; }
.frame > div.corner.tr { border-radius: 1px 8px 1px 4px; }

/* Tiles */
.frame > div.bottom, .frame > div.top { width: 82px; height: 120px; }
.frame > div.left, .frame > div.right { width: 120px; height: 82px; }
.frame > div.bottom { border-radius: 4px 4px 1px 1px; }
.frame > div.top { border-radius: 1px 1px 4px 4px; }
.frame > div.left { border-radius: 1px 4px 4px 1px; }
.frame > div.right { border-radius: 4px 1px 1px 4px; }

.frame > div .inside {
    position: absolute;
    top: 0; left: 0;
    width: 82px;
    height: 120px;
    padding: 5px;
    text-align: center;
}

.frame > div .inside h2, .frame > div .inside strong {
    width: 70px;
    margin: 8px auto 14px auto;
    font-size: 10px;
    line-height: 12px;
    text-transform: uppercase;
    font-weight: bold;
}

.frame > div .inside strong {
    position: absolute;
    left: 0; bottom: 10px;
    width: 100%;
    margin: 0;
}

.frame > div .inside span {
    display: block;
    font-size: 40px;
    line-height: 44px;
}

.frame > div .inside:before {
    content: "";
    display: block;
    width: 100%;
    height: 24px;
    border-radius: 2px 2px 1px 1px;
}

/* Colors */
.frame > div.brown .inside:before { background: #894c4b; }
.frame > div.sky .inside:before { background: #46bfff; }
.frame > div.pink .inside:before { background: #f89aa9; }
.frame > div.orange .inside:before { background: #eda13d; }
.frame > div.red .inside:before { background: #d05858; }
.frame > div.green .inside:before { background: #079a97; }
.frame > div.yellow .inside:before { background: #e9c33d; }
.frame > div.blue .inside:before { background: #4b5c99; }
.frame > div.none .inside:before { display: none; }

/* Highlight casella giocatore corrente */
.frame > div.current-player-cell {
    animation: pulse-highlight 1.5s ease-in-out infinite;
    z-index: 20;
}

.frame > div.current-player-cell::after {
    content: '';
    position: absolute;
    inset: -3px;
    border: 3px solid #FFD700;
    border-radius: inherit;
    box-shadow: 0 0 15px #FFD700, 0 0 30px rgba(255, 215, 0, 0.5), inset 0 0 10px rgba(255, 215, 0, 0.3);
    pointer-events: none;
    animation: glow-pulse 1.5s ease-in-out infinite;
}

@keyframes pulse-highlight {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.02); }
}

@keyframes glow-pulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 15px #FFD700, 0 0 30px rgba(255, 215, 0, 0.5); }
    50% { opacity: 0.7; box-shadow: 0 0 25px #FFD700, 0 0 50px rgba(255, 215, 0, 0.7); }
}

/* Owner indicator - default per lato BOTTOM (caselle 1-9) */
/* Il pallino va all'estremità esterna (bottom per caselle bottom) */
.frame > div .owner-indicator {
    position: absolute;
    bottom: 2px;
    left: 50%;
    transform: translateX(-50%);
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid white;
    box-shadow: 0 0 3px rgba(0,0,0,0.5);
    z-index: 10;
}

/* Houses - default per lato BOTTOM (caselle 1-9) */
/* Le case vanno sul colore (top per caselle bottom) */
.frame > div .houses-container {
    position: absolute;
    top: 2px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 1px;
    z-index: 10;
}

.frame > div .house {
    width: 8px;
    height: 8px;
    background: #228B22;
    border: 1px solid #006400;
    border-radius: 1px;
}

.frame > div .hotel {
    width: 14px;
    height: 10px;
    background: #cc0000;
    border: 1px solid #990000;
    border-radius: 2px;
}

/* Lato SINISTRO (caselle 11-19) */
/* Colore a destra, pallino all'estremità sinistra, case sul colore (destra) */
.frame > div.left .houses-container {
    top: 50%;
    left: auto;
    right: 2px;
    transform: translateY(-50%);
    flex-direction: column;
}
.frame > div.left .owner-indicator {
    bottom: 50%;
    left: 2px;
    right: auto;
    transform: translateY(50%);
}

/* Lato DESTRO (caselle 31-39) */
/* Colore a sinistra, pallino all'estremità destra, case sul colore (sinistra) */
.frame > div.right .houses-container {
    top: 50%;
    left: 2px;
    right: auto;
    transform: translateY(-50%);
    flex-direction: column;
}
.frame > div.right .owner-indicator {
    bottom: 50%;
    left: auto;
    right: 2px;
    transform: translateY(50%);
}

/* Lato SUPERIORE (caselle 21-29) */
/* Colore in basso, pallino all'estremità superiore, case sul colore (basso) */
.frame > div.top .houses-container {
    top: auto;
    bottom: 2px;
    left: 50%;
    transform: translateX(-50%);
    flex-direction: row;
}
.frame > div.top .owner-indicator {
    bottom: auto;
    top: 2px;
    left: 50%;
    transform: translateX(-50%);
}

/* Mortgaged */
.frame > div.mortgaged { opacity: 0.6; filter: grayscale(50%); }
.frame > div .mortgage-indicator {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 20px;
    z-index: 15;
    text-shadow: 0 0 3px white;
}

/* Clickable tiles */
.frame > div[style*="cursor: pointer"]:hover {
    filter: brightness(1.1);
    box-shadow: 0 0 10px rgba(0,0,0,0.3);
}

/* Center with CORRECT font */
.frame > div.center {
    position: relative;
    border-radius: 4px;
    background: #95cfad;
}

.frame > div.center .logo {
    display: block;
    position: absolute;
    top: calc(50% - 75px);
    left: calc(50% - 300px);
    width: 650px;
    height: 150px;
    text-align: center;
    line-height: 150px;
    font-family: 'Hammersmith One', sans-serif;
    font-size: 105px;
    text-transform: uppercase;
    color: #fff;
    transform: rotate(-45deg);
    border: 5px solid #d05858;
    border-radius: 12px;
    background: #d05858;
}

.frame > div.center .logo:before {
    content: "";
    display: block;
    position: absolute;
    top: 0; left: 0;
    width: calc(100% - 6px);
    height: calc(100% - 6px);
    border: 3px solid #fff;
    border-radius: 7px;
}

.frame > div.center .logo:after {
    content: "😼";
    display: block;
    position: absolute;
    top: -50px;
    left: calc(50% - 6px);
    width: 100px;
    height: 100px;
    font-size: 50px;
    line-height: 100px;
}

/* Tile rotations */
.frame > div.top .inside {
    transform: rotate(180deg);
    transform-origin: 41px 60px;
}

.frame > div.left .inside {
    transform: rotate(90deg);
    transform-origin: 60px 60px;
}

.frame > div.right .inside {
    transform: rotate(-90deg);
    transform-origin: 41px 41px;
}

/* Corner content */
.frame > div.corner div {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    text-transform: uppercase;
}

.frame > div.corner div span { display: block; font-size: 30px; }
.frame > div.corner.tl div { top: -5px; right: 5px; transform: rotate(135deg); }
.frame > div.corner.tr div { top: -5px; left: 5px; transform: rotate(-135deg); }
.frame > div.corner.bl div { top: 5px; right: 5px; transform: rotate(45deg); }
.frame > div.corner.br div { top: 5px; left: 5px; font-size: 30px; transform: rotate(-45deg); }

/* ============================================================
   TOKEN SELECTOR IN LOBBY
   ============================================================ */

.token-selector {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin: 15px 0;
    padding: 10px;
    background: rgba(102, 126, 234, 0.1);
    border-radius: 10px;
}

.token-option {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 3px solid #ddd;
    background: white;
    font-size: 24px;
    line-height: 44px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
}

.token-option:hover {
    transform: scale(1.15);
    border-color: #667eea;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.token-option.selected {
    border-color: #667eea;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.5);
}

.token-option.avatar-token {
    padding: 0;
    overflow: hidden;
}

.token-option.avatar-token img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.token-option.avatar-token.selected img {
    /* Quando selezionato, l'immagine ha un leggero overlay */
    filter: brightness(1.1);
}

.token-option.taken {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
}

/* ============================================================
   PLAYER TOKENS WITH ANIMATION
   ============================================================ */

.player-token {
    position: absolute;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 3px solid white;
    font-size: 16px;
    line-height: 26px;
    text-align: center;
    z-index: 100;
    box-shadow: 0 3px 10px rgba(0,0,0,0.4);
    font-weight: bold;
    cursor: pointer;
    /* ANIMATION - movimento fluido senza bounce */
    transition: left 0.5s ease-in-out, 
                top 0.5s ease-in-out,
                transform 0.2s ease,
                box-shadow 0.2s ease;
    overflow: hidden;
}

/* Avatar immagine nei token sulla board */
.player-token .token-avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}

.player-token:hover {
    transform: scale(1.3) translateY(-3px);
    z-index: 150;
    box-shadow: 0 8px 25px rgba(0,0,0,0.5);
}

.player-token.moving {
    z-index: 200;
    transform: scale(1.15);
    box-shadow: 0 8px 25px rgba(0,0,0,0.5);
}

/* Indicatore posizione partenza - cerchio che pulsa e sfuma */
.token-start-marker {
    position: absolute;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 4px solid;
    background: transparent;
    pointer-events: none;
    z-index: 90;
    animation: start-marker-pulse 2s ease-out forwards;
    transform: translate(-4px, -4px);
}

@keyframes start-marker-pulse {
    0% { 
        opacity: 1; 
        transform: translate(-4px, -4px) scale(1); 
        box-shadow: 0 0 0 0 currentColor;
    }
    30% { 
        opacity: 0.8; 
        transform: translate(-4px, -4px) scale(1.3); 
        box-shadow: 0 0 20px 5px currentColor;
    }
    100% { 
        opacity: 0; 
        transform: translate(-4px, -4px) scale(1.8); 
        box-shadow: 0 0 30px 10px transparent;
    }
}

/* Token tooltip */
.player-token .token-tooltip {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(5px);
    background: rgba(0,0,0,0.9);
    color: white;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 12px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
    margin-bottom: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

.player-token:hover .token-tooltip,
.player-token.show-name .token-tooltip {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ============================================================
   DICE ANIMATIONS
   ============================================================ */

.dice-container { text-align: center; margin: 15px 0; }
.dice { 
    font-size: 48px; 
    display: inline-block;
    transition: transform 0.3s ease;
}

.dice.rolling {
    animation: dice-roll 0.6s ease-out;
}

@keyframes dice-roll {
    0% { transform: rotate(0deg) scale(1); }
    25% { transform: rotate(180deg) scale(1.2); }
    50% { transform: rotate(360deg) scale(0.9); }
    75% { transform: rotate(540deg) scale(1.1); }
    100% { transform: rotate(720deg) scale(1); }
}

/* ============================================================
   BOARD CELL ANIMATIONS
   ============================================================ */

.frame > div {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.frame > div:hover {
    transform: scale(1.05);
    z-index: 15;
    box-shadow: 0 5px 20px rgba(0,0,0,0.3);
}

/* Disabilita hover sul centro del tabellone */
.frame > div.center,
.center {
    pointer-events: none;
}
.center:hover {
    transform: none !important;
    box-shadow: none !important;
}

.frame > div.property-bought {
    animation: property-flash 0.8s ease-out;
}

@keyframes property-flash {
    0% { box-shadow: 0 0 0 0 rgba(0, 200, 81, 0.8); }
    50% { box-shadow: 0 0 30px 10px rgba(0, 200, 81, 0.6); transform: scale(1.08); }
    100% { box-shadow: 0 0 0 0 rgba(0, 200, 81, 0); transform: scale(1); }
}

.frame > div.rent-paid {
    animation: rent-flash 0.6s ease-out;
}

@keyframes rent-flash {
    0% { box-shadow: 0 0 0 0 rgba(244, 67, 54, 0.8); }
    50% { box-shadow: 0 0 20px 5px rgba(244, 67, 54, 0.6); }
    100% { box-shadow: 0 0 0 0 rgba(244, 67, 54, 0); }
}

/* ============================================================
   PLAYER LIST ANIMATIONS
   ============================================================ */

.game-player {
    transition: all 0.3s ease;
}

.game-player.current {
    animation: current-player-pulse 2s ease-in-out infinite;
}

@keyframes current-player-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(102, 126, 234, 0.4); }
    50% { box-shadow: 0 0 15px 5px rgba(102, 126, 234, 0.2); }
}

/* ============================================================
   BUTTON ANIMATIONS
   ============================================================ */

.action-buttons .btn {
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.action-buttons .btn:hover:not(:disabled) {
    transform: translateY(-2px) scale(1.02);
}

.action-buttons .btn:active:not(:disabled) {
    transform: translateY(1px) scale(0.98);
}

/* ============================================================
   GAME UI
   ============================================================ */

.current-turn {
    background: #fff3e0;
    padding: 15px;
    border-radius: 8px;
    text-align: center;
    margin-bottom: 15px;
    font-size: 18px;
}
.current-turn.my-turn {
    background: #e8f5e9;
    border: 2px solid #4caf50;
    animation: pulse 1s infinite;
}
@keyframes pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.4); }
    50% { box-shadow: 0 0 0 10px rgba(76, 175, 80, 0); }
}

.action-buttons { display: flex; flex-direction: column; gap: 10px; }
.action-buttons .btn { width: 100%; }

.game-player {
    background: #f5f5f5;
    padding: 12px;
    border-radius: 8px;
    margin-bottom: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.game-player.current { background: #fff3e0; border: 2px solid #ff9800; }
.game-player.bankrupt { opacity: 0.4; text-decoration: line-through; }
.game-player .name { display: flex; align-items: center; gap: 10px; }
.game-player .name .user-avatar,
.game-player .name .user-avatar-fallback { flex-shrink: 0; border-radius: 50%; }
.game-player .name .player-avatar-game.bot-avatar { 
    width: 32px; 
    height: 32px; 
    display: inline-flex; 
    align-items: center; 
    justify-content: center; 
    font-size: 20px;
    background: #f3e5f5;
    border-radius: 50%;
}
.game-player .name .player-name-text { white-space: nowrap; font-weight: 500; }

/* Balance container con animazione */
.game-player .balance-container {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    position: relative;
}

.game-player .balance { 
    font-weight: bold; 
    color: #4caf50; 
    font-size: 16px;
    transition: transform 0.3s ease, color 0.3s ease;
}

.game-player .balance.increasing {
    color: #00C851;
    animation: balance-pulse-up 0.5s ease;
}

.game-player .balance.decreasing {
    color: #ff4444;
    animation: balance-pulse-down 0.5s ease;
}

@keyframes balance-pulse-up {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

@keyframes balance-pulse-down {
    0% { transform: scale(1); }
    50% { transform: scale(0.9); }
    100% { transform: scale(1); }
}

.game-player .balance-change {
    font-size: 15px;
    font-weight: bold;
    opacity: 0;
    transform: translateY(-5px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    position: absolute;
    top: -20px;
    right: 0;
    white-space: nowrap;
    text-shadow: 0 1px 3px rgba(0,0,0,0.3);
    padding: 2px 6px;
    border-radius: 4px;
}

.game-player .balance-change.show {
    opacity: 1;
    transform: translateY(0);
    animation: balance-change-pop 0.4s ease-out;
}

@keyframes balance-change-pop {
    0% { transform: translateY(-10px) scale(0.5); opacity: 0; }
    50% { transform: translateY(2px) scale(1.1); }
    100% { transform: translateY(0) scale(1); opacity: 1; }
}

.game-player .balance-change.gain {
    color: #00C851;
    background: rgba(0, 200, 81, 0.15);
}

.game-player .balance-change.loss {
    color: #ff4444;
    background: rgba(255, 68, 68, 0.15);
}

.spectator-banner { background: #9c27b0; color: white; padding: 12px; text-align: center; border-radius: 8px; margin-bottom: 15px; font-size: 16px; }

.hidden { display: none !important; }
.lobby-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 800px) { .lobby-grid { grid-template-columns: 1fr; } }

/* ============================================================
   PROPERTY PANEL & MODAL
   ============================================================ */

.modal-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
}

.modal {
    background: white;
    border-radius: 12px;
    padding: 25px;
    max-width: 500px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 10px 40px rgba(0,0,0,0.3);
}

.modal h2 {
    margin-bottom: 20px;
    color: #333;
    border-bottom: 2px solid #667eea;
    padding-bottom: 10px;
}

.modal-close {
    float: right;
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #666;
}

.modal-close:hover { color: #333; }

.property-card {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 10px;
    border-left: 4px solid #ccc;
}

.property-card.brown { border-left-color: #894c4b; }
.property-card.sky { border-left-color: #46bfff; }
.property-card.pink { border-left-color: #f89aa9; }
.property-card.orange { border-left-color: #eda13d; }
.property-card.red { border-left-color: #d05858; }
.property-card.green { border-left-color: #079a97; }
.property-card.yellow { border-left-color: #e9c33d; }
.property-card.blue { border-left-color: #4b5c99; }
.property-card.railroad { border-left-color: #333; }
.property-card.utility { border-left-color: #666; }

.property-card.mortgaged {
    opacity: 0.6;
    background: #eee;
}

.property-card .prop-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.property-card .prop-name {
    font-weight: bold;
    font-size: 14px;
}

.property-card .prop-houses {
    font-size: 12px;
    color: #666;
}

.property-card .prop-actions {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}

.property-card .prop-actions .btn {
    padding: 5px 10px;
    font-size: 12px;
}

.monopoly-badge {
    background: #4caf50;
    color: white;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 10px;
    margin-left: 8px;
}

.btn-small {
    padding: 6px 12px !important;
    font-size: 12px !important;
}

.property-info {
    font-size: 12px;
    color: #666;
    margin-top: 5px;
}

.houses-display {
    display: inline-flex;
    gap: 2px;
    margin-left: 5px;
}

.houses-display .house-icon {
    width: 10px;
    height: 10px;
    background: #228B22;
    border-radius: 2px;
}

.houses-display .hotel-icon {
    width: 14px;
    height: 10px;
    background: #cc0000;
    border-radius: 2px;
}

.current-rent {
    background: #e8f5e9;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: bold;
    color: #2e7d32;
}

/* ============================================================
   TRADE SYSTEM
   ============================================================ */

/* Custom Select with Avatar Support */
.custom-select-wrapper {
    position: relative;
    width: 100%;
}

.custom-select {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    background: #fff;
    border: 2px solid #ddd;
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 0.2s;
}

.custom-select:hover {
    border-color: #667eea;
}

.custom-select.open {
    border-color: #667eea;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.custom-select-value {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
}

.custom-select-arrow {
    font-size: 10px;
    color: #666;
    transition: transform 0.2s;
}

.custom-select.open .custom-select-arrow {
    transform: rotate(180deg);
}

.custom-select-options {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border: 2px solid #667eea;
    border-top: none;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    max-height: 200px;
    overflow-y: auto;
    z-index: 100;
}

.custom-select-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    cursor: pointer;
    transition: background 0.15s;
}

.custom-select-option:hover {
    background: #f0f4ff;
}

.custom-select-option:last-child {
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
}

.custom-select-option .player-balance {
    margin-left: auto;
    color: #2e7d32;
    font-weight: 600;
    font-size: 13px;
}

.trade-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.trade-column {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 15px;
}

.trade-column.my-side {
    border: 2px solid #4caf50;
}

.trade-column.their-side {
    border: 2px solid #2196f3;
}

.trade-column h4 {
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid #ddd;
    display: flex;
    align-items: center;
    gap: 8px;
}

.trade-header-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.trade-header-avatar .user-avatar,
.trade-header-avatar .user-avatar-fallback {
    border-radius: 50%;
}

.trade-header-avatar .trade-avatar.bot-avatar {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    background: #f3e5f5;
    border-radius: 50%;
    border: 3px solid #9c27b0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.trade-props {
    max-height: 200px;
    overflow-y: auto;
    margin-bottom: 15px;
}

.trade-prop-item {
    display: flex;
    align-items: center;
    padding: 8px;
    background: white;
    border-radius: 6px;
    margin-bottom: 5px;
    cursor: pointer;
    transition: all 0.2s;
}

.trade-prop-item:hover {
    background: #e3f2fd;
}

.trade-prop-item.selected {
    background: #c8e6c9;
    border: 2px solid #4caf50;
}

.trade-prop-item input[type="checkbox"] {
    margin-right: 10px;
    width: 18px;
    height: 18px;
}

.trade-prop-color {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-right: 8px;
}

.trade-money-input {
    display: flex;
    align-items: center;
    gap: 10px;
}

.trade-money-input input {
    width: 120px;
    margin: 0;
}

.pending-trade {
    background: #fff3e0;
    border: 2px solid #ff9800;
    border-radius: 10px;
    padding: 15px;
    margin-bottom: 15px;
}

.pending-trade.incoming {
    background: #e3f2fd;
    border-color: #2196f3;
}

.pending-trade h4 {
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.trade-summary {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 10px;
    align-items: center;
    margin: 10px 0;
}

.trade-arrow {
    font-size: 24px;
    color: #666;
}

.trade-side {
    padding: 10px;
    background: #f5f5f5;
    border-radius: 6px;
}

.trade-side ul {
    margin: 5px 0;
    padding-left: 20px;
}

.trade-actions {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}

/* ============================================================
   AUCTION SYSTEM
   ============================================================ */

.auction-panel {
    background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
    border: 3px solid #ff9800;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 15px;
    animation: auction-glow 2s ease-in-out infinite;
}

@keyframes auction-glow {
    0%, 100% { box-shadow: 0 0 10px rgba(255, 152, 0, 0.3); }
    50% { box-shadow: 0 0 25px rgba(255, 152, 0, 0.6); }
}

.auction-panel h3 {
    color: #e65100;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.auction-property {
    background: white;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 15px;
    text-align: center;
}

.auction-property h4 {
    font-size: 20px;
    color: #333;
    margin-bottom: 5px;
}

.auction-current-bid {
    font-size: 28px;
    font-weight: bold;
    color: #4caf50;
    margin: 15px 0;
}

.auction-bidder {
    color: #666;
    margin-bottom: 15px;
}

.auction-bid-input {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
}

.auction-bid-input input {
    flex: 1;
    font-size: 18px;
    text-align: center;
}

.auction-actions {
    display: flex;
    gap: 10px;
}

.auction-actions .btn {
    flex: 1;
    padding: 12px;
    font-size: 16px;
}

.auction-participants {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #ddd;
}

.auction-participants h5 {
    margin-bottom: 10px;
    color: #666;
}

.auction-participant {
    display: inline-block;
    padding: 4px 10px;
    background: #e0e0e0;
    border-radius: 15px;
    margin: 2px;
    font-size: 12px;
}

.auction-participant.passed {
    opacity: 0.4;
    text-decoration: line-through;
}

.auction-participant.leading {
    background: #4caf50;
    color: white;
}

/* ==================== MOBILE RESPONSIVE ==================== */
/* Note: .game-layout responsive rules are in responsive.css */
@media (max-width: 1023px) {
    .board-container {
        min-height: 250px;
        max-height: 58vh;
        border-radius: 0;
        padding: 0;
    }
    
    .side-panel {
        height: auto;
        max-height: 40vh;
        overflow-y: auto;
        padding: 8px;
        background: rgba(255, 255, 255, 0.98);
    }
    
    .side-panel > .card {
        padding: 10px;
        margin-bottom: 5px;
    }
    
    .side-panel > .card h3 {
        font-size: 14px;
        margin-bottom: 8px;
    }
}

@media (max-width: 768px) {
    html, body {
        overflow-x: hidden;
    }
    
    .header {
        padding: 8px 12px;
        height: 50px;
    }
    .header h1 {
        font-size: 16px;
    }
    .header h1::before {
        font-size: 18px;
    }
    
    .container {
        padding: 8px;
        height: calc(100vh - 50px);
    }
    
    .container.game-active {
        padding: 0;
    }
    
    .card {
        padding: 10px;
        margin-bottom: 8px;
        border-radius: 8px;
    }
    
    .board-container {
        border-radius: 0;
        padding: 0;
    }
    
    /* Dadi compatti */
    .dice-container {
        margin: 8px 0;
    }
    .dice {
        font-size: 32px;
    }
    
    /* Turn info compatto */
    .current-turn {
        font-size: 12px;
        padding: 6px 10px;
    }
    
    /* Azioni compatte */
    .action-buttons {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 5px;
    }
    
    .action-buttons .btn {
        padding: 10px 8px;
        font-size: 12px;
    }
    
    /* Giocatori compatti */
    .game-player {
        padding: 6px 10px;
        font-size: 12px;
    }
        font-size: 12px;
    }
    
    /* Lobby mobile */
    .lobby-grid {
        grid-template-columns: 1fr !important;
    }
    
    /* Toast mobile */
    .toast-container {
        left: 10px;
        right: 10px;
        top: 60px;
        max-width: none;
    }
    
    .toast {
        padding: 10px 15px;
        font-size: 13px;
    }
    
    /* Modali mobile */
    .modal {
        width: 95% !important;
        max-width: none;
        max-height: 85vh;
        overflow-y: auto;
        margin: 10px;
    }
    
    .modal h2 {
        font-size: 18px;
    }
}

@media (max-width: 480px) {
    .header {
        padding: 6px 10px;
        height: 45px;
    }
    
    .header h1 {
        font-size: 14px;
    }
    
    .status, .auth-indicator {
        padding: 4px 8px;
        font-size: 10px;
    }
    
    .container {
        padding: 0;
        height: calc(100vh - 45px);
    }
    
    .board-container {
        max-height: 55vh;
    }
    
    .side-panel > .card.players-card {
        max-height: 120px;
    }
    
    /* Pulsanti più grandi per touch */
    .btn {
        padding: 12px 14px;
        font-size: 13px;
        min-height: 44px;
    }
    
    .action-buttons {
        grid-template-columns: 1fr;
    }
    
    .action-buttons .btn {
        padding: 12px;
        font-size: 13px;
    }
    
    /* Input più grandi */
    input, select {
        padding: 12px;
        font-size: 16px; /* Previene zoom su iOS */
        min-height: 44px;
    }
    
    /* Dadi piccoli */
    .dice {
        font-size: 28px;
    }
    
    /* Nascondi testo secondario */
    .side-panel > .card h3 {
        font-size: 12px;
        margin-bottom: 5px;
    }
    
    /* Spectator banner compatto */
    .spectator-banner {
        padding: 6px;
        font-size: 12px;
    }
}

/* Touch improvements */
@media (hover: none) and (pointer: coarse) {
    .btn {
        min-height: 44px;
        -webkit-tap-highlight-color: transparent;
    }
    
    .btn:hover {
        transform: none;
    }
    
    .btn:active {
        transform: scale(0.96);
        opacity: 0.9;
    }
    
    /* Disabilita hover su caselle per touch */
    .frame > div:hover {
        transform: none;
        box-shadow: none;
    }
    
    .frame > div:active {
        transform: scale(1.05);
    }
    
    /* Player token touch */
    .player-token:hover {
        transform: none;
    }
    
    .player-token:active {
        transform: scale(1.2);
    }
    
    /* Room items */
    .room-item:hover {
        transform: none;
    }
    
    .room-item:active {
        transform: scale(0.98);
        background: #f0f0f0;
    }
    
    /* Scrollbar nascosta su touch */
    .side-panel::-webkit-scrollbar,
    .players-card::-webkit-scrollbar {
        display: none;
    }
    
    .side-panel,
    .players-card {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
}

/* PWA standalone mode */
@media (display-mode: standalone) {
    .header {
        padding-top: env(safe-area-inset-top, 12px);
    }
    body {
        padding-bottom: env(safe-area-inset-bottom, 0);
    }
}

/* Install prompt banner */
.install-banner {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 15px 20px;
    z-index: 9999;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.3);
}
.install-banner.show {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
}
.install-banner button {
    background: white;
    color: #667eea;
    border: none;
    padding: 10px 20px;
    border-radius: 20px;
    font-weight: bold;
    cursor: pointer;
}
.install-banner .dismiss {
    background: transparent;
    color: white;
    font-size: 20px;
    padding: 5px 10px;
}

/* =============================================================================
   TOAST NOTIFICATIONS
   ============================================================================= */

/* =============================================================================
   TOAST NOTIFICATIONS
   ============================================================================= */

.toast-container {
    position: fixed;
    top: 80px;
    right: 20px;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 320px;
    width: 320px;
}

.toast {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 10px;
    background: #2a2a2a;
    color: #fff;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    border-left: 4px solid #667eea;
    animation: toastSlideIn 0.3s ease-out;
    font-size: 14px;
}

@keyframes toastSlideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.toast.hiding {
    animation: toastSlideOut 0.3s ease-in forwards;
}

@keyframes toastSlideOut {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

.toast-icon {
    font-size: 1.1em;
    flex-shrink: 0;
    line-height: 1;
}

.toast-content {
    flex: 1;
    min-width: 0;
}

.toast-title {
    font-weight: 600;
    color: #fff;
    margin-bottom: 2px;
    font-size: 13px;
}

.toast-message {
    color: #bbb;
    font-size: 12px;
    line-height: 1.3;
}

.toast-close {
    background: none;
    border: none;
    color: #888;
    font-size: 16px;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    transition: color 0.2s;
    flex-shrink: 0;
}

.toast-close:hover {
    color: #fff;
}

/* Toast Types */
.toast-success {
    background: linear-gradient(135deg, #1a3d1a, #2a4a2a);
    border-left-color: #4CAF50;
}

.toast-error {
    background: linear-gradient(135deg, #3d1a1a, #4a2a2a);
    border-left-color: #f44336;
}

.toast-warning {
    background: linear-gradient(135deg, #3d3a1a, #4a452a);
    border-left-color: #ff9800;
}

.toast-info {
    background: linear-gradient(135deg, #1a2a3d, #2a3a4a);
    border-left-color: #2196F3;
}

.toast-update {
    background: linear-gradient(135deg, #1a3d2a, #2a4a3a);
    border-left-color: #4CAF50;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-right: 40px;
}

.toast-dice {
    background: linear-gradient(135deg, #1a2a3d, #2a3a4a);
    border-left-color: #2196F3;
}

.toast-card {
    background: linear-gradient(135deg, #2d1a3d, #3a2a4a);
    border-left-color: #9C27B0;
}

.toast-trade {
    background: linear-gradient(135deg, #3d1a2a, #4a2a3a);
    border-left-color: #E91E63;
}

.toast-auction {
    background: linear-gradient(135deg, #2d2a1a, #3a352a);
    border-left-color: #795548;
}

.toast-money {
    background: linear-gradient(135deg, #1a3d1a, #2a4a2a);
    border-left-color: #4CAF50;
}

.toast-property {
    background: linear-gradient(135deg, #3d2a1a, #4a3a2a);
    border-left-color: #FF9800;
}

.toast-bankruptcy {
    background: linear-gradient(135deg, #2d1a3d, #3a2a4a);
    border-left-color: #9C27B0;
}

/* =============================================================================
   MODAL ALERT (for Modal.alert / Modal.confirm)
   ============================================================================= */

.modal-alert {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10001;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.modal-alert.show {
    opacity: 1;
}

.modal-alert .modal {
    background: #2a2a2a;
    border-radius: 16px;
    padding: 24px;
    max-width: 420px;
    width: 90%;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    transform: scale(0.9);
    transition: transform 0.3s ease;
}

.modal-alert.show .modal {
    transform: scale(1);
}

.modal-alert .modal h3 {
    margin: 0 0 16px 0;
    color: #fff;
    font-size: 1.3em;
}

.modal-alert .modal p {
    margin: 0 0 24px 0;
    color: #ccc;
    line-height: 1.6;
}

.modal-buttons {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

.modal-buttons button {
    padding: 10px 20px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    font-size: 0.95em;
    transition: all 0.2s;
    background: #444;
    color: #fff;
}

.modal-buttons button:hover {
    background: #555;
}

.modal-buttons button.primary {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
}

.modal-buttons button.primary:hover {
    background: linear-gradient(135deg, #5355e1, #7b4ce6);
    transform: translateY(-1px);
}

/* Mobile adjustments for toast */
@media (max-width: 480px) {
    .toast-container {
        left: 10px;
        right: 10px;
        top: 70px;
        max-width: none;
    }
    
    .toast {
        font-size: 14px;
    }
}

/* ==========================================================================
   ACTIVITY FEED - Always visible recent events
   ========================================================================== */

.activity-feed {
    background: linear-gradient(135deg, #1e1e2e, #2a2a3e);
    border: 1px solid #3a3a4a;
    border-radius: 12px;
    padding: 12px;
    margin-top: 10px;
}

.activity-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid #3a3a4a;
}

.activity-header h4 {
    margin: 0;
    color: #fff;
    font-size: 14px;
}

.btn-text {
    background: none;
    border: none;
    color: #667eea;
    cursor: pointer;
    font-size: 12px;
    padding: 4px 8px;
}

.btn-text:hover {
    text-decoration: underline;
}

.activity-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 150px;
    overflow-y: auto;
}

.activity-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 10px;
    background: rgba(255,255,255,0.05);
    border-radius: 8px;
    font-size: 13px;
    color: #ddd;
    animation: slideInFeed 0.3s ease;
}

@keyframes slideInFeed {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

.activity-item .activity-icon {
    font-size: 16px;
    flex-shrink: 0;
}

.activity-item .activity-text {
    flex: 1;
    line-height: 1.3;
}

.activity-item .activity-time {
    font-size: 10px;
    color: #888;
    white-space: nowrap;
}

.activity-item.rent {
    background: rgba(239, 68, 68, 0.15);
    border-left: 3px solid #ef4444;
}

.activity-item.purchase {
    background: rgba(34, 197, 94, 0.15);
    border-left: 3px solid #22c55e;
}

.activity-item.card {
    background: rgba(251, 191, 36, 0.15);
    border-left: 3px solid #fbbf24;
}

.activity-item.dice {
    background: rgba(99, 102, 241, 0.15);
    border-left: 3px solid #6366f1;
}

.activity-item.turn {
    background: rgba(168, 85, 247, 0.15);
    border-left: 3px solid #a855f7;
}

.activity-item.jail {
    background: rgba(107, 114, 128, 0.15);
    border-left: 3px solid #6b7280;
}

.activity-empty {
    color: #666;
    font-style: italic;
    text-align: center;
    padding: 20px;
}

/* ==========================================================================
   LOG MODAL - Full event history
   ========================================================================== */

.log-modal {
    max-width: 500px;
    max-height: 80vh;
}

.log-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 60vh;
    overflow-y: auto;
    padding: 10px;
    background: #1a1a2e;
    border-radius: 8px;
}

.log-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 10px;
    background: rgba(255,255,255,0.03);
    border-radius: 6px;
    font-size: 13px;
    color: #ccc;
}

.log-item .log-time {
    font-size: 10px;
    color: #666;
    min-width: 50px;
}

/* ==========================================================================
   CARD MODAL - Persistent card display
   ========================================================================== */

.card-modal {
    max-width: 350px;
    text-align: center;
    padding: 30px;
    background: linear-gradient(135deg, #1e1e2e, #2a2a3e);
    border: 2px solid #fbbf24;
    border-radius: 16px;
}

.card-modal-header {
    font-size: 14px;
    font-weight: bold;
    color: #fbbf24;
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.card-modal-icon {
    font-size: 60px;
    margin: 20px 0;
}

.card-modal-title {
    font-size: 18px;
    font-weight: bold;
    color: #fff;
    margin-bottom: 15px;
}

.card-modal-description {
    font-size: 15px;
    color: #ccc;
    line-height: 1.5;
    margin-bottom: 25px;
    padding: 15px;
    background: rgba(0,0,0,0.3);
    border-radius: 8px;
}

.card-modal-btn {
    width: 100%;
    padding: 15px;
    font-size: 16px;
}

.card-modal.chance {
    border-color: #f97316;
}

.card-modal.chance .card-modal-header {
    color: #f97316;
}

.card-modal.community {
    border-color: #3b82f6;
}

.card-modal.community .card-modal-header {
    color: #3b82f6;
}

/* ==========================================================================
   INVITE SYSTEM
   ========================================================================== */

.invite-user-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    margin-bottom: 8px;
    background: rgba(102, 126, 234, 0.1);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.invite-user-item:hover {
    background: rgba(102, 126, 234, 0.2);
    transform: translateX(5px);
}

.invite-user-name {
    flex: 1;
    font-weight: 500;
}

.invite-received-modal {
    animation: invitePulse 0.5s ease;
}

@keyframes invitePulse {
    0% { transform: scale(0.9); opacity: 0; }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); opacity: 1; }
}

/* ==========================================================================
   RENT TOAST - Enhanced rent payment notification
   ========================================================================== */

.toast.rent-payment {
    background: linear-gradient(135deg, #dc2626, #b91c1c);
    padding: 15px 20px;
}

.rent-toast-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rent-toast-header {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.9;
}

.rent-toast-amount {
    font-size: 24px;
    font-weight: bold;
}

.rent-toast-details {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}

.rent-toast-arrow {
    font-size: 18px;
}

.rent-toast-property {
    font-size: 12px;
    opacity: 0.8;
    margin-top: 4px;
}


/* =============================================================================
   RESPONSIVE DESIGN SYSTEM (merged from responsive.css)
   Phase 1: Scale-based responsiveness with edge-to-edge layout
   ============================================================================= */

/* -----------------------------------------------------------------------------
   CSS VARIABLES FOR RESPONSIVE
   ----------------------------------------------------------------------------- */
:root {
    /* Board dimensions (fixed, will be scaled) */
    --board-size: 1040px;
    --board-scale: 1;
    
    /* Layout */
    --header-height: 50px;
    --header-height-mobile: 44px;
    --action-bar-height: 60px;
    
    /* Spacing */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 12px;
    --spacing-lg: 16px;
    
    /* Safe areas (for notched phones) */
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
    
    /* Z-index layers */
    --z-board: 1;
    --z-tokens: 100;
    --z-panels: 200;
    --z-overlay: 500;
    --z-modal: 1000;
    --z-toast: 2000;
}

/* -----------------------------------------------------------------------------
   EDGE-TO-EDGE BASE STYLES
   ----------------------------------------------------------------------------- */

/* Global scrollbar styling - thin and discrete */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(100, 100, 100, 0.4) transparent;
}

*::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

*::-webkit-scrollbar-track {
    background: transparent;
}

*::-webkit-scrollbar-thumb {
    background: rgba(100, 100, 100, 0.4);
    border-radius: 3px;
}

*::-webkit-scrollbar-thumb:hover {
    background: rgba(100, 100, 100, 0.6);
}

/* Hide scrollbars in specific containers while keeping scroll functional */
.side-panel,
.game-log,
.chat-messages,
.players-card,
.game-players {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.side-panel::-webkit-scrollbar,
.game-log::-webkit-scrollbar,
.chat-messages::-webkit-scrollbar,
.players-card::-webkit-scrollbar,
.game-players::-webkit-scrollbar {
    display: none;
}

/* Remove default margins/padding for full-bleed */
html, body {
    overflow-x: hidden;
    overscroll-behavior: none; /* Prevent pull-to-refresh */
}

/* Header - compact and edge-to-edge */
.header {
    height: var(--header-height);
    padding: var(--spacing-sm) var(--spacing-md);
    padding-top: calc(var(--spacing-sm) + var(--safe-top));
    border-radius: 0;
    position: sticky;
    top: 0;
    z-index: var(--z-panels);
}

/* Container - no padding in game mode */
.container {
    height: calc(100vh - var(--header-height));
    height: calc(100dvh - var(--header-height)); /* Dynamic viewport height */
    padding: var(--spacing-sm);
    overflow: hidden;
}

.container.game-active {
    padding: 0;
    max-width: none;
}

/* -----------------------------------------------------------------------------
   GAME LAYOUT - RESPONSIVE GRID
   Note: Base layout defined in style.css, only overrides here
   ----------------------------------------------------------------------------- */

/* Large desktop: wider side panel */
@media (min-width: 1440px) {
    .game-layout {
        grid-template-columns: 1fr 380px;
        gap: 10px;
        padding: 5px;
    }
}

/* Extra large desktop */
@media (min-width: 1920px) {
    .game-layout {
        grid-template-columns: 1fr 420px;
        gap: 12px;
        padding: 8px;
    }
}

/* -----------------------------------------------------------------------------
   BOARD CONTAINER - SCALED TO FIT
   ----------------------------------------------------------------------------- */

.board-container {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 0;
    margin: 0;
    border-radius: 0;
    background: #c0e3e2;
    min-height: 0;
    position: relative;
}

/* Desktop: restore some styling */
@media (min-width: 1024px) {
    .board-container {
        border-radius: 8px;
        padding: var(--spacing-sm);
    }
}

/* The board itself - fixed size, scaled via transform */
.table {
    width: var(--board-size);
    height: var(--board-size);
    transform: scale(var(--board-scale));
    transform-origin: center center;
    flex-shrink: 0;
}

/* -----------------------------------------------------------------------------
   SIDE PANEL ADJUSTMENTS
   Note: Base styles in style.css, only mobile overrides here
   ----------------------------------------------------------------------------- */

@media (max-width: 1023px) {
    .side-panel {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-sm);
        padding: var(--spacing-sm);
        padding-bottom: calc(var(--spacing-sm) + var(--safe-bottom));
        background: rgba(255, 255, 255, 0.98);
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        max-height: 45vh;
    }
    
    /* Cards inside panel */
    .side-panel > .card {
        margin-bottom: 0;
        padding: var(--spacing-md);
        border-radius: 8px;
        flex-shrink: 0;
    }
}

/* -----------------------------------------------------------------------------
   COLLAPSIBLE SECTIONS
   ----------------------------------------------------------------------------- */

.collapsible-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    padding: var(--spacing-sm) 0;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.collapsible-header h3 {
    margin: 0;
    font-size: 14px;
}

.collapsible-toggle {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #f0f0f0;
    font-size: 12px;
    transition: transform 0.2s ease, background 0.2s ease;
}

.collapsible-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}

.collapsible-content.expanded {
    max-height: 500px;
}

.collapsible-header.expanded .collapsible-toggle {
    transform: rotate(180deg);
    background: #667eea;
    color: white;
}

/* Desktop: always expanded */
@media (min-width: 1024px) {
    .collapsible-header {
        cursor: default;
    }
    
    .collapsible-toggle {
        display: none;
    }
    
    .collapsible-content {
        max-height: none !important;
        overflow: visible;
    }
}

/* -----------------------------------------------------------------------------
   MOBILE ACTION BAR - FIXED BOTTOM
   ----------------------------------------------------------------------------- */

@media (max-width: 1023px) {
    .action-buttons {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--spacing-sm);
    }
    
    .action-buttons .btn {
        padding: var(--spacing-md);
        font-size: 14px;
        min-height: 48px;
    }
    
    /* Full width for single important buttons */
    .action-buttons .btn.btn-primary,
    .action-buttons .btn.btn-success:only-child {
        grid-column: 1 / -1;
    }
}

/* -----------------------------------------------------------------------------
   MOBILE OPTIMIZATIONS
   ----------------------------------------------------------------------------- */

@media (max-width: 767px) {
    :root {
        --header-height: var(--header-height-mobile);
    }
    
    .header h1 {
        font-size: 14px;
    }
    
    /* Hide non-essential header elements */
    .header .lang-dropdown-btn span:not(.lang-arrow),
    .header .auth-indicator span {
        display: none;
    }
    
    /* Compact status indicators */
    .status, .auth-indicator {
        padding: 4px 8px;
        font-size: 11px;
    }
    
    /* Dice smaller */
    .dice {
        font-size: 36px;
    }
    
    /* Turn info compact */
    .current-turn {
        padding: var(--spacing-sm);
        font-size: 13px;
    }
    
    /* Players list compact */
    .game-player {
        padding: var(--spacing-sm) var(--spacing-md);
        font-size: 13px;
    }
    
    .game-player .balance {
        font-size: 14px;
    }
    
    /* Cards more compact */
    .side-panel > .card h3 {
        font-size: 13px;
    }
}

/* Very small screens (iPhone SE, etc) */
@media (max-width: 375px) {
    .header h1 {
        font-size: 12px;
    }
    
    .action-buttons .btn {
        padding: var(--spacing-sm) var(--spacing-sm);
        font-size: 12px;
        min-height: 44px;
    }
    
    .dice {
        font-size: 28px;
    }
    
    .game-player {
        padding: var(--spacing-xs) var(--spacing-sm);
        font-size: 12px;
    }
}

/* -----------------------------------------------------------------------------
   TOUCH OPTIMIZATIONS
   ----------------------------------------------------------------------------- */

@media (hover: none) and (pointer: coarse) {
    /* Larger touch targets */
    .btn {
        min-height: 44px;
    }
    
    /* Remove hover effects that don't work on touch */
    .btn:hover {
        transform: none;
        box-shadow: none;
    }
    
    .btn:active {
        transform: scale(0.96);
        opacity: 0.9;
    }
    
    /* Board tiles */
    .frame > div:hover {
        transform: none;
        box-shadow: none;
    }
    
    /* Smooth scrolling */
    .side-panel {
        scroll-behavior: smooth;
    }
    
    /* Hide scrollbars */
    .side-panel::-webkit-scrollbar {
        display: none;
    }
    
    .side-panel {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
}

/* -----------------------------------------------------------------------------
   PWA STANDALONE MODE
   ----------------------------------------------------------------------------- */

@media (display-mode: standalone) {
    .header {
        padding-top: calc(var(--spacing-sm) + var(--safe-top));
    }
    
    .side-panel {
        padding-bottom: calc(var(--spacing-sm) + var(--safe-bottom));
    }
    
    /* Hide install buttons */
    #installBtn,
    .install-banner {
        display: none !important;
    }
}

/* -----------------------------------------------------------------------------
   LANDSCAPE MOBILE - Side panel layout for short screens
   ----------------------------------------------------------------------------- */

@media (max-height: 600px) and (orientation: landscape) {
    .game-layout {
        grid-template-columns: 1fr 300px;
        grid-template-rows: 1fr;
        gap: 10px;
        padding: 5px;
    }
    
    .side-panel {
        max-height: 100%;
        overflow-y: auto;
    }
    
    .header {
        height: 40px;
        padding: 4px 10px;
    }
    
    .header h1 {
        font-size: 13px;
    }
}

/* -----------------------------------------------------------------------------
   BOARD ZOOM MODAL
   ----------------------------------------------------------------------------- */

.zoom-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #1a1a2e;
    display: flex;
    flex-direction: column;
    z-index: 1001;
}

.zoom-close {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 10;
    background: rgba(255,255,255,0.9);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    font-size: 24px;
}

.zoom-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    padding: 15px;
    background: rgba(0,0,0,0.5);
    flex-shrink: 0;
}

.zoom-controls .btn {
    min-width: 50px;
    padding: 10px 15px;
    font-size: 18px;
}

.zoom-controls #zoomLevel {
    color: white;
    font-weight: bold;
    min-width: 60px;
    text-align: center;
}

.zoom-container {
    flex: 1;
    overflow: auto;
    padding: 20px;
    -webkit-overflow-scrolling: touch;
}

.zoom-board {
    transform-origin: top left;
    transition: transform 0.2s ease;
    display: inline-block;
}

.zoom-board .table {
    transform: none !important;
}

/* -----------------------------------------------------------------------------
   MOBILE TAB BAR - Only visible on mobile
   ----------------------------------------------------------------------------- */

/* Hidden by default (desktop) */
.mobile-tab-bar {
    display: none;
}

.mobile-action-bar {
    display: none;
}

/* =============================================================================
   DESKTOP LAYOUT (>= 1024px) - Force grid side-by-side
   ============================================================================= */
@media (min-width: 1024px) {
    .game-layout {
        display: grid !important;
        grid-template-columns: 1fr 360px !important;
        grid-template-rows: 1fr !important;
        flex-direction: unset !important;
        gap: 10px !important;
        padding: 5px !important;
        height: calc(100vh - 60px) !important;
        overflow: hidden !important;
    }
    
    .side-panel {
        display: flex !important;
        flex-direction: column !important;
        width: auto !important;
        max-width: none !important;
        height: 100% !important;
        max-height: 100% !important;
        overflow-y: auto !important;
    }
    
    .board-container {
        max-height: none !important;
        height: auto !important;
    }
}

/* =============================================================================
   MOBILE LAYOUT (< 1024px)
   ============================================================================= */
@media (max-width: 1023px) {
    /* Game layout - vertical stack for mobile */
    .game-layout {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: unset !important;
        gap: 10px;
        padding: 10px;
        padding-bottom: 80px;
        overflow-y: auto;
        height: auto;
        max-height: none;
    }
    
    /* Side panel - full width on mobile */
    .side-panel {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: none !important;
    }
    
    /* Show tab bar on mobile */
    .mobile-tab-bar {
        display: flex;
        justify-content: space-around;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: #2a2a2a;
        padding: 8px 0;
        padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
        z-index: 100;
        box-shadow: 0 -2px 10px rgba(0,0,0,0.2);
    }
    
    .mobile-tab {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 6px 16px;
        background: none;
        border: none;
        color: #888;
        font-size: 10px;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        transition: color 0.2s;
    }
    
    .mobile-tab .tab-icon {
        font-size: 22px;
        margin-bottom: 3px;
    }
    
    .mobile-tab:active,
    .mobile-tab.active {
        color: #667eea;
    }
    
    /* Mobile Action Bar - Fixed above tab bar */
    .mobile-action-bar {
        display: flex;
        flex-direction: column;
        position: fixed;
        bottom: 60px; /* Above tab bar */
        bottom: calc(60px + env(safe-area-inset-bottom, 0px));
        left: 0;
        right: 0;
        background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
        padding: 8px 12px;
        z-index: 99;
        box-shadow: 0 -2px 10px rgba(0,0,0,0.3);
    }
    
    .mobile-action-bar.hidden {
        display: none !important;
    }
    
    .mobile-action-buttons {
        display: flex;
        gap: 8px;
        justify-content: center;
    }
    
    .mobile-action-buttons .btn {
        flex: 1;
        max-width: 120px;
        padding: 10px 8px;
        font-size: 13px;
        min-height: 44px;
        border-radius: 8px;
    }
    
    .mobile-action-buttons .btn.hidden {
        display: none;
    }
    
    .mobile-turn-indicator {
        text-align: center;
        color: #aaa;
        font-size: 11px;
        margin-top: 6px;
        padding-top: 6px;
        border-top: 1px solid rgba(255,255,255,0.1);
    }
    
    .mobile-turn-indicator strong {
        color: #667eea;
    }
    
    .mobile-turn-indicator.my-turn {
        color: #4caf50;
    }
    
    .mobile-turn-indicator.my-turn strong {
        color: #4caf50;
    }
    
    /* Adjust game layout padding for action bar + tab bar */
    .game-layout {
        padding-bottom: 140px !important; /* Space for action bar + tab bar */
    }
    
    /* Hide activity feed on mobile - accessible via Log tab */
    .activity-feed {
        display: none !important;
    }
    
    /* Smaller text in log modal on mobile */
    .log-modal {
        max-width: 100%;
        margin: 10px;
    }
    
    .log-item {
        font-size: 12px;
        padding: 6px 8px;
    }
    
    .log-item .log-time {
        font-size: 9px;
    }
    
    /* Force smaller activity items if they show anywhere */
    .activity-item {
        font-size: 12px !important;
        padding: 6px 8px !important;
    }
    
    .activity-item .activity-icon {
        font-size: 14px !important;
    }
    
    .activity-item .activity-text {
        font-size: 12px !important;
    }
}

/* -----------------------------------------------------------------------------
   ONLINE USERS LIST
   ----------------------------------------------------------------------------- */

.online-users-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 300px;
    overflow-y: auto;
    padding: 10px 0;
}

.online-users-empty {
    color: #666;
    text-align: center;
    padding: 20px;
    font-style: italic;
}

.online-user-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 15px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 8px;
    transition: all 0.2s ease;
    border-left: 3px solid transparent;
}

.online-user-item:hover {
    background: rgba(255, 255, 255, 1);
    transform: translateX(3px);
}

.online-user-item.in-lobby {
    border-left-color: #1976d2;
    background: rgba(25, 118, 210, 0.15);
}

.online-user-item.in-game {
    border-left-color: #90caf9;
    background: rgba(144, 202, 249, 0.1);
}

.online-user-item.in-game .online-user-name {
    color: #64b5f6;
}

.online-user-item.in-lobby .online-user-name {
    color: #1565c0;
    font-weight: 600;
}

.online-user-item.is-me {
    background: rgba(25, 118, 210, 0.2);
}

.online-user-avatar {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.online-user-avatar .user-avatar {
    border-radius: 50%;
}

.online-user-avatar .user-avatar-fallback {
    border-radius: 50%;
}

.online-user-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow: hidden;
}

.online-user-name {
    font-weight: 600;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.online-user-status {
    font-size: 12px;
    color: #666;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.online-user-item.in-lobby .online-user-status {
    color: #1565c0;
    font-weight: 600;
}

.online-user-item.in-game .online-user-status {
    color: #64b5f6;
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .online-user-item {
        background: rgba(255, 255, 255, 0.95);
    }
    
    .online-user-item:hover {
        background: rgba(255, 255, 255, 1);
    }
    
    .online-user-item.in-lobby {
        background: rgba(25, 118, 210, 0.2);
        border-left-color: #1976d2;
    }
    
    .online-user-item.in-game {
        background: rgba(144, 202, 249, 0.15);
        border-left-color: #90caf9;
    }
    
    .online-user-item.is-me {
        background: rgba(25, 118, 210, 0.25);
    }
    
    .online-user-name {
        color: #212121;
    }
    
    .online-user-item.in-lobby .online-user-name {
        color: #0d47a1;
        font-weight: 600;
    }
    
    .online-user-item.in-game .online-user-name {
        color: #1976d2;
    }
    
    .online-user-status {
        color: #555;
    }
    
    .online-user-avatar {
        background: #e0e0e0;
    }
    
    .online-users-empty {
        color: #888;
    }
}

/* Mobile responsive */
@media (max-width: 768px) {
    .online-users-list {
        max-height: 200px;
    }
    
    .online-user-item {
        padding: 8px 12px;
    }
    
    .online-user-avatar {
        width: 32px;
        height: 32px;
    }
    
    .online-user-avatar .avatar-fallback {
        font-size: 16px;
    }
    
    .online-user-name {
        font-size: 14px;
    }
    
    .online-user-status {
        font-size: 11px;
    }
}

/* -----------------------------------------------------------------------------
   CHAT STYLES
   ----------------------------------------------------------------------------- */

.chat-messages {
    height: 200px;
    overflow-y: auto;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 8px;
    padding: 10px;
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.chat-message {
    display: flex;
    gap: 10px;
    padding: 8px;
    background: rgba(0, 0, 0, 0.03);
    border-radius: 8px;
}

.chat-message.is-me {
    background: rgba(33, 150, 243, 0.1);
}

.chat-message-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: #e0e0e0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.chat-message-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.chat-message-content {
    flex: 1;
    min-width: 0;
}

.chat-message-header {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 2px;
}

.chat-message-username {
    font-weight: 600;
    color: #1565c0;
    font-size: 13px;
}

.chat-message-time {
    font-size: 11px;
    color: #888;
}

.chat-message-text {
    color: #333;
    font-size: 14px;
    word-wrap: break-word;
}

.chat-input-container {
    display: flex;
    gap: 8px;
}

.chat-input {
    flex: 1;
    padding: 10px 15px;
    border: 1px solid #ddd;
    border-radius: 20px;
    font-size: 14px;
    outline: none;
    transition: border-color 0.2s;
}

.chat-input:focus {
    border-color: #2196f3;
}

.chat-send-btn {
    padding: 10px 15px !important;
    border-radius: 20px !important;
    min-width: auto !important;
}

/* Versione compatta per chat nel gioco */
.chat-messages-small {
    height: 150px;
}

.game-chat-card {
    background: rgba(156, 39, 176, 0.08);
}

.chat-messages-small .chat-message {
    padding: 6px;
}

.chat-messages-small .chat-message-avatar {
    width: 24px;
    height: 24px;
}

.chat-messages-small .chat-message-username {
    font-size: 12px;
}

.chat-messages-small .chat-message-text {
    font-size: 13px;
}

.chat-messages-small .chat-message-time {
    font-size: 10px;
}

.chat-empty {
    color: #888;
    text-align: center;
    padding: 20px;
    font-style: italic;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
    .chat-messages {
        background: rgba(30, 30, 30, 0.9);
    }
    
    .chat-message {
        background: rgba(255, 255, 255, 0.05);
    }
    
    .chat-message.is-me {
        background: rgba(33, 150, 243, 0.15);
    }
    
    .chat-message-username {
        color: #64b5f6;
    }
    
    .chat-message-text {
        color: #e0e0e0;
    }
    
    .chat-input {
        background: rgba(255, 255, 255, 0.1);
        border-color: #444;
        color: #e0e0e0;
    }
    
    .chat-input:focus {
        border-color: #2196f3;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .chat-messages {
        height: 150px;
    }
    
    .chat-message-avatar {
        width: 28px;
        height: 28px;
    }
}

/* -----------------------------------------------------------------------------
   CHAT STYLES
   ----------------------------------------------------------------------------- */

.chat-messages {
    height: 200px;
    overflow-y: auto;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 8px;
    padding: 10px;
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.chat-messages-empty {
    color: #888;
    text-align: center;
    padding: 40px 20px;
    font-style: italic;
}

.chat-message {
    display: flex;
    gap: 10px;
    padding: 8px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.03);
}

.chat-message-me {
    background: rgba(25, 118, 210, 0.1);
}

.chat-message-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: #e0e0e0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.chat-message-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.chat-message-content {
    flex: 1;
    min-width: 0;
}

.chat-message-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 2px;
}

.chat-message-username {
    font-weight: 600;
    color: #1565c0;
    font-size: 13px;
}

.chat-message-time {
    font-size: 11px;
    color: #888;
}

.chat-message-text {
    color: #333;
    font-size: 14px;
    word-wrap: break-word;
    line-height: 1.4;
}

.chat-input-container {
    display: flex;
    gap: 8px;
}

.chat-input {
    flex: 1;
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 14px;
    outline: none;
    transition: border-color 0.2s;
}

.chat-input:focus {
    border-color: #1976d2;
}

.chat-send-btn {
    padding: 10px 16px !important;
    font-size: 16px !important;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
    .chat-messages {
        background: rgba(30, 30, 30, 0.95);
    }
    
    .chat-message {
        background: rgba(255, 255, 255, 0.05);
    }
    
    .chat-message-me {
        background: rgba(25, 118, 210, 0.2);
    }
    
    .chat-message-text {
        color: #e0e0e0;
    }
    
    .chat-input {
        background: #2a2a2a;
        border-color: #444;
        color: #e0e0e0;
    }
    
    .chat-input:focus {
        border-color: #64b5f6;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .chat-messages {
        height: 150px;
    }
    
    .chat-message-avatar {
        width: 28px;
        height: 28px;
    }
    
    .chat-message-username {
        font-size: 12px;
    }
    
    .chat-message-text {
        font-size: 13px;
    }
}

/* -----------------------------------------------------------------------------
   PRINT STYLES
   ----------------------------------------------------------------------------- */

@media print {
    .header,
    .side-panel,
    .toast-container,
    .modal-overlay,
    .mobile-tab-bar {
        display: none !important;
    }
    
    .board-container {
        width: 100%;
        height: auto;
    }
    
    .table {
        transform: none !important;
    }
}