/* Poker Table Styles */
.poker-table-container {
    background-color: #1a5f3f;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    max-width: 1200px;
    margin: 0 auto;
    max-height: calc(100vh - 120px);
    display: flex;
    flex-direction: column;
}

/* Compact info bar at bottom of table */
.game-info-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.25rem 0.75rem;
    background-color: #2c3e50;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.75rem;
    flex-shrink: 0;
}

.poker-table-surface {
    padding: 0.5rem;
    position: relative;
    min-height: auto;
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Players displayed in a horizontal scrollable bar */
.players-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    justify-content: center;
    padding: 0.25rem 0;
}

/* Center area: community cards + pot inline */
.table-center-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 0.5rem 0;
}

.pot-and-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.125rem;
}

.bet-to-call {
    font-size: 0.75rem;
    opacity: 0.9;
}

/* Legacy grid layout - kept for backwards compat */
.table-layout-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(5, minmax(56px, 1fr));
    gap: 0.5rem;
    min-height: auto;
    isolation: isolate;
}

.table-oval {
    grid-column: 1 / -1;
    grid-row: 1 / -1;
    background: radial-gradient(circle at 50% 50%, rgba(46, 204, 113, 0.25), rgba(26, 95, 63, 0.9)),
                linear-gradient(135deg, #1d724c, #0f3f2c);
    border: 2px solid rgba(255, 255, 255, 0.08);
    border-radius: 50% / 35%;
    box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.55), 0 12px 30px rgba(0, 0, 0, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 1.5rem;
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.table-oval::before {
    content: "";
    position: absolute;
    inset: 1rem;
    border-radius: inherit;
    border: 1px dashed rgba(255, 255, 255, 0.15);
    box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.4);
}

/* Playing Card Styles */
.playing-card {
    background-color: white;
    color: #1a1a1a;
    border-radius: 6px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
    width: 60px;
    height: 84px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    font-weight: bold;
    padding: 0.35rem;
    text-align: center;
    word-break: break-word;
}

.playing-card-large {
    background-color: white;
    color: #1a1a1a;
    border-radius: 6px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
    width: 60px;
    height: 84px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: bold;
    padding: 0.5rem;
    text-align: center;
    word-break: break-word;
}

.playing-card-back {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: transparent;
}

/* Card Image Styles */
.card-img {
    width: 60px;
    height: 84px;
    border-radius: 6px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
    object-fit: cover;
    display: inline-block;
}

.card-img-small {
    width: 40px;
    height: 56px;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    object-fit: cover;
    display: inline-block;
}

.playing-card-small {
    background-color: white;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    width: 40px;
    height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    font-weight: bold;
}

.player-hole-cards {
    display: flex;
    gap: 0.25rem;
    justify-content: center;
    margin-top: 0.5rem;
}

.community-cards-container {
    display: flex;
    justify-content: center;
    margin-bottom: 0.5rem;
}

.hole-cards-container {
    margin-top: auto;
    padding-top: 0.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

/* Action Section Wrapper - Sticky at Bottom */
#action-section-wrapper {
    margin-top: auto;
    padding: 0.5rem 1rem;
    background-color: rgba(0, 0, 0, 0.3);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
}

#action-section-wrapper h3 {
    margin: 0 0 0.25rem 0;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.7);
}

/* Action buttons in a horizontal row, not full-width stacked */
#action-buttons form {
    display: flex;
    gap: 0.5rem;
    flex-wrap: nowrap;
    align-items: center;
}

#action-buttons form button {
    flex: 1;
    padding: 0.5rem 1rem;
    margin: 0;
    white-space: nowrap;
}

/* Player Position Styles */
.players-ring {
    grid-column: 1 / -1;
    grid-row: 1 / -1;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(5, minmax(56px, 1fr));
    gap: 0.5rem;
    position: relative;
    z-index: 2;
}

.player-position {
    background-color: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    padding: 0.375rem 0.5rem;
    position: relative;
    transition: all 0.3s ease;
}

.player-position.active {
    border-color: #e74c3c;
    box-shadow: 0 0 12px rgba(231, 76, 60, 0.4);
    background-color: rgba(231, 76, 60, 0.1);
}

