/* Mobile responsive */
@media (max-width: 768px) {

    /* Table scaling for small screens */
    #poker-table {
        width: 95vw !important;
        height: 55vw !important;
    }

    /* Scaled-down player plaques */
    .plaque-avatar-section {
        width: 45px !important;
        height: 45px !important;
    }

    .plaque-info-section {
        padding: 0 8px !important;
        min-width: 75px !important;
    }

    .player-name {
        font-size: 10px !important;
        max-width: 70px !important;
    }

    .player-balance {
        font-size: 12px !important;
    }

    /* Table elements and card scaling */
    #table-watermark {
        font-size: 40px !important;
    }
    #table-tagline {
        font-size: 14px !important;
    }
    #table-watermark-logo {
        max-width: 140px !important;
        max-height: 70px !important;
    }

    .card {
        transform: scale(1.1);
    }

    /* Action dock */
    #action-bar,
    #pre-action-bar {
        width: 100vw !important;
        left: 0 !important;
        bottom: 0 !important;
        border-radius: 20px 20px 0 0 !important;
        padding: 15px 5px 20px 5px !important;
        gap: 5px !important;
        justify-content: space-around !important;
        border: none !important;
    }

    /* Buttons and controls */
    .action-btn,
    .pre-action-btn {
        padding: 12px 2px !important;
        font-size: 0.85rem !important;
        flex: 1 !important;
        margin: 0 2px !important;
    }

    /* Optimization for mobile screen space */
    #bet-slider {
        display: none !important;
    }

    #bet-amount {
        width: 55px !important;
        font-size: 0.9rem !important;
        padding: 5px !important;
    }

    /* Chat box */
    #chat-container {
        width: 220px !important;
        height: 160px !important;
        bottom: 90px !important;
        right: 10px !important;
    }

    /* Settings buttons */
    #mute-btn,
    #theme-toggle-btn {
        width: 40px !important;
        height: 40px !important;
        font-size: 18px !important;
        left: 10px !important;
    }

    /* Full-screen Sidebar for Touch Accessibility */
    #theme-sidebar {
        width: 100vw !important;
        left: -100vw !important;
    }

    /* Hide controls when sidebar is open on mobile */
    body:has(#theme-sidebar.open) #theme-toggle-btn,
    body:has(#theme-sidebar.open) #mute-btn {
        left: 100vw !important;
    }
}

/* Initial state for mobile chat toggle */
#mobile-chat-btn {
    display: none;
}

