* {
            box-sizing: border-box;
        }

        body {
            margin: 0;
            font-family: Arial, sans-serif;
            background: #07131a;
            color: white;
            overflow: hidden;
        }

        button {
            font-family: inherit;
        }

        .hidden {
            display: none !important;
        }

        [hidden] {
            display: none !important;
        }

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

        .screen.active {
            display: block;
        }

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

        :root {
            /* Canonical responsive authority: compact below either threshold, desktop only when both match. */
            --layout-mode: compact;
            --ui-table: url("/assets/ui/table.webp");
            --ui-q-clubs: url("/assets/ui/queen-clubs.webp");
            --ui-q-spades: url("/assets/ui/queen-spades.webp");
            --ui-q-hearts: url("/assets/ui/queen-hearts.webp");
            --ui-q-diamonds: url("/assets/ui/queen-diamonds.webp");
            --gold: #f0c76b;
            --gold-soft: #c99a45;
            --panel: rgba(17, 9, 4, 0.78);
            --panel-border: rgba(255, 205, 116, 0.22);
            --lobby-sidebar-width: clamp(220px, 14.5vw, 244px);
            --lobby-content-width: 1088px;
            --wood-edge: rgba(184, 126, 57, 0.62);
        }

        #lobbyScreen {
            position: relative;
            overflow: hidden;
            isolation: isolate;
            background: #1b0e07;
        }

        .lobby-scene {
            position: absolute;
            z-index: 0;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: top center;
            pointer-events: none;
            user-select: none;
        }

        .lobby-layout {
            position: relative;
            z-index: 1;
            display: grid;
            grid-template-columns: var(--lobby-sidebar-width) minmax(0, 1fr);
            min-height: 100vh;
            background: transparent;
        }

        .sidebar {
            position: relative;
            width: var(--lobby-sidebar-width);
            height: 100vh;
            padding: 128px 14px 88px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            background: transparent;
            filter: drop-shadow(12px 0 24px rgba(0, 0, 0, 0.58));
            overflow: hidden;
            z-index: 20;
        }

        .sidebar::before {
            display: none;
        }

        .logo {
            display: none;
        }

        .logo-symbol {
            display: none;
        }

        .sidebar > div {
            padding-top: 8px;
        }

        .nav-item {
            --sidebar-button-surface: url("./assets/lobby/sidebar-button-normal.png");
            appearance: none;
            position: relative;
            z-index: 3;
            width: 100%;
            min-height: clamp(53px, calc(4.55vh + 18px), 59px);
            margin: 0 0 clamp(2px, calc(.76vh - 3.84px), 3px);
            padding: 0 13px;
            display: flex;
            align-items: center;
            gap: 12px;
            text-align: left;
            color: #e6d8b8;
            font-family: Georgia, serif;
            font-size: clamp(17px, calc(.76vh + 11.16px), 18px);
            font-weight: 700;
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.85);
            background: transparent;
            border: 13px solid transparent;
            border-image-source: var(--sidebar-button-surface);
            border-image-slice: 22% 9% fill;
            border-image-width: 13px;
            border-image-repeat: stretch;
            box-shadow: 0 3px 7px rgba(0, 0, 0, 0.58);
            cursor: pointer;
            transition: filter 140ms ease, box-shadow 140ms ease;
        }

        .nav-item.active {
            --sidebar-button-surface: url("./assets/lobby/sidebar-button-active.png");
            color: #f4e5bd;
            box-shadow:
                0 5px 13px rgba(0, 0, 0, 0.48),
                0 0 10px rgba(218, 156, 67, 0.18);
        }

        .nav-icon {
            flex: 0 0 30px;
            width: 30px;
            text-align: center;
            font-size: 22px;
            line-height: 1;
            color: #d8b06b;
            filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.7));
        }

        .nav-icon-home svg {
            display: block;
            width: 25px;
            height: 25px;
            margin: auto;
            fill: none;
            stroke: currentColor;
            stroke-width: 1.8;
            stroke-linecap: round;
            stroke-linejoin: round;
            filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.72));
        }

        .nav-label {
            min-width: 0;
        }

        .nav-item:hover {
            filter: brightness(1.09);
            box-shadow:
                0 5px 10px rgba(0, 0, 0, 0.58),
                0 0 8px rgba(218, 156, 67, 0.16);
        }

        .nav-item:focus-visible {
            outline: 3px solid #f0c76b;
            outline-offset: 2px;
        }

        .nav-item:disabled {
            cursor: not-allowed;
            filter: saturate(0.55);
            opacity: 0.58;
        }

        .online-small {
            position: relative;
            z-index: 3;
            margin: 0 0 0;
            padding: 15px 16px;
            background: rgba(21, 10, 4, 0.58);
            border: 1px solid rgba(255, 205, 116, 0.18);
            border-radius: 8px;
            color: rgba(255, 238, 202, 0.9);
            font-family: Georgia, serif;
            font-size: 15px;
            box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.36);
        }

        .online-dot {
            display: inline-block;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: #8fd465;
            margin-right: 8px;
            box-shadow: 0 0 12px rgba(143, 212, 101, 0.85);
        }

        .lobby-main {
            position: relative;
            min-height: 100vh;
            padding: 30px clamp(26px, 3.2vw, 54px) 26px clamp(38px, 5.2vw, 86px);
            overflow: hidden;
        }

        .lobby-main::before {
            content: "";
            position: absolute;
            inset: 0;
            background:
                linear-gradient(180deg, rgba(0, 0, 0, 0.02), rgba(0, 0, 0, 0.16));
            pointer-events: none;
        }

        .top-profile {
            position: relative;
            z-index: 7;
            display: flex;
            align-items: center;
            min-height: 30px;
            padding: 0;
            border: 0;
            background: transparent;
            box-shadow: none;
            backdrop-filter: none;
            margin-left: -56px;
        }

        .top-live-info {
            display: flex;
            gap: 34px;
            margin-right: auto;
            color: #e6d8b8;
            font-family: Georgia, serif;
            font-size: 17px;
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.75);
        }

        .top-live-info strong {
            color: #e6d8b8;
            font-weight: 400;
        }

        .top-live-info span::before {
            content: "";
            display: inline-block;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            margin-right: 9px;
            background: #8fd465;
            box-shadow: 0 0 13px rgba(143, 212, 101, 0.86);
        }

        .top-stat,
        .profile-chip,
        .avatar {
            display: none;
        }

.hero-actions {
            position: relative;
            z-index: 7;
            display: flex;
            gap: 18px;
            align-items: center;
            margin-top: 98px;
            margin-left: 0;
        }

        .primary-action,
        .secondary-action,
        .join-room-btn {
            cursor: pointer;
            font-family: Georgia, serif;
            border-radius: 8px;
            font-weight: 700;
        }

        .primary-action {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 328px;
            min-width: 0;
            aspect-ratio: 1642 / 435;
            padding: 0 14px 0 76px;
            overflow: hidden;
            border: 0;
            border-radius: 0;
            appearance: none;
            font-family: Georgia, serif;
            font-size: 23px;
            letter-spacing: 0.2px;
            white-space: nowrap;
            background-color: transparent;
            background-image: url("assets/lobby/create-room-button.png");
            background-repeat: no-repeat;
            background-position: 51.70068% 46.621622%;
            background-size: 108.952497% auto;
            color: #f1e1bd;
            box-shadow: none;
        }

        .lobby-main .primary-action:focus,
        .lobby-main .join-room-btn:focus {
            outline: 3px solid #f0c76b;
            outline-offset: 3px;
        }

        .secondary-action {
            display: none;
        }

        #developmentBotAddButton:not([hidden]),
        #developmentBotFillButton:not([hidden]) {
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        .waiting-room-panel {
            position: relative;
            z-index: 7;
            width: min(100%, var(--lobby-content-width));
            margin-top: 42px;
            padding: 24px;
            border: 1px solid rgba(240, 199, 107, 0.45);
            border-radius: 12px;
            background: rgba(25, 17, 10, 0.88);
            color: #f8efd8;
        }

        .waiting-room-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
        }

        .waiting-room-actions .secondary-action {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 44px;
            padding: 10px 18px;
        }

        .personal-stats {
            position: relative;
            z-index: 7;
            margin-top: 32px;
            margin-left: 0;
            width: min(100%, var(--lobby-content-width));
            min-height: 0;
            aspect-ratio: 1596 / 134;
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            align-items: center;
            overflow: hidden;
            border: 0;
            background-image: url("assets/lobby/profile-board.png");
            background-repeat: no-repeat;
            background-position: center 47.95539%;
            background-size: 104.761905% auto;
        }

        .personal-stats::before,
        .personal-stats::after {
            content: "";
            position: absolute;
            z-index: 0;
            left: 0;
            width: 100%;
            height: 32.835821%;
            background-image: url("assets/lobby/profile-board.png");
            background-repeat: no-repeat;
            background-size: 104.761905% auto;
            pointer-events: none;
        }

        .personal-stats::before {
            top: 0;
            background-position: center 38.573021%;
        }

        .personal-stats::after {
            bottom: 0;
            background-position: center 57.747492%;
        }

        .personal-stat {
            position: relative;
            z-index: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 18px;
            min-width: 0;
            min-height: 0;
            height: 100%;
            padding: 9px 24px;
            font-family: Georgia, serif;
        }

        .personal-stat > div:last-child {
            min-width: 0;
            max-width: 100%;
        }

        .personal-stat:not(:last-child)::after {
            content: "";
            position: absolute;
            top: 10px;
            right: -2px;
            bottom: 10px;
            width: 2px;
            border-radius: 2px;
            background: linear-gradient(180deg, transparent, rgba(20, 9, 4, 0.76) 18%, rgba(20, 9, 4, 0.76) 82%, transparent);
            box-shadow: 1px 0 rgba(255, 219, 145, 0.12);
        }

        .personal-stat-icon {
            display: grid;
            place-items: center;
            width: 48px;
            min-width: 48px;
            height: 48px;
            border: 1px solid rgba(231, 187, 91, 0.34);
            border-radius: 50%;
            background: radial-gradient(circle at 36% 30%, rgba(255, 221, 130, 0.18), rgba(42, 23, 12, 0.70) 68%);
            box-shadow: inset 0 0 12px rgba(255, 205, 89, 0.08), 0 4px 8px rgba(0, 0, 0, 0.32);
            font-size: 29px;
            color: var(--gold);
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.72);
        }

        .personal-stat strong {
            display: block;
            max-width: 100%;
            color: #e6d8b8;
            font-size: clamp(21px, 1.75vw, 29px);
            font-weight: 700;
            line-height: 1.05;
            margin-bottom: 5px;
            overflow-wrap: anywhere;
            font-variant-numeric: tabular-nums;
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.78);
        }

        .personal-stat span {
            color: rgba(230, 216, 184, 0.78);
            font-size: 14px;
            letter-spacing: 0.15px;
        }

        .tables-section {
            position: relative;
            z-index: 7;
            width: min(100%, var(--lobby-content-width));
            height: clamp(300px, calc(100vh - 458px), 500px);
            margin-top: 73px;
            margin-left: 0;
            padding: 10px 10px 11px;
            border: 0;
            background: transparent;
            border-radius: 0;
            box-shadow: none;
        }

        .room-list-board-art {
            position: absolute;
            inset: 0;
            z-index: 0;
            overflow: hidden;
            pointer-events: none;
        }

        .room-list-board-art > img {
            position: absolute;
            top: 0;
            left: 50%;
            width: 101.119158%;
            max-width: none;
            height: auto;
            transform: translate(-50%, -6.640625%);
            user-select: none;
            pointer-events: none;
        }

        .room-list-board-art::after {
            content: "";
            position: absolute;
            right: 0;
            bottom: 0;
            left: 0;
            height: clamp(11px, 1.25vw, 18px);
            background-image: url("./assets/lobby/room-list-board.png");
            background-repeat: no-repeat;
            background-position: center calc(100% + clamp(3px, 0.6vw, 9px));
            background-size: 101.119158% auto;
            pointer-events: none;
        }

        .section-header {
            position: absolute;
            left: clamp(20px, 3.8%, 42px);
            top: -42px;
            z-index: 2;
            display: flex;
            justify-content: center;
            align-items: center;
            width: min(228px, 65%);
            aspect-ratio: 320 / 70;
            margin: 0;
            padding: 0 22px;
            overflow: hidden;
            color: #e6d8b8;
            border: 0;
            border-radius: 9px;
            background-color: transparent;
            background-image: url("./assets/lobby/room-list-board.png");
            background-repeat: no-repeat;
            background-position: 4.769737% 1.048218%;
            background-size: 480% auto;
            box-shadow: none;
        }

        .section-header h2 {
            margin: 0;
            font-family: Georgia, serif;
            font-size: 22px;
            font-weight: 700;
        }

        .section-header button {
            display: none;
        }

        .table-list {
            position: relative;
            z-index: 1;
            display: flex;
            flex-direction: column;
            gap: 0;
            height: 100%;
            max-height: none;
            min-height: 0;
            overflow-y: auto;
            padding: 0 2px 1px;
            border: 0;
            background: transparent;
            border-radius: 0;
            box-shadow: none;
            scrollbar-width: thin;
            scrollbar-color: rgba(196, 132, 60, 0.86) rgba(20, 11, 6, 0.72);
            scrollbar-gutter: stable;
        }

        .table-list:focus-visible {
            outline: 3px solid #f0c76b;
            outline-offset: -3px;
        }

        .self-profile-view {
            position: relative;
            z-index: 7;
            width: min(100%, var(--lobby-content-width));
            max-height: calc(100vh - 60px);
            margin: 34px 0 0;
            padding: clamp(22px, 3vw, 42px);
            overflow-y: auto;
            color: #eadfc7;
            border: 1px solid rgba(227, 178, 91, 0.42);
            border-radius: 18px;
            background:
                linear-gradient(145deg, rgba(57, 30, 15, 0.96), rgba(22, 11, 6, 0.96)),
                #261208;
            box-shadow:
                inset 0 0 0 3px rgba(42, 19, 8, 0.72),
                inset 0 0 42px rgba(0, 0, 0, 0.48),
                0 18px 42px rgba(0, 0, 0, 0.46);
            scrollbar-width: thin;
            scrollbar-color: rgba(196, 132, 60, 0.86) rgba(20, 11, 6, 0.72);
        }

        .self-profile-heading {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 24px;
            padding-bottom: 20px;
            border-bottom: 1px solid rgba(227, 178, 91, 0.24);
        }

        .self-profile-heading h1 {
            margin: 2px 0 0;
            color: #f2dfb4;
            font-family: Georgia, serif;
            font-size: clamp(30px, 3.2vw, 46px);
            line-height: 1;
            text-shadow: 0 3px 7px rgba(0, 0, 0, 0.72);
        }

        .self-profile-eyebrow,
        .self-profile-label,
        .self-profile-readonly {
            margin: 0;
            color: rgba(230, 216, 184, 0.72);
            font-family: Georgia, serif;
        }

        .self-profile-eyebrow {
            font-size: 14px;
            letter-spacing: 0.08em;
            text-transform: uppercase;
        }

        .self-profile-back {
            min-height: 48px;
            padding: 10px 18px;
            color: #f0dfbc;
            font-family: Georgia, serif;
            font-size: 16px;
            font-weight: 700;
            border: 1px solid rgba(227, 178, 91, 0.48);
            border-radius: 9px;
            background: linear-gradient(180deg, #69401f, #3c2111);
            box-shadow: inset 0 1px rgba(255, 228, 166, 0.15), 0 4px 9px rgba(0, 0, 0, 0.34);
            cursor: pointer;
        }

        .self-profile-back:hover {
            filter: brightness(1.08);
        }

        .self-profile-back:focus-visible,
        .self-profile-view:focus-visible {
            outline: 3px solid #f0c76b;
            outline-offset: 3px;
        }

        .self-profile-status {
            margin: 28px 0 0;
            padding: 18px;
            color: #e6d8b8;
            font-family: Georgia, serif;
            text-align: center;
            border: 1px solid rgba(227, 178, 91, 0.2);
            border-radius: 10px;
            background: rgba(20, 10, 5, 0.46);
        }

        .self-profile-error {
            color: #ffd8d0;
            border-color: rgba(197, 81, 61, 0.55);
        }

        .self-profile-card {
            margin-top: 28px;
        }

        .self-profile-identity {
            display: flex;
            align-items: center;
            gap: clamp(18px, 3vw, 34px);
            min-width: 0;
            padding: clamp(18px, 3vw, 30px);
            border: 1px solid rgba(227, 178, 91, 0.24);
            border-radius: 14px;
            background: rgba(17, 8, 4, 0.42);
            box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.34);
        }

        .self-profile-avatar {
            position: relative;
            display: grid;
            place-items: center;
            flex: 0 0 clamp(76px, 9vw, 112px);
            width: clamp(76px, 9vw, 112px);
            height: clamp(76px, 9vw, 112px);
            color: #f1dcae;
            font-family: Georgia, serif;
            font-size: clamp(34px, 5vw, 54px);
            font-weight: 700;
            border: 3px solid rgba(224, 170, 77, 0.55);
            border-radius: 50%;
            background: radial-gradient(circle at 35% 28%, #73502c, #2b160b 72%);
            box-shadow:
                inset 0 0 18px rgba(255, 220, 140, 0.12),
                0 8px 18px rgba(0, 0, 0, 0.42);
            text-shadow: 0 3px 6px rgba(0, 0, 0, 0.72);
            overflow: hidden;
        }

        .self-profile-identity > div:last-child {
            min-width: 0;
        }

        .self-profile-identity h2 {
            max-width: 100%;
            margin: 5px 0 8px;
            overflow: hidden;
            color: #f2dfb4;
            font-family: Georgia, serif;
            font-size: clamp(27px, 3vw, 42px);
            line-height: 1.12;
            text-overflow: ellipsis;
            white-space: nowrap;
            text-shadow: 0 3px 6px rgba(0, 0, 0, 0.7);
        }

        .self-profile-label {
            font-size: 14px;
        }

        .self-profile-readonly {
            font-size: 13px;
        }

        .self-profile-facts {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            margin: 22px 0 0;
            overflow: hidden;
            border: 1px solid rgba(227, 178, 91, 0.24);
            border-radius: 14px;
            background: rgba(17, 8, 4, 0.42);
            box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.34);
        }

        .self-profile-facts > div {
            min-width: 0;
            padding: clamp(18px, 2.6vw, 28px);
        }

        .self-profile-facts > div:not(:last-child) {
            border-right: 1px solid rgba(227, 178, 91, 0.22);
        }

        .self-profile-facts dt {
            margin-bottom: 9px;
            color: rgba(230, 216, 184, 0.72);
            font-family: Georgia, serif;
            font-size: 14px;
        }

        .self-profile-facts dd {
            min-width: 0;
            margin: 0;
            overflow-wrap: anywhere;
            color: #f2dfb4;
            font-family: Georgia, serif;
            font-size: clamp(20px, 2.25vw, 31px);
            font-weight: 700;
            font-variant-numeric: tabular-nums;
            text-shadow: 0 2px 5px rgba(0, 0, 0, 0.72);
        }

        .self-profile-facts time {
            font-size: clamp(16px, 1.75vw, 24px);
        }

        .statistics-view {
            position: relative;
            z-index: 3;
            width: min(1120px, 100%);
            max-height: calc(100vh - 56px);
            margin: 0 0 0 auto;
            padding: clamp(18px, 2.4vw, 30px);
            overflow-y: auto;
            color: #eadbb8;
            border: 1px solid rgba(224, 177, 88, 0.35);
            border-radius: 18px;
            background: rgba(31, 14, 7, 0.94);
            box-shadow: 0 20px 48px rgba(0, 0, 0, 0.48), inset 0 0 28px rgba(0, 0, 0, 0.35);
        }

        .statistics-heading {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 18px;
            margin-bottom: 20px;
        }

        .statistics-heading h1,
        .statistics-panel h2,
        .statistics-game-card h3 {
            margin: 0;
            color: #f2dfb4;
            font-family: Georgia, serif;
        }

        .statistics-eyebrow,
        .statistics-coverage {
            margin: 0 0 5px;
            color: rgba(230, 216, 184, 0.7);
            font-size: 13px;
        }

        .statistics-back,
        .statistics-opponent-list button {
            min-height: 48px;
            color: #f1dfb8;
            border: 1px solid rgba(224, 177, 88, 0.42);
            border-radius: 10px;
            background: #4a2615;
            font: 700 14px Georgia, serif;
            cursor: pointer;
        }

        .statistics-back {
            padding: 0 18px;
        }

        .statistics-back:hover,
        .statistics-opponent-list button:hover,
        .statistics-opponent-list button.active {
            background: #65401f;
        }

        .statistics-back:focus-visible,
        .statistics-opponent-list button:focus-visible,
        .statistics-deals-scroll:focus-visible {
            outline: 3px solid #f0c76b;
            outline-offset: 3px;
        }

        .statistics-status,
        .statistics-panel {
            margin-bottom: 16px;
            padding: 18px;
            border: 1px solid rgba(227, 178, 91, 0.2);
            border-radius: 14px;
            background: rgba(17, 8, 4, 0.45);
        }

        .statistics-error {
            color: #ffb6a6;
        }

        .statistics-panel h2 {
            margin-bottom: 14px;
            font-size: 21px;
        }

        .statistics-metric-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            gap: 10px;
            margin: 0;
        }

        .statistics-metric-grid > div,
        .statistics-game-card {
            min-width: 0;
            padding: 13px;
            border: 1px solid rgba(227, 178, 91, 0.16);
            border-radius: 10px;
            background: rgba(70, 35, 18, 0.45);
        }

        .statistics-metric-grid dt,
        .statistics-game-values dt {
            color: rgba(230, 216, 184, 0.7);
            font-size: 12px;
        }

        .statistics-metric-grid dd,
        .statistics-game-values dd {
            margin: 6px 0 0;
            overflow-wrap: anywhere;
            color: #fff0c8;
            font: 700 20px Georgia, serif;
            font-variant-numeric: tabular-nums;
        }

        .statistics-game-grid {
            display: grid;
            grid-template-columns: repeat(5, minmax(0, 1fr));
            gap: 10px;
        }

        .statistics-game-card h3 {
            margin-bottom: 10px;
            font-size: 17px;
        }

        .statistics-game-values {
            display: grid;
            gap: 8px;
            margin: 0;
        }

        .statistics-game-values > div {
            display: flex;
            align-items: baseline;
            justify-content: space-between;
            gap: 8px;
        }

        .statistics-game-values dd {
            margin: 0;
            font-size: 15px;
        }

        .statistics-unavailable {
            color: rgba(230, 216, 184, 0.72);
        }

        .statistics-opponents-layout,
        .statistics-split-panels {
            display: grid;
            grid-template-columns: minmax(180px, 0.7fr) minmax(0, 1.3fr);
            gap: 14px;
        }

        .statistics-opponent-list {
            display: grid;
            align-content: start;
            gap: 8px;
            max-height: 270px;
            overflow-y: auto;
        }

        .statistics-opponent-list button {
            width: 100%;
            padding: 8px 12px;
            overflow: hidden;
            text-align: left;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .statistics-deals-scroll {
            max-width: 100%;
            overflow: auto;
            border-radius: 10px;
        }

        .statistics-deals-table {
            width: 100%;
            min-width: 880px;
            border-collapse: collapse;
            font-size: 13px;
        }

        .statistics-deals-table th,
        .statistics-deals-table td {
            padding: 10px;
            border-bottom: 1px solid rgba(227, 178, 91, 0.14);
            text-align: left;
            white-space: nowrap;
        }

        .statistics-deals-table th {
            position: sticky;
            top: 0;
            color: #f2dfb4;
            background: #3a1c0f;
        }

        .statistics-coverage {
            margin: 12px 0 0;
        }

        @media (max-width: 1200px) {
            :root {
                --lobby-sidebar-width: 220px;
            }

            .lobby-main {
                padding-right: 24px;
                padding-left: 32px;
            }

            .top-profile {
                margin-left: 0;
            }

            .hero-actions {
                margin-top: 92px;
            }

            .personal-stats,
            .tables-section {
                width: 100%;
            }
        }

        @media (max-width: 820px) {
            .lobby-layout {
                display: block;
                height: 100vh;
                min-height: 100vh;
                overflow-y: auto;
            }

            .sidebar {
                width: 100%;
                height: auto;
                min-height: 76px;
                padding: 12px;
                background: linear-gradient(180deg, rgba(78, 42, 22, 0.98), rgba(35, 18, 10, 0.98));
                border-bottom: 1px solid rgba(194, 131, 60, 0.42);
                filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.48));
                overflow-x: auto;
            }

            .sidebar > div {
                display: flex;
                gap: 7px;
                min-width: max-content;
                padding-top: 0;
            }

            .nav-item {
                width: auto;
                min-height: 50px;
                margin: 0;
                padding: 0 14px;
                font-size: 15px;
            }

            .nav-icon {
                width: 24px;
                font-size: 18px;
            }

            .lobby-main {
                min-height: calc(100vh - 76px);
                padding: 20px;
                overflow: hidden;
            }

            .top-live-info {
                flex-wrap: wrap;
                gap: 12px 24px;
                font-size: 15px;
            }

            .top-profile {
                margin-left: 0;
            }

            #lobbyScreen.active ~ .temporary-logout-button {
                top: 88px;
                right: 20px;
            }

            .hero-actions {
                margin-top: 44px;
            }

            .primary-action {
                width: min(328px, 100%);
                padding: 0 14px 0 76px;
                font-size: 21px;
            }

            .personal-stats {
                margin-top: 28px;
            }

            .personal-stat {
                gap: 10px;
                padding: 8px 12px;
            }

            .personal-stat-icon {
                width: 40px;
                min-width: 40px;
                height: 40px;
                font-size: 23px;
            }

            .personal-stat strong {
                font-size: clamp(18px, 2.8vw, 23px);
            }

            .tables-section {
                height: 420px;
            }

            .self-profile-view {
                max-height: none;
                margin-top: 20px;
            }

            .statistics-view {
                width: 100%;
                max-height: none;
                margin: 20px 0;
            }

            .statistics-game-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
        }

@media (max-width: 600px) {
            .hero-actions {
                margin-top: 34px;
}
#developmentBotFillButton{min-height:44px;min-width:44px;}
#developmentBotAddButton{min-height:44px;min-width:44px;}
.waiting-room-seats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:20px 0;text-align:left}.waiting-room-seat{min-width:0;min-height:88px;display:flex;align-items:center;gap:10px;padding:12px;border:1px solid rgba(255,255,255,.16);border-radius:12px;background:rgba(0,0,0,.18)}.waiting-room-seat.empty{opacity:.72}.waiting-room-avatar{flex:0 0 48px;width:48px;height:48px}.waiting-room-seat-identity{min-width:0;display:grid;gap:4px}.waiting-room-seat-identity strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.waiting-room-owner{font-size:.8rem;opacity:.78}@media(max-width:640px){.waiting-room-seats{grid-template-columns:1fr}.waiting-room-seat{min-height:72px}}

.tournament-view {
    position: absolute;
    inset: 88px 28px 24px;
    overflow-y: auto;
    padding: 24px;
    color: #f8efd8;
    background: rgba(22, 39, 30, 0.96);
    border: 1px solid rgba(240, 199, 107, 0.45);
    border-radius: 18px;
}

.tournament-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}

.tournament-eyebrow {
    margin: 0;
    color: #f0c76b;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.tournament-heading h1 {
    margin: 4px 0 0;
}