.player-position.current-user {
    background-color: rgba(46, 204, 113, 0.2);
    border-color: rgba(46, 204, 113, 0.5);
}

.player-position.active-turn {
    border-color: #27ae60;
    box-shadow: 0 0 16px rgba(39, 174, 96, 0.6);
    background-color: rgba(39, 174, 96, 0.15);
    animation: pulse-border 2s ease-in-out infinite;
}

.player-position.folded {
    opacity: 0.5;
    filter: grayscale(80%);
    border-color: rgba(255, 255, 255, 0.1);
}

.player-position.all-in {
    border-color: #f39c12;
    box-shadow: 0 0 12px rgba(243, 156, 18, 0.5);
    background-color: rgba(243, 156, 18, 0.1);
}

@keyframes pulse-border {
    0%, 100% {
        box-shadow: 0 0 16px rgba(39, 174, 96, 0.6);
    }
    50% {
        box-shadow: 0 0 24px rgba(39, 174, 96, 0.9);
    }
}

.waiting-message {
    padding: 1rem;
    background-color: rgba(52, 152, 219, 0.1);
    border-left: 4px solid #3498db;
    border-radius: 4px;
    animation: fadeIn 0.5s ease;
}

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

@keyframes cardFlip {
    0% {
        transform: rotateY(180deg);
        opacity: 0;
    }
    100% {
        transform: rotateY(0deg);
        opacity: 1;
    }
}

.card-flip-reveal {
    animation: cardFlip 0.3s ease-out;
    transform-style: preserve-3d;
}

.player-name {
    font-weight: bold;
    font-size: 0.875rem;
    color: white;
    margin-bottom: 0.25rem;
}

.player-chips {
    font-size: 0.75rem;
    color: #fff;
    margin-bottom: 0.25rem;
}

.player-bet {
    font-size: 0.75rem;
    color: #e0e0e0;
}

.player-status {
    font-size: 0.75rem;
    margin-top: 0.25rem;
}

/* Dealer and Blind Indicators */
.dealer-button,
.blind-indicator {
    position: absolute;
    top: -10px;
    right: -10px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: bold;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.dealer-button {
    background-color: var(--pwf-warning);
    color: white;
}

.blind-indicator {
    background-color: var(--pwf-info);
    color: white;
    width: 32px;
    height: 32px;
    font-size: 0.65rem;
}

.sb-indicator {
    right: auto;
    left: -10px;
}

.bb-indicator {
    right: 30px;
}

/* Table Center Styles */
.table-center {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem;
    width: 100%;
    max-width: 560px;
    background-color: rgba(0, 0, 0, 0.25);
    border-radius: 18px;
    box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.35);
}

.pot-display {
    text-align: center;
    color: white;
    font-size: 1rem;
}

.betting-round-display {
    font-size: 0.875rem;
    color: #fff;
    text-align: center;
}

/* Player Position Layout */
.player-pos-0 { grid-column: 3; grid-row: 1; }
.player-pos-1 { grid-column: 4; grid-row: 1; }
.player-pos-2 { grid-column: 5; grid-row: 2; }
.player-pos-3 { grid-column: 5; grid-row: 4; }
.player-pos-4 { grid-column: 4; grid-row: 5; }
.player-pos-5 { grid-column: 3; grid-row: 5; }
.player-pos-6 { grid-column: 2; grid-row: 5; }
.player-pos-7 { grid-column: 1; grid-row: 4; }
.player-pos-8 { grid-column: 1; grid-row: 2; }
.player-pos-9 { grid-column: 2; grid-row: 1; }

/* Responsive Design */
@media (max-width: 768px) {
    .poker-table-surface {
        padding: 0.375rem;
    }

    .card-img-small {
        width: 32px;
        height: 45px;
    }

    .playing-card-small {
        width: 32px;
        height: 45px;
    }

    .dealer-button,
    .blind-indicator {
        width: 24px;
        height: 24px;
        font-size: 0.65rem;
    }
}

