/* === GLOBAL RESET AND BASE STYLES === */
:root {
    --page-bg-base: #100906;
    --page-bg-top: rgba(8, 26, 37, 0.84);
    --page-bg-mid: rgba(122, 71, 33, 0.3);
    --page-bg-bottom: rgba(14, 7, 4, 0.9);
    --page-bg-glow: rgba(247, 198, 92, 0.22);
}

html, body {
    margin: 0;
    padding: 0;
    min-height: 100%;
    font-family: Tahoma, Arial, sans-serif;
    color: #2f2f2f;
}

* {
    box-sizing: border-box;
}

body {
    min-height: 100vh;
    padding: 14px;
    background-color: var(--page-bg-base);
    background-image:
        linear-gradient(180deg, var(--page-bg-top) 0%, rgba(8, 26, 37, 0.26) 28%, var(--page-bg-mid) 60%, var(--page-bg-bottom) 100%),
        radial-gradient(circle at 50% 12%, var(--page-bg-glow) 0%, rgba(247, 198, 92, 0.08) 18%, rgba(247, 198, 92, 0) 36%),
        url("img/pharaoh-table-bg.svg");
    background-position: center center, center top, center top;
    background-repeat: no-repeat, no-repeat, no-repeat;
    background-size: cover, 100% 100%, cover;
    background-attachment: fixed, fixed, fixed;
}

@media (max-width: 960px) {
    body {
        background-attachment: scroll, scroll, scroll;
        background-position: center center, center top, 56% top;
    }
}

/* === GENERAL LINKS === */
a:link, a:visited {
    text-decoration: none;
    color: white;
    text-shadow: 1px 1px 1px black;
}

/* === TYPOGRAPHY === */
h1 {
    text-align: center;
    font-size: 2rem;
    color: #1e1e1e;
    text-shadow: 1px 1px 2px #e0d3b8;
    margin: 0;
}

header {
    font-size: 1.05rem;
}

footer {
    font-size: 1rem;
}

/* === FORM / INPUT STYLING === */
input[type="text"],
input[type="number"],
input[type="submit"] {
    display: block;
    width: 100%;
    margin: 1rem 0;
    padding: 0.7rem;
    font-size: 1rem;
    border-radius: 6px;
    border: 1px solid #ccc;
    box-sizing: border-box;
}

input[type="submit"] {
    background: #4b7c57;
    color: white;
    border: none;
    cursor: pointer;
    transition: background 0.2s;
}

input[type="submit"]:hover {
    background: #3a6546;
}

.btn {
    display: inline-block;
    padding: 0.8em 1.2em;
    margin: 0.5em 0;
    font-size: 1.2em;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    background: #4b7c57;
    color: white;
    border-radius: 6px;
    transition: background 0.2s ease;
    box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2);
}
.btn-small-block {
    display: block;
    padding: 0.4em 0.6em;
    margin: 1em 0;
    font-size: 1em;
    font-weight: normal;
    text-align: center;
    text-decoration: none;
    background: #4b7c57;
    color: white;
    border-radius: 6px;
    transition: background 0.2s ease;
    box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2);
}
.btn:hover {
    background: #3a6546;
}
.btn.logout {
    background: #888;
    font-size: 0.9em;
}
.btn.logout:hover {
    background: #666;
}

/* === LOGIN / FORM CONTAINERS === */
.login-container,
.container {
    max-width: 400px;
    margin: 2rem auto;
    background: rgba(255, 255, 255, 0.85);
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    text-align: center;
}

/* === GAME SHELL === */
.game-header {
    max-width: 1320px;
    margin: 0 auto 18px;
    padding: 12px 16px;
    border-radius: 18px;
    background: rgba(20, 26, 18, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(8px);
}

.game-header__nav {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
}

.game-header__nav a,
.game-footer a,
.end_turn_button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.7em 1.1em;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
    letter-spacing: 0.04em;
}

.game-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    max-width: min(92vw, 980px);
    margin: 0 auto;
    padding: 0.58em 1.4em;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(57, 36, 18, 0.92) 0%, rgba(15, 10, 7, 0.88) 100%);
    border: 1px solid rgba(244, 209, 138, 0.34);
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 239, 199, 0.14);
    backdrop-filter: blur(10px);
    color: #fff6dc;
    font-size: clamp(1.35rem, 3vw, 2rem);
    line-height: 1.15;
    letter-spacing: 0.05em;
    text-align: center;
    text-shadow: 0 2px 0 rgba(67, 41, 15, 0.72), 0 0 18px rgba(0, 0, 0, 0.58);
}

.page-brand {
    display: flex;
    justify-content: center;
    width: fit-content;
    max-width: min(94vw, 980px);
    margin: 0 auto 1.2rem;
}

.page-brand-link,
.page-brand-link:link,
.page-brand-link:visited {
    display: inline-flex;
    color: inherit !important;
    text-decoration: none;
    text-shadow: none;
}

.page-title {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    width: fit-content;
    max-width: min(92vw, 980px);
    margin: 0;
    padding: 0.92em 1.6em 0.98em;
    border-radius: 28px;
    background: linear-gradient(180deg, rgba(57, 36, 18, 0.94) 0%, rgba(15, 10, 7, 0.9) 100%);
    border: 1px solid rgba(244, 209, 138, 0.34);
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 239, 199, 0.14);
    backdrop-filter: blur(10px);
    line-height: 1;
    text-align: left;
    text-shadow: 0 2px 0 rgba(67, 41, 15, 0.72), 0 0 18px rgba(0, 0, 0, 0.58);
}

.page-title__mark {
    width: 78px;
    height: auto;
    flex: 0 0 auto;
    filter:
        drop-shadow(0 0 8px rgba(154, 230, 96, 0.42))
        drop-shadow(0 0 18px rgba(115, 192, 58, 0.36))
        drop-shadow(0 0 30px rgba(214, 189, 93, 0.2))
        drop-shadow(0 12px 20px rgba(0, 0, 0, 0.26));
}

.page-title__copy {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 7px;
    padding-right: 5.4rem;
}

.page-title__name {
    color: #fff6dc;
    font-size: clamp(1.8rem, 4.6vw, 3.2rem);
    font-weight: bold;
    letter-spacing: 0.04em;
}

.page-title__beta {
    position: absolute;
    top: 0.22rem;
    right: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.42em 0.82em;
    border-radius: 999px;
    background: linear-gradient(180deg, #79a94d 0%, #486d2c 100%);
    border: 1px solid rgba(228, 205, 132, 0.34);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 247, 212, 0.18);
    color: #f8ffe9;
    font-size: 0.72rem;
    font-weight: bold;
    letter-spacing: 0.18em;
    line-height: 1;
    text-shadow: none;
}

.page-title__tag {
    color: #f1d481;
    font-size: 0.92rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

.game-banner {
    text-transform: uppercase;
}

@media (max-width: 640px) {
    .page-title {
        gap: 12px;
        padding: 0.9em 1.2em 0.95em;
    }

    .page-title__mark {
        width: 62px;
    }

    .page-title__copy {
        gap: 5px;
        padding-right: 4.5rem;
    }

    .page-title__beta {
        top: 0.12rem;
        padding: 0.36em 0.68em;
        font-size: 0.66rem;
        letter-spacing: 0.14em;
    }

    .page-title__tag {
        font-size: 0.84rem;
        letter-spacing: 0.16em;
    }
}

.game-banner-action {
    text-align: center;
    margin: 18px 0 22px;
}

.game-banner-action-stack {
    display: grid;
    gap: 10px;
    justify-items: center;
}

.game-banner-secondary {
    min-width: 180px;
    padding: 0.7em 1.1em;
    font-size: 0.86rem;
    letter-spacing: 0.08em;
    border-color: rgba(95, 79, 51, 0.22);
}


.game-table-shell {
    max-width: 1320px;
    margin: 18px auto 0;
}

#game-area {
    display: grid;
    grid-template-columns: minmax(170px, 1fr) minmax(260px, 1.1fr) minmax(170px, 1fr);
    gap: 18px;
    align-items: stretch;
    margin-bottom: 22px;
}

.table-panel,
.player-panel {
    background: rgba(20, 26, 18, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 20px;
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.14);
    backdrop-filter: blur(8px);
}

.table-panel {
    min-height: 250px;
    padding: 16px;
}

.table-panel__label {
    font-size: 0.85rem;
    font-weight: bold;
    letter-spacing: 0.1em;
    color: #e2d0a6;
    margin-bottom: 12px;
}

.table-panel--stack {
    position: relative;
}

.pre-start-roster {
    max-width: 560px;
    margin: 12px auto 18px;
    min-height: 0;
    padding: 14px 16px;
}

.pre-start-roster__column {
    display: grid;
    gap: 12px;
    justify-items: center;
    text-align: center;
}

.pre-start-roster__chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.pre-start-roster__chip,
.pre-start-roster__empty {
    display: inline-flex;
    align-items: center;
    min-height: 2.4rem;
    padding: 0.55rem 0.9rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #f7eed8;
    font-size: 0.92rem;
    letter-spacing: 0.03em;
}

.pre-start-roster__empty {
    color: rgba(247, 238, 216, 0.72);
}

.table-panel--log {
    display: grid;
    grid-template-rows: auto 1fr;
}

.players_wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 18px;
    align-items: start;
}

.player {
    display: block;
    min-width: 0;
}

.player-panel {
    min-width: 0;
    padding: 16px;
}

.player-panel h3 {
    margin: 0 0 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 1.05rem;
    color: #f7f1df;
}

.talon,
.pile,
#pile-container {
    position: relative;
    width: 100%;
    min-height: 220px;
    text-align: center;
}

.pile-suit-change {
    font-size: 5em;
    font-weight: bold;
    color: white;
    text-shadow: 2px 2px 3px black;
    position: absolute;
    top: 10px;
    right: -18px;
    z-index: 10;
    pointer-events: none;
}

#turn-log {
    font-size: 1rem;
    max-height: 250px;
    overflow: hidden;
    font-family: monospace;
    text-align: left;
    color: #f2ecdf;
}

.turn-log__entries {
    max-height: 190px;
    overflow-y: auto;
    border-radius: 12px;
}

.turn-log__entry {
    padding: 8px 10px;
}

.pile_card_img,
.deck_card_img {
    width: 120px;
    height: 192px;
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: center;
}

.card {
    display: inline-block;
}

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

.hand--opponent {
    width: 100%;
    min-width: 0;
    flex-wrap: nowrap;
    align-items: flex-end;
    justify-content: flex-start;
    gap: 0;
    overflow: hidden;
    --opponent-card-overlap: 24px;
}

.hand--opponent .card {
    flex: 0 0 auto;
    margin-left: calc(-1 * var(--opponent-card-overlap));
}

.hand--opponent .card_img {
    display: block !important;
    margin: 0 !important;
}

.hand--opponent .card:first-child,
.hand--opponent .hand-empty-state {
    margin-left: 0;
}

.card_img {
    width: 100px;
    height: 160px;
    cursor: not-allowed;
    border-radius: 8px;
}

.card.highlight .card_img {
    cursor: pointer;
}

.card select {
    display: block;
    font-size: 1.5em;
    position: absolute;
    bottom: 0;
    right: 0;
}