.tournament-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 20px; }
.tournament-tabs button { min-width: 44px; min-height: 44px; padding: 8px 16px; border: 1px solid rgba(243, 228, 181, .45); border-radius: 999px; background: rgba(18, 35, 27, .75); color: #fff; font: inherit; cursor: pointer; }
.tournament-tabs button[aria-selected="true"] { background: #d49b37; color: #17251d; font-weight: 700; }
.tournament-tabs button:focus-visible { outline: 3px solid #fff2b5; outline-offset: 2px; }
.tournament-admin { margin: 0 0 20px; padding: 14px; border: 1px solid rgba(240,199,107,.4); border-radius: 12px; }
.tournament-admin summary { min-height: 44px; cursor: pointer; font-weight: 700; }
.tournament-admin form { display: grid; grid-template-columns: repeat(auto-fit,minmax(210px,1fr)); gap: 12px; }
.tournament-admin label { display: grid; gap: 5px; min-width: 0; }
.tournament-admin input,.tournament-admin select,.tournament-admin textarea,.tournament-admin button { min-height: 44px; box-sizing: border-box; font: inherit; }
.tournament-admin textarea { min-height: 88px; resize: vertical; }
.tournament-admin button:focus-visible,.tournament-admin input:focus-visible,.tournament-admin select:focus-visible,.tournament-admin textarea:focus-visible { outline: 3px solid #fff2b5; outline-offset: 2px; }
.tournament-admin-participants { margin-top: 14px; border-top: 1px solid rgba(255,255,255,.2); padding-top: 10px; }
.tournament-admin-participants > div { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-block: 8px; }
.tournament-admin-participants > div > span { flex: 1 1 180px; min-width: 0; overflow-wrap: anywhere; }
.tournament-appeals,.tournament-history-detail,.tournament-appeal-form { margin-top: 16px; padding: 12px; border: 1px solid rgba(243,228,181,.28); border-radius: 10px; }
.tournament-appeals article { padding-block: 8px; border-top: 1px solid rgba(255,255,255,.16); }
.tournament-appeal-form summary { min-height: 44px; cursor: pointer; display: flex; align-items: center; font-weight: 700; }
.tournament-appeal-form form,.tournament-appeal-form label { display: grid; gap: 8px; }
.tournament-appeal-form textarea { min-height: 88px; resize: vertical; font: inherit; }
.tournament-appeal-form button,.tournament-appeal-form textarea { min-height: 44px; }
.tournament-appeal-form :focus-visible,.tournament-history-detail :focus-visible { outline: 3px solid #fff2b5; outline-offset: 2px; }

.tournament-back,
.tournament-card button {
    min-width: 44px;
    min-height: 44px;
    border: 1px solid #f0c76b;
    border-radius: 10px;
    padding: 10px 16px;
    color: #fff8e7;
    background: #31553f;
    font: inherit;
    cursor: pointer;
}

.tournament-back:focus-visible,
.tournament-card button:focus-visible {
    outline: 3px solid #f0c76b;
    outline-offset: 3px;
}

.tournament-card button:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

.tournament-standings {
    margin-block: 14px;
    padding: 12px;
    overflow-x: auto;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 8px;
}

.tournament-standings h3 { margin: 0 0 6px; }
.tournament-standings-unavailable p { margin: 0; color: #f3e4b5; }
.tournament-standings-list { display: grid; gap: 6px; margin: 10px 0 0; padding: 0; list-style: none; }
.tournament-standing-row { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 8px; min-width: 0; }
.tournament-standing-avatar { position: relative; width: 36px; height: 36px; overflow: hidden; border-radius: 50%; }
.tournament-standing-avatar .avatar-image { width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.tournament-standing-avatar .avatar-fallback { display: grid; width: 100%; height: 100%; place-items: center; }
.tournament-standing-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tournament-standing-score { white-space: nowrap; font-variant-numeric: tabular-nums; }

.tournament-status {
    padding: 20px;
    text-align: center;
}

.tournament-error {
    color: #ffd1d1;
}

.tournament-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
}

.tournament-card {
    padding: 18px;
    border: 1px solid rgba(240, 199, 107, 0.32);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.06);
}

.tournament-card h2 {
    margin-top: 0;
}

@media (max-width: 600px) {
    .tournament-view {
        inset: 72px 10px 12px;
        padding: 16px;
    }

    .tournament-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .tournament-back,
    .tournament-card button {
        width: 100%;
    }

    .tournament-list {
        grid-template-columns: 1fr;
    }
}

.messages-view {
  min-width: 0;
  color: #f8edcf;
}

.notification-badge {
    margin-left: auto;
    min-width: 1.5rem;
    padding: 0.1rem 0.4rem;
    border-radius: 999px;
    background: #8f2727;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    text-align: center;
}

.nav-indicator {
    margin-left: auto;
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 50%;
    background: #d98b32;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.2);
}

.notification-view {
    width: min(900px, 100%);
    margin: 0 auto;
    padding: clamp(1rem, 3vw, 2rem);
}

.notification-heading,
.notification-heading-actions,
.notification-actions {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

.notification-heading {
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
}

.notification-heading-actions,
.notification-actions {
    flex-wrap: wrap;
}

.notification-eyebrow {
    margin: 0;
    color: #715a35;
    font-weight: 700;
}

.notification-heading h1,
.notification-row h2 {
    margin: 0.25rem 0;
}

.notification-heading button,
.notification-actions button,
#notificationLoadOlder {
    min-height: 44px;
    padding: 0.6rem 0.9rem;
    border: 1px solid #725a32;
    border-radius: 0.5rem;
    background: #fff8e7;
    color: #2d2519;
    cursor: pointer;
}

.notification-heading button:focus-visible,
.notification-actions button:focus-visible,
#notificationLoadOlder:focus-visible {
    outline: 3px solid #1467a8;
    outline-offset: 2px;
}

.notification-status,
.notification-row {
    border: 1px solid #bda87e;
    border-radius: 0.75rem;
    background: #fffaf0;
    padding: 1rem;
}

.notification-error {
    border-color: #a73232;
    color: #7b1d1d;
}

.notification-list {
    display: grid;
    gap: 0.75rem;
    margin: 0 0 1rem;
    padding: 0;
    list-style: none;
}

.notification-row.unread {
    border-left: 0.4rem solid #9b4b21;
    background: #fff3d2;
}

.notification-row p {
    margin: 0.35rem 0;
}

.notification-row time {
    display: block;
    margin-bottom: 0.75rem;
    color: #665b48;
}

@media (max-width: 700px) {
    .notification-view {
        padding: 1rem;
    }

    .notification-heading {
        display: block;
    }

    .notification-heading-actions {
        margin-top: 0.75rem;
    }

    .notification-heading button,
    .notification-actions button,
    #notificationLoadOlder {
        min-width: 44px;
        min-height: 44px;
        flex: 1 1 auto;
    }
}

.messages-heading,
.messages-new > div,
.messages-composer {
  display: flex;
  align-items: center;
  gap: 12px;
}

.messages-heading {
  justify-content: space-between;
  margin-bottom: 16px;
}

.messages-heading h1,
.messages-conversation h2 {
  margin: 0;
}

.messages-eyebrow {
  margin: 0 0 3px;
  color: #d9bb7a;
}

.messages-back,
.messages-new button,
.messages-composer button,
.messages-more {
  min-height: 48px;
  border: 1px solid #c69d4d;
  border-radius: 8px;
  background: #4c2c18;
  color: #fff4cf;
  font: inherit;
  font-weight: 700;
}

.messages-back:focus-visible,
.messages-new button:focus-visible,
.messages-composer button:focus-visible,
.messages-more:focus-visible,
.messages-inbox-item:focus-visible,
.messages-new select:focus-visible,
.messages-composer textarea:focus-visible {
  outline: 3px solid #ffe09a;
  outline-offset: 2px;
}

.messages-unread {
  display: inline-grid;
  place-items: center;
  min-width: 30px;
  min-height: 30px;
  padding: 0 7px;
  border-radius: 999px;
  background: #9a2d27;
  font-size: 0.55em;
  vertical-align: middle;
}

.messages-status,
.messages-layout {
  border: 1px solid #7b512c;
  border-radius: 12px;
  background: rgba(28, 15, 8, 0.92);
}

.messages-status {
  padding: 24px;
}

.messages-error {
  color: #ffd0c8;
}

.messages-layout {
  display: grid;
  grid-template-columns: minmax(220px, 32%) minmax(0, 1fr);
  min-height: 520px;
  overflow: hidden;
}

.messages-sidebar {
  border-right: 1px solid #7b512c;
  min-width: 0;
}

.messages-new {
  padding: 14px;
  border-bottom: 1px solid #7b512c;
}

.messages-new label {
  display: block;
  margin-bottom: 6px;
  font-weight: 700;
}

.messages-new select,
.messages-composer textarea {
  min-width: 0;
  width: 100%;
  border: 1px solid #936c3e;
  border-radius: 7px;
  background: #21140d;
  color: #fff4d5;
  font: inherit;
}

.messages-new select {
  min-height: 48px;
}

.messages-inbox-list {
  max-height: 440px;
  overflow-y: auto;
}

.messages-more {
  width: calc(100% - 28px);
  margin: 10px 14px;
  padding: 0 14px;
}

.messages-inbox-item {
  display: grid;
  width: 100%;
  padding: 13px 14px;
  border: 0;
  border-bottom: 1px solid #5b3821;
  background: transparent;
  color: inherit;
  text-align: left;
}

.messages-inbox-item:hover {
  background: rgba(169, 116, 51, 0.2);
}

.messages-inbox-item span,
.messages-inbox-item small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.messages-inbox-item small,
.messages-bubble small {
  color: #cbb893;
}

.messages-conversation {
  display: grid;
  grid-template-rows: auto auto minmax(260px, 1fr) auto auto;
  min-width: 0;
  padding: 16px;
}

.messages-history {
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  padding: 10px 4px;
}

.messages-bubble {
  max-width: min(76%, 620px);
  padding: 10px 12px;
  border-radius: 10px;
  background: #4c3423;
  overflow-wrap: anywhere;
}

.messages-bubble.sent {
  align-self: end;
  background: #315a35;
}

.messages-bubble p {
  margin: 0 0 5px;
  white-space: pre-wrap;
}

.messages-composer textarea {
  resize: vertical;
  padding: 10px;
}

.messages-composer button,
.messages-new button {
  padding: 0 16px;
}

.messages-empty {
  padding: 16px;
  color: #cbb893;
}

@media (max-width: 768px) {
  .messages-layout {
    grid-template-columns: 1fr;
  }

  .messages-sidebar {
    border-right: 0;
    border-bottom: 1px solid #7b512c;
  }

  .messages-inbox-list {
    max-height: 220px;
  }

  .messages-conversation {
    min-height: 420px;
  }
}

@media (max-width: 600px) {
  .messages-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .messages-back {
    max-width: 145px;
  }

  .messages-bubble {
    max-width: 88%;
  }
}

            .primary-action {
                width: 100%;
                min-width: 0;
            }

            .personal-stats {
                grid-template-columns: repeat(3, minmax(0, 1fr));
            }

            .personal-stat {
                gap: 4px;
                min-height: 0;
                height: 100%;
                padding: 4px 5px;
            }

            .personal-stat:not(:last-child)::after {
                top: 7px;
                bottom: 7px;
            }

            .personal-stat-icon {
                width: clamp(22px, 6vw, 32px);
                min-width: clamp(22px, 6vw, 32px);
                height: clamp(22px, 6vw, 32px);
                font-size: clamp(14px, 4vw, 20px);
            }

            .personal-stat strong {
                margin-bottom: 0;
                font-size: clamp(9px, 2.6vw, 15px);
                line-height: 0.95;
            }

            .personal-stat span {
                font-size: clamp(8px, 2.2vw, 11px);
                line-height: 1;
            }

            .tables-section {
                height: 390px;
            }

            .self-profile-heading {
                align-items: flex-start;
                flex-direction: column;
            }

            .self-profile-back {
                width: 100%;
            }

            .self-profile-facts {
                grid-template-columns: 1fr;
            }

            .self-profile-facts > div:not(:last-child) {
                border-right: 0;
                border-bottom: 1px solid rgba(227, 178, 91, 0.22);
            }

            .statistics-heading,
            .statistics-opponents-layout,
            .statistics-split-panels {
                grid-template-columns: 1fr;
            }

            .statistics-heading {
                align-items: stretch;
                flex-direction: column;
            }

            .statistics-back {
                width: 100%;
            }

            .statistics-game-grid {
                grid-template-columns: 1fr;
            }
        }

        @media (max-width: 480px) {
            .top-live-info {
                max-width: calc(100% - 104px);
                gap: 6px;
            }

        }

        .lobby-table-row {
            min-height: 82px;
            display: grid;
            grid-template-columns: 70px minmax(132px, 1fr) 188px 82px 173px 66px 132px;
            align-items: center;
            gap: 10px;
            padding: 10px 13px;
            border: 0;
            border-radius: 0;
            background: transparent;
            box-shadow: none;
        }

        .mini-table {
            width: 64px;
            height: 38px;
            justify-self: center;
            background: var(--ui-table) center / contain no-repeat;
            filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.55));
        }

        .room-info {
            min-width: 0;
        }

        .room-title {
            color: #e6d8b8;
            font-family: Georgia, serif;
            font-size: 19px;
            font-weight: 700;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .room-subtitle {
            margin-top: 5px;
            color: rgba(230, 216, 184, 0.72);
            font-family: Georgia, serif;
            font-size: 13px;
            white-space: nowrap;
        }

        .seat-slots {
            display: flex;
            gap: 8px;
            align-items: center;
            justify-content: flex-start;
            min-width: 0;
        }

        .seat-position {
            display: flex;
            flex: 0 0 44px;
            width: 44px;
            min-width: 0;
            flex-direction: column;
            align-items: center;
            gap: 2px;
        }

        .seat-username {
            width: 100%;
            overflow: hidden;
            color: rgba(244, 226, 188, 0.9);
            font-size: 10px;
            line-height: 1.1;
            text-align: center;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .seat {
            position: relative;
            flex: 0 0 44px;
            width: 44px;
            height: 44px;
            border-radius: 50%;
            border: 2px solid rgba(190, 132, 64, 0.48);
            background: rgba(10, 7, 4, 0.62);
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow:
                inset 0 0 0 3px rgba(0, 0, 0, 0.32),
                inset 0 5px 10px rgba(0, 0, 0, 0.44);
        }

        .seat.filled {
            border-color: rgba(230, 184, 101, 0.74);
            background: radial-gradient(circle at 40% 28%, #765022, #422712 66%, #1c1009 100%);
            box-shadow:
                inset 0 0 0 3px rgba(30, 15, 7, 0.52),
                0 0 12px rgba(219, 164, 75, 0.16);
        }

        .seat.filled::before {
            content: "";
            width: 24px;
            height: 25px;
            opacity: 0.82;
            background:
                radial-gradient(circle at 50% 25%, #e2bd78 0 20%, transparent 22%),
                radial-gradient(ellipse at 50% 100%, #c9974e 0 42%, transparent 44%);
        }

        .seat.current-user {
            outline: 2px solid rgba(143, 212, 101, 0.94);
            outline-offset: 2px;
        }

        .seat-count {
            color: rgba(230, 216, 184, 0.8);
            font-family: Georgia, serif;
            font-size: 14px;
            white-space: nowrap;
        }

        .room-stake {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 2px;
            font-family: Georgia, serif;
            white-space: nowrap;
        }

        .room-stake span {
            color: rgba(230, 216, 184, 0.60);
            font-size: 11px;
            letter-spacing: 0.08em;
            text-transform: uppercase;
        }

        .room-stake strong {
            color: #edc65d;
            font-size: 20px;
            font-weight: 700;
            font-variant-numeric: tabular-nums;
        }

        .room-badges {
            display: grid;
            grid-template-columns: repeat(4, 38px);
            align-items: center;
            gap: 7px;
            width: 173px;
            min-width: 173px;
        }

        .room-badge {
            display: inline-grid;
            place-items: center;
            flex: 0 0 38px;
            width: 38px;
            height: 38px;
            border-radius: 50%;
            font-family: Arial, sans-serif;
            font-size: 13px;
            font-weight: 800;
            line-height: 1;
            text-align: center;
            box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.22), 0 4px 8px rgba(0, 0, 0, 0.34);
        }

        .room-mode-badge {
            grid-column: 1;
            color: #2b2118;
            border: 1px solid rgba(255, 247, 221, 0.84);
            background: linear-gradient(180deg, #f4eddb, #cfc5ad);
        }

        .room-minimum-badge {
            grid-column: 2;
            color: #f7dfc9;
            border: 1px solid rgba(222, 101, 71, 0.72);
            background: linear-gradient(180deg, #a63b2e, #661f19);
        }

        .room-private-badge {
            grid-column: 3;
            color: #2a1608;
            border: 1px solid rgba(250, 211, 100, 0.78);
            background: linear-gradient(180deg, #e1b84d, #9a6722);
            font-size: 16px;
        }

        .room-speed-badge {
            grid-column: 4;
            color: #fff;
            border: 1px solid rgba(157, 211, 111, 0.76);
            background: linear-gradient(180deg, #4f923d, #285e2a);
            font-variant-numeric: tabular-nums;
        }

        .room-status {
            justify-self: center;
            width: 100%;
            min-width: 0;
            padding: 7px 4px;
            border: 1px solid rgba(223, 194, 130, 0.38);
            border-radius: 999px;
            color: #ead9b5;
            background: linear-gradient(180deg, rgba(91, 74, 45, 0.88), rgba(50, 38, 24, 0.94));
            font-size: 11px;
            font-weight: 800;
            letter-spacing: 0.06em;
            text-align: center;
        }

        .room-status.active {
            color: rgba(235, 222, 195, 0.76);
            border-color: rgba(180, 164, 132, 0.28);
            background: linear-gradient(180deg, rgba(75, 69, 57, 0.80), rgba(42, 38, 31, 0.90));
        }

        .join-room-btn {
            justify-self: end;
            width: 128px;
            min-height: 46px;
            padding: 11px 14px;
            border: 1px solid rgba(174, 165, 70, 0.54);
            border-radius: 7px;
            color: #f0dfb8;
            background:
                linear-gradient(180deg, rgba(91, 120, 49, 0.99), rgba(41, 67, 26, 0.99)),
                repeating-linear-gradient(91deg, rgba(255, 255, 255, 0.028) 0 2px, transparent 2px 18px);
            box-shadow:
                inset 0 0 0 2px rgba(32, 48, 19, 0.62),
                inset 0 1px 0 rgba(255, 238, 183, 0.13),
                0 7px 14px rgba(0, 0, 0, 0.30);
            font-size: 16px;
        }

        .join-room-btn.leave-room-btn {
            border-color: rgba(187, 82, 64, 0.62);
            background:
                linear-gradient(180deg, rgba(145, 54, 39, 0.99), rgba(79, 25, 20, 0.99)),
                repeating-linear-gradient(91deg, rgba(255, 255, 255, 0.025) 0 2px, transparent 2px 18px);
            box-shadow:
                inset 0 0 0 2px rgba(68, 20, 16, 0.62),
                inset 0 1px 0 rgba(255, 219, 192, 0.12),
                0 7px 14px rgba(0, 0, 0, 0.30);
        }

        .join-room-btn:disabled {
            cursor: not-allowed;
            opacity: 0.52;
            filter: saturate(0.42);
        }

        @media (max-width: 1200px) {
            .lobby-table-row {
                grid-template-columns: 52px minmax(108px, 1fr) 154px 66px 148px 58px 104px;
                gap: 7px;
                padding: 9px 10px;
            }

            .mini-table {
                width: 54px;
                height: 32px;
            }

            .seat-slots {
                gap: 6px;
            }

            .seat {
                flex-basis: 40px;
                width: 40px;
                height: 40px;
            }

            .seat-position {
                flex-basis: 40px;
                width: 40px;
            }

            .room-badges {
                grid-template-columns: repeat(4, 34px);
                gap: 4px;
                width: 148px;
                min-width: 148px;
            }

            .room-badge {
                flex-basis: 34px;
                width: 34px;
                height: 34px;
                font-size: 12px;
            }

            .join-room-btn {
                width: 112px;
                padding-inline: 9px;
                font-size: 14px;
            }
        }

        @media (max-width: 1050px) and (min-width: 601px) {
            .lobby-table-row {
                grid-template-columns: 46px minmax(72px, 1fr) 140px 58px 132px 50px 92px;
                gap: 5px;
                padding: 8px;
            }

            .mini-table {
                width: 46px;
            }

            .seat-slots {
                gap: 4px;
            }

            .seat {
                flex-basis: 34px;
                width: 34px;
                height: 34px;
            }

            .seat-position {
                flex-basis: 34px;
                width: 34px;
            }

            .seat-count {
                font-size: 12px;
            }

            .room-badge {
                flex-basis: 30px;
                width: 30px;
                height: 30px;
                font-size: 11px;
            }

            .room-badges {
                grid-template-columns: repeat(4, 30px);
                width: 132px;
                min-width: 132px;
            }

            .join-room-btn {
                width: 92px;
                padding-inline: 6px;
                font-size: 13px;
            }

            .room-title {
                font-size: 16px;
            }
        }

        @media (max-width: 600px) {
            .lobby-table-row {
                grid-template-columns: 52px minmax(0, 1fr) 70px;
                grid-template-areas:
                    "marker info status"
                    "marker seats seats"
                    "stake badges badges"
                    "action action action";
                gap: 9px 10px;
                min-height: 220px;
                padding: 10px;
            }

            .mini-table {
                grid-area: marker;
            }

            .room-info {
                grid-area: info;
            }

            .room-subtitle {
                white-space: normal;
                line-height: 1.25;
            }

            .seat-slots {
                grid-area: seats;
            }

            .room-stake {
                grid-area: stake;
                align-items: flex-start;
            }

            .room-badges {
                grid-area: badges;
                justify-content: flex-end;
            }

            .room-status {
                grid-area: status;
            }

            .join-room-btn {
                grid-area: action;
                width: 100%;
                min-height: 48px;
            }

            .room-title {
                font-size: 17px;
            }
        }

        @media (max-width: 480px) {
            .lobby-table-row {
                min-height: 236px;
            }
        }

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

        .player-badge {
            min-width: 0;
            max-width: min(240px, 42vw);
        }

        .player-badge .name {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .player-badge .match-score {
            display: flex;
            align-items: baseline;
            flex-wrap: wrap;
            gap: 7px;
            max-width: 100%;
            color: rgba(230, 216, 184, 0.78);
            font-size: 13px;
        }

        .player-badge .match-score-label {
            white-space: nowrap;
        }

        .player-badge .match-score-value {
            min-width: 2ch;
            color: #e6d8b8;
            font-size: 17px;
            font-weight: 800;
            font-variant-numeric: tabular-nums;
            text-align: right;
            white-space: nowrap;
        }

        .player-badge .match-score-value.score-positive {
            color: #9fda7c;
        }

        .player-badge .match-score-value.score-negative {
            color: #e58a82;
        }

        /* ===================== */
        .hand-card {
            width: 92px;
            aspect-ratio: 2 / 3;
            margin-left: -24px;
            border-radius: 16px;
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            transition: transform 0.18s ease;
            filter: drop-shadow(0 18px 18px rgba(0, 0, 0, 0.5));
            cursor: pointer;
        }

        .hand-card:hover {
            transform: translateY(-20px);
        }

        .hand-card:nth-child(1) {
            background-image: var(--ui-q-clubs);
        }

        .hand-card:nth-child(2) {
            background-image: var(--ui-q-spades);
        }

        .hand-card:nth-child(3) {
            background-image: var(--ui-q-hearts);
        }

        .hand-card:nth-child(4) {
            background-image: var(--ui-q-diamonds);
        }

        .hand-card:nth-child(5) {
            background-image: var(--ui-q-clubs);
        }

        .hand-card:nth-child(6) {
            background-image: var(--ui-q-spades);
        }

        .game-actions {
            position: absolute;
            top: 26px;
            right: 26px;
            display: flex;
            gap: 12px;
        }

        .game-btn {
            border: 1px solid rgba(255, 214, 130, 0.38);
            border-radius: 14px;
            padding: 14px 18px;
            font-weight: 900;
            cursor: pointer;
            color: #2a1508;
            background: linear-gradient(180deg, #ffe69f, #d89f3a 58%, #8c541e);
            box-shadow: 0 12px 24px rgba(0, 0, 0, 0.34);
        }

        .last-deal-area {
            top: 82px;
            align-items: center;
        }

        .last-deal-status {
            padding: 8px 12px;
            border: 1px solid rgba(255, 214, 130, 0.28);
            border-radius: 10px;
            background: rgba(25, 17, 10, 0.82);
            color: #f0c76b;
            font-size: 13px;
            font-weight: 700;
        }

        /* ===== LOBBY POLISH / HOVER / PREMIUM FEEL ===== */

        .lobby-table-row,
        .primary-action,
        .secondary-action,
        .join-room-btn,
        .profile-chip {
            transition: all 0.22s ease;
        }

        .secondary-action:hover,
        .join-room-btn:hover {
            transform: translateY(-2px);
            box-shadow:
                0 18px 38px rgba(0, 0, 0, 0.38),
                0 0 22px rgba(122, 201, 67, 0.22);
        }

        .secondary-action:active,
        .join-room-btn:active {
            transform: translateY(0);
        }

        .primary-action:hover {
            filter: brightness(1.06);
            transform: translateY(-1px);
            box-shadow: 0 9px 18px rgba(0, 0, 0, 0.34);
        }

        .primary-action:active {
            filter: brightness(0.94);
            transform: translateY(1px);
            box-shadow: 0 5px 12px rgba(0, 0, 0, 0.30);
        }

        .primary-action:disabled {
            cursor: not-allowed;
            filter: grayscale(0.42) brightness(0.76);
            opacity: 0.72;
        }

        .primary-action:disabled:hover,
        .primary-action:disabled:active {
            transform: none;
            box-shadow: none;
        }

        .lobby-table-row:hover {
            background: rgba(255, 231, 185, 0.035);
            box-shadow: inset 0 0 18px rgba(212, 163, 115, 0.08);
            transform: translateY(-1px);
        }

        .lobby-table-row:hover .mini-table {
            box-shadow:
                0 8px 18px rgba(0, 0, 0, 0.5),
                0 0 18px rgba(122, 201, 67, 0.22),
                inset 0 0 16px rgba(255, 255, 255, 0.16);
        }

        .join-room-btn:disabled:hover {
            transform: none;
            box-shadow:
                inset 0 0 0 2px rgba(32, 48, 19, 0.62),
                inset 0 1px 0 rgba(255, 238, 183, 0.13),
                0 7px 14px rgba(0, 0, 0, 0.30);
        }

        .table-list::-webkit-scrollbar {
            width: 10px;
        }

        .table-list::-webkit-scrollbar-track {
            background: rgba(20, 11, 6, 0.72);
            border-radius: 999px;
            box-shadow: inset 0 0 0 1px rgba(190, 125, 57, 0.20);
        }

        .table-list::-webkit-scrollbar-thumb {
            min-height: 34px;
            border: 2px solid rgba(20, 11, 6, 0.72);
            background: linear-gradient(180deg, rgba(211, 151, 73, 0.94), rgba(126, 75, 31, 0.96));
            border-radius: 999px;
        }

        .table-list::-webkit-scrollbar-thumb:hover {
            background: linear-gradient(180deg, rgba(235, 177, 88, 0.98), rgba(151, 91, 36, 0.98));
        }

        .chat-messages::-webkit-scrollbar {
            width: 10px;
        }

        .chat-messages::-webkit-scrollbar-track {
            background: rgba(255, 255, 255, 0.04);
            border-radius: 999px;
        }

        .chat-messages::-webkit-scrollbar-thumb {
            background: rgba(212, 163, 115, 0.55);
            border-radius: 999px;
        }

        .chat-messages::-webkit-scrollbar-thumb:hover {
            background: rgba(212, 163, 115, 0.8);
        }

        .online-dot {
            animation: onlinePulse 2.4s infinite;
        }

        @keyframes onlinePulse {
            0% {
                box-shadow: 0 0 0 0 rgba(104, 216, 95, 0.45);
            }

            70% {
                box-shadow: 0 0 0 9px rgba(104, 216, 95, 0);
            }

            100% {
                box-shadow: 0 0 0 0 rgba(104, 216, 95, 0);
            }
        }

        .seat.filled {
            box-shadow:
                0 0 0 2px rgba(255, 255, 255, 0.12),
                0 0 14px rgba(241, 195, 75, 0.22);
        }

        .room-title {
            letter-spacing: 0.2px;
        }

        .join-room-btn {
            font-weight: 800;
        }

        .room-modal-backdrop {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.68);
            backdrop-filter: blur(7px);
            z-index: 1000;
            display: none;
            align-items: center;
            justify-content: center;
        }

        .room-modal-backdrop.active {
            display: flex;
        }

        .room-modal {
            width: 720px;
            max-width: calc(100vw - 32px);
            max-height: calc(100vh - 32px);
            overflow-y: auto;
            background:
                linear-gradient(180deg, rgba(31, 22, 13, 0.96), rgba(13, 20, 17, 0.98));
            border: 1px solid rgba(212, 163, 115, 0.38);
            border-radius: 20px;
            padding: 28px;
            box-shadow:
                0 34px 95px rgba(0, 0, 0, 0.72),
                inset 0 0 0 1px rgba(255, 255, 255, 0.04);
        }

        .room-modal::-webkit-scrollbar {
            width: 8px;
        }

        .room-modal::-webkit-scrollbar-track {
            background: rgba(255, 255, 255, 0.04);
            border-radius: 999px;
        }

        .room-modal::-webkit-scrollbar-thumb {
            background: rgba(212, 163, 115, 0.55);
            border-radius: 999px;
        }

        .room-modal-header {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 18px;
            margin-bottom: 22px;
        }

        .room-modal h2 {
            margin: 0;
            font-size: 30px;
            letter-spacing: 0.2px;
        }

        .room-modal-subtitle {
            margin-top: 6px;
            color: rgba(255, 255, 255, 0.62);
            font-size: 14px;
        }

        .reset-settings-btn {
            border: 1px solid rgba(212, 163, 115, 0.26);
            background: rgba(255, 255, 255, 0.06);
            color: rgba(255, 255, 255, 0.78);
            border-radius: 999px;
            padding: 9px 14px;
            cursor: pointer;
            font-weight: 800;
        }

        .room-settings-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 18px;
        }

        .setting-row {
            margin-bottom: 0;
            padding: 16px;
            border: 1px solid rgba(255, 255, 255, 0.08);
            background: rgba(255, 255, 255, 0.035);
            border-radius: 16px;
        }

        .setting-row.wide {
            grid-column: span 2;
        }

        .setting-label {
            font-weight: 900;
            margin-bottom: 11px;
            color: rgba(255, 255, 255, 0.9);
            font-size: 16px;
        }

        .setting-help {
            margin-top: -4px;
            margin-bottom: 11px;
            color: rgba(255, 255, 255, 0.52);
            font-size: 13px;
        }

        .segment {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
        }

        .segment button {
            border: 1px solid rgba(255, 255, 255, 0.16);
            background: rgba(255, 255, 255, 0.065);
            color: rgba(255, 255, 255, 0.86);
            border-radius: 999px;
            padding: 10px 16px;
            cursor: pointer;
            font-weight: 900;
            transition: all 0.18s ease;
        }

        .segment button:hover {
            transform: translateY(-1px);
            border-color: rgba(212, 163, 115, 0.38);
        }

        .segment button.active-green {
            background: linear-gradient(135deg, #3a8a33, #245f26);
            border-color: rgba(145, 255, 120, 0.55);
            color: white;
            box-shadow: 0 0 18px rgba(122, 201, 67, 0.18);
        }

        .segment button.active-red {
            background: linear-gradient(135deg, #8d3030, #581c1c);
            border-color: rgba(255, 120, 120, 0.46);
            color: white;
        }

        .modal-actions {
            display: flex;
            justify-content: flex-end;
            gap: 12px;
            margin-top: 24px;
        }

        .modal-cancel {
            background: rgba(255, 255, 255, 0.08);
            color: white;
            border: 1px solid rgba(255, 255, 255, 0.18);
            border-radius: 12px;
            padding: 13px 20px;
            cursor: pointer;
            font-weight: 800;
        }

        .modal-create {
            background: linear-gradient(135deg, #3a8a33, #245f26);
            color: white;
            border: 1px solid rgba(145, 255, 120, 0.45);
            border-radius: 12px;
            padding: 13px 24px;
            font-weight: 900;
            cursor: pointer;
            box-shadow: 0 14px 32px rgba(0, 0, 0, 0.28);
        }

        .modal-cancel:hover,
        .modal-create:hover,
        .reset-settings-btn:hover {
            transform: translateY(-1px);
        }

        .room-modal-validation {
            margin-top: 18px;
            padding: 13px 16px;
            border: 1px solid rgba(231, 108, 84, 0.68);
            border-radius: 12px;
            color: #f7d8cf;
            background: rgba(105, 29, 24, 0.58);
        }

        .room-modal-validation[hidden] {
            display: none;
        }

        .room-modal-validation p {
            margin: 0;
        }

        .room-modal-validation p + p {
            margin-top: 9px;
        }

        .room-modal-validation strong {
            color: #fff0bc;
            font-variant-numeric: tabular-nums;
        }

        .friends-view {
            position: relative;
            z-index: 7;
            width: min(100%, var(--lobby-content-width));
            max-height: calc(100vh - 44px);
            margin: 22px 0;
            padding: clamp(18px, 2.5vw, 30px);
            overflow-y: auto;
            color: #eadfc7;
            border: 1px solid rgba(227, 178, 91, 0.4);
            border-radius: 18px;
            background: rgba(31, 14, 7, 0.95);
            box-shadow: inset 0 0 34px rgba(0, 0, 0, 0.36), 0 20px 48px rgba(0, 0, 0, 0.48);
            scrollbar-width: thin;
            scrollbar-color: rgba(196, 132, 60, 0.86) rgba(20, 11, 6, 0.72);
        }

.economy-view {
    width: min(100%, 980px);
    margin: 0 auto;
    padding: 24px 18px 40px;
    color: #f7ecd0;
}

.shop-view {
    position: relative;
    z-index: 2;
    width: min(100%, 1120px);
    margin: 0 auto;
    padding: 28px;
    color: #f8edcf;
    overflow: auto;
}

.shop-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 22px;
}

.shop-heading h1,
.shop-category h2,
.shop-product h3 {
    margin: 0;
}

.shop-eyebrow {
    margin: 0 0 4px;
    color: #dbc48d;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: 12px;
}

.shop-back,
.shop-product button {
    min-height: 48px;
    border: 1px solid #b99558;
    border-radius: 10px;
    padding: 10px 18px;
    color: #fff4d3;
    background: #244d38;
    font: inherit;
}

.shop-back:hover {
    filter: brightness(1.1);
}

.shop-back:focus-visible,
.shop-product button:focus-visible {
    outline: 3px solid #f1d17a;
    outline-offset: 3px;
}

.shop-status,
.shop-boundary,
.shop-payment-notice,
.shop-empty {
    border-radius: 10px;
    padding: 14px 16px;
    background: rgba(27, 17, 11, .82);
}

.shop-error {
    color: #ffd3cb;
    border: 1px solid #bd6757;
}

.shop-boundary {
    margin: 0 0 10px;
}

.shop-payment-notice {
    margin: 0 0 24px;
    border: 1px solid #9f824d;
    color: #efd99f;
}
.shop-pending {
    margin: 14px 0;
    padding: 14px;
    border: 1px solid rgba(249, 195, 91, .65);
    border-radius: 12px;
    background: rgba(43, 31, 16, .72);
}
.shop-pending span { display: block; margin-top: 6px; }
.shop-pending button { min-height: 44px; padding: 8px 18px; }
.shop-product button:not(:disabled):hover { filter: brightness(1.12); }

.shop-categories {
    display: grid;
    gap: 28px;
}

.shop-category {
    min-width: 0;
}

.shop-category h2 {
    margin-bottom: 12px;
    color: #f2d895;
}

.shop-product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 14px;
}

.shop-product {
    display: flex;
    min-width: 0;
    min-height: 220px;
    flex-direction: column;
    padding: 18px;
    border: 1px solid rgba(210, 174, 100, .72);
    border-radius: 14px;
    background:
        linear-gradient(145deg, rgba(74, 45, 25, .96), rgba(38, 24, 16, .97));
    box-shadow: 0 10px 24px rgba(0, 0, 0, .24);
}

.shop-product-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.shop-product h3 {
    overflow-wrap: anywhere;
    color: #fff0be;
}

.shop-product > p {
    flex: 1;
    color: #e3d5b8;
    line-height: 1.45;
}

.shop-value-badge,
.shop-owned {
    flex: 0 0 auto;
    border-radius: 999px;
    padding: 5px 8px;
    font-size: 12px;
    font-weight: 700;
}

.shop-value-badge {
    color: #143423;
    background: #b8db79;
}

.shop-owned {
    color: #143423;
    background: #e2c86f;
}

.shop-product-footer {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.shop-price {
    margin-right: auto;
    color: #ffe39a;
    font-size: 24px;
}

.shop-product button:disabled {
    cursor: not-allowed;
    border-color: #796d57;
    color: #c7bfaf;
    background: #3c3a35;
    opacity: 1;
}

@media (max-width: 700px) {
    .shop-view {
        padding: 18px 14px;
    }

    .shop-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .shop-back {
        width: 100%;
    }

    .shop-product-grid {
        grid-template-columns: 1fr;
    }

    .shop-product {
        min-height: 0;
    }
}

.economy-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 22px;
}

.economy-heading h1 {
    margin: 2px 0 0;
    font-size: clamp(28px, 4vw, 42px);
}

.economy-eyebrow,
.economy-label {
    margin: 0;
    color: #d7b875;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.economy-back,
.economy-bonus button {
    min-height: 48px;
    border: 2px solid #b89146;
    border-radius: 10px;
    padding: 10px 18px;
    color: #fff7df;
    background: linear-gradient(#67502f, #392817);
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}

.economy-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.economy-history {
    grid-column: 1 / -1;
}

.economy-history-heading,
.economy-history-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.economy-history-heading h2 {
    margin: 4px 0 0;
}

.economy-history-heading > span,
.economy-history-item time,
.economy-history-values span {
    color: #d8c59c;
    font-size: .9rem;
}

.economy-history-list {
    max-height: 430px;
    margin: 20px 0 0;
    padding: 0;
    overflow-y: auto;
    list-style: none;
    scrollbar-width: thin;
    scrollbar-color: #b89146 rgba(28, 18, 10, .8);
}

.economy-history-item {
    min-width: 0;
    padding: 14px 4px;
    border-bottom: 1px solid rgba(215, 184, 117, .24);
}

.economy-history-item > div {
    display: grid;
    min-width: 0;
    gap: 4px;
}

.economy-history-values {
    justify-items: end;
    text-align: right;
}

.economy-history-values .positive {
    color: #a9e48e;
}

.economy-history-values .negative {
    color: #ffb0a3;
}

.economy-history-state {
    margin: 18px 0 0;
    text-align: center;
}

.economy-history-more {
    width: 100%;
    min-height: 48px;
    margin-top: 18px;
    border: 2px solid #b89146;
    border-radius: 10px;
    color: #fff7df;
    background: linear-gradient(#67502f, #392817);
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}

.economy-history-more:focus-visible {
    outline: 3px solid #fff2a8;
    outline-offset: 3px;
}

.economy-history-more:disabled {
    cursor: wait;
    opacity: .6;
}

.economy-card {
    min-width: 0;
    border: 2px solid #7f5b2b;
    border-radius: 16px;
    padding: clamp(20px, 4vw, 34px);
    background: linear-gradient(145deg, rgba(76, 50, 26, .96), rgba(38, 25, 15, .98));
    box-shadow: inset 0 0 0 2px rgba(245, 211, 139, .12), 0 10px 22px rgba(0, 0, 0, .28);
}

.economy-card strong {
    display: block;
    margin: 10px 0 2px;
    font-size: clamp(24px, 4vw, 38px);
    color: #fff4c7;
}

.economy-card p:last-child {
    line-height: 1.5;
}

.economy-bonus button {
    width: 100%;
    margin-top: 14px;
    background: linear-gradient(#4f7a38, #294c23);
}

.economy-back:hover,
.economy-bonus button:hover:not(:disabled) {
    filter: brightness(1.1);
}

.economy-back:focus-visible,
.economy-bonus button:focus-visible {
    outline: 3px solid #fff2a8;
    outline-offset: 3px;
}

.economy-bonus button:disabled {
    cursor: not-allowed;
    opacity: .55;
}

.economy-status {
    border-radius: 12px;
    padding: 20px;
    background: rgba(34, 23, 14, .92);
    text-align: center;
}

.economy-error {
    border: 2px solid #b65845;
    color: #ffd8cf;
}

@media (max-width: 768px) {
    .economy-view {
        padding: 18px 12px 30px;
    }

    .economy-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .economy-grid {
        grid-template-columns: 1fr;
    }

    .economy-back {
        width: 100%;
    }

    .economy-history-heading,
    .economy-history-item {
        align-items: flex-start;
    }
}

@media (max-width: 480px) {
    .economy-history-item {
        flex-direction: column;
    }

    .economy-history-values {
        justify-items: start;
        text-align: left;
    }
}

        .friends-heading {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 20px;
            padding-bottom: 18px;
            border-bottom: 1px solid rgba(227, 178, 91, 0.22);
        }

        .friends-heading h1 {
            margin: 2px 0 0;
            color: #f2dfb4;
            font: 700 clamp(30px, 3vw, 44px)/1 Georgia, serif;
        }

        .friends-eyebrow {
            margin: 0;
            color: rgba(230, 216, 184, 0.7);
            font-size: 13px;
            letter-spacing: .08em;
            text-transform: uppercase;
        }

        .friends-back,
        .friends-search button,
        .friends-tabs button,
        .friends-card-actions button {
            min-height: 48px;
            color: #f1dfb8;
            border: 1px solid rgba(224, 177, 88, 0.42);
            border-radius: 10px;
            background: #4a2615;
            font: 700 14px Georgia, serif;
            cursor: pointer;
        }

        .friends-back {
            padding: 0 18px;
        }

        .friends-search {
            display: grid;
            gap: 8px;
            margin: 20px 0 12px;
        }

        .friends-search label {
            color: rgba(230, 216, 184, 0.76);
            font-size: 14px;
        }

        .friends-search > div {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            gap: 10px;
        }

        .friends-search input {
            min-width: 0;
            min-height: 48px;
            box-sizing: border-box;
            padding: 0 14px;
            color: #fff4dc;
            border: 1px solid rgba(224, 177, 88, 0.34);
            border-radius: 10px;
            background: rgba(8, 4, 2, 0.65);
            font: 16px Georgia, serif;
        }

        .friends-search button {
            padding: 0 22px;
        }

        .friends-search-result {
            margin-bottom: 14px;
        }

        .friends-status,
        .friends-empty {
            margin: 14px 0;
            padding: 18px;
            color: rgba(230, 216, 184, 0.78);
            text-align: center;
            border: 1px solid rgba(227, 178, 91, 0.18);
            border-radius: 12px;
            background: rgba(17, 8, 4, 0.42);
        }

        .friends-error {
            color: #ffb6a6;
            border-color: rgba(197, 81, 61, 0.55);
        }

        .friends-tabs {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 8px;
            margin: 14px 0;
        }

        .friends-tabs button {
            padding: 8px;
        }

        .friends-tabs button.active {
            color: #fff2c9;
            border-color: #d6a74f;
            background: #6a431f;
        }
        .room-invitations { margin-top: 1.25rem; padding: 1rem; border: 1px solid rgba(101,224,255,.28); border-radius: 16px; background: rgba(7,25,43,.88); }
        .room-invitations-heading,.room-invitation-card,.room-invitation-actions { display:flex; align-items:center; gap:.75rem; }
        .room-invitations-heading { justify-content:space-between; }
        .room-invitation-columns { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
        .room-invitation-list { display:grid; gap:.6rem; }
        .room-invitation-card { min-width:0; padding:.65rem; border-radius:12px; background:rgba(255,255,255,.07); }
        .room-invitation-card strong,.room-invitation-card p { min-width:0; overflow-wrap:anywhere; }
        .room-invitation-card button,.room-invitations button { min-height:44px; }
        .room-invitation-picker { padding:1rem; border:2px solid #65e0ff; border-radius:14px; background:#0b2135; }
        @media (max-width:700px){.room-invitation-columns{grid-template-columns:1fr}.room-invitation-card{flex-wrap:wrap}}

        .friends-tab-count {
            display: inline-grid;
            place-items: center;
            min-width: 24px;
            height: 24px;
            margin-left: 4px;
            border-radius: 999px;
            background: rgba(0, 0, 0, 0.28);
            font-variant-numeric: tabular-nums;
        }

        .friends-list {
            display: grid;
            gap: 10px;
        }

        .friends-card {
            display: grid;
            grid-template-columns: 52px minmax(0, 1fr) auto;
            align-items: center;
            gap: 14px;
            min-width: 0;
            padding: 13px;
            border: 1px solid rgba(227, 178, 91, 0.18);
            border-radius: 12px;
            background: rgba(65, 32, 16, 0.45);
        }

        .friends-avatar {
            position: relative;
            display: grid;
            place-items: center;
            width: 48px;
            height: 48px;
            color: #f1dcae;
            border: 2px solid rgba(224, 170, 77, 0.5);
            border-radius: 50%;
            background: radial-gradient(circle at 35% 28%, #73502c, #2b160b 72%);
            font: 700 22px Georgia, serif;
            overflow: hidden;
        }

        .friends-avatar .avatar-image,
        .friends-avatar .avatar-fallback {
            width: 100%;
            height: 100%;
        }

        .friends-avatar .avatar-image {
            display: block;
            object-fit: cover;
            pointer-events: none;
        }

        .friends-avatar .avatar-fallback {
            display: grid;
            place-items: center;
        }

        .friends-card-identity {
            display: grid;
            min-width: 0;
            gap: 4px;
        }

        .friends-card-identity strong {
            overflow: hidden;
            color: #f2dfb4;
            font: 700 18px Georgia, serif;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .friends-card-identity span {
            color: rgba(230, 216, 184, 0.66);
            font-size: 13px;
        }

        .friends-card-actions {
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-end;
            gap: 7px;
        }

        .friends-card-actions button {
            min-height: 44px;
            padding: 7px 12px;
        }

        .friends-more {
            min-height: 44px;
            justify-self: center;
            padding: 8px 18px;
        }

        .friends-back:hover,
        .friends-search button:hover,
        .friends-tabs button:hover,
        .friends-card-actions button:hover {
            filter: brightness(1.1);
        }

        .friends-view button:focus-visible,
        .friends-view input:focus-visible {
            outline: 3px solid #f0c76b;
            outline-offset: 2px;
        }

        .friends-view button:disabled {
            opacity: .55;
            cursor: wait;
        }

        @media (max-width: 768px) {
            .friends-view {
                width: 100%;
                max-height: none;
                margin: 20px 0;
            }

            .friends-tabs {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }

            .friends-card {
                grid-template-columns: 48px minmax(0, 1fr);
            }

            .friends-card-actions {
                grid-column: 1 / -1;
                justify-content: stretch;
            }

            .friends-card-actions button {
                flex: 1 1 110px;
                min-height: 48px;
            }
        }

        @media (max-width: 480px) {
            .friends-heading {
                align-items: stretch;
                flex-direction: column;
            }

            .friends-search > div {
                grid-template-columns: 1fr;
            }

            .friends-search button {
                width: 100%;
            }
        }
        #authScreen { align-items: center; justify-content: center; background: #10131b; }
        #authScreen.active { display: flex; }
        .auth-card { width: min(420px, 90vw); padding: 32px; border-radius: 18px; background: #1c2230; color: white; box-shadow: 0 20px 60px #0008; }
        .auth-card form { display: grid; gap: 12px; }
        .auth-card input, .auth-card button { padding: 12px; border-radius: 8px; border: 1px solid #536078; }
        .auth-card button { cursor: pointer; background: #356f49; color: white; }
        #authError, #appError { color: #ff9d9d; }
        #appError { position: fixed; top: 76px; right: 22px; z-index: 20; box-sizing: border-box; max-width: min(440px, calc(100vw - 44px)); overflow-wrap: anywhere; background: #5b2525; padding: 10px 14px; border-radius: 8px; }
        .waiting-room-panel { margin: 24px auto; max-width: 720px; padding: 32px; text-align: center; border: 1px solid rgba(255,255,255,.16); border-radius: 18px; background: rgba(22, 39, 47, .86); box-shadow: 0 18px 40px #0006; }
        .waiting-room-panel h2 { margin-top: 0; font-size: 30px; }
        .waiting-public-id { color: #d8b56c; letter-spacing: .08em; font-weight: 800; }
        .waiting-details { line-height: 1.8; color: #d8dde5; }
        .waiting-room-panel button { margin-top: 20px; padding: 12px 22px; border: 0; border-radius: 9px; background: #713735; color: white; cursor: pointer; }
        .temporary-logout-button { position: fixed; top: 18px; right: 22px; z-index: 30; padding: 12px 22px; border: 1px solid rgba(255,255,255,.35); border-radius: 10px; background: linear-gradient(135deg, #8d3030, #581c1c); color: white; font-weight: 900; letter-spacing: .06em; cursor: pointer; }
        .temporary-logout-button:disabled { opacity: .6; cursor: wait; }
        .auth-blocker { display: none; position: fixed; inset: 0; z-index: 2000; background: rgba(5, 8, 10, .38); }
        .auth-blocker.active { display: block; }
        .auth-blocker[hidden], .auth-overlay[hidden] { display: none !important; pointer-events: none !important; visibility: hidden !important; }
        .auth-overlay { display: none; position: fixed; inset: 0; z-index: 2010; align-items: center; justify-content: center; padding: 24px; pointer-events: none; }
        #authScreen.auth-overlay { background: transparent; }
        .auth-overlay.active { display: flex; }
        .auth-card { width: min(900px, 100%); padding: 36px 44px 28px; border: 1px solid rgba(180, 137, 68, .62); border-radius: 18px; background: rgba(25, 18, 14, .94); box-shadow: 0 28px 80px rgba(0,0,0,.58); backdrop-filter: blur(8px); color: #f6ecd6; pointer-events: auto; }
        .auth-header { text-align: center; margin-bottom: 26px; }
        .auth-header h1 { margin: 0; color: #d9ad57; font-size: 56px; letter-spacing: .18em; }
        .auth-header p { margin: 8px 0 0; color: #d9c29a; font-size: 16px; }
        .auth-rule { height: 1px; margin: 0 auto 18px; width: 60%; background: linear-gradient(90deg, transparent, #b48a48, transparent); }
        .auth-columns { display: grid; grid-template-columns: 1fr 1px 1fr; gap: 34px; }
        .auth-columns form { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
        .auth-columns h2 { margin: 0 0 4px; color: #e5c27e; }
        .auth-columns label { display: flex; flex-direction: column; gap: 6px; color: #e7d8bd; font-size: 14px; }
        .auth-columns input { width: 100%; box-sizing: border-box; padding: 12px 13px; border: 1px solid rgba(213, 181, 119, .34); border-radius: 8px; background: rgba(5, 8, 10, .62); color: #fff; font: inherit; }
        .auth-columns input:focus { outline: none; border-color: #d4aa5e; box-shadow: 0 0 0 2px rgba(212,170,94,.18); }
        .auth-columns button { width: 100%; min-height: 44px; margin-top: 4px; border: 1px solid rgba(145,255,120,.45); border-radius: 9px; background: linear-gradient(135deg,#3a8a33,#245f26); color: white; font-weight: 900; cursor: pointer; }
        .auth-columns button:disabled { opacity: .6; cursor: wait; }
        .auth-divider { background: rgba(213,181,119,.34); }
        .auth-form-error { min-height: 20px; margin: 0; color: #ffad9d; font-size: 13px; }
        .lobby-empty-state { display: grid; place-content: center; min-height: 100%; margin: 0; padding: 28px; text-align: center; color: #d8dde5; line-height: 1.55; }
        .auth-footer { margin-top: 28px; text-align: center; color: #bcae96; font-size: 13px; }
        @media (max-width: 700px) { .auth-overlay { padding: 12px; overflow-y: auto; } .auth-card { padding: 28px 22px 22px; } .auth-header h1 { font-size: 42px; } .auth-columns { grid-template-columns: 1fr; gap: 20px; } .auth-divider { height: 1px; width: 100%; } }
.inventory-view { height: calc(100vh - 56px); min-height: 0; padding: clamp(20px,3vw,36px); overflow: auto; }
.inventory-heading { display: flex; justify-content: space-between; gap: 24px; align-items: flex-start; max-width: 1120px; margin: 0 auto; }
.inventory-heading h1 { margin: 3px 0 5px; font-size: clamp(30px,4vw,42px); line-height:1.05; }
.inventory-eyebrow { margin:0; color:#d7b76f; font-size:12px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
.inventory-intro { max-width:590px; margin:0; color:#b8c4c0; line-height:1.55; }
.inventory-heading > button { min-height:44px; flex:0 0 auto; }
.avatar-gallery-section,.card-design-gallery-section,.inventory-fulfillment-section { max-width:1120px; margin:30px auto 0; }
.avatar-gallery { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:16px; }
.avatar-card { display:flex; min-width:0; flex-direction:column; align-items:center; gap:10px; padding:16px; border:1px solid rgba(213,181,119,.2); border-radius:16px; background:linear-gradient(160deg,rgba(23,43,37,.96),rgba(9,22,19,.96)); text-align:center; }
.avatar-card.is-selected { border-color:#d8b96d; box-shadow:0 0 0 2px rgba(216,185,109,.22),0 12px 26px rgba(0,0,0,.28); }
.avatar-card-image { width:112px; height:112px; border-radius:50%; object-fit:cover; }
.avatar-card h3 { max-width:100%; margin:0; overflow-wrap:anywhere; font-size:17px; line-height:1.25; }
.avatar-card-status { min-height:20px; color:#c8d2ce; font-size:13px; }
.avatar-card-use-button { width:100%; min-height:44px; margin-top:auto; border:1px solid rgba(213,181,119,.55); border-radius:10px; background:linear-gradient(135deg,#947038,#644b28); color:#fff; font:800 14px/1 system-ui,sans-serif; cursor:pointer; }
.avatar-card-use-button:focus-visible { outline:3px solid #f7d54a; outline-offset:3px; }
.card-design-gallery-heading { display:flex; align-items:end; justify-content:space-between; gap:18px; margin-bottom:14px; }
.card-design-gallery-heading h2 { margin:0 0 4px; font-size:22px; }
.card-design-gallery-heading p { margin:0; color:#aebbb7; }
.card-design-gallery { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,300px)); gap:clamp(16px,2vw,22px); justify-content:start; }
.card-design-card { display:flex; min-width:0; min-height:390px; flex-direction:column; overflow:hidden; border:1px solid rgba(213,181,119,.2); border-radius:18px; background:linear-gradient(160deg,rgba(23,43,37,.96),rgba(9,22,19,.96)); box-shadow:0 12px 28px rgba(0,0,0,.2); }
.card-design-card.is-selected { border-color:#d8b96d; box-shadow:0 0 0 2px rgba(216,185,109,.22),0 16px 34px rgba(0,0,0,.3); }
.card-design-preview { display:grid; min-height:230px; place-items:center; padding:24px; border-bottom:1px solid rgba(255,255,255,.08); background:radial-gradient(circle at 50% 38%,rgba(213,181,119,.16),transparent 58%),rgba(4,13,11,.45); }
.card-design-preview-placeholder { position:relative; width:132px; height:150px; }
.card-design-preview-placeholder::before,.card-design-preview-placeholder::after { position:absolute; content:""; width:72px; aspect-ratio:5/7; border:2px dashed rgba(213,181,119,.38); border-radius:8px; background:rgba(255,255,255,.025); }
.card-design-preview-placeholder::before { left:12px; top:6px; rotate:-7deg; }
.card-design-preview-placeholder::after { right:12px; bottom:4px; rotate:7deg; }
.card-design-body { display:flex; flex:1; flex-direction:column; padding:20px; }
.card-design-title-row { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.card-design-title-row h3 { min-width:0; margin:0; font-size:22px; line-height:1.2; overflow-wrap:anywhere; }
.card-design-selected-badge { flex:0 0 auto; padding:5px 9px; border:1px solid rgba(229,197,116,.48); border-radius:999px; background:rgba(229,197,116,.12); color:#f2d789; font-size:12px; font-weight:800; }
.card-design-meta { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:13px; }
.card-design-price { color:#f2eee2; font-size:16px; }
.card-design-status { color:#9fafaa; font-size:13px; }
.card-design-action { display:flex; min-height:52px; align-items:flex-end; margin-top:auto; padding-top:18px; }
.card-design-use-button { width:100%; min-height:44px; border:1px solid rgba(213,181,119,.55); border-radius:10px; background:linear-gradient(135deg,#947038,#644b28); color:#fff; font:800 14px/1 system-ui,sans-serif; cursor:pointer; }
.card-design-use-button:hover { filter:brightness(1.08); }
.card-design-use-button:focus-visible { outline:3px solid #f7d54a; outline-offset:3px; }
.inventory-empty-state { display:flex; align-items:center; gap:8px; margin:0 0 18px; padding:12px 15px; border:1px solid rgba(255,255,255,.1); border-radius:12px; background:rgba(255,255,255,.035); color:#aebbb7; font-size:14px; }
.inventory-empty-state strong { color:#e7ddd0; }
.inventory-hidden { display: none !important; }
.shop-purchases { margin-top:24px; }
.shop-purchases ol, #inventoryFulfillment { display: grid; gap: 8px; padding-left: 22px; }

/* Card cosmetics are presentation-only; gameplay state owns actions and order. */
.my-hand, .current-trick { display: flex; align-items: center; justify-content: center; gap: clamp(4px, 1vw, 12px); min-width: 0; }
.my-hand { flex-wrap: nowrap; max-width: min(100%, 920px); margin-inline: auto; overflow: visible; }
.current-trick { min-height: clamp(92px, 18vw, 168px); }
.playing-card { position: relative; box-sizing: border-box; flex: 0 1 clamp(44px, 9vw, 100px); width: clamp(44px, 9vw, 100px); min-width: 44px; height: auto; aspect-ratio: 5 / 7; min-height: 62px; padding: 0; overflow: hidden; border: 2px solid #172033; border-radius: clamp(5px, .8vw, 10px); background: #fff; color: #10131a; box-shadow: 0 3px 9px rgba(0,0,0,.38); font: 800 clamp(12px, 2vw, 20px)/1 system-ui,sans-serif; isolation: isolate; }
button.playing-card { cursor: pointer; touch-action: manipulation; }
button.playing-card:hover:not(:disabled), button.playing-card:focus-visible { translate: 0 -5px; outline: 3px solid #f7d54a; outline-offset: 2px; }
.playing-card.disabled, .playing-card:disabled { cursor: default; opacity: .9; }
.playing-card.selected { border-color: #f7d54a; box-shadow: 0 0 0 3px #172033,0 0 0 6px #f7d54a; }
.playing-card img { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.inventory-basic-preview { display:flex; gap:14px; align-items:center; justify-content:center; }
.inventory-basic-card { width:82px; min-width:82px; height:115px; min-height:115px; flex-basis:82px; pointer-events:none; }
@media (max-width: 620px) {
    .inventory-view { padding:18px 14px 28px; }
    .inventory-heading { align-items:stretch; flex-direction:column; }
    .inventory-heading > button { align-self:flex-start; }
    .avatar-gallery-section,.card-design-gallery-section,.inventory-fulfillment-section { margin-top:25px; }
    .avatar-gallery { grid-template-columns:minmax(0,1fr); }
    .card-design-gallery { grid-template-columns:minmax(0,1fr); }
    .card-design-card { min-height:365px; }
    .inventory-empty-state { align-items:flex-start; flex-direction:column; }
}
@media (max-width: 480px) {
    .my-hand { justify-content: flex-start; gap: 0; padding: 8px; overflow-x: auto; overflow-y: visible; scrollbar-gutter: stable; }
    .my-hand .playing-card + .playing-card { margin-left: clamp(-18px,-3vw,-8px); }
    .playing-card { width: clamp(44px,15vw,62px); flex-basis: clamp(44px,15vw,62px); }
}

/* In-game room Phase 1 composition */
#gameScreen {
    --room-surface: rgba(10, 6, 4, .92);
    --room-surface-strong: rgba(8, 5, 3, .97);
    --room-border: rgba(218, 158, 78, .38);
    --room-border-soft: rgba(218, 158, 78, .22);
    --room-gold: #f6d89f;
    --room-text: #f2e5cc;
    --room-radius: 9px;
    --room-panel-radius: 13px;
    --room-shadow: 0 12px 28px rgba(0, 0, 0, .5);
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background:
        radial-gradient(circle at 50% 22%, rgba(127, 64, 24, .26), transparent 34%),
        repeating-linear-gradient(90deg, rgba(116, 60, 25, .12) 0 2px, transparent 2px 118px),
        linear-gradient(180deg, #261207 0%, #100805 56%, #070403 100%);
}

#gameScreen::before {
    content: "";
    position: absolute;
    z-index: 0;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(0, 0, 0, .68), transparent 18%, transparent 82%, rgba(0, 0, 0, .68)),
        linear-gradient(180deg, rgba(0, 0, 0, .08), transparent 48%, rgba(0, 0, 0, .42));
}

.game-screen {
    position: relative;
    z-index: 1;
    width: min(100vw, 1920px);
    min-height: 100vh;
    margin: 0 auto;
    overflow: hidden;
}

.game-table-area {
    position: absolute;
    inset: 0;
    min-width: 0;
}

.game-table-art {
    position: absolute;
    z-index: 1;
    top: 27%;
    left: 50%;
    width: min(78vw, 1320px);
    height: min(68vw, 880px);
    max-height: 75vh;
    object-fit: contain;
    clip-path: ellipse(48% 43% at 50% 46%);
    mix-blend-mode: screen;
    transform: translateX(-50%);
    pointer-events: none;
    user-select: none;
}

.side-panel {
    position: absolute;
    z-index: 8;
    min-width: 0;
    color: #f3e7cf;
    background: transparent;
    filter: drop-shadow(0 12px 18px rgba(0, 0, 0, .46));
}

.game-chat-panel {
    top: 29%;
    bottom: auto;
    left: 1%;
    width: clamp(220px, 17vw, 310px);
    height: auto;
    aspect-ratio: 938 / 1677;
}

.game-results-panel {
    top: 30%;
    right: 0;
    bottom: auto;
    width: clamp(261px, calc(18.7vw + 8px), 342px);
}

.game-panel-art,
.game-top-art,
.player-panel-art {
    position: absolute;
    z-index: 0;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
    user-select: none;
    mix-blend-mode: screen;
}

.game-top-art {
    top: -14%;
    bottom: auto;
    height: auto;
    clip-path: inset(14% 1% 18%);
}

.game-results-panel .game-panel-art,
.player-panel-art-local {
    display: none;
}

.game-chat-panel .game-panel-art {
    display: block;
    object-fit: contain;
    mix-blend-mode: normal;
}

.game-chat-panel::before {
    display: none;
}

.game-results-panel::before {
    inset: 0;
}

.player-panel-art-opponent {
    mix-blend-mode: normal;
}

.player-panel-opponent-portrait {
    clip-path: circle(21% at 50% 20%);
}

.player-panel-opponent-body {
    clip-path: inset(30% 6% 1% round 5%);
}

.side-panel::before,
.player-badge.player-local::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 3%;
    border: 1px solid var(--room-border);
    border-radius: var(--room-panel-radius);
    background: var(--room-surface);
    box-shadow:
        inset 0 0 22px rgba(180, 101, 38, .08),
        var(--room-shadow);
}

.player-badge.player-local::before {
    inset: 0;
    border: 20px solid transparent;
    border-image-source: url("./assets/game-room/desktop/local-player-panel.png");
    border-image-slice: 120 fill;
    border-image-width: 20px;
    border-image-repeat: stretch;
    border-radius: 0;
    background: #100906;
    box-shadow: none;
}

.game-panel-content {
    position: absolute;
    z-index: 1;
    inset: 5% 7% 6%;
    display: flex;
    min-width: 0;
    min-height: 0;
    flex-direction: column;
}

.game-chat-panel .game-panel-content {
    inset: 0;
    display: block;
}

.chat-panel-title {
    position: absolute;
    left: 22%;
    top: 3.8%;
    width: 65%;
    height: 6.5%;
    z-index: 1;
    display: flex;
    align-items: center;
    margin: 0;
    color: #f1d39a;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(14px, 1vw, 17px);
    font-weight: 700;
    line-height: 1;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .85);
}

.game-results-panel .game-panel-content {
    position: relative;
    inset: auto;
    width: auto;
    margin: 10px 6px 12px;
    box-sizing: border-box;
}

.game-results-panel .panel-title {
    margin: 0 0 6px;
}

.panel-title {
    flex: 0 0 auto;
    min-height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--room-border-soft);
    color: var(--room-text);
    font-family: Georgia, serif;
    font-size: clamp(18px, 1.35vw, 24px);
    font-weight: 700;
    letter-spacing: .01em;
    line-height: 1.15;
    text-shadow: 0 2px 4px #000;
}

.chat-messages,
.score-panel-content {
    min-width: 0;
    min-height: 0;
}

.chat-messages {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 2.4%;
    overflow-x: hidden;
    overflow-y: auto;
    border: 0;
    border-radius: 0;
    background: transparent;
    list-style: none;
    scrollbar-gutter: stable;
}

.chat-messages:has(> .chat-empty:only-child) {
    scrollbar-gutter: auto;
}

.chat-log {
    position: absolute;
    left: 5.2%;
    top: 12.1%;
    width: 89.5%;
    height: 72.7%;
    min-width: 0;
    min-height: 0;
}

.chat-messages:focus-visible {
    outline: 2px solid #e0aa5b;
    outline-offset: 2px;
}

.chat-message {
    display: grid;
    min-width: 0;
    gap: 3px;
    padding: 7px 6px 8px;
    border-bottom: 1px solid rgba(224, 170, 91, .16);
    line-height: 1.35;
}

.chat-message:last-child {
    border-bottom: 0;
}

.chat-sender {
    overflow: hidden;
    color: var(--room-gold);
    font-size: 12px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-text {
    min-width: 0;
    color: var(--room-text);
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.chat-message-notice .chat-text {
    color: #c9bba3;
    font-style: italic;
}

.chat-message-notice.important .chat-text {
    color: #f6d89f;
}

.chat-message-notice.bad .chat-text {
    color: #ff9d93;
}

.chat-empty {
    display: grid;
    width: 100%;
    height: 100%;
    min-height: 0;
    box-sizing: border-box;
    padding: 16px 8px;
    place-items: center;
    color: #c9bba3;
    line-height: 1.4;
    text-align: center;
}

.chat-input {
    position: absolute;
    inset: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    pointer-events: none;
}

.chat-composer {
    position: absolute;
    left: 7.3%;
    top: 87.1%;
    width: 67.9%;
    height: 7.7%;
    box-sizing: border-box;
    min-width: 0;
    padding: 0 7%;
    border: 0;
    border-radius: 12% / 48%;
    color: #f1e5cf;
    background: rgba(8, 5, 3, .88);
    font: inherit;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    pointer-events: auto;
}

.chat-composer:empty::before {
    color: rgba(201, 187, 163, .48);
    content: attr(data-placeholder);
    pointer-events: none;
}

.chat-composer-emoji {
    display: inline-flex;
    width: 24px;
    height: 24px;
    align-items: center;
    justify-content: center;
    margin: 0 2px;
    vertical-align: -6px;
}

.chat-composer-emoji img {
    display: block;
    width: 24px;
    height: 24px;
    object-fit: contain;
    pointer-events: none;
}

.chat-input button {
    position: absolute;
    left: 77.6%;
    top: 86.1%;
    width: 15.3%;
    height: 8.6%;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    color: transparent;
    background: transparent;
    font-size: 0;
    cursor: pointer;
    pointer-events: auto;
}

#chatSendButton {
    display: none;
}

.chat-emoji-picker {
    position: fixed;
    z-index: 40;
    display: grid;
    grid-template-columns: repeat(6, 30px);
    gap: 3px;
    box-sizing: border-box;
    padding: 4px;
    border: 1px solid rgba(224, 170, 91, .72);
    border-radius: 9px;
    background: rgba(24, 14, 8, .97);
    box-shadow: 0 5px 14px rgba(0, 0, 0, .48);
}

.chat-emoji-picker[hidden] {
    display: none;
}

.chat-emoji-picker button {
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    padding: 0;
    border: 1px solid rgba(224, 170, 91, .3);
    border-radius: 6px;
    background: rgba(77, 46, 24, .78);
    cursor: pointer;
    transition: transform 90ms ease, border-color 90ms ease, background-color 90ms ease;
}

.chat-emoji-picker img {
    display: block;
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.chat-inline-emoji {
    display: inline-block;
    width: 1.15em;
    height: 1.15em;
    margin: 0 .08em;
    object-fit: contain;
    vertical-align: -.18em;
}

.chat-emoji-picker button:hover {
    border-color: #f2c879;
    background: rgba(121, 72, 32, .94);
    transform: translateY(-1px);
}

.chat-emoji-picker button:focus-visible {
    outline: 2px solid #f6d89f;
    outline-offset: 1px;
}

.chat-emoji-picker button:active {
    transform: translateY(1px);
}

@media (max-width: 1099px) {
    .chat-emoji-picker {
        grid-template-columns: repeat(4, 30px);
    }
}

.chat-composer:focus-visible,
.chat-input button:focus-visible {
    outline: 2px solid #f6d89f;
    outline-offset: 2px;
}

.score-panel-content {
    flex: 1 1 auto;
    box-sizing: border-box;
    max-height: 414px;
    padding: 2px;
    overflow-x: hidden;
    overflow-y: auto;
}

.score-panel-content:has(#gameResultsHistory tr:nth-child(11)) {
    padding-bottom: 4px;
}

.score-panel-content:focus-visible {
    outline: 2px solid #e0aa5b;
    outline-offset: 2px;
}

.game-results-table {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 2px;
    color: #f2e5cc;
    font-size: clamp(11px, .82vw, 14px);
    font-variant-numeric: tabular-nums;
}

.game-results-table col.game-results-deal-column {
    width: 48px;
}

.game-results-table col.game-results-player-column {
    width: calc((100% - 48px - 10px) / 3);
}

.game-results-table th,
.game-results-table td {
    box-sizing: border-box;
    height: 32px;
    min-width: 0;
    padding: 7px 2px;
    overflow: hidden;
    border: 1px solid rgba(224, 170, 91, .2);
    border-radius: 5px;
    background: rgba(18, 10, 6, .82);
    line-height: 16px;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.game-results-table th:first-child {
    text-align: center;
}

.game-results-table thead {
    position: sticky;
    top: 0;
    z-index: 3;
}

.game-results-table tfoot {
    position: sticky;
    bottom: 0;
    z-index: 3;
}

.game-results-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    color: #f6d89f;
    font-weight: 800;
}

.game-results-table thead th:not(:first-child) {
    font-weight: 400;
}

.game-results-table tbody th {
    color: #d9c4a0;
    font-weight: 700;
}

.game-results-table tfoot th,
.game-results-table tfoot td {
    position: sticky;
    bottom: 0;
    z-index: 2;
    border-color: rgba(224, 170, 91, .48);
    background: rgba(48, 27, 13, .94);
    font-weight: 900;
}

.game-results-table .game-results-empty td {
    padding: 18px 8px;
    color: #c9bba3;
    line-height: 1.35;
    text-align: center;
    white-space: normal;
}

.score-positive { color: #9de077; }
.score-negative { color: #ff8b7f; }
.score-neutral { color: #f2e5cc; }
.score-unavailable { color: #c9bba3; }

.game-top {
    position: absolute;
    z-index: 10;
    top: 1.4%;
    left: 50%;
    width: clamp(360px, 27vw, 500px);
    height: clamp(82px, 8vw, 116px);
    transform: translateX(-50%);
    filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .46));
}

.game-top-content {
    position: absolute;
    z-index: 1;
    inset: 18% 7% 20%;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-content: center;
    gap: 3px 10px;
}

.game-room-info {
    grid-column: 1;
    display: grid;
    grid-template-columns: minmax(82px, .7fr) minmax(0, 1.3fr);
    gap: 2px 14px;
    min-width: 0;
    margin: 0;
    color: #f3e7cf;
    text-shadow: 0 2px 4px #000;
}

.game-room-info-item {
    display: flex;
    min-width: 0;
    gap: 5px;
    font-size: clamp(11px, .82vw, 14px);
    line-height: 1.25;
}

.game-room-info-item dt {
    color: #cbb99a;
}

.game-room-info-item dd {
    overflow: hidden;
    min-width: 0;
    margin: 0;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.game-room-statuses {
    grid-column: 1;
    display: flex;
    min-width: 0;
    gap: 5px 12px;
    color: #cbb99a;
    font-size: clamp(10px, .7vw, 12px);
    line-height: 1.2;
}

.game-room-statuses span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#gameConnectionStatus::before {
    content: "• ";
}

.player-badge {
    position: absolute;
    z-index: 7;
    width: clamp(150px, 15vw, 240px);
    height: clamp(190px, 21vw, 320px);
    max-width: none;
    padding: 0;
    color: #f1e4cb;
    filter: drop-shadow(0 11px 16px rgba(0, 0, 0, .52));
    transition: filter .16s ease;
}

.player-badge.player-local {
    z-index: 9;
    bottom: 0;
    left: 50%;
    width: clamp(320px, 31vw, 540px);
    height: clamp(150px, 12vw, 190px);
    transform: translateX(-50%);
}

.player-badge.player-active {
    filter:
        drop-shadow(0 0 9px rgba(255, 187, 74, .9))
        drop-shadow(0 12px 15px rgba(0, 0, 0, .55));
}

.player-badge.player-active::after {
    content: "";
    position: absolute;
    z-index: 3;
    inset: 31% 7% 2%;
    border: 2px solid rgba(255, 190, 75, .82);
    border-radius: 12px;
    pointer-events: none;
}

.player-turn-indicator {
    position: absolute;
    z-index: 4;
    top: 31%;
    left: 50%;
    display: none;
    padding: 2px 7px;
    border: 1px solid #f0b74f;
    border-radius: 999px;
    color: #211007;
    background: #f0b74f;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .55);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .04em;
    line-height: 1.2;
    text-transform: uppercase;
    transform: translate(-50%, -50%);
}

.player-active .player-turn-indicator {
    display: block;
}

.player-badge.player-local.player-active::after {
    inset: 8% 3%;
}

.player-local .player-turn-indicator {
    top: 7%;
    left: 50%;
}

.player-badge.player-opponent-left {
    top: 8%;
    left: clamp(225px, 18vw, 330px);
}

.player-badge.player-opponent-right {
    top: 8%;
    right: clamp(225px, 18vw, 330px);
}

.player-local .player-panel-art-opponent {
    display: none;
}

.player-avatar {
    position: absolute;
    z-index: 2;
    top: 1%;
    left: 50%;
    width: 44%;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border: 2px solid rgba(219, 139, 54, .78);
    border-radius: 50%;
    color: #f5dec1;
    background:
        radial-gradient(circle at 36% 28%, rgba(191, 116, 49, .42), transparent 35%),
        linear-gradient(145deg, #432313, #140b08 68%);
    box-shadow: inset 0 0 22px rgba(0, 0, 0, .72);
    font-family: Georgia, serif;
    font-size: clamp(28px, 3.6vw, 56px);
    font-weight: 700;
    text-shadow: 0 2px 4px #000;
    transform: translateX(-50%);
    overflow: hidden;
}

.avatar-image {
    position: absolute;
    z-index: 1;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    border-radius: inherit;
    object-fit: cover;
}

.avatar-fallback {
    position: relative;
    z-index: 1;
}

.player-avatar i {
    position: absolute;
    right: 7%;
    bottom: 7%;
    width: 15%;
    min-width: 10px;
    aspect-ratio: 1;
    border: 2px solid #1a0e08;
    border-radius: 50%;
    background: #78736b;
}

.player-local .player-avatar {
    top: 16%;
    left: 5%;
    width: clamp(88px, 8vw, 124px);
    transform: none;
}

.player-online .player-avatar i {
    background: #62cf69;
    box-shadow: 0 0 8px rgba(98, 207, 105, .8);
}

.player-offline .player-avatar {
    filter: grayscale(.78);
    opacity: .78;
}

.player-offline .player-avatar i {
    background: #9d4b47;
}

.player-panel-content {
    position: absolute;
    z-index: 1;
    inset: 40% 6% 5%;
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 3px;
    text-align: center;
}

.player-local .player-panel-content {
    inset: 14% 7% 10% 29%;
    align-items: flex-start;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto auto;
    column-gap: 14px;
    row-gap: 7px;
    align-content: start;
    text-align: left;
}

/* Desktop design artwork authority. Responsive Phone/Tablet modes override these
   elements in their own scoped media blocks. */
#gameScreen[data-game-layout="standard"] .game-table-art {
    clip-path: none;
    mix-blend-mode: normal;
}

#gameScreen[data-game-layout="standard"] .game-top-art {
    top: 0;
    height: 100%;
    object-fit: fill;
    clip-path: none;
    mix-blend-mode: normal;
}

#gameScreen[data-game-layout="standard"] .game-results-panel::before {
    inset: 0;
    border: 18px solid transparent;
    border-image: url("./assets/game-room/desktop/results-panel.png") 72 fill / 18px stretch;
    border-radius: 0;
    background: none;
    box-shadow: var(--room-shadow);
}

#gameScreen[data-game-layout="standard"] .player-badge.player-local::before {
    border-image-source: url("./assets/game-room/desktop/local-player-panel.png");
    background: transparent;
}

#gameScreen[data-game-layout="standard"] .player-panel-art-opponent {
    mix-blend-mode: screen;
}

@media (min-width: 1366px) and (min-height: 700px) {
    :root {
        --layout-mode: desktop;
    }

    #gameScreen {
        --desktop-local-visible-width: clamp(394.94px, 31.5952vw, 500.257px);
        --desktop-wide-short-table-lift: min(
            80px,
            max(0px, calc((100vw - 1680px) * .22)),
            max(0px, calc((900px - 100dvh) * .4))
        );
        --desktop-table-base-top: clamp(80px, calc(23.25dvh - var(--desktop-wide-short-table-lift)), 250px);
        --desktop-table-base-width: min(91.806vw, 1553.64px, calc((100dvh - var(--desktop-table-base-top) - 2px) * 1208 / 1302));
        --desktop-wide-short-width-factor: clamp(0, calc((100vw - 1600px) / 36px), 1);
        --desktop-wide-short-height-factor: clamp(0, calc((800px - 100dvh) / 100px), 1);
        --desktop-wide-short-table-factor: min(var(--desktop-wide-short-width-factor), var(--desktop-wide-short-height-factor));
        --desktop-table-width: min(
            calc(var(--desktop-table-base-width) * (1 + var(--desktop-wide-short-table-factor) * .5)),
            calc((100dvh - 2px) * 1208 / 1302)
        );
        --desktop-table-natural-top: calc(100dvh - 2px - (var(--desktop-table-width) * 1302 / 1208));
        --desktop-table-y-shift: min(
            30px,
            max(0px, calc(100dvh - var(--desktop-table-natural-top) - (var(--desktop-table-width) * 1302 / 1208)))
        );
        --desktop-table-top: calc(var(--desktop-table-natural-top) + var(--desktop-table-y-shift));
        --desktop-hand-card-width: clamp(83px, 6.76vw, 127px);
        --desktop-hand-span: calc(8 * var(--desktop-hand-card-width) + 7 * (clamp(3px, .55vw, 8px) + clamp(-54px, -2.9vw, -28px)));
        --desktop-hand-top: calc(77dvh + 1px - max(75px, var(--desktop-hand-card-width) * .7) - var(--desktop-hand-card-width) * .7);
        --desktop-trick-card-width: clamp(60px, calc((var(--desktop-hand-top) - var(--desktop-table-top) - var(--desktop-table-width) * .1 - 54px) / 2.14), 100px);
        --desktop-bidding-gap: clamp(6px, calc(6px + (100dvh - 700px) * .013333), 10px);
        --desktop-bidding-padding: clamp(12px, calc(12px + (100dvh - 700px) * .026667), 20px);
        --desktop-bidding-top: min(
            calc(50% - 132px),
            calc(67.667dvh - 374px + (127px - var(--desktop-hand-card-width)) * .86)
        );
        background:
            url("./assets/game-room/desktop/background.png") center / cover no-repeat,
            linear-gradient(180deg, #261207 0%, #100805 56%, #070403 100%);
    }

    #gameScreen[data-game-layout="standard"] .game-results-panel {
        height: 488px;
    }

    #gameScreen[data-game-layout="standard"] .game-results-panel::before {
        display: none;
    }

    #gameScreen[data-game-layout="standard"] .game-results-panel .game-panel-art {
        content: url("./assets/game-room/desktop/results-panel.png");
        position: absolute;
        inset: 0;
        display: block;
        width: 100%;
        height: 100%;
        object-fit: fill;
        clip-path: none;
        mix-blend-mode: normal;
    }

    #gameScreen[data-game-layout="standard"] .game-results-panel .game-panel-content {
        position: absolute;
        inset: 0;
        margin: 0;
    }

    #gameScreen[data-game-layout="standard"] .game-results-panel .panel-title {
        position: absolute;
        top: 7.5%;
        right: 4.2%;
        left: 4.2%;
        box-sizing: border-box;
        min-height: 0;
        height: 12.5%;
        margin: 0;
        border: 0;
        border-bottom: 2px solid rgba(216, 145, 62, .9);
        background: none;
        box-shadow: none;
        text-align: center;
    }

    #gameScreen[data-game-layout="standard"] .game-results-panel .panel-title::before,
    #gameScreen[data-game-layout="standard"] .game-results-panel .panel-title::after {
        display: none;
        content: none;
    }

    #gameScreen[data-game-layout="standard"] .game-results-panel .score-panel-content {
        position: absolute;
        top: 20%;
        right: 4.2%;
        bottom: 7.5%;
        left: 4.2%;
        height: auto;
        max-height: none;
        padding: 0;
        overflow: hidden;
    }

    #gameScreen[data-game-layout="standard"] .game-results-table {
        display: none;
    }

    #gameScreen[data-game-layout="standard"] .results-tablet-content {
        --desktop-results-grid: rgba(216, 145, 62, .72);
        --desktop-results-deal-column: clamp(46px, 3.35vw, 57px);
        --desktop-results-columns: var(--desktop-results-deal-column) repeat(3, minmax(0, 1fr));
        --desktop-results-scrollbar-gutter: 10px;
        --desktop-results-row-height: calc(100% / 12);
        display: grid;
        grid-template-rows: var(--desktop-results-row-height) minmax(0, 10fr) var(--desktop-results-row-height);
        width: 100%;
        height: 100%;
        overflow: hidden;
        border: 0;
        background: transparent;
        font-size: clamp(10px, .78vw, 13px);
    }

    #gameScreen[data-game-layout="standard"] .results-tablet-header,
    #gameScreen[data-game-layout="standard"] .results-tablet-row,
    #gameScreen[data-game-layout="standard"] .results-tablet-total {
        box-sizing: border-box;
        display: grid;
        grid-template-columns: var(--desktop-results-columns);
        justify-content: stretch;
        width: 100%;
        margin: 0;
        padding: 0;
        transform: none;
    }

    #gameScreen[data-game-layout="standard"] .results-tablet-header {
        padding-right: var(--desktop-results-scrollbar-gutter);
        border: 0;
        border-bottom: 2px solid rgba(216, 145, 62, .9);
        background: transparent;
        box-shadow: none;
    }

    #gameScreen[data-game-layout="standard"] .results-tablet-header::before,
    #gameScreen[data-game-layout="standard"] .results-tablet-header::after,
    #gameScreen[data-game-layout="standard"] .results-tablet-history::before,
    #gameScreen[data-game-layout="standard"] .results-tablet-history::after {
        display: none;
        content: none;
    }

    #gameScreen[data-game-layout="standard"] .results-tablet-history-viewport {
        min-height: 0;
        overflow-x: hidden;
        overflow-y: auto;
        border: 0;
        background: transparent;
        box-shadow: none;
        overscroll-behavior: contain;
        scrollbar-gutter: stable;
        scrollbar-width: thin;
    }

    #gameScreen[data-game-layout="standard"] .results-tablet-history-viewport::-webkit-scrollbar {
        width: 7px;
    }

    #gameScreen[data-game-layout="standard"] .results-tablet-history-viewport::-webkit-scrollbar-thumb {
        border-radius: 999px;
        background: var(--desktop-results-grid);
    }

    #gameScreen[data-game-layout="standard"] .results-tablet-history-viewport::-webkit-scrollbar-track {
        background: transparent;
    }

    #gameScreen[data-game-layout="standard"] .results-tablet-history {
        display: grid;
        grid-auto-rows: calc(100% / var(--desktop-results-rendered-rows, 10));
        align-content: start;
        width: 100%;
        height: 100%;
        min-height: 100%;
        border: 0;
        background: transparent;
        box-shadow: none;
    }

    #gameScreen[data-game-layout="standard"] .results-tablet-row {
        border: 0;
        border-bottom: 1px solid var(--desktop-results-grid);
        background: transparent;
    }

    #gameScreen[data-game-layout="standard"] .results-tablet-row:first-child {
        border-top: 0;
    }

    #gameScreen[data-game-layout="standard"] .results-tablet-cell {
        display: grid;
        place-items: center;
        min-width: 0;
        overflow: hidden;
        padding: 2px 5px;
        border: 0;
        border-left: 1px solid var(--desktop-results-grid);
        background: transparent;
        box-shadow: none;
        text-align: center;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    #gameScreen[data-game-layout="standard"] .results-tablet-deal-cell {
        border-left: 0;
        font-weight: 800;
    }

    #gameScreen[data-game-layout="standard"] .results-tablet-total {
        padding-right: var(--desktop-results-scrollbar-gutter);
        border: 0;
        border-top: 2px solid var(--desktop-results-grid);
        font-weight: 800;
    }

    #gameScreen[data-game-layout="standard"] .hand-region {
        bottom: calc(23% - 10px);
    }

    #gameScreen[data-game-layout="standard"] .contract-choice-panel {
        top: var(--desktop-bidding-top);
        padding: var(--desktop-bidding-padding);
        gap: var(--desktop-bidding-gap);
        transform: translateX(-50%);
    }

    #gameScreen[data-game-layout="standard"] .game-chat-panel .game-panel-art {
        clip-path: inset(1.25% 1.4% 0 round 24px);
    }

    #gameScreen[data-game-layout="standard"] .game-chat-panel {
        width: min(clamp(220px, 17vw, 310px), calc((71dvh - 2px) * 938 / 1677));
    }

    #gameScreen[data-game-layout="standard"] .game-chat-panel .chat-panel-title {
        top: 2.2%; left: 12%; width: 76%; height: 6.4%; justify-content: center;
    }

    #gameScreen[data-game-layout="standard"] .game-chat-panel .chat-log {
        top: 10%; left: 7.6%; width: 84.3%; height: 78.7%; overflow: hidden;
    }

    #gameScreen[data-game-layout="standard"] .game-chat-panel .chat-messages {
        padding: 2% calc(7% - 6px) 2% calc(2% + 6px);
        overscroll-behavior: contain;
    }

    #gameScreen[data-game-layout="standard"] .game-chat-panel .chat-composer {
        top: calc(90.5855% + 2.325px);
        left: calc(9.9345% + 8.325px);
        width: calc(62.031% - 10.65px);
        height: calc(4.929% - 4.65px);
        padding: 0 2.5%;
        display: flex;
        align-items: center;
        border-radius: 0;
        background: transparent;
    }

    #gameScreen[data-game-layout="standard"] .game-chat-panel #chatEmojiButton {
        display: none;
    }

    #gameScreen[data-game-layout="standard"] .game-chat-panel #chatSendButton {
        display: block;
        top: calc(93.1% - 22px);
        right: auto;
        left: calc(84.4% - 22px);
        width: 44px;
        height: 44px;
    }

    #gameScreen[data-game-layout="standard"] .player-badge:not(.player-local) {
        width: clamp(244px, 20.3vw, 335px);
        height: clamp(277px, 23vw, 380px);
        filter: none;
    }

    #gameScreen[data-game-layout="standard"] .player-badge.player-local,
    #gameScreen[data-game-layout="standard"] .player-badge.player-local.player-active {
        bottom: calc(clamp(-14.25px, -0.9vw, -11.25px) + 11px);
        width: clamp(368px, 35.65vw, 621px);
        height: clamp(172.5px, 13.8vw, 218.5px);
        filter: none;
        transition: none;
    }

    #gameScreen[data-game-layout="standard"] .player-badge.player-local::before {
        display: none;
        content: none;
    }

    #gameScreen[data-game-layout="standard"] .player-badge.player-local .player-panel-art-local {
        display: block;
        object-fit: contain;
    }

    #gameScreen[data-game-layout="standard"] .player-badge.player-local .player-panel-art-opponent {
        display: none;
    }

    #gameScreen[data-game-layout="standard"] .player-badge.player-local.player-active::after {
        top: 33px;
        right: auto;
        bottom: auto;
        left: 50%;
        width: clamp(372.29px, calc(31.5887vw - 22.895px), 477.39px);
        height: calc(100% - 68px);
        aspect-ratio: 1898 / 829;
        border-radius: 12px;
        box-shadow: none;
        transform: translateX(-50%);
    }

    #gameScreen[data-game-layout="standard"] .game-reaction-button {
        left: calc(50% - var(--desktop-local-visible-width) / 2 - 84.5px);
        bottom: calc(clamp(-14.25px, -0.9vw, -11.25px) + 11px + (clamp(172.5px, 13.8vw, 218.5px) - 69.5px) / 2);
        width: 69.5px;
        height: 69.5px;
        border: 0;
        background: transparent;
        box-shadow: none;
    }

    #gameScreen[data-game-layout="standard"] .game-reaction-launcher-icon {
        width: 100%;
        height: 100%;
        transform: none;
    }

    #gameScreen[data-game-layout="standard"] .player-badge.player-local .player-avatar {
        top: 20.4348%;
        left: calc(10.8696% + 22px);
    }

    #gameScreen[data-game-layout="standard"] .player-badge.player-local .player-panel-content {
        top: calc(18.6957% + clamp(0px, calc((800px - 100dvh) * .18), 18px));
        right: 7%;
        bottom: auto;
        left: calc(31.7391% + 23px);
        height: 66.087%;
    }

    #gameScreen[data-game-layout="standard"] .player-badge.player-local .player-utility-row {
        top: calc(47.3684% - 34.75px);
        right: auto;
        left: calc(111.427% + 17.615px - (clamp(368px, 35.65vw, 621px) - var(--desktop-local-visible-width)) / 2);
        width: 69.5px;
        height: 69.5px;
    }

    #gameScreen[data-game-layout="standard"] .player-badge.player-local .player-control-button,
    #gameScreen[data-game-layout="standard"] .player-badge.player-local .player-gift-control {
        width: 69.5px;
        height: 69.5px;
        min-width: 69.5px;
        min-height: 69.5px;
        flex-basis: 69.5px;
        padding: 0;
        border: 0;
        background: transparent;
        box-shadow: none;
    }

    #gameScreen[data-game-layout="standard"] .player-badge.player-local .player-gift-icon {
        width: 69.5px;
        height: 69.5px;
    }

    #gameScreen[data-game-layout="standard"] .player-badge:not(.player-local) .player-avatar {
        top: calc(3.25% - 2px);
        left: 48.8%;
        width: 49.8%;
        transform: translateX(-50%);
    }

    #gameScreen[data-game-layout="standard"] .player-badge:not(.player-local) .player-panel-content {
        inset: 49% 7% 5%;
        display: grid;
        grid-template-columns: minmax(0, 1fr) 40px;
        grid-template-rows: 28px repeat(3, 26px);
        gap: 2px 8px;
        align-content: center;
        align-items: center;
        text-align: left;
    }

    #gameScreen[data-game-layout="standard"] .player-panel-opponent-portrait {
        display: block;
        width: 100%;
        height: 100%;
        clip-path: none;
        object-fit: contain;
        mix-blend-mode: normal;
    }

    #gameScreen[data-game-layout="standard"] .player-panel-opponent-body {
        display: none;
    }

    #gameScreen[data-game-layout="standard"] .player-badge:not(.player-local) .name {
        grid-column: 1 / 3;
        grid-row: 1;
        align-self: center;
        justify-self: center;
        width: calc(100% - 48px);
        text-align: center;
        transform: translateY(-10px);
    }

    #gameScreen[data-game-layout="standard"] .player-badge:not(.player-local) .player-utility-row {
        grid-column: 2;
        grid-row: 2 / 5;
        display: flex;
        width: 40px;
        height: auto;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        /* Keep the pre-resize stack top anchored while its three visible icons grow 5%. */
        transform: translate(-15px, -13.29px);
    }

    #gameScreen[data-game-layout="standard"] .player-badge:not(.player-local) .player-control-button {
        width: 40px;
        height: 22.68px;
        min-width: 40px;
        min-height: 22.68px;
        flex: 0 0 22.68px;
        padding: 0;
        border: 0;
        background: transparent;
        box-shadow: none;
    }

    #gameScreen[data-game-layout="standard"] .player-badge:not(.player-local) .player-gift-control {
        height: 26.46px;
        min-height: 26.46px;
        flex-basis: 26.46px;
    }

    #gameScreen[data-game-layout="standard"] .player-badge:not(.player-local) .player-utility-icon {
        width: 22.68px;
        height: 22.68px;
    }

    #gameScreen[data-game-layout="standard"] .player-badge:not(.player-local) .player-gift-icon {
        width: 26.46px;
        height: 26.46px;
    }

    #gameScreen[data-game-layout="standard"] .player-badge:not(.player-local) .player-stat-row,
    #gameScreen[data-game-layout="standard"] .player-badge:not(.player-local) .player-presence {
        grid-column: 1;
        width: max-content;
        max-width: none;
        grid-template-columns: 24.2px max-content max-content;
        column-gap: 7px;
        justify-content: start;
        transform: translate(16px, -10px);
    }

    #gameScreen[data-game-layout="standard"] .player-badge:not(.player-local) .player-coin-row { grid-row: 2; }
    #gameScreen[data-game-layout="standard"] .player-badge:not(.player-local) .player-points-row { grid-row: 3; }
    #gameScreen[data-game-layout="standard"] .player-badge:not(.player-local) .player-presence { grid-row: 4; grid-template-columns: 24.2px max-content; }

    #gameScreen[data-game-layout="standard"] .player-badge:not(.player-local) .player-stat-row img,
    #gameScreen[data-game-layout="standard"] .player-badge:not(.player-local) .player-presence img {
        width: 24.2px;
        height: 24.2px;
    }

    #gameScreen[data-game-layout="standard"] .player-badge:not(.player-local) .player-stat-label {
        font-size: 12.1px;
    }

    #gameScreen[data-game-layout="standard"] .player-badge:not(.player-local) .player-coin-value,
    #gameScreen[data-game-layout="standard"] .player-badge:not(.player-local) .player-points-value,
    #gameScreen[data-game-layout="standard"] .player-badge.player-status-label:not(.player-local) .player-presence {
        font-size: 15.4px;
    }

    #gameScreen[data-game-layout="standard"] .game-table-art {
        top: var(--desktop-table-top);
        width: var(--desktop-table-width);
        height: auto;
        max-width: none;
        max-height: none;
        aspect-ratio: 1208 / 1302;
        transform: translateX(-50%);
    }

    #gameScreen[data-game-layout="standard"] .current-trick {
        top: min(calc(var(--desktop-hand-top) - 147px - var(--desktop-trick-card-width) * 1.083), max(calc(var(--desktop-table-top) + var(--desktop-table-width) * .18), calc(35% + var(--desktop-table-y-shift) - max(0px, calc(110px + (var(--desktop-hand-card-width) - 127px) * 1.4 - (100dvh - 700px) * .42)))));
    }

    #gameScreen[data-game-layout="standard"] .current-trick .playing-card { width: var(--desktop-trick-card-width); }

    #gameScreen[data-game-layout="standard"] .my-hand:has(> .playing-card:nth-child(9)) .playing-card + .playing-card {
        margin-left: calc((var(--desktop-hand-span) * .9 - 10 * var(--desktop-hand-card-width)) / 9 - clamp(3px, .55vw, 8px));
    }

    #gameScreen[data-game-layout="standard"] .last-deal-area {
        top: calc(50% + 20px + var(--desktop-table-y-shift) + clamp(0px, calc((900px - 100dvh) * .4), 80px));
        left: calc(50% - var(--desktop-hand-span) / 2 - 130px);
        transform: translateY(-50%);
    }

    #gameScreen[data-game-layout="standard"] .last-deal-area { --bell-size: clamp(44px, 3.75vw, 60px); }

    #gameScreen[data-game-layout="standard"] .talon-area {
        top: calc(57% - 100px + var(--desktop-table-y-shift) + clamp(0px, calc((900px - 100dvh) * .5), 100px));
        right: auto;
        left: calc(50% + var(--desktop-hand-span) / 2 + 12px);
    }

    #gameScreen[data-game-layout="standard"] .talon-area .talon-card {
        width: clamp(52.2px, 4.86vw, 77.4px);
    }

    #gameScreen[data-game-layout="standard"] .player-role-opponent-left,
    #gameScreen[data-game-layout="standard"] .player-role-opponent-right {
        top: calc(8% + clamp(190px, 21vw, 320px) + 14px);
        width: calc(clamp(244px, 20.3vw, 335px) / 2);
    }

    #gameScreen[data-game-layout="standard"] .player-role-opponent-left {
        left: calc(clamp(225px, 18vw, 330px) + clamp(244px, 20.3vw, 335px) / 4);
    }

    #gameScreen[data-game-layout="standard"] .player-role-opponent-right {
        right: calc(clamp(225px, 18vw, 330px) + clamp(244px, 20.3vw, 335px) / 4);
    }

    #gameScreen[data-game-layout="standard"] .player-badge:not(.player-local).player-active::after {
        inset: calc(40.2% - 2px) 7% 13.9%;
    }

    .profile-dialog.resign-deal-dialog { width: min(72vw, 590px); }
    .resign-deal-dialog .profile-dialog-shell { padding: 12px; }
    .resign-deal-dialog h2 { font-size: 20px; }
    .resign-deal-dialog .profile-dialog-actions { margin-top: 12px; }
    .profile-dialog.resign-deal-dialog button { min-height: 40px; }
}

