/* ============================================
   FLOP 7 - Online Multiplayer Card Game
   ============================================ */

:root {
    /* Color Palette - Inspired by Flop 7 */
    --primary-purple: #6B2D9B;
    --primary-purple-dark: #4A1F6E;
    --accent-orange: #FF6B35;
    --accent-yellow: #FFD700;
    --accent-cyan: #00D4FF;
    --accent-green: #00C853;
    --accent-red: #FF3D57;
    --accent-pink: #FF69B4;

    /* Card Colors by Number */
    --card-0: #9E9E9E;
    --card-1: #FF6B35;
    --card-2: #FFD700;
    --card-3: #00C853;
    --card-4: #00D4FF;
    --card-5: #6B2D9B;
    --card-6: #FF69B4;
    --card-7: #FF3D57;
    --card-8: #00BCD4;
    --card-9: #8BC34A;
    --card-10: #FF9800;
    --card-11: #E91E63;
    --card-12: #3F51B5;

    /* UI Colors */
    --bg-dark: #1a1a2e;
    --bg-medium: #16213e;
    --bg-light: #0f3460;
    --text-light: #ffffff;
    --text-muted: #a0a0a0;
    --success: #00C853;
    --danger: #FF3D57;
    --warning: #FFD700;

    /* Card Dimensions */
    --card-width: 80px;
    --card-height: 112px;
    --card-radius: 8px;

    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-medium: 0.3s ease;
    --transition-slow: 0.5s ease;
}

/* ============================================
   RESET & BASE
   ============================================ */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Open Sans', sans-serif;
    background: linear-gradient(135deg, var(--bg-dark) 0%, var(--bg-medium) 50%, var(--bg-light) 100%);
    min-height: 100vh;
    color: var(--text-light);
    overflow-x: hidden;
}

#app {
    min-height: 100vh;
    position: relative;
}

/* ============================================
   SCREENS
   ============================================ */

.screen {
    display: none;
    min-height: 100vh;
    padding: 20px;
}

.screen.active {
    display: flex;
    justify-content: center;
    align-items: center;
}

#game-screen.active {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

/* ============================================
   BUTTONS
   ============================================ */

.btn {
    padding: 14px 32px;
    font-size: 16px;
    font-weight: 600;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    transition: all var(--transition-fast);
    text-transform: uppercase;
    letter-spacing: 1px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

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

.btn-primary {
    background: linear-gradient(135deg, var(--accent-orange) 0%, #FF8F5C 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(255, 107, 53, 0.4);
}

.btn-primary:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 107, 53, 0.5);
}

.btn-secondary {
    background: rgba(255, 255, 255, 0.1);
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.3);
}

.btn-secondary:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.5);
}

.btn-link {
    background: transparent;
    color: var(--text-muted);
    text-decoration: underline;
    padding: 10px;
}

.btn-link:hover {
    color: var(--text-light);
}