.card select.suit_change {
    height: 80px;
    padding: 10px;
    font-size: 2.5em;
}

@keyframes glowFadeIn {
  0% {
    filter:
      drop-shadow(0 0 0 white)
      drop-shadow(0 0 0 white)
      drop-shadow(0 0 0 white)
      brightness(1) contrast(1);
  }
  100% {
    filter:
      drop-shadow(0 0 0.15rem white)
      drop-shadow(0 0 0.15rem white)
      drop-shadow(0 0 0.15rem white)
      brightness(1.1) contrast(1.1);
  }
}

.highlight {
  filter: brightness(1) contrast(1);
  animation: glowFadeIn 6000ms ease-in 2000ms forwards;
}

button.card-button {
    all: unset;
    display: inline-block;
}

.end_turn_button {
    font-size: 0.95rem;
    font-weight: bold;
    color: #fff;
    background: #4b7c57;
    border: 1px solid rgba(0, 0, 0, 0.25);
}

.game-footer {
    max-width: 1320px;
    margin: 24px auto 0;
    padding: 14px 16px 24px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

/* === POPUP === */
.popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.popup-box {
    background: white;
    padding: 2em;
    border-radius: 8px;
    min-width: 250px;
    box-shadow: 0 0 10px #000;
    text-align: center;
}

.popup-box select {
    font-size: 1.2em;
    padding: 0.2em;
}

.popup-box button {
    margin-top: 1em;
    padding: 1em 2em;
    font-size: 1em;
}

.popup-btn {
    font-size: 1.6em;
    padding: 20px;
    margin: 10px;
    border: 2px solid #444;
    border-radius: 12px;
    text-align: center;
    cursor: pointer;
    background: #f8f8f8;
    transition: background 0.2s, transform 0.1s;
}

.popup-btn:hover {
    background: #e0e0e0;
    transform: scale(1.03);
}

.popup-label {
    font-size: 1.5em;
    margin-bottom: 20px;
    text-align: center;
}

.popup-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1em;
    padding: 1em;
    justify-items: center;
}

.hidden {
    display: none;
}

#debug_info {
    --debug-console-bg: linear-gradient(145deg, rgba(8, 15, 20, 0.96), rgba(19, 28, 31, 0.94));
    --debug-console-border: rgba(255, 187, 62, 0.45);
    --debug-console-glow: rgba(255, 145, 0, 0.24);
    --debug-console-text: #f4e6c3;
    --debug-console-muted: rgba(244, 230, 195, 0.72);
    --debug-console-cyan: #89f3ff;
    --debug-console-warning: #ffb63e;
    margin: 12px auto 36px;
    max-width: 1320px;
    padding: 22px 20px 24px;
    color: var(--debug-console-text);
    background:
        repeating-linear-gradient(-45deg, rgba(255, 183, 58, 0.07) 0 14px, rgba(22, 29, 33, 0.07) 14px 28px),
        var(--debug-console-bg);
    border: 1px solid var(--debug-console-border);
    border-radius: 24px;
    box-shadow:
        0 24px 44px rgba(0, 0, 0, 0.32),
        inset 0 0 0 1px rgba(255, 255, 255, 0.05),
        inset 0 0 36px var(--debug-console-glow);
    overflow: hidden;
    position: relative;
}

#debug_info::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, transparent 0, rgba(137, 243, 255, 0.08) 45%, transparent 100%),
        linear-gradient(180deg, rgba(255, 182, 62, 0.08), transparent 32%);
    pointer-events: none;
}

.debug-console__header,
.debug-console__grid,
.debug-console__scans,
.debug-console__dump {
    position: relative;
    z-index: 1;
}

.debug-console__header {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    justify-content: space-between;
    gap: 12px 18px;
    margin-bottom: 18px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.debug-console__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--debug-console-warning);
}

.debug-console__eyebrow::before,
.debug-console__eyebrow::after {
    content: "";
    width: 28px;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--debug-console-warning));
}

.debug-console__title {
    margin: 0;
    font-size: clamp(1.4rem, 2.4vw, 2.15rem);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.debug-console__subtitle {
    margin: 6px 0 0;
    max-width: 640px;
    color: var(--debug-console-muted);
    font-size: 0.92rem;
    line-height: 1.5;
}

.debug-console__status {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 999px;
    border: 1px solid rgba(137, 243, 255, 0.24);
    background: rgba(7, 29, 35, 0.62);
    color: var(--debug-console-cyan);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.debug-console__status::before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--debug-console-warning);
    box-shadow: 0 0 14px rgba(255, 182, 62, 0.85);
}

.debug-console__grid {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 16px;
}

.debug-console__panel,
.debug-console__scan {
    padding: 16px;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 32%),
        rgba(6, 12, 17, 0.76);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02);
}

.debug-console__panel-title,
.debug-console__scan-title,
.debug-console__subpanel-title {
    margin: 0 0 10px;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--debug-console-warning);
}

.debug-console__subpanel-title {
    margin-bottom: 12px;
    color: var(--debug-console-cyan);
}

.debug-console__stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 14px;
    margin: 0;
}

.debug-console__stat {
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.debug-console__stat dt {
    margin: 0 0 6px;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--debug-console-muted);
}

.debug-console__stat dd {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--debug-console-text);
}

.debug-console__panel-grid,
.debug-console__scan-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.debug-console__prob-list {
    display: grid;
    gap: 8px;
}

.debug-console__prob-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 10px;
    align-items: center;
    font-size: 0.8rem;
}

.debug-console__prob-label {
    min-width: 64px;
    font-weight: 700;
    color: var(--debug-console-text);
    white-space: nowrap;
}

.debug-console__suit-icon {
    width: 0.92rem;
    height: 0.92rem;
    vertical-align: -0.12rem;
    margin-right: 0.18rem;
}

.debug-console__prob-bar {
    height: 9px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.debug-console__prob-bar-fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--debug-console-cyan), var(--debug-console-warning));
    box-shadow: 0 0 14px rgba(137, 243, 255, 0.28);
}

.debug-console__prob-value {
    min-width: 52px;
    text-align: right;
    color: var(--debug-console-muted);
    font-variant-numeric: tabular-nums;
}

.debug-console__matrix {
    display: grid;
    gap: 8px;
    align-items: stretch;
}

.debug-console__matrix-corner,
.debug-console__matrix-head,
.debug-console__matrix-rank,
.debug-console__matrix-cell {
    min-height: 54px;
}

.debug-console__matrix-corner,
.debug-console__matrix-head,
.debug-console__matrix-rank {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    background: rgba(255, 255, 255, 0.04);
}

.debug-console__matrix-head {
    color: var(--debug-console-cyan);
}

.debug-console__matrix-rank {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--debug-console-text);
    letter-spacing: 0.04em;
}

.debug-console__matrix-cell {
    padding: 8px 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, calc(0.03 + (var(--ratio) * 0.08))), transparent),
        hsla(calc(var(--ratio) * 120), 72%, 38%, calc(0.14 + (var(--ratio) * 0.18)));
}

.debug-console__matrix-value {
    font-size: 0.78rem;
    color: var(--debug-console-muted);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}

.debug-console__scans {
    margin-top: 16px;
}

.debug-console__scans-list {
    display: grid;
    gap: 14px;
}

.debug-console__scan-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 12px;
    margin-bottom: 12px;
}

.debug-console__scan-target {
    color: var(--debug-console-cyan);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.debug-console__empty {
    margin: 0;
    padding: 18px;
    border-radius: 16px;
    border: 1px dashed rgba(255, 255, 255, 0.16);
    color: var(--debug-console-muted);
    background: rgba(255, 255, 255, 0.03);
}

.debug-console__dump {
    margin-top: 16px;
}

.debug-console__dump-code {
    margin: 0;
    max-height: 420px;
    overflow: auto;
    padding: 16px;
    border-radius: 16px;
    background: rgba(2, 7, 11, 0.88);
    border: 1px solid rgba(137, 243, 255, 0.12);
    font-size: 0.78rem;
    line-height: 1.45;
    white-space: pre;
    font-family: Consolas, "Courier New", monospace;
}

@media (max-width: 960px) {
    #game-area {
        grid-template-columns: 1fr;
    }

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

    .game-header__nav,
    .game-footer {
        justify-content: center;
    }

    #debug_info {
        margin-top: 6px;
        padding: 18px 14px 20px;
        border-radius: 20px;
    }

    .debug-console__grid,
    .debug-console__panel-grid,
    .debug-console__scan-grid,
    .debug-console__stats {
        grid-template-columns: 1fr;
    }

    .debug-console__prob-row {
        grid-template-columns: 56px 1fr 48px;
    }

    .debug-console__matrix {
        gap: 6px;
    }
}
/* === Legacy Polish Overrides === */
.table-panel--stack {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06), 0 18px 42px rgba(0, 0, 0, 0.14);
}

.player-badge.on-turn {
    background: rgba(199, 166, 82, 0.18);
    color: #f6e3a9;
    border: 1px solid rgba(199, 166, 82, 0.45);
}

#turn-log {
    font-size: 0.88rem;
}

.turn-log__entry {
    padding: 7px 10px;
    line-height: 1.35;
}

.turn-log__entry img {
    width: 18px;
    height: 18px;
    vertical-align: text-bottom;
}

.game-footer a {
    padding: 0.7em 1.1em;
    border-radius: 999px;
    background: rgba(20, 26, 18, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
}

@media (max-width: 960px) {
    #game-area {
        grid-template-columns: minmax(96px, 1fr) minmax(120px, 1.15fr) minmax(96px, 1fr);
        gap: 10px;
        align-items: start;
    }

    .table-panel {
        min-height: 170px;
        padding: 12px;
    }

    #turn-log {
        font-size: 0.78rem;
    }

    .turn-log__entries {
        max-height: 132px;
    }

    .pile_card_img,
    .deck_card_img {
        width: 88px;
        height: 141px;
    }

    .table-panel__label {
        margin-bottom: 8px;
    }
}
/* === Legacy Layout Refinements === */
#game-area {
    grid-template-columns: minmax(128px, 0.78fr) minmax(260px, 1.05fr) minmax(128px, 0.78fr);
}

.table-panel--log-shell {
    padding: 0;
    display: grid;
    grid-template-rows: auto auto auto;
    overflow: hidden;
}

.table-panel--log-shell > .table-panel--log {
    background: transparent;
    border: 0;
    box-shadow: none;
    border-radius: 0;
    backdrop-filter: none;
}

.turn-log__action {
    display: flex;
    justify-content: center;
    padding: 0 16px 10px;
}

.turn-log__stats {
    display: flex;
    justify-content: center;
    gap: 16px;
    padding: 0 16px 14px;
    font-size: 0.72rem;
    color: #d8ccb0;
    letter-spacing: 0.04em;
}

.player-panel--active {
    background: rgba(44, 60, 36, 0.86);
    border-color: rgba(214, 197, 157, 0.22);
}

.player-panel--active .hand {
    background: rgba(199, 166, 82, 0.08);
    border: 1px solid rgba(199, 166, 82, 0.16);
    border-radius: 14px;
    padding: 10px;
}

.player-heading-text {
    flex: 1 1 auto;
}

.player-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.45em 0.85em;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: bold;
    letter-spacing: 0.05em;
}