@media (max-width: 480px) {
    .poker-table-surface {
        padding: 0.5rem;
        gap: 0.75rem;
        min-height: auto;
    }

    .table-layout-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(4, minmax(44px, 1fr));
        min-height: auto;
    }

    .table-oval {
        padding: 1rem 1.25rem;
        border-radius: 50% / 40%;
    }

    .playing-card {
        width: 45px;
        height: 63px;
        font-size: 1rem;
    }

    .playing-card-large {
        width: 45px;
        height: 63px;
        font-size: 1.125rem;
    }

    .card-img {
        width: 45px;
        height: 63px;
    }

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

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

    .players-ring {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(5, minmax(44px, 1fr));
        gap: 0.5rem;
    }

    .pot-display {
        font-size: 1rem;
    }

    .betting-round-display {
        font-size: 0.7rem;
    }

    .player-position {
        padding: 0.375rem;
    }
}

/* ------------------------------------------------------------------
   Game UI (FE-5, FE-7, FE-10, FE-11, FE-22, TEST-7). The partials use
   these classes instead of inline colours, so both themes work and the
   strict CSP of W5 needs no inline styles for them.
   The felt (#1a5f3f) is dark in both themes: text on it uses the
   --pwf-on-felt-* colours, which keep >= 4.5:1 against the felt and the
   darker action bar.
   ------------------------------------------------------------------ */
:root {
    --pwf-on-felt: #f4f6f7;
    /* Chat panel: a dark slate in both themes, with light text on it. */
    --pwf-chat-surface: #2c3e50;
    --pwf-on-felt-muted: #d5dbdb;
    --pwf-on-felt-success: #a9f5c4;
    --pwf-on-felt-info: #bfe3ff;
    --pwf-on-felt-warning: #ffe08a;
    --pwf-on-felt-danger: #ffc9c2;
    --pwf-spectating: #7d3c98;
    --pwf-spectating-text: #7d3c98;
    --pwf-row-highlight: #d9f2e1;
}

@media only screen and (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --pwf-row-highlight: #173a26;
        --pwf-spectating-text: #d7b4ea;
    }
}

[data-theme="dark"] {
    --pwf-row-highlight: #173a26;
    --pwf-spectating-text: #d7b4ea;
}

/* Text tones. On the felt they use the light variants. */
.tone-success { color: var(--pwf-success-text); }
.tone-danger { color: var(--pwf-danger-text); }
.tone-info { color: var(--pwf-info-text); }
.tone-warning { color: var(--pwf-warning); }
.tone-muted { color: var(--pico-muted-color); }
.tone-spectating { color: var(--pwf-spectating-text); }
.tone-info-text { color: var(--pwf-info-text); }
.tone-danger-text { color: var(--pwf-danger-text); font-weight: bold; }

.poker-table-container .tone-success,
.chat-section .tone-success { color: var(--pwf-on-felt-success); }
.poker-table-container .tone-danger,
.chat-section .tone-danger { color: var(--pwf-on-felt-danger); }
.poker-table-container .tone-info,
.chat-section .tone-info { color: var(--pwf-on-felt-info); }
.poker-table-container .tone-warning,
.chat-section .tone-warning { color: var(--pwf-on-felt-warning); }
.poker-table-container .tone-muted,
.chat-section .tone-muted { color: var(--pwf-on-felt-muted); }

/* Shared page layout helpers */
.badge-row,
.button-row {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.button-row-spaced {
    margin-top: 1rem;
}

.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.inline-indicator-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.inline-form {
    display: inline;
    margin: 0;
}

.inline-form button {
    margin: 0;
}

.narrow-form {
    max-width: 400px;
}

.text-muted-note {
    color: var(--pico-muted-color);
    font-style: italic;
}

.page-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.page-loading {
    margin-bottom: 1rem;
}

.page-footer-link {
    margin-top: 0.5rem;
    text-align: center;
}

.page-footer-link-spaced {
    margin-top: 2rem;
}

.subtle-link {
    font-size: 0.875rem;
    color: var(--pico-muted-color);
}

.balance-figure {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--pwf-success-text);
}

.inline-avatar {
    margin-right: 0.5rem;
    vertical-align: middle;
}

.status-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: var(--pico-border-radius);
    font-size: 0.875rem;
    color: #fff;
    background-color: var(--pwf-neutral-hover);
}