.btn-hit {
    background: linear-gradient(135deg, var(--accent-green) 0%, #4CAF50 100%);
    color: white;
    font-size: 20px;
    padding: 16px 48px;
    box-shadow: 0 4px 15px rgba(0, 200, 83, 0.4);
}

.btn-hit:hover:not(:disabled) {
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(0, 200, 83, 0.5);
}

.btn-stay {
    background: linear-gradient(135deg, var(--accent-cyan) 0%, #26C6DA 100%);
    color: white;
    font-size: 20px;
    padding: 16px 48px;
    box-shadow: 0 4px 15px rgba(0, 212, 255, 0.4);
}

.btn-stay:hover:not(:disabled) {
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(0, 212, 255, 0.5);
}

.btn-continue {
    background: linear-gradient(135deg, #9b59b6 0%, #8e44ad 100%);
    color: white;
    font-size: 14px;
    padding: 10px 24px;
    margin-top: 10px;
    box-shadow: 0 3px 10px rgba(155, 89, 182, 0.4);
}

.btn-continue:hover:not(:disabled) {
    transform: scale(1.05);
    box-shadow: 0 4px 15px rgba(155, 89, 182, 0.5);
}

.btn-icon {
    font-size: 20px;
    font-weight: bold;
}

.btn-icon-only {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    padding: 8px 16px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 14px;
    transition: all var(--transition-fast);
}

.btn-icon-only:hover {
    background: rgba(255, 255, 255, 0.2);
}

.btn-copy {
    background: var(--accent-cyan);
    color: var(--bg-dark);
    border: none;
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    transition: all var(--transition-fast);
}

.btn-copy:hover {
    background: var(--accent-orange);
}

/* ============================================
   MENU SCREEN
   ============================================ */

.menu-container {
    text-align: center;
    max-width: 400px;
    width: 100%;
}

.logo {
    margin-bottom: 10px;
}

.logo h1 {
    font-family: 'Russo One', sans-serif;
    font-size: 72px;
    color: var(--accent-orange);
    text-shadow: 3px 3px 0 var(--primary-purple),
                 6px 6px 0 rgba(0, 0, 0, 0.3);
    letter-spacing: 8px;
    line-height: 1;
}

.logo-seven, .back-seven {
    font-family: 'Russo One', sans-serif;
    font-size: 120px;
    color: var(--accent-cyan);
    text-shadow: 4px 4px 0 var(--primary-purple),
                 8px 8px 0 rgba(0, 0, 0, 0.3);
    line-height: 0.8;
    margin-top: -10px;
}

.tagline {
    color: var(--text-muted);
    font-size: 16px;
    margin-bottom: 40px;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.menu-buttons {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.menu-buttons input[type="text"] {
    padding: 16px 24px;
    font-size: 16px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.1);
    color: white;
    text-align: center;
    outline: none;
    transition: all var(--transition-fast);
}

.menu-buttons input[type="text"]:focus {
    border-color: var(--accent-cyan);
    background: rgba(255, 255, 255, 0.15);
}

.menu-buttons input[type="text"]::placeholder {
    color: var(--text-muted);
}

.join-section {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}

.join-section input {
    flex: 1;
    text-transform: uppercase;
}

.join-section .btn {
    white-space: nowrap;
}

#btn-how-to-play {
    margin-top: 20px;
}

/* ============================================
   LOBBY SCREEN
   ============================================ */

.lobby-container {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 20px;
    padding: 40px;
    max-width: 500px;
    width: 100%;
    text-align: center;
}

.lobby-container h2 {
    font-family: 'Russo One', sans-serif;
    font-size: 32px;
    color: var(--accent-orange);
    margin-bottom: 24px;
}

.room-code-display {
    background: rgba(255, 255, 255, 0.1);
    padding: 16px 24px;
    border-radius: 12px;
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.room-code-display span:first-child {
    color: var(--text-muted);
}

.room-code-display .code {
    font-family: 'Russo One', sans-serif;
    font-size: 32px;
    color: var(--accent-cyan);
    letter-spacing: 4px;
}

.players-list {
    text-align: left;
    margin-bottom: 30px;
}

.players-list h3 {
    color: var(--text-muted);
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 12px;
}

.players-list ul {
    list-style: none;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 12px;
    overflow: hidden;
}

.players-list li {
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    gap: 12px;
}

.players-list li:last-child {
    border-bottom: none;
}

.players-list .player-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--primary-purple);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 14px;
}

.players-list .host-badge {
    background: var(--accent-orange);
    color: var(--bg-dark);
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: bold;
    margin-left: auto;
}

.players-list .you-badge {
    background: var(--accent-cyan);
    color: var(--bg-dark);
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: bold;
}

.players-list .cpu-badge {
    background: var(--accent-purple, #9b59b6);
    color: white;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: bold;
}

.lobby-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-bottom: 20px;
}

.lobby-info {
    color: var(--text-muted);
    font-size: 14px;
}

.share-link-display {
    background: rgba(255, 255, 255, 0.05);
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.share-link-display span {
    color: var(--text-muted);
    font-size: 12px;
    white-space: nowrap;
}

.share-link-input {
    flex: 1;
    min-width: 200px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    padding: 8px 12px;
    color: var(--accent-cyan);
    font-size: 12px;
    font-family: monospace;
}

/* ============================================
   REJOIN SCREEN
   ============================================ */

.rejoin-container {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 20px;
    padding: 40px;
    max-width: 450px;
    width: 100%;
    text-align: center;
}

.rejoin-container h2 {
    font-family: 'Russo One', sans-serif;
    font-size: 28px;
    color: var(--accent-orange);
    margin-bottom: 16px;
}

.rejoin-info {
    color: var(--text-muted);
    margin-bottom: 20px;
}

.rejoin-status {
    padding: 10px 16px;
    border-radius: 8px;
    margin-bottom: 20px;
    font-size: 14px;
}

.rejoin-status.status-lobby {
    background: rgba(0, 212, 255, 0.2);
    color: var(--accent-cyan);
}

.rejoin-status.status-playing {
    background: rgba(0, 200, 83, 0.2);
    color: var(--accent-green);
}

.rejoin-players {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 24px;
}

.rejoin-player-btn {
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.2);
    color: white;
    padding: 16px 20px;
    border-radius: 12px;
    cursor: pointer;
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 16px;
}

.rejoin-player-btn:hover {
    background: rgba(255, 107, 53, 0.3);
    border-color: var(--accent-orange);
}

.rejoin-player-btn .player-name {
    font-weight: 600;
}

.rejoin-player-btn .player-status {
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.1);
}

.rejoin-player-btn .player-status.host {
    background: var(--accent-orange);
    color: var(--bg-dark);
}

.new-player-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
}