/* Mobile landscape */
@media (max-width: 950px) and (orientation: landscape) {

    html,
    body {
        min-height: 100dvh !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #000 !important;
        overflow: hidden !important;
    }

    /* Proportional Table Scaling */
    #poker-table {
        width: min(92vw, calc((100vh - 54px) * 2)) !important;
        height: min(46vw, calc(100vh - 54px)) !important;
        max-height: none !important;
        aspect-ratio: 2 / 1 !important;
        position: absolute !important;
        top: 47% !important;
        left: 50% !important;
        margin: 0 !important;
        transform: translate(-50%, -50%) !important;
        box-shadow:
            inset 0 2px 3px rgba(255, 255, 255, 0.3),
            inset 0 -4px 8px rgba(0, 0, 0, 0.35),
            0 10px 25px rgba(0, 0, 0, 0.7) !important;
    }

    /* Scaled Rim Thickness */
    #poker-table::after {
        border-width: 12px !important;
    }

    /* Optimized Felt & Inner Shadows (50% reduction for mobile) */
    #poker-table::before {
        top: 12px !important;
        bottom: 12px !important;
        left: 12px !important;
        right: 12px !important;
        box-shadow:
            inset 0 0 60px rgba(0, 0, 0, 0.85),
            inset 0 0 15px rgba(0, 0, 0, 0.6),
            0 0 0 1px rgba(255, 255, 255, 0.15),
            inset 0 4px 8px rgba(0, 0, 0, 0.6),
            inset 0 0 6px 1px rgba(0, 0, 0, 0.5) !important;
    }

    /* HD Seat Typography and Scaling */
    .seat {
        transform: translate(-50%, -50%) !important;
    }

    .seat:hover {
        transform: translate(-50%, -50%) scale(1.05) !important;
    }

    .plaque-avatar-section {
        width: 50px !important;
        height: 50px !important;
    }

    .plaque-info-section {
        min-width: 90px !important;
        padding: 0 10px !important;
    }

    .player-name {
        font-size: 11px !important;
        max-width: 75px !important;
        margin-bottom: 2px !important;
    }

    .player-balance {
        font-size: 13px !important;
    }

    .seat.empty .empty-seat-content {
        min-width: 75px !important;
        min-height: 45px !important;
        font-size: 11px !important;
        border-radius: 15px !important;
    }

    /* Timebank Adjustment for Landscape */
    .timebank-ring {
        top: -3px !important;
        left: -3px !important;
        right: -3px !important;
        bottom: -3px !important;
        border-radius: 10px !important;
    }

    /* Speech bubble */

    /* Default: Bubbles appear below the plaque (Top & Left seats) */
    .player-plaque-wrapper .speech-bubble {
        top: 100% !important;
        margin: 5px 0 0 0 !important;
        left: 0 !important;
        right: auto !important;
        transform: translateY(-5px) !important;
        z-index: 9999 !important;
    }

    .player-plaque-wrapper .speech-bubble.show {
        transform: translateY(0px) !important;
    }

    /* Arrow alignment for 50px mobile avatars */
    .player-plaque-wrapper .speech-bubble::after {
        left: 25px !important;
        right: auto !important;
        margin-left: -6px !important;
    }

    /* Right-Side Seats: Align bubble and arrow to the right edge */
    .visual-5 .player-plaque-wrapper .speech-bubble,
    .visual-6 .player-plaque-wrapper .speech-bubble,
    .visual-7 .player-plaque-wrapper .speech-bubble {
        left: auto !important;
        right: 0 !important;
    }

    .visual-5 .player-plaque-wrapper .speech-bubble::after,
    .visual-6 .player-plaque-wrapper .speech-bubble::after,
    .visual-7 .player-plaque-wrapper .speech-bubble::after {
        left: auto !important;
        right: 25px !important;
        margin-right: -6px !important;
        margin-left: 0 !important;
    }

    /* Bottom Seats: Bubbles pop UPWARDS to clear the Action Bar */
    .visual-0 .player-plaque-wrapper .speech-bubble,
    .visual-1 .player-plaque-wrapper .speech-bubble,
    .visual-8 .player-plaque-wrapper .speech-bubble {
        top: auto !important;
        bottom: 100% !important;
        margin: 0 0 5px 0 !important;
        transform: translateY(5px) !important;
    }

    .visual-0 .player-plaque-wrapper .speech-bubble.show,
    .visual-1 .player-plaque-wrapper .speech-bubble.show,
    .visual-8 .player-plaque-wrapper .speech-bubble.show {
        transform: translateY(0px) !important;
    }

    /* Arrow inversion for bottom seats (Pointing DOWN) */
    .visual-0 .player-plaque-wrapper .speech-bubble::after,
    .visual-1 .player-plaque-wrapper .speech-bubble::after,
    .visual-8 .player-plaque-wrapper .speech-bubble::after {
        top: 100% !important;
        bottom: auto !important;
        border-color: rgba(25, 25, 25, 0.95) transparent transparent transparent !important;
    }

    /* Right alignment specific to bottom-right seat */
    .visual-8 .player-plaque-wrapper .speech-bubble {
        left: auto !important;
        right: 0 !important;
    }

    .visual-8 .player-plaque-wrapper .speech-bubble::after {
        left: auto !important;
        right: 25px !important;
        margin-right: -6px !important;
        margin-left: 0 !important;
    }

    /* Board Layout & Center Area Adjustments */
    #center-area {
        top: 38% !important;
    }

    #board-container {
        display: flex !important;
        transform: none !important;
        gap: 6px !important;
    }

    /* Board Cards Scaling (+10% Native) */
    .board-card {
        width: 53px !important;
        height: 74px !important;
        transform: none !important;
        background-color: transparent !important;
        background-size: contain !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
        filter: drop-shadow(1px 3px 4px rgba(0, 0, 0, 0.6)) !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        image-rendering: auto !important;
    }

    /* Pot Indicator Adjustments */
    #pot-display {
        top: 12% !important;
        transform: translate(calc(-50% - 4px), -50%) !important;
    }

    #pot-amount {
        font-size: 12px !important;
        padding: 5px 15px !important;
    }

    /* Mobile pot stack styling */
    #main-pot-stack {
        top: 62% !important;
        transform: translate(-50%, -50%) !important;
        z-index: 15 !important;
    }

    .chip {
        width: 22px !important;
        height: 22px !important;
        font-size: 8px !important;
        margin-top: -18px !important;
    }

    .chip-stack .chip:first-child {
        margin-top: 0 !important;
    }

    /* Hero cards */

    /* Fixed Action Dock Positioning */
    #action-bar,
    #pre-action-bar {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        background: transparent !important;
        backdrop-filter: none !important;
        border: none !important;
        box-shadow: none !important;
        pointer-events: none !important;
        padding: 10px 15px 20px 15px !important;
        align-items: center !important;
        z-index: 100 !important;
        /* Note: display flex handled by JS to manage visibility */
    }

    /* Re-enable interaction for interactive elements only */
    #action-bar>*,
    #pre-action-bar>* {
        pointer-events: auto !important;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.8) !important;
    }

    /* Split-Dock Layout (Left/Right thumb focus) */
    #btn-call,
    #label-check {
        margin-right: auto !important;
    }

    /* Thumb-Optimized Button Styling */
    .action-btn,
    .pre-action-btn {
        flex: 0 0 auto !important;
        min-width: 75px !important;
        height: 45px !important;
        padding: 0 10px !important;
        margin: 0 4px !important;
        font-size: 13px !important;
        border-radius: 8px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Bet slider */
    #bet-slider {
        display: block !important;
        position: absolute !important;
        bottom: 75px !important;
        right: 15px !important;
        width: 180px !important;
        height: 8px !important;
        accent-color: #ffaa00 !important;
        filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.9)) !important;
        z-index: 105 !important;
    }

    /* Bet amount input */
    #bet-amount {
        position: absolute !important;
        bottom: 95px !important;
        right: 15px !important;
        width: 180px !important;
        height: 35px !important;
        font-size: 16px !important;
        margin: 0 !important;
        border-radius: 6px !important;
        text-align: center !important;
        border: 2px solid #555 !important;
        background: rgba(15, 15, 15, 0.95) !important;
        color: #4ade80 !important;
        font-weight: bold !important;
        z-index: 106 !important;
    }

    /* Plaque layering */
    .player-plaque-wrapper {
        position: relative !important;
        z-index: 50 !important;
    }

    /* Opponent cards display */
    .seat .player-cards {
        position: absolute !important;
        top: -32px !important;
        bottom: auto !important;
        left: 0 !important;
        right: 0 !important;
        margin: 0 auto !important;
        width: 70px !important;
        display: flex !important;
        justify-content: center !important;
        z-index: 1 !important;
        transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    }

    /* Opponent card reveal */
    .seat .player-cards.opponent-reveal {
        width: 95px !important;
        top: -45px !important;
        z-index: 999 !important;
        filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.5)) !important;
    }

    /* Reveal card sizing */
    .seat .player-cards.opponent-reveal .card {
        width: 55px !important;
        height: 77px !important;
        margin-right: -15px !important;
    }

    .seat .player-cards.opponent-reveal .card:last-child {
        margin-right: 0 !important;
    }

    /* Standard opponent card sizing */
    .seat .player-cards .card {
        width: 42px !important;
        height: 59px !important;
        transform: none !important;
    }

    /* Card fan effect */
    .seat .player-cards .card:first-child {
        transform: rotate(-10deg) translateY(5px) !important;
        margin-right: -16px !important;
    }

    .seat .player-cards .card:last-child {
        transform: rotate(10deg) translateY(5px) !important;
        margin-left: 0 !important;
    }

    /* Mobile landscape seat alignment */
    .visual-2,
    .visual-3,
    .visual-4,
    .visual-5,
    .visual-6,
    .visual-7,
    .visual-8 {
        margin-top: 0 !important;
        margin-left: 0 !important;
        bottom: auto !important;
        right: auto !important;
    }

    body[data-max-seats="6"] .visual-0>div {
        transform: translateY(18px) !important;
    }

    body[data-max-seats="6"] .visual-1>div {
        transform: translate(-18px, 14px) !important;
    }

    body[data-max-seats="6"] .visual-2>div {
        transform: translate(-18px, -10px) !important;
    }

    body[data-max-seats="6"] .visual-3>div {
        transform: translateY(-16px) !important;
    }

    body[data-max-seats="6"] .visual-4>div {
        transform: translate(18px, -10px) !important;
    }

    body[data-max-seats="6"] .visual-5>div {
        transform: translate(18px, 14px) !important;
    }

    body[data-max-seats="9"] .visual-0>div {
        transform: translateY(18px) !important;
    }

    body[data-max-seats="9"] .visual-1>div {
        transform: translate(-16px, 14px) !important;
    }

    body[data-max-seats="9"] .visual-2>div {
        transform: translateX(-22px) !important;
    }

    body[data-max-seats="9"] .visual-3>div {
        transform: translate(-18px, -10px) !important;
    }

    body[data-max-seats="9"] .visual-4>div {
        transform: translate(-8px, -14px) !important;
    }

    body[data-max-seats="9"] .visual-5>div {
        transform: translate(8px, -14px) !important;
    }

    body[data-max-seats="9"] .visual-6>div {
        transform: translate(18px, -10px) !important;
    }

    body[data-max-seats="9"] .visual-7>div {
        transform: translateX(22px) !important;
    }

    body[data-max-seats="9"] .visual-8>div {
        transform: translate(16px, 14px) !important;
    }

    /* Hero hand */
    #hero-hand-display {
        position: absolute !important;
        bottom: -35px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        z-index: 30 !important;
        gap: 0 !important;
        width: max-content !important;
    }

    /* Hero cards */
    #hero-hand-display .card {
        width: 82px !important;
        height: 115px !important;
        transform-origin: bottom center !important;
        box-shadow: 0 -3px 10px rgba(0, 0, 0, 0.5) !important;
        transform: none !important;
    }

    /* Authentic Overlap Effect (Fan) */
    #hero-hand-display .card:first-child {
        transform: rotate(-5deg) translateY(5px) !important;
        margin-right: -45px !important;
    }

    #hero-hand-display .card:last-child {
        transform: rotate(5deg) translateY(5px) !important;
        margin-left: 0 !important;
    }

    /* Watermark Refinement for Mobile */
    #table-watermark {
        font-size: 35px !important;
        opacity: 0.6 !important;
    }
    #table-tagline {
        font-size: 12px !important;
        opacity: 0.6 !important;
    }
    #table-watermark-logo {
        max-width: 120px !important;
        max-height: 60px !important;
        opacity: 0.55 !important;
    }

    /* Central Game Status & Messages */
    #game-status,
    #status-message,
    .status-overlay,
    #countdown-display,
    #game-message {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        width: auto !important;
        max-width: 80% !important;
        text-align: center !important;
        font-size: 28px !important;
        line-height: 1.2 !important;
        margin: 0 !important;
        padding: 0 !important;
        z-index: 50 !important;
    }

    /* Viewport Fixed Controls (Mobile Landscape) */
    #mute-btn {
        position: fixed !important;
        top: 50% !important;
        left: 10px !important;
        width: 40px !important;
        height: 40px !important;
        font-size: 16px !important;
        transform: translateY(-50%) !important;
        z-index: 1000 !important;
    }

    #theme-toggle-btn {
        position: fixed !important;
        top: 10px !important;
        left: 60px !important;
        width: 40px !important;
        height: 40px !important;
        font-size: 16px !important;
        z-index: 1000 !important;
    }

    /* Chat toggle */
    #mobile-chat-btn {
        position: fixed !important;
        right: 15px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        width: 48px !important;
        height: 48px !important;
        background: rgba(15, 15, 20, 0.75) !important;
        backdrop-filter: blur(5px) !important;
        border: 1px solid rgba(255, 255, 255, 0.15) !important;
        border-radius: 50% !important;
        box-shadow:
            0 4px 15px rgba(0, 0, 0, 0.6),
            inset 0 1px 2px rgba(255, 255, 255, 0.1) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        z-index: 1000 !important;
        cursor: pointer !important;
        color: #fff !important;
        transition:
            transform 0.1s ease,
            background 0.2s ease !important;
    }

    /* Interaction feedback */
    #mobile-chat-btn:active {
        transform: translateY(-50%) scale(0.9) !important;
        background: rgba(30, 30, 40, 0.9) !important;
    }

    /* SVG Icon Styling for Chat Toggle */
    #mobile-chat-btn svg {
        width: 22px !important;
        height: 22px !important;
        stroke: #fff !important;
        filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.5)) !important;
    }

    /* Full-Height Mobile Chat Sidebar */
    #chat-container {
        position: fixed !important;
        top: 0 !important;
        bottom: auto !important;
        right: -340px !important;
        width: min(320px, calc(var(--mobile-viewport-width, 100vw) - 18px)) !important;
        height: var(--mobile-viewport-height, 100dvh) !important;
        background: rgba(15, 15, 15, 0.95) !important;
        border-radius: 0 !important;
        border-left: 1px solid rgba(255, 255, 255, 0.1) !important;
        border-top: 0 !important;
        border-bottom: 0 !important;
        z-index: 1001 !important;
        transition: right 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }

    #chat-container.open {
        right: 0 !important;
    }

    /* Chat scaling */
    #chat-container #chat-history {
        display: flex !important;
        flex: 1 !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow-y: auto !important;
        padding-bottom: 10px !important;
    }

    #chat-input-area {
        flex-shrink: 0 !important;
        gap: 6px !important;
        padding: 8px !important;
        background: rgba(0, 0, 0, 0.5) !important;
        border-radius: 0 !important;
    }

    #chat-input-area .chat-input-wrapper {
        min-width: 0 !important;
    }

    /* Reaction cluster keeps its own full-width row and stays tappable */
    #chat-input-area .table-reaction-bar {
        flex: 0 0 100% !important;
        margin: 0 !important;
    }

    #chat-input-area .table-reaction-btn {
        height: 34px !important;
        font-size: 18px !important;
    }

    #chat-input {
        min-width: 0 !important;
    }

    #chat-send {
        flex: 0 0 58px !important;
        min-width: 58px !important;
        margin-left: 0 !important;
        padding: 6px 8px !important;
    }

    #emoji-picker {
        left: 0 !important;
        bottom: calc(100% + 8px) !important;
        width: min(272px, calc(100vw - 28px)) !important;
        max-height: calc(var(--mobile-viewport-height, 100dvh) - 76px) !important;
        overflow-y: auto !important;
        grid-template-columns: repeat(5, 42px) !important;
        justify-content: center !important;
        gap: 8px !important;
        padding: 10px !important;
        border-radius: 10px !important;
        transform-origin: bottom left !important;
    }

    .emoji-item:hover {
        transform: scale(1.12) translateY(-2px) !important;
    }

    .emoji-item img {
        width: 36px !important;
        height: 36px !important;
    }

    /* Sidebar */

    /* Sidebar Ghost Drawer (Mobile) */
    #theme-sidebar {
        position: fixed !important;
        top: 0 !important;
        left: -300px !important;
        width: 250px !important;
        height: 100vh !important;
        padding: 20px 15px 15px 15px !important;
        overflow-y: auto !important;
        scrollbar-width: none !important;
        z-index: 10000 !important;
        transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    }

    /* Active State */
    #theme-sidebar.open {
        left: 0 !important;
    }

    /* Close button */
    #sidebar-close-btn,
    .sidebar-close-btn {
        position: absolute !important;
        top: 15px !important;
        right: 15px !important;
        background: transparent !important;
        border: none !important;
        color: #fff !important;
        cursor: pointer !important;
        padding: 5px !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        transition: background-color 0.2s !important;
    }

    #sidebar-close-btn:hover,
    .sidebar-close-btn:hover {
        background-color: rgba(255, 255, 255, 0.1) !important;
    }

    #sidebar-close-btn svg,
    .sidebar-close-btn svg {
        width: 18px !important;
        height: 18px !important;
    }

    /* Tightened Sidebar Typography */
    #theme-sidebar h3 {
        font-size: 16px !important;
        margin-top: 0 !important;
        margin-bottom: 8px !important;
        padding-right: 35px !important;
    }

    /* Sidebar Compaction & Section Styling */
    .theme-section-title {
        font-size: 11px !important;
        margin-top: 12px !important;
        margin-bottom: 8px !important;
        padding-bottom: 3px !important;
    }

    .theme-options-grid {
        gap: 8px !important;
        margin-bottom: 12px !important;
    }

    .color-btn {
        height: 32px !important;
        border-radius: 6px !important;
    }

    .color-btn[data-type="chip"] {
        width: 32px !important;
        height: 32px !important;
    }

    /* UI Ghosting Effect when Sidebar is Open */
    body:has(#theme-sidebar.open) #mute-btn,
    body:has(#theme-sidebar.open) #theme-toggle-btn {
        opacity: 0 !important;
        pointer-events: none !important;
        transform: scale(0.8) !important;
    }

    /* Dealer Button (Puck) Mobile Scaling */
    .puck {
        width: 18px !important;
        height: 18px !important;
        font-size: 8px !important;
    }

    body[data-max-seats="6"] .visual-0 .player-plaque-wrapper .pucks-container,
    body[data-max-seats="9"] .visual-0 .player-plaque-wrapper .pucks-container {
        top: 8px !important;
    }

    body[data-max-seats="6"] .visual-5 .player-plaque-wrapper .pucks-container {
        top: calc(100% + 8px) !important;
    }

    /* Community Cards Native Scaling */
    #board,
    .community-cards,
    .board,
    #board-container {
        transform: none !important;
        scale: 1 !important;
    }

    #board .card,
    .community-cards .card,
    .board .card,
    .board-card {
        transform: none !important;
        scale: 1 !important;
        width: 70px !important;
        height: 100px !important;
    }
}