.status-badge-neutral { background-color: var(--pwf-neutral) !important; }
.status-badge-warning { background-color: var(--pwf-warning) !important; }
.status-badge-spectating { background-color: var(--pwf-spectating) !important; }

/* Result tables: the viewer's own row, and net results */
tr.row-current-user,
tr.row-current-user > td {
    background-color: var(--pwf-row-highlight);
}

tr.row-muted > td {
    color: var(--pico-muted-color);
    font-style: italic;
}

.net-positive { color: var(--pwf-success-text); }
.net-negative { color: var(--pwf-danger-text); }
.net-even { color: var(--pico-muted-color); }

.admin-warning-text {
    color: var(--pwf-danger-text);
    font-weight: bold;
    margin: 0;
}

.share-link-row {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.share-link-row input {
    flex: 1;
    margin: 0;
}

.share-link-row button {
    width: auto;
    margin: 0;
}

.copy-status:empty {
    display: none;
}

/* Game cards (FE-5): a link styled as a card, with a visible focus ring */
a.game-card {
    display: block;
    color: var(--pico-color);
    text-decoration: none;
    background: var(--pico-card-background-color);
    padding: 16px;
    margin-bottom: 8px;
    border-radius: 4px;
    border-left: 4px solid var(--game-card-accent, var(--pwf-neutral));
}

a.game-card:hover {
    background: var(--pwf-surface-hover);
}

a.game-card:focus-visible {
    outline: 3px solid var(--pico-primary-focus, var(--pwf-info));
    outline-offset: 2px;
}

.game-card-title {
    display: block;
    font-weight: bold;
    margin-bottom: 4px;
}

.game-card-meta {
    display: block;
    font-size: 0.9rem;
    color: var(--pico-muted-color);
}

.game-card-avatars {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    flex-wrap: wrap;
}

.game-card-avatars .game-card-meta {
    display: inline;
}

.game-card-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--pwf-surface-muted);
    background: var(--pwf-surface-muted);
}

.game-card-dates {
    margin-top: 4px;
}

.game-card-summary {
    display: block;
    font-size: 0.9rem;
    margin-top: 6px;
}

/* Live-update status (FE-10) */
.live-status {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    min-height: 0;
}

.sse-indicator-connecting {
    background-color: var(--pwf-neutral);
}

.sse-banner {
    flex: 1;
    margin: 0 0 0.25rem;
    padding: 0.25rem 0.75rem;
    border-radius: 4px;
    background-color: var(--pwf-warning);
    color: #fff;
    font-size: 0.875rem;
    text-align: center;
}

/* Table text */
.card-row,
.card-row[role="group"] {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    width: auto;
    margin-bottom: 0;
    box-shadow: none;
}

.card-row[role="group"] > * {
    flex: 0 0 auto;
    border-radius: 6px;
}

.card-row-wrap {
    flex-wrap: wrap;
}

.table-label {
    font-size: 0.75rem;
}

.player-position .player-bet {
    color: var(--pwf-on-felt);
}

.table-note {
    color: var(--pwf-on-felt);
    font-style: italic;
    text-align: center;
    margin: 0;
}

.raise-count {
    font-size: 0.875rem;
    font-style: normal;
    margin-top: 0.5rem;
}

.review-clock {
    text-align: center;
    font-size: 0.85rem;
    color: var(--pwf-on-felt);
    margin-top: 0.5rem;
}

.review-clock p {
    margin: 0;
    color: var(--pwf-on-felt);
}

.review-clock-form {
    margin: 0.5rem 0 0 0;
}

.table-small-button {
    padding: 6px 16px;
    font-size: 0.85rem;
    margin: 0;
}

.hole-cards-label {
    font-size: 0.75rem;
    font-weight: bold;
    text-align: center;
    color: var(--pwf-on-felt);
}

.hole-cards-status {
    font-size: 1rem;
    font-weight: bold;
    color: var(--pwf-on-felt-muted);
}

.player-avatar {
    margin-bottom: 0.25rem;
}

.seat-status {
    font-size: 0.75rem;
}

.seat-status-strong {
    font-weight: bold;
}

.waiting-message .table-note {
    margin: 0;
}