.new-player-form input {
    padding: 16px 24px;
    font-size: 16px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.1);
    color: white;
    text-align: center;
    outline: none;
    transition: all var(--transition-fast);
}

.new-player-form input:focus {
    border-color: var(--accent-cyan);
    background: rgba(255, 255, 255, 0.15);
}

.new-player-form input::placeholder {
    color: var(--text-muted);
}

.rejoin-players-section {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.rejoin-players-section.hidden {
    display: none;
}

.rejoin-divider {
    color: var(--text-muted);
    font-size: 13px;
    margin-bottom: 12px;
}

.rejoin-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* ============================================
   GAME SCREEN
   ============================================ */

.game-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    background: rgba(0, 0, 0, 0.3);
}

.game-info {
    display: flex;
    gap: 20px;
}

#round-display {
    font-family: 'Russo One', sans-serif;
    font-size: 18px;
    color: var(--accent-orange);
}

#target-score {
    color: var(--text-muted);
    font-size: 14px;
}

.game-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 20px;
    gap: 20px;
    min-height: 0;
}

/* ============================================
   OTHER PLAYERS AREA
   ============================================ */

.other-players-area {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: center;
    padding: 10px;
    min-height: 140px;
}

.other-player {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 12px;
    padding: 10px 15px;
    min-width: 180px;
    max-width: 250px;
    transition: all var(--transition-medium);
}

.other-player.active-turn {
    box-shadow: 0 0 20px var(--accent-orange);
    border: 2px solid var(--accent-orange);
}

.other-player.busted {
    opacity: 0.5;
}

.other-player.stayed {
    border: 2px solid var(--accent-cyan);
}

.other-player.frozen {
    border: 2px solid #90CAF9;
}

.other-player-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
}

.other-player-name {
    font-weight: 600;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.other-player-scores {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

.other-player-score {
    color: var(--accent-cyan);
    font-size: 12px;
}

.other-player-round-score {
    color: var(--text-muted);
    font-size: 11px;
}

.other-player-cards {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    min-height: 50px;
}

.other-player-status {
    font-size: 11px;
    margin-top: 6px;
    padding: 3px 8px;
    border-radius: 10px;
    display: inline-block;
}

.status-busted {
    background: var(--accent-red);
    color: white;
}

.status-stayed {
    background: var(--accent-cyan);
    color: var(--bg-dark);
}

.status-frozen {
    background: #90CAF9;
    color: var(--bg-dark);
}

.status-flip7 {
    background: var(--accent-yellow);
    color: var(--bg-dark);
}

/* ============================================
   CENTER AREA
   ============================================ */

.center-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px 20px;
}

.cards-remaining-display {
    color: var(--text-muted);
    font-size: 14px;
}

.cards-remaining-display #cards-remaining {
    color: var(--accent-cyan);
    font-weight: 600;
}

.game-message {
    font-size: 16px;
    color: var(--accent-yellow);
    text-align: center;
    min-height: 24px;
    font-weight: 600;
}