/* Bet container styling */
.seat .bet-container,
.player-plaque-wrapper .bet-container,
.player-cards .bet-container,
.bet-container {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 20 !important;
    position: absolute !important;
    pointer-events: none !important;
}

/* Chat Notification Badge */
.chat-badge {
    position: absolute !important;
    top: -4px !important;
    left: -4px !important;
    background: #e53935 !important;
    color: #fff !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    width: 18px !important;
    height: 18px !important;
    border-radius: 50% !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.6) !important;
    border: 1px solid #ffcdd2 !important;
    z-index: 10 !important;
    pointer-events: none !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
}

.chat-badge.active {
    display: flex !important;
}

/* Hero Seat Cleanup (Hiding duplicates) */
.seat.is-hero .player-cards,
.seat.is-hero .card-container,
.seat.is-hero .small-cards {
    display: none !important;
}

/* iPhone & small-height mobile - use CSS transform scale for perfect fit */
@media (max-width: 950px) and (orientation: landscape) and (max-height: 500px) {
    /* Hide inline chat — only show via toggle button */
    #chat-container:not(.open) {
        display: none !important;
    }
}

/* Portrait Orientation Warning Interface */
.portrait-warning {
    display: none;
}

/* Preview mode is embedded in the admin BrandingView iframe
 * which is ~500px wide on desktop split-view layouts. Without this
 * override the lobby fires the portrait-orientation warning (because
 * the iframe is taller than wide AND width <= 950) and the operator
 * sees "ROTATE DEVICE" instead of the actual branding preview. The
 * rest of the lobby layout copes fine at narrow widths thanks to the
 * existing mobile media queries. */