.optimistic-message.tone-danger { border-left-color: var(--pwf-danger); }
.optimistic-message.tone-success { border-left-color: var(--pwf-success); }
.optimistic-message.tone-info { border-left-color: var(--pwf-info); }

.poker-table-container .optimistic-message {
    background-color: rgba(0, 0, 0, 0.35);
}

#action-section-wrapper #action-buttons h3 {
    font-size: 0.875rem;
    margin: 0 0 0.25rem 0;
}

.turn-clock {
    font-weight: normal;
    color: var(--pwf-on-felt);
}

.raise-cap-notice {
    font-size: 0.75rem;
}

.action-section-review {
    text-align: center;
    padding: 16px;
}

.action-section-review .table-note {
    font-style: normal;
    margin: 0 0 12px 0;
}

.continue-button {
    background: var(--pwf-success);
    color: #fff;
    border: none;
    padding: 10px 24px;
    border-radius: 6px;
    font-size: 1rem;
    font-weight: 600;
    width: auto;
}

.continue-button:hover {
    background: var(--pwf-success-hover);
}

/* TEST-7: an eliminated seat has no live highlight, even the viewer's own */
.player-position.eliminated,
.player-position.eliminated.current-user {
    border-color: rgba(255, 255, 255, 0.15);
    background-color: rgba(0, 0, 0, 0.2);
    box-shadow: none;
    animation: none;
    opacity: 0.6;
}

/* Hand result banner */
.hand-result-banner {
    background: rgba(0, 0, 0, 0.35);
    border: 2px solid var(--pwf-on-felt-success);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    margin: 0.75rem 0;
    text-align: center;
    color: var(--pwf-on-felt);
    animation: slideIn 0.3s ease;
}

.hand-result-heading {
    font-size: 1.125rem;
    font-weight: bold;
    color: var(--pwf-on-felt-success);
    margin-bottom: 0.25rem;
}

.hand-result-body {
    font-size: 1rem;
}

.hand-pots,
.hand-returns {
    list-style: none;
    padding: 0;
    margin: 0.25rem 0;
}

.hand-returns {
    font-size: 0.9em;
}

.hand-result-pots {
    font-size: 0.9rem;
    margin-top: 0.25rem;
    color: var(--pwf-on-felt-muted);
}

.hand-result-pots ul,
.hand-result-pots li {
    list-style: none;
    color: var(--pwf-on-felt-muted);
    margin-bottom: 0.15rem;
}

.hand-result-pots strong,
.hand-result-pots em {
    color: var(--pwf-on-felt);
}

.hand-result-continue {
    margin-top: 12px;
    text-align: center;
    font-style: normal;
}

/* Status section (outside the felt) */
.finish-place {
    font-style: italic;
}

/* Action error dialog (FE-22) */
.action-error-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: fadeIn 0.2s ease;
}