.results-tablet-content { display: none; }

.game-reaction-button {
    display: grid;
    place-items: center;
    padding: 0;
    position: absolute;
    z-index: 18;
    left: calc(50% - clamp(230px, 20vw, 330px));
    bottom: 62px;
    width: 58px;
    height: 58px;
    border: 2px solid #d99b45;
    border-radius: 50%;
    color: #f8e4b8;
    background: rgba(31, 15, 7, .96);
    box-shadow: 0 5px 14px rgba(0,0,0,.55);
    font-size: 30px;
    cursor: pointer;
}
.game-reaction-launcher-icon { display:block;width:78%;height:78%;object-fit:contain;pointer-events:none;user-select:none; }
.game-reaction-button:focus-visible,.game-reaction-choice:focus-visible { outline:3px solid #7dd3fc; outline-offset:2px; }
.game-reaction-button:disabled { opacity:.55; cursor:not-allowed; }
.game-reaction-picker {
    position:absolute;z-index:25;display:grid;grid-template-columns:repeat(3,52px);gap:6px;
    padding:9px;border:2px solid #9b622f;border-radius:12px;background:rgba(25,12,6,.98);
    box-shadow:0 10px 26px rgba(0,0,0,.65);
}
.game-reaction-choice { width:52px;height:52px;padding:3px;border:1px solid rgba(218,158,78,.5);border-radius:8px;background:#28150b;cursor:pointer; }
.game-reaction-choice:hover { background:#4b2a16;box-shadow:0 0 8px rgba(240,183,79,.55); }
.game-reaction-choice:active { transform:translateY(1px); }
.game-reaction-choice video { width:100%;height:100%;display:block;object-fit:contain;pointer-events:none; }
.game-reaction-display { position:absolute;z-index:17;width:100px;height:100px;pointer-events:none;opacity:1;transition:opacity 250ms ease; }
.game-reaction-display--local { width:110px;height:110px; }
.game-reaction-display video { width:100%;height:100%;display:block;object-fit:contain;pointer-events:none; }
.game-reaction-display--leaving { opacity:0; }
@media (prefers-reduced-motion: reduce) { .game-reaction-display { transition-duration:100ms; } }

.player-badge .name {
    width: 100%;
    color: #f5ead5;
    font-family: Georgia, serif;
    font-size: clamp(16px, 1.25vw, 22px);
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 0 2px 4px #000;
    white-space: nowrap;
}

.player-utility-row {
    display: flex;
    width: 100%;
    justify-content: center;
    gap: 4px;
}

.player-utility-icon {
    width: 24px;
    height: 24px;
    display: block;
    object-fit: contain;
}

.player-control-button {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    display: grid;
    place-items: center;
    padding: 3px;
    border: 1px solid rgba(206, 132, 61, .48);
    border-radius: 8px;
    color: #df9858;
    background: rgba(17, 9, 6, .62);
    cursor: pointer;
    overflow: hidden;
    transition: transform 110ms ease, border-color 110ms ease, box-shadow 110ms ease, opacity 110ms ease;
}

.player-control-button:not(:disabled):hover {
    border-color: #f0b071;
    box-shadow: 0 5px 12px rgba(0, 0, 0, .4), 0 0 0 2px rgba(240, 176, 113, .16);
    transform: translateY(-2px);
}

.player-control-button:focus-visible {
    outline: 3px solid #58e9ff;
    outline-offset: 2px;
}

.player-control-button:not(:disabled):active {
    transform: translateY(1px);
}

.player-control-button:disabled {
    cursor: not-allowed;
    opacity: .58;
}

.player-local .player-block-control,
.player-local .player-profile-button {
    display: none;
}

.player-local .player-control-button {
    width: 48px;
    height: 48px;
    flex-basis: 48px;
}

.player-stat-row,
.player-presence,
.player-badge .match-score {
    display: flex;
    width: 100%;
    align-items: center;
}

.player-stat-row {
    display: grid;
    grid-template-columns: 22px max-content max-content;
    min-height: 23px;
    width: min(100%, 164px);
    max-width: 100%;
    column-gap: 7px;
    font-variant-numeric: tabular-nums;
}

.player-stat-row img {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    object-fit: contain;
}

.player-stat-label {
    color: #bda98d;
    font-size: 11px;
}

.player-coin-value,
.player-points-value {
    color: #f3cb58;
    font-size: 14px;
    font-weight: 700;
    text-align: right;
    white-space: nowrap;
}

.player-points-value {
    color: #e5d6bd;
}

.player-badge .match-score {
    width: auto;
    gap: 5px;
    flex-wrap: nowrap;
    justify-content: flex-start;
    font-variant-numeric: tabular-nums;
}

.player-badge .match-score-label {
    color: #bda98d;
    font-size: 11px;
}

.player-badge .match-score-value {
    font-weight: 700;
}

.player-presence {
    display: grid;
    grid-template-columns: 22px max-content;
    column-gap: 7px;
    width: min(100%, 164px);
    justify-content: start;
    color: #948d83;
    font-size: 9px;
    line-height: 1.2;
}

.player-badge.player-status-label .player-presence {
    font-size: 14px;
    font-weight: 700;
}

.player-badge.player-status--beginner .player-presence {
    color: #7dd3fc;
}

.player-badge.player-status--intermediate .player-presence {
    color: #f0a34a;
}

.player-badge.player-status--pro .player-presence {
    color: #ef4444;
}

.player-badge.player-status--grandmaster .player-presence {
    color: #c7354b;
}

.player-presence img {
    width: 22px;
    height: 22px;
    object-fit: contain;
}

.player-online .player-presence {
    color: #9fd3a0;
}

.player-offline .player-presence {
    color: #c78782;
}

.player-local .name {
    grid-column: 1;
    grid-row: 1;
}

.player-local .player-utility-row {
    position: absolute;
    top: 0;
    right: 0;
    width: auto;
}

.player-local .player-stat-row {
    grid-column: 1;
}

.player-local .player-coin-row {
    grid-row: 2;
}

.player-local .player-points-row {
    grid-row: 3;
}

.player-local .player-presence {
    grid-column: 1;
    grid-row: 4;
}

.current-trick {
    position: absolute;
    z-index: 6;
    top: 35%;
    left: 50%;
    width: min(34vw, 540px);
    min-height: clamp(110px, 15vw, 210px);
    transform: translateX(-50%);
    pointer-events: none;
}

.current-trick .playing-card {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: 0;
    transform-origin: 50% 88%;
}

.current-trick .trick-card-local {
    transform: translate(-50%, -25%) rotate(-2deg);
}

.current-trick .trick-card-left {
    transform: translate(-118%, -72%) rotate(-8deg);
}

.current-trick .trick-card-right {
    transform: translate(18%, -72%) rotate(8deg);
}

.current-trick-empty {
    align-self: center;
    margin: 0;
    padding: 7px 11px;
    border-radius: 999px;
    color: #c9bba3;
    background: rgba(10, 6, 3, .68);
    font-size: 12px;
    text-align: center;
}

.last-deal-area { --bell-size:clamp(72px,7.5vw,120px); position:absolute; z-index:20; top:50%; left:calc(50% - clamp(155px,15vw,245px)); display:flex; align-items:center; gap:8px; transform:translate(-50%,-50%); }
.last-deal-bell { width:var(--bell-size); height:var(--bell-size); min-width:44px; min-height:44px; padding:0; border:0; border-radius:50%; background:transparent; cursor:pointer; filter:drop-shadow(0 7px 10px rgba(0,0,0,.55)); }
.last-deal-bell img { display:block; width:100%; height:100%; object-fit:contain; }
.last-deal-bell:focus-visible { outline:3px solid #7edcff; outline-offset:3px; }
.last-deal-bell:disabled,
.last-deal-bell[aria-disabled="true"] { cursor:not-allowed; filter:grayscale(1) opacity(.55); }
.last-deal-bell.activated { filter:sepia(.25) drop-shadow(0 0 12px rgba(246,216,159,.75)); }
.resign-deal-control {
    /* Bell PNG: 1354x1161, opaque right edge 1243 and painted height 1103.
       Account for contain-padding so the visible gap is five pixels. */
    --resign-card-scale: 1.70;
    --resign-card-height: calc(var(--bell-size) * 1103 / 1354 / 2 * var(--resign-card-scale));
    position: absolute;
    top: 50%;
    left: calc(var(--bell-size) * 1243 / 1354 + 5px);
    width: max(24px, calc(var(--resign-card-height) * 5 / 7));
    height: max(44px, var(--resign-card-height));
    min-width: 24px;
    min-height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    transform: translateY(-50%);
}
.resign-deal-control[hidden] { display: none; }
/* The global placement solver caps artwork only when no normal-size anchor
   fits. Keep the touch targets usable even at that physical limit. */
#gameScreen .last-deal-area[data-control-cap] .last-deal-bell {
    display: grid;
    place-items: center;
    min-width: 24px;
    min-height: 44px;
}
#gameScreen .last-deal-area[data-control-cap] .last-deal-bell img {
    width: var(--bell-size);
    height: var(--bell-size);
}
.resign-deal-control .resign-card {
    position: absolute;
    top: 50%;
    left: 0;
    width: calc(var(--resign-card-height) * 5 / 7);
    height: var(--resign-card-height);
    transform: translateY(-50%);
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 0;
    pointer-events: none;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
.resign-deal-control:hover .resign-card { filter: brightness(1.08); }
.resign-deal-control:focus-visible { outline: 3px solid #7edcff; outline-offset: 2px; border-radius: 8px; }
.resign-deal-dialog { width: min(92vw, 440px); }
.resign-deal-dialog h2 { margin: 0; color: #f6d89f; font-size: clamp(18px, 2.2vw, 24px); }
.last-deal-status { position:absolute; top:100%; left:50%; width:max-content; max-width:240px; padding:5px 8px; border-radius:6px; color:#f6d89f; background:rgba(12,7,4,.9); font-size:11px; text-align:center; transform:translateX(-50%); }

.player-role-label {
    position: absolute;
    z-index: 10;
    min-width: 88px;
    padding: 4px 10px;
    border: 1px solid rgba(222, 163, 83, .54);
    border-radius: 999px;
    color: #f6d89f;
    background: rgba(12, 7, 4, .9);
    box-shadow: 0 5px 12px rgba(0, 0, 0, .4);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.2;
    text-align: center;
}

.player-role-label.player-role-declarer {
    border-color: #f06a6a;
    color: #fff5f5;
    background: rgba(132, 25, 28, .94);
}

.player-role-label.player-role-neutral {
    border-color: rgba(202, 208, 216, .68);
    color: #f2f4f7;
    background: rgba(70, 76, 85, .94);
}

.player-role-opponent-left { top:calc(8% + clamp(190px,21vw,320px) + 4px); left:clamp(225px,18vw,330px); width:clamp(150px,15vw,240px); }
.player-role-opponent-right { top:calc(8% + clamp(190px,21vw,320px) + 4px); right:clamp(225px,18vw,330px); width:clamp(150px,15vw,240px); }
.player-role-local { bottom:5px; left:50%; width:clamp(210px,24vw,410px); transform:translateX(-50%); }

.talon-area {
    position: absolute;
    z-index: 5;
    top: 57%;
    right: clamp(230px, 22vw, 390px);
    width: clamp(86px, 8vw, 132px);
    height: clamp(72px, 7vw, 118px);
    display: block;
    filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .42));
    pointer-events: none;
}

.talon-area .talon-card {
    position: absolute;
    top: 50%;
    left: 50%;
    width: clamp(58px, 5.4vw, 86px);
    transform: translate(-64%, -50%) rotate(-7deg);
}

.talon-area .talon-card + .talon-card {
    transform: translate(-32%, -45%) rotate(7deg);
}

.hand-region {
    position: absolute;
    z-index: 12;
    bottom: 23%;
    left: 50%;
    width: min(76vw, 1250px);
    transform: translateX(-50%);
}

.hand-status {
    width: max-content;
    max-width: min(100%, 460px);
    margin: 0 auto 7px;
    padding: 5px 10px;
    border: 1px solid var(--room-border-soft);
    border-radius: 999px;
    color: #d8c8ac;
    background: rgba(10, 6, 3, .84);
    box-shadow: 0 5px 12px rgba(0, 0, 0, .3);
    font-size: 11px;
    line-height: 1.3;
    text-align: center;
}

.hand-region .my-hand {
    width: 100%;
    min-height: clamp(92px, 12vw, 150px);
    gap: clamp(3px, .55vw, 8px);
}

.my-hand .playing-card + .playing-card {
    margin-left: clamp(-54px, -2.9vw, -28px);
}

.my-hand .playing-card {
    width: clamp(83px, 6.76vw, 127px);
    min-width: clamp(83px, 6.76vw, 127px);
    flex-basis: clamp(83px, 6.76vw, 127px);
    flex-shrink: 0;
    transition: translate 120ms ease, filter 120ms ease, box-shadow 120ms ease;
}

.my-hand .playing-card.playable {
    translate: 0 -9px;
    border-color: #e13232;
    box-shadow:
        0 7px 14px rgba(0, 0, 0, .48),
        0 0 0 3px #e13232,
        0 0 18px rgba(225, 50, 50, .9);
}

.my-hand .playing-card.unavailable {
    filter: none;
    opacity: 1;
}

.my-hand .playing-card.discardable { border-color:#e8bb56; box-shadow:0 0 0 2px rgba(232,187,86,.9); }
.my-hand .playing-card.pending { translate:0 -5px; border-color:#59c8ee; box-shadow:0 0 0 3px #17364a,0 0 0 6px #59c8ee; }

.my-hand .playing-card.selected {
    translate: 0 -11px;
    filter: none;
    opacity: 1;
}

.my-hand .playing-card:focus-visible {
    z-index: 2;
    translate: 0 -7px;
    outline-color: #7edcff;
}

.my-hand .playing-card.selected:focus-visible {
    translate: 0 -11px;
    outline-color: #7edcff;
}

.bottom-control-area {
    z-index: 13;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 8px;
}

.game-actions.contract-choice-panel {
    position: absolute;
    z-index: 19;
    top: 50%;
    left: 50%;
    width: min(280px, 42vw);
    min-height: 0;
    padding: 20px;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    align-content: center;
    justify-content: center;
    gap: 10px;
    border: 1px solid rgba(222, 163, 83, .54);
    border-radius: 12px;
    background: rgba(15, 8, 4, .94);
    box-shadow: 0 18px 45px rgba(0, 0, 0, .68);
    transform: translate(-50%, -50%);
}

.contract-choice-panel .contract-choice-button {
    width: min(220px, 100%);
    height: 48px;
    min-height: 48px;
    padding: 10px 18px;
    border: 1px solid rgba(237, 223, 191, .72);
    border-radius: 8px;
    background: linear-gradient(180deg, #f5ead4, #d8c5a2);
    color: #24170d;
    box-shadow: 0 5px 12px rgba(0, 0, 0, .32);
    cursor: pointer;
    transition: transform 110ms ease, border-color 110ms ease, background 110ms ease, box-shadow 110ms ease;
}

.contract-choice-panel .contract-choice-button:not(:disabled):hover {
    border-color: #fff1b5;
    background: linear-gradient(180deg, #fff8e9, #e5cca0);
    box-shadow: 0 8px 18px rgba(0, 0, 0, .42), 0 0 0 2px rgba(255, 222, 139, .2);
    transform: translateY(-2px);
}

.contract-choice-panel .contract-choice-button:focus-visible {
    outline: 3px solid #7edcff;
    outline-offset: 3px;
}

.contract-choice-panel .contract-choice-button:not(:disabled):active {
    box-shadow: 0 2px 7px rgba(0, 0, 0, .36);
    transform: translateY(1px);
}

.contract-choice-panel .contract-choice-pass {
    border-color: #a92f35;
    background: linear-gradient(180deg, #c94b52, #982d33);
    color: #fff8f2;
}

.contract-choice-panel .contract-choice-pass:not(:disabled):hover {
    border-color: #ff9ca1;
    background: linear-gradient(180deg, #dc5a61, #aa343a);
    box-shadow: 0 8px 18px rgba(0, 0, 0, .42), 0 0 0 2px rgba(255, 107, 107, .25);
}

.contract-choice-panel .contract-choice-button:disabled {
    cursor: not-allowed;
    filter: saturate(.5);
    opacity: .68;
    transform: none;
}

.game-actions {
    position: static;
    max-width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.game-actions button {
    min-height: 44px;
    padding: 9px 14px;
    border-radius: var(--room-radius);
    box-shadow: 0 5px 12px rgba(0, 0, 0, .32);
    font-weight: 750;
    line-height: 1.2;
}

.game-actions button:focus-visible {
    outline: 3px solid #7edcff;
    outline-offset: 2px;
}

.game-actions button:disabled {
    cursor: wait;
    filter: saturate(.45);
    opacity: .66;
}

.game-actions-pending {
    cursor: progress;
}

.game-bell {
    position: absolute;
    z-index: 11;
    bottom: 5%;
    left: clamp(220px, 25vw, 430px);
    width: clamp(54px, 5vw, 82px);
    height: clamp(54px, 5vw, 82px);
    object-fit: contain;
    clip-path: circle(48%);
    pointer-events: none;
    user-select: none;
    mix-blend-mode: screen;
    filter: drop-shadow(0 7px 10px rgba(0, 0, 0, .5));
}

.playing-card { background:#fff; }
.playing-card img { object-fit:contain; border-radius:inherit; }
.player-badge .match-score { display:none; }
.player-gift-icon { width:28px; height:28px; display:block; object-fit:contain; }
.player-block-control--active,.player-block-control--pending{box-shadow:0 0 0 2px #d13b50 inset;background:rgba(209,59,80,.22)}
.player-local .player-gift-icon { width:34px; height:34px; }

.result-box {
    position: absolute;
    z-index: 20;
    top: 28%;
    left: 50%;
    width: min(420px, 36vw);
    max-height: 42vh;
    padding: 20px;
    overflow: auto;
    border: 1px solid rgba(222, 163, 83, .54);
    border-radius: 12px;
    color: #f4e7ce;
    background: rgba(15, 8, 4, .94);
    box-shadow: 0 18px 45px rgba(0, 0, 0, .68);
    text-align: center;
    transform: translateX(-50%);
}

.next-deal-countdown {
    display: grid;
    min-width: 180px;
    min-height: 72px;
    place-items: center;
    gap: 4px;
}

.result-heading--win { color:#62d98b; }
.result-heading--loss { color:#ff6b6b; }
.result-heading--draw { color:#b8c0bd; }

.next-deal-countdown strong {
    display: block;
    min-width: 1.5ch;
    color: var(--room-gold);
    font-size: 32px;
    line-height: 1;
    text-align: center;
}

@media (max-width: 1099px) {
    #gameScreen {
        overflow: auto;
    }

    .game-screen {
        min-height: 100vh;
        padding: 88px 14px 20px;
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto minmax(520px, 1fr) auto auto;
        gap: 14px;
        overflow: visible;
    }

    .game-table-area {
        position: relative;
        grid-row: 2;
        min-height: 520px;
        overflow: hidden;
        border-radius: 18px;
    }

    .game-table-art {
        top: 14%;
        width: min(920px, 112vw);
        height: auto;
        max-height: none;
    }

    .game-top {
        position: absolute;
        top: 8px;
        right: 14px;
        left: 14px;
        width: auto;
        height: 88px;
        transform: none;
    }

    .game-top-content {
        inset: 17% 7% 19%;
    }

    .game-room-info {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .game-room-info-item {
        font-size: 11px;
    }

    .game-room-statuses {
        flex-wrap: wrap;
        gap: 2px 10px;
    }

    .game-chat-panel,
    .game-results-panel {
        position: relative;
        inset: auto;
    }

    .game-chat-panel {
        width: clamp(220px, 55vw, 310px);
        height: auto;
        justify-self: start;
    }
    .game-results-panel { width: 100%; }
    .game-results-panel { height: auto; }

    .game-chat-panel { grid-row: 3; }
    .game-results-panel { grid-row: 4; }

    .game-results-panel .game-panel-content {
        margin-inline: 2px;
    }

    .player-control-button {
        width: 44px;
        height: 44px;
        flex-basis: 44px;
    }

    .player-gift-icon {
        width: 28px;
        height: 28px;
    }

    .player-local .player-control-button {
        width: 48px;
        height: 48px;
        flex-basis: 48px;
    }

    .player-local .player-gift-icon {
        width: 34px;
        height: 34px;
    }

    .player-badge.player-opponent-left {
        top: 4%;
        left: 2%;
    }

    .player-badge.player-opponent-right {
        top: 4%;
        right: 2%;
    }

    .player-badge {
        width: clamp(128px, 23vw, 190px);
        height: clamp(165px, 31vw, 245px);
    }

    .player-badge.player-local {
        bottom: 0;
        width: clamp(280px, 54vw, 430px);
        height: clamp(135px, 27vw, 220px);
    }

    .current-trick {
        top: 34%;
        width: min(54vw, 420px);
    }

    .last-deal-area { top:48%; left:32%; }
    .player-role-opponent-left { top:calc(4% + clamp(165px,31vw,245px) + 4px); left:2%; width:clamp(128px,23vw,190px); }
    .player-role-opponent-right { top:calc(4% + clamp(165px,31vw,245px) + 4px); right:2%; width:clamp(128px,23vw,190px); }

    .hand-region {
        bottom: 44%;
        width: min(88vw, 860px);
    }
    .game-reaction-button { left:calc(50% - min(34vw,245px));bottom:58px;width:52px;height:52px; }
    .game-reaction-display { width:90px;height:90px; }
    .game-reaction-display--local { width:100px;height:100px; }

    .my-hand .playing-card { width:clamp(70px,9.62vw,101px); min-width:clamp(70px,9.62vw,101px); flex-basis:clamp(70px,9.62vw,101px); }
    .contract-choice-panel { width:min(280px,62vw); }

    .talon-area {
        right: 7%;
    }

    .game-bell {
        left: 36%;
    }
}

@media (min-width: 1100px) and (max-height: 760px) {
    .game-results-table th,
    .game-results-table td {
        padding-block: 6px;
    }
}

@media (max-width: 620px) {
    .game-screen {
        padding-inline: 8px;
        grid-template-rows: auto minmax(500px, 1fr) auto auto;
    }

    .game-table-area {
        min-height: 500px;
    }

    .player-badge {
        width: 118px;
        height: 154px;
    }

    .player-badge.player-local {
        bottom: 0;
        width: 270px;
        height: 132px;
    }

    .player-panel-content {
        font-size: 12px;
    }

    .player-badge .match-score-label {
        display: none;
    }

    .current-trick {
        top: 34%;
        width: 82vw;
        min-height: 150px;
    }

    .current-trick .playing-card {
        width: clamp(58px, 18vw, 74px);
    }

    .hand-region {
        bottom: 40%;
        left: 0;
        width: 100%;
        transform: none;
    }

    .hand-region .my-hand {
        min-height: 104px;
        padding-inline: 8px;
        justify-content: center;
        overflow-x: auto;
        overflow-y: visible;
        scrollbar-gutter: stable;
    }

    .hand-region .my-hand .playing-card + .playing-card {
        margin-left: clamp(-25px, -3.7vw, -12px);
    }

    .hand-region .my-hand .playing-card { width:clamp(57px,16.4vw,75px); min-width:clamp(57px,16.4vw,75px); flex-basis:clamp(57px,16.4vw,75px); }
    .contract-choice-panel { top:48%; width:min(88vw,280px); padding:14px; }

    .game-bell {
        display: none;
    }

    .last-deal-area { top:48%; left:25%; }
    .last-deal-area { --bell-size:64px; }
    .player-role-opponent-left { top:calc(4% + 158px); left:2%; width:118px; }
    .player-role-opponent-right { top:calc(4% + 158px); right:2%; width:118px; }
    .player-role-local { bottom:2px; width:220px; }

    .talon-area {
        top: 57%;
        right: 4%;
        width: 88px;
        height: 88px;
    }

    .talon-area .talon-card {
        width: 54px;
    }
}

/* Active game: dedicated adaptive phone-portrait composition. */
.mobile-game-action-bar,
.mobile-game-menu-button,
.mobile-game-surface-close {
    display: none;
}

/* Active game: dedicated adaptive phone-landscape composition. */
@media (min-width: 667px) and (width < 1024px) and (min-height: 320px) and (height < 510px) and (orientation: landscape) {
    #gameScreen.phone-landscape-layout {
        --land-edge: clamp(6px, 1.5vw, 14px);
        --land-top-height: clamp(32px, 9dvh, 39px);
        --land-panel-width: clamp(204px, 27.5vw, 256px);
        --land-panel-height: calc(var(--land-panel-width) / 2.289505);
        --land-opponent-inset: clamp(38px, 7.1vw, 68px);
        --land-table-top: clamp(90px, 26dvh, 112px);
        --land-table-width: min(clamp(480px, 71vw, 660px), calc((100dvh - var(--land-table-top) - 2px) * 1672 / 941));
        --land-table-height: clamp(250px, 72dvh, 310px);
        --land-local-width: min(clamp(286px, 37.5vw, 350px), calc(286px + (100dvh - 320px)));
        --land-local-height: calc(var(--land-local-width) / 2.299879);
        --land-local-layout-height: clamp(64px, 19dvh, 80px);
        --land-action-size: clamp(46px, 12.8dvh, 54px);
        --land-action-edge: clamp(23px, 3.2vw, 30px);
        --land-action-rail-top: calc(38% + 15px);
        --land-action-rail-gap: clamp(6px, 1.55dvh, 8px);
        --land-action-right-top: calc(40% + 15px);
        --land-action-right-gap: clamp(22px, 7.2dvh, 30px);
        --land-card-width: clamp(58px, 7.6vw, 66px);
        --land-card-overlap: clamp(-18px, calc((47.5vw - (8 * var(--land-card-width))) / 7), -6px);
        width: 100vw;
        min-height: 100vh;
        min-height: 100svh;
        height: 100dvh;
        overflow: hidden;
        background-color: #070403;
        background-image: url("./assets/game-room/phone-landscape/background.png");
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
    }

    #gameScreen.phone-landscape-layout::before { display: none; }

    #gameScreen.phone-landscape-layout .game-screen,
    #gameScreen.phone-landscape-layout .game-table-area {
        width: 100%;
        height: 100%;
        min-height: 0;
        margin: 0;
        padding: 0;
        overflow: hidden;
    }

    #gameScreen.phone-landscape-layout .game-screen {
        position: relative;
        display: block;
        grid-template: none;
    }

    #gameScreen.phone-landscape-layout .game-table-area {
        position: absolute;
        inset: 0;
        grid-area: auto;
        display: grid;
        grid-template-columns: var(--land-edge) var(--land-panel-width) minmax(0, 1fr) var(--land-panel-width) var(--land-edge);
        grid-template-rows: calc(var(--land-top-height) + 10px) var(--land-panel-height) minmax(0, 1fr) var(--land-local-layout-height);
        grid-template-areas:
            "menu top top top actions"
            "left opponent-left stage opponent-right right"
            "left . stage . right"
            "left local local local right";
        gap: 0 var(--land-edge);
        border-radius: 0;
    }

    #gameScreen.phone-landscape-layout .mobile-game-menu-button {
        display: grid;
        position: absolute;
        z-index: 28;
        top: 4px;
        left: 4px;
        width: var(--land-action-size);
        height: calc(var(--land-action-size) * .9);
        padding: 0;
        border: 0;
        background: transparent;
        opacity: 1;
        overflow: hidden;
    }

    #gameScreen.phone-landscape-layout .mobile-game-menu-button img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    #gameScreen.phone-landscape-layout .game-top {
        grid-area: top;
        position: relative;
        inset: auto;
        place-self: start center;
        z-index: 20;
        width: min(51vw, 476px);
        height: var(--land-top-height);
        transform: none;
        border: 0;
        border-radius: 8px;
        background: url("./assets/game-room/phone-landscape/room-info-panel.png") center / 100% 100% no-repeat;
        overflow: hidden;
    }

    #gameScreen.phone-landscape-layout .game-top-art,
    #gameScreen.phone-landscape-layout .game-room-statuses {
        display: none;
    }

    #gameScreen.phone-landscape-layout .game-top-content {
        position: absolute;
        inset: 5px 13px;
        display: block;
    }

    #gameScreen.phone-landscape-layout .game-room-info {
        width: 100%;
        height: 100%;
        display: grid;
        grid-template-columns: max-content minmax(0, 1fr) max-content;
        align-items: center;
        gap: clamp(5px, 1.2vw, 14px);
    }

    #gameScreen.phone-landscape-layout .game-room-info-item {
        min-width: 0;
        display: flex;
        align-items: baseline;
        gap: 3px;
        color: #f3eee5;
        font-size: clamp(9px, 1.55vw, 14px);
        line-height: 1;
        white-space: nowrap;
    }

    #gameScreen.phone-landscape-layout .game-room-info-item dt { color: #d7c8b4; }
    #gameScreen.phone-landscape-layout .game-room-info-item dd { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
    #gameScreen.phone-landscape-layout .game-room-number,
    #gameScreen.phone-landscape-layout .game-room-info-item:nth-child(3) { flex: 0 0 auto; }
    #gameScreen.phone-landscape-layout .game-room-info-item:nth-child(4) { display: none; }
    #gameScreen.phone-landscape-layout .game-room-mode { min-width: 0; overflow: hidden; }
    #gameScreen.phone-landscape-layout .game-room-mode dd { max-width: 100%; }

    #gameScreen.phone-landscape-layout .player-badge {
        position: relative;
        inset: auto;
        z-index: 18;
        width: var(--land-panel-width);
        height: var(--land-panel-height);
        min-height: 0;
        padding: 0;
        border: 0;
        background: transparent;
        box-shadow: none;
        transform: none;
        overflow: visible;
    }

    #gameScreen.phone-landscape-layout .player-badge.player-opponent-left {
        grid-area: opponent-left;
        place-self: start start;
        margin-top: 10px;
        margin-left: var(--land-opponent-inset);
    }
    #gameScreen.phone-landscape-layout .player-badge.player-opponent-right {
        grid-area: opponent-right;
        place-self: start end;
        margin-top: 10px;
        margin-right: var(--land-opponent-inset);
    }
    #gameScreen.phone-landscape-layout .player-badge:not(.player-local) { align-self: center; }

    #gameScreen.phone-landscape-layout .player-panel-art-local,
    #gameScreen.phone-landscape-layout .player-panel-opponent-body { display: none; }

    #gameScreen.phone-landscape-layout .player-panel-opponent-portrait {
        display: block;
        content: url("./assets/game-room/phone-landscape/opponent-panel.png");
        position: absolute;
        z-index: 0;
        top: 0;
        right: auto;
        bottom: auto;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: contain;
        clip-path: none;
        mix-blend-mode: screen;
        pointer-events: none;
    }

    #gameScreen.phone-landscape-layout .player-badge:not(.player-local) .player-avatar {
        position: absolute;
        z-index: 2;
        top: 19%;
        left: 5.25%;
        width: 25.6%;
        aspect-ratio: 1;
        height: auto;
        border-radius: 50%;
        transform: none;
        overflow: hidden;
    }

    #gameScreen.phone-landscape-layout .player-avatar .avatar-image,
    #gameScreen.phone-landscape-layout .player-avatar .avatar-fallback { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }

    #gameScreen.phone-landscape-layout .player-panel-content {
        position: absolute;
        z-index: 3;
        inset: 20% 2.5% 17% 31.5%;
        display: grid;
        grid-template-columns: minmax(0, 1fr) 44px;
        grid-template-rows: repeat(3, minmax(0, 1fr));
        align-items: center;
        gap: 0 2px;
        color: #f5eadc;
        text-align: left;
    }

    #gameScreen.phone-landscape-layout .player-badge .name {
        grid-column: 1;
        grid-row: 1;
        min-width: 0;
        max-width: 100%;
        overflow: hidden;
        white-space: nowrap;
        font-size: clamp(10px, 1.24vw, 10.5px);
        line-height: 1;
        text-align: left;
    }

    #gameScreen.phone-landscape-layout .player-stat-row {
        grid-column: 1;
        display: flex;
        align-items: center;
        gap: 3px;
        min-width: 0;
        font-size: clamp(9px, 1.5vw, 13px);
        line-height: 1;
    }

    #gameScreen.phone-landscape-layout .player-coin-row { grid-row: 2; transform: translateY(-5px); }
    #gameScreen.phone-landscape-layout .player-points-row { grid-row: 3; transform: translateY(-5px); }
    #gameScreen.phone-landscape-layout .player-stat-row img { width: clamp(12px, 1.8vw, 17px); height: auto; }
    #gameScreen.phone-landscape-layout .player-coin-row img { content: url("./assets/game-room/phone-landscape/coin.png"); }
    #gameScreen.phone-landscape-layout .player-points-row img { content: url("./assets/game-room/phone-landscape/points.png"); }
    #gameScreen.phone-landscape-layout .player-stat-label,
    #gameScreen.phone-landscape-layout .player-badge:not(.player-local) .player-presence,
    #gameScreen.phone-landscape-layout .player-block-control { display: none; }

    #gameScreen.phone-landscape-layout .player-utility-row {
        grid-column: 2;
        grid-row: 1 / 4;
        align-self: stretch;
        justify-self: end;
        display: flex;
        flex-direction: column-reverse;
        justify-content: space-around;
        align-items: center;
        width: 44px;
        transform: translateX(-5px);
    }

    #gameScreen.phone-landscape-layout .player-control-button {
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
        margin: -9px 0;
        padding: 10px;
        border: 0;
        background: transparent;
        transform: translateX(3.5px);
    }

    #gameScreen.phone-landscape-layout .player-control-button img { width: 100%; height: 100%; object-fit: contain; }
    #gameScreen.phone-landscape-layout .player-gift-control { transform: translateX(-1.5px); }
    #gameScreen.phone-landscape-layout .player-profile-button { transform: translateY(-4px); }
    #gameScreen.phone-landscape-layout .player-info-icon { content: url("./assets/game-room/phone-landscape/info.png"); }
    #gameScreen.phone-landscape-layout .player-gift-icon { content: url("./assets/game-room/phone-landscape/present.png"); }

    #gameScreen.phone-landscape-layout .player-badge.player-local {
        grid-area: local;
        position: relative;
        inset: auto;
        place-self: end center;
        margin-bottom: 0;
        width: var(--land-local-width);
        height: var(--land-local-height);
        transform: none;
        pointer-events: none;
    }

    #gameScreen.phone-landscape-layout .player-local .player-panel-opponent-portrait { display: none; }
    #gameScreen.phone-landscape-layout .player-local::before { display: none; }
    #gameScreen.phone-landscape-layout .player-local .player-panel-art-local {
        display: block;
        content: url("./assets/game-room/phone-landscape/local-player-panel.png");
        position: absolute;
        z-index: 0;
        top: 0;
        right: auto;
        bottom: auto;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: contain;
        clip-path: inset(20% 2.6% 16.9% 2.6%);
        mix-blend-mode: normal;
    }

    #gameScreen.phone-landscape-layout .player-local .player-avatar {
        position: absolute;
        z-index: 2;
        top: 22.8%;
        left: 5.7%;
        width: 23.4%;
        aspect-ratio: 1;
        height: auto;
        border-radius: 50%;
        transform: none;
        overflow: hidden;
    }

    #gameScreen.phone-landscape-layout .player-local .player-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    #gameScreen.phone-landscape-layout .player-local .player-avatar i {
        right: 1%;
        bottom: 7%;
        width: 20%;
        min-width: 8px;
    }

    #gameScreen.phone-landscape-layout .player-local .player-panel-content {
        inset: 21% 7% 17% 36%;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: repeat(4, minmax(0, 1fr));
    }

    #gameScreen.phone-landscape-layout .player-local .name {
        grid-row: 1;
        align-self: center;
        font-size: clamp(10px, 1.5vw, 12px);
        line-height: 1;
        white-space: nowrap;
        overflow: hidden;
    }
    #gameScreen.phone-landscape-layout .player-local .player-stat-row {
        width: 100%;
        min-height: 0;
        gap: 3px;
        font-size: 11px;
        line-height: 1;
    }
    #gameScreen.phone-landscape-layout .player-local .player-stat-row img,
    #gameScreen.phone-landscape-layout .player-local .player-presence img {
        width: 12px;
        height: 12px;
        flex: 0 0 12px;
        object-fit: contain;
    }
    #gameScreen.phone-landscape-layout .player-local .player-coin-value,
    #gameScreen.phone-landscape-layout .player-local .player-points-value { font-size: 11px; }
    #gameScreen.phone-landscape-layout .player-local .player-coin-row { grid-row: 2; transform: none; }
    #gameScreen.phone-landscape-layout .player-local .player-points-row { grid-row: 3; transform: none; }
    #gameScreen.phone-landscape-layout .player-local .player-presence {
        grid-row: 4;
        display: flex;
        align-items: center;
        gap: 3px;
        font-size: clamp(8px, 1.35vw, 12px);
        line-height: 1;
    }
    #gameScreen.phone-landscape-layout .player-local .player-presence img { content: url("./assets/game-room/phone-landscape/level.png"); }
    #gameScreen.phone-landscape-layout .player-local .player-utility-row { display: none; }

    #gameScreen.phone-landscape-layout .player-badge.player-active::after {
        content: "";
        position: absolute;
        z-index: 5;
        inset: 6% 1% 7%;
        border: 2px solid #ffd06a;
        border-radius: 10px;
        box-shadow: 0 0 9px rgba(255, 186, 42, .75);
        pointer-events: none;
    }

    /* The shared active-state drop-shadow follows every opaque pixel in the
       composited badge subtree. Keep Phone Landscape's active indication on the
       dedicated frame pseudo-element so scaled panel artwork cannot create a
       speckled halo outside the approved outline. */
    #gameScreen.phone-landscape-layout .player-badge.player-active {
        filter: none;
    }

    #gameScreen.phone-landscape-layout .player-badge:not(.player-local).player-active::after {
        top: 16.4%;
        right: 2.3%;
        bottom: 16.2%;
        left: 2.3%;
        border-radius: 8px;
    }

    #gameScreen.phone-landscape-layout .player-local.player-active::after {
        top: calc(17.1% + 2px);
        right: 2.6%;
        bottom: 16.18%;
        left: 2.6%;
    }
    #gameScreen.phone-landscape-layout .player-turn-indicator { display: none; }

    #gameScreen.phone-landscape-layout .game-table-art {
        content: url("./assets/game-room/phone-landscape/table.png");
        position: absolute;
        z-index: 1;
        top: var(--land-table-top);
        left: 50%;
        width: var(--land-table-width);
        height: auto;
        aspect-ratio: 1672 / 941;
        max-width: none;
        transform: translateX(-50%);
        object-fit: contain;
        clip-path: none;
        mix-blend-mode: normal;
        pointer-events: none;
    }

    #gameScreen.phone-landscape-layout .current-trick {
        position: absolute;
        z-index: 8;
        top: calc(clamp(100px, 28dvh, 120px) + 15px);
        left: 50%;
        width: min(32vw, 280px);
        height: clamp(78px, 23dvh, 98px);
        min-height: 0;
        transform: translateX(-50%);
    }

    #gameScreen.phone-landscape-layout .current-trick .playing-card { width: clamp(46px, 6.84vw, 62px); height: auto; }
    #gameScreen.phone-landscape-layout .current-trick .trick-card-left { transform: translate(-155%, -55%) rotate(-5deg); }
    #gameScreen.phone-landscape-layout .current-trick .trick-card-local { transform: translate(-50%, -30%) rotate(-1deg); }
    #gameScreen.phone-landscape-layout .current-trick .trick-card-right { transform: translate(55%, -55%) rotate(5deg); }
    #gameScreen.phone-landscape-layout .talon-area { position: absolute; z-index: 8; top: clamp(142px, 39dvh, 162px); right: calc((100vw - var(--land-table-width)) / 2 + 4.7%); }
    #gameScreen.phone-landscape-layout .talon-area .talon-card { width: clamp(38px, 5.6vw, 52px); height: auto; }
    #gameScreen.phone-landscape-layout .last-deal-area { position: absolute; z-index: 20; top: calc(var(--land-table-top) + var(--land-table-width) * 941 / 1672 / 2); left: calc((100vw - var(--land-table-width)) / 2 + var(--land-table-width) * .04 - var(--bell-size) / 2); transform: translateY(-50%); }
    #gameScreen.phone-landscape-layout .last-deal-area { --bell-size: 44px; }

    #gameScreen.phone-landscape-layout .hand-region {
        position: absolute;
        z-index: 12;
        left: 50%;
        bottom: calc(var(--land-local-layout-height) * .74 + clamp(15px, calc(100dvh - 360px), 33px));
        width: min(48vw, 418px);
        height: clamp(88px, 25dvh, 108px);
        transform: translateX(-50%);
        overflow: visible;
    }

    #gameScreen.phone-landscape-layout .hand-status { position: absolute; bottom: 0; width: 100%; margin: 0; font-size: 9px; }
    #gameScreen.phone-landscape-layout .hand-region .my-hand { display: flex; justify-content: center; align-items: flex-end; gap: 0; width: 100%; height: 100%; overflow: visible; translate: var(--land-hand-control-shift, 0px) 0; }
    #gameScreen.phone-landscape-layout .hand-region .my-hand .playing-card { flex: 0 0 var(--land-card-width); width: var(--land-card-width); min-width: var(--land-card-width); height: auto; min-height: 0; margin: 0; }
    #gameScreen.phone-landscape-layout .hand-region .my-hand .playing-card + .playing-card { margin-left: var(--land-card-overlap); }
    /* A pickup hand uses the same safe span as the eight-card playing hand. */
    #gameScreen.phone-landscape-layout .hand-region .my-hand:has(> .playing-card:nth-child(9)) .playing-card + .playing-card {
        margin-left: calc((7 * var(--land-card-overlap) - 2 * var(--land-card-width)) / 9);
    }
    #gameScreen.phone-landscape-layout .hand-region .my-hand .playing-card.selected {
        z-index: 3;
        translate: 0 -12px;
        border-color: #f7d54a;
        box-shadow: 0 7px 14px rgba(0, 0, 0, .48), 0 0 0 3px #172033, 0 0 0 6px #f7d54a;
    }

    #gameScreen.phone-landscape-layout .contract-choice-panel,
    #gameScreen.phone-landscape-layout .result-box {
        position: absolute;
        z-index: 24;
        left: 50%;
        transform: translateX(-50%);
    }
    #gameScreen.phone-landscape-layout .contract-choice-panel {
        top: calc(clamp(92px, 28dvh, 120px) - clamp(18px, 5.2dvh, 22px));
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 2px;
        box-sizing: border-box;
        width: clamp(102px, 12.5vw, 110px);
        padding: 2px;
    }
    #gameScreen.phone-landscape-layout .contract-choice-panel.hidden { display: none; }
    #gameScreen.phone-landscape-layout .contract-choice-panel .contract-choice-button {
        width: 100%;
        min-width: 0;
        height: 24px;
        min-height: 24px;
        padding: 2px 5px;
        font-size: 11px;
    }
    #gameScreen.phone-landscape-layout .result-box {
        box-sizing: border-box;
        top: 50%;
        width: min(55vw, 430px);
        max-width: 55vw;
        max-height: calc(100dvh - 16px);
        padding: 10px 14px;
        overflow: auto;
        font-size: 12px;
        line-height: 1.25;
        transform: translate(-50%, -50%);
    }
    #gameScreen.phone-landscape-layout .result-box .result-heading { font-size: 18px; }
    #gameScreen.phone-landscape-layout .result-box br { line-height: .65; }

    #gameScreen.phone-landscape-layout .mobile-game-action-bar {
        display: block;
        position: absolute;
        z-index: 30;
        inset: 0;
        pointer-events: none;
    }

    #gameScreen.phone-landscape-layout .mobile-game-action-bar > button,
    #gameScreen.phone-landscape-layout .mobile-game-reaction-slot {
        position: absolute;
        width: var(--land-action-size);
        height: var(--land-action-size);
        min-width: 44px;
        min-height: 44px;
        padding: 0;
        border: 1px solid rgba(185, 102, 39, .72);
        border-radius: 9px;
        background: linear-gradient(145deg, rgba(61, 33, 19, .94), rgba(17, 11, 8, .94));
        box-shadow: inset 0 0 0 2px rgba(18, 9, 4, .55), 0 3px 7px rgba(0, 0, 0, .45);
        pointer-events: auto;
    }

    #gameScreen.phone-landscape-layout #mobileGameChatButton { left: var(--land-action-edge); top: var(--land-action-rail-top); }
    #gameScreen.phone-landscape-layout #mobileGameResultsButton { left: var(--land-action-edge); top: calc(var(--land-action-rail-top) + var(--land-action-size) + var(--land-action-rail-gap)); }
    #gameScreen.phone-landscape-layout #mobileGameSoundButton { left: var(--land-action-edge); top: calc(var(--land-action-rail-top) + (2 * (var(--land-action-size) + var(--land-action-rail-gap)))); }
    #gameScreen.phone-landscape-layout #mobileGameReactionSlot { right: var(--land-action-edge); top: var(--land-action-right-top); }
    #gameScreen.phone-landscape-layout #mobileGameGiftButton { right: var(--land-action-edge); top: calc(var(--land-action-right-top) + var(--land-action-size) + var(--land-action-right-gap)); }
    #gameScreen.phone-landscape-layout #mobileGameChatButton img { content: url("./assets/game-room/phone-landscape/chat.png?v=bc58ab3d"); }
    #gameScreen.phone-landscape-layout #mobileGameResultsButton img { content: url("./assets/game-room/phone-landscape/results.png?v=a87b08d2"); }
    #gameScreen.phone-landscape-layout #mobileGameSoundButton img { content: url("./assets/game-room/phone-landscape/sound.png?v=4bdf25f8"); }
    #gameScreen.phone-landscape-layout #mobileGameGiftButton img { content: url("./assets/game-room/phone-landscape/present.png"); }
    #gameScreen.phone-landscape-layout .mobile-game-reaction-slot .game-reaction-button { position: static; display: grid; width: 100%; height: 100%; min-width: 44px; min-height: 44px; padding: 0; border: 0; background: transparent; }
    #gameScreen.phone-landscape-layout .mobile-game-reaction-slot .game-reaction-launcher-icon { width: 100%; height: 100%; object-fit: contain; }

    #gameScreen.phone-landscape-layout .game-chat-panel,
    #gameScreen.phone-landscape-layout .game-results-panel {
        display: none;
        position: absolute;
        grid-area: auto;
        z-index: 80;
        inset: 7% auto auto 50%;
        width: auto;
        aspect-ratio: 1.5;
        height: min(86dvh, 350px);
        max-width: 72vw;
        transform: translateX(-50%);
        overflow: hidden;
        border: 0;
        background: transparent;
        box-shadow: none;
    }

    #gameScreen.phone-landscape-layout .game-chat-panel.mobile-game-surface-open,
    #gameScreen.phone-landscape-layout .game-results-panel.mobile-game-surface-open { display: block; }
    #gameScreen.phone-landscape-layout .game-chat-panel .game-panel-art { content: url("./assets/game-room/phone-landscape/chat-panel.png"); position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
    #gameScreen.phone-landscape-layout .game-results-panel .game-panel-art { display: block; content: url("./assets/game-room/phone-landscape/results-panel.png"); position: absolute; top: -14.65%; left: -4.86%; width: 109.64%; height: auto; object-fit: contain; clip-path: none; mix-blend-mode: normal; }
    #gameScreen.phone-landscape-layout .game-panel-content { position: absolute; z-index: 2; inset: 8% 7%; }
    #gameScreen.phone-landscape-layout .game-chat-panel .game-panel-content { inset: 0; }
    #gameScreen.phone-landscape-layout .game-chat-panel .chat-panel-title { position: absolute; top: 8%; left: 7%; width: auto; margin: 0; text-align: left; font-size: clamp(15px, 2.4vw, 21px); }
    #gameScreen.phone-landscape-layout .game-chat-panel .chat-log { position: absolute; top: 20.5%; right: 6.3%; bottom: 33.5%; left: 6.3%; width: auto; height: auto; overflow: hidden; }
    #gameScreen.phone-landscape-layout .game-chat-panel .chat-messages { box-sizing: border-box; height: 100%; overflow-x: hidden; overflow-y: auto; padding: 5px 7px; overscroll-behavior: contain; scrollbar-gutter: stable; }
    #gameScreen.phone-landscape-layout .game-chat-panel .chat-message { max-width: 100%; font-size: clamp(10px, 1.55vw, 13px); overflow-wrap: anywhere; word-break: break-word; }
    #gameScreen.phone-landscape-layout .game-chat-panel .chat-input { position: absolute; top: 68.5%; right: 6.3%; bottom: auto; left: 6.3%; height: 10.8%; }
    #gameScreen.phone-landscape-layout .game-chat-panel .chat-composer { position: absolute; inset: 0 14% 0 0; box-sizing: border-box; display: flex; width: auto; height: auto; align-items: center; padding: 0 9px; border: 0; outline: 0; background: transparent; color: #f5eadc; font-size: clamp(11px, 1.7vw, 14px); line-height: 18px; white-space: nowrap; overflow: hidden; }
    #gameScreen.phone-landscape-layout .game-chat-panel #chatEmojiButton { display: none; }
    #gameScreen.phone-landscape-layout .game-chat-panel #chatSendButton { display: block; position: absolute; top: 50%; right: 0; bottom: auto; left: auto; width: 13%; min-width: 44px; height: 44px; min-height: 44px; border: 0; background: transparent; color: transparent; transform: translateY(-50%); }
    #gameScreen.phone-landscape-layout .mobile-game-surface-close { display: grid; position: absolute; z-index: 5; top: 8px; right: 8px; place-items: center; width: 44px; height: 44px; border: 0; background: transparent; color: #f5c073; font-size: 25px; }

    #gameScreen.phone-landscape-layout .game-results-panel { --land-grid: rgba(240, 161, 72, .8); --land-result-row-height: clamp(24px, 6.43dvh, 28px); --land-result-deal-column: clamp(38px, 5.45vw, 46px); width: min(60vw, 503px); height: auto; aspect-ratio: 1400 / 642; }
    #gameScreen.phone-landscape-layout .game-results-panel::before { display: none; }
    #gameScreen.phone-landscape-layout .game-results-panel .game-panel-content { inset: 0; display: block; }
    #gameScreen.phone-landscape-layout .game-results-panel .panel-title { position: absolute; top: 11.5%; right: 8%; left: 8%; min-height: 0; height: 18px; margin: 0; border: 0; line-height: 1; text-align: center; font-size: clamp(14px, 2.2vw, 19px); }
    #gameScreen.phone-landscape-layout .score-panel-content { position: absolute; top: 21.5%; right: 3.1%; left: 3.1%; height: calc(var(--land-result-row-height) * 7); padding: 0; overflow: hidden; }
    #gameScreen.phone-landscape-layout .game-results-table { display: grid; grid-template-rows: var(--land-result-row-height) calc(var(--land-result-row-height) * 5) var(--land-result-row-height); width: 100%; height: calc(var(--land-result-row-height) * 7); overflow: hidden; border: 1px solid var(--land-grid); border-collapse: collapse; background: rgba(18, 8, 3, .2); font-size: clamp(9px, 1.4vw, 12px); }
    #gameScreen.phone-landscape-layout .game-results-table colgroup { display: none; }
    #gameScreen.phone-landscape-layout .game-results-table thead,
    #gameScreen.phone-landscape-layout .game-results-table tbody,
    #gameScreen.phone-landscape-layout .game-results-table tfoot { display: block; width: 100%; min-height: 0; }
    #gameScreen.phone-landscape-layout .game-results-table thead { border-bottom: 1px solid var(--land-grid); }
    #gameScreen.phone-landscape-layout .game-results-table tfoot { box-sizing: border-box; border: 2px solid var(--land-grid); background: rgba(48, 27, 13, .72); }
    #gameScreen.phone-landscape-layout .game-results-table tr { display: grid; grid-template-columns: var(--land-result-deal-column) repeat(3, minmax(0, 1fr)); width: 100%; min-width: 0; }
    #gameScreen.phone-landscape-layout .game-results-table thead tr,
    #gameScreen.phone-landscape-layout .game-results-table tfoot tr { height: 100%; }
    #gameScreen.phone-landscape-layout .game-results-table tbody {
        height: calc(var(--land-result-row-height) * 5);
        max-height: calc(var(--land-result-row-height) * 5);
        overflow-y: auto;
        overflow-x: hidden;
        scrollbar-width: none;
        overscroll-behavior: contain;
        background-image:
            linear-gradient(to right, transparent calc(var(--land-result-deal-column) - 1px), var(--land-grid) calc(var(--land-result-deal-column) - 1px), var(--land-grid) var(--land-result-deal-column), transparent var(--land-result-deal-column)),
            linear-gradient(to right, transparent calc(var(--land-result-deal-column) + ((100% - var(--land-result-deal-column)) / 3) - 1px), var(--land-grid) calc(var(--land-result-deal-column) + ((100% - var(--land-result-deal-column)) / 3) - 1px), var(--land-grid) calc(var(--land-result-deal-column) + ((100% - var(--land-result-deal-column)) / 3)), transparent calc(var(--land-result-deal-column) + ((100% - var(--land-result-deal-column)) / 3))),
            linear-gradient(to right, transparent calc(var(--land-result-deal-column) + (2 * (100% - var(--land-result-deal-column)) / 3) - 1px), var(--land-grid) calc(var(--land-result-deal-column) + (2 * (100% - var(--land-result-deal-column)) / 3) - 1px), var(--land-grid) calc(var(--land-result-deal-column) + (2 * (100% - var(--land-result-deal-column)) / 3)), transparent calc(var(--land-result-deal-column) + (2 * (100% - var(--land-result-deal-column)) / 3))),
            repeating-linear-gradient(to bottom, transparent 0 calc(var(--land-result-row-height) - 1px), var(--land-grid) calc(var(--land-result-row-height) - 1px) var(--land-result-row-height));
    }
    #gameScreen.phone-landscape-layout .game-results-table tbody::-webkit-scrollbar { display: none; }
    #gameScreen.phone-landscape-layout .game-results-table tbody tr { height: var(--land-result-row-height); }
    #gameScreen.phone-landscape-layout .game-results-table th,
    #gameScreen.phone-landscape-layout .game-results-table td { display: grid; place-items: center; width: auto; height: auto; min-width: 0; min-height: 0; padding: 2px; border: 0; border-left: 1px solid var(--land-grid); border-radius: 0; background: transparent; line-height: 1; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    #gameScreen.phone-landscape-layout .game-results-table tr > :first-child { border-left: 0; font-weight: 800; }
    #gameScreen.phone-landscape-layout .game-results-table tbody tr > * { border-bottom: 1px solid var(--land-grid); }
    #gameScreen.phone-landscape-layout .game-results-table tfoot th,
    #gameScreen.phone-landscape-layout .game-results-table tfoot td { border-left-width: 2px; font-weight: 900; }

    #gameScreen.phone-landscape-layout .game-reaction-picker {
        position: absolute;
        z-index: 100;
        grid-template-columns: repeat(4, 46px);
        gap: 5px;
        width: auto;
        max-width: none;
        max-height: none;
        padding: 7px;
        overflow: visible;
    }
    #gameScreen.phone-landscape-layout .game-reaction-choice { width: 46px; height: 46px; padding: 3px; }
    #gameScreen.phone-landscape-layout .game-reaction-choice video { object-fit: contain; }
    #gameScreen.phone-landscape-layout .game-reaction-display { width: 64px; height: 64px; }
    #gameScreen.phone-landscape-layout .player-role-label {
        z-index: 25;
        width: clamp(76px, 10vw, 92px);
        min-height: 18px;
        padding: 2px 7px;
        font-size: 10px;
        line-height: 14px;
        text-align: center;
        transform: none;
    }
    #gameScreen.phone-landscape-layout .player-role-opponent-left,
    #gameScreen.phone-landscape-layout .player-role-opponent-right {
        top: calc(var(--land-top-height) + 15px + (var(--land-panel-height) * .838) + 3px);
    }
    #gameScreen.phone-landscape-layout .player-role-opponent-left {
        left: calc((2 * var(--land-edge)) + var(--land-opponent-inset) + (var(--land-panel-width) / 2));
        right: auto;
        transform: translateX(-50%);
    }
    #gameScreen.phone-landscape-layout .player-role-opponent-right {
        right: calc((2 * var(--land-edge)) + var(--land-opponent-inset) + (var(--land-panel-width) / 2));
        left: auto;
        transform: translateX(50%);
    }
    #gameScreen.phone-landscape-layout .player-role-local {
        right: auto;
        bottom: 0;
        left: 50%;
        width: clamp(76px, 10vw, 92px);
        transform: translateX(-50%);
    }
}