.player-badge.on-turn {
    background: #4b7c57;
    color: #fff;
    border: 1px solid rgba(0, 0, 0, 0.25);
}

@media (max-width: 960px) {
    #game-area {
        grid-template-columns: minmax(88px, 0.8fr) minmax(120px, 1.05fr) minmax(88px, 0.8fr);
    }

    .turn-log__stats {
        flex-direction: column;
        gap: 4px;
        align-items: center;
    }
}
/* === Center Stack Columns === */
#pile-container,
.talon-link--disabled,
.talon-link--disabled .deck_card_img {
    cursor: not-allowed;
}
.talon-shell {
    width: 168px;
    justify-self: center;
}

#pile-container,
.talon-shell .talon {
    min-height: 220px;
}

.talon-shell {
    position: relative;
}
/* === Hand Box Consistency === */
.player-panel .hand {
    width: 100%;
    min-width: 0;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 10px;
}

.player-panel--active .hand {
    background: rgba(199, 166, 82, 0.08);
    border-color: rgba(199, 166, 82, 0.16);
}

/* === Uniform Suit Choices === */
.popup-grid {
    align-items: stretch;
}

.suit-choice {
    width: 170px;
    min-height: 170px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.suit-choice .suit-symbol {
    min-height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.suit-choice .suit-label {
    min-height: 2.6em;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
/* === Primary End Turn === */
.game-primary-action {
    display: flex;
    justify-content: center;
    margin: 6px 0 22px;
}

.game-primary-action__controls {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.auto-end-toggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 0.7em 1em;
    border-radius: 999px;
    background: rgba(20, 26, 18, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: #f5ecd5;
    font-size: 0.95rem;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.auto-end-toggle__input {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: #5f956c;
}
.end_turn_button--primary {
    min-width: 220px;
    padding: 0.95em 1.6em;
    font-size: 1.15rem;
    font-weight: bold;
    letter-spacing: 0.08em;
    background: linear-gradient(180deg, #5f956c 0%, #426c4d 100%);
    border: 1px solid rgba(0, 0, 0, 0.28);
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.18);
}
/* === Disabled End Turn === */
.end_turn_button.is-disabled,
.end_turn_button.is-disabled:link,
.end_turn_button.is-disabled:visited,
.end_turn_button.is-disabled:hover,
.end_turn_button.is-disabled:focus {
    background: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.72);
    opacity: 0.52;
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: none;
    cursor: not-allowed;

}
/* === Header Alignment === */
.game-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.game-header__nav--right {
    margin-left: auto;
}

/* === Player Heading Center === */
.player-panel h3 {
    justify-content: center;
    text-align: center;
}

.player-heading-text {
    flex: 0 1 auto;
    text-align: center;
}


.player-heading {
    min-height: 2.5rem;
}

.player-heading-center {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: 0;
}

.player-heading--plain {
    display: flex;
    justify-content: center;
}

.player-hand-sort-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    margin-top: 10px;
}

.hand-sort-toggle {
    padding: 0.58em 0.88em;
    font-size: 0.84rem;
    justify-self: start;
    min-width: 0;
    white-space: nowrap;
}

.hand-sort-toggle--left {
    grid-column: 1;
}

.hand-sort-toggle--right {
    grid-column: 3;
    justify-self: end;
}

.hand-sort-toggle span {
    line-height: 1.1;
}
/* === Mobile Top Row Balance === */
@media (max-width: 960px) {
    .game-primary-action__controls {
        flex-direction: column;
    }

    .auto-end-toggle {
        white-space: normal;
    }
    .player-hand-sort-controls {
        grid-template-columns: 1fr 1fr;
    }

    .hand-sort-toggle--left,
    .hand-sort-toggle--right {
        grid-column: auto;
    }

    .hand-sort-toggle {
        font-size: 0.76rem;
        padding: 0.55em 0.72em;
        white-space: normal;
    }
    .game-header {
        flex-wrap: wrap;
        justify-content: center;
    }

    .game-header__nav--right {
        margin-left: 0;
    }

    #game-area {
        grid-template-columns: max-content minmax(130px, 1fr) max-content;
        justify-content: center;
        column-gap: 14px;
    }

    #pile-container,
    .talon-shell {
        width: 128px;
    }

    #turn-log {
        width: 100%;
        min-width: 0;
    }

    .table-panel--log-shell {
        min-width: 130px;
    }

    .pile_card_img,
    .deck_card_img {
        width: 110px;
        height: 176px;
    }
}
/* === Disabled End Turn Visibility Tweak === */
.end_turn_button.is-disabled,
.end_turn_button.is-disabled:link,
.end_turn_button.is-disabled:visited,
.end_turn_button.is-disabled:hover,
.end_turn_button.is-disabled:focus {
    background: rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.82);
    opacity: 0.68;
    border-color: rgba(255, 255, 255, 0.18);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12);
}
/* === Waiting Start Action === */
.game-banner-button {
    min-width: 260px;
    padding: 1.05em 1.8em;
    font-size: 1.22rem;
    letter-spacing: 0.08em;
}
/* === Centered Pile Suit Change === */
#pile-container {
    display: flex;
    align-items: center;
    justify-content: center;
}

.pile-suit-change {
    position: absolute;
    top: 50%;
    left: 50%;
    right: auto;
    transform: translate(-50%, -50%);
    z-index: 14;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 108px;
    min-height: 108px;
    padding: 12px;
    border-radius: 20px;
    background: rgba(24, 20, 12, 0.48);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
}

.pile-suit-change__icon {
    width: auto;
    height: 76px;
    filter: drop-shadow(0 0 10px rgba(255, 245, 180, 0.85)) drop-shadow(0 0 22px rgba(255, 210, 90, 0.45));
}

@media (max-width: 960px) {
    .pile-suit-change {
        min-width: 92px;
        min-height: 92px;
        padding: 10px;
    }

    .pile-suit-change__icon {
        width: auto;
        height: 64px;
    }
}
/* === Empty Hand State === */
.hand-empty-state {
    width: 100%;
    min-height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-weight: bold;
    letter-spacing: 0.05em;
    color: rgba(255, 245, 220, 0.88);
}
/* === Turn Log Opacity === */
.table-panel--log-shell {
    background: rgba(20, 26, 18, 0.42);
}
/* === Turn Log Opacity Strong Override === */
.table-panel.table-panel--log-shell {
    background: rgba(20, 26, 18, 0.42);
}

/* === Empty Talon Box === */
.talon-empty-box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 132px;
    min-height: 68px;
    padding: 12px 18px;
    border-radius: 18px;
    background: rgba(20, 26, 18, 0.62);
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.18);
    color: #f5ecd5;
    font-size: 1.1rem;
    font-weight: bold;
    letter-spacing: 0.06em;
    text-align: center;
    z-index: 4;

}

@media (max-width: 960px) {
    .talon-empty-box {
        min-width: 108px;
        min-height: 58px;
        padding: 10px 14px;
        font-size: 0.92rem;
    }
}
/* === Talon Hit Area === */
.talon-hit-area {
    position: absolute;
    inset: 0;
    display: block;
}
/* === Clickable Empty Talon Action === */
.talon-empty-box--action {
    background: linear-gradient(180deg, #5f956c 0%, #426c4d 100%);
    border: 1px solid rgba(0, 0, 0, 0.28);
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.18);
    color: #fff4d6;
    pointer-events: auto;
    text-decoration: none;
}

.talon-empty-box--action:hover,
.talon-empty-box--action:focus {
    color: #fff8ea;
    text-decoration: none;
}
/* === Multidraw Talon Action === */
.talon-empty-box--multidraw {
    top: 50%;
    left: 50%;
    right: auto;
    bottom: auto;
    transform: translate(-50%, -50%);
    min-width: 0;
    min-height: 0;
    padding: 12px 18px;
    font-size: 1.05rem;
}
/* === Suit Change Hand Preview === */
.popup-box {
    width: min(92vw, 680px);
    max-width: 680px;
}

.popup-suit-change {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.popup-hand-preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 14px 16px 16px;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(122, 91, 44, 0.14) 0%, rgba(68, 47, 24, 0.06) 100%);
    border: 1px solid rgba(129, 94, 53, 0.18);
}

.popup-hand-preview__title {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0;
    color: #3a2919;
    font-size: 1rem;
    font-weight: bold;
    letter-spacing: 0.04em;
    text-align: center;
}

.popup-mini-cards {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0;
    padding: 4px 0 2px;
    width: 100%;
}

.popup-mini-cards--empty {
    justify-content: center;
}

.popup-mini-cards__empty {
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px dashed rgba(94, 66, 38, 0.24);
    color: #6d5031;
    font-size: 0.9rem;
    background: rgba(255, 255, 255, 0.4);
}

.popup-hand-card {
    display: block;
    width: 72px;
    height: 115px;
    margin-left: -24px;
    border-radius: 10px;
    box-shadow: none;
    background: transparent;
}

.popup-mini-cards .popup-hand-card:first-child {
    margin-left: 0;
}

.popup-grid--suit-change {
    padding: 0;
    align-items: stretch;
}

.popup-grid--suit-change .suit-choice {
    width: 100%;
    min-height: 96px;
    margin: 0;
    padding: 12px 16px;
    align-items: stretch;
    justify-content: center;
    gap: 8px;
    background: linear-gradient(180deg, #fffaf0 0%, #f0e4cf 100%);
    border: 1px solid rgba(126, 95, 57, 0.22);
    box-shadow: 0 12px 22px rgba(0, 0, 0, 0.08);
}

.popup-grid--suit-change .suit-choice:hover {
    background: linear-gradient(180deg, #fffdf7 0%, #f5e8d2 100%);
}

.popup-grid--suit-change .suit-choice--best {
    border-color: rgba(177, 137, 71, 0.55);
    box-shadow: 0 0 0 2px rgba(221, 188, 117, 0.22), 0 14px 24px rgba(0, 0, 0, 0.1);
}

.suit-choice__header {
    display: flex;
    align-items: center;
    gap: 12px;
}

.suit-choice__copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: 4px;
}

.suit-choice__count {
    font-size: 0.78rem;
    font-weight: bold;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #7a5830;
}

.popup-grid--suit-change .suit-symbol {
    width: auto;
    min-width: 0;
    height: 38px;
    min-height: 38px;
    margin: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.suit-choice__icon-img {
    width: auto;
    height: 38px;
    display: block;
}

.popup-grid--suit-change .suit-label {
    min-height: 0;
    margin: 0;
    justify-content: flex-start;
    text-align: left;
    color: #2c1e11;
    font-size: 1.12rem;
}

@media (max-width: 760px) {
    .popup-box {
        width: min(94vw, 500px);
        padding: 1.25em;
    }

    .popup-grid--suit-change {
        grid-template-columns: 1fr;
    }
    .popup-hand-card {
        width: 62px;
        height: 99px;
        margin-left: -20px;
    }

    .popup-grid--suit-change .suit-choice {
        min-height: 88px;
        padding: 10px 14px;
    }
}

/* === Legacy Lobby Leaderboard === */
.lobby-shell {
    max-width: 1080px;
    margin: 2rem auto;
    display: grid;
    grid-template-columns: minmax(320px, 1.1fr) minmax(280px, 0.9fr);
    gap: 22px;
    align-items: start;
}

.lobby-card {
    background: rgba(255, 255, 255, 0.88);
    padding: 2rem;
    border-radius: 18px;
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.22);
    border: 1px solid rgba(255, 246, 220, 0.3);
}

.lobby-card--leaderboard {
    background: linear-gradient(180deg, rgba(255, 247, 223, 0.94) 0%, rgba(236, 218, 180, 0.9) 100%);
}

.lobby-primary-action {
    display: flex;
    justify-content: center;
}

.lobby-primary-action .btn {
    min-width: 240px;
}

.lobby-card__subheading {
    margin-top: 1rem;
    text-align: center;
    font-weight: bold;
    color: #52351c;
    letter-spacing: 0.04em;
}

.lobby-card__footer {
    margin-top: 1.5rem;
    text-align: left;
}

.leaderboard-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 1rem;
}