.turn-indicator {
    background: rgba(255, 107, 53, 0.2);
    border: 2px solid var(--accent-orange);
    padding: 8px 20px;
    border-radius: 30px;
}

#current-player-name {
    font-weight: 600;
    font-size: 16px;
}

/* ============================================
   PLAYER AREA
   ============================================ */

.player-area {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 20px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.player-info {
    display: flex;
    gap: 20px;
    align-items: center;
}

.player-name {
    font-family: 'Russo One', sans-serif;
    font-size: 20px;
    color: var(--accent-orange);
}

.player-score {
    color: var(--accent-cyan);
    font-size: 16px;
    font-weight: 600;
}

.round-score {
    color: var(--text-muted);
    font-size: 14px;
}

.player-cards {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
    min-height: var(--card-height);
    padding: 10px;
}

.player-controls {
    display: flex;
    gap: 20px;
    margin-top: 10px;
}

.player-controls.hidden {
    display: none;
}

.player-status {
    font-size: 16px;
    font-weight: 600;
    padding: 8px 20px;
    border-radius: 20px;
    min-height: 40px;
}

/* ============================================
   CARDS
   ============================================ */

.card {
    width: var(--card-width);
    height: var(--card-height);
    border-radius: var(--card-radius);
    position: relative;
    cursor: default;
    transform-style: preserve-3d;
    transition: transform var(--transition-medium);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
}

.card-face {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: var(--card-radius);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.card-front {
    background: linear-gradient(145deg, #ffffff 0%, #f0f0f0 100%);
    border: 3px solid;
}

.card-back, .card-back-face {
    background: linear-gradient(145deg, var(--primary-purple) 0%, var(--primary-purple-dark) 100%);
    transform: rotateY(180deg);
}

.card-back-design {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
    font-family: 'Russo One', sans-serif;
}

.card-back-design span:first-child {
    font-size: 14px;
    letter-spacing: 2px;
}

.card-back-design .back-seven {
    font-size: 36px;
    text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.3);
    margin-top: -5px;
}

/* Number Card Styling */
.card-number {
    font-family: 'Russo One', sans-serif;
    font-size: 42px;
    line-height: 1;
}

.card-number-small {
    position: absolute;
    font-family: 'Russo One', sans-serif;
    font-size: 14px;
}

.card-number-small.top-left {
    top: 6px;
    left: 8px;
}

.card-number-small.bottom-right {
    bottom: 6px;
    right: 8px;
    transform: rotate(180deg);
}

/* Card Colors */
.card-0 .card-front { border-color: var(--card-0); }
.card-0 .card-number, .card-0 .card-number-small { color: var(--card-0); }

.card-1 .card-front { border-color: var(--card-1); }
.card-1 .card-number, .card-1 .card-number-small { color: var(--card-1); }

.card-2 .card-front { border-color: var(--card-2); }
.card-2 .card-number, .card-2 .card-number-small { color: var(--card-2); }

.card-3 .card-front { border-color: var(--card-3); }
.card-3 .card-number, .card-3 .card-number-small { color: var(--card-3); }

.card-4 .card-front { border-color: var(--card-4); }
.card-4 .card-number, .card-4 .card-number-small { color: var(--card-4); }

.card-5 .card-front { border-color: var(--card-5); }
.card-5 .card-number, .card-5 .card-number-small { color: var(--card-5); }

.card-6 .card-front { border-color: var(--card-6); }
.card-6 .card-number, .card-6 .card-number-small { color: var(--card-6); }

.card-7 .card-front { border-color: var(--card-7); }
.card-7 .card-number, .card-7 .card-number-small { color: var(--card-7); }

.card-8 .card-front { border-color: var(--card-8); }
.card-8 .card-number, .card-8 .card-number-small { color: var(--card-8); }

.card-9 .card-front { border-color: var(--card-9); }
.card-9 .card-number, .card-9 .card-number-small { color: var(--card-9); }

.card-10 .card-front { border-color: var(--card-10); }
.card-10 .card-number, .card-10 .card-number-small { color: var(--card-10); }

.card-11 .card-front { border-color: var(--card-11); }
.card-11 .card-number, .card-11 .card-number-small { color: var(--card-11); }

.card-12 .card-front { border-color: var(--card-12); }
.card-12 .card-number, .card-12 .card-number-small { color: var(--card-12); }

/* Special Cards */
.card-action .card-front {
    background: linear-gradient(145deg, #2C2C54 0%, #1a1a3e 100%);
    border-color: var(--accent-purple);
}

.card-action .card-text {
    color: white;
    font-weight: bold;
    font-size: 11px;
    text-align: center;
    padding: 5px;
    text-transform: uppercase;
}

.card-action .card-icon {
    font-size: 28px;
    margin-bottom: 5px;
}

.card-freeze .card-front {
    background: linear-gradient(145deg, #1565C0 0%, #0D47A1 100%);
    border-color: #64B5F6;
}

.card-flip3 .card-front {
    background: linear-gradient(145deg, #6A1B9A 0%, #4A148C 100%);
    border-color: #CE93D8;
}

.card-second-chance .card-front {
    background: linear-gradient(145deg, #2E7D32 0%, #1B5E20 100%);
    border-color: #81C784;
}

/* Modifier Cards */
.card-modifier .card-front {
    background: linear-gradient(145deg, #F57C00 0%, #E65100 100%);
    border-color: #FFB74D;
}

.card-modifier .card-value {
    font-family: 'Russo One', sans-serif;
    font-size: 32px;
    color: white;
    text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.3);
}

.card-x2 .card-front {
    background: linear-gradient(145deg, #FFD700 0%, #FFC107 100%);
    border-color: #FFEB3B;
}

.card-x2 .card-value {
    color: var(--bg-dark);
}

/* Mini Cards (for other players) */
.card-mini {
    width: 35px;
    height: 49px;
    font-size: 14px;
    border-radius: 4px;
}

.card-mini .card-number {
    font-size: 18px;
}

.card-mini .card-number-small {
    display: none;
}

.card-mini .card-text {
    font-size: 7px;
}

.card-mini .card-icon {
    font-size: 14px;
    margin-bottom: 2px;
}

.card-mini .card-value {
    font-size: 14px;
}

/* Card Animations */
.card.flipping .card-inner {
    animation: flipCard 0.6s ease-in-out;
}

@keyframes flipCard {
    0% { transform: rotateY(180deg); }
    100% { transform: rotateY(0deg); }
}

.card.dealing {
    animation: dealCard 0.4s ease-out;
}

@keyframes dealCard {
    0% {
        opacity: 0;
        transform: translateY(-100px) scale(0.5);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.card.bust-shake {
    animation: bustShake 0.5s ease-in-out;
}

@keyframes bustShake {
    0%, 100% { transform: translateX(0) rotate(0); }
    20% { transform: translateX(-10px) rotate(-5deg); }
    40% { transform: translateX(10px) rotate(5deg); }
    60% { transform: translateX(-10px) rotate(-5deg); }
    80% { transform: translateX(10px) rotate(5deg); }
}

.card.highlight {
    box-shadow: 0 0 20px var(--accent-yellow);
    transform: scale(1.05);
}

/* ============================================
   OVERLAYS & MODALS
   ============================================ */

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    padding: 20px;
}

.overlay.hidden {
    display: none;
}

.overlay-content {
    background: linear-gradient(145deg, var(--bg-medium) 0%, var(--bg-dark) 100%);
    border-radius: 20px;
    padding: 30px;
    max-width: 500px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    text-align: center;
}

.overlay-content h2, .overlay-content h3 {
    font-family: 'Russo One', sans-serif;
    color: var(--accent-orange);
    margin-bottom: 20px;
}

/* Rules Modal */
.rules-modal {
    max-width: 600px;
    text-align: left;
}

.rules-modal h2 {
    text-align: center;
}

.rules-content section {
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.rules-content section:last-child {
    border-bottom: none;
}

.rules-content h3 {
    font-size: 16px;
    color: var(--accent-cyan);
    margin-bottom: 10px;
}

.rules-content p {
    color: var(--text-muted);
    line-height: 1.6;
    margin-bottom: 8px;
}

.rules-content ul, .rules-content ol {
    color: var(--text-muted);
    padding-left: 20px;
    line-height: 1.8;
}

.rules-content strong {
    color: var(--text-light);
}

.rules-modal .btn {
    display: block;
    margin: 20px auto 0;
}

/* Action Modal */
.action-modal {
    max-width: 400px;
}

#action-modal-desc {
    color: var(--text-muted);
    margin-bottom: 20px;
}

.action-targets {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.action-target-btn {
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.2);
    color: white;
    padding: 15px 20px;
    border-radius: 12px;
    cursor: pointer;
    transition: all var(--transition-fast);
    font-size: 16px;
}

.action-target-btn:hover {
    background: var(--accent-orange);
    border-color: var(--accent-orange);
}

.action-target-btn.self {
    border-color: var(--accent-cyan);
}

/* Round End & Game Over */
.round-end, .game-over {
    max-width: 450px;
}

#round-results, #final-scores {
    margin: 20px 0;
}

.result-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    margin-bottom: 8px;
}

.result-row.winner {
    background: rgba(255, 107, 53, 0.3);
    border: 2px solid var(--accent-orange);
}

.result-row.busted {
    opacity: 0.5;
}

.result-name {
    font-weight: 600;
}

.result-score {
    color: var(--accent-cyan);
    font-weight: bold;
}

.result-round-score {
    color: var(--accent-green);
    font-size: 14px;
    margin-left: 10px;
}

.result-bust {
    color: var(--accent-red);
    font-size: 12px;
}

.wait-message {
    color: var(--text-muted);
    font-style: italic;
}

.game-over-actions {
    display: flex;
    gap: 15px;
    justify-content: center;
    margin-top: 20px;
}

/* Scoreboard */
.scoreboard {
    max-width: 400px;
}

#scoreboard-list {
    margin: 20px 0;
}

.score-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    margin-bottom: 8px;
}

.score-row.leading {
    border-left: 4px solid var(--accent-orange);
}

.score-position {
    width: 30px;
    font-weight: bold;
    color: var(--text-muted);
}

.score-name {
    flex: 1;
    text-align: left;
}

.score-total {
    font-weight: bold;
    color: var(--accent-cyan);
    font-size: 18px;
}

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

#toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.toast {
    background: rgba(0, 0, 0, 0.9);
    color: white;
    padding: 15px 25px;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    animation: slideIn 0.3s ease-out;
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 350px;
}

.toast.success {
    border-left: 4px solid var(--accent-green);
}

.toast.error {
    border-left: 4px solid var(--accent-red);
}

.toast.info {
    border-left: 4px solid var(--accent-cyan);
}

.toast.warning {
    border-left: 4px solid var(--accent-yellow);
}

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

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

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

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */

@media (max-width: 768px) {
    :root {
        --card-width: 60px;
        --card-height: 84px;
    }

    .logo h1 {
        font-size: 48px;
    }

    .logo-seven {
        font-size: 80px;
    }

    .menu-buttons {
        padding: 0 10px;
    }

    .btn {
        padding: 12px 24px;
        font-size: 14px;
    }

    .join-section {
        flex-direction: column;
    }

    .lobby-container {
        padding: 25px;
    }

    .room-code-display .code {
        font-size: 24px;
    }

    .game-header {
        flex-wrap: wrap;
        gap: 10px;
    }

    .game-area {
        padding: 10px;
        gap: 15px;
    }

    .other-players-area {
        gap: 10px;
    }

    .other-player {
        min-width: 140px;
        padding: 8px 10px;
    }

    .player-controls {
        flex-direction: column;
        gap: 10px;
        width: 100%;
    }

    .btn-hit, .btn-stay {
        width: 100%;
        padding: 14px 30px;
        font-size: 18px;
    }

    .card-number {
        font-size: 32px;
    }

    .card-mini {
        width: 28px;
        height: 39px;
    }

    .card-mini .card-number {
        font-size: 14px;
    }

    .overlay-content {
        padding: 20px;
        margin: 10px;
    }

    .rules-modal {
        max-height: 80vh;
    }

    #toast-container {
        left: 10px;
        right: 10px;
    }

    .toast {
        max-width: 100%;
    }
}

@media (max-width: 480px) {
    :root {
        --card-width: 50px;
        --card-height: 70px;
    }

    .logo h1 {
        font-size: 36px;
    }

    .logo-seven {
        font-size: 60px;
    }

    .other-player {
        min-width: 120px;
    }

    .card-number {
        font-size: 26px;
    }

    .player-info {
        flex-direction: column;
        gap: 5px;
    }
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

.hidden {
    display: none !important;
}

.text-center {
    text-align: center;
}

.text-success {
    color: var(--accent-green);
}

.text-danger {
    color: var(--accent-red);
}

.text-warning {
    color: var(--accent-yellow);
}

.text-info {
    color: var(--accent-cyan);
}

.pulse {
    animation: pulse 1s ease-in-out infinite;
}

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

/* Loading Spinner */
.spinner {
    width: 40px;
    height: 40px;
    border: 4px solid rgba(255, 255, 255, 0.1);
    border-left-color: var(--accent-orange);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ============================================
   DEBUG PANEL
   ============================================ */

.debug-toggle {
    position: fixed;
    bottom: 20px;
    left: 20px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.7);
    border: 2px solid rgba(255, 255, 255, 0.2);
    color: white;
    font-size: 20px;
    cursor: pointer;
    z-index: 9999;
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
}

.debug-toggle:hover {
    background: rgba(107, 45, 155, 0.9);
    border-color: var(--accent-cyan);
    transform: scale(1.1);
}

.debug-panel {
    position: fixed;
    bottom: 80px;
    left: 20px;
    width: 500px;
    max-width: calc(100vw - 40px);
    height: 400px;
    max-height: calc(100vh - 120px);
    background: rgba(10, 10, 20, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    z-index: 9998;
    display: flex;
    flex-direction: column;
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.debug-panel.hidden {
    display: none;
}

.debug-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    background: rgba(107, 45, 155, 0.3);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px 12px 0 0;
}

.debug-header h3 {
    margin: 0;
    font-size: 14px;
    color: var(--accent-cyan);
}

.debug-actions {
    display: flex;
    gap: 8px;
}

.btn-debug {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    padding: 4px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 11px;
    transition: all var(--transition-fast);
}

.btn-debug:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: var(--accent-cyan);
}

.debug-log {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
}

.debug-entry {
    display: flex;
    gap: 8px;
    padding: 4px 8px;
    margin-bottom: 2px;
    border-radius: 4px;
    line-height: 1.4;
    word-break: break-word;
}

.debug-entry:hover {
    background: rgba(255, 255, 255, 0.05);
}

.debug-time {
    color: #888;
    flex-shrink: 0;
}

.debug-type {
    flex-shrink: 0;
    width: 50px;
    font-weight: bold;
    text-align: center;
    padding: 1px 4px;
    border-radius: 3px;
    font-size: 10px;
}

.debug-msg {
    color: #ddd;
    flex: 1;
}

.debug-log .debug-entry.debug-error .debug-type {
    background: rgba(255, 61, 87, 0.3);
    color: var(--accent-red);
}

.debug-log .debug-entry.debug-error .debug-msg {
    color: var(--accent-red);
}

.debug-log .debug-entry.debug-warn .debug-type {
    background: rgba(255, 215, 0, 0.3);
    color: var(--accent-yellow);
}

.debug-log .debug-entry.debug-warn .debug-msg {
    color: var(--accent-yellow);
}

.debug-log .debug-entry.debug-info .debug-type {
    background: rgba(0, 212, 255, 0.3);
    color: var(--accent-cyan);
}

.debug-log .debug-entry.debug-api .debug-type {
    background: rgba(0, 200, 83, 0.3);
    color: var(--accent-green);
}

.debug-log .debug-entry.debug-debug .debug-type {
    background: rgba(128, 128, 128, 0.3);
    color: #aaa;
}

.debug-footer {
    display: flex;
    justify-content: space-between;
    padding: 8px 15px;
    background: rgba(0, 0, 0, 0.3);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0 0 12px 12px;
    color: #888;
    font-size: 11px;
}

@media (max-width: 600px) {
    .debug-panel {
        width: calc(100vw - 40px);
        height: 300px;
        bottom: 70px;
        left: 20px;
    }

    .debug-toggle {
        width: 40px;
        height: 40px;
        font-size: 18px;
    }
}