body.active-game-location #temporaryLogoutButton {
    display: none;
}

.mobile-game-action-bar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

@media (min-width: 360px) and (width < 510px) and (orientation: portrait) {
    #gameScreen.phone-portrait-layout {
        --phone-edge: clamp(6px, 2vw, 9px);
        --phone-gap: clamp(4px, .9dvh, 8px);
        --phone-opponent-content-x: clamp(-8px, -1.75vw, -7px);
        --phone-opponent-content-y: clamp(22px, 2.5dvh, 23px);
        --phone-opponent-utility-offset: clamp(14px, 1.65dvh, 15px);
        --phone-top-height: clamp(52px, 6.25dvh, 58px);
        --phone-width-growth: max(0px, calc(100vw - 430px));
        --phone-short-height-pressure: clamp(0px, calc((800px - 100dvh) * 2.55), 204px);
        --phone-short-height-emphasis: calc(var(--phone-short-height-pressure) / 204px);
        --phone-opponents-height-base: clamp(188px, 22.3dvh, calc(206px + var(--phone-width-growth) * .25));
        --phone-opponents-height: max(145px, calc(var(--phone-opponents-height-base) - var(--phone-short-height-pressure) * .21));
        --phone-table-height-base: clamp(232px, 27.2dvh, calc(252px + var(--phone-width-growth) * .4));
        --phone-table-height: max(181px, calc(var(--phone-table-height-base) - var(--phone-short-height-pressure) * .25));
        --phone-hand-height-base: clamp(104px, 13.2dvh, calc(120px + var(--phone-width-growth) * .15));
        --phone-hand-height: max(73px, calc(var(--phone-hand-height-base) - var(--phone-short-height-pressure) * .152));
        --phone-hand-card-width-base: clamp(66px, 17.75vw, 76px);
        --phone-hand-card-width: max(50px, calc(var(--phone-hand-card-width-base) - var(--phone-short-height-pressure) * .13));
        --phone-hand-gap: clamp(3px, .55vw, 8px);
        --phone-hand-overlap: calc(clamp(-34px, -7.5vw, -29px) - 4px);
        --phone-local-height-base: clamp(110px, 13.2dvh, calc(122px + var(--phone-width-growth) * .1));
        --phone-local-height: max(92px, calc(var(--phone-local-height-base) - var(--phone-short-height-pressure) * .074));
        --phone-action-size: clamp(48px, 13.4vw, 56px);
        width: 100vw;
        min-height: 100vh;
        min-height: 100svh;
        height: 100dvh;
        overflow: hidden;
        background-color: #070403;
        background-image: url("./assets/game-room/phone-portrait/background.png");
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
    }

    #gameScreen.phone-portrait-layout::before { display: none; }

    #gameScreen.phone-portrait-layout .game-screen {
        width: 100%;
        min-height: 0;
        height: 100%;
        margin: 0;
        padding: 0;
        display: block;
        overflow: hidden;
    }

    #gameScreen.phone-portrait-layout .game-table-area {
        position: absolute;
        inset: 0;
        min-height: 0;
        padding: var(--phone-edge) var(--phone-edge) calc(var(--phone-action-size) + var(--phone-edge) * 2);
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-rows:
            var(--phone-top-height)
            var(--phone-opponents-height)
            var(--phone-table-height)
            var(--phone-hand-height)
            var(--phone-local-height);
        gap: var(--phone-gap) clamp(5px, 2vw, 9px);
        align-content: space-between;
        overflow: hidden;
        border-radius: 0;
    }

    #gameScreen.phone-portrait-layout .game-top {
        translate: 0 calc(-1 * var(--phone-header-table-lift, 0px));
        position: absolute;
        top: var(--phone-edge);
        right: auto;
        bottom: auto;
        left: calc(50vw - var(--phone-edge));
        grid-column: 1 / -1;
        grid-row: 1;
        align-self: stretch;
        justify-self: center;
        box-sizing: border-box;
        width: min(75vw, calc(100vw - (2 * var(--phone-edge))));
        height: var(--phone-top-height);
        margin-left: 0;
        aspect-ratio: auto;
        overflow: hidden;
        border: 8px solid transparent;
        border-image: url("./assets/game-room/phone-portrait/room-info-panel.png") 330 190 260 fill / 8px 10px stretch;
        background: rgba(55, 20, 7, .82);
        transform: translateX(-50%);
        filter: drop-shadow(0 5px 9px rgba(0,0,0,.5));
    }

    #gameScreen.phone-portrait-layout .game-top-art {
        display: none;
    }

    #gameScreen.phone-portrait-layout .game-top-content {
        inset: 5px 8px;
        display: block;
    }

    #gameScreen.phone-portrait-layout .game-room-info {
        width: 100%;
        height: 100%;
        grid-template-columns: max-content minmax(0,1fr);
        grid-template-rows: repeat(2,minmax(0,1fr));
        align-items: center;
        column-gap: clamp(7px,2vw,10px);
        row-gap: 0;
    }

    #gameScreen.phone-portrait-layout .game-room-info-item {
        gap: 2px;
        font-size: clamp(8px, 2.15vw, 9px);
        line-height: 1;
    }

    #gameScreen.phone-portrait-layout .game-room-info-item dt {
        flex: 0 0 auto;
    }

    #gameScreen.phone-portrait-layout .game-room-info-item dd {
        min-width: 0;
    }

    #gameScreen.phone-portrait-layout .game-room-mode {
        min-width: 0;
    }

    #gameScreen.phone-portrait-layout .game-room-statuses {
        display: none;
    }

    #gameScreen.phone-portrait-layout .player-badge {
        position: relative;
        inset: auto;
        grid-row: 2;
        align-self: stretch;
        width: auto;
        max-width: none;
        height: 100%;
        aspect-ratio: 1178 / 1335;
        justify-self: center;
        transform: none;
        filter: drop-shadow(0 6px 9px rgba(0,0,0,.52));
    }

    #gameScreen.phone-portrait-layout .player-badge.player-opponent-left {
        grid-column: auto;
        left: 25%;
    }

    #gameScreen.phone-portrait-layout .player-badge.player-opponent-right {
        grid-column: auto;
        left: 75%;
    }

    #gameScreen.phone-portrait-layout .player-badge:not(.player-local) {
        position: absolute;
        grid-row: auto;
        top: var(--phone-composed-opponent-top);
        height: var(--phone-opponents-height);
        width: calc(var(--phone-opponents-height) * 1178 / 1335);
        transform: translateX(-50%);
        scale: calc(1 + var(--phone-short-height-emphasis) * .1);
    }

    #gameScreen.phone-portrait-layout .player-panel-opponent-portrait {
        content: url("./assets/game-room/phone-portrait/opponent-panel.png");
        display: block;
        width: 100%;
        height: 100%;
        clip-path: none;
        object-fit: contain;
        mix-blend-mode: normal;
    }

    #gameScreen.phone-portrait-layout .player-panel-opponent-body {
        display: none;
    }

    #gameScreen.phone-portrait-layout .player-avatar {
        top: calc(3.25% - 2px);
        left: 48.8%;
        width: 49.8%;
        transform: translateX(-50%);
    }

    #gameScreen.phone-portrait-layout .player-panel-content {
        inset: 43% 4% 6%;
        gap: 2px;
        justify-content: flex-start;
        font-size: clamp(8px,2.2vw,10px);
    }

    #gameScreen.phone-portrait-layout .player-badge:not(.player-local) .player-panel-content {
        transform: translate(var(--phone-opponent-content-x), var(--phone-opponent-content-y));
    }

    #gameScreen.phone-portrait-layout .player-badge:not(.player-local) .player-presence {
        display: none;
    }

    #gameScreen.phone-portrait-layout .player-badge .name {
        width: calc(100% - 74px);
        max-width: calc(100% - 74px);
        overflow: hidden;
        font-size: clamp(9px,2.3vw,10px);
        text-overflow: clip;
        white-space: nowrap;
    }

    #gameScreen.phone-portrait-layout .player-badge:not(.player-local) .name {
        transform: translateX(-12px);
    }

    #gameScreen.phone-portrait-layout .player-utility-row {
        position: absolute;
        top: -44px;
        right: 0;
        width: 100%;
        height: 88px;
        display: block;
    }

    #gameScreen.phone-portrait-layout .player-badge:not(.player-local) .player-utility-row {
        transform: translateY(var(--phone-opponent-utility-offset));
    }

    #gameScreen.phone-portrait-layout .player-control-button {
        width: 44px;
        height: 44px;
        flex-basis: 44px;
        padding: 10px;
        border: 0;
        background: transparent;
    }

    #gameScreen.phone-portrait-layout .player-info-icon {
        content: url("./assets/game-room/phone-portrait/info.png");
    }

    #gameScreen.phone-portrait-layout .player-profile-button {
        position: absolute;
        top: 44px;
        right: 0;
    }

    #gameScreen.phone-portrait-layout .player-gift-control {
        position: absolute;
        top: 0;
        right: 0;
    }

    #gameScreen.phone-portrait-layout .player-block-control {
        display: none;
    }

    #gameScreen.phone-portrait-layout .player-gift-icon {
        content: url("./assets/game-room/phone-portrait/present.png");
        width: 25px;
        height: 25px;
    }

    #gameScreen.phone-portrait-layout .player-stat-row,
    #gameScreen.phone-portrait-layout .player-presence {
        grid-template-columns: 15px minmax(0,max-content) minmax(0,max-content);
        width: calc(100% - 50px);
        min-height: 16px;
        column-gap: 3px;
    }

    #gameScreen.phone-portrait-layout .player-stat-row img,
    #gameScreen.phone-portrait-layout .player-presence img {
        width: 15px;
        height: 15px;
    }

    #gameScreen.phone-portrait-layout .player-coin-row img { content:url("./assets/game-room/phone-portrait/coin.png"); }
    #gameScreen.phone-portrait-layout .player-points-row img { content:url("./assets/game-room/phone-portrait/points.png"); }
    #gameScreen.phone-portrait-layout .player-presence img { content:url("./assets/game-room/phone-portrait/level.png"); }

    #gameScreen.phone-portrait-layout .player-stat-label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
    }

    #gameScreen.phone-portrait-layout .player-coin-value,
    #gameScreen.phone-portrait-layout .player-points-value,
    #gameScreen.phone-portrait-layout .player-presence {
        font-size: clamp(9px,2.5vw,11px);
    }

    #gameScreen.phone-portrait-layout .player-turn-indicator {
        top: calc(1px + var(--phone-short-height-pressure) * .055);
    }

    #gameScreen.phone-portrait-layout .player-badge:not(.player-local).player-active::after {
        inset: calc(40.2% - 2px) 7% 13.9%;
    }

    #gameScreen.phone-portrait-layout .player-badge.player-local.player-active::after {
        inset: 19.5% 3% calc(18.4% - var(--phone-local-frame-extension));
    }

    #gameScreen.phone-portrait-layout .player-badge.player-local {
        /* Four screen pixels of frame clearance, independent of panel scaling. */
        --phone-local-frame-extension: calc(4px / (1 + var(--phone-short-height-emphasis) * .01));
        translate: 0 var(--phone-table-local-shift, 0px);
        grid-column: 1 / -1;
        grid-row: 5;
        align-self: center;
        justify-self: center;
        width: min(
            clamp(256px, 65.7vw, calc(281px + var(--phone-width-growth) * .35)),
            calc(var(--phone-local-height) * 1902 / 827)
        );
        height: auto;
        aspect-ratio: 1902 / 827;
        transform: translateY(calc(var(--phone-short-height-pressure) * .027));
        scale: calc(1 + var(--phone-short-height-emphasis) * .01);
    }

    #gameScreen.phone-portrait-layout .player-badge.player-local::before {
        display: none;
    }

    #gameScreen.phone-portrait-layout .player-local .player-panel-art-opponent {
        display: none;
    }

    #gameScreen.phone-portrait-layout .player-local .player-panel-art-local {
        content: url("./assets/game-room/phone-portrait/local-player-panel.png");
        display: block;
        width: 100%;
        /* The visible frame occupies 19.5%–81.6% of the padded artwork.
           Stretch only its bottom; retain the layout box and content anchors. */
        height: calc(100% + var(--phone-local-frame-extension) / .621);
        transform: translateY(calc(-.195 * var(--phone-local-frame-extension) / .621));
        object-fit: fill;
        mix-blend-mode: normal;
    }

    #gameScreen.phone-portrait-layout .player-local .player-avatar {
        top: calc(24% - 1px);
        left: calc(6.5% - 2px);
        width: 23.5%;
        transform: none;
    }

    #gameScreen.phone-portrait-layout .player-local .player-panel-content {
        inset: 18% 8% 6% 29%;
        grid-template-rows: repeat(4,auto);
        row-gap: 2px;
        transform: translateY(3px);
    }

    #gameScreen.phone-portrait-layout .player-local .player-stat-row,
    #gameScreen.phone-portrait-layout .player-local .player-presence {
        width: min(100%,180px);
    }

    #gameScreen.phone-portrait-layout .player-local .player-utility-row {
        display: none;
    }

    #gameScreen.phone-portrait-layout .player-local .name {
        width: auto;
        max-width: 100%;
        text-overflow: ellipsis;
    }

    #gameScreen.phone-portrait-layout .game-table-art {
        content: url("./assets/game-room/phone-portrait/table.png");
        position: absolute;
        inset: auto;
        grid-column: auto;
        grid-row: auto;
        top: var(--phone-felt-top);
        left: 50%;
        width: var(--phone-felt-width);
        min-width: 0;
        height: auto;
        max-width: none;
        aspect-ratio: 1208 / 1302;
        max-height: none;
        clip-path: none;
        object-fit: contain;
        mix-blend-mode: normal;
        transform: translateX(-50%);
        scale: 1;
    }

    #gameScreen.phone-portrait-layout .current-trick {
        position: absolute;
        inset: auto;
        top: calc(var(--phone-felt-top) + var(--phone-felt-height) * .43);
        left: var(--phone-trick-left, 50%);
        align-self: center;
        justify-self: center;
        width: 74%;
        height: 0;
        min-height: 0;
        transform: translateX(-50%);
    }

    #gameScreen.phone-portrait-layout .current-trick .playing-card {
        width: var(--phone-trick-width, min(clamp(48px,14.5vw,62px), calc(var(--phone-felt-width) * .28)));
        min-width: 0;
        min-height: 0;
    }

    #gameScreen.phone-portrait-layout .talon-area {
        position: absolute;
        inset: auto;
        top: var(--phone-talon-top);
        left: var(--phone-talon-left);
        align-self: end;
        justify-self: end;
        width: clamp(68px,20vw,84px);
        height: calc(var(--phone-talon-card-width) * 1.66);
        margin: 0;
    }

    #gameScreen.phone-portrait-layout .talon-area .talon-card {
        width: var(--phone-talon-card-width);
        min-width: 0;
        min-height: 0;
    }

    #gameScreen.phone-portrait-layout .last-deal-area {
        position: absolute;
        inset: auto;
        top: var(--phone-table-controls-top);
        left: var(--phone-table-controls-left);
        align-self: end;
        justify-self: start;
        margin: 0;
        transform: translateY(-50%);
    }

    #gameScreen.phone-portrait-layout .hand-region {
        position: absolute;
        inset: auto;
        top: var(--phone-composed-hand-top);
        left: 0;
        align-self: center;
        width: 100%;
        transform: none;
    }

    #gameScreen.phone-portrait-layout .hand-status {
        position: absolute;
        z-index: 2;
        bottom: calc(100% - 5px);
        left: 50%;
        max-width: 92%;
        margin: 0;
        padding: 2px 6px;
        font-size: 8px;
        transform: translateX(-50%);
    }

    #gameScreen.phone-portrait-layout .hand-region .my-hand {
        width: 100%;
        min-height: 0;
        height: var(--phone-hand-height);
        padding: 3px var(--phone-edge);
        gap: var(--phone-hand-gap);
        justify-content: center;
        overflow: visible;
        scrollbar-gutter: auto;
    }

    #gameScreen.phone-portrait-layout .hand-region .my-hand .playing-card {
        width: var(--phone-hand-card-width);
        min-width: var(--phone-hand-card-width);
        flex-basis: var(--phone-hand-card-width);
        min-height: 0;
        border-radius: 6px;
    }

    #gameScreen.phone-portrait-layout .hand-region .my-hand .playing-card + .playing-card {
        margin-left: var(--phone-hand-overlap);
    }

    #gameScreen.phone-portrait-layout .hand-region .my-hand:has(> .playing-card:nth-child(9)) .playing-card + .playing-card {
        margin-left: min(
            max(var(--phone-hand-overlap), calc(var(--phone-hand-card-width) * -.5)),
            calc(((100vw - (2 * var(--phone-edge)) - (10 * var(--phone-hand-card-width))) / 9) - var(--phone-hand-gap))
        );
    }

    #gameScreen.phone-portrait-layout .contract-choice-panel {
        top: var(--phone-bid-top);
        left: var(--phone-bid-left);
        width: var(--phone-bid-width);
        max-height: 70dvh;
        padding: 12px;
        overflow-y: auto;
    }

    #gameScreen.phone-portrait-layout .contract-choice-panel .contract-choice-button {
        min-height: 44px;
        height: 44px;
    }

    #gameScreen.phone-portrait-layout .result-box {
        top: 35%;
        width: min(90vw,360px);
        max-height: 44dvh;
        padding: 14px;
    }

    #gameScreen.phone-portrait-layout .player-role-label {
        position: absolute;
        width: auto;
        min-width: 70px;
        padding: 2px 6px;
        font-size: 9px;
    }

    #gameScreen.phone-portrait-layout .player-role-opponent-left,
    #gameScreen.phone-portrait-layout .player-role-opponent-right {
        position: absolute;
        inset: auto;
        top: var(--phone-composed-role-top);
        align-self: end;
        justify-self: center;
        transform: none;
    }
    #gameScreen.phone-portrait-layout .player-role-opponent-left { left: var(--phone-edge); }
    #gameScreen.phone-portrait-layout .player-role-opponent-right { right: var(--phone-edge); }
    #gameScreen.phone-portrait-layout .player-role-local { right:auto; bottom:var(--phone-local-role-bottom); left:var(--phone-local-role-left); min-width:0; max-width:calc(100vw - var(--phone-local-role-left) - var(--phone-edge)); transform:none; }

    #gameScreen.phone-portrait-layout .mobile-game-action-bar {
        position: absolute;
        z-index: 23;
        right: var(--phone-edge);
        bottom: max(var(--phone-edge), env(safe-area-inset-bottom));
        left: var(--phone-edge);
        display: grid;
        grid-template-columns: repeat(5,var(--phone-action-size));
        justify-content: space-between;
        align-items: center;
        transform: translateY(min(calc(var(--phone-short-height-pressure) * .042), var(--phone-edge)));
    }

    #gameScreen.phone-portrait-layout .mobile-game-action-bar > button,
    #gameScreen.phone-portrait-layout .mobile-game-reaction-slot .game-reaction-button {
        position: static;
        width: var(--phone-action-size);
        height: var(--phone-action-size);
        min-width: 44px;
        min-height: 44px;
        display: grid;
        place-items: center;
        padding: 7px;
        border: 1px solid rgba(217,155,69,.72);
        border-radius: 11px;
        color: #f6d89f;
        background: rgba(31,15,7,.96);
        box-shadow: 0 5px 12px rgba(0,0,0,.52);
        transform: none;
    }

    #gameScreen.phone-portrait-layout .mobile-game-reaction-slot {
        width: var(--phone-action-size);
        height: var(--phone-action-size);
        min-width: 44px;
        min-height: 44px;
        display: grid;
        place-items: center;
    }

    #gameScreen.phone-portrait-layout .mobile-game-action-bar > button:disabled {
        opacity: .58;
    }

    #gameScreen.phone-portrait-layout .mobile-game-action-bar img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        pointer-events: none;
    }

    #gameScreen.phone-portrait-layout #mobileGameChatButton img,
    #gameScreen.phone-portrait-layout #mobileGameResultsButton img,
    #gameScreen.phone-portrait-layout #mobileGameSoundButton img {
        filter: none;
    }

    #gameScreen.phone-portrait-layout .mobile-game-reaction-slot .game-reaction-launcher-icon {
        width: 100%;
        height: 100%;
    }

    #gameScreen.phone-portrait-layout .game-chat-panel,
    #gameScreen.phone-portrait-layout .game-results-panel {
        display: none;
        position: absolute;
        z-index: 31;
        inset: auto;
        filter: drop-shadow(0 12px 18px rgba(0,0,0,.68));
    }

    #gameScreen.phone-portrait-layout .game-chat-panel.mobile-game-surface-open,
    #gameScreen.phone-portrait-layout .game-results-panel.mobile-game-surface-open {
        display: block;
    }

    #gameScreen.phone-portrait-layout .game-chat-panel {
        top: max(10px,env(safe-area-inset-top));
        left: 50%;
        width: min(88vw, calc(82dvh * 892 / 1762), 370px);
        height: auto;
        aspect-ratio: 892 / 1762;
        transform: translateX(-50%);
    }

    #gameScreen.phone-portrait-layout .game-chat-panel .game-panel-art {
        content: url("./assets/game-room/phone-portrait/chat-panel.png");
        display: block;
        width: 100%;
        height: 100%;
        object-fit: fill;
        clip-path: inset(.45% round 24px);
    }

    #gameScreen.phone-portrait-layout .game-chat-panel .game-panel-content {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        margin: 0;
    }

    #gameScreen.phone-portrait-layout .game-chat-panel .chat-log {
        top: 10%;
        left: 7.6%;
        width: 84.3%;
        height: 78.7%;
        max-height: 78.7%;
        overflow: hidden;
    }

    #gameScreen.phone-portrait-layout .game-chat-panel .chat-messages {
        box-sizing: border-box;
        width: 100%;
        height: 100%;
        max-height: 100%;
        padding: 2% 7% 2% 2%;
        overflow-x: hidden;
        overflow-y: auto;
        overflow-wrap: anywhere;
    }

    #gameScreen.phone-portrait-layout .game-chat-panel .chat-message {
        max-width: 100%;
        box-sizing: border-box;
        padding: 5px 4px 6px;
    }

    #gameScreen.phone-portrait-layout .game-chat-panel .chat-sender,
    #gameScreen.phone-portrait-layout .game-chat-panel .chat-text {
        max-width: 100%;
        overflow: hidden;
    }

    #gameScreen.phone-portrait-layout .game-chat-panel .chat-text {
        overflow-wrap: anywhere;
    }

    #gameScreen.phone-portrait-layout .game-chat-panel .chat-composer {
        left: 7.6%;
        top: 90.4%;
        width: 66.7%;
        height: 5.3%;
        display: flex;
        align-items: center;
        line-height: 18px;
        padding: 0 2.5%;
        border: 0;
        border-radius: 0;
        outline: 0;
        background: transparent;
        box-shadow: none;
    }

    #gameScreen.phone-portrait-layout .game-chat-panel .chat-composer:focus-visible {
        outline: 0;
        color: #fff8e9;
        background: transparent;
        box-shadow: none;
    }

    #gameScreen.phone-portrait-layout .game-chat-panel .chat-composer:empty::before {
        color: rgba(201, 187, 163, .64);
    }

    #gameScreen.phone-portrait-layout .game-chat-panel .chat-input button {
        top: calc(93.1% - 22px);
        left: calc(84.4% - 22px);
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
        border: 0;
        background: transparent;
        box-shadow: none;
    }

    #gameScreen.phone-portrait-layout .game-chat-panel #chatEmojiButton {
        display: none;
    }

    #gameScreen.phone-portrait-layout .game-chat-panel #chatSendButton {
        display: block;
    }

    #gameScreen.phone-portrait-layout .game-chat-panel .mobile-game-surface-close {
        top: 1.6%;
        right: 3.5%;
    }

    #gameScreen.phone-portrait-layout .chat-panel-title {
        position: absolute;
        top: 2.2%;
        left: 12%;
        width: 76%;
        height: 6.4%;
        margin: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        clip-path: none;
        white-space: nowrap;
        font-size: clamp(18px, 5vw, 22px);
    }

    #gameScreen.phone-portrait-layout .game-results-panel {
        --phone-results-deal-column: clamp(44px, 12vw, 52px);
        --phone-results-grid-line: rgba(216, 145, 62, .72);
        --phone-results-total-line-width: 2px;
        top: 22%;
        left: 50%;
        width: min(96vw,410px);
        height: auto;
        aspect-ratio: 1904 / 826;
        transform: translateX(-50%);
    }

    #gameScreen.phone-portrait-layout .game-results-panel .game-panel-art {
        content: url("./assets/game-room/phone-portrait/results-panel.png");
        display: block;
        width: 100%;
        height: 100%;
        clip-path: none;
        object-fit: fill;
        mix-blend-mode: normal;
    }

    #gameScreen.phone-portrait-layout .game-results-panel::before {
        display: none;
    }

    #gameScreen.phone-portrait-layout .game-results-panel .game-panel-content {
        position: absolute;
        inset: 0;
        margin: 0;
    }

    #gameScreen.phone-portrait-layout .game-results-panel .panel-title {
        position: absolute;
        top: 7.5%;
        right: 12%;
        left: 12%;
        min-height: 0;
        margin: 0;
        font-size: clamp(12px, 3.5vw, 15px);
        text-align: center;
    }

    #gameScreen.phone-portrait-layout .score-panel-content {
        position: absolute;
        top: 20%;
        right: 4.2%;
        bottom: 7.5%;
        left: 4.2%;
        max-height: none;
        padding: 0;
        overflow: hidden;
    }

    #gameScreen.phone-portrait-layout .game-results-table {
        display: grid;
        grid-template-rows: 1fr 5fr 1fr;
        box-sizing: border-box;
        width: 100%;
        height: 100%;
        overflow: hidden;
        border: 1px solid var(--phone-results-grid-line);
        border-collapse: collapse;
        border-spacing: 0;
        background: rgba(18, 8, 3, .28);
        font-size: clamp(8px,2.3vw,10px);
    }

    #gameScreen.phone-portrait-layout .game-results-table colgroup {
        display: none;
    }

    #gameScreen.phone-portrait-layout .game-results-table thead,
    #gameScreen.phone-portrait-layout .game-results-table tbody,
    #gameScreen.phone-portrait-layout .game-results-table tfoot {
        position: static;
        display: block;
        width: 100%;
        min-height: 0;
        background-color: rgba(18, 8, 3, .22);
    }

    #gameScreen.phone-portrait-layout .game-results-table thead {
        border-bottom: 1px solid var(--phone-results-grid-line);
    }

    #gameScreen.phone-portrait-layout .game-results-table tfoot {
        position: relative;
        border: 0;
    }

    #gameScreen.phone-portrait-layout .game-results-table tfoot::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 1;
        box-sizing: border-box;
        border: var(--phone-results-total-line-width) solid var(--phone-results-grid-line);
        pointer-events: none;
    }

    #gameScreen.phone-portrait-layout .game-results-table tbody {
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-width: none;
        touch-action: pan-y;
        clip-path: inset(.5px 0);
        background-image:
            linear-gradient(var(--phone-results-grid-line), var(--phone-results-grid-line)),
            linear-gradient(var(--phone-results-grid-line), var(--phone-results-grid-line)),
            linear-gradient(var(--phone-results-grid-line), var(--phone-results-grid-line)),
            linear-gradient(var(--phone-results-grid-line), var(--phone-results-grid-line));
        background-position: 0 20%, 0 40%, 0 60%, 0 80%;
        background-repeat: no-repeat;
        background-size: 100% 1px;
    }

    #gameScreen.phone-portrait-layout .game-results-table tbody::-webkit-scrollbar {
        display: none;
    }

    #gameScreen.phone-portrait-layout .game-results-table tr {
        display: grid;
        grid-template-columns: var(--phone-results-deal-column) repeat(3, minmax(0, 1fr));
        width: 100%;
        min-width: 0;
    }

    #gameScreen.phone-portrait-layout .game-results-table thead tr,
    #gameScreen.phone-portrait-layout .game-results-table tfoot tr {
        height: 100%;
    }

    #gameScreen.phone-portrait-layout .game-results-table tbody tr {
        height: 20%;
        min-height: 20%;
    }

    #gameScreen.phone-portrait-layout .game-results-table th,
    #gameScreen.phone-portrait-layout .game-results-table td {
        position: static;
        width: auto;
        height: auto;
        min-height: 0;
        display: grid;
        place-items: center;
        padding: 0 2px;
        overflow: hidden;
        border: 0;
        border-left: 1px solid var(--phone-results-grid-line);
        border-radius: 0;
        color: inherit;
        background: transparent;
        box-shadow: none;
        line-height: 1;
        text-align: center;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    #gameScreen.phone-portrait-layout .game-results-table tr > :first-child {
        border-left: 0;
    }

    #gameScreen.phone-portrait-layout .game-results-table thead th,
    #gameScreen.phone-portrait-layout .game-results-table tfoot th,
    #gameScreen.phone-portrait-layout .game-results-table tfoot td {
        position: static;
        border-top: 0;
        border-right: 0;
        border-bottom: 0;
        background: transparent;
    }

    #gameScreen.phone-portrait-layout .game-results-table tfoot tr > :not(:first-child) {
        border-left-width: var(--phone-results-total-line-width);
    }

    #gameScreen.phone-portrait-layout .game-results-table td.score-positive {
        color: #9de077;
    }

    #gameScreen.phone-portrait-layout .game-results-table td.score-negative {
        color: #ff8b7f;
    }

    #gameScreen.phone-portrait-layout .game-results-table .game-results-empty {
        height: 100%;
    }

    #gameScreen.phone-portrait-layout .game-results-table tbody th {
        font-weight: 800;
    }

    #gameScreen.phone-portrait-layout .game-results-table .game-results-empty td {
        grid-column: 1 / -1;
        padding: 2px;
        background: transparent;
    }

    #gameScreen.phone-portrait-layout .mobile-game-surface-close {
        position: absolute;
        z-index: 5;
        top: 4%;
        right: 5%;
        width: 44px;
        height: 44px;
        display: grid;
        place-items: center;
        padding: 0;
        border: 0;
        color: #f6d89f;
        background: transparent;
        font-size: 25px;
        cursor: pointer;
    }

    #gameScreen.phone-portrait-layout .game-reaction-picker {
        grid-template-columns: repeat(4,48px);
        gap: 4px;
        padding: 7px;
    }

    #gameScreen.phone-portrait-layout .game-reaction-choice {
        width: 48px;
        height: 48px;
    }

    #gameScreen.phone-portrait-layout .game-reaction-display {
        width: 72px;
        height: 72px;
    }

    #gameScreen.phone-portrait-layout .game-reaction-display--local {
        width: 78px;
        height: 78px;
    }

}
/* Public profiles and immutable match-history presentation. */
.profile-expanded {
    grid-column: 1 / -1;
    border-top: 1px solid rgba(126, 214, 234, .28);
    padding-top: 20px;
}
.profile-level-row { display: flex; justify-content: flex-end; color: #ffca72; font-weight: 800; }
.profile-expanded [data-level-color="BLUE"], .profile-dialog [data-level-color="BLUE"] { color: #72d8ff; }
.profile-expanded [data-level-color="ORANGE"], .profile-dialog [data-level-color="ORANGE"] { color: #ffb85c; }
.profile-expanded [data-level-color="RED"], .profile-dialog [data-level-color="RED"] { color: #ff756e; }
.profile-expanded [data-level-color="DARK_RED"], .profile-dialog [data-level-color="DARK_RED"] { color: #d84b55; }
.profile-dialog .player-status--beginner { color: #72d8ff; }
.profile-dialog .player-status--intermediate { color: #ffb85c; }
.profile-dialog .player-status--pro { color: #ff756e; }
.profile-dialog .player-status--grandmaster { color: #d84b55; }
.profile-statistics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
    margin: 12px 0 22px;
}
.profile-statistics-grid > div {
    min-width: 0;
    padding: 12px;
    border: 1px solid rgba(126, 214, 234, .22);
    border-radius: 12px;
    background: rgba(4, 24, 42, .74);
}
.profile-statistics-grid dt { color: #b9d8df; font-size: .78rem; line-height: 1.3; }
.profile-statistics-grid dd { margin: 5px 0 0; color: #fff; font-size: 1.05rem; font-weight: 800; }
.profile-history-heading, .profile-history-card-heading {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.profile-history-list { display: grid; gap: 12px; margin-top: 12px; }
.profile-history-card {
    padding: 14px;
    overflow: hidden;
    border: 1px solid rgba(126, 214, 234, .25);
    border-radius: 14px;
    background: rgba(3, 20, 35, .88);
}
.profile-history-card p { margin: 8px 0; color: #cde3e7; }
.profile-history-participants { display: grid; gap: 5px; margin: 8px 0; padding: 0; list-style: none; }
.profile-history-participants li { display: flex; justify-content: space-between; gap: 10px; min-width: 0; }
.profile-history-participants button {
    min-width: 0; overflow: hidden; border: 0; background: transparent; color: #8ce9ff;
    text-align: left; text-overflow: ellipsis; white-space: nowrap; text-decoration: underline;
}
.profile-dialog {
    width: min(760px, calc(100vw - 24px));
    max-height: min(820px, calc(100vh - 24px));
    padding: 0;
    overflow: auto;
    border: 1px solid rgba(111, 224, 244, .48);
    border-radius: 18px;
    background: #071d2c;
    color: #f6ffff;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .62);
}
.profile-dialog::backdrop { background: rgba(0, 8, 14, .78); }
.profile-dialog-shell { padding: 22px; }
.profile-dialog-shell > header, .profile-public-identity {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.profile-dialog-shell > header button, .profile-dialog button, .profile-history-heading button,
.profile-history-card > button { min-height: 44px; }
.profile-dialog button:focus-visible, .profile-expanded button:focus-visible { outline: 3px solid #58e9ff; outline-offset: 2px; }
.profile-dialog-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 18px; }
.profile-dialog-error { color: #ff8f99; }
.waiting-room-block-control { margin-left: auto; width: 44px; height: 44px; border: 1px solid rgba(255,255,255,.28); border-radius: 8px; background: transparent; }
.waiting-room-block-control img { display: block; width: 24px; height: 24px; margin: auto; object-fit: contain; }
.waiting-room-block-control:hover { border-color: #ff8f99; cursor: pointer; }
.waiting-room-block-control:focus-visible { outline: 3px solid #58e9ff; outline-offset: 2px; }
.profile-public-identity { justify-content: flex-start; margin: 18px 0; }
.seat-position--profile { cursor: pointer; border-radius: 10px; }
.seat-position--profile:hover { filter: brightness(1.18); }
.seat-position--profile:focus-visible { outline: 3px solid #74cfff; outline-offset: 3px; }
.score-neutral { color: #e2eaec; }
@media (max-width: 700px) {
    .profile-history-heading, .profile-history-card-heading { align-items: stretch; flex-direction: column; }
    .profile-statistics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 360px) and (width < 510px) and (orientation: portrait) {
    .profile-dialog { width: min(94vw, 404px); max-height: 88dvh; }
    .profile-dialog-shell { padding: 16px; }
}

/* Active game: canonical adaptive tablet-portrait composition. */
@media (min-width: 510px) and (width < 1024px) and (min-height: 900px) {
    #gameScreen.tablet-portrait-layout {
        --tablet-edge: clamp(9px, 1.8vw, 18px);
        --tablet-top-height: clamp(52px, 6.2dvh, 78px);
        --tablet-opponent-width: clamp(246px, 43.2vw, 468px);
        --tablet-table-top: clamp(250px, 26.4dvh, 380px);
        --tablet-table-width: min(100vw, calc((100dvh - var(--tablet-table-top)) * .9278));
        --tablet-card-width: clamp(100.8px, 17.64vw, 158.4px);
        --tablet-card-step: clamp(34.2px, 6.3vw, 59.4px);
        --tablet-card-overlap: calc(var(--tablet-card-step) - var(--tablet-card-width));
        --tablet-hand-lift: clamp(48px, calc(10vw - 12px), 65px);
        --tablet-local-width: min(clamp(330px, 61.5vw, 650px), 50dvh);
        --tablet-local-height: calc(var(--tablet-local-width) * 829 / 1898);
        --tablet-action-size: clamp(57.5px, 9.315vw, 92px);
        --tablet-composition-lift: max(0px, calc(100dvh - clamp(74px, 8.8dvh, 105px) - var(--tablet-local-height) - var(--tablet-hand-top) - var(--tablet-card-width) * 1.4 - 52px));
        /* Keep the readable upper half of the hand above the local panel. */
        --tablet-hand-top: max(calc(var(--tablet-table-top) + 11.5dvh + clamp(74.7px, 11.115vw, 93.6px) * 1.512 + 24px), min(calc(var(--tablet-table-top) + 52vw - var(--tablet-hand-lift)), calc(100dvh - clamp(74px, 8.8dvh, 105px) - var(--tablet-local-height) - var(--tablet-card-width) * .7)));
        width: 100vw;
        height: 100vh;
        height: 100svh;
        height: 100dvh;
        min-height: 0;
        overflow: hidden;
        background: #120a05 url("./assets/game-room/tablet-portrait/background.png") center / cover no-repeat;
    }

    #gameScreen.tablet-portrait-layout .game-screen {
        position: relative;
        display: block;
        width: 100%;
        height: 100%;
        min-width: 0;
        min-height: 0;
        margin: 0;
        padding: 0;
        overflow: hidden;
    }
    #gameScreen.tablet-portrait-layout .game-table-area {
        position: relative;
        display: grid;
        grid-template-columns: var(--tablet-edge) var(--tablet-opponent-width) minmax(0, 1fr) var(--tablet-opponent-width) var(--tablet-edge);
        grid-template-rows: var(--tablet-edge) var(--tablet-top-height) clamp(35px, 5dvh, 64px) calc(var(--tablet-opponent-width) * 829 / 1898) minmax(0, 1fr) var(--tablet-local-height) calc(clamp(74px, 8.8dvh, 105px) + var(--tablet-composition-lift));
        width: 100%;
        height: 100%;
        min-width: 0;
        min-height: 0;
        margin: 0;
        padding: 0;
        overflow: hidden;
    }

    #gameScreen.tablet-portrait-layout .mobile-game-menu-button {
        position: absolute;
        z-index: 42;
        top: var(--tablet-edge);
        left: var(--tablet-edge);
        display: grid;
        place-items: center;
        width: var(--tablet-action-size);
        height: var(--tablet-action-size);
        min-width: 44px;
        min-height: 44px;
        padding: 0;
        border: 0;
        background: transparent;
    }
    #gameScreen.tablet-portrait-layout .mobile-game-menu-button img { width: 100%; height: 100%; object-fit: contain; }

    #gameScreen.tablet-portrait-layout .game-top {
        position: absolute;
        z-index: 25;
        top: var(--tablet-edge);
        right: calc(var(--tablet-edge) + var(--tablet-action-size) + 3vw);
        left: calc(var(--tablet-edge) + var(--tablet-action-size) + 6.5vw);
        width: auto;
        height: var(--tablet-top-height);
        min-height: 0;
        padding: 0;
        background-color: transparent;
        background-image: url("./assets/game-room/tablet-portrait/room-info-panel.png");
        background-position: center;
        background-size: 105.068% 287.121%;
        background-repeat: no-repeat;
        opacity: 1;
        filter: none;
    }
    #gameScreen.tablet-portrait-layout .game-top-art,
    #gameScreen.tablet-portrait-layout .game-room-statuses { display: none; }
    #gameScreen.tablet-portrait-layout .game-top-content { position: absolute; inset: 17% 6%; display: block; padding: 0; }
    #gameScreen.tablet-portrait-layout .game-room-info {
        display: grid;
        grid-template-columns: .9fr 2.1fr .85fr .65fr;
        align-items: center;
        width: 100%;
        height: 100%;
        margin: 0;
        gap: 1%;
    }
    #gameScreen.tablet-portrait-layout .game-room-info-item {
        display: flex;
        align-items: baseline;
        justify-content: center;
        gap: 4px;
        min-width: 0;
        color: #f5eee6;
        font-size: clamp(10.4px, 1.64vw, 14.4px);
        line-height: 1;
        white-space: nowrap;
    }
    #gameScreen.tablet-portrait-layout .game-room-info-item dt { color: inherit; }
    #gameScreen.tablet-portrait-layout .game-room-info-item dd { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

    #gameScreen.tablet-portrait-layout .player-badge {
        position: relative;
        z-index: 18;
        width: var(--tablet-opponent-width);
        height: auto;
        aspect-ratio: 1898 / 829;
        margin: 0;
        padding: 0;
        transform: none;
        border: 0;
        background: transparent;
        filter: none;
    }
    #gameScreen.tablet-portrait-layout .player-badge:not(.player-local) { transition: none; }
    #gameScreen.tablet-portrait-layout .player-badge.player-opponent-left { grid-row: 4; grid-column: 2; top: auto; right: auto; bottom: auto; left: auto; }
    #gameScreen.tablet-portrait-layout .player-badge.player-opponent-right { grid-row: 4; grid-column: 4; top: auto; right: auto; bottom: auto; left: auto; }
    #gameScreen.tablet-portrait-layout .player-panel-art-local,
    #gameScreen.tablet-portrait-layout .player-panel-opponent-body { display: none; }
    #gameScreen.tablet-portrait-layout .player-panel-opponent-portrait {
        position: absolute;
        inset: 0;
        display: block;
        width: 100%;
        height: 100%;
        object-fit: fill;
        clip-path: inset(16.2% 2.3% round 4%);
        content: url("./assets/game-room/tablet-portrait/opponent-panel.png");
    }
    #gameScreen.tablet-portrait-layout .player-badge:not(.player-local) .player-avatar {
        position: absolute;
        z-index: 3;
        top: 19%;
        left: 5.25%;
        width: 25.6%;
        height: auto;
        aspect-ratio: 1;
        overflow: hidden;
        border: 0;
        border-radius: 50%;
        background: #120d08;
        transform: none;
    }
    #gameScreen.tablet-portrait-layout .player-avatar .avatar-image,
    #gameScreen.tablet-portrait-layout .player-avatar .avatar-fallback { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
    #gameScreen.tablet-portrait-layout .player-panel-content {
        position: absolute;
        z-index: 4;
        top: 20%;
        right: 2.5%;
        bottom: 17%;
        left: 31.5%;
        display: grid;
        grid-template: repeat(3, 1fr) / minmax(0, 1fr) 52.8px;
        align-items: center;
        gap: 0 3%;
    }
    #gameScreen.tablet-portrait-layout .player-badge .name {
        grid-row: 1;
        grid-column: 1;
        min-width: 0;
        overflow: hidden;
        color: #fff;
        font-size: clamp(14.4px, 2.16vw, 19.2px);
        line-height: 1;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    #gameScreen.tablet-portrait-layout .player-stat-row {
        grid-column: 1;
        display: flex;
        align-items: center;
        gap: 7px;
        min-width: 0;
        color: #f3b70b;
        font-size: clamp(15.6px, 2.46vw, 20.4px);
        line-height: 1;
    }
    #gameScreen.tablet-portrait-layout .player-coin-row { grid-row: 2; }
    #gameScreen.tablet-portrait-layout .player-points-row { grid-row: 3; }
    #gameScreen.tablet-portrait-layout .player-stat-row img { width: clamp(19.2px, 3vw, 25.2px); height: auto; }
    #gameScreen.tablet-portrait-layout .player-coin-row img { content: url("./assets/game-room/tablet-portrait/coin.png"); }
    #gameScreen.tablet-portrait-layout .player-points-row img { content: url("./assets/game-room/tablet-portrait/points.png"); }
    #gameScreen.tablet-portrait-layout .player-stat-label,
    #gameScreen.tablet-portrait-layout .player-badge:not(.player-local) .player-presence { display: none; }
    #gameScreen.tablet-portrait-layout .player-utility-row {
        grid-row: 1 / 4;
        grid-column: 2;
        display: flex;
        flex-direction: column-reverse;
        justify-content: space-around;
        align-items: center;
        width: 52.8px;
        height: 100%;
    }
    #gameScreen.tablet-portrait-layout .player-control-button {
        display: grid;
        place-items: center;
        width: 52.8px;
        height: 52.8px;
        min-width: 52.8px;
        min-height: 52.8px;
        margin: -10.8px 0;
        padding: 10.8px;
        border: 0;
        background: transparent;
    }
    #gameScreen.tablet-portrait-layout .player-badge:not(.player-local) .player-block-control {
        display: none;
        width: 0;
        height: 0;
        min-width: 0;
        min-height: 0;
        margin: 0;
        padding: 0;
        pointer-events: none;
    }
    #gameScreen.tablet-portrait-layout .player-control-button img { width: 100%; height: 100%; object-fit: contain; }
    #gameScreen.tablet-portrait-layout .player-info-icon { content: url("./assets/game-room/tablet-portrait/info.png"); }
    #gameScreen.tablet-portrait-layout .player-gift-icon { content: url("./assets/game-room/tablet-portrait/present.png"); }

    #gameScreen.tablet-portrait-layout .player-badge.player-local {
        z-index: 20;
        grid-row: 6;
        grid-column: 2 / 5;
        align-self: stretch;
        justify-self: center;
        top: auto;
        right: auto;
        bottom: auto;
        left: auto;
        width: var(--tablet-local-width);
        height: var(--tablet-local-height);
        aspect-ratio: auto;
        transform: none;
    }
    #gameScreen.tablet-portrait-layout .player-badge.player-local::before { display: none; }
    #gameScreen.tablet-portrait-layout .player-local .player-panel-opponent-portrait { display: none; }
    #gameScreen.tablet-portrait-layout .player-local .player-panel-art-local {
        position: absolute;
        inset: 0;
        display: block;
        width: 100%;
        height: 100%;
        object-fit: fill;
        clip-path: inset(16.2% 2.3% round 4%);
        content: url("./assets/game-room/tablet-portrait/local-player-panel.png");
    }
    #gameScreen.tablet-portrait-layout .player-local .player-avatar {
        position: absolute;
        z-index: 3;
        top: 19%;
        left: 5.25%;
        width: 25.6%;
        height: auto;
        aspect-ratio: 1;
        overflow: hidden;
        border: 0;
        border-radius: 50%;
        background: #120d08;
    }
    #gameScreen.tablet-portrait-layout .player-local .player-avatar i { right: 1%; bottom: 7%; width: 20%; min-width: 8px; }
    #gameScreen.tablet-portrait-layout .player-local .player-panel-content { top: 16%; right: 22%; bottom: 15%; left: 36%; grid-template-columns: minmax(0, 1fr); }
    #gameScreen.tablet-portrait-layout .player-local .name { grid-row: 1; }
    #gameScreen.tablet-portrait-layout .player-local .player-coin-row { grid-row: 2; }
    #gameScreen.tablet-portrait-layout .player-local .player-points-row { grid-row: 3; }
    #gameScreen.tablet-portrait-layout .player-local .name { font-size: clamp(18px, 2.7vw, 24px); }
    #gameScreen.tablet-portrait-layout .player-local .player-stat-row { font-size: clamp(19.5px, 3.075vw, 25.5px); }
    #gameScreen.tablet-portrait-layout .player-local .player-presence {
        position: absolute;
        top: 4%;
        right: -31%;
        bottom: 4%;
        display: grid;
        place-items: center;
        width: 30%;
        overflow: hidden;
        color: transparent;
        font-size: 0;
    }
    #gameScreen.tablet-portrait-layout .player-local .player-presence img { width: 100%; height: 100%; object-fit: contain; content: url("./assets/game-room/tablet-portrait/level.png"); }
    #gameScreen.tablet-portrait-layout .player-local .player-utility-row { display: none; }
    #gameScreen.tablet-portrait-layout .player-badge.player-active::after {
        position: absolute;
        z-index: 8;
        inset: 3%;
        border: 3px solid #ffc940;
        border-radius: 20px;
        box-shadow: 0 0 13px rgba(255, 196, 49, .9);
        content: "";
        pointer-events: none;
    }
    #gameScreen.tablet-portrait-layout .player-badge:not(.player-local).player-active { filter: none !important; }
    #gameScreen.tablet-portrait-layout .player-badge:not(.player-local).player-active::after {
        top: 16.4%;
        right: 2.3%;
        bottom: 16.2%;
        left: 2.3%;
        border-width: 2px;
        border-radius: 8px;
        box-shadow: 0 0 9px rgba(255, 186, 42, .75);
    }
    #gameScreen.tablet-portrait-layout .player-badge.player-local.player-active::after {
        top: calc(17.1% - 2px);
        right: calc(3% - 4px);
        bottom: 16.18%;
        left: calc(3% - 4px);
    }
    #gameScreen.tablet-portrait-layout .player-turn-indicator { display: none; }
    #gameScreen.tablet-portrait-layout .player-role-label {
        z-index: 26;
        width: var(--tablet-opponent-width);
        min-width: 0;
        padding: 3px 8px;
        font-size: clamp(12px, 1.92vw, 15.6px);
    }
    #gameScreen.tablet-portrait-layout .player-role-opponent-left {
        top: calc(var(--tablet-edge) + var(--tablet-top-height) + clamp(35px, 5dvh, 64px) + (var(--tablet-opponent-width) * 829 / 1898) - 22px);
        left: var(--tablet-edge);
    }
    #gameScreen.tablet-portrait-layout .player-role-opponent-right {
        top: calc(var(--tablet-edge) + var(--tablet-top-height) + clamp(35px, 5dvh, 64px) + (var(--tablet-opponent-width) * 829 / 1898) - 22px);
        right: var(--tablet-edge);
        left: auto;
    }
    #gameScreen.tablet-portrait-layout .player-role-local {
        right: auto;
        top: calc(100dvh - clamp(74px, 8.8dvh, 105px) - var(--tablet-composition-lift) - (var(--tablet-local-height) * .162) + 4px);
        bottom: auto;
        left: 50%;
        width: min(46vw, 350px);
        transform: translateX(-50%);
    }

    #gameScreen.tablet-portrait-layout .game-table-art {
        position: absolute;
        z-index: 4;
        top: var(--tablet-table-top);
        left: 50%;
        display: block;
        width: var(--tablet-table-width);
        height: auto;
        max-width: none;
        aspect-ratio: 1208 / 1302;
        object-fit: contain;
        content: url("./assets/game-room/tablet-portrait/table.png");
        transform: translateX(-50%);
    }
    #gameScreen.tablet-portrait-layout .current-trick {
        position: absolute;
        z-index: 8;
        top: calc(var(--tablet-table-top) + 2%);
        left: 50%;
        width: 46%;
        height: 19%;
        transform: translateX(-50%);
    }
    #gameScreen.tablet-portrait-layout .current-trick .playing-card { width: clamp(74.7px, 11.115vw, 93.6px); height: auto; }
    #gameScreen.tablet-portrait-layout .current-trick .trick-card-left { z-index: 1; transform: translate(-130%, -15%) rotate(-9deg); }
    #gameScreen.tablet-portrait-layout .current-trick .trick-card-local { z-index: 2; transform: translate(-50%, 8%) rotate(0deg); }
    #gameScreen.tablet-portrait-layout .current-trick .trick-card-right { z-index: 1; transform: translate(30%, -15%) rotate(9deg); }
    #gameScreen.tablet-portrait-layout .talon-area { position: absolute; z-index: 9; top: calc(var(--tablet-table-top) + (var(--tablet-table-width) * 1302 / 1208 * .26)); right: auto; left: calc(50% + (var(--tablet-table-width) * .37)); transform: translate(-50%, -50%); }
    #gameScreen.tablet-portrait-layout .talon-area .talon-card { width: clamp(60px, 9vw, 75px); height: auto; }
    #gameScreen.tablet-portrait-layout .last-deal-area { position: absolute; z-index: 20; top: min(calc(var(--tablet-table-top) + 32%), calc(var(--tablet-hand-top) - 52px)); left: max(6%, 37px); }
    #gameScreen.tablet-portrait-layout .last-deal-area { --bell-size: clamp(58px, 8vw, 68px); }

    #gameScreen.tablet-portrait-layout .hand-region {
        position: absolute;
        z-index: 12;
        top: var(--tablet-hand-top);
        left: 50%;
        width: min(92vw, 770px);
        height: calc(var(--tablet-card-width) * 1.4);
        margin: 0;
        transform: translateX(-50%);
        overflow: visible;
    }
    #gameScreen.tablet-portrait-layout .hand-status { position: absolute; bottom: 0; width: 100%; margin: 0; font-size: 11px; }
    #gameScreen.tablet-portrait-layout .hand-region .my-hand { display: flex; justify-content: center; align-items: flex-start; width: 100%; height: 100%; overflow: visible; }
    #gameScreen.tablet-portrait-layout .hand-region .my-hand .playing-card { flex: 0 0 var(--tablet-card-width); width: var(--tablet-card-width); min-width: var(--tablet-card-width); height: auto; min-height: 0; margin: 0; }
    #gameScreen.tablet-portrait-layout .hand-region .my-hand .playing-card + .playing-card { margin-left: var(--tablet-card-overlap); }

    #gameScreen.tablet-portrait-layout .contract-choice-panel,
    #gameScreen.tablet-portrait-layout .result-box { position: absolute; z-index: 30; left: 50%; transform: translateX(-50%); }
    #gameScreen.tablet-portrait-layout .contract-choice-panel {
        /* Budget the chooser between the visible opponent panels and card tops.
           Compact its rows before changing any card or player geometry. */
        --tablet-bid-top: max(calc(var(--tablet-hand-top) - clamp(230px, calc(24dvh + 50px), 330px)), calc(var(--tablet-edge) + var(--tablet-top-height) + clamp(35px, 5dvh, 64px) + var(--tablet-opponent-width) * 829 / 1898 * .838 + 12px));
        --tablet-bid-padding: clamp(8px, 1.2dvh, 20px);
        top: var(--tablet-bid-top);
        display: flex;
        gap: 8px;
        width: min(264px, 84vw);
        padding: var(--tablet-bid-padding);
        box-shadow: 0 6px 12px rgba(0, 0, 0, .5);
    }
    #gameScreen.tablet-portrait-layout .contract-choice-panel.hidden { display: none; }
    #gameScreen.tablet-portrait-layout .contract-choice-panel .contract-choice-button {
        min-width: 104px;
        height: min(48px, calc((var(--tablet-hand-top) - var(--tablet-bid-top) - 12px - 2 * var(--tablet-bid-padding) - 24px - 2px) / 4));
        min-height: 32px;
        padding-block: 4px;
    }
    #gameScreen.tablet-portrait-layout .result-box { top: 37%; max-width: 72vw; max-height: 32dvh; overflow: auto; }

    #gameScreen.tablet-portrait-layout .mobile-game-action-bar { position: absolute; z-index: 40; inset: 0; display: block; width: 100%; height: 100%; pointer-events: none; }
    #gameScreen.tablet-portrait-layout .mobile-game-action-bar > button,
    #gameScreen.tablet-portrait-layout .mobile-game-reaction-slot {
        position: absolute;
        display: grid;
        place-items: center;
        width: var(--tablet-action-size);
        height: var(--tablet-action-size);
        min-width: 44px;
        min-height: 44px;
        padding: 0;
        border: 0;
        background: transparent;
        pointer-events: auto;
        opacity: 1;
        filter: none;
        border: 2px solid rgba(184, 109, 38, .72);
        border-radius: 12px;
        background: linear-gradient(145deg, rgba(47, 31, 20, .98), rgba(9, 8, 7, .98));
        box-shadow: inset 0 0 8px rgba(236, 147, 58, .2), 0 5px 10px rgba(0, 0, 0, .5);
    }
    #gameScreen.tablet-portrait-layout .mobile-game-action-bar > button img { width: 100%; height: 100%; object-fit: contain; }
    #gameScreen.tablet-portrait-layout #mobileGameChatButton { bottom: calc(clamp(105px, 11dvh, 132px) + var(--tablet-composition-lift) + var(--tablet-action-size) + 12px); left: var(--tablet-edge); }
    #gameScreen.tablet-portrait-layout #mobileGameResultsButton { bottom: calc(clamp(105px, 11dvh, 132px) + var(--tablet-composition-lift)); left: var(--tablet-edge); }
    #gameScreen.tablet-portrait-layout #mobileGameSoundButton { top: var(--tablet-edge); right: var(--tablet-edge); }
    #gameScreen.tablet-portrait-layout #mobileGameReactionSlot { right: var(--tablet-edge); bottom: calc(clamp(105px, 11dvh, 132px) + var(--tablet-composition-lift) + var(--tablet-action-size) + 12px); }
    #gameScreen.tablet-portrait-layout #mobileGameGiftButton { right: var(--tablet-edge); bottom: calc(clamp(105px, 11dvh, 132px) + var(--tablet-composition-lift)); }
    #gameScreen.tablet-portrait-layout #mobileGameGiftButton img { content: url("./assets/game-room/tablet-portrait/present.png"); }
    #gameScreen.tablet-portrait-layout #mobileGameChatButton img,
    #gameScreen.tablet-portrait-layout #mobileGameResultsButton img,
    #gameScreen.tablet-portrait-layout #mobileGameSoundButton img {
        width: 68%;
        height: 68%;
        filter: none;
    }
    #gameScreen.tablet-portrait-layout .mobile-game-reaction-slot .game-reaction-button { position: static; display: grid; width: 100%; height: 100%; min-width: 44px; min-height: 44px; padding: 0; border: 0; background: transparent; }
    #gameScreen.tablet-portrait-layout .mobile-game-reaction-slot .game-reaction-launcher-icon { width: 100%; height: 100%; object-fit: contain; }

    #gameScreen.tablet-portrait-layout .game-chat-panel,
    #gameScreen.tablet-portrait-layout .game-results-panel {
        position: absolute;
        z-index: 80;
        top: 50%;
        left: 50%;
        display: none;
        margin: 0;
        overflow: hidden;
        border: 0;
        background: transparent;
        transform: translate(-50%, -50%);
    }
    #gameScreen.tablet-portrait-layout .game-chat-panel { top: max(114px, calc(7dvh + 60px)); left: var(--tablet-edge); width: min(56vw, 285px); height: min(50.232dvh, 439.4px); aspect-ratio: auto; transform: none; filter: none; }
    #gameScreen.tablet-portrait-layout .game-results-panel { top: min(calc(100dvh - clamp(74px, 8.8dvh, 105px) - (var(--tablet-local-height) * .45)), calc(100dvh - 124px)); width: min(96vw, 553px); height: auto; aspect-ratio: 1904 / 826; }
    #gameScreen.tablet-portrait-layout .game-chat-panel,
    #gameScreen.tablet-portrait-layout .game-results-panel { overflow: visible; }
    #gameScreen.tablet-portrait-layout .game-chat-panel,
    #gameScreen.tablet-portrait-layout .game-results-panel { pointer-events: none; }
    #gameScreen.tablet-portrait-layout .game-chat-panel .chat-log,
    #gameScreen.tablet-portrait-layout .game-chat-panel .chat-composer,
    #gameScreen.tablet-portrait-layout .game-chat-panel #chatSendButton,
    #gameScreen.tablet-portrait-layout .game-chat-panel .mobile-game-surface-close,
    #gameScreen.tablet-portrait-layout .game-results-panel .score-panel-content,
    #gameScreen.tablet-portrait-layout .game-results-panel .mobile-game-surface-close { pointer-events: auto; }
    #gameScreen.tablet-portrait-layout .game-chat-panel.mobile-game-surface-open,
    #gameScreen.tablet-portrait-layout .game-results-panel.mobile-game-surface-open { display: block; }
    #gameScreen.tablet-portrait-layout .game-chat-panel .game-panel-art,
    #gameScreen.tablet-portrait-layout .game-results-panel .game-panel-art { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: fill; clip-path: none; mix-blend-mode: normal; }
    #gameScreen.tablet-portrait-layout .game-chat-panel .game-panel-art { content: url("./assets/game-room/tablet-portrait/chat-panel.png"); clip-path: inset(1.25% 1.4% 0 round 24px); }
    #gameScreen.tablet-portrait-layout .game-results-panel .game-panel-art { content: url("./assets/game-room/tablet-portrait/results-panel.png"); }
    #gameScreen.tablet-portrait-layout .game-panel-content { position: absolute; z-index: 2; inset: 0; }
    #gameScreen.tablet-portrait-layout .game-chat-panel .chat-panel-title { position: absolute; top: 2.2%; left: 12%; width: 76%; height: 6.4%; margin: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; white-space: nowrap; font-size: clamp(20px, 3vw, 25px); }
    #gameScreen.tablet-portrait-layout .game-chat-panel .chat-log { position: absolute; top: 10%; left: 7.6%; width: 84.3%; height: 78.7%; overflow: hidden; }
    #gameScreen.tablet-portrait-layout .game-chat-panel .chat-log::before { position: absolute; z-index: 2; top: 0; right: 0; left: 0; border-top: 1px solid rgba(224,170,91,.42); content: ""; pointer-events: none; }
    #gameScreen.tablet-portrait-layout .game-chat-panel .chat-messages { box-sizing: border-box; width: 100%; height: 100%; overflow-x: hidden; overflow-y: auto; padding: 2% 7% 2% 2%; overscroll-behavior: contain; }
    #gameScreen.tablet-portrait-layout .game-chat-panel .chat-message { border-bottom: 0; }
    #gameScreen.tablet-portrait-layout .game-chat-panel .chat-input { position: static; }
    #gameScreen.tablet-portrait-layout .game-chat-panel .chat-composer { position: absolute; z-index: 3; top: 90.4%; left: 7.6%; display: flex; align-items: center; box-sizing: border-box; width: 66.7%; height: 5.3%; padding: 0 2.5%; border: 0; outline: 0; background: transparent; color: #fff8e9; caret-color: #fff8e9; -webkit-text-fill-color: #fff8e9; font-size: clamp(14px, 2.2vw, 18px); line-height: 1.2; white-space: nowrap; overflow: hidden; opacity: 1; visibility: visible; }
    #gameScreen.tablet-portrait-layout .game-chat-panel .chat-composer::selection { color: #1a0e07; background: #f5c073; -webkit-text-fill-color: #1a0e07; }
    #gameScreen.tablet-portrait-layout .game-chat-panel #chatEmojiButton { display: none; }
    #gameScreen.tablet-portrait-layout .game-chat-panel #chatSendButton { display: block; position: absolute; z-index: 4; top: calc(93.1% - 22px); left: calc(84.4% - 22px); width: 44px; min-width: 44px; height: 44px; min-height: 44px; border: 0; background: transparent; color: transparent; }
    #gameScreen.tablet-portrait-layout .mobile-game-surface-close { display: grid; position: absolute; z-index: 5; top: -24px; right: 10px; place-items: center end; box-sizing: border-box; width: 44px; height: 44px; padding: 0 2px 0 0; border: 0; background: transparent; color: #ff4d4f; font-size: 34px; font-weight: 800; line-height: 1; text-shadow: 0 1px 2px rgba(32,0,0,.7); }
    #gameScreen.tablet-portrait-layout .game-results-panel::before { display: none; }
    #gameScreen.tablet-portrait-layout .game-results-panel .game-panel-content { inset: 0; margin: 0; }
    #gameScreen.tablet-portrait-layout .game-results-panel .panel-title { position: absolute; top: 7.5%; right: 4.2%; left: 4.2%; box-sizing: border-box; min-height: 0; height: 12.5%; margin: 0; border: 0; border-bottom: 2px solid rgba(216,145,62,.9); outline: 0; background-image: none; box-shadow: none; text-align: center; font-size: clamp(13px, 2vw, 17px); }
    #gameScreen.tablet-portrait-layout .game-results-panel .panel-title::before,
    #gameScreen.tablet-portrait-layout .game-results-panel .panel-title::after { display: none; content: none; }
    #gameScreen.tablet-portrait-layout .score-panel-content { position: absolute; top: 20%; right: 4.2%; bottom: 7.5%; left: 4.2%; height: auto; padding: 0; overflow: hidden; }
    #gameScreen.tablet-portrait-layout .game-results-table { display: none; }
    #gameScreen.tablet-portrait-layout .results-tablet-content {
        --tablet-results-grid: rgba(216,145,62,.72);
        --tablet-results-deal-column: clamp(46px, 8vw, 57px);
        --tablet-results-row-height: calc(100% / 9);
        display: grid;
        grid-template-rows: var(--tablet-results-row-height) minmax(0, 7fr) var(--tablet-results-row-height);
        width: 100%;
        height: 100%;
        overflow: hidden;
        border: 0;
        background: transparent;
        font-size: clamp(10px, 1.55vw, 13px);
    }
    #gameScreen.tablet-portrait-layout .results-tablet-header,
    #gameScreen.tablet-portrait-layout .results-tablet-row,
    #gameScreen.tablet-portrait-layout .results-tablet-total { display: grid; grid-template-columns: var(--tablet-results-deal-column) repeat(3, minmax(0, 1fr)); width: 100%; }
    #gameScreen.tablet-portrait-layout .results-tablet-header { box-sizing: border-box; border: 0; border-bottom: 2px solid rgba(216,145,62,.9); outline: 0; background: transparent; box-shadow: none; }
    #gameScreen.tablet-portrait-layout .results-tablet-header::before,
    #gameScreen.tablet-portrait-layout .results-tablet-header::after { display: none; content: none; }
    #gameScreen.tablet-portrait-layout .results-tablet-history-viewport { min-height: 0; overflow-x: hidden; overflow-y: auto; border: 0; outline: 0; background: transparent; box-shadow: none; overscroll-behavior: contain; scrollbar-gutter: stable; scrollbar-width: thin; touch-action: pan-y; }
    #gameScreen.tablet-portrait-layout .results-tablet-history-viewport::-webkit-scrollbar { width: 7px; }
    #gameScreen.tablet-portrait-layout .results-tablet-history-viewport::-webkit-scrollbar-thumb { border-radius: 999px; background: var(--tablet-results-grid); }
    #gameScreen.tablet-portrait-layout .results-tablet-history-viewport::-webkit-scrollbar-track { background: transparent; }
    #gameScreen.tablet-portrait-layout .results-tablet-history { display: grid; grid-auto-rows: calc((100% - 1px) / 7); align-content: start; width: 100%; height: 100%; min-height: 100%; border: 0; outline: 0; background: transparent; box-shadow: none; }
    #gameScreen.tablet-portrait-layout .results-tablet-history::before,
    #gameScreen.tablet-portrait-layout .results-tablet-history::after { display: none; content: none; }
    #gameScreen.tablet-portrait-layout .results-tablet-row { box-sizing: border-box; border: 0; border-bottom: 1px solid var(--tablet-results-grid); background: transparent; }
    #gameScreen.tablet-portrait-layout .results-tablet-row:first-child { border-top: 0; }
    #gameScreen.tablet-portrait-layout .results-tablet-cell { display: grid; place-items: center; min-width: 0; overflow: hidden; padding: 2px 5px; border: 0; border-left: 1px solid var(--tablet-results-grid); background: transparent; box-shadow: none; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
    #gameScreen.tablet-portrait-layout .results-tablet-deal-cell { border-left: 0; font-weight: 800; }
    #gameScreen.tablet-portrait-layout .results-tablet-total { border: 0; border-top: 2px solid var(--tablet-results-grid); font-weight: 800; }

    #gameScreen.tablet-portrait-layout .chat-emoji-picker { position: absolute; z-index: 90; right: 5%; bottom: 8%; max-width: min(90vw, 620px); max-height: 36dvh; overflow: auto; }
    #gameScreen.tablet-portrait-layout .game-reaction-picker { z-index: 90; max-width: min(88vw, 680px); max-height: 48dvh; overflow: auto; }
    #gameScreen.tablet-portrait-layout .game-reaction-display { width: clamp(90px, 14vw, 118px); height: clamp(90px, 14vw, 118px); }
}