.leaderboard-header h2 {
    margin: 0;
    font-size: 1.5rem;
    color: #2f2114;
    text-align: left;
    text-shadow: none;
}

.leaderboard-header p {
    margin: 0.35rem 0 0;
    color: #6c4b2d;
    font-size: 0.95rem;
}

.leaderboard-table-wrap {
    overflow: hidden;
    border-radius: 14px;
    border: 1px solid rgba(92, 63, 31, 0.16);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

.leaderboard-table {
    width: 100%;
    border-collapse: collapse;
    background: rgba(255, 252, 244, 0.9);
}

.leaderboard-table th,
.leaderboard-table td {
    padding: 0.9rem 0.95rem;
    text-align: left;
}

.leaderboard-table th {
    background: rgba(82, 53, 28, 0.9);
    color: #fff0c9;
    font-size: 0.82rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.leaderboard-table tbody tr:nth-child(odd) {
    background: rgba(255, 248, 232, 0.92);
}

.leaderboard-table tbody tr:nth-child(even) {
    background: rgba(247, 235, 206, 0.9);
}

.leaderboard-table tbody tr + tr {
    border-top: 1px solid rgba(108, 75, 45, 0.12);
}

.leaderboard-rank {
    width: 52px;
    font-size: 1.1rem;
    font-weight: bold;
    color: #7a5830;
}

.leaderboard-player {
    font-weight: bold;
    color: #2f2114;
}

.leaderboard-record {
    white-space: nowrap;
    color: #52351c;
    font-variant-numeric: tabular-nums;
}

.leaderboard-rate {
    color: #7a5830;
    font-size: 0.92rem;
}


.leaderboard-footer {
    margin-top: 0.85rem;
    color: rgba(82, 53, 28, 0.76);
    font-size: 0.88rem;
    text-align: right;
    letter-spacing: 0.03em;
}
.leaderboard-empty {
    padding: 1.2rem 1rem;
    border-radius: 14px;
    background: rgba(255, 252, 244, 0.75);
    border: 1px dashed rgba(108, 75, 45, 0.26);
    color: #5a4028;
    text-align: center;
}

@media (max-width: 960px) {
    .lobby-shell {
        grid-template-columns: 1fr;
        margin: 1.25rem auto 2rem;
        gap: 16px;
        padding: 0 10px;
    }

    .lobby-card {
        padding: 1.35rem;
    }

    .leaderboard-table th,
    .leaderboard-table td {
        padding: 0.8rem 0.7rem;
    }
}

/* === Olympics === */
.btn--secondary {
    background: linear-gradient(180deg, #8c6936 0%, #6d4f25 100%);
}

.btn--secondary:hover {
    background: linear-gradient(180deg, #9a7440 0%, #76572a 100%);
}

.lobby-primary-actions {
    display: grid;
    gap: 10px;
}

.olympics-panel {
    max-width: 1320px;
    margin: 0 auto 20px;
    padding: 18px 20px;
}

.olympics-panel__header {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: flex-start;
    margin-bottom: 18px;
}

.olympics-panel__title {
    margin: 4px 0 0;
    color: #fff0c9;
    text-align: left;
    text-shadow: none;
}

.olympics-panel__facts {
    display: grid;
    grid-template-columns: repeat(4, minmax(120px, 1fr));
    gap: 10px;
}

.olympics-fact {
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #f6ebcf;
}

.olympics-fact span {
    display: block;
    font-size: 0.76rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #d8c59f;
    margin-bottom: 6px;
}

.olympics-fact strong {
    font-size: 1.05rem;
}

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

.olympics-column {
    min-width: 0;
    padding: 16px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.olympics-column h3 {
    margin: 0 0 12px;
    color: #fff0c9;
    font-size: 1rem;
}

.olympics-player-list,
.olympics-history-list,
.olympics-log-list {
    display: grid;
    gap: 10px;
}

.olympics-player-card {
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(34, 42, 30, 0.88);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #f7f1df;
}

.olympics-player-card--self {
    border-color: rgba(199, 166, 82, 0.55);
    box-shadow: 0 0 0 1px rgba(199, 166, 82, 0.18) inset;
}

.olympics-player-card--eliminated {
    background: rgba(58, 30, 25, 0.88);
}

.olympics-player-card__name {
    font-weight: bold;
    margin-bottom: 4px;
}

.olympics-player-card__meta {
    font-size: 0.88rem;
    color: #d8c59f;
}

.olympics-history-link {
    display: block;
    padding: 11px 13px;
    border-radius: 12px;
    background: rgba(34, 42, 30, 0.88);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #f7f1df !important;
}

.olympics-history-link.is-active {
    border-color: rgba(199, 166, 82, 0.55);
    background: rgba(73, 58, 27, 0.9);
}

.olympics-log-list {
    max-height: 260px;
    overflow-y: auto;
}

.olympics-log-entry,
.olympics-empty {
    padding: 11px 13px;
    border-radius: 12px;
    background: rgba(34, 42, 30, 0.88);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #f7f1df;
}

@media (max-width: 960px) {
    .olympics-panel__header,
    .olympics-panel__facts {
        grid-template-columns: 1fr 1fr;
        display: grid;
    }

    .olympics-panel__header {
        grid-template-columns: 1fr;
    }

    .olympics-panel__grid {
        grid-template-columns: 1fr;
    }
}
/* === Compact Olympics Panel === */
.olympics-panel--compact {
    padding: 14px 16px;
}

.olympics-panel__topline {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.olympics-panel--compact .table-panel__label {
    margin-bottom: 0;
}

.olympics-summary-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.olympics-summary-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.4rem 0.75rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #f5ecd5;
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.olympics-summary-chip--accent {
    background: rgba(95, 149, 108, 0.26);
    border-color: rgba(145, 199, 154, 0.28);
    color: #fff6dc;
}

.olympics-panel__layout {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(260px, 0.95fr);
    gap: 12px;
    align-items: start;
}

.olympics-card {
    min-width: 0;
    padding: 12px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.olympics-card h3 {
    margin: 0 0 10px;
    color: #fff0c9;
    font-size: 0.96rem;
}

.olympics-card--players {
    grid-row: span 2;
}

.olympics-player-list--compact,
.olympics-history-list--compact,
.olympics-log-list--compact {
    display: grid;
    gap: 8px;
}

.olympics-player-row {
    padding: 9px 10px;
    border-radius: 12px;
    background: rgba(34, 42, 30, 0.88);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #f7f1df;
}

.olympics-player-row--self {
    border-color: rgba(199, 166, 82, 0.55);
    box-shadow: 0 0 0 1px rgba(199, 166, 82, 0.16) inset;
}

.olympics-player-row--eliminated {
    background: rgba(58, 30, 25, 0.88);
}

.olympics-player-row__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: stretch;
}

.olympics-player-row__name {
    font-weight: bold;
    color: #fff6dc;
}

.olympics-player-row__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    font-size: 0.82rem;
    color: #d8c59f;
}

.olympics-status,
.olympics-history-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.22rem 0.58rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: bold;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
}

.olympics-status--active {
    background: rgba(75, 124, 87, 0.34);
    color: #ecf7ef;
    border: 1px solid rgba(114, 174, 129, 0.28);
}

.olympics-status--eliminated {
    background: rgba(141, 72, 61, 0.34);
    color: #ffe5dd;
    border: 1px solid rgba(182, 95, 79, 0.28);
}

.olympics-history-list--compact {
    max-height: 182px;
    overflow-y: auto;
}

.olympics-history-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 12px;
    background: rgba(34, 42, 30, 0.88);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #f7f1df !important;
    font-size: 0.84rem;
    line-height: 1.3;
}

.olympics-history-link__label {
    min-width: 0;
    flex: 1 1 auto;
}

.olympics-history-link__badges {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.olympics-history-link.is-current {
    border-color: rgba(95, 149, 108, 0.34);
}

.olympics-history-link.is-active {
    background: rgba(73, 58, 27, 0.9);
    border-color: rgba(199, 166, 82, 0.55);
}

.olympics-history-badge {
    background: rgba(255, 255, 255, 0.1);
    color: #f5ecd5;
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.olympics-history-badge--selected {
    background: rgba(199, 166, 82, 0.24);
    border-color: rgba(199, 166, 82, 0.4);
    color: #fff0c9;
}

.olympics-log-panel {
    padding: 0;
    overflow: hidden;
}

.olympics-log-panel .table-panel__label {
    padding: 12px 12px 0;
    margin-bottom: 8px;
}

.olympics-log-list--compact {
    max-height: 182px;
    overflow-y: auto;
    font-family: monospace;
    font-size: 0.82rem;
}

.olympics-log-entry,
.olympics-empty--compact {
    padding: 7px 10px;
    color: #f7f1df;
}

.olympics-log-entry:nth-child(odd) {
    background: rgba(0, 0, 0, 0.2);
}

.olympics-log-entry:nth-child(even) {
    background: rgba(0, 0, 0, 0.08);
}

.olympics-empty--compact {
    border-radius: 0;
    background: transparent;
    border: 0;
}

@media (max-width: 960px) {
    .olympics-panel__topline {
        flex-direction: column;
        align-items: stretch;
    }

    .olympics-summary-badges {
        justify-content: flex-start;
    }

    .olympics-panel__layout {
        grid-template-columns: 1fr;
    }

    .olympics-card--players {
        grid-row: auto;
    }

    .olympics-history-list--compact,
    .olympics-log-list--compact {
        max-height: 152px;
    }
}
/* === Olympics Three-Column Compact Override === */
.olympics-panel--compact {
    padding: 14px 16px;
}

.olympics-panel__layout--three-columns {
    display: grid;
    grid-template-columns: minmax(320px, 1.2fr) minmax(280px, 1fr) minmax(260px, 0.95fr);
    gap: 12px;
    align-items: start;
}

.olympics-card {
    min-width: 0;
    padding: 12px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.olympics-card--players,
.olympics-card--log,
.olympics-card--games {
    grid-row: auto;
}

.olympics-player-row__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    margin-bottom: 6px;
}

.olympics-player-row__submeta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    align-items: center;
    margin-top: 6px;
    font-size: 0.8rem;
    color: #d8c59f;
}

.olympics-player-row__meta {
    font-size: 0.8rem;
    color: #d8c59f;
}

.olympics-start-cards {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    aspect-ratio: 1 / 1;
    width: auto;
    min-width: 86px;
    padding: 0.48rem 0.6rem;
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(199, 166, 82, 0.22) 0%, rgba(95, 149, 108, 0.2) 100%);
    border: 1px solid rgba(199, 166, 82, 0.32);
    color: #fff5d6;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.olympics-start-cards__count {
    font-size: 1.95rem;
    font-weight: bold;
    line-height: 1;
}

.olympics-start-cards__label {
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-top: 4px;
}

.olympics-log-panel {
    padding: 0;
    overflow: hidden;
}

.olympics-log-panel .table-panel__label {
    padding: 12px 12px 0;
    margin-bottom: 8px;
}

.olympics-log-list--seamless {
    max-height: 250px;
    overflow-y: auto;
    font-family: monospace;
    font-size: 0.82rem;
}

.olympics-log-list--seamless .olympics-log-entry {
    padding: 7px 10px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #f7f1df;
}

.olympics-log-list--seamless .olympics-log-entry:nth-child(odd) {
    background: rgba(0, 0, 0, 0.08);
}

.olympics-log-list--seamless .olympics-log-entry:nth-child(even) {
    background: rgba(0, 0, 0, 0.2);
}

.olympics-history-list--compact {
    max-height: 250px;
    overflow-y: auto;
}

@media (max-width: 1100px) {
    .olympics-panel__layout--three-columns {
        grid-template-columns: 1fr;
    }

    .olympics-log-list--seamless,
    .olympics-history-list--compact {
        max-height: 170px;
    }
}
/* === Olympics Position And Current Game Highlight === */
.game-table-shell .olympics-panel {
    margin: 18px 0 0;
    max-width: none;
}

.olympics-panel__layout--three-columns {
    display: grid;
    grid-template-columns: minmax(320px, 1.2fr) minmax(280px, 1fr) minmax(260px, 0.95fr);
    gap: 12px;
    align-items: start;
}

.olympics-history-link.is-current {
    background: linear-gradient(180deg, rgba(78, 132, 91, 0.95) 0%, rgba(46, 86, 57, 0.96) 100%);
    border-color: rgba(160, 227, 171, 0.44);
    box-shadow: 0 0 0 1px rgba(111, 185, 127, 0.26) inset, 0 10px 22px rgba(0, 0, 0, 0.14);
}

.olympics-history-link.is-current .olympics-history-badge {
    background: rgba(226, 248, 229, 0.18);
    border-color: rgba(226, 248, 229, 0.26);
    color: #eff9f0;
}

.olympics-history-link.is-active {
    border-color: rgba(199, 166, 82, 0.55);
}

@media (max-width: 1100px) {
    .olympics-panel__layout--three-columns {
        grid-template-columns: 1fr;
    }
}
/* === Olympics Game Start Overlay === */
.game-start-overlay {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: radial-gradient(circle at center, rgba(255, 248, 228, 0.16) 0%, rgba(18, 20, 14, 0.34) 42%, rgba(6, 8, 5, 0.62) 100%);
    backdrop-filter: blur(4px);
    opacity: 1;
    visibility: visible;
    pointer-events: none;
    z-index: 1500;
    transition: opacity 0.48s ease-out, visibility 0.48s ease-out;
}

.game-start-overlay--hidden,
.game-start-overlay--fading {
    opacity: 0;
    visibility: hidden;
}

.game-start-overlay__title {
    padding: 0.32em 0.72em 0.36em;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(49, 108, 63, 0.9) 0%, rgba(20, 57, 31, 0.92) 100%);
    border: 1px solid rgba(181, 236, 191, 0.42);
    box-shadow: 0 22px 48px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.16);
    color: #f7fff0;
    font-size: clamp(2.8rem, 9vw, 6rem);
    font-weight: bold;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-shadow: 0 2px 0 rgba(16, 36, 20, 0.78);
}

@media (max-width: 640px) {
    .game-start-overlay__title {
        letter-spacing: 0.1em;
        font-size: clamp(2.2rem, 12vw, 4rem);
    }
}

/* === Olympics Results And Winner Crown === */
.olympics-winner-crown {
    display: inline-block;
    line-height: 1;
}

.olympics-winner-crown--inline {
    font-size: 1.25em;
    margin-right: 0.18em;
    vertical-align: -0.08em;
}

.olympics-winner-crown--heading {
    font-size: 1.25em;
    margin-right: 0.18em;
    vertical-align: -0.06em;
}

.olympics-panel--results .olympics-log-panel {
    overflow: visible;
}

.olympics-panel--results .olympics-log-list--seamless,
.olympics-panel--results .olympics-history-list--compact {
    max-height: none;
    overflow: visible;
}
.olympics-summary-chip__icon {
    display: inline-block;
    margin-left: 0.35rem;
    line-height: 1;
}

.olympics-summary-chip--winner {
    background: rgba(199, 166, 82, 0.2);
    border-color: rgba(214, 184, 107, 0.3);
}

.olympics-summary-chip--losses {
    background: rgba(141, 72, 61, 0.2);
    border-color: rgba(182, 95, 79, 0.26);
}

.olympics-status--winner {
    background: rgba(199, 166, 82, 0.24);
    color: #fff0c9;
    border: 1px solid rgba(214, 184, 107, 0.34);
}

.olympics-status--loss {
    background: rgba(141, 72, 61, 0.34);
    color: #ffe5dd;
    border: 1px solid rgba(182, 95, 79, 0.28);
}

.olympics-player-row__content {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}

.olympics-player-row__footer {
    display: none;
}

.olympics-record-pill {
    display: inline-flex;
    align-items: stretch;
    align-self: flex-start;
    margin-top: 8px;
    border-radius: 999px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.olympics-record-pill__segment {
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;
    padding: 0.28rem 0.58rem;
    min-width: 58px;
    justify-content: center;
    font-size: 0.74rem;
    font-weight: bold;
    line-height: 1;
}

.olympics-record-pill__segment--wins {
    background: rgba(95, 149, 108, 0.3);
    color: #ecf7ef;
}

.olympics-record-pill__segment--losses {
    background: rgba(141, 72, 61, 0.32);
    color: #ffe5dd;
}

.olympics-record-pill__count {
    font-variant-numeric: tabular-nums;
}

.olympics-record-pill__icon {
    line-height: 1;
}
/* === Olympics Player Row Final Layout Override === */
.olympics-player-row__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: stretch;
    margin-bottom: 0;
}

.olympics-player-row__content {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}

.olympics-player-row__submeta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    align-items: center;
    margin-top: 6px;
}