.action-error-dialog {
    background: var(--pico-card-background-color);
    color: var(--pico-color);
    border-radius: 8px;
    padding: 1.5rem 2rem;
    max-width: 400px;
    text-align: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.action-error-icon {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.action-error-title {
    font-size: 1.125rem;
    font-weight: bold;
    color: var(--pwf-danger-text);
    margin-bottom: 0.5rem;
}

.action-error-text {
    margin-bottom: 1rem;
}

.action-error-dialog button {
    width: auto;
    padding: 0.5rem 1.5rem;
}

/* Modals */
.raise-slider-group {
    margin: 1.5rem 0;
}

.modal-warning {
    color: var(--pwf-danger-text);
    margin-bottom: 1.5rem;
}

/* Notifications (FE-15): entries are links */
a.notification-item,
a.notification-dropdown-item {
    color: inherit;
    text-decoration: none;
}

a.notification-item:focus-visible,
a.notification-dropdown-item:focus-visible {
    outline: 3px solid var(--pwf-info);
    outline-offset: -3px;
}

.notification-content > span,
.notification-content > time,
.notification-dropdown-content > span,
.notification-dropdown-content > time {
    display: block;
}

.notification-content > .visually-hidden {
    display: inline;
}

/* The unread highlight is a tinted surface; muted grey text on it falls
   below 4.5:1 in the dark theme. */
.notification-item.unread .notification-item-message,
.notification-item.unread .notification-item-time {
    color: var(--pico-color);
}

.notifications-pager {
    display: flex;
    justify-content: space-between;
    margin-top: 1rem;
}

.notification-dropdown-header .btn-link {
    margin: 0;
    padding: 0;
    font-size: 0.75rem;
    width: auto;
}

/* Chat */
.chat-history {
    max-height: 400px;
    overflow-y: auto;
    padding: 1rem;
    border-radius: 4px;
    background: var(--pwf-chat-surface);
}

.chat-message-actions {
    margin-left: 0.25rem;
    white-space: nowrap;
}

.chat-message-actions .chat-action {
    padding: 0 0.35rem;
    font-size: 0.7rem;
    margin: 0;
    width: auto;
}

.chat-reported {
    font-size: 0.75rem;
    opacity: 0.85;
}

.chat-blocked-users {
    margin-top: 0.5rem;
    font-size: 0.8rem;
    color: var(--pwf-on-felt);
}

.chat-blocked-users ul {
    margin: 0.25rem 0 0;
    padding-left: 1rem;
}

.chat-blocked-users .chat-action {
    padding: 0 0.35rem;
    font-size: 0.7rem;
    margin: 0 0 0 0.25rem;
    width: auto;
}

.chat-message-avatar {
    margin-right: 0.5rem;
    vertical-align: middle;
}

/* Create-game form button row (w4-rules-forms) */
.create-game-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

/* Moderation buttons sit on the dark chat panel in both themes; Pico's
   outline colour (the theme primary) is too dark there in the light theme. */
.chat-section .chat-action.outline {
    color: var(--pwf-on-felt);
    border-color: var(--pwf-on-felt-muted);
    background-color: transparent;
}

.chat-section .chat-action.outline:hover,
.chat-section .chat-action.outline:focus-visible {
    background-color: rgba(255, 255, 255, 0.12);
}

/* ------------------------------------------------------------------
   Phase 3: Felt Ergonomics, Hero 6-O'Clock Arc, Radial Turn Ring,
   Mobile Thumb-Zone Dock, Pre-Actions & Opt-In 4-Color Deck
   ------------------------------------------------------------------ */
#community-cards {
    min-height: 84px;
    align-items: center;
}

@media (max-width: 480px) {
    #community-cards {
        min-height: 63px;
    }
}

/* Hero-centric seat ordering: opponents clockwise at top, Hero at 6 o'clock */
.players-bar .player-position[data-relative-seat="1"] { order: 1; }
.players-bar .player-position[data-relative-seat="2"] { order: 2; }
.players-bar .player-position[data-relative-seat="3"] { order: 3; }
.players-bar .player-position[data-relative-seat="4"] { order: 4; }
.players-bar .player-position[data-relative-seat="5"] { order: 5; }
.players-bar .player-position[data-relative-seat="6"] { order: 6; }
.players-bar .player-position[data-relative-seat="7"] { order: 7; }
.players-bar .player-position[data-relative-seat="8"] { order: 8; }
.players-bar .player-position[data-relative-seat="9"] { order: 9; }

.players-bar .player-position.is-hero-seat {
    order: 99;
}

/* Radial SVG turn timer ring around active player's avatar */
.player-avatar-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin-bottom: 0.2rem;
}

.player-avatar-wrap .player-avatar {
    margin-bottom: 0;
}

.turn-ring-svg {
    position: absolute;
    inset: -3px;
    width: 48px;
    height: 48px;
    transform: rotate(-90deg);
    pointer-events: none;
}

.turn-ring-bg {
    fill: none;
    stroke: rgba(255, 255, 255, 0.2);
    stroke-width: 3;
}

.turn-ring-fg {
    fill: none;
    stroke: #2ecc71;
    stroke-width: 3.5;
    stroke-linecap: round;
    stroke-dasharray: 100;
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 0.45s linear, stroke 0.25s ease;
}

.turn-ring-svg.turn-ring-urgent .turn-ring-fg {
    stroke: #e74c3c;
}

/* Pre-action toggle bar inside #waiting-message */
.pre-action-bar,
.pre-action-bar[role="group"] {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 0.5rem;
    margin-bottom: 0;
    box-shadow: none;
}