/* Active game: canonical adaptive tablet-landscape composition. */
@media (min-width: 1024px) and (width < 1366px) and (min-height: 480px) and (orientation: landscape),
       (width: 1366px) and (min-height: 500px) and (height < 700px) and (orientation: landscape) {
    #gameScreen.tablet-landscape-layout {
        --tablet-land-edge: clamp(10px, 1.65vw, 24px);
        --tablet-land-action: clamp(55.2px, 6.325vw, 85.1px);
        --tablet-land-side-action: max(44px, calc(var(--tablet-land-action) * .72));
        --tablet-land-action-stack-gap: 3px;
        --tablet-land-results-width: clamp(264px, 23.2vw, 312px);
        --tablet-land-results-height: clamp(186px, 16.36vw, 220px);
        --tablet-land-opponent-width: clamp(300px, 35.04vw, 456px);
        --tablet-land-table-base-width: clamp(646px, 74.8vw, 1020px);
        --tablet-land-table-base-top: clamp(120px, 24.2dvh, 245px);
        --tablet-land-short-table-lift: clamp(0px, calc((650px - 100dvh) * .5), 85px);
        --tablet-land-table-top: calc(var(--tablet-land-table-base-top) + (var(--tablet-land-table-base-width) * 1302 / 1208 * .06) - var(--tablet-land-short-table-lift));
        --tablet-land-table-width: min(calc(var(--tablet-land-table-base-width) * .88), calc((100dvh - var(--tablet-land-table-top) - 16px) * 1208 / 1302));
        --tablet-land-trick-short-lift: clamp(0px, calc((550px - 100dvh) * .5375), 21.5px);
        --tablet-land-trick-card-width: min(clamp(63px, 6.669vw, 77.4px), calc(var(--tablet-land-table-width) * .112));
        --tablet-land-local-width: clamp(312px, 36.4vw, 480px);
        --tablet-land-card-width: clamp(73.08px, 9.009vw, 110.88px);
        --tablet-land-card-step: clamp(26.46px, 3.78vw, 46.62px);
        --tablet-land-card-overlap: calc(var(--tablet-land-card-step) - var(--tablet-land-card-width));
        --tablet-land-hand-lift: clamp(8px, calc(23.3dvh - 110.8px), 65px);
        position: fixed;
        z-index: 1;
        inset: 0;
        width: 100vw;
        height: 100vh;
        height: 100svh;
        height: 100dvh;
        min-height: 0;
        overflow: hidden;
        background: #120a05 url("./assets/game-room/tablet-landscape/background.png") center / cover no-repeat;
    }
    #gameScreen.tablet-landscape-layout.screen.active { position: fixed; inset: 0; margin: 0; }
    #gameScreen.tablet-landscape-layout .game-screen,
    #gameScreen.tablet-landscape-layout .game-table-area {
        position: relative;
        display: grid;
        width: 100%;
        height: 100%;
        min-width: 0;
        min-height: 0;
        margin: 0;
        padding: 0;
        overflow: hidden;
    }
    #gameScreen.tablet-landscape-layout .game-table-area {
        grid-template-columns: var(--tablet-land-edge) var(--tablet-land-opponent-width) minmax(0, 1fr) var(--tablet-land-opponent-width) var(--tablet-land-edge);
        grid-template-rows: var(--tablet-land-edge) clamp(50px, 7dvh, 58px) clamp(18px, 2.8dvh, 24px) calc(var(--tablet-land-opponent-width) * 829 / 1898) minmax(0, 1fr);
    }
    #gameScreen.tablet-landscape-layout .mobile-game-menu-button {
        position: absolute; z-index: 45; top: var(--tablet-land-edge); left: var(--tablet-land-edge);
        display: grid; place-items: center; width: var(--tablet-land-action); height: var(--tablet-land-action);
        min-width: 44px; min-height: 44px; padding: 0; border: 0; background: transparent;
    }
    #gameScreen.tablet-landscape-layout .mobile-game-menu-button img { width: 100%; height: 100%; object-fit: contain; }
    #gameScreen.tablet-landscape-layout .game-top {
        position: absolute; z-index: 28; top: clamp(12px, 1.7dvh, 15px); left: 25.1%;
        width: 53.4%; height: clamp(48px, 6.5dvh, 55px); min-height: 0; padding: 0;
        right: auto; bottom: auto; transform: none;
        background-color: transparent;
        background-image: url("./assets/game-room/tablet-landscape/room-info-panel.png");
        background-position: center;
        background-size: 105.068% 287.121%;
        background-repeat: no-repeat;
        opacity: 1;
        filter: none;
    }
    #gameScreen.tablet-landscape-layout .game-top-art,
    #gameScreen.tablet-landscape-layout .game-room-statuses { display: none; }
    #gameScreen.tablet-landscape-layout .game-top-content { position: absolute; inset: 17% 5.5%; display: block; padding: 0; }
    #gameScreen.tablet-landscape-layout .game-room-info { display: grid; grid-template-columns: .9fr 2.1fr .85fr .65fr; align-items: center; width: 100%; height: 100%; margin: 0; gap: 1%; }
    #gameScreen.tablet-landscape-layout .game-room-info-item { display: flex; align-items: baseline; justify-content: center; gap: 3px; min-width: 0; color: #f5eee6; font-size: clamp(9.6px, 1.16vw, 13.6px); line-height: 1; white-space: nowrap; }
    #gameScreen.tablet-landscape-layout .game-room-info-item dt { color: inherit; }
    #gameScreen.tablet-landscape-layout .game-room-info-item dd { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
    #gameScreen.tablet-landscape-layout .game-room-mode { min-width: 0; }

    #gameScreen.tablet-landscape-layout .player-badge {
        position: relative; z-index: 20; grid-row: 4; width: var(--tablet-land-opponent-width); height: auto;
        aspect-ratio: 1898 / 829; margin: 0; padding: 0; transform: none; border: 0; background: transparent; filter: none;
    }
    #gameScreen.tablet-landscape-layout .player-badge:not(.player-local) { transition: none; pointer-events: none; }
    /* Transparent panel margins may extend over a ten-card hand. */
    #gameScreen.tablet-landscape-layout .player-badge:not(.player-local) .player-panel-content,
    #gameScreen.tablet-landscape-layout .player-badge:not(.player-local) .player-avatar { pointer-events: auto; }
    #gameScreen.tablet-landscape-layout .player-badge.player-opponent-left { grid-column: 2; top: auto; right: auto; bottom: auto; left: auto; }
    #gameScreen.tablet-landscape-layout .player-badge.player-opponent-right { grid-column: 4; top: auto; right: auto; bottom: auto; left: auto; }
    #gameScreen.tablet-landscape-layout .player-panel-art-local,
    #gameScreen.tablet-landscape-layout .player-panel-opponent-body { display: none; }
    #gameScreen.tablet-landscape-layout .player-panel-opponent-portrait { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: fill; clip-path: inset(16.2% 2.3% round 4%); content: url("./assets/game-room/tablet-landscape/opponent-panel.png"); }
    #gameScreen.tablet-landscape-layout .player-badge:not(.player-local) .player-avatar { position: absolute; z-index: 3; top: 19%; left: 5.25%; width: 25.6%; height: auto; aspect-ratio: 1; overflow: hidden; border: 0; border-radius: 50%; background: #120d08; transform: none; }
    #gameScreen.tablet-landscape-layout .player-avatar .avatar-image,
    #gameScreen.tablet-landscape-layout .player-avatar .avatar-fallback { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
    #gameScreen.tablet-landscape-layout .player-panel-content { position: absolute; z-index: 4; top: 18%; right: 2.5%; bottom: 15%; left: 31.5%; display: grid; grid-template: repeat(4, minmax(0, 1fr)) / minmax(0, 1fr) 52.8px; align-items: center; gap: 0 3%; }
    #gameScreen.tablet-landscape-layout .player-badge .name { grid-row: 1; grid-column: 1; min-width: 0; overflow: hidden; color: #fff; font-size: clamp(13.2px, 1.5vw, 18px); line-height: 1; text-overflow: ellipsis; white-space: nowrap; }
    #gameScreen.tablet-landscape-layout .player-badge:not(.player-local) .name { width: 100%; justify-self: stretch; text-align: left; }
    #gameScreen.tablet-landscape-layout .player-stat-row { grid-column: 1; display: flex; align-items: center; gap: 6px; min-width: 0; color: #f3b70b; font-size: clamp(14.4px, 1.74vw, 19.2px); line-height: 1; }
    #gameScreen.tablet-landscape-layout .player-coin-row { grid-row: 2; }
    #gameScreen.tablet-landscape-layout .player-points-row { grid-row: 3; }
    #gameScreen.tablet-landscape-layout .player-stat-row img { width: clamp(18px, 2.16vw, 24px); height: auto; }
    #gameScreen.tablet-landscape-layout .player-coin-row img { content: url("./assets/game-room/tablet-landscape/coin.png"); }
    #gameScreen.tablet-landscape-layout .player-points-row img { content: url("./assets/game-room/tablet-landscape/points.png"); }
    #gameScreen.tablet-landscape-layout .player-stat-label { display: none; }
    #gameScreen.tablet-landscape-layout .player-presence { grid-row: 4; grid-column: 1; display: none; align-items: center; min-width: 0; overflow: hidden; color: #e7d9c9; font-size: clamp(10.5px, 1.18vw, 13.5px); line-height: 1; text-overflow: ellipsis; white-space: nowrap; }
    #gameScreen.tablet-landscape-layout .player-status-label .player-presence { display: flex; }
    #gameScreen.tablet-landscape-layout .player-badge:not(.player-local) .player-presence { transform: translateY(-1px); }
    #gameScreen.tablet-landscape-layout .player-presence img { flex: 0 0 auto; width: clamp(15px, 1.65vw, 20px); height: auto; margin-right: 5px; content: url("./assets/game-room/tablet-landscape/level.png"); }
    #gameScreen.tablet-landscape-layout .player-utility-row { grid-row: 1 / 5; grid-column: 2; display: flex; flex-direction: column-reverse; justify-content: space-around; align-items: center; width: 52.8px; height: 100%; }
    #gameScreen.tablet-landscape-layout .player-badge:not(.player-local) .player-utility-row { transform: translateX(-4px); }
    #gameScreen.tablet-landscape-layout .player-control-button { display: grid; place-items: center; width: 52.8px; height: 52.8px; min-width: 52.8px; min-height: 52.8px; margin: -10.8px 0; padding: 10.8px; border: 0; background: transparent; }
    #gameScreen.tablet-landscape-layout .player-badge:not(.player-local) .player-profile-button { transform: translateY(-3px); }
    #gameScreen.tablet-landscape-layout .player-badge:not(.player-local) .player-block-control { display: none; width: 0; height: 0; min-width: 0; min-height: 0; margin: 0; padding: 0; pointer-events: none; }
    #gameScreen.tablet-landscape-layout .player-control-button img { width: 100%; height: 100%; object-fit: contain; }
    #gameScreen.tablet-landscape-layout .player-info-icon { content: url("./assets/game-room/tablet-landscape/info.png"); }
    #gameScreen.tablet-landscape-layout .player-gift-icon { content: url("./assets/game-room/tablet-landscape/present.png"); }

    #gameScreen.tablet-landscape-layout .player-badge.player-local {
        position: fixed; z-index: 24; top: auto; right: auto; bottom: 0; left: 50%;
        box-sizing: border-box; width: var(--tablet-land-local-width); min-width: 0; max-width: none;
        height: calc(var(--tablet-land-local-width) * 829 / 1898); min-height: 0; max-height: calc(var(--tablet-land-local-width) * 829 / 1898);
        margin: 0; padding: 0; aspect-ratio: 1898 / 829; transform: translateX(-50%);
    }
    #gameScreen.tablet-landscape-layout .player-badge.player-local::before { display: none; }
    #gameScreen.tablet-landscape-layout .player-local .player-panel-opponent-portrait { display: none; }
    #gameScreen.tablet-landscape-layout .player-local .player-panel-art-local { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: fill; clip-path: inset(16.2% 2.3% round 4%); content: url("./assets/game-room/tablet-landscape/local-player-panel.png"); }
    #gameScreen.tablet-landscape-layout .player-local .player-avatar { position: absolute; z-index: 3; top: 19%; left: 5.25%; width: 25.6%; height: auto; aspect-ratio: 1; overflow: hidden; border: 0; border-radius: 50%; background: #120d08; transform: none; }
    #gameScreen.tablet-landscape-layout .player-local .player-avatar i { right: 1%; bottom: 7%; width: 20%; min-width: 8px; }
    #gameScreen.tablet-landscape-layout .player-local .player-panel-content { top: 17%; right: 12%; bottom: 16%; left: 38.5%; grid-template: repeat(4, minmax(0, 1fr)) / minmax(0, 1fr); }
    #gameScreen.tablet-landscape-layout .player-local .name { grid-row: 1; }
    #gameScreen.tablet-landscape-layout .player-local .player-coin-row { grid-row: 2; }
    #gameScreen.tablet-landscape-layout .player-local .player-points-row { grid-row: 3; }
    #gameScreen.tablet-landscape-layout .player-local .name { font-size: clamp(13px, 1.5vw, 18px); }
    #gameScreen.tablet-landscape-layout .player-local .player-stat-row { font-size: clamp(14px, 1.7vw, 19.2px); }
    #gameScreen.tablet-landscape-layout .player-local .player-presence { position: static; width: 100%; }
    #gameScreen.tablet-landscape-layout .player-local .player-utility-row { display: none; }
    #gameScreen.tablet-landscape-layout .player-badge.player-active::after { content: ""; position: absolute; z-index: 8; inset: 5%; border: clamp(2px, .3vw, 4px) solid #ffb22d; border-radius: 18px; box-shadow: 0 0 12px rgba(255,178,45,.85); pointer-events: none; }
    #gameScreen.tablet-landscape-layout .player-badge:not(.player-local).player-active { filter: none !important; }
    #gameScreen.tablet-landscape-layout .player-badge:not(.player-local).player-active::after { top: 16.4%; right: 2.3%; bottom: 16.2%; left: 2.3%; border-width: 2px; border-radius: 8px; box-shadow: 0 0 9px rgba(255,186,42,.75); }
    #gameScreen.tablet-landscape-layout .player-badge.player-local.player-active::after { top: calc(17.1% - 2px); right: calc(2.3% - 1px); bottom: 16.18%; left: calc(2.3% - 1px); }
    #gameScreen.tablet-landscape-layout .player-turn-indicator { display: none; }
    #gameScreen.tablet-landscape-layout .player-role-label { z-index: 27; width: auto; max-width: 25vw; font-size: clamp(13.2px, 1.56vw, 18px); }
    #gameScreen.tablet-landscape-layout .player-role-opponent-left,
    #gameScreen.tablet-landscape-layout .player-role-opponent-right {
        top: calc(var(--tablet-land-edge) + clamp(50px, 7dvh, 58px) + clamp(18px, 2.8dvh, 24px) + (var(--tablet-land-opponent-width) * 829 / 1898) + 2px);
    }
    #gameScreen.tablet-landscape-layout .player-role-opponent-left {
        translate: var(--tablet-land-role-control-shift, 0px) 0;
        right: auto;
        left: calc(var(--tablet-land-edge) + var(--tablet-land-opponent-width) / 2);
        transform: translateX(-50%);
    }
    #gameScreen.tablet-landscape-layout .player-role-opponent-right {
        right: calc(var(--tablet-land-edge) + var(--tablet-land-opponent-width) / 2);
        left: auto;
        transform: translateX(50%);
    }
    #gameScreen.tablet-landscape-layout .player-role-local {
        top: calc(100dvh - ((var(--tablet-land-local-width) * 829 / 1898) * .162) + 4px);
        right: auto;
        bottom: auto;
        left: 50%;
        width: min(34vw, 350px);
        transform: translateX(-50%);
    }

    #gameScreen.tablet-landscape-layout .game-table-art { position: absolute; z-index: 3; top: var(--tablet-land-table-top); left: 50%; display: block; width: var(--tablet-land-table-width); height: auto; max-height: none; aspect-ratio: 1208 / 1302; object-fit: contain; clip-path: none; mix-blend-mode: normal; transform: translateX(-50%); content: url("./assets/game-room/tablet-landscape/table.png"); }
    #gameScreen.tablet-landscape-layout .current-trick { position: absolute; z-index: 11; top: calc(var(--tablet-land-table-top) - 8% - var(--tablet-land-trick-short-lift)); left: calc(50% + (var(--tablet-land-trick-card-width) * .1)); width: 29%; height: 17%; transform: translate(-50%, calc(95px + (var(--tablet-land-trick-card-width) * .286))); }
    #gameScreen.tablet-landscape-layout .current-trick .playing-card { width: var(--tablet-land-trick-card-width); height: auto; scale: 1.2; }
    #gameScreen.tablet-landscape-layout .current-trick .trick-card-left { z-index: 1; transform: translate(-130%, -10%) rotate(-8deg); }
    #gameScreen.tablet-landscape-layout .current-trick .trick-card-local { z-index: 2; transform: translate(-50%, 12%); }
    #gameScreen.tablet-landscape-layout .current-trick .trick-card-right { z-index: 1; transform: translate(30%, -10%) rotate(8deg); }
    #gameScreen.tablet-landscape-layout .talon-area { position: absolute; z-index: 12; top: calc(var(--tablet-land-table-top) + (var(--tablet-land-table-width) * 1302 / 1208 * .26) + 20px); right: auto; left: calc(50% + (var(--tablet-land-table-width) * .37) - 20px); transform: translate(-50%, -50%); }
    #gameScreen.tablet-landscape-layout .talon-area .talon-card { width: min(clamp(57px, 6.1vw, 70px), calc(var(--tablet-land-table-width) * .105)); height: auto; }
    #gameScreen.tablet-landscape-layout .last-deal-area { position: absolute; z-index: 20; top: calc(var(--tablet-land-table-top) + 24%); left: 10%; }
    #gameScreen.tablet-landscape-layout .last-deal-area { --bell-size: clamp(50px, 5.5vw, 62px); }
    #gameScreen.tablet-landscape-layout .hand-region { position: absolute; z-index: 16; top: calc(100dvh - (var(--tablet-land-local-width) * 829 / 1898) - (var(--tablet-land-card-width) * .855)); left: 50%; display: flex; align-items: flex-start; justify-content: center; width: min(72vw, 850px); height: calc(var(--tablet-land-card-width) * 1.4); transform: translateX(-50%); overflow: visible; }
    #gameScreen.tablet-landscape-layout .hand-status { position: absolute; bottom: 0; width: 100%; margin: 0; font-size: 11px; }
    #gameScreen.tablet-landscape-layout .hand-region .my-hand { display: flex; justify-content: center; align-items: flex-start; width: 100%; height: 100%; overflow: visible; }
    #gameScreen.tablet-landscape-layout .hand-region .my-hand .playing-card { flex: 0 0 var(--tablet-land-card-width); width: var(--tablet-land-card-width); min-width: var(--tablet-land-card-width); height: auto; min-height: 0; margin: 0; }
    #gameScreen.tablet-landscape-layout .hand-region .my-hand .playing-card + .playing-card { margin-left: var(--tablet-land-card-overlap); }
    #gameScreen.tablet-landscape-layout .contract-choice-panel,
    #gameScreen.tablet-landscape-layout .result-box { position: absolute; z-index: 34; left: 50%; transform: translateX(-50%); }
    #gameScreen.tablet-landscape-layout .contract-choice-panel { top: clamp(76px, calc(18dvh - 6px), 178px); display: flex; width: clamp(170.4px, 18vw, 216px); padding: clamp(4px, .7dvh, 8px); flex-direction: column; gap: clamp(4px, .7dvh, 8px); }
    #gameScreen.tablet-landscape-layout .contract-choice-panel.hidden { display: none; }
    #gameScreen.tablet-landscape-layout .contract-choice-panel .contract-choice-button { box-sizing: border-box; width: 100%; min-width: 0; height: clamp(38px, 6dvh, 52px); min-height: 0; padding-block: 4px; }
    #gameScreen.tablet-landscape-layout .result-box { top: 35%; max-width: 68vw; max-height: 30dvh; overflow: auto; }

    #gameScreen.tablet-landscape-layout .mobile-game-action-bar { position: absolute; z-index: 44; inset: 0; display: block; width: 100%; height: 100%; pointer-events: none; }
    #gameScreen.tablet-landscape-layout .mobile-game-action-bar > button,
    #gameScreen.tablet-landscape-layout .mobile-game-reaction-slot { position: absolute; display: grid; place-items: center; width: var(--tablet-land-action); height: var(--tablet-land-action); min-width: 44px; min-height: 44px; padding: 0; border: 0; background: transparent; pointer-events: auto; transform: none; }
    #gameScreen.tablet-landscape-layout .mobile-game-action-bar > button img { width: 100%; height: 100%; object-fit: contain; }
    #gameScreen.tablet-landscape-layout #mobileGameChatButton { left: calc(50% - (var(--tablet-land-local-width) / 2) - var(--tablet-land-action) - 10px); bottom: calc(((var(--tablet-land-local-width) * 829 / 1898) - var(--tablet-land-action)) / 2); }
    #gameScreen.tablet-landscape-layout #mobileGameResultsButton { display: none !important; pointer-events: none; }
    #gameScreen.tablet-landscape-layout #mobileGameSoundButton { top: var(--tablet-land-edge); right: var(--tablet-land-edge); bottom: auto; }
    #gameScreen.tablet-landscape-layout #mobileGameReactionSlot { right: auto; left: calc(50% + (var(--tablet-land-local-width) / 2) + 1px); bottom: calc(((var(--tablet-land-local-width) * 829 / 1898) - (var(--tablet-land-side-action) * 2 + var(--tablet-land-action-stack-gap))) / 2 + var(--tablet-land-side-action) + var(--tablet-land-action-stack-gap)); width: var(--tablet-land-side-action); height: var(--tablet-land-side-action); }
    #gameScreen.tablet-landscape-layout #mobileGameGiftButton { right: auto; left: calc(50% + (var(--tablet-land-local-width) / 2) + 1px); bottom: calc(((var(--tablet-land-local-width) * 829 / 1898) - (var(--tablet-land-side-action) * 2 + var(--tablet-land-action-stack-gap))) / 2); width: var(--tablet-land-side-action); height: var(--tablet-land-side-action); }
    #gameScreen.tablet-landscape-layout #mobileGameChatButton img { content: url("./assets/game-room/tablet-landscape/chat.png?v=bc58ab3d"); }
    #gameScreen.tablet-landscape-layout #mobileGameSoundButton img { content: url("./assets/game-room/tablet-landscape/sound.png?v=4bdf25f8"); }
    #gameScreen.tablet-landscape-layout #mobileGameGiftButton img { content: url("./assets/game-room/tablet-landscape/present.png"); }
    #gameScreen.tablet-landscape-layout #mobileGameChatButton,
    #gameScreen.tablet-landscape-layout #mobileGameGiftButton,
    #gameScreen.tablet-landscape-layout .mobile-game-reaction-slot .game-reaction-button { box-sizing: border-box; }
    #gameScreen.tablet-landscape-layout #mobileGameChatButton { padding: calc(var(--tablet-land-action) * .1); }
    #gameScreen.tablet-landscape-layout #mobileGameGiftButton,
    #gameScreen.tablet-landscape-layout .mobile-game-reaction-slot .game-reaction-button { padding: 0; }
    #gameScreen.tablet-landscape-layout .mobile-game-reaction-slot .game-reaction-button { position: static; display: grid; width: 100%; height: 100%; min-width: 44px; min-height: 44px; border: 0; outline: 0; background: transparent; box-shadow: none; filter: none; backdrop-filter: none; }
    #gameScreen.tablet-landscape-layout .mobile-game-reaction-slot .game-reaction-button::before,
    #gameScreen.tablet-landscape-layout .mobile-game-reaction-slot .game-reaction-button::after { display: none; content: none; }
    #gameScreen.tablet-landscape-layout .mobile-game-reaction-slot .game-reaction-launcher-icon { width: 100%; height: 100%; object-fit: contain; }

    #gameScreen.tablet-landscape-layout .game-chat-panel { position: fixed; z-index: 80; top: 50%; left: 50%; display: none; margin: 0; transform: translate(-50%, -50%); overflow: visible; }
    #gameScreen.tablet-landscape-layout .game-results-panel { position: fixed; z-index: 42; top: min(calc(min(calc(50dvh - (var(--tablet-land-results-height) / 2) + 150px), calc(100dvh - var(--tablet-land-results-height) - var(--tablet-land-edge))) + 87px), calc(100dvh - var(--tablet-land-results-height))); right: var(--tablet-land-edge); left: auto; display: block; width: var(--tablet-land-results-width); height: var(--tablet-land-results-height); margin: 0; aspect-ratio: auto; transform: none; overflow: visible; }
    #gameScreen.tablet-landscape-layout .game-chat-panel,
    #gameScreen.tablet-landscape-layout .game-results-panel { pointer-events: none; }
    #gameScreen.tablet-landscape-layout .game-chat-panel .chat-log,
    #gameScreen.tablet-landscape-layout .game-chat-panel .chat-composer,
    #gameScreen.tablet-landscape-layout .game-chat-panel #chatSendButton,
    #gameScreen.tablet-landscape-layout .game-chat-panel .mobile-game-surface-close,
    #gameScreen.tablet-landscape-layout .game-results-panel .score-panel-content { pointer-events: auto; }
    #gameScreen.tablet-landscape-layout .game-results-panel .mobile-game-surface-close { display: none; pointer-events: none; }
    #gameScreen.tablet-landscape-layout .game-chat-panel { top: min(max(114px, calc(7dvh + 60px)), calc(100dvh - min(50.232dvh, 439.4px))); left: var(--tablet-land-edge); width: min(28vw, 285px); height: min(50.232dvh, 439.4px); aspect-ratio: auto; transform: none; filter: none; }
    #gameScreen.tablet-landscape-layout .game-chat-panel.mobile-game-surface-open { display: block; }
    #gameScreen.tablet-landscape-layout .game-chat-panel .game-panel-art,
    #gameScreen.tablet-landscape-layout .game-results-panel .game-panel-art { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: fill; clip-path: none; mix-blend-mode: normal; }
    #gameScreen.tablet-landscape-layout .game-chat-panel .game-panel-art { content: url("./assets/game-room/tablet-landscape/chat-panel.png"); clip-path: inset(1.25% 1.4% 0 round 24px); }
    #gameScreen.tablet-landscape-layout .game-results-panel .game-panel-art { content: url("./assets/game-room/tablet-landscape/results-panel.png"); }
    #gameScreen.tablet-landscape-layout .game-panel-content { position: absolute; z-index: 2; inset: 0; }
    #gameScreen.tablet-landscape-layout .game-chat-panel .chat-panel-title { position: absolute; top: 2.2%; left: 12%; width: 76%; height: 6.4%; margin: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; white-space: nowrap; font-size: clamp(19px, 2.1vw, 25px); }
    #gameScreen.tablet-landscape-layout .game-chat-panel .chat-log { position: absolute; top: 10%; left: 7.6%; width: 84.3%; height: 78.7%; overflow: hidden; }
    #gameScreen.tablet-landscape-layout .game-chat-panel .chat-log::before { position: absolute; z-index: 2; top: 0; right: 0; left: 0; border-top: 1px solid rgba(224,170,91,.42); content: ""; pointer-events: none; }
    #gameScreen.tablet-landscape-layout .game-chat-panel .chat-messages { box-sizing: border-box; width: 100%; height: 100%; overflow-x: hidden; overflow-y: auto; padding: 2% 7% 2% 2%; overscroll-behavior: contain; }
    #gameScreen.tablet-landscape-layout .game-chat-panel .chat-message { border-bottom: 0; }
    #gameScreen.tablet-landscape-layout .game-chat-panel .chat-input { position: static; }
    #gameScreen.tablet-landscape-layout .game-chat-panel .chat-composer { position: absolute; z-index: 3; top: 90.4%; left: 7.6%; display: flex; align-items: center; box-sizing: border-box; width: 66.7%; height: 5.3%; padding: 0 2.5%; border: 0; outline: 0; background: transparent; color: #fff8e9; caret-color: #fff8e9; -webkit-text-fill-color: #fff8e9; font-size: clamp(13px, 1.45vw, 17px); line-height: 1.2; white-space: nowrap; overflow: hidden; opacity: 1; visibility: visible; }
    #gameScreen.tablet-landscape-layout .game-chat-panel .chat-composer::selection { color: #1a0e07; background: #f5c073; -webkit-text-fill-color: #1a0e07; }
    #gameScreen.tablet-landscape-layout .game-chat-panel #chatEmojiButton { display: none; }
    #gameScreen.tablet-landscape-layout .game-chat-panel #chatSendButton { display: block; position: absolute; z-index: 4; top: calc(93.1% - 22px); left: calc(84.4% - 22px); width: 44px; min-width: 44px; height: 44px; min-height: 44px; border: 0; background: transparent; color: transparent; }
    #gameScreen.tablet-landscape-layout .mobile-game-surface-close { display: grid; position: absolute; z-index: 5; top: -24px; right: 10px; place-items: center end; box-sizing: border-box; width: 44px; height: 44px; padding: 0 2px 0 0; border: 0; background: transparent; color: #ff4d4f; font-size: 33px; font-weight: 800; line-height: 1; text-shadow: 0 1px 2px rgba(32,0,0,.7); }
    #gameScreen.tablet-landscape-layout .game-results-panel::before { display: none; }
    #gameScreen.tablet-landscape-layout .game-results-panel .game-panel-content { inset: 0; margin: 0; }
    #gameScreen.tablet-landscape-layout .game-results-panel .panel-title { position: absolute; top: 7.5%; right: 4.2%; left: 4.2%; box-sizing: border-box; min-height: 0; height: 12.5%; margin: 0; border: 0; border-bottom: 2px solid rgba(216,145,62,.9); outline: 0; background-image: none; box-shadow: none; text-align: center; font-size: clamp(13px, 1.45vw, 17px); }
    #gameScreen.tablet-landscape-layout .game-results-panel .panel-title::before,
    #gameScreen.tablet-landscape-layout .game-results-panel .panel-title::after { display: none; content: none; }
    #gameScreen.tablet-landscape-layout .score-panel-content { position: absolute; top: 20%; right: 4.2%; bottom: 7.5%; left: 4.2%; height: auto; padding: 0; overflow: hidden; }
    #gameScreen.tablet-landscape-layout .game-results-table { display: none; }
    #gameScreen.tablet-landscape-layout .results-tablet-content {
        --tablet-results-grid: rgba(216,145,62,.72);
        --tablet-results-deal-column: clamp(46px, 5.2vw, 57px);
        --tablet-results-columns: var(--tablet-results-deal-column) repeat(3, minmax(0, 1fr));
        --tablet-results-row-height: calc(100% / 7);
        display: grid;
        grid-template-rows: var(--tablet-results-row-height) minmax(0, 5fr) var(--tablet-results-row-height);
        width: 100%;
        height: 100%;
        overflow: hidden;
        border: 0;
        background: transparent;
        font-size: clamp(10px, 1.15vw, 13px);
    }
    #gameScreen.tablet-landscape-layout .results-tablet-header,
    #gameScreen.tablet-landscape-layout .results-tablet-row,
    #gameScreen.tablet-landscape-layout .results-tablet-total { box-sizing: border-box; display: grid; grid-template-columns: var(--tablet-results-columns); justify-content: stretch; width: 100%; margin: 0; padding: 0; transform: none; }
    #gameScreen.tablet-landscape-layout .results-tablet-header { border: 0; border-bottom: 2px solid rgba(216,145,62,.9); outline: 0; background: transparent; box-shadow: none; }
    #gameScreen.tablet-landscape-layout .results-tablet-header::before,
    #gameScreen.tablet-landscape-layout .results-tablet-header::after { display: none; content: none; }
    #gameScreen.tablet-landscape-layout .results-tablet-history-viewport { min-height: 0; overflow-x: hidden; overflow-y: auto; border: 0; outline: 0; background: transparent; box-shadow: none; overscroll-behavior: contain; scrollbar-gutter: stable; scrollbar-width: thin; touch-action: pan-y; }
    #gameScreen.tablet-landscape-layout .results-tablet-history-viewport::-webkit-scrollbar { width: 7px; }
    #gameScreen.tablet-landscape-layout .results-tablet-history-viewport::-webkit-scrollbar-thumb { border-radius: 999px; background: var(--tablet-results-grid); }
    #gameScreen.tablet-landscape-layout .results-tablet-history-viewport::-webkit-scrollbar-track { background: transparent; }
    #gameScreen.tablet-landscape-layout .results-tablet-history { display: grid; grid-auto-rows: calc((100% - 1px) / 5); align-content: start; width: 100%; height: 100%; min-height: 100%; border: 0; outline: 0; background: transparent; box-shadow: none; }
    #gameScreen.tablet-landscape-layout .results-tablet-history::before,
    #gameScreen.tablet-landscape-layout .results-tablet-history::after { display: none; content: none; }
    #gameScreen.tablet-landscape-layout .results-tablet-row { box-sizing: border-box; border: 0; border-bottom: 1px solid var(--tablet-results-grid); background: transparent; }
    #gameScreen.tablet-landscape-layout .results-tablet-row:first-child { border-top: 0; }
    #gameScreen.tablet-landscape-layout .results-tablet-cell { display: grid; place-items: center; min-width: 0; overflow: hidden; padding: 2px 5px; border: 0; border-left: 1px solid var(--tablet-results-grid); background: transparent; box-shadow: none; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
    #gameScreen.tablet-landscape-layout .results-tablet-deal-cell { border-left: 0; font-weight: 800; }
    #gameScreen.tablet-landscape-layout .results-tablet-total { border: 0; border-top: 2px solid var(--tablet-results-grid); font-weight: 800; }
    #gameScreen.tablet-landscape-layout .chat-emoji-picker { position: fixed; z-index: 90; max-width: min(54vw, 620px); max-height: 48dvh; overflow: auto; }
    #gameScreen.tablet-landscape-layout .game-reaction-picker { z-index: 90; max-width: min(60vw, 680px); max-height: 58dvh; overflow: auto; }
    #gameScreen.tablet-landscape-layout .game-reaction-display { width: clamp(78px, 8.5vw, 98px); height: clamp(78px, 8.5vw, 98px); }
}