.olympics-start-cards {
    align-self: stretch;
    aspect-ratio: 1 / 1;
    min-width: 86px;
    padding: 0.48rem 0.6rem;
    border-radius: 16px;
}

.olympics-start-cards__count {
    font-size: 1.95rem;
}

.olympics-start-cards__label {
    font-size: 0.72rem;
    margin-top: 4px;
}

.olympics-record-pill {
    align-self: flex-start;
    justify-self: auto;
    margin-top: 8px;
}
.lobby-game-link {
    display: grid;
    gap: 0.45rem;
    text-align: left;
    background: linear-gradient(180deg, rgba(87, 63, 32, 0.9) 0%, rgba(63, 44, 20, 0.94) 100%);
    border: 1px solid rgba(92, 63, 31, 0.28);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.14);
}

.lobby-game-link:hover {
    background: linear-gradient(180deg, rgba(97, 71, 37, 0.95) 0%, rgba(70, 49, 23, 0.98) 100%);
}

.lobby-game-link__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.lobby-game-link__id {
    color: #fff0c9;
    font-weight: bold;
}

.lobby-game-link__players {
    color: #f9f3e7;
    line-height: 1.4;
}

.lobby-game-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.28rem 0.62rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: bold;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
}

.lobby-game-status--running {
    background: rgba(95, 149, 108, 0.24);
    border: 1px solid rgba(114, 174, 129, 0.35);
    color: #ecf7ef;
}

.lobby-game-status--ended {
    background: rgba(141, 72, 61, 0.2);
    border: 1px solid rgba(182, 95, 79, 0.3);
    color: #ffe5dd;
}

@media (max-width: 640px) {
    .lobby-game-link__meta {
        flex-direction: column;
        align-items: flex-start;
    }
}
.game-start-overlay--loser {
    background: radial-gradient(circle at center, rgba(255, 218, 218, 0.18) 0%, rgba(63, 14, 18, 0.38) 42%, rgba(17, 6, 7, 0.68) 100%);
}

.game-start-overlay--loser .game-start-overlay__title {
    background: linear-gradient(180deg, rgba(157, 53, 53, 0.92) 0%, rgba(92, 21, 24, 0.94) 100%);
    border-color: rgba(255, 190, 190, 0.42);
    color: #fff2f2;
    text-shadow: 0 2px 0 rgba(62, 15, 18, 0.78);
}

.game-start-overlay--spectator {
    background: radial-gradient(circle at center, rgba(215, 215, 215, 0.08) 0%, rgba(18, 20, 22, 0.3) 38%, rgba(4, 5, 7, 0.78) 100%);
}

.game-start-overlay--spectator .game-start-overlay__title {
    background: linear-gradient(180deg, rgba(42, 46, 51, 0.7) 0%, rgba(16, 18, 21, 0.78) 100%);
    border-color: rgba(210, 215, 220, 0.18);
    box-shadow: 0 22px 48px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    color: rgba(247, 249, 250, 0.88);
    text-shadow: 0 2px 0 rgba(10, 12, 14, 0.72);
}
.lobby-game-tree {
    display: grid;
    gap: 0.6rem;
}

.lobby-olympics-group {
    position: relative;
    padding-left: 0.9rem;
}

.lobby-olympics-group::before {
    content: '';
    position: absolute;
    left: 0.35rem;
    top: 1.55rem;
    bottom: 0.8rem;
    width: 1px;
    background: rgba(92, 63, 31, 0.24);
}

.lobby-olympics-group__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.35rem;
    padding: 0 0.1rem;
}

.lobby-olympics-group__title {
    font-weight: bold;
    color: #5a4028;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: 0.8rem;
}

.lobby-olympics-group__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.2rem 0.52rem;
    border-radius: 999px;
    background: rgba(82, 53, 28, 0.1);
    border: 1px solid rgba(92, 63, 31, 0.18);
    color: #6c4b2d;
    font-size: 0.76rem;
    font-weight: bold;
}

.lobby-olympics-group__children {
    display: grid;
    gap: 0.45rem;
}

.lobby-game-link {
    display: grid;
    gap: 0.28rem;
    text-align: left;
    margin: 0;
    padding: 0.58rem 0.8rem;
    font-size: 0.94rem;
    line-height: 1.25;
    background: linear-gradient(180deg, rgba(87, 63, 32, 0.9) 0%, rgba(63, 44, 20, 0.94) 100%);
    border: 1px solid rgba(92, 63, 31, 0.28);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.14);
}

.lobby-game-link--child {
    position: relative;
    margin-left: 0.5rem;
}

.lobby-game-link--child::before {
    content: '';
    position: absolute;
    left: -0.58rem;
    top: 50%;
    width: 0.46rem;
    border-top: 1px solid rgba(92, 63, 31, 0.24);
}