body[data-preview="true"] .portrait-warning {
    display: none !important;
}

/* L'iframe admin est un aperçu visuel uniquement. On
 * masque les contrôles et overlays joueur qui polluent la preview. */
body[data-preview="true"] #theme-toggle-btn,
body[data-preview="true"] #mute-btn,
body[data-preview="true"] #mobile-chat-btn,
body[data-preview="true"] #chat-container,
body[data-preview="true"] #theme-sidebar,
body[data-preview="true"] #display-name-modal {
    display: none !important;
}

/* Narrowed from max-width 950 to 600 so iPad portrait
   (768x1024) and other tablet portraits render the lobby normally
   instead of seeing the "rotate device" overlay. True-phone portrait
   (≤600px wide) keeps the rotate-warning since the table doesn't
   fit landscape-only seat plaque scaling. */
@media (max-width: 600px) and (orientation: portrait) {
    body:not([data-orientation-lock="active"]) .portrait-warning {
        display: flex !important;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background-color: #0a0a0c !important;
        z-index: 9999999 !important;
        color: #fff;
        text-align: center;
        padding: 20px;
    }

    .portrait-warning .rotate-icon {
        width: 80px !important;
        height: 80px !important;
        margin-bottom: 20px !important;
        color: #e53935 !important;
        animation: rotatePhone 2s infinite ease-in-out !important;
    }

    .portrait-warning h2 {
        font-size: 28px !important;
        margin-bottom: 10px !important;
        text-transform: uppercase !important;
        letter-spacing: 2px !important;
        color: #fbc02d !important;
        font-family: Arial, sans-serif !important;
    }

    .portrait-warning p {
        font-size: 15px !important;
        color: #aaa !important;
        max-width: 80% !important;
        line-height: 1.5 !important;
        font-family: Arial, sans-serif !important;
    }
}