/* Compensate for the shared >=1100px playable-card lift so visual panel coverage stays constant. */
@media (min-width: 1100px) and (width < 1366px) and (min-height: 480px) and (orientation: landscape),
       (width: 1366px) and (min-height: 500px) and (height < 700px) and (orientation: landscape) {
    #gameScreen.tablet-landscape-layout .hand-region { top: calc(100dvh - (var(--tablet-land-local-width) * 829 / 1898) - (var(--tablet-land-card-width) * .855) + 9px); }
}

@media (min-width: 510px) and (width < 545px) and (min-height: 900px) {
    #gameScreen.tablet-portrait-layout {
        --tablet-hand-lift: 20px;
    }
}

/* Visual clearance within the existing authorities. These bounds converge to
   the reference composition as vertical space becomes available. */
@media (min-width: 360px) and (width < 510px) and (orientation: portrait) {
    #gameScreen.phone-portrait-layout {
        --phone-cramped: clamp(0px, calc(640px - 100dvh), 280px);
        --phone-compact-controls: clamp(0, calc((800px - 100dvh) / 120px), 1);
        --phone-felt-width: min(96vw, calc(var(--phone-table-height) * 1208 / 1302));
        --phone-felt-height: calc(var(--phone-felt-width) * 1302 / 1208);
        --phone-felt-top: calc(var(--phone-top-height) + var(--phone-opponents-height));
        --phone-top-height: calc(clamp(52px, 6.25dvh, 58px) - var(--phone-cramped) * .078);
        --phone-opponents-height: calc(max(145px, calc(var(--phone-opponents-height-base) - var(--phone-short-height-pressure) * .21)) - var(--phone-cramped) * .18);
        --phone-table-height: calc(max(181px, calc(var(--phone-table-height-base) - var(--phone-short-height-pressure) * .25)) - var(--phone-cramped) * .44);
        --phone-hand-height: calc(max(73px, calc(var(--phone-hand-height-base) - var(--phone-short-height-pressure) * .152)) - var(--phone-cramped) * .11);
        --phone-local-height: calc(max(92px, calc(var(--phone-local-height-base) - var(--phone-short-height-pressure) * .074)) - var(--phone-cramped) * .11);
        --phone-hand-card-width: min(max(50px, calc(var(--phone-hand-card-width-base) - var(--phone-short-height-pressure) * .13)), calc(var(--phone-hand-height) / 1.4));
        --phone-gap: clamp(2px, calc(.9dvh - var(--phone-cramped) * .005), 8px);
        --phone-opponent-content-y: clamp(0px, calc((var(--phone-opponents-height) - 145px) * .52), 23px);
    }
    #gameScreen.phone-portrait-layout .player-badge:not(.player-local) .player-panel-content {
        grid-template-rows: repeat(3, minmax(0, 1fr));
        bottom: 14%;
    }
    #gameScreen.phone-portrait-layout .player-badge:not(.player-local) .player-stat-row { min-height: 0; }
    #gameScreen.phone-portrait-layout .player-local .player-panel-content { grid-template-rows: repeat(4, minmax(0, 1fr)); row-gap: 0; bottom: 16%; }
    #gameScreen.phone-portrait-layout .player-local .player-stat-row,
    #gameScreen.phone-portrait-layout .player-local .player-presence { min-height: 0; }
    #gameScreen.phone-portrait-layout .last-deal-status { left: 0; width: max-content; max-width: min(88px, 18vw); transform: none; white-space: normal; }
    #gameScreen.phone-portrait-layout .hand-region .my-hand .playing-card + .playing-card { margin-left: max(var(--phone-hand-overlap), calc(var(--phone-hand-card-width) * -.5)); }
    #gameScreen.phone-portrait-layout .contract-choice-panel {
        --phone-bid-padding: clamp(2px, calc(12px - var(--phone-cramped) * .06), 12px);
        --phone-bid-gap: clamp(2px, calc(10px - var(--phone-cramped) * .05), 10px);
        --phone-bid-rows: 4;
        /* Fit padding, borders and controls between roles and selected cards. */
        transform: none;
        padding: var(--phone-bid-padding);
        gap: var(--phone-bid-gap);
    }
    #gameScreen.phone-portrait-layout .contract-choice-panel .contract-choice-button {
        height: min(44px, calc((var(--phone-bid-height) - 2 * var(--phone-bid-padding) - (var(--phone-bid-rows) - 1) * var(--phone-bid-gap) - 2px) / var(--phone-bid-rows)));
        min-height: 20px;
        padding-block: 0;
        font-size: clamp(9px, calc(14px - var(--phone-cramped) * .02), 14px);
    }
}
@media (min-width: 360px) and (width < 510px) and (orientation: portrait) {
    #gameScreen.phone-portrait-layout .game-top-content { inset: clamp(0px, calc((100dvh - 500px) * .036), 5px) 8px; }
    #gameScreen.phone-portrait-layout .game-room-info-grid { row-gap: 0; }
    #gameScreen.phone-portrait-layout .game-room-info-item { font-size: clamp(6px, 1.65dvh, 9px); line-height: 1; }
    #gameScreen.phone-portrait-layout .player-local .name,
    #gameScreen.phone-portrait-layout .player-local .player-coin-value,
    #gameScreen.phone-portrait-layout .player-local .player-points-value,
    #gameScreen.phone-portrait-layout .player-local .player-presence { font-size: max(clamp(7px, 1.65dvh, 10px), clamp(7px, calc(10px + (100dvh - 640px) * .025), 14px)); line-height: 1; }
    #gameScreen.phone-portrait-layout .player-stat-row img,
    #gameScreen.phone-portrait-layout .player-presence img { width: clamp(9px, 2.4dvh, 15px); height: clamp(9px, 2.4dvh, 15px); }
    #gameScreen.phone-portrait-layout .player-badge:not(.player-local) .player-panel-content { left: calc(4% + 6% * var(--phone-compact-controls)); right: calc(4% + 6% * var(--phone-compact-controls)); transform: translate(calc(var(--phone-opponent-content-x) * (1 - var(--phone-compact-controls))), calc(var(--phone-opponent-content-y) * (1 - var(--phone-compact-controls)))); }
    #gameScreen.phone-portrait-layout .player-badge:not(.player-local) .name { transform: translateX(calc(-12px * (1 - var(--phone-compact-controls)))); width: calc(100% - 74px + 44px * var(--phone-compact-controls)); max-width: calc(100% - 74px + 44px * var(--phone-compact-controls)); font-size: calc(clamp(9px, 2.3vw, 10px) * (1 - var(--phone-compact-controls)) + 8px * var(--phone-compact-controls)); }
    #gameScreen.phone-portrait-layout .player-badge:not(.player-local) .player-stat-row { width: calc(100% - 50px + 20px * var(--phone-compact-controls)); grid-template-columns: clamp(9px, 2.4dvh, 15px) minmax(0, max-content) minmax(0, max-content); gap: calc(3px - 2px * var(--phone-compact-controls)); }
    #gameScreen.phone-portrait-layout .player-badge:not(.player-local) .player-coin-value,
    #gameScreen.phone-portrait-layout .player-badge:not(.player-local) .player-points-value { font-size: clamp(7px, 1.65dvh, 10px); }
    #gameScreen.phone-portrait-layout .player-badge:not(.player-local) .player-panel-content { align-items: flex-start; }
    #gameScreen.phone-portrait-layout .player-badge:not(.player-local) .name { margin-left: calc(37px * (1 - var(--phone-compact-controls))); }
    #gameScreen.phone-portrait-layout .player-badge:not(.player-local) .player-stat-row { margin-left: calc(25px * (1 - var(--phone-compact-controls))); }
    #gameScreen.phone-portrait-layout .player-badge:not(.player-local) .player-utility-row { top: calc(-44px * (1 - var(--phone-compact-controls))); right: calc(-4px * var(--phone-compact-controls)); width: calc(100% * (1 - var(--phone-compact-controls)) + 22px * var(--phone-compact-controls)); height: calc(88px * (1 - var(--phone-compact-controls)) + 100% * var(--phone-compact-controls)); transform: translateY(calc(var(--phone-opponent-utility-offset) * (1 - var(--phone-compact-controls)))); }
    #gameScreen.phone-portrait-layout .player-badge:not(.player-local) .player-control-button:not(.player-block-control) { display: flex; align-items: center; justify-content: center; width: calc(44px - 20px * var(--phone-compact-controls)); min-width: 0; height: 50%; min-height: 0; padding: calc(10px - 7px * var(--phone-compact-controls)); }
    #gameScreen.phone-portrait-layout .player-badge:not(.player-local) .player-control-button img { width: 100%; height: 100%; min-height: 0; max-width: 100%; max-height: 100%; object-fit: contain; }
    #gameScreen.phone-portrait-layout .current-trick .trick-card-local { transform: translate(-50%, -50%) rotate(-2deg); }
    #gameScreen.phone-portrait-layout .player-badge:not(.player-local) .player-profile-button { top: 50%; }
    #gameScreen.phone-portrait-layout .player-badge:not(.player-local) .player-gift-icon { width: 100%; height: 100%; }
    #gameScreen.phone-portrait-layout .last-deal-area { --bell-size: var(--phone-bell-size, 44px); }
    #gameScreen.phone-portrait-layout .last-deal-bell { min-width: 24px; display: grid; place-items: center; }
    #gameScreen.phone-portrait-layout .last-deal-bell img { width: var(--bell-size); height: var(--bell-size); }
    #gameScreen.phone-portrait-layout .player-local .player-panel-content { top: calc(18% + 6% * var(--phone-compact-controls)); bottom: calc(16% + 2% * var(--phone-compact-controls)); transform: translateY(calc(3px * (1 - var(--phone-compact-controls)))); }
    #gameScreen.phone-portrait-layout .player-local .player-turn-indicator { top:19.5%; right:auto; left:calc(97% + 5px); padding:2px 3px; font-size:clamp(7px,2vw,9px); transform:none; }
}
@media (min-width: 360px) and (width < 510px) and (orientation: portrait) and (height < 560px) {
    #gameScreen.phone-portrait-layout .last-deal-status { font-size: 10px; line-height: 1.1; padding: 3px 5px; }
    #gameScreen.phone-portrait-layout .contract-choice-panel { --phone-bid-rows: 1; --phone-bid-padding: 0px; --phone-bid-gap: 2px; display: grid; grid-template-columns: 60px 60px 54px 60px 60px; border: 0; background: transparent; box-shadow: none; pointer-events: none; }
    #gameScreen.phone-portrait-layout .contract-choice-panel.hidden { display: none; }
    #gameScreen.phone-portrait-layout .contract-choice-panel .contract-choice-button { width: 100%; min-width: 0; min-height: 24px; pointer-events: auto; }
    #gameScreen.phone-portrait-layout .contract-choice-panel .contract-choice-button:nth-child(3) { grid-column: 4; }
    #gameScreen.phone-portrait-layout .contract-choice-panel .contract-choice-button:nth-child(4) { grid-column: 5; }
}
@media (min-width: 667px) and (width < 1024px) and (min-height: 320px) and (height < 510px) and (orientation: landscape) {
    #gameScreen.phone-landscape-layout { --land-trick-width: min(clamp(46px, 6.84vw, 62px), calc(32px + (100dvh - 320px) * .4)); }
    #gameScreen.phone-landscape-layout .current-trick { top: max(calc(var(--land-table-top) + var(--land-trick-width) * .85 - clamp(78px, 23dvh, 98px) / 2 + 6px), calc(clamp(100px, 28dvh, 120px) + 15px - max(clamp(0px, calc((400px - 100dvh) * .6), 48px), clamp(0px, calc((460px - 100dvh) * .5), 40px)))); }
    #gameScreen.phone-landscape-layout .current-trick .playing-card { width: var(--land-trick-width); min-width: 0; min-height: 0; }
    #gameScreen.phone-landscape-layout .current-trick .trick-card-local { transform: translate(-50%, -40%) rotate(-1deg); }
    #gameScreen.phone-landscape-layout .talon-area { top: max(calc(var(--land-top-height) + 30px + var(--land-panel-height)), calc(clamp(142px, 39dvh, 162px) - max(clamp(0px, calc((400px - 100dvh) * .6), 48px), clamp(0px, calc((460px - 100dvh) * .5), 40px)))); right: auto; left: calc(50% + (8 * var(--land-card-width) + 7 * var(--land-card-overlap)) / 2 + 8px); }
    #gameScreen.phone-landscape-layout .contract-choice-panel { top: calc(clamp(92px, 28dvh, 120px) - clamp(18px, 5.2dvh, 22px) - clamp(0px, calc((360px - 100dvh) * .6), 24px)); }
}
@media (min-width: 1024px) and (width < 1366px) and (min-height: 480px) and (orientation: landscape),
       (width: 1366px) and (min-height: 500px) and (height < 700px) and (orientation: landscape) {
    #gameScreen.tablet-landscape-layout {
        --tablet-land-local-width: min(clamp(312px, 36.4vw, 480px), calc(100dvh * .66));
        --tablet-land-hand-top: calc(100dvh - var(--tablet-land-local-width) * 829 / 1898 - var(--tablet-land-card-width) * .855);
    }
    #gameScreen.tablet-landscape-layout .current-trick { top: min(calc(var(--tablet-land-table-top) - 8% - var(--tablet-land-trick-short-lift)), calc(var(--tablet-land-hand-top) - 95px - max(8.5dvh, clamp(55px, 7.5vw, 105px)) - var(--tablet-land-trick-card-width) * 2.3 - 12px)); }
    #gameScreen.tablet-landscape-layout .talon-area { top: min(calc(var(--tablet-land-table-top) + var(--tablet-land-table-width) * 1302 / 1208 * .26 + 20px), calc(var(--tablet-land-hand-top) - 52px)); }
    #gameScreen.tablet-landscape-layout .contract-choice-panel { top: min(clamp(76px, calc(18dvh - 6px), 178px), calc(var(--tablet-land-hand-top) - 4 * clamp(38px, 6dvh, 52px) - 5 * clamp(4px, .7dvh, 8px) - 14px)); }
    #gameScreen.tablet-landscape-layout .last-deal-area { top: max(calc(var(--tablet-land-table-top) + 24%), calc(var(--tablet-land-edge) + clamp(50px, 7dvh, 58px) + clamp(18px, 2.8dvh, 24px) + var(--tablet-land-opponent-width) * 829 / 1898 * .838 + 42px)); }
}
/* Discard instructions belong to the hand, clear of both ranks and player panels. */
#gameScreen .hand-region .bottom-control-area {
    position: absolute;
    inset: auto auto calc(100% + 14px) 50%;
    width: max-content;
    max-width: 90vw;
    min-height: 0;
    align-items: center;
    transform: translateX(-50%);
    pointer-events: none;
}
#gameScreen .hand-region #discardArea {
    margin: 0;
    padding: 4px 10px;
    border: 1px solid var(--room-border-soft);
    border-radius: 999px;
    background: rgba(10, 6, 3, .9);
    font-size: clamp(10px, 1.5vw, 14px);
    line-height: 1.2;
    pointer-events: none;
}
/* The server-owned deadline of the viewer's own turn, above the hand and,
   while discarding, above the discard instruction. */