.lobby-game-link:hover {
    background: linear-gradient(180deg, rgba(97, 71, 37, 0.95) 0%, rgba(70, 49, 23, 0.98) 100%);
}

.lobby-game-link__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.7rem;
}

.lobby-game-link__id {
    color: #fff0c9;
    font-weight: bold;
}

.lobby-game-link__id-muted {
    color: rgba(255, 240, 201, 0.74);
    font-weight: normal;
}

.lobby-game-link__players {
    color: #f9f3e7;
    line-height: 1.3;
    font-size: 0.88rem;
}

.lobby-game-result {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    width: fit-content;
    padding: 0.18rem 0.45rem;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: bold;
    letter-spacing: 0.03em;
}

.lobby-game-result--winner {
    background: rgba(95, 149, 108, 0.24);
    color: #eff9f1;
}

.lobby-game-result--loser {
    background: rgba(141, 72, 61, 0.2);
    color: #ffe5dd;
}

.lobby-game-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.22rem 0.52rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: bold;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
}

.lobby-game-status--running {
    background: rgba(95, 149, 108, 0.24);
    border: 1px solid rgba(114, 174, 129, 0.35);
    color: #ecf7ef;
}

.lobby-game-status--waiting {
    background: rgba(199, 166, 82, 0.22);
    border: 1px solid rgba(214, 184, 107, 0.34);
    color: #fff0c9;
}

.lobby-game-status--ended {
    background: rgba(141, 72, 61, 0.2);
    border: 1px solid rgba(182, 95, 79, 0.3);
    color: #ffe5dd;
}

@media (max-width: 640px) {
    .lobby-olympics-group {
        padding-left: 0.7rem;
    }

    .lobby-game-link__meta,
    .lobby-olympics-group__header {
        flex-direction: column;
        align-items: flex-start;
    }
}
.lobby-game-tree {
    gap: 0.45rem;
}

.lobby-olympics-group {
    padding-left: 0.8rem;
}

.lobby-olympics-group::before {
    left: 0.28rem;
    top: 1.35rem;
    bottom: 0.65rem;
    background: rgba(90, 105, 131, 0.24);
}

.lobby-olympics-group__header {
    margin-bottom: 0.28rem;
}

.lobby-olympics-group__title {
    color: #41506a;
    font-size: 0.76rem;
}

.lobby-olympics-group__badge {
    background: rgba(75, 96, 126, 0.1);
    border-color: rgba(75, 96, 126, 0.18);
    color: #40516a;
    padding: 0.16rem 0.48rem;
}

.lobby-game-link {
    gap: 0.2rem;
    padding: 0.48rem 0.68rem;
    border-radius: 10px;
    font-size: 0.89rem;
    box-shadow: 0 7px 16px rgba(18, 28, 43, 0.12);
}

.lobby-game-link--classic {
    background: linear-gradient(180deg, rgba(59, 78, 101, 0.9) 0%, rgba(43, 58, 78, 0.95) 100%);
    border-color: rgba(90, 122, 151, 0.26);
}

.lobby-game-link--classic:hover {
    background: linear-gradient(180deg, rgba(68, 90, 117, 0.94) 0%, rgba(47, 65, 88, 0.98) 100%);
}

.lobby-game-link--olympics {
    background: linear-gradient(180deg, rgba(70, 87, 79, 0.92) 0%, rgba(49, 63, 58, 0.96) 100%);
    border-color: rgba(116, 145, 132, 0.26);
}

.lobby-game-link--olympics:hover {
    background: linear-gradient(180deg, rgba(78, 96, 88, 0.96) 0%, rgba(55, 70, 64, 0.99) 100%);
}

.lobby-game-link--child {
    margin-left: 0.42rem;
}

.lobby-game-link--child::before {
    left: -0.5rem;
    width: 0.38rem;
    border-top-color: rgba(90, 105, 131, 0.28);
}

.lobby-game-link__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.55rem;
}

.lobby-game-link__header-main {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
    flex-wrap: wrap;
}

.lobby-game-link__id {
    color: #f4f7fb;
    font-size: 0.83rem;
    letter-spacing: 0.01em;
}

.lobby-game-link__id-muted {
    color: rgba(228, 236, 247, 0.72);
}

.lobby-game-link__players {
    display: flex;
    align-items: center;
    gap: 0.34rem;
    flex-wrap: wrap;
    color: #d4dde8;
    font-size: 0.82rem;
}

.lobby-player-name {
    color: #ffffff;
    font-weight: 700;
}

.lobby-player-separator {
    color: rgba(201, 213, 227, 0.52);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.lobby-game-result {
    padding: 0.16rem 0.42rem;
    font-size: 0.7rem;
}

.lobby-game-result--winner {
    background: rgba(68, 161, 111, 0.28);
    color: #eefcf4;
}

.lobby-game-result--loser {
    background: rgba(177, 87, 87, 0.24);
    color: #fff0f0;
}

.lobby-game-status {
    padding: 0.18rem 0.44rem;
    font-size: 0.66rem;
}

.lobby-game-status--running {
    background: rgba(82, 165, 120, 0.2);
    border-color: rgba(95, 187, 137, 0.28);
}

.lobby-game-status--waiting {
    background: rgba(198, 164, 89, 0.18);
    border-color: rgba(214, 184, 107, 0.3);
}

.lobby-game-status--ended {
    background: rgba(187, 95, 95, 0.18);
    border-color: rgba(214, 122, 122, 0.28);
}

@media (max-width: 640px) {
    .lobby-game-link {
        padding: 0.46rem 0.62rem;
        border-radius: 10px;
    }

    .lobby-game-link__header,
    .lobby-game-link__header-main,
    .lobby-olympics-group__header {
        align-items: flex-start;
        flex-direction: column;
    }
}

.lobby-column {
    display: grid;
    gap: 18px;
}

.lobby-card--actions,
.lobby-card--recent-games {
    background: linear-gradient(180deg, rgba(251, 247, 239, 0.97) 0%, rgba(244, 238, 228, 0.95) 100%);
    border: 1px solid rgba(195, 179, 150, 0.24);
    box-shadow: 0 14px 28px rgba(50, 39, 24, 0.12);
}

.lobby-card__header h2 {
    color: #3c3021;
}

.lobby-card__header p {
    color: #7a6750;
}

.lobby-games-wrap {
    padding: 0.9rem;
    background: rgba(255, 252, 247, 0.8);
    border-color: rgba(195, 179, 150, 0.2);
}

.lobby-game-tree {
    gap: 0.4rem;
}

.lobby-olympics-group {
    padding-left: 0.72rem;
}

.lobby-olympics-group::before {
    background: rgba(128, 157, 141, 0.26);
}

.lobby-olympics-group__title {
    color: #536e63;
}

.lobby-olympics-group__badge {
    background: rgba(147, 178, 159, 0.16);
    border-color: rgba(120, 154, 133, 0.2);
    color: #4d695d;
}

.lobby-game-link {
    gap: 0.18rem;
    padding: 0.44rem 0.62rem;
    border-radius: 10px;
    border-width: 1px;
    box-shadow: 0 6px 14px rgba(53, 44, 30, 0.08);
}

.lobby-game-link--classic {
    background: linear-gradient(180deg, rgba(204, 216, 227, 0.95) 0%, rgba(191, 203, 214, 0.93) 100%);
    border-color: rgba(122, 145, 165, 0.42);
}

.lobby-game-link--classic:hover {
    background: linear-gradient(180deg, rgba(212, 223, 232, 0.97) 0%, rgba(198, 210, 220, 0.95) 100%);
}

.lobby-game-link--olympics {
    background: linear-gradient(180deg, rgba(205, 220, 207, 0.95) 0%, rgba(193, 209, 195, 0.93) 100%);
    border-color: rgba(123, 152, 129, 0.42);
}

.lobby-game-link--olympics:hover {
    background: linear-gradient(180deg, rgba(213, 227, 215, 0.97) 0%, rgba(200, 215, 202, 0.95) 100%);
}

.lobby-game-link--child::before {
    border-top-color: rgba(129, 160, 144, 0.38);
}

.lobby-game-link__id {
    color: #2f3c46;
}

.lobby-game-link__id-muted {
    color: rgba(61, 76, 88, 0.64);
}

.lobby-game-link__players {
    color: #586873;
}

.lobby-player-name {
    color: #233039;
}

.lobby-player-separator {
    color: rgba(88, 104, 115, 0.58);
}

.lobby-game-result {
    padding: 0.14rem 0.38rem;
    border: 1px solid transparent;
}

.lobby-game-result--winner {
    background: rgba(117, 191, 141, 0.18);
    border-color: rgba(117, 191, 141, 0.22);
    color: #316644;
}

.lobby-game-result--loser {
    background: rgba(214, 143, 143, 0.16);
    border-color: rgba(214, 143, 143, 0.22);
    color: #8a4545;
}

.lobby-game-status {
    background: rgba(255, 255, 255, 0.72);
}

.lobby-game-status--running {
    border-color: rgba(95, 187, 137, 0.24);
    color: #2f6b46;
}

.lobby-game-status--waiting {
    border-color: rgba(214, 184, 107, 0.24);
    color: #8a6820;
}

.lobby-game-status--ended {
    border-color: rgba(214, 122, 122, 0.22);
    color: #8a4545;
}

@media (max-width: 960px) {
    .lobby-column {
        gap: 16px;
    }
}

.lobby-olympics-group::before {
    background: rgba(120, 132, 118, 0.22);
}

.lobby-olympics-group__title {
    color: #5f5d4f;
}

.lobby-olympics-group__badge {
    background: rgba(191, 197, 177, 0.18);
    border-color: rgba(151, 159, 136, 0.22);
    color: #666554;
}

.lobby-game-link {
    color: #2f2a22;
    text-shadow: none;
    box-shadow: 0 7px 16px rgba(54, 43, 28, 0.1);
}

.lobby-game-link--classic {
    background: linear-gradient(180deg, rgba(198, 202, 198, 0.95) 0%, rgba(184, 189, 185, 0.93) 100%);
    border-color: rgba(126, 132, 127, 0.38);
}

.lobby-game-link--classic:hover {
    background: linear-gradient(180deg, rgba(204, 208, 204, 0.97) 0%, rgba(190, 195, 191, 0.95) 100%);
}

.lobby-game-link--olympics {
    background: linear-gradient(180deg, rgba(194, 202, 189, 0.95) 0%, rgba(181, 189, 176, 0.93) 100%);
    border-color: rgba(127, 139, 120, 0.38);
}

.lobby-game-link--olympics:hover {
    background: linear-gradient(180deg, rgba(201, 208, 196, 0.97) 0%, rgba(187, 195, 182, 0.95) 100%);
}

.lobby-game-link__id,
.lobby-game-link__id-muted,
.lobby-game-link__players,
.lobby-player-name,
.lobby-player-separator,
.lobby-game-result,
.lobby-game-status {
    text-shadow: none;
}

.lobby-game-link__id {
    color: #3d352a;
}

.lobby-game-link__id-muted {
    color: rgba(82, 75, 63, 0.7);
}

.lobby-game-link__players {
    color: #5d584d;
}

.lobby-player-name {
    color: #2f2c25;
}

.lobby-player-separator {
    color: rgba(106, 101, 91, 0.72);
}

.lobby-game-result--winner {
    background: rgba(129, 164, 117, 0.18);
    border-color: rgba(129, 164, 117, 0.24);
    color: #46603f;
}

.lobby-game-result--loser {
    background: rgba(179, 131, 120, 0.16);
    border-color: rgba(179, 131, 120, 0.22);
    color: #7c5048;
}

.lobby-game-status {
    background: rgba(247, 244, 236, 0.82);
}

.lobby-game-status--running {
    border-color: rgba(129, 164, 117, 0.24);
    color: #46603f;
}

.lobby-game-status--waiting {
    border-color: rgba(181, 155, 102, 0.24);
    color: #7e6330;
}

.lobby-game-status--ended {
    border-color: rgba(179, 131, 120, 0.22);
    color: #7c5048;
}

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

.lobby-card__footer .logout {
    display: inline-flex;
    justify-content: center;
}

.lobby-game-link {
    box-shadow: 0 8px 18px rgba(72, 54, 25, 0.12);
}

.lobby-game-link--classic {
    background: linear-gradient(180deg, rgba(206, 186, 145, 0.95) 0%, rgba(189, 168, 128, 0.93) 100%);
    border-color: rgba(143, 110, 60, 0.38);
}

.lobby-game-link--classic:hover {
    background: linear-gradient(180deg, rgba(214, 193, 151, 0.97) 0%, rgba(197, 176, 135, 0.95) 100%);
}

.lobby-game-link--olympics {
    background: linear-gradient(180deg, rgba(184, 199, 150, 0.95) 0%, rgba(167, 182, 133, 0.93) 100%);
    border-color: rgba(103, 126, 65, 0.38);
}

.lobby-game-link--olympics:hover {
    background: linear-gradient(180deg, rgba(191, 206, 157, 0.97) 0%, rgba(174, 189, 140, 0.95) 100%);
}

.lobby-olympics-group::before {
    background: rgba(125, 123, 84, 0.24);
}

.lobby-olympics-group__title {
    color: #6a5a2f;
}

.lobby-olympics-group__badge {
    background: rgba(183, 173, 118, 0.18);
    border-color: rgba(140, 126, 70, 0.22);
    color: #6b5b2f;
}

.lobby-game-link__id {
    color: #3f2f17;
}

.lobby-game-link__id-muted {
    color: rgba(86, 66, 35, 0.68);
}

.lobby-game-link__players {
    color: #5f4f33;
}

.lobby-player-name {
    color: #31250f;
}

.lobby-player-separator {
    color: rgba(107, 90, 55, 0.7);
}

.lobby-game-result--winner {
    background: rgba(122, 156, 73, 0.2);
    border-color: rgba(122, 156, 73, 0.26);
    color: #465d22;
}

.lobby-game-result--loser {
    background: rgba(169, 109, 87, 0.17);
    border-color: rgba(169, 109, 87, 0.22);
    color: #744131;
}

.lobby-game-status {
    background: rgba(248, 241, 224, 0.82);
}

.lobby-game-status--running {
    border-color: rgba(122, 156, 73, 0.24);
    color: #465d22;
}

.lobby-game-status--waiting {
    border-color: rgba(166, 132, 61, 0.24);
    color: #7b5f1f;
}

.lobby-game-status--ended {
    border-color: rgba(169, 109, 87, 0.22);
    color: #744131;
}

.player-panel h3 {
    min-height: 2.5rem;
}
.lobby-games-wrap {
    padding: 0;
    overflow: hidden;
}

.lobby-games-table {
    display: grid;
}

.lobby-games-group {
    display: grid;
}

.lobby-games-group + .lobby-game-row,
.lobby-game-row + .lobby-games-group,
.lobby-game-row + .lobby-game-row,
.lobby-games-group + .lobby-games-group {
    border-top: 1px solid rgba(118, 97, 63, 0.14);
}

.lobby-games-group__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0.8rem 1rem 0.55rem;
    background: rgba(160, 146, 101, 0.08);
}