/* Rotation Animation for Portrait Warning */
@keyframes rotatePhone {
    0% {
        transform: rotate(0deg);
    }

    50% {
        transform: rotate(-90deg);
    }

    100% {
        transform: rotate(-90deg);
    }
}

/* Critical Visibility Management (Portrait Lock) */
/* Narrowed from max-width 950 to 600 so iPad portrait
   (768x1024) and other tablet portraits render the lobby normally
   instead of seeing the "rotate device" overlay. True-phone portrait
   (≤600px wide) keeps the rotate-warning since the table doesn't
   fit landscape-only seat plaque scaling. */
@media (max-width: 600px) and (orientation: portrait) {
    body:not([data-preview="true"]):not([data-orientation-lock="active"])>*:not(.portrait-warning) {
        display: none !important;
    }
}


/* ============================================================
   Safe-area-inset hardening for notched landscape devices
   Pushes all position:fixed UI elements away from the Dynamic
   Island, notch and home indicator. iPhone 17 Pro Max landscape
   reports inset-left ≈ 59px / inset-bottom ≈ 21px.
   No-op on desktop & non-notched devices (env() resolves to 0).
   The 0px fallback guards against env() unsupported browsers.
   ============================================================ */
@media (max-width: 950px) and (orientation: landscape) {

    /* 1. Bottom action docks (split L/R preserved — only paddings grow) */
    #action-bar,
    #pre-action-bar {
        /* Garde les insets dans la largeur fixe du dock. */
        box-sizing: border-box !important;
        padding-left:   calc(15px + env(safe-area-inset-left,   0px)) !important;
        padding-right:  calc(15px + env(safe-area-inset-right,  0px)) !important;
        padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)) !important;
    }

    /* 2. Fixed controls (mute centered left, theme settings top-left) */
    #mute-btn {
        top: calc(50% + env(safe-area-inset-top, 0px) - env(safe-area-inset-top, 0px)) !important;
        left: calc(10px + env(safe-area-inset-left, 0px)) !important;
    }
    #theme-toggle-btn {
        top:  calc(10px + env(safe-area-inset-top,  0px)) !important;
        left: calc(60px + env(safe-area-inset-left, 0px)) !important;
    }

    /* Bot controls removed entirely (admin-only bot
       management via Initial bots field + bots panel). Numbering kept
       intentionally to mirror the iPhone safe-area zone map. */

    /* 4. Top-left back-to-lobby (display:none today; hardened for future
          admin lobby-URL support) */
    #back-to-lobby {
        top:  calc(12px + env(safe-area-inset-top,  0px)) !important;
        left: calc(16px + env(safe-area-inset-left, 0px)) !important;
    }

    /* 5. Right-middle chat toggle */
    #mobile-chat-btn {
        right: calc(15px + env(safe-area-inset-right, 0px)) !important;
    }

    /* 6. Right drawer chat container (closed shifts deeper off-screen;
          open hugs the right inset; padding-bottom keeps messages
          clear of the home indicator) */
    #chat-container {
        /* Empêche le padding safe-area d'étirer le drawer hors écran. */
        box-sizing: border-box !important;
        right: calc(-320px - env(safe-area-inset-right, 0px)) !important;
        padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    }
    #chat-container.open {
        right: env(safe-area-inset-right, 0px) !important;
    }

    /* 7. Left drawer theme sidebar (mirror of chat-container — left
          notch is the most common Dynamic Island position in landscape
          rotation horaire on iPhone 17 Pro Max) */
    #theme-sidebar {
        /* Empêche le padding safe-area d'étirer le drawer hors écran. */
        box-sizing: border-box !important;
        left: calc(-300px - env(safe-area-inset-left, 0px)) !important;
        padding-top:    calc(20px + env(safe-area-inset-top,    0px)) !important;
        padding-bottom: calc(15px + env(safe-area-inset-bottom, 0px)) !important;
    }
    #theme-sidebar.open {
        left: env(safe-area-inset-left, 0px) !important;
    }
}