.optimistic-update .pre-action-bar {
    display: none;
}

.pre-action-bar[role="group"] > button.pre-action-toggle,
.pre-action-toggle {
    flex: 1 1 96px;
    min-height: 44px;
    padding: 0.4rem 0.75rem;
    margin: 0;
    font-size: 0.85rem;
    font-weight: 600;
    border-radius: 999px;
    color: var(--pwf-on-felt);
    border-color: rgba(255, 255, 255, 0.35);
    background: rgba(15, 23, 42, 0.45);
    transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}

.pre-action-toggle.is-active,
.pre-action-toggle[aria-pressed="true"] {
    background: #2563eb;
    border-color: #60a5fa;
    color: #fff;
    box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.35);
}

/* Opt-in 4-color deck (toggled via html[data-deck="four-color"]) */
html[data-deck="four-color"] [data-card$="d"],
html[data-deck="four-color"] [data-card$="D"] {
    border: 3px solid #2563eb;
    box-shadow: 0 0 0 1px #93c5fd, 0 4px 10px rgba(37, 99, 235, 0.45);
}

html[data-deck="four-color"] [data-card$="c"],
html[data-deck="four-color"] [data-card$="C"] {
    border: 3px solid #16a34a;
    box-shadow: 0 0 0 1px #86efac, 0 4px 10px rgba(22, 163, 74, 0.45);
}

html[data-deck="four-color"] [data-card$="h"],
html[data-deck="four-color"] [data-card$="H"] {
    border: 3px solid #dc2626;
    box-shadow: 0 0 0 1px #fca5a5, 0 4px 10px rgba(220, 38, 38, 0.45);
}

html[data-deck="four-color"] [data-card$="s"],
html[data-deck="four-color"] [data-card$="S"] {
    border: 3px solid #1e293b;
    box-shadow: 0 0 0 1px #cbd5e1, 0 4px 10px rgba(15, 23, 42, 0.5);
}

/* Mobile (< 768px): iPhone 4 No-Stretch Bottom Thumb-Zone Action Dock */
@media (max-width: 767px) {
    .poker-table-container {
        max-height: none;
    }

    #action-section-wrapper {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 900;
        padding: 0.5rem 0.75rem calc(0.5rem + env(safe-area-inset-bottom, 0px));
        background: #0f172a;
        border-top: 1px solid rgba(255, 255, 255, 0.16);
        box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.45);
    }

    #action-buttons form {
        gap: 0.5rem;
    }

    #action-buttons form button {
        min-height: 48px;
        font-size: 0.95rem;
        font-weight: 700;
        border-radius: 10px;
        padding: 0.5rem 0.65rem;
    }

    .waiting-message {
        padding: 0.5rem 0.75rem;
    }

    .hand-result-continue .continue-button,
    .review-clock-form [data-testid="force-continue-button"] {
        min-height: 48px;
        width: 100%;
        max-width: 320px;
        font-size: 1rem;
        font-weight: 700;
        border-radius: 10px;
    }
}

/* 1-Tap Stakes Presets on Create Game Form */
.stakes-preset-row,
.stakes-preset-row[role="group"] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
    box-shadow: none;
}

.stakes-preset-row[role="group"] > button.stakes-preset-btn,
.stakes-preset-btn {
    flex: 1 1 135px;
    min-height: 44px;
    margin: 0;
    padding: 0.45rem 0.75rem;
    font-size: 0.85rem;
    font-weight: 600;
    border-radius: 999px;
}

.stakes-preset-btn.is-active,
.stakes-preset-btn[aria-pressed="true"] {
    background-color: var(--pico-primary-background, #2563eb);
    border-color: var(--pico-primary-border, #2563eb);
    color: var(--pico-primary-inverse, #fff);
}

@media (max-width: 767px) {
    .lobby-primary-actions {
        padding: 1rem;
        border-radius: 12px;
        background: var(--pico-card-background-color);
        border: 1px solid var(--pico-muted-border-color);
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    }

    .lobby-primary-actions button[type="submit"],
    .create-game-actions button[type="submit"] {
        min-height: 48px;
        font-weight: 700;
    }
}