.lobby-games-group__title {
    font-size: 0.88rem;
    font-weight: bold;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #6a5a2f;
}

.lobby-games-group__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.1rem;
    padding: 0.18rem 0.5rem;
    border-radius: 999px;
    background: rgba(183, 173, 118, 0.16);
    border: 1px solid rgba(140, 126, 70, 0.18);
    color: #6b5b2f;
    font-size: 0.78rem;
    font-weight: bold;
}

.lobby-games-group__children {
    position: relative;
}

.lobby-games-group__children::before {
    content: '';
    position: absolute;
    left: 1.05rem;
    top: 0.2rem;
    bottom: 0.2rem;
    width: 1px;
    background: rgba(125, 123, 84, 0.2);
}

.lobby-game-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    padding: 0.72rem 1rem;
    color: #2f2a22;
    text-decoration: none;
    text-shadow: none;
    background: transparent;
    transition: background-color 120ms ease;
}

.lobby-game-row:hover {
    
}

.lobby-game-row--child {
    position: relative;
    padding-left: 2.2rem;
}

.lobby-game-row--child::before {
    content: '';
    position: absolute;
    left: 1.05rem;
    top: 50%;
    width: 0.8rem;
    border-top: 1px solid rgba(125, 123, 84, 0.2);
}

.lobby-game-row__main {
    min-width: 0;
    display: grid;
    gap: 0.2rem;
}

.lobby-game-row__join-link {
    padding: 0.38rem 0.72rem;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    white-space: nowrap;
}

.lobby-game-row__title {
    color: #3f2f17;
    font-size: 0.94rem;
    font-weight: bold;
}

.lobby-game-row__title-muted {
    color: rgba(86, 66, 35, 0.68);
    font-weight: normal;
}

.lobby-game-row__players {
    display: flex;
    flex-wrap: wrap;
    gap: 0.34rem;
    align-items: center;
    min-width: 0;
    color: #5f4f33;
    font-size: 0.9rem;
}

.lobby-game-row__side {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    align-items: center;
}

.lobby-player-name,
.lobby-player-separator,
.lobby-game-result,
.lobby-game-status,
.lobby-game-row__title,
.lobby-game-row__title-muted {
    text-shadow: none;
}

@media (max-width: 720px) {
    .lobby-games-group__row,
    .lobby-game-row {
        padding-left: 0.85rem;
        padding-right: 0.85rem;
    }

    .lobby-game-row {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .lobby-game-row__side {
        justify-content: flex-start;
    }

    .lobby-games-group__children::before {
        left: 0.9rem;
    }

    .lobby-game-row--child {
        padding-left: 1.85rem;
    }

    .lobby-game-row--child::before {
        left: 0.9rem;
        width: 0.65rem;
    }
}

.lobby-games-wrap {
    padding: 0.95rem;
    overflow: hidden;
}

.lobby-games-table {
    display: grid;
    gap: 14px;
}

.lobby-games-group + .lobby-game-row,
.lobby-game-row + .lobby-games-group,
.lobby-game-row + .lobby-game-row,
.lobby-games-group + .lobby-games-group {
    border-top: 0;
}

.lobby-game-row {
    position: relative;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px;
    align-items: center;
    padding: 1rem 1.08rem;
    border: 1px solid rgba(93, 81, 55, 0.28);
    border-radius: 24px;
    overflow: hidden;
    box-shadow:
        0 16px 28px rgba(0, 0, 0, 0.18),
        inset 0 1px 0 rgba(255, 244, 214, 0.08);
    transition:
        transform 140ms ease,
        box-shadow 140ms ease,
        border-color 140ms ease;
}

.lobby-game-row:hover {
    transform: translateY(-1px);
    box-shadow:
        0 20px 34px rgba(0, 0, 0, 0.22),
        inset 0 1px 0 rgba(255, 244, 214, 0.1);
}

.lobby-game-row__overlay-link,
.lobby-game-row__overlay-link:link,
.lobby-game-row__overlay-link:visited,
.lobby-game-row__overlay-link:hover,
.lobby-game-row__overlay-link:active,
.lobby-game-row__overlay-link:focus {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
    background: transparent !important;
    color: inherit !important;
    text-decoration: none;
    text-shadow: none !important;
    box-shadow: none !important;
}

.lobby-game-row__overlay-link:focus-visible {
    outline: 2px solid rgba(222, 202, 149, 0.7);
    outline-offset: -2px;
}

.lobby-game-row--classic {
    grid-template-columns: 1fr;
    min-height: 124px;
    background:
        radial-gradient(circle at 88% 42%, rgba(153, 118, 57, 0.12) 0%, rgba(153, 118, 57, 0) 26%),
        linear-gradient(180deg, rgba(37, 34, 29, 0.98) 0%, rgba(25, 23, 20, 0.98) 100%);
}

.lobby-game-row--olympics {
    min-height: 168px;
    border-color: rgba(130, 145, 85, 0.34);
    background:
        radial-gradient(circle at 100% 100%, rgba(113, 165, 66, 0.22) 0%, rgba(113, 165, 66, 0) 42%),
        radial-gradient(circle at 0% 0%, rgba(66, 95, 48, 0.12) 0%, rgba(66, 95, 48, 0) 30%),
        linear-gradient(180deg, rgba(20, 31, 22, 0.99) 0%, rgba(15, 22, 16, 0.99) 100%);
    box-shadow:
        0 20px 36px rgba(0, 0, 0, 0.22),
        inset 0 1px 0 rgba(238, 244, 214, 0.08);
}

.lobby-game-row__main {
    min-width: 0;
    display: grid;
    gap: 0.85rem;
    position: relative;
    z-index: 2;
    pointer-events: none;
}

.lobby-game-row--classic .lobby-game-row__main {
    gap: 0;
}

.lobby-game-row__eyebrow {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 0.28rem 0.65rem;
    border-radius: 999px;
    background: rgba(129, 161, 79, 0.16);
    border: 1px solid rgba(153, 185, 99, 0.2);
    color: #dce8bc;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.lobby-game-row__versus {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem 0.6rem;
    min-width: 0;
}

.lobby-game-row__versus--centered {
    justify-content: center;
    width: 100%;
    text-align: center;
}

.lobby-game-player {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    padding: 0.28rem 0;
    color: #f6efdb;
    font-size: clamp(1.08rem, 1.5vw, 1.42rem);
    font-weight: 800;
    line-height: 1.18;
    letter-spacing: 0.01em;
    text-shadow: none;
}

.lobby-game-row--olympics .lobby-game-player {
    font-size: clamp(1.18rem, 1.9vw, 1.62rem);
}

.lobby-game-player--winner,
.lobby-game-player--loser {
    padding: 0.28rem 0.7rem;
    border-radius: 999px;
}

.lobby-game-player--winner {
    background: rgba(84, 150, 98, 0.24);
    box-shadow: inset 0 0 0 1px rgba(121, 194, 136, 0.18);
    color: #f0fff3;
}

.lobby-game-player--loser {
    background: rgba(159, 76, 70, 0.22);
    box-shadow: inset 0 0 0 1px rgba(207, 111, 103, 0.18);
    color: #fff0ec;
}

.lobby-game-player--placeholder {
    color: rgba(246, 239, 219, 0.54);
}

.lobby-player-separator {
    color: rgba(231, 222, 194, 0.58);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.lobby-olympics-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
}

.lobby-olympics-stats__player {
    display: grid;
    gap: 0.42rem;
    min-width: 0;
    padding: 0.72rem 0.82rem;
    border-radius: 16px;
    background: rgba(11, 22, 14, 0.4);
    border: 1px solid rgba(139, 160, 106, 0.16);
}

.lobby-olympics-stats__player.lobby-game-player--winner {
    background: rgba(54, 104, 63, 0.34);
    border-color: rgba(121, 194, 136, 0.22);
}

.lobby-olympics-stats__player.lobby-game-player--loser {
    background: rgba(97, 40, 36, 0.36);
    border-color: rgba(207, 111, 103, 0.2);
}

.lobby-olympics-stats__name {
    min-width: 0;
    color: #e6ddc4;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.lobby-game-row__side {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
    align-items: center;
    pointer-events: none;
}

.lobby-game-row--classic .lobby-game-row__side {
    justify-content: center;
    width: 100%;
}

.lobby-game-row__join-link {
    pointer-events: auto;
    position: relative;
    z-index: 3;
    padding: 0.52rem 0.86rem;
    border-color: rgba(214, 184, 107, 0.24);
    background: rgba(255, 250, 237, 0.08);
    color: #f9e8bc;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    white-space: nowrap;
}

.lobby-game-row__join-link:hover {
    background: rgba(255, 250, 237, 0.14);
}

.lobby-game-result,
.lobby-game-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.42rem 0.76rem;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
    text-shadow: none;
}