/* Tablet chat drawer (951-1280px).
   On iPad 1024 landscape the desktop chat
   console (fixed bottom-right 320x250) overlaps the table felt and
   covers seat plaques + dealer button. Tablets sit between mobile
   (≤950 landscape) and desktop (≥1281 unchanged), so
   without a dedicated breakpoint they inherit the desktop console.
   Apply the same right-side drawer + circular toggle as mobile,
   scoped tightly to NOT touch desktop ≥1281 nor the existing mobile
   rules below 950. Covers iPad portrait (768x1024 — width within
   range), iPad landscape (1024x768), iPad Pro (1024 portrait / 1366
   landscape excluded). */
@media (min-width: 601px) and (max-width: 1280px) {
    #mobile-chat-btn {
        display: flex !important;
        position: fixed !important;
        right: 15px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        width: 48px !important;
        height: 48px !important;
        background: rgba(15, 15, 20, 0.75) !important;
        backdrop-filter: blur(5px) !important;
        border: 1px solid rgba(255, 255, 255, 0.15) !important;
        border-radius: 50% !important;
        box-shadow:
            0 4px 15px rgba(0, 0, 0, 0.6),
            inset 0 1px 2px rgba(255, 255, 255, 0.1) !important;
        align-items: center !important;
        justify-content: center !important;
        z-index: 1000 !important;
        cursor: pointer !important;
        color: #fff !important;
        transition:
            transform 0.1s ease,
            background 0.2s ease !important;
    }
    #mobile-chat-btn:active {
        transform: translateY(-50%) scale(0.9) !important;
        background: rgba(30, 30, 40, 0.9) !important;
    }
    #mobile-chat-btn svg {
        width: 22px !important;
        height: 22px !important;
        stroke: #fff !important;
        filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.5)) !important;
    }
    #chat-container {
        position: fixed !important;
        top: 0 !important;
        bottom: 0 !important;
        right: -340px !important;
        width: 320px !important;
        height: 100vh !important;
        background: rgba(15, 15, 15, 0.95) !important;
        border: none !important;
        border-radius: 0 !important;
        border-left: 1px solid rgba(255, 255, 255, 0.1) !important;
        z-index: 1001 !important;
        transition: right 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    }
    #chat-container.open {
        right: 0 !important;
    }
    #chat-container #chat-history {
        flex: 1 !important;
        max-height: none !important;
        overflow-y: auto !important;
        padding-bottom: 10px !important;
    }
    /* Hide chat badge on tablet — same as mobile, the toggle button
       already conveys chat presence. */
}