#gameScreen .hand-region .turn-countdown {
    position: absolute;
    z-index: 13;
    bottom: calc(100% + 16px);
    left: 50%;
    display: flex;
    gap: .3em;
    margin: 0;
    padding: 4px 10px;
    border: 1px solid var(--room-border-soft);
    border-radius: 999px;
    color: #f3e6c8;
    background: rgba(10, 6, 3, .9);
    font-size: clamp(10px, 1.5vw, 14px);
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
    white-space: nowrap;
    transform: translateX(-50%);
    pointer-events: none;
}
#gameScreen .hand-region:has(#discardArea:not(.hidden)) .turn-countdown {
    bottom: calc(100% + 16px + 1.2 * clamp(10px, 1.5vw, 14px) + 16px);
}
/* Phone landscape has no free row above the hand: beside it, right of the local panel. */
#gameScreen.phone-landscape-layout .hand-region .turn-countdown,
#gameScreen.phone-landscape-layout .hand-region:has(#discardArea:not(.hidden)) .turn-countdown {
    top: calc(100% + 14px);
    bottom: auto;
    left: calc(100% + 8px);
    transform: none;
}
/* Phone portrait bidding fills the space above the hand: left of the local panel. */
#gameScreen.phone-portrait-layout .hand-region .turn-countdown,
#gameScreen.phone-portrait-layout .hand-region:has(#discardArea:not(.hidden)) .turn-countdown {
    top: calc(100% + 8px);
    bottom: auto;
    left: 4px;
    flex-direction: column;
    align-items: center;
    gap: 0;
    padding: 3px 6px;
    border-radius: 10px;
    transform: none;
}
#gameScreen .hand-region .turn-countdown[hidden] { display: none; }
/* The text carries the state; colour only reinforces it. */
#gameScreen .hand-region .turn-countdown.turn-countdown--urgent { border-color: #e8a13a; color: #ffd27a; }
#gameScreen .hand-region .turn-countdown.turn-countdown--waiting { color: #d8c8ac; }
/* Keep the live announcement without painting the same instruction twice. */
#gameScreen .hand-region:has(#discardArea:not(.hidden)) .hand-status {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}
/* Dedicated Lobby authority for short phone-landscape viewports. */
@media (min-width: 667px) and (width < 1024px) and (min-height: 320px) and (height < 510px) and (orientation: landscape) {
    :root { --lobby-layout-mode: lobby-phone-landscape; }

    #lobbyScreen.active {
        height: 100dvh;
        min-height: 0;
        overflow: hidden;
    }

    #lobbyScreen .lobby-scene { object-position: center 28%; }

    #lobbyScreen .lobby-layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: 52px minmax(0, 1fr);
        width: 100%;
        height: 100dvh;
        min-height: 0;
        overflow: hidden;
    }

    #lobbyScreen .sidebar {
        position: relative;
        width: 100%;
        height: 52px;
        min-height: 0;
        padding: 4px 84px 4px 6px;
        overflow: hidden;
        border-bottom: 1px solid rgba(194, 131, 60, .52);
        background: linear-gradient(180deg, rgba(78, 42, 22, .97), rgba(35, 18, 10, .97));
        filter: drop-shadow(0 5px 12px rgba(0, 0, 0, .48));
    }

    #lobbyScreen .sidebar > div {
        display: flex;
        gap: 4px;
        width: 100%;
        min-width: 0;
        height: 44px;
        padding: 0 0 2px;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: thin;
        scrollbar-color: rgba(218, 156, 67, .82) rgba(20, 10, 5, .58);
        overscroll-behavior-x: contain;
    }

    #lobbyScreen .nav-item {
        flex: 0 0 72px;
        width: 72px;
        min-height: 40px;
        margin: 0;
        padding: 2px 4px;
        gap: 2px;
        flex-direction: column;
        justify-content: center;
        border-width: 6px;
        border-image-width: 6px;
        font-size: 10px;
        line-height: 1;
    }

    #lobbyScreen .nav-icon,
    #lobbyScreen .nav-icon-home svg {
        flex: 0 0 18px;
        width: 18px;
        height: 18px;
        font-size: 16px;
    }

    #lobbyScreen .nav-label {
        display: block;
        width: 100%;
        overflow: hidden;
        text-align: center;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    #lobbyScreen .lobby-main {
        display: grid;
        grid-template-columns: clamp(184px, 25vw, 224px) minmax(0, 1fr);
        grid-template-rows: 48px minmax(0, 1fr) 54px;
        gap: 6px 10px;
        width: 100%;
        height: calc(100dvh - 52px);
        min-height: 0;
        padding: 7px 10px 8px;
        overflow: hidden;
    }

    #lobbyScreen .top-profile {
        grid-column: 1;
        grid-row: 2;
        align-self: start;
        min-height: 0;
        margin: 4px 0 0;
    }

    #lobbyScreen .top-live-info {
        display: grid;
        gap: 5px;
        margin: 0;
        font-size: clamp(11px, 1.45vw, 13px);
        line-height: 1.25;
    }

    #lobbyScreen .top-live-info span::before {
        width: 7px;
        height: 7px;
        margin-right: 6px;
    }

    #lobbyScreen .hero-actions {
        grid-column: 1;
        grid-row: 1;
        align-self: stretch;
        width: 100%;
        margin: 0;
    }

    #lobbyScreen .primary-action {
        width: 100%;
        height: 48px;
        min-height: 44px;
        aspect-ratio: auto;
        padding: 0 8px 0 clamp(38px, 5vw, 50px);
        font-size: clamp(13px, 1.8vw, 16px);
        background-position: 51.7% 46.6%;
        background-size: 113% auto;
    }

    #lobbyScreen .personal-stats {
        grid-column: 1 / -1;
        grid-row: 3;
        width: 100%;
        height: 54px;
        min-height: 0;
        margin: 0;
        aspect-ratio: auto;
    }

    #lobbyScreen .personal-stat {
        gap: clamp(5px, 1vw, 10px);
        padding: 4px clamp(8px, 1.5vw, 16px);
    }

    #lobbyScreen .personal-stat-icon {
        width: 30px;
        min-width: 30px;
        height: 30px;
        font-size: 17px;
    }

    #lobbyScreen .personal-stat strong {
        margin-bottom: 1px;
        font-size: clamp(15px, 2vw, 18px);
        line-height: 1;
    }

    #lobbyScreen .personal-stat span { font-size: clamp(9px, 1.3vw, 11px); }

    #lobbyScreen .tables-section {
        grid-column: 2;
        grid-row: 1 / 3;
        align-self: stretch;
        width: 100%;
        height: auto;
        min-height: 0;
        margin: 22px 0 0;
        padding: 5px 6px 7px;
    }

    #lobbyScreen .section-header {
        top: -22px;
        left: clamp(10px, 3%, 22px);
        width: min(190px, 58%);
        height: 30px;
        aspect-ratio: auto;
        padding: 0 12px;
    }

    #lobbyScreen .section-header h2 { font-size: clamp(14px, 1.9vw, 17px); }

    #lobbyScreen .table-list {
        height: 100%;
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    #lobbyScreen .lobby-table-row {
        grid-template-columns: 42px minmax(96px, 1fr) minmax(116px, auto) 88px;
        grid-template-areas:
            "marker info seats action"
            "stake badges status action";
        gap: 4px 7px;
        min-height: 78px;
        padding: 5px 7px;
    }

    #lobbyScreen .mini-table { grid-area: marker; width: 40px; height: 26px; }
    #lobbyScreen .room-info { grid-area: info; }
    #lobbyScreen .room-title { font-size: clamp(12px, 1.7vw, 15px); }
    #lobbyScreen .room-subtitle {
        margin-top: 2px;
        overflow: hidden;
        font-size: 9px;
        line-height: 1.15;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    #lobbyScreen .seat-slots { grid-area: seats; gap: 3px; }
    #lobbyScreen .seat-position { flex-basis: 28px; width: 28px; }
    #lobbyScreen .seat { flex-basis: 28px; width: 28px; height: 28px; }
    #lobbyScreen .seat.filled::before { width: 16px; height: 17px; }
    #lobbyScreen .seat-username { display: none; }
    #lobbyScreen .seat-count { font-size: 10px; }

    #lobbyScreen .room-stake {
        grid-area: stake;
        align-items: center;
        flex-direction: row;
        gap: 3px;
    }
    #lobbyScreen .room-stake span { font-size: 8px; }
    #lobbyScreen .room-stake strong { font-size: 12px; }

    #lobbyScreen .room-badges {
        grid-area: badges;
        grid-template-columns: repeat(4, 22px);
        gap: 2px;
        width: auto;
        min-width: 0;
    }
    #lobbyScreen .room-badge { width: 22px; height: 22px; font-size: 8px; }
    #lobbyScreen .room-private-badge { font-size: 10px; }

    #lobbyScreen .room-status {
        grid-area: status;
        justify-self: end;
        width: auto;
        min-width: 54px;
        padding: 4px 6px;
        font-size: 8px;
    }

    #lobbyScreen .join-room-btn {
        grid-area: action;
        align-self: stretch;
        width: 88px;
        min-height: 44px;
        padding: 5px;
        font-size: 11px;
    }

    #lobbyScreen .lobby-empty-state {
        min-height: 100%;
        padding: 12px;
        font-size: clamp(11px, 1.5vw, 13px);
    }

    #lobbyScreen .lobby-main:has(#waitingRoomPanel:not([hidden])) {
        display: block;
        padding: 7px 10px 8px;
    }

    #lobbyScreen .lobby-main:has(#waitingRoomPanel:not([hidden])) > .top-profile,
    #lobbyScreen .lobby-main:has(#waitingRoomPanel:not([hidden])) > .personal-stats {
        display: none;
    }

    #lobbyScreen .waiting-room-panel {
        display: grid;
        grid-template-rows: auto auto minmax(0, 1fr) auto;
        width: 100%;
        max-width: none;
        height: 100%;
        min-height: 0;
        margin: 0;
        padding: 7px 10px 8px;
        overflow: hidden;
        border-radius: 12px;
        text-align: left;
    }

    #lobbyScreen .waiting-room-panel h2 {
        margin: 0;
        font-size: clamp(17px, 2.4vw, 21px);
        line-height: 1.15;
    }

    #lobbyScreen #waitingRoomSummary {
        margin: 3px 0;
        overflow: hidden;
        font-size: clamp(10px, 1.45vw, 12px);
        line-height: 1.25;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    #lobbyScreen .waiting-room-seats {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 7px;
        min-height: 0;
        margin: 3px 0 5px;
        overflow-y: auto;
    }

    #lobbyScreen .waiting-room-seat {
        min-width: 0;
        min-height: 60px;
        padding: 6px;
        gap: 6px;
    }

    #lobbyScreen .waiting-room-avatar {
        flex: 0 0 38px;
        width: 38px;
        height: 38px;
    }

    #lobbyScreen .waiting-room-seat-identity strong {
        overflow: hidden;
        font-size: clamp(11px, 1.5vw, 13px);
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    #lobbyScreen .waiting-room-owner { font-size: 9px; }
    #lobbyScreen .waiting-room-block-control { flex: 0 0 36px; width: 36px; height: 36px; }

    #lobbyScreen .waiting-room-actions {
        display: flex;
        flex-wrap: nowrap;
        gap: 7px;
        justify-content: flex-end;
        min-height: 44px;
        overflow-x: auto;
    }

    #lobbyScreen .waiting-room-actions .secondary-action,
    #lobbyScreen .waiting-room-panel button {
        flex: 0 0 auto;
        min-height: 44px;
        margin: 0;
        padding: 7px clamp(10px, 1.8vw, 16px);
        font-size: clamp(11px, 1.5vw, 13px);
    }

    body:not(.active-game-location) > .temporary-logout-button,
    #lobbyScreen.active ~ .temporary-logout-button {
        top: 6px;
        right: 7px;
        min-width: 70px;
        min-height: 40px;
        padding: 7px 11px;
        font-size: 11px;
    }

    body:not(.active-game-location) > #appError:not([hidden]) {
        top: 57px;
        right: 10px;
        max-width: min(420px, calc(100vw - 236px));
        max-height: calc(100dvh - 70px);
        padding: 7px 10px;
        overflow: auto;
        font-size: 12px;
        line-height: 1.25;
    }
}

/* K1-PD-14: a player's AFK badge, set by the server and the same on every device. */
#gameScreen .player-badge .player-afk-badge {
    position: absolute;
    z-index: 6;
    top: 4px;
    left: 4px;
    padding: 0 3px;
    border: 1px solid #e8a13a;
    border-radius: 999px;
    color: #ffd27a;
    background: rgba(10, 6, 3, .92);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .02em;
    line-height: 1.2;
    white-space: nowrap;
    pointer-events: none;
}
#gameScreen .player-badge .player-afk-badge[hidden] { display: none; }