.lobby-game-status {
    background: rgba(255, 248, 231, 0.08);
    border-color: rgba(255, 248, 231, 0.1);
    color: #f5ebd0;
}

.lobby-game-status--running {
    background: rgba(78, 144, 91, 0.16);
    border-color: rgba(121, 194, 136, 0.18);
    color: #e7faec;
}

.lobby-game-status--waiting {
    background: rgba(170, 131, 55, 0.2);
    border-color: rgba(214, 184, 107, 0.24);
    color: #fff0c6;
}

.lobby-game-status--ended {
    background: rgba(124, 80, 70, 0.2);
    border-color: rgba(207, 111, 103, 0.18);
    color: #ffe6df;
}

@media (max-width: 720px) {
    .lobby-games-wrap {
        padding: 0.8rem;
    }

    .lobby-games-table {
        gap: 12px;
    }

    .lobby-game-row {
        gap: 12px;
        padding: 0.92rem;
    }

    .lobby-game-row--olympics {
        grid-template-columns: 1fr;
    }

    .lobby-game-row__main {
        gap: 0.72rem;
    }

    .lobby-olympics-stats {
        grid-template-columns: 1fr;
    }

    .lobby-game-row__side {
        justify-content: flex-start;
    }
}

.olympics-player-row__name-wrap {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.olympics-player-row__markers {
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    min-height: 0.8rem;
}

.olympics-player-row__marker {
    width: 0.56rem;
    height: 0.56rem;
    border-radius: 999px;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.16) inset, 0 1px 2px rgba(0, 0, 0, 0.18);
}

.olympics-player-row__marker--win {
    background: linear-gradient(180deg, #7dc26b 0%, #4f8f49 100%);
}

.olympics-player-row__marker--loss {
    background: linear-gradient(180deg, #d97b6f 0%, #9f4942 100%);
}

/* === Popup Decision Polish === */
.popup-overlay {
    padding: 20px;
    background: radial-gradient(circle at top, rgba(81, 58, 26, 0.14) 0%, rgba(24, 18, 11, 0.52) 62%, rgba(10, 8, 6, 0.7) 100%);
    backdrop-filter: blur(5px);
}

.popup-box {
    width: min(92vw, 640px);
    min-width: 0;
    max-width: 640px;
    padding: 1.35rem;
    border-radius: 24px;
    border: 1px solid rgba(149, 112, 59, 0.22);
    background: linear-gradient(180deg, rgba(255, 250, 240, 0.98) 0%, rgba(239, 226, 202, 0.98) 100%);
    box-shadow: 0 24px 56px rgba(0, 0, 0, 0.22);
    color: #2c1e11;
    text-align: left;
}

#popup-content {
    display: grid;
    gap: 14px;
}

.popup-label {
    margin: 0;
    color: #2c1e11;
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.35;
    text-align: center;
    text-shadow: none;
}

.popup-actions {
    display: flex;
    justify-content: center;
    margin-top: 0.95rem;
    padding-top: 0.9rem;
    border-top: 1px solid rgba(126, 95, 57, 0.16);
}

.popup-close {
    appearance: none;
    border: 1px solid rgba(126, 95, 57, 0.18);
    border-radius: 999px;
    padding: 0.72rem 1.15rem;
    background: rgba(255, 255, 255, 0.58);
    color: #6d5031;
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: background-color 120ms ease, border-color 120ms ease, transform 120ms ease;
}

.popup-close:hover {
    background: rgba(255, 255, 255, 0.78);
    border-color: rgba(126, 95, 57, 0.26);
    transform: translateY(-1px);
}

.popup-suit-change--decision {
    gap: 14px;
}

.popup-choice-stack {
    display: grid;
    gap: 0.85rem;
}

.popup-choice-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.28rem;
    margin: 0;
    padding: 0.95rem 1rem;
    border: 1px solid rgba(126, 95, 57, 0.22);
    border-radius: 18px;
    background: linear-gradient(180deg, #fffaf0 0%, #f0e4cf 100%);
    box-shadow: 0 12px 22px rgba(0, 0, 0, 0.08);
    color: #2c1e11;
    text-shadow: none;
    transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease, border-color 120ms ease;
}

.popup-choice-card:hover {
    background: linear-gradient(180deg, #fffdf7 0%, #f5e8d2 100%);
    transform: translateY(-1px);
    box-shadow: 0 14px 24px rgba(0, 0, 0, 0.1);
}

.popup-choice-card__title {
    color: #2c1e11;
    font-size: 1.08rem;
    font-weight: 700;
    line-height: 1.25;
}

.popup-choice-card__subtitle {
    color: #7a5830;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.popup-choice-card--player {
    border-color: rgba(102, 135, 73, 0.24);
}

.popup-choice-card--secondary {
    background: linear-gradient(180deg, rgba(248, 239, 220, 0.98) 0%, rgba(234, 221, 197, 0.98) 100%);
}

.popup-choice-card--secondary:hover {
    background: linear-gradient(180deg, rgba(252, 244, 227, 1) 0%, rgba(239, 226, 202, 1) 100%);
}

.popup-choice-card--danger {
    background: linear-gradient(180deg, rgba(249, 234, 226, 0.98) 0%, rgba(233, 205, 194, 0.98) 100%);
    border-color: rgba(162, 97, 79, 0.24);
}

.popup-choice-card--danger:hover {
    background: linear-gradient(180deg, rgba(252, 239, 233, 1) 0%, rgba(239, 212, 201, 1) 100%);
}

.popup-choice-card--danger .popup-choice-card__title {
    color: #6d3125;
}

.popup-choice-card--danger .popup-choice-card__subtitle {
    color: #94574b;
}

@media (max-width: 760px) {
    .popup-overlay {
        padding: 14px;
    }

    .popup-box {
        width: min(96vw, 560px);
        padding: 1.05rem;
        border-radius: 20px;
    }

    .popup-label {
        font-size: 1.05rem;
    }

    .popup-choice-card {
        padding: 0.88rem 0.92rem;
        border-radius: 16px;
    }
}
/* === Olympics Panel Divider === */
.olympics-panel-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    max-width: 1320px;
    margin: 16px auto 4px;
    padding: 0 10px;
}

.olympics-panel-divider__line {
    flex: 1 1 auto;
    height: 1px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(124, 154, 86, 0) 0%, rgba(124, 154, 86, 0.36) 22%, rgba(201, 170, 101, 0.52) 50%, rgba(124, 154, 86, 0.36) 78%, rgba(124, 154, 86, 0) 100%);
}

.olympics-panel-divider__ornament {
    position: relative;
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    border-radius: 999px;
    background: radial-gradient(circle at 35% 35%, rgba(255, 246, 216, 0.95) 0%, rgba(222, 190, 110, 0.88) 42%, rgba(113, 147, 74, 0.92) 100%);
    box-shadow: 0 0 0 1px rgba(255, 238, 194, 0.18), 0 0 16px rgba(202, 179, 100, 0.22);
}

.olympics-panel-divider__ornament::before,
.olympics-panel-divider__ornament::after {
    content: '';
    position: absolute;
    inset: 50% auto auto 50%;
    width: 26px;
    height: 1px;
    background: linear-gradient(90deg, rgba(201, 170, 101, 0.32) 0%, rgba(201, 170, 101, 0) 100%);
    transform-origin: left center;
}

.olympics-panel-divider__ornament::before {
    transform: translate(-50%, -50%) rotate(32deg);
}

.olympics-panel-divider__ornament::after {
    transform: translate(-50%, -50%) rotate(-32deg);
}

@media (max-width: 760px) {
    .olympics-panel-divider {
        gap: 10px;
        margin: 14px auto 2px;
        padding: 0 4px;
    }

    .olympics-panel-divider__ornament {
        width: 12px;
        height: 12px;
    }
}
/* === Olympics Log Header And Time === */
.olympics-log-panel__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 12px 0;
    margin-bottom: 8px;
}

.olympics-log-panel .table-panel__label {
    padding: 0;
    margin-bottom: 0;
}

.olympics-log-panel__date {
    flex: 0 0 auto;
    color: #d9c9a0;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-align: right;
    text-shadow: none;
}

.olympics-log-list--seamless .olympics-log-entry {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.olympics-log-entry__message {
    min-width: 0;
    flex: 1 1 auto;
}

.olympics-log-entry__time {
    flex: 0 0 auto;
    color: #bcae87;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-align: right;
    opacity: 0.9;
}

@media (max-width: 760px) {
    .olympics-log-panel__header {
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
    }

    .olympics-log-panel__date {
        font-size: 0.84rem;
        text-align: left;
    }

    .olympics-log-list--seamless .olympics-log-entry {
        gap: 8px;
    }

    .olympics-log-entry__time {
        font-size: 0.72rem;
    }
}
/* === Lobby Locale Switch === */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.lobby-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    text-align: initial;
}

.lobby-locale-switch {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.lobby-locale-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: transparent;
    text-decoration: none;
    opacity: 0.75;
    transform: translateY(1px) scale(1);
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.lobby-locale-link:hover {
    opacity: 1;
    transform: translateY(-1px) scale(1.08);
}

.lobby-locale-link.is-active {
    opacity: 1;
    transform: translateY(0) scale(1.12);
}

.lobby-locale-flag {
    display: block;
    width: 96px;
    height: 96px;
    filter: drop-shadow(0 6px 12px rgba(72, 54, 25, 0.18));
}

.lobby-card__footer .logout {
    display: inline-flex;
    justify-content: center;
    margin-left: auto;
}

@media (max-width: 640px) {
    .lobby-card__footer {
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .lobby-locale-switch {
        gap: 3px;
        justify-content: center;
    }

    .lobby-card__footer .logout {
        margin-left: 0;
    }

    .lobby-locale-flag {
        width: 88px;
        height: 88px;
    }
}