/* ============================================================
   BANCRUPT — style.css — 3D / GLASS / NEON EDITION (v2.1)
   ============================================================
   Pakeitimai nuo v2.0:
   - Lenta grąžinta į tiesią poziciją (--board-tilt: 0deg)
   - Auksinė juosta per visą perimetrą (viršus + apačia)
   - Visi 4 kampai apvalūs (18px)
   - Visi 3D/glass/neon pagražinimai IŠLIKO
   ============================================================ */

/* ============================================================
   1. :root KINTAMIEJI
   ============================================================ */
:root {
    /* --- Lentos matmenys --- */
    --corner-width:      clamp(50px, 8vw, 175px);
    --corner-height:     clamp(50px, 8vh, 175px);
    --left-col-width:    clamp(50px, 8vw, 175px);
    --right-col-width:   clamp(50px, 8vw, 175px);
    --top-row-height:    clamp(30px, 10vh, 120px);
    --bottom-row-height: clamp(30px, 10vh, 120px);
    --board-gap:         clamp(1px, 0.15vw, 5px);
    --board-min-width:   0px;
    --board-max-width:   197vw;

    /* --- Šriftai --- */
    --board-font-size:  clamp(6px, 0.5vw, 14px);
    --cell-font-size:   clamp(8px, 0.6vw, 16px);
    --corner-font-size: clamp(10px, 0.7vw, 18px);

    /* --- Vidurio langeliai --- */
    --center-bg:            linear-gradient(145deg, #d4b896, #c4a886);
    --center-border:        #b8966a;
    --center-font-color:    #3d2b1f;
    --center-font-size-min: 10px;
    --center-font-size:     13px;
    --center-font-size-max: 18px;
    --center-title-size-min: 8px;
    --center-title-size:     10px;
    --center-title-size-max: 16px;
    --center-title-color:    #3d2b1f;

    /* --- #myInfo --- */
    --myinfo-text-size:    clamp(9px, 0.6vw, 13px);
    --myinfo-text-color:   #3d2b1f;
    --myinfo-name-size:    clamp(12px, 0.9vw, 18px);
    --myinfo-name-color:   #3d2b1f;
    --myinfo-money-size:   clamp(20px, 1.5vw, 34px);
    --myinfo-money-color:  #000000;

    /* --- Spalvos --- */
    --gold:         #ffd700;
    --gold-dark:    #c9a84c;
    --gold-darker:  #b8966a;
    --green:        #1a6b3c;
    --green-dark:   #0f4a2a;
    --green-deep:   #0d1f0d;
    --red:          #dc3545;
    --red-dark:     #a71d2a;
    --brown:        #3d2b1f;
    --tan:          #d4b896;

    /* --- 3D / GLASS KINTAMIEJI --- */
    --cell-radius:        8px;
    --cell-shadow-rest:   0 2px 4px rgba(0,0,0,0.25),
                          0 4px 10px rgba(0,0,0,0.20),
                          inset 0 1px 0 rgba(255,255,255,0.55),
                          inset 0 -2px 4px rgba(0,0,0,0.15);
    --cell-shadow-hover:  0 6px 14px rgba(0,0,0,0.35),
                          0 12px 28px rgba(0,0,0,0.25),
                          inset 0 1px 0 rgba(255,255,255,0.7),
                          inset 0 -3px 6px rgba(0,0,0,0.20);
    --cell-shadow-active: 0 1px 2px rgba(0,0,0,0.30),
                          inset 0 2px 6px rgba(0,0,0,0.30),
                          inset 0 -1px 0 rgba(255,255,255,0.4);
    --cell-lift:          translateY(-2px);
    --cell-press:         translateY(1px) scale(0.985);

    --glass-bg:           rgba(255,255,255,0.14);
    --glass-border:       rgba(255,255,255,0.28);
    --glass-blur:         blur(14px) saturate(140%);
    --glass-shadow:       0 8px 32px rgba(0,0,0,0.45),
                          inset 0 1px 0 rgba(255,255,255,0.35),
                          inset 0 -1px 0 rgba(0,0,0,0.20);

    --board-perspective:  1800px;
    --board-tilt:         0deg;   /* tiesiai, be pasvyrimo */

    --dice-size:          clamp(38px, 3.8vw, 60px);
    --dice-perspective:   900px;

    --dot-size:           40px;
    --dot-radius:         50%;
    --dot-inner-shadow:   inset -3px -4px 8px rgba(0,0,0,0.45),
                          inset 2px 3px 6px rgba(255,255,255,0.65);
    --dot-drop-shadow:    0 4px 10px rgba(0,0,0,0.45),
                          0 8px 18px rgba(0,0,0,0.25);
}


/* ============================================================
   2. RESET & BASE
   ============================================================ */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: var(--green-deep);
    color: var(--gold);
    display: flex;
    justify-content: center;
    align-items: center;
    perspective: var(--board-perspective);
    perspective-origin: 50% 40%;
}

button {
    font-family: inherit;
}

button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

button,
.btn,
.menu-btn,
.landing-btn,
.header-btn,
.left-btn,
.choice-btn,
.btn-trade-option,
.btn-bankrupt,
.btn-jail,
.btn-build,
.btn-demolish {
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: pointer;
}


/* ============================================================
   3. SPA PUSLAPIŲ VALDYMAS
   ============================================================ */
.page {
    display: none;
    width: 100%;
    min-height: 100vh;
}

.page.active {
    display: flex;
}

#page-landing,
#page-menu {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(circle at 20% 20%, rgba(255,215,0,0.06), transparent 55%),
        radial-gradient(circle at 80% 80%, rgba(0,255,255,0.05), transparent 55%),
        linear-gradient(145deg, var(--green), var(--green-dark));
    padding: 40px 20px;
    min-height: 100vh;
}

#page-register,
#page-login,
#page-forgot-password,
#page-create,
#page-join {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(circle at 20% 20%, rgba(255,215,0,0.06), transparent 55%),
        radial-gradient(circle at 80% 80%, rgba(0,255,255,0.05), transparent 55%),
        linear-gradient(145deg, var(--green), var(--green-dark));
    padding: 40px 20px;
    min-height: 100vh;
}

#page-game.active {
    flex-direction: column;
    background: var(--green-deep);
    padding: 0;
    min-height: 100vh;
}


/* ============================================================
   4. LANDING / MENU / LOBBY FORMOS  (glassmorphism)
   ============================================================ */
.landing-container,
.menu-container,
.lobby-container {
    max-width: 600px;
    width: 100%;
    text-align: center;
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1.5px solid var(--gold-dark);
    border-radius: 24px;
    padding: 40px 30px;
    box-shadow:
        var(--glass-shadow),
        0 0 0 1px rgba(255,255,255,0.05) inset,
        0 20px 60px rgba(0,0,0,0.55);
    position: relative;
    overflow: hidden;
}

.landing-container::before,
.menu-container::before,
.lobby-container::before {
    content: '';
    position: absolute;
    top: -60%;
    left: -30%;
    width: 80%;
    height: 180%;
    background: linear-gradient(115deg,
        transparent 40%,
        rgba(255,255,255,0.10) 50%,
        transparent 60%);
    pointer-events: none;
}

.menu-container,
.lobby-container {
    max-width: 500px;
}

.landing-container h1,
.menu-container h1,
.lobby-container h1 {
    color: var(--gold);
    font-size: 3em;
    text-shadow:
        0 4px 15px rgba(0, 0, 0, 0.6),
        0 0 40px rgba(255,215,0,0.25);
    letter-spacing: 3px;
    margin-bottom: 10px;
}

.menu-container h1,
.lobby-container h1 {
    font-size: 2.5em;
}

.landing-subtitle,
.menu-container p,
.lobby-container .subtitle {
    color: var(--tan);
    font-size: 1.1em;
    margin-bottom: 30px;
}

.landing-buttons,
.menu-buttons {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 30px;
}

.landing-btn {
    padding: 18px 30px;
    border: none;
    border-radius: 14px;
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    width: 100%;
    text-align: center;
    position: relative;
    overflow: hidden;
    box-shadow:
        0 6px 14px rgba(0,0,0,0.35),
        inset 0 1px 0 rgba(255,255,255,0.4),
        inset 0 -2px 6px rgba(0,0,0,0.25);
}

.landing-btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg,
        transparent 30%,
        rgba(255,255,255,0.25) 50%,
        transparent 70%);
    transform: translateX(-100%);
    transition: transform 0.6s ease;
    pointer-events: none;
}

.landing-btn:hover::after { transform: translateX(100%); }

.landing-btn-primary {
    background: linear-gradient(145deg, var(--gold), #f0c000);
    color: #1a3b1a;
}

.landing-btn-primary:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow:
        0 10px 24px rgba(255, 215, 0, 0.45),
        inset 0 1px 0 rgba(255,255,255,0.6);
}

.landing-btn-secondary {
    background: linear-gradient(145deg, #17a2b8, #138496);
}

.landing-btn-secondary:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow:
        0 10px 24px rgba(23, 162, 184, 0.45),
        inset 0 1px 0 rgba(255,255,255,0.4);
}

.menu-btn {
    padding: 16px 24px;
    border: 2px solid var(--gold-dark);
    border-radius: 12px;
    font-size: 16px;
    font-weight: 700;
    background: rgba(255, 255, 255, 0.10);
    color: var(--gold);
    width: 100%;
    text-align: center;
    box-shadow:
        0 4px 10px rgba(0,0,0,0.30),
        inset 0 1px 0 rgba(255,255,255,0.25);
}

.menu-btn:hover {
    background: var(--gold);
    color: var(--green-deep);
    transform: translateY(-1px) scale(1.02);
    box-shadow:
        0 8px 20px rgba(255,215,0,0.45),
        inset 0 1px 0 rgba(255,255,255,0.5);
}

.menu-btn-back {
    background: rgba(108, 117, 125, 0.3);
    color: var(--tan);
    border-color: #6c757d;
    margin-top: 15px;
}

.menu-btn-back:hover {
    background: #6c757d;
    color: #fff;
}

.lobby-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.lobby-form input,
.lobby-form select {
    padding: 14px 20px;
    border: 2px solid var(--gold-dark);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.10);
    color: #fff;
    font-size: 16px;
    outline: none;
    transition: all 0.3s;
    width: 100%;
    backdrop-filter: blur(6px);
    box-shadow: inset 0 2px 6px rgba(0,0,0,0.20);
}

.lobby-form input:focus,
.lobby-form select:focus {
    border-color: var(--gold);
    background: rgba(255, 255, 255, 0.18);
    box-shadow:
        0 0 0 3px rgba(255,215,0,0.18),
        0 0 20px rgba(255, 215, 0, 0.30),
        inset 0 2px 6px rgba(0,0,0,0.20);
}

.lobby-form input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.lobby-form input:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.lobby-buttons {
    display: flex;
    gap: 10px;
}

.btn {
    flex: 1;
    padding: 14px;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-shadow:
        0 4px 10px rgba(0,0,0,0.30),
        inset 0 1px 0 rgba(255,255,255,0.35);
}

.btn-primary {
    background: linear-gradient(145deg, var(--gold), #f0c000);
    color: #1a3b1a;
}

.btn-primary:hover {
    transform: translateY(-1px) scale(1.03);
    box-shadow:
        0 8px 20px rgba(255, 215, 0, 0.45),
        inset 0 1px 0 rgba(255,255,255,0.6);
}

.btn-secondary {
    background: linear-gradient(145deg, #6c757d, #495057);
}

.btn-secondary:hover {
    transform: translateY(-1px) scale(1.03);
    box-shadow:
        0 8px 20px rgba(108, 117, 125, 0.45),
        inset 0 1px 0 rgba(255,255,255,0.35);
}

#gameIdInput {
    text-transform: uppercase;
    letter-spacing: 2px;
}

.color-picker {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    justify-items: center;
    padding: 10px;
    background: rgba(0, 0, 0, 0.20);
    border-radius: 12px;
    max-width: 280px;
    margin: 0 auto;
    box-shadow: inset 0 2px 6px rgba(0,0,0,0.4);
}

.color-circle {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    cursor: pointer;
    border: 3px solid transparent;
    transition: all 0.2s ease;
    box-shadow:
        0 3px 8px rgba(0, 0, 0, 0.4),
        inset -3px -4px 8px rgba(0,0,0,0.30),
        inset 2px 3px 6px rgba(255,255,255,0.55);
    position: relative;
}

.color-circle:hover:not(.taken) {
    transform: translateY(-2px) scale(1.12);
    box-shadow:
        0 6px 15px rgba(0, 0, 0, 0.5),
        inset -3px -4px 8px rgba(0,0,0,0.30),
        inset 2px 3px 6px rgba(255,255,255,0.55);
}

.color-circle.selected {
    border-color: var(--gold);
    box-shadow:
        0 0 20px rgba(255, 215, 0, 0.8),
        0 4px 15px rgba(0, 0, 0, 0.5),
        inset -3px -4px 8px rgba(0,0,0,0.30),
        inset 2px 3px 6px rgba(255,255,255,0.55);
    transform: translateY(-2px) scale(1.15);
}

.color-circle.selected::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 24px;
    font-weight: 900;
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.9), 0 0 10px rgba(0, 0, 0, 0.9);
    pointer-events: none;
}

.color-circle.taken {
    opacity: 0.25;
    cursor: not-allowed;
}

.color-circle.taken::after {
    content: '❌';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 20px;
    pointer-events: none;
}

.lang-btn {
    padding: 6px 10px;
    border: 2px solid var(--gold);
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.5);
    color: var(--gold);
    font-weight: 700;
    font-size: 12px;
}

.lang-btn:hover {
    background: rgba(255, 215, 0, 0.2);
    transform: scale(1.05);
}

.lang-btn.active {
    background: var(--gold);
    color: #1a3b1a;
}

.lang-select-wrap { display: inline-flex; align-items: center; gap: 4px; padding: 3px 6px; border: 2px solid var(--gold); border-radius: 8px;
    background: rgba(0, 0, 0, 0.55); color: var(--gold); font-weight: 700; font-size: 13px; cursor: pointer; }
.lang-select { background: transparent; color: var(--gold); border: none; outline: none; font-weight: 700; font-size: 12px; cursor: pointer; max-width: 150px; }
.lang-select option { background: #1a3b1a; color: #ffd700; }
.lang-select-wrap.small { width: 100%; justify-content: center; padding: 3px 4px; font-size: 11px; }
.lang-select-wrap.small .lang-select { font-size: 11px; max-width: 100%; }

#langSwitcher {
    position: fixed;
    top: 10px;
    right: 10px;
    z-index: 999999;
    display: flex;
    gap: 5px;
}


/* ============================================================
   5. MODALS (glass + 3D lift)
   ============================================================ */
#rulesModal,
#publicGamesModal,
#statsModal,
#gameStatsModal,
#leadersModal,
#winnerModal,
#bankruptModal,
#bankruptMessage,
#tradingModal,
#tradeOfferModal,
#auctionModal,
#demolishModal,
#voteKickModal {
    display: none;
    position: fixed;
    inset: 0;
    background: radial-gradient(circle at center, rgba(0,0,0,0.75), rgba(0,0,0,0.92));
    justify-content: center;
    align-items: center;
    padding: 20px;
    overflow-y: auto;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

#rulesModal.active,
#publicGamesModal.active {
    display: flex;
}

.rules-content {
    background: linear-gradient(145deg, #f5f0e8, #e8d5b5);
    border-radius: 20px;
    padding: 30px;
    max-width: 600px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    border: 3px solid var(--gold-dark);
    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.75),
        0 0 0 1px rgba(255,255,255,0.2) inset,
        inset 0 2px 6px rgba(0,0,0,0.10);
    position: relative;
    transform: translateY(0);
    animation: modalPop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes modalPop {
    0%   { transform: translateY(20px) scale(0.94); opacity: 0; }
    100% { transform: translateY(0) scale(1); opacity: 1; }
}

.rules-content h2 {
    color: var(--green);
    font-size: 1.8em;
    margin-bottom: 20px;
    text-align: center;
    border-bottom: 2px solid var(--gold-dark);
    padding-bottom: 10px;
}

.rules-content h3 {
    color: var(--green);
    font-size: 1.2em;
    margin-top: 20px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.rules-content p,
.rules-content ul {
    color: var(--brown);
    line-height: 1.6;
}

.rules-content ul {
    padding-left: 25px;
    margin-bottom: 10px;
}

.rules-content li {
    margin-bottom: 5px;
    line-height: 1.5;
}

.rules-close {
    position: sticky;
    bottom: 0;
    width: 100%;
    padding: 14px;
    margin-top: 20px;
    border: none;
    border-radius: 10px;
    background: linear-gradient(145deg, var(--green), var(--green-dark));
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    box-shadow:
        0 4px 12px rgba(0,0,0,0.35),
        inset 0 1px 0 rgba(255,255,255,0.30);
}

.rules-close:hover {
    transform: translateY(-1px) scale(1.02);
    box-shadow: 0 8px 20px rgba(26, 107, 60, 0.55);
}

.public-games-content {
    background: linear-gradient(145deg, var(--green), var(--green-dark));
    border-radius: 20px;
    padding: 30px;
    max-width: 550px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    border: 3px solid var(--gold-dark);
    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.75),
        inset 0 1px 0 rgba(255,255,255,0.15);
    animation: modalPop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.public-games-content h2 {
    color: var(--gold);
    font-size: 1.8em;
    margin-bottom: 20px;
    text-align: center;
}

.public-game-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px;
    margin-bottom: 10px;
    background: rgba(255, 255, 255, 0.10);
    border-radius: 12px;
    border: 2px solid var(--gold-dark);
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.15);
}

.public-game-item:hover {
    background: rgba(255, 255, 255, 0.20);
    transform: translateY(-2px) scale(1.01);
    border-color: var(--gold);
    box-shadow:
        0 8px 20px rgba(0,0,0,0.35),
        inset 0 1px 0 rgba(255,255,255,0.25);
}

.public-game-item .game-host { flex: 1; color: #fff; font-weight: 700; font-size: 14px; }
.public-game-item .game-code { color: var(--gold); font-weight: 900; letter-spacing: 2px; font-size: 16px; }
.public-game-item .game-count { color: var(--tan); font-size: 12px; font-weight: 600; }

.public-games-empty {
    text-align: center;
    padding: 30px;
    color: var(--tan);
    font-style: italic;
}

.rules-content::-webkit-scrollbar,
.public-games-content::-webkit-scrollbar,
#soundPanel::-webkit-scrollbar,
#soundLevelsList::-webkit-scrollbar,
#cellInfoPanel::-webkit-scrollbar,
#chatMessages::-webkit-scrollbar,
#journal::-webkit-scrollbar,
#notifications::-webkit-scrollbar,
#playersList::-webkit-scrollbar,
.mini-cards-container::-webkit-scrollbar,
.trade-mini-cards::-webkit-scrollbar,
#waitingPlayersList::-webkit-scrollbar,
#waitingChatMessages::-webkit-scrollbar {
    width: 8px;
}

.rules-content::-webkit-scrollbar-track,
.public-games-content::-webkit-scrollbar-track,
#soundPanel::-webkit-scrollbar-track,
#soundLevelsList::-webkit-scrollbar-track,
#cellInfoPanel::-webkit-scrollbar-track,
#chatMessages::-webkit-scrollbar-track,
#journal::-webkit-scrollbar-track,
#notifications::-webkit-scrollbar-track,
#playersList::-webkit-scrollbar-track,
.mini-cards-container::-webkit-scrollbar-track,
.trade-mini-cards::-webkit-scrollbar-track,
#waitingPlayersList::-webkit-scrollbar-track,
#waitingChatMessages::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.15);
    border-radius: 4px;
}

.rules-content::-webkit-scrollbar-thumb,
.public-games-content::-webkit-scrollbar-thumb,
#soundPanel::-webkit-scrollbar-thumb,
#soundLevelsList::-webkit-scrollbar-thumb,
#cellInfoPanel::-webkit-scrollbar-thumb,
#chatMessages::-webkit-scrollbar-thumb,
#journal::-webkit-scrollbar-thumb,
#notifications::-webkit-scrollbar-thumb,
#playersList::-webkit-scrollbar-thumb,
.mini-cards-container::-webkit-scrollbar-thumb,
.trade-mini-cards::-webkit-scrollbar-thumb,
#waitingPlayersList::-webkit-scrollbar-thumb,
#waitingChatMessages::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--gold), var(--gold-dark));
    border-radius: 4px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.4);
}

.rules-content::-webkit-scrollbar-thumb:hover,
.public-games-content::-webkit-scrollbar-thumb:hover,
.mini-cards-container::-webkit-scrollbar-thumb:hover,
.trade-mini-cards::-webkit-scrollbar-thumb:hover {
    background: var(--gold);
}

#soundPanel,
#musicPanel {
    background: rgba(0, 0, 0, 0.95);
    border-radius: 10px;
    border: 1px solid rgba(255, 215, 0, 0.35);
    box-shadow:
        0 8px 30px rgba(0, 0, 0, 0.85),
        inset 0 1px 0 rgba(255,255,255,0.10);
    z-index: 9999;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

#soundPanel {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    min-width: 260px;
    max-width: 100%;
    padding: 12px;
    margin-top: 4px;
    max-height: 500px;
    overflow-y: auto;
    box-sizing: border-box;
    z-index: 9999;
}

#musicPanel {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    padding: 8px;
    margin-top: 4px;
}

#volumeSlider,
#musicVolumeSlider,
#sfxVolumeSlider,
#soundPanel input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    height: 6px;
    background: linear-gradient(to right, var(--red), #ffc107, #28a745);
    border-radius: 3px;
    outline: none;
    width: 100%;
    cursor: pointer;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.4);
}

#volumeSlider::-webkit-slider-thumb,
#musicVolumeSlider::-webkit-slider-thumb,
#sfxVolumeSlider::-webkit-slider-thumb,
#soundPanel input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    background: radial-gradient(circle at 30% 30%, #fff6b0, var(--gold));
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid var(--green-deep);
    box-shadow:
        0 2px 6px rgba(0, 0, 0, 0.5),
        inset -1px -1px 2px rgba(0,0,0,0.3),
        inset 1px 1px 2px rgba(255,255,255,0.6);
}

#volumeSlider::-moz-range-thumb,
#musicVolumeSlider::-moz-range-thumb,
#sfxVolumeSlider::-moz-range-thumb,
#soundPanel input[type="range"]::-moz-range-thumb {
    width: 18px;
    height: 18px;
    background: var(--gold);
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid var(--green-deep);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

#soundPanel input[type="radio"] {
    accent-color: var(--gold);
    width: 14px;
    height: 14px;
}

#muteBtn:hover {
    background: var(--gold);
    color: var(--green-deep);
}

#cellInfoTooltip {
    position: fixed;
    display: none;
    background: linear-gradient(145deg, #f5f0e8, #e8d5b5);
    border: 2px solid var(--gold-dark);
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 11px;
    color: var(--brown);
    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.55),
        inset 0 1px 0 rgba(255,255,255,0.5);
    z-index: 10000;
    min-width: 180px;
    max-width: 280px;
    pointer-events: none;
}

.cell-info-close {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 50%;
    background: rgba(220, 53, 69, 0.9);
    color: white;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    padding: 0;
    line-height: 1;
    pointer-events: auto;
    box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}

.cell-info-close:hover {
    background: #dc3545;
    transform: scale(1.1);
}

.cell-info-close:active { transform: scale(0.95); }

#cellInfoTooltip .info-header {
    font-weight: 700;
    font-size: 12px;
    color: var(--green);
    border-bottom: 1px solid var(--gold-dark);
    padding-bottom: 3px;
    margin-bottom: 5px;
    text-align: center;
}

#cellInfoTooltip .info-row {
    display: flex;
    justify-content: space-between;
    gap: 6px;
    padding: 1px 0;
    font-size: 10px;
}

#cellInfoTooltip .info-row .label { color: #6c757d; font-weight: 600; }
#cellInfoTooltip .info-row .value { color: var(--brown); font-weight: 700; }
#cellInfoTooltip .info-row .value.green { color: #28a745; }
#cellInfoTooltip .info-row .value.red { color: var(--red); }

#cellInfoTooltip .info-section {
    margin-top: 4px;
    padding-top: 4px;
    border-top: 1px dashed rgba(61, 43, 31, 0.2);
}

#cellInfoTooltip .info-section-title {
    font-weight: 700;
    font-size: 10px;
    color: var(--green);
    margin-bottom: 3px;
}

#cellInfoPanel {
    display: none;
    flex-direction: column;
    gap: 2px;
    padding: 4px 8px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    border: 1px solid rgba(61, 43, 31, 0.1);
    margin-top: 3px;
    min-height: 30px;
    max-height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    font-size: var(--info-font-size, 11px);
    color: var(--brown);
    line-height: 1.25;
    flex-shrink: 0;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.15);
}

#cellInfoPanel.show { display: flex; }

.info-header {
    font-weight: 700;
    font-size: var(--info-header-size, 14px);
    color: var(--green);
    border-bottom: 2px solid var(--gold-dark);
    padding-bottom: 3px;
    margin-bottom: 3px;
    text-align: center;
    flex-shrink: 0;
}

.info-row {
    display: flex;
    justify-content: space-between;
    gap: 6px;
    padding: 1px 0;
    font-size: var(--info-font-size, 11px);
}

.info-row .label { color: #6c757d; font-weight: 600; }
.info-row .value { color: var(--brown); font-weight: 700; }
.info-row .value.green { color: #28a745; }
.info-row .value.red { color: var(--red); }

.info-section {
    margin-top: 4px;
    padding-top: 4px;
    border-top: 1px dashed rgba(61, 43, 31, 0.2);
}

.info-section-title {
    font-weight: 700;
    font-size: var(--info-section-size, 12px);
    color: var(--green);
    margin-bottom: 2px;
}

.info-placeholder {
    text-align: center;
    color: #6c757d;
    font-size: 11px;
    padding: 8px;
    font-style: italic;
}


/* ============================================================
   6. ŽAIDIMO EKRANAS
   ============================================================ */
#game {
    width: 100%;
    height: 100vh;
    max-width: 100vw;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    perspective: var(--board-perspective);
    perspective-origin: 50% 45%;
}

#gameHeader {
    display: flex;
    justify-content: space-between;
    padding: 8px 16px;
    background: linear-gradient(180deg,
        rgba(26, 107, 60, 0.95),
        rgba(15, 74, 42, 0.95));
    border-radius: 12px 12px 0 0;
    color: var(--gold);
    font-weight: bold;
    border-bottom: 2px solid var(--gold-dark);
    flex-wrap: wrap;
    gap: 8px;
    font-size: 12px;
    flex-shrink: 0;
    align-items: center;
    box-shadow:
        0 4px 12px rgba(0,0,0,0.4),
        inset 0 1px 0 rgba(255,255,255,0.15);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

#gameBody {
    display: flex;
    flex: 1 1 0;
    min-height: 0;
    min-width: 0;
    gap: 6px;
    overflow-x: auto;
    overflow-y: hidden;
}

#leftPanelToggle {
    position: fixed;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 9999;
    width: 32px;
    height: 64px;
    background: linear-gradient(145deg, var(--gold), #f0c000);
    color: #000;
    border: 2px solid var(--gold-dark);
    border-left: none;
    border-radius: 0 12px 12px 0;
    cursor: pointer;
    font-size: 18px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    box-shadow:
        2px 0 10px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255,255,255,0.5);
}

#leftPanelToggle:hover {
    background: linear-gradient(145deg, #ffed4e, var(--gold));
    transform: translateY(-50%) scale(1.1);
    box-shadow: 4px 0 20px rgba(255, 215, 0, 0.55);
}

#leftPanelToggle:active { transform: translateY(-50%) scale(0.95); }

#leftPanel {
    width: 130px;
    flex: 0 0 auto;
    background: linear-gradient(145deg, var(--green), var(--green-dark));
    border: 2px solid var(--gold-dark);
    border-radius: 12px;
    padding: 10px 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    color: var(--gold);
    font-weight: 700;
    font-size: 12px;
    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.45),
        inset 0 1px 0 rgba(255,255,255,0.15);
    height: 99%;
    overflow-y: auto;
    overflow-x: hidden;
}

#leftPanel.hidden { display: none; }

#gameIdBox {
    background: var(--green-deep);
    border: 2px solid var(--gold);
    border-radius: 8px;
    padding: 8px 6px;
    text-align: center;
    font-size: 11px;
    word-break: break-all;
    box-shadow:
        inset 0 2px 6px rgba(0,0,0,0.5),
        0 0 10px rgba(255,215,0,0.15);
}

#gameIdBox span { color: #fff; font-size: 13px; letter-spacing: 1px; }

.left-btn {
    width: 100%;
    padding: 10px 8px;
    border: 2px solid var(--gold);
    border-radius: 8px;
    background: var(--green-deep);
    color: var(--gold);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    box-shadow:
        0 2px 6px rgba(0,0,0,0.35),
        inset 0 1px 0 rgba(255,255,255,0.10);
}

.left-btn:hover {
    background: var(--gold);
    color: var(--green-deep);
    transform: translateY(-1px) scale(1.03);
    box-shadow:
        0 6px 14px rgba(255,215,0,0.4),
        inset 0 1px 0 rgba(255,255,255,0.4);
}

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

.leave-btn {
    background: linear-gradient(145deg, var(--red), var(--red-dark));
    color: #fff;
    border-color: #ff6b6b;
    box-shadow:
        0 2px 6px rgba(0,0,0,0.4),
        inset 0 1px 0 rgba(255,255,255,0.25);
}

.leave-btn:hover {
    background: linear-gradient(145deg, #ff6b6b, var(--red));
    color: #fff;
}

#leftPlayerCount,
#leftTurnDisplay {
    background: rgba(0, 0, 0, 0.25);
    border-radius: 6px;
    padding: 6px 8px;
    font-size: 11px;
    text-align: center;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.4);
}

#leftTurnDisplay span { color: #fff; }

.header-controls {
    display: flex;
    gap: 10px;
    align-items: center;
    background: #1a3b1a;
    padding: 6px 14px;
    border-radius: 10px;
    border: 2px solid var(--gold);
    box-shadow:
        0 4px 12px rgba(0,0,0,0.4),
        inset 0 1px 0 rgba(255,255,255,0.10);
}

.header-btn {
    padding: 8px 14px;
    border: 2px solid var(--gold);
    border-radius: 6px;
    background: var(--green-deep);
    color: var(--gold);
    font-size: 13px;
    font-weight: 700;
    min-width: 70px;
    text-align: center;
    white-space: nowrap;
    box-shadow:
        0 2px 6px rgba(0,0,0,0.4),
        inset 0 1px 0 rgba(255,255,255,0.10);
}

.header-btn:hover {
    background: var(--gold);
    color: var(--green-deep);
    transform: translateY(-1px);
}

.header-btn.active {
    background: var(--gold);
    color: var(--green-deep);
    box-shadow:
        0 0 20px rgba(255, 215, 0, 0.55),
        inset 0 1px 0 rgba(255,255,255,0.5);
}

.info-btn {
    background: linear-gradient(145deg, var(--red), var(--red-dark));
    color: #fff;
    border-color: #ff6b6b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.info-btn.active {
    background: linear-gradient(145deg, #28a745, #1e7e34);
    border-color: #4ade80;
    box-shadow: 0 0 15px rgba(40, 167, 69, 0.55);
}

.info-btn:hover { transform: translateY(-1px) scale(1.03); }

.vote-kick-btn {
    background: linear-gradient(145deg, #6f42c1, #5a32a3);
    color: #fff;
    border-color: #8b5cf6;
    font-size: 11px;
    padding: 8px 6px;
}

.vote-kick-btn:hover {
    background: linear-gradient(145deg, #8b5cf6, #6f42c1);
    color: #fff;
}


/* ============================================================
   7. LENTA  — tiesiai, su auksine juosta per visą perimetrą
   ============================================================ */
#board {
    background:
        radial-gradient(ellipse at 30% 20%, rgba(255,255,255,0.10), transparent 55%),
        radial-gradient(ellipse at 70% 80%, rgba(0,0,0,0.35), transparent 60%),
        radial-gradient(ellipse at center, #1a7a4a, var(--green-dark));
    padding: 14px;
    border-radius: 18px;
    box-shadow:
        0 30px 70px rgba(0, 0, 0, 0.65),
        0 10px 25px rgba(0, 0, 0, 0.45),
        inset 0 0 80px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255,255,255,0.15);
    border: 3px solid var(--gold-dark);

    display: flex;
    flex-direction: column;
    gap: var(--board-gap, 2px);

    flex: 1 1 0;
    min-width: 0;
    min-height: 0;
    width: 100%;
    max-width: var(--board-max-width, 100vw);
    height: 99%;

    margin: 0 auto;
    overflow: auto;
    -webkit-overflow-scrolling: touch;

    transition: all 0.4s cubic-bezier(0.34, 1.2, 0.64, 1);
    position: relative;

    transform-style: preserve-3d;
    transform: perspective(var(--board-perspective)) rotateX(var(--board-tilt)) translateZ(0);
    transform-origin: 50% 100%;
    will-change: transform;
}

#board.adaptive {
    width: 100%;
    max-width: 100vw;
}

#board.fixed {
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
}

#board.fixed .board-row { flex-shrink: 0; }


/* ============================================================
   EILUTĖS
   ============================================================ */
.board-row {
    display: flex;
    gap: var(--board-gap, 2px);
    min-width: 0;
    width: 100%;
    transform-style: preserve-3d;
}

.board-row.row-top {
    height: var(--top-row-height, 120px);
    flex-shrink: 0;
    justify-content: space-between;
}

.board-row.row-bottom {
    height: var(--bottom-row-height, 120px);
    flex-shrink: 0;
    justify-content: space-between;
}

.board-row.row-middle {
    flex: 1 1 0;
    min-height: 0;
    height: auto;
    justify-content: space-between;
    align-items: stretch;
}


/* ============================================================
   LANGELIAI — 3D KORTELĖS
   ============================================================ */
.cell {
    background: linear-gradient(145deg, #f0e6d2 0%, #e8d5b5 50%, #dcc8a5 100%);
    border: 1.5px solid var(--gold-dark);
    border-radius: var(--cell-radius, 8px);
    font-size: var(--board-font-size, 9px);
    color: var(--brown);
    text-align: center;
    padding: 2px;
    position: relative;
    font-weight: 600;
    min-width: 0;
    min-height: 0;
    overflow: visible;

    display: flex;
    align-items: center;
    justify-content: center;

    box-shadow: var(--cell-shadow-rest);
    transform: translateY(0) translateZ(0);
    transition:
        transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 0.22s ease,
        border-color 0.2s ease;
    transform-style: preserve-3d;
    will-change: transform;
}

.cell:hover {
    transform: var(--cell-lift) translateZ(2px);
    box-shadow: var(--cell-shadow-hover);
    border-color: var(--gold);
    z-index: 5;
}

.cell:active {
    transform: var(--cell-press) translateZ(0);
    box-shadow: var(--cell-shadow-active);
}

.row-top .cell:not(.corner),
.row-bottom .cell:not(.corner) {
    flex: 1 1 0;
    height: 100%;
}


/* ============================================================
   KAMPAI
   ============================================================ */
.cell.corner {
    flex: 0 0 var(--corner-width, 175px);
    width: var(--corner-width, 175px);
    height: var(--corner-height, 175px);
    max-width: var(--corner-width, 175px);
    max-height: var(--corner-height, 175px);
    min-width: var(--corner-width, 175px);
    min-height: var(--corner-height, 175px);
    box-sizing: border-box;
    font-size: var(--corner-font-size, 13px);
    border-width: 2.5px;
    font-weight: 700;
    overflow: hidden;
    border-radius: 10px;
}

.row-top .cell.corner,
.row-bottom .cell.corner {
    height: 100%;
    max-height: 100%;
    width: var(--corner-width, 175px);
    max-width: var(--corner-width, 175px);
    flex: 0 0 var(--corner-width, 175px);
}

.cell.start {
    background: linear-gradient(145deg,
        var(--group-color, #28a745),
        var(--group-color2, #1e7e34));
    color: #fff;
}

.cell.jail {
    background: linear-gradient(145deg,
        var(--group-color, #6c757d),
        var(--group-color2, #495057));
    color: #fff;
}

.cell.parking {
    background: linear-gradient(145deg,
        var(--group-color, #007bff),
        var(--group-color2, #0056b3));
    color: #fff;
}

.cell.taxi {
    background:
        repeating-linear-gradient(90deg, rgba(0,0,0,0.85) 0 8px, rgba(255,255,255,0.0) 8px 16px) top / 100% 7px no-repeat,
        linear-gradient(145deg, #ffd23f, #f4b400 55%, #d99a00);
    color: #fff;
}

.cell.go-to-jail {
    background: linear-gradient(145deg,
        var(--group-color, var(--red)),
        var(--group-color2, var(--red-dark)));
    color: #fff;
}

.cell.start .cell-name,
.cell.start .cell-cost,
.cell.jail .cell-name,
.cell.jail .cell-cost,
.cell.parking .cell-name,
.cell.parking .cell-cost,
.cell.taxi .cell-name,
.cell.taxi .cell-cost,
.cell.go-to-jail .cell-name,
.cell.go-to-jail .cell-cost {
    color: #fff;
    text-shadow: 0 1px 3px rgba(0,0,0,0.4);
}


/* ============================================================
   LANGELIO TURINYS
   ============================================================ */
.cell .cell-icon {
    font-size: 30px;
    line-height: 1;
}

.cell .cell-name {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -75%);
    font-size: var(--cell-font-size, 11px);
    line-height: 1.2;
    max-width: 90%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    word-wrap: break-word;
    text-align: center;
    padding: 0 2px;
    color: #000;
    font-weight: 700;
    z-index: 3;
    pointer-events: none;
    text-shadow: 0 1px 0 rgba(255,255,255,0.4);
}

.cell .cell-cost {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, 30%);
    font-size: 14px;
    color: #000;
    font-weight: 700;
    z-index: 3;
    pointer-events: none;
    text-shadow: 0 1px 0 rgba(255,255,255,0.4);
}

.cell.corner .cell-name {
    transform: translate(-50%, -85%);
    font-size: var(--corner-font-size, 13px);
}

.cell.corner .cell-cost {
    transform: translate(-50%, 50%);
    font-size: 12px;
}

.cell .cell-number {
    position: relative;
    font-size: 10px;
    font-weight: 700;
    color: rgba(0, 0, 0, 0.3);
    pointer-events: none;
    z-index: 5;
}

.cell.corner .cell-number {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.4);
}

.cell-bg-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 8em;
    opacity: 0.8;
    z-index: 0;
    pointer-events: none;
    line-height: 1;
    user-select: none;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.25));
}

.row-middle-left .cell-bg-icon,
.row-middle-right .cell-bg-icon {
    font-size: 5em;
}

.cell.corner .cell-bg-icon {
    font-size: 8em;
    opacity: 0.8;
}

.cell-top-bar {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 6px;
    z-index: 5;
    pointer-events: none;
}

.row-top .cell-top-bar       { top: 2px; left: 2px; }
.row-bottom .cell-top-bar    { bottom: 4px; left: 6px; }
.row-middle-right .cell-top-bar { bottom: 4px; right: 6px; }
.row-middle-left .cell-top-bar  { top: 4px; left: 6px; }

.cell .cell-owner {
    position: absolute;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.95);
    pointer-events: none;
    z-index: 5;
    opacity: 0.9;
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.45),
        inset -1px -1px 2px rgba(0,0,0,0.3),
        inset 1px 1px 2px rgba(255,255,255,0.6);
}


/* ============================================================
   SPALVOTOS JUOSTELĖS
   ============================================================ */
.cell.service1,
.cell.service2,
.cell.service3 {
    background: linear-gradient(145deg, #f0e8d8, #e0d5c0);
}

.cell.service1::before,
.cell.service2::before,
.cell.service3::before {
    display: none;
}

.cell.property {
    position: relative;
    overflow: hidden;
}

.row-top .cell.property::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 22%;
    background: linear-gradient(180deg,
        var(--property-color, var(--gold)) 0%,
        color-mix(in srgb, var(--property-color, var(--gold)) 70%, #000) 100%);
    z-index: 1;
    box-shadow:
        inset 0 2px 3px rgba(255,255,255,0.35),
        inset 0 -2px 4px rgba(0,0,0,0.3),
        0 -2px 6px rgba(0,0,0,0.15);
}

.row-bottom .cell.property::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 22%;
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--property-color, var(--gold)) 70%, #000) 0%,
        var(--property-color, var(--gold)) 100%);
    z-index: 1;
    box-shadow:
        inset 0 2px 3px rgba(255,255,255,0.35),
        inset 0 -2px 4px rgba(0,0,0,0.3),
        0 2px 6px rgba(0,0,0,0.15);
}

.row-middle-left .cell.property::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 22%;
    background: linear-gradient(90deg,
        var(--property-color, var(--gold)) 0%,
        color-mix(in srgb, var(--property-color, var(--gold)) 70%, #000) 100%);
    z-index: 1;
    box-shadow:
        inset 2px 0 3px rgba(255,255,255,0.35),
        inset -2px 0 4px rgba(0,0,0,0.3),
        -2px 0 6px rgba(0,0,0,0.15);
}

.row-middle-right .cell.property::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 22%;
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--property-color, var(--gold)) 70%, #000) 0%,
        var(--property-color, var(--gold)) 100%);
    z-index: 1;
    box-shadow:
        inset 2px 0 3px rgba(255,255,255,0.35),
        inset -2px 0 4px rgba(0,0,0,0.3),
        2px 0 6px rgba(0,0,0,0.15);
}

.cell.corner.property::before { display: none; }


/* ============================================================
   VIDURIO LANGELIAI
   ============================================================ */
.row-middle-left {
    display: flex;
    flex-direction: column;
    gap: var(--board-gap, 2px);
    flex: 0 0 var(--left-col-width, 175px);
    width: var(--left-col-width, 175px);
    height: 100%;
    align-items: stretch;
}

.row-middle-right {
    display: flex;
    flex-direction: column;
    gap: var(--board-gap, 2px);
    flex: 0 0 var(--right-col-width, 175px);
    width: var(--right-col-width, 175px);
    height: 100%;
    align-items: stretch;
}

.row-middle-left .cell,
.row-middle-right .cell {
    flex: 1 1 0;
    width: 100%;
    min-width: 0;
    min-height: 0;
    align-self: stretch;
}

.row-middle-center {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    gap: var(--board-gap, 2px);
    padding: 0 var(--board-gap, 2px);
    min-height: 0;
    min-width: 0;
    height: 100%;
}

.center-row {
    display: flex;
    gap: var(--board-gap, 2px);
    flex: 1 1 0;
    min-height: 0;
    transform-style: preserve-3d;
}

.center-cell {
    background:
        linear-gradient(145deg,
            rgba(255,255,255,0.20) 0%,
            rgba(255,255,255,0.05) 40%,
            rgba(0,0,0,0.15) 100%),
        var(--center-bg, linear-gradient(145deg, var(--tan), #c4a886));
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1.5px solid var(--center-border, var(--gold-darker));
    border-radius: 10px;
    padding: 6px 8px;

    flex: 1 1 0;
    min-width: 0;
    min-height: 0;

    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;

    color: var(--center-font-color, var(--brown));
    font-size: clamp(
        var(--center-font-size-min, 10px),
        var(--center-font-size, 13px),
        var(--center-font-size-max, 18px)
    );

    box-shadow:
        var(--cell-shadow-rest),
        0 1px 0 rgba(255,255,255,0.35) inset;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.center-cell:hover {
    box-shadow:
        var(--cell-shadow-hover),
        0 1px 0 rgba(255,255,255,0.45) inset;
    transform: translateY(-1px);
}

.center-cell h4 {
    font-size: clamp(
        var(--center-title-size-min, 8px),
        var(--center-title-size, 10px),
        var(--center-title-size-max, 16px)
    );
    color: var(--center-title-color, var(--brown));
    text-align: center;
    border-bottom: 1px solid rgba(61, 43, 31, 0.2);
    padding-bottom: 3px;
    margin-bottom: 4px;
    flex-shrink: 0;
    text-shadow: 0 1px 0 rgba(255,255,255,0.3);
}

#myInfo {
    font-size: var(--myinfo-text-size, clamp(9px, 0.6vw, 13px));
    color: var(--myinfo-text-color, var(--brown));
    flex: 0 0 55%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2px;
    overflow: hidden;
    width: 100%;
    min-height: 0;
}

#myInfo .player-money {
    font-size: var(--myinfo-money-size, clamp(20px, 1.5vw, 34px));
    font-weight: 700;
    color: var(--myinfo-money-color, #000);
    text-shadow: 0 1px 0 rgba(255,255,255,0.35);
}

#myInfo .player-money.negative {
    color: var(--red);
    text-shadow: 0 0 10px rgba(220,53,69,0.5);
}

#myInfo .player-name {
    font-size: var(--myinfo-name-size, clamp(12px, 0.9vw, 18px));
    font-weight: 600;
    color: var(--myinfo-name-color, var(--brown));
}

#myInfo .player-color {
    width: clamp(18px, 1.3vw, 28px);
    height: clamp(18px, 1.3vw, 28px);
    border-radius: 50%;
    border: 2px solid var(--brown);
    box-shadow:
        0 2px 6px rgba(0,0,0,0.4),
        inset -2px -2px 4px rgba(0,0,0,0.35),
        inset 2px 2px 4px rgba(255,255,255,0.5);
}

.controls {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    justify-content: center;
    min-height: 0;
}

.dice-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 18px;
    margin: 2px 0;
    padding: 2px;
    perspective: var(--dice-perspective, 900px);
    perspective-origin: 50% 50%;
}

.dice {
    width: var(--dice-size, clamp(38px, 3.8vw, 60px));
    height: var(--dice-size, clamp(38px, 3.8vw, 60px));
    background:
        radial-gradient(circle at 30% 25%, #ffffff 0%, #f5f5f5 45%, #dcdcdc 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;

    box-shadow:
        0 8px 18px rgba(0, 0, 0, 0.35),
        0 3px 6px rgba(0, 0, 0, 0.25),
        inset 0 2px 4px rgba(255,255,255,0.9),
        inset 0 -3px 6px rgba(0,0,0,0.15);
    border: 2px solid var(--brown);

    transition:
        transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 0.3s ease;
    user-select: none;
    position: relative;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    will-change: transform;
    flex-shrink: 0;
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}

.dice:not(.rolling):hover {
    transform: scale(1.08) rotateX(-6deg) rotateY(10deg) rotateZ(0deg);
    box-shadow:
        0 14px 30px rgba(0, 0, 0, 0.45),
        0 0 25px rgba(255, 215, 0, 0.45),
        inset 0 2px 4px rgba(255,255,255,0.9),
        inset 0 -3px 6px rgba(0,0,0,0.15);
}

.dice-dots-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 5px;
    width: clamp(28px, 3vw, 46px);
    height: clamp(28px, 3vw, 46px);
    padding: 3px;
    transform: translateZ(1px);
}

.dice-dot {
    width: clamp(6px, 0.7vw, 11px);
    height: clamp(6px, 0.7vw, 11px);
    background:
        radial-gradient(circle at 30% 30%, #5a5a5a 0%, #1a1a1a 80%);
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.15s ease;
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.6),
        0 1px 1px rgba(255,255,255,0.3);
}

.dice-dot.visible { opacity: 1; }

.control-buttons {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
}

.control-buttons button {
    padding: 6px 12px;
    border: none;
    border-radius: 6px;
    font-size: clamp(9px, 0.7vw, 13px);
    font-weight: 700;
    color: #fff;
    min-width: 0;
    box-shadow:
        0 3px 8px rgba(0,0,0,0.3),
        inset 0 1px 0 rgba(255,255,255,0.25);
}

.btn-dice {
    background: linear-gradient(145deg, #28a745, #1e7e34);
    white-space: nowrap;
}

.btn-dice:hover:not(:disabled) {
    transform: translateY(-1px) scale(1.05);
    box-shadow:
        0 6px 15px rgba(40, 167, 69, 0.45),
        inset 0 1px 0 rgba(255,255,255,0.35);
}

.btn-trade {
    background: linear-gradient(145deg, var(--gold), #f0c000);
    color: var(--brown);
    white-space: nowrap;
}

.btn-trade:hover:not(:disabled) {
    transform: translateY(-1px) scale(1.05);
    box-shadow:
        0 6px 15px rgba(255, 215, 0, 0.45),
        inset 0 1px 0 rgba(255,255,255,0.35);
}

.action-row {
    display: flex;
    gap: 4px;
    width: 100%;
    margin-bottom: 4px;
}

.btn-half {
    flex: 1;
    font-size: clamp(9px, 0.7vw, 13px);
    padding: 8px 4px;
    min-width: 0;
    border-radius: 6px;
    border: none;
    font-weight: 700;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    box-shadow:
        0 3px 8px rgba(0,0,0,0.3),
        inset 0 1px 0 rgba(255,255,255,0.25);
}

.btn-bankrupt,
.btn-jail,
.btn-build,
.btn-demolish {
    background: linear-gradient(145deg, var(--red), var(--red-dark));
    color: #fff;
    width: 100%;
    padding: 5px 4px;
    border: none;
    border-radius: 5px;
    font-size: clamp(8px, 0.6vw, 11px);
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 2px;
    box-sizing: border-box;
    box-shadow:
        0 3px 8px rgba(0,0,0,0.35),
        inset 0 1px 0 rgba(255,255,255,0.25);
}

.btn-bankrupt:hover:not(:disabled),
.btn-jail:hover:not(:disabled),
.btn-build:hover:not(:disabled),
.btn-demolish:hover:not(:disabled) {
    transform: translateY(-1px) scale(1.03);
    box-shadow:
        0 6px 14px rgba(220, 53, 69, 0.45),
        inset 0 1px 0 rgba(255,255,255,0.3);
}

.chat {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

#chatMessages {
    flex: 1 1 0;
    overflow-y: auto;
    font-size: clamp(9px, 0.8vw, 14px);
    color: var(--brown);
    padding: clamp(5px, 0.6vw, 10px) clamp(8px, 1vw, 12px);
    background: rgba(255, 255, 255, 0.22);
    border-radius: 8px;
    margin-bottom: clamp(3px, 0.4vw, 6px);
    min-height: 70px;
    box-shadow: inset 0 2px 6px rgba(0,0,0,0.15);
}

.chat-input {
    display: flex;
    gap: clamp(3px, 0.4vw, 6px);
}

.chat-input input {
    flex: 1;
    padding: clamp(3px, 0.4vw, 6px) clamp(6px, 0.7vw, 10px);
    border: 1px solid var(--gold-darker);
    border-radius: 6px;
    font-size: clamp(8px, 0.7vw, 12px);
    background: rgba(255, 255, 255, 0.5);
    outline: none;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.15);
}

.chat-input input:focus {
    border-color: var(--brown);
    background: rgba(255, 255, 255, 0.75);
    box-shadow:
        inset 0 2px 4px rgba(0,0,0,0.15),
        0 0 0 2px rgba(255,215,0,0.25);
}

.chat-input button {
    padding: clamp(3px, 0.4vw, 6px) clamp(8px, 1vw, 14px);
    background: var(--brown);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: clamp(9px, 0.8vw, 14px);
    font-weight: 700;
    box-shadow:
        0 3px 8px rgba(0,0,0,0.35),
        inset 0 1px 0 rgba(255,255,255,0.25);
}

.chat-input button:hover {
    background: #5a3d2b;
    transform: translateY(-1px);
}

#playersList {
    flex: 1 1 0;
    overflow-y: auto;
    font-size: clamp(10px, 0.9vw, 16px);
    padding: 2px 4px;
    min-height: 50px;
}

.player-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px;
    border-radius: 6px;
    margin-bottom: 2px;
    background: rgba(255, 255, 255, 0.12);
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.10);
    transition: background 0.2s ease, transform 0.2s ease;
}

.player-item:hover {
    background: rgba(255,255,255,0.20);
    transform: translateX(2px);
}

.player-item .dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.2);
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-shadow:
        0 1px 3px rgba(0,0,0,0.3),
        inset -1px -1px 2px rgba(0,0,0,0.35),
        inset 1px 1px 2px rgba(255,255,255,0.5);
}

.player-item .pname {
    flex: 1;
    font-weight: 600;
    font-size: clamp(10px, 0.9vw, 16px);
}

.player-item .pmoney {
    color: #000;
    font-weight: 700;
    font-size: clamp(10px, 0.9vw, 16px);
    text-shadow: 0 1px 0 rgba(255,255,255,0.3);
}

.player-item.active {
    background: rgba(255, 215, 0, 0.25);
    border-left: 3px solid var(--gold);
    box-shadow:
        inset 0 1px 3px rgba(255,215,0,0.25),
        0 0 15px rgba(255,215,0,0.2);
}

.player-item.bankrupt {
    opacity: 0.4;
    text-decoration: line-through;
}

.player-item.me {
    background: rgba(40, 167, 69, 0.20);
    box-shadow: inset 0 0 10px rgba(40,167,69,0.25);
}

#notifications {
    flex: 1 1 0;
    overflow-y: auto;
    font-size: clamp(9px, 0.7vw, 13px);
    color: var(--brown);
    padding: 6px 8px;
    background: rgba(255, 255, 255, 0.16);
    border-radius: 8px;
    margin: 2px 0;
    min-height: 50px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    box-shadow: inset 0 2px 6px rgba(0,0,0,0.12);
}

.notification-item {
    padding: 3px 6px;
    background: rgba(255, 255, 255, 0.22);
    border-radius: 4px;
    border-left: 2px solid var(--gold-dark);
    margin-bottom: 1px;
    font-size: 9px;
    line-height: 1.3;
    word-wrap: break-word;
    box-shadow: 0 1px 2px rgba(0,0,0,0.10);
}

.notification-item .ntime {
    font-size: 7px;
    color: rgba(61, 43, 31, 0.5);
    margin-right: 4px;
}

#journal {
    flex: 1 1 0;
    overflow-y: auto;
    font-size: clamp(10px, 0.9vw, 16px);
    color: var(--brown);
    padding: clamp(5px, 0.6vw, 10px) clamp(8px, 1vw, 12px);
    background: rgba(255, 255, 255, 0.10);
    border-radius: 8px;
    border: 1px solid rgba(61, 43, 31, 0.1);
    margin: 2px 0;
    min-height: 70px;
    display: flex;
    flex-direction: column;
    gap: clamp(2px, 0.3vw, 4px);
    box-shadow: inset 0 2px 6px rgba(0,0,0,0.12);
}

.journal-item {
    padding: clamp(2px, 0.3vw, 5px) clamp(4px, 0.5vw, 8px);
    border-bottom: 1px solid rgba(61, 43, 31, 0.06);
    display: flex;
    gap: clamp(4px, 0.5vw, 8px);
    font-size: clamp(9px, 0.8vw, 14px);
    line-height: 1.4;
    color: var(--brown);
    background: rgba(255, 255, 255, 0.06);
    border-radius: 4px;
}

.journal-item .jnum {
    color: rgba(61, 43, 31, 0.4);
    font-weight: 700;
    font-size: clamp(8px, 0.7vw, 13px);
    min-width: 24px;
}

.journal-item .jtext {
    flex: 1;
    word-wrap: break-word;
    font-weight: 500;
    font-size: clamp(9px, 0.8vw, 14px);
}

.journal-item .jtime {
    font-size: clamp(7px, 0.6vw, 12px);
    color: rgba(61, 43, 31, 0.4);
    white-space: nowrap;
}


/* ============================================================
   8. PLAYER DOTS — 3D RUTULIUKAI
   ============================================================ */
.cell .players-on-cell {
    position: absolute;
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    z-index: 20;
    padding: 2px;
    pointer-events: none;
    overflow: hidden;
    max-height: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.row-top .cell .players-on-cell {
    top: 2px; left: 0; right: 0; bottom: auto;
    justify-content: center; align-items: flex-start;
}

.row-bottom .cell .players-on-cell {
    top: auto; bottom: 2px; left: 0; right: 0;
    justify-content: center; align-items: flex-end;
}

.row-middle-left .cell .players-on-cell {
    top: 0; bottom: 0; left: 2px; right: auto;
    flex-direction: column; justify-content: center; align-items: flex-start;
    max-height: 100%; max-width: 50%;
}

.row-middle-right .cell .players-on-cell {
    top: 0; bottom: 0; right: 2px; left: auto;
    flex-direction: column; justify-content: center; align-items: flex-end;
    max-height: 100%; max-width: 50%;
}

.cell .players-on-cell .player-dot {
    width: var(--dot-size, 40px);
    height: var(--dot-size, 40px);
    border-radius: var(--dot-radius, 50%);
    border: 3px solid rgba(255, 255, 255, 0.95);
    display: flex;
    align-items: center;
    justify-content: center;

    box-shadow:
        var(--dot-drop-shadow),
        var(--dot-inner-shadow);
    flex-shrink: 0;
    pointer-events: auto;
    transition:
        transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 0.22s ease;
    position: relative;
    transform: translateZ(0);
    will-change: transform;
}

.cell .players-on-cell .player-dot:hover {
    transform: translateY(-3px) scale(1.18) translateZ(4px);
    z-index: 21;
    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.55),
        0 12px 30px rgba(0, 0, 0, 0.30),
        var(--dot-inner-shadow);
}

.cell .players-on-cell[data-count="2"] .player-dot { width: 36px; height: 36px; border-width: 2px; }
.cell .players-on-cell[data-count="3"] .player-dot { width: 28px; height: 28px; border-width: 2px; }
.cell .players-on-cell[data-count="4"] .player-dot,
.cell .players-on-cell[data-count="5"] .player-dot,
.cell .players-on-cell[data-count="6"] .player-dot,
.cell .players-on-cell[data-count="7"] .player-dot,
.cell .players-on-cell[data-count="8"] .player-dot { width: 22px; height: 22px; border-width: 2px; }

.cell.corner .players-on-cell .player-dot { width: 28px; height: 28px; flex-shrink: 0; }
.cell.corner .players-on-cell[data-count="2"] .player-dot { width: 24px; height: 24px; border-width: 2px; }
.cell.corner .players-on-cell[data-count="3"] .player-dot { width: 20px; height: 20px; border-width: 2px; }
.cell.corner .players-on-cell[data-count="4"] .player-dot,
.cell.corner .players-on-cell[data-count="5"] .player-dot,
.cell.corner .players-on-cell[data-count="6"] .player-dot,
.cell.corner .players-on-cell[data-count="7"] .player-dot,
.cell.corner .players-on-cell[data-count="8"] .player-dot { width: 16px; height: 16px; border-width: 1.5px; }

.row-middle-left .cell .players-on-cell .player-dot,
.row-middle-right .cell .players-on-cell .player-dot {
    width: 22px;
    height: 22px;
    border-width: 2px;
}

.player-emoji {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 300%;
    line-height: 1;
    pointer-events: none;
    user-select: none;
    filter: drop-shadow(0 2px 3px rgba(0,0,0,0.35));
}

.player-emoji.dancing { animation: dance 1s ease-in-out infinite; }
.player-emoji.spinning { animation: spin 2s linear infinite; }
.player-emoji.bouncing { animation: bounceEmoji 0.8s ease-in-out infinite; }

.player-item .dot .player-emoji-list {
    font-size: 10px;
    line-height: 1;
    display: inline-block;
    animation: dance 1s ease-in-out infinite;
    pointer-events: none;
}

.cell-houses {
    position: absolute;
    font-size: 14px;
    z-index: 10;
    text-shadow:
        0 1px 3px rgba(0, 0, 0, 0.6),
        0 0 6px rgba(255,255,255,0.4);
    pointer-events: none;
    line-height: 1;
    display: flex;
    gap: 1px;
    align-items: center;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4));
}

.row-top .cell .cell-houses         { bottom: 4px; left: 10px; flex-direction: column; }
.row-bottom .cell .cell-houses      { top: 4px; right: 6px; flex-direction: column; }
.row-middle-left .cell .cell-houses { bottom: 4px; right: 4px; flex-direction: column; }
.row-middle-right .cell .cell-houses{ top: 4px; left: 6px; flex-direction: column; }

.cell.corner .cell-houses { font-size: 10px; }

.cell-houses span {
    background: linear-gradient(145deg, rgba(255,255,255,0.35), rgba(0,0,0,0.15));
    padding: 1px 3px;
    border-radius: 4px;
    display: inline-block;
    line-height: 1.2;
    box-shadow:
        0 2px 4px rgba(0,0,0,0.3),
        inset 0 1px 0 rgba(255,255,255,0.4);
}

.player-dot.jumping {
    transform: scale(1.4) translateZ(8px);
    box-shadow:
        0 0 25px rgba(255, 215, 0, 0.9),
        0 0 50px rgba(255, 215, 0, 0.5),
        var(--dot-inner-shadow);
    z-index: 101;
}


/* ============================================================
   9. MINI KORTELĖS — 3D
   ============================================================ */
.mini-cards-container {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    align-content: flex-start;
    margin-top: 4px;
    flex: 1 1 45%;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 4px;
    width: 100%;
    -webkit-overflow-scrolling: touch;
}

.mini-card {
    width: 40px;
    height: 60px;
    flex: 0 0 40px;
    background: #f5f0e8;
    border: 2px solid var(--brown);
    border-radius: 5px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    box-shadow:
        0 3px 8px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255,255,255,0.6);
}

.mini-card:hover {
    transform: translateY(-3px) scale(1.06);
    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.45),
        0 0 15px rgba(255,215,0,0.3),
        inset 0 1px 0 rgba(255,255,255,0.6);
    z-index: 10;
    border-color: var(--gold);
}

.mini-card-color {
    width: 100%;
    height: 20px;
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--card-color, var(--gold-dark)) 80%, #fff) 0%,
        var(--card-color, var(--gold-dark)) 100%);
    border-bottom: 2px solid var(--brown);
    flex-shrink: 0;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.4);
}

.mini-card-color.mini-card-icon {
    background: linear-gradient(145deg, #f0e8d8, #e0d5c0);
    border-bottom: 1px solid rgba(61, 43, 31, 0.2);
}

.mini-card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 3px 2px;
    text-align: center;
    background: #f5f0e8;
    position: relative;
}

.mini-card-name {
    font-size: 6px;
    font-weight: 700;
    color: var(--brown);
    line-height: 1.1;
    word-wrap: break-word;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    padding: 0 1px;
}

.mini-card-info {
    font-size: 5px;
    font-weight: 600;
    color: #6c757d;
    margin-top: auto;
    padding-top: 2px;
    border-top: 1px solid rgba(61, 43, 31, 0.2);
    line-height: 1;
}

.mini-card-houses {
    position: absolute;
    bottom: 8px;
    right: 2px;
    font-size: 7px;
    line-height: 1;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 3px;
    padding: 1px 2px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

.trade-mini-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    align-content: flex-start;
    padding: 8px;
    background: rgba(255, 255, 255, 0.22);
    border-radius: 10px;
    max-height: 250px;
    overflow-y: auto;
    min-height: 80px;
    width: 100%;
    box-shadow: inset 0 2px 6px rgba(0,0,0,0.12);
}

.trade-mini-cards .mini-card {
    width: 50px;
    height: 75px;
    flex: 0 0 50px;
}

.trade-mini-cards .mini-card.selected {
    border-color: #28a745;
    border-width: 3px;
    box-shadow:
        0 0 15px rgba(40, 167, 69, 0.75),
        0 4px 12px rgba(0,0,0,0.3),
        inset 0 1px 0 rgba(255,255,255,0.5);
    background: rgba(40, 167, 69, 0.12);
    transform: translateY(-2px) scale(1.05);
}

.trade-mini-cards .mini-card-color { height: 22px; }

.trade-mini-cards .mini-card-info {
    font-size: 7px;
    font-weight: 700;
    color: #28a745;
}

.trade-mini-cards .mini-card-houses {
    bottom: 18px;
    right: 1px;
    font-size: 8px;
    background: rgba(255, 255, 255, 0.95);
}

.trade-mini-cards .mini-card input[type="checkbox"],
.trade-mini-cards .mini-card input[type="radio"] {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 14px;
    height: 14px;
    cursor: pointer;
    z-index: 10;
    accent-color: #28a745;
}

.demolish-card,
.vote-kick-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    margin: 4px 0;
    background: rgba(255, 255, 255, 0.30);
    border-radius: 10px;
    border: 2px solid var(--gold-dark);
    cursor: pointer;
    transition: all 0.2s;
    box-shadow:
        0 3px 8px rgba(0,0,0,0.20),
        inset 0 1px 0 rgba(255,255,255,0.4);
}

.demolish-card:hover,
.vote-kick-card:hover {
    background: rgba(255, 255, 255, 0.50);
    transform: translateY(-2px) scale(1.02);
    border-color: var(--red);
    box-shadow:
        0 6px 14px rgba(0,0,0,0.30),
        0 0 15px rgba(220,53,69,0.25),
        inset 0 1px 0 rgba(255,255,255,0.5);
}

.demolish-card .card-color,
.vote-kick-card .card-color {
    width: 16px;
    height: 16px;
    border-radius: 4px;
    flex-shrink: 0;
    box-shadow:
        0 2px 4px rgba(0,0,0,0.3),
        inset -1px -1px 2px rgba(0,0,0,0.25),
        inset 1px 1px 2px rgba(255,255,255,0.5);
}

.demolish-card .card-name,
.vote-kick-card .card-name {
    font-weight: 600;
    font-size: 14px;
    flex: 1;
    margin-left: 8px;
}

.demolish-card .card-houses { font-size: 16px; margin: 0 8px; }
.demolish-card .card-refund { color: #28a745; font-weight: 700; font-size: 13px; }

.vote-kick-card.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.vote-kick-card .card-votes { font-size: 13px; font-weight: 700; color: var(--red); }

.vote-kick-status {
    margin: 10px 0;
    padding: 10px;
    background: rgba(255, 255, 255, 0.30);
    border-radius: 8px;
    font-size: 13px;
    color: var(--brown);
    text-align: center;
    border: 1px solid var(--gold-dark);
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.12);
}

.vote-kick-timer {
    font-size: 18px;
    font-weight: 700;
    color: var(--red);
    margin: 5px 0;
}


/* ============================================================
   10. ANIMACIJOS
   ============================================================ */
@keyframes dance {
    0%, 100% { transform: rotate(-15deg) scale(1); }
    25%      { transform: rotate(15deg) scale(1.1); }
    50%      { transform: rotate(-15deg) scale(1); }
    75%      { transform: rotate(15deg) scale(1.1); }
}

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

@keyframes bounceEmoji {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-30%); }
}

@keyframes blink {
    0%, 50%  { opacity: 1; }
    51%, 100% { opacity: 0.3; }
}

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

@keyframes wave {
    0%, 100% { transform: translate(-50%, -50%) translateY(0); }
    50%      { transform: translate(-50%, -50%) translateY(-8px); }
}

@keyframes bounce {
    0%, 100% { transform: translate(-50%, -50%) translateY(0); }
    50%      { transform: translate(-50%, -50%) translateY(-12px); }
}

@keyframes glow {
    0%, 100% { filter: drop-shadow(0 0 5px gold); transform: translate(-50%, -50%) scale(1); }
    50%      { filter: drop-shadow(0 0 15px gold); transform: translate(-50%, -50%) scale(1.1); }
}

@keyframes choiceFadeIn {
    from { opacity: 0; transform: scale(0.9); }
    to   { opacity: 1; transform: scale(1); }
}

@keyframes diceRollEnhanced {
    0%   { transform: rotateX(0deg)   rotateY(0deg)   rotateZ(0deg)   scale(1);    }
    20%  { transform: rotateX(180deg) rotateY(90deg)  rotateZ(-60deg) scale(1.08); }
    40%  { transform: rotateX(360deg) rotateY(180deg) rotateZ(60deg)  scale(0.95); }
    60%  { transform: rotateX(540deg) rotateY(270deg) rotateZ(-30deg) scale(1.05); }
    80%  { transform: rotateX(720deg) rotateY(360deg) rotateZ(30deg)  scale(0.98); }
    100% { transform: rotateX(720deg) rotateY(360deg) rotateZ(0deg)   scale(1);    }
}

@keyframes diceGlow {
    0%, 100% { box-shadow: 0 4px 15px rgba(0,0,0,0.25), 0 0 5px rgba(255,215,0,0.3); }
    50%      { box-shadow: 0 4px 15px rgba(0,0,0,0.25), 0 0 25px rgba(255,215,0,0.8), 0 0 40px rgba(255,215,0,0.4); }
}

@keyframes diceSettle {
    0%   { transform: scale(1.12) rotateX(0deg) rotateY(0deg); }
    60%  { transform: scale(0.94) rotateX(0deg) rotateY(0deg); }
    100% { transform: scale(1)    rotateX(0deg) rotateY(0deg); }
}

@keyframes houseGrow {
    0%   { transform: scale(0) rotate(-180deg); opacity: 0; }
    50%  { transform: scale(1.3) rotate(0deg); opacity: 1; }
    100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

@keyframes hotelGrow {
    0%   { transform: scale(0) rotate(180deg); opacity: 0; }
    50%  { transform: scale(1.5) rotate(0deg); opacity: 1; }
    100% { transform: scale(1.1) rotate(0deg); opacity: 1; }
}

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

@keyframes highlightPulse {
    0%   { box-shadow: 0 0 25px rgba(255,215,0,0.9), inset 0 0 15px rgba(255,215,0,0.5); transform: scale(1.05); }
    100% { box-shadow: 0 0 40px rgba(255,215,0,1), inset 0 0 25px rgba(255,215,0,0.7); transform: scale(1.1); }
}

@keyframes highlightGreenPulse {
    0%   { box-shadow: 0 0 30px rgba(40,167,69,0.9), inset 0 0 20px rgba(40,167,69,0.5); transform: scale(1.08); }
    100% { box-shadow: 0 0 50px rgba(40,167,69,1), inset 0 0 30px rgba(40,167,69,0.7); transform: scale(1.15); }
}

@keyframes highlightRedBlink {
    0%, 100% { opacity: 1; box-shadow: 0 0 30px rgba(220,53,69,0.9), inset 0 0 20px rgba(220,53,69,0.5); }
    50%      { opacity: 0.7; box-shadow: 0 0 50px rgba(220,53,69,1), inset 0 0 30px rgba(220,53,69,0.7); }
}

@keyframes fullGroupPulse {
    0%, 100% { box-shadow: 0 0 15px var(--owner-color, var(--gold)), inset 0 0 10px var(--owner-color, var(--gold)); }
    50%      { box-shadow: 0 0 25px var(--owner-color, var(--gold)), inset 0 0 15px var(--owner-color, var(--gold)); }
}

@keyframes flyMoney {
    0%   { transform: translate(0, 0) scale(1); opacity: 1; }
    100% { transform: translate(var(--fly-x, 0px), var(--fly-y, -200px)) scale(0.3); opacity: 0; }
}

@keyframes winnerBounce {
    0%, 100% { transform: translateY(0) scale(1); }
    50%      { transform: translateY(-20px) scale(1.1); }
}

@keyframes winnerGlow {
    0%, 100% { text-shadow: 0 0 30px rgba(255,215,0,0.8), 0 4px 20px rgba(0,0,0,0.9); transform: scale(1); }
    50%      { text-shadow: 0 0 60px rgba(255,215,0,1), 0 0 80px rgba(255,215,0,0.6), 0 4px 20px rgba(0,0,0,0.9); transform: scale(1.05); }
}

@keyframes confettiFall {
    0%   { transform: translateY(-100vh) rotate(0deg); opacity: 1; }
    100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}

@keyframes floatSlow {
    0%, 100% { transform: translateY(0) translateZ(0); }
    50%      { transform: translateY(-2px) translateZ(1px); }
}

@keyframes glowPulse {
    0%, 100% { filter: drop-shadow(0 0 4px currentColor); }
    50%      { filter: drop-shadow(0 0 12px currentColor); }
}

.dice.rolling {
    animation: diceRollEnhanced 0.9s cubic-bezier(0.25, 0.1, 0.25, 1),
               diceGlow 0.9s ease-in-out;
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.5));
    transform-origin: center center;
    will-change: transform, filter;
}

.dice.settle {
    animation: diceSettle 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.cell-houses span.new-house {
    animation: houseGrow 0.6s ease-out;
    display: inline-block;
}

.cell-houses span.new-hotel {
    animation: hotelGrow 0.8s ease-out;
    display: inline-block;
}

.cell-houses span.house-bounce {
    animation: houseBounce 0.4s ease-out;
    display: inline-block;
}

.cell.highlight-yellow {
    background: rgba(255, 215, 0, 0.5);
    box-shadow: 0 0 25px rgba(255, 215, 0, 0.9), inset 0 0 15px rgba(255, 215, 0, 0.5);
    transform: scale(1.08) translateZ(4px);
    z-index: 100;
    animation: highlightPulse 0.6s ease-in-out infinite alternate;
}

.cell.highlight-green {
    background: rgba(40, 167, 69, 0.5);
    box-shadow: 0 0 30px rgba(40, 167, 69, 0.9), inset 0 0 20px rgba(40, 167, 69, 0.5);
    transform: scale(1.1) translateZ(6px);
    z-index: 100;
    animation: highlightGreenPulse 0.5s ease-in-out infinite alternate;
}

.cell.highlight-red {
    background: rgba(220, 53, 69, 0.5);
    box-shadow: 0 0 30px rgba(220, 53, 69, 0.9), inset 0 0 20px rgba(220, 53, 69, 0.5);
    transform: scale(1.08) translateZ(4px);
    z-index: 100;
    animation: highlightRedBlink 0.4s ease-in-out infinite;
}

.cell.property.full-group {
    border-color: var(--owner-color, var(--gold));
    box-shadow: 0 0 15px var(--owner-color, var(--gold)), inset 0 0 10px var(--owner-color, var(--gold));
    animation: fullGroupPulse 2s ease-in-out infinite;
}

.cell.property.full-group::after {
    background: var(--owner-color, var(--gold));
    height: 5px;
    box-shadow: 0 0 10px var(--owner-color, var(--gold));
}

.flying-money {
    position: fixed;
    font-size: 36px;
    font-weight: 700;
    color: var(--gold);
    text-shadow:
        0 0 10px rgba(255, 215, 0, 0.9),
        0 2px 5px rgba(0, 0, 0, 0.5);
    z-index: 99999;
    pointer-events: none;
    animation: flyMoney 1.2s ease-out forwards;
    display: flex;
    align-items: center;
    gap: 5px;
}

.flying-money.negative {
    color: var(--red);
    text-shadow: 0 0 10px rgba(220, 53, 69, 0.9), 0 2px 5px rgba(0, 0, 0, 0.5);
}

.flying-money.positive {
    color: #28a745;
    text-shadow: 0 0 10px rgba(40, 167, 69, 0.9), 0 2px 5px rgba(0, 0, 0, 0.5);
}

.confetti-piece {
    position: fixed;
    width: 12px;
    height: 12px;
    top: -20px;
    z-index: 99998;
    animation: confettiFall linear forwards;
    pointer-events: none;
}

.confetti-piece.rect { width: 8px; height: 16px; border-radius: 2px; }
.confetti-piece.circle { width: 12px; height: 12px; border-radius: 50%; }
.confetti-piece.triangle {
    width: 0; height: 0;
    background: transparent;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 12px solid;
}

#winnerModal.active { display: flex; }

#buyChoice,
#buyCard,
#cellActionInfo {
    position: absolute;
    inset: 0;
    display: none;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, 0.45);
    border-radius: 8px;
    z-index: 10;
    animation: choiceFadeIn 0.25s ease;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

#buyChoice.show,
#buyCard.show { display: flex; }

.buy-choice-box,
.cell-action-box {
    background: linear-gradient(145deg, #f5f0e8, #e8d5b5);
    border-radius: 12px;
    padding: 12px 14px 14px;
    width: 85%;
    max-width: 220px;
    box-shadow:
        0 15px 40px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(255,255,255,0.3) inset,
        inset 0 2px 4px rgba(255,255,255,0.4);
    border: 2px solid var(--gold-dark);
    animation: modalPop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.buy-choice-header,
.cell-action-header {
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    color: var(--green);
    border-bottom: 2px solid var(--gold-dark);
    padding-bottom: 5px;
    margin-bottom: 6px;
}

.buy-choice-body,
.cell-action-body {
    text-align: center;
    margin-bottom: 8px;
}

.buy-choice-body p,
.cell-action-body p {
    font-size: 11px;
    color: var(--brown);
    margin: 2px 0;
}

.buy-choice-body #choiceFieldName {
    font-size: 14px;
    color: var(--green);
    font-weight: 700;
}

.buy-choice-body #choiceFieldCost {
    color: #28a745;
    font-weight: 700;
    font-size: 13px;
}

.buy-choice-body #choicePlayerMoney {
    color: #007bff;
    font-weight: 700;
    font-size: 13px;
}

.buy-choice-buttons {
    display: flex;
    gap: 6px;
    justify-content: center;
}

.choice-btn {
    padding: 8px 12px;
    border: none;
    border-radius: 6px;
    font-size: clamp(10px, 0.8vw, 13px);
    font-weight: 700;
    flex: 1;
    min-width: 0;
    color: #fff;
    box-shadow:
        0 3px 8px rgba(0,0,0,0.35),
        inset 0 1px 0 rgba(255,255,255,0.3);
}

.choice-btn:hover {
    transform: translateY(-1px) scale(1.04);
}

.choice-buy {
    background: linear-gradient(145deg, #28a745, #1e7e34);
}

.choice-buy:hover {
    box-shadow:
        0 6px 14px rgba(40, 167, 69, 0.5),
        inset 0 1px 0 rgba(255,255,255,0.35);
}

.choice-cancel {
    background: linear-gradient(145deg, var(--red), var(--red-dark));
}

.choice-cancel:hover {
    box-shadow:
        0 6px 14px rgba(220, 53, 69, 0.5),
        inset 0 1px 0 rgba(255,255,255,0.35);
}

#turnIndicator {
    text-align: center;
    padding: 16px;
    background: rgba(255, 215, 0, 0.15);
    border-radius: 10px;
    border: 2px solid var(--gold);
    font-size: 24px;
    font-weight: 700;
    color: var(--brown);
    margin-bottom: 8px;
    transition: opacity 0.3s ease;
    box-shadow:
        0 4px 12px rgba(0,0,0,0.3),
        inset 0 1px 0 rgba(255,255,255,0.3);
}

#turnIndicator.hidden { display: none; }

#center-5 {
    position: relative;
    overflow: hidden;
}


/* ============================================================
   11. RESPONSIVE
   ============================================================ */
@media (max-width: 1200px) {
    #board.fixed {
        width: 100%;
        min-width: auto;
        max-width: 100%;
    }
}

@media (max-width: 992px) {
    .row-middle-left,
    .row-middle-right {
        flex: 0 0 175px;
        width: 175px;
    }

    .cell .cell-icon { font-size: 24px; }
    .cell .cell-name { font-size: 10px; }
    .cell .cell-cost { font-size: 9px; }

    .dice { width: 55px; height: 55px; }
    .dice-dots-container { width: 38px; height: 38px; gap: 4px; }
    .dice-dot { width: 9px; height: 9px; }

    .header-btn { font-size: 11px; padding: 4px 10px; min-width: 60px; }
    .header-controls { padding: 4px 10px; gap: 6px; }

    .cell { font-size: 8px; }
    .cell-bg-icon { font-size: 5em; }
    .row-middle-left .cell-bg-icon,
    .row-middle-right .cell-bg-icon { font-size: 4em; }
    .cell.corner .cell-bg-icon { font-size: 6em; }
}

@media (max-width: 768px) {
    :root {
        --board-tilt: 0deg;
        --cell-shadow-rest: 0 1px 3px rgba(0,0,0,0.20),
                            inset 0 1px 0 rgba(255,255,255,0.4);
        --cell-shadow-hover: 0 3px 8px rgba(0,0,0,0.30),
                             inset 0 1px 0 rgba(255,255,255,0.5);
    }

    #game { height: 100dvh; }
    #gameBody { gap: 4px; }

    #board {
        padding: 6px;
        gap: 1px;
        transform: none;
        border-radius: 14px;
    }

    .board-row { gap: 1px; }

    .cell {
        font-size: 6px;
        padding: 1px;
        border-width: 1px;
        border-radius: 4px;
    }

    .cell .cell-icon { font-size: 18px; }
    .cell .cell-name { font-size: 8px; }
    .cell .cell-cost { font-size: 7px; }

    .cell .players-on-cell .player-dot { width: 16px; height: 16px; border-width: 2px; }
    .cell.corner .players-on-cell .player-dot { width: 14px; height: 14px; }

    .row-middle-left,
    .row-middle-right {
        flex: 0 0 130px;
        width: 130px;
    }

    .row-middle { gap: 1px; }
    .row-middle-center { gap: 1px; padding: 0 1px; }
    .center-row { gap: 1px; }

    .center-cell {
        padding: 3px 4px;
        min-height: 50px;
        border-width: 1px;
    }

    .center-cell h4 {
        padding-bottom: 2px;
        margin-bottom: 2px;
    }

    .dice {
        width: 50px;
        height: 50px;
        border-radius: 10px;
        border-width: 1.5px;
    }
    .dice-dots-container { width: 36px; height: 36px; gap: 4px; padding: 2px; }
    .dice-dot { width: 8px; height: 8px; }
    .dice-container { gap: 12px; margin: 0; padding: 0; }

    .control-buttons button { font-size: 8px; padding: 3px 8px; border-radius: 4px; }
    .action-row { gap: 3px; margin-bottom: 3px; }
    .btn-half { font-size: 9px; padding: 4px 3px; }

    #myInfo .player-money { font-size: 24px; }
    #myInfo .player-name { font-size: 11px; }
    #myInfo .player-color { width: 18px; height: 18px; }
    #myInfo { font-size: 9px; gap: 1px; }

    #playersList { font-size: 9px; max-height: 50px; min-height: 30px; padding: 1px 3px; }
    .player-item { padding: 1px 3px; font-size: 8px; }
    .player-item .dot { width: 8px; height: 8px; }

    #notifications { font-size: 9px; max-height: 50px; min-height: 30px; padding: 4px 6px; }
    .notification-item { font-size: 8px; padding: 2px 6px; }

    #gameHeader { font-size: 10px; padding: 4px 10px; gap: 4px; }

    .header-btn { font-size: 10px; padding: 3px 8px; min-width: 50px; }
    .header-controls { padding: 4px 8px; gap: 4px; }

    .buy-choice-box { padding: 12px 14px 14px; max-width: 220px; }
    .buy-choice-header { font-size: 14px; padding-bottom: 6px; margin-bottom: 8px; }
    .buy-choice-body p { font-size: 12px; }
    .buy-choice-body #choiceFieldName { font-size: 15px; }
    .choice-btn { font-size: 12px; padding: 6px 12px; }

    #leftPanel { width: 80px; padding: 6px 4px; font-size: 9px; gap: 4px; }
    #gameIdBox { font-size: 8px; padding: 4px 2px; }
    #gameIdBox span { font-size: 9px; }
    .left-btn { font-size: 9px; padding: 6px 4px; }
    #leftPlayerCount, #leftTurnDisplay { font-size: 8px; padding: 3px 4px; }

    .cell-bg-icon { font-size: 4em; }
    .row-middle-left .cell-bg-icon,
    .row-middle-right .cell-bg-icon { font-size: 3em; }
    .cell.corner .cell-bg-icon { font-size: 5em; }
}

@media (max-width: 480px) {
    :root {
        --board-tilt: 0deg;
    }

    #board { padding: 4px; gap: 1px; border-width: 2px; border-radius: 12px; }
    .board-row { gap: 1px; }

    .cell {
        border-radius: 4px;
        padding: 1px;
        border-width: 1px;
    }

    .cell .cell-icon { font-size: 14px; }
    .cell .cell-name { font-size: 6px; }
    .cell .cell-cost { font-size: 6px; }

    .cell .players-on-cell .player-dot { width: 13px; height: 13px; border-width: 1.5px; }
    .cell.corner .players-on-cell .player-dot { width: 11px; height: 11px; }

    .row-middle-left,
    .row-middle-right { flex: 0 0 120px; width: 120px; }

    .center-cell { min-height: 35px; padding: 2px 3px; border-radius: 5px; border-width: 1px; }

    .dice { width: 40px; height: 40px; border-radius: 8px; border-width: 1.5px; }
    .dice-dots-container { width: 28px; height: 28px; gap: 3px; padding: 2px; }
    .dice-dot { width: 6px; height: 6px; }
    .dice-container { gap: 8px; }

    .control-buttons button { font-size: 7px; padding: 2px 6px; border-radius: 3px; }
    .btn-half { font-size: 8px; padding: 3px 2px; }

    #myInfo .player-money { font-size: 11px; }
    #myInfo .player-name { font-size: 9px; }
    #myInfo .player-color { width: 14px; height: 14px; border-width: 1.5px; }
    #myInfo { font-size: 7px; }

    #playersList { font-size: 7px; max-height: 40px; min-height: 25px; padding: 1px 2px; }
    .player-item { padding: 1px 2px; font-size: 7px; gap: 2px; }
    .player-item .dot { width: 6px; height: 6px; }

    #notifications { font-size: 7px; max-height: 40px; min-height: 25px; padding: 3px 4px; }
    .notification-item { font-size: 7px; padding: 2px 4px; border-left-width: 2px; }

    #gameHeader { font-size: 8px; padding: 3px 6px; gap: 3px; }
    .header-btn { font-size: 8px; padding: 2px 6px; min-width: 40px; border-width: 1px; }
    .header-controls { padding: 3px 6px; gap: 3px; border-width: 1px; }

    .lobby-container { padding: 16px 20px; border-radius: 20px; }
    .lobby-container h1 { font-size: 1.8em; }
    .lobby-container .subtitle { font-size: 0.9em; margin-bottom: 20px; }
    .lobby-form input { padding: 10px 14px; font-size: 14px; }
    .btn { padding: 10px; font-size: 14px; border-radius: 8px; }

    .color-circle { width: 38px; height: 38px; }
    .color-circle.selected::after { font-size: 20px; }
    .color-picker { gap: 8px; padding: 8px; }

    .cell-bg-icon { font-size: 3.5em; }
    .row-middle-left .cell-bg-icon,
    .row-middle-right .cell-bg-icon { font-size: 2.5em; }
    .cell.corner .cell-bg-icon { font-size: 4em; }

    .landing-container h1 { font-size: 2.5em; }
    .landing-container { padding: 30px 20px; }
    .landing-btn { padding: 14px 20px; font-size: 16px; }
    .menu-container h1 { font-size: 2em; }

    .rules-content { padding: 20px 15px; }
    .rules-content h2 { font-size: 1.4em; }
}


/* ============================================================
   12. DARK MODE
   ============================================================ */
body.dark-mode {
    background: #0a0a0a;
}

body.dark-mode .cell {
    background: linear-gradient(145deg, #2a2a2a, #1f1f1f);
    color: #e0e0e0;
    border-color: #444;
    box-shadow:
        0 2px 4px rgba(0,0,0,0.5),
        0 4px 10px rgba(0,0,0,0.4),
        inset 0 1px 0 rgba(255,255,255,0.10),
        inset 0 -2px 4px rgba(0,0,0,0.4);
}

body.dark-mode .cell:hover {
    box-shadow:
        0 6px 14px rgba(0,0,0,0.55),
        0 12px 28px rgba(0,0,0,0.4),
        inset 0 1px 0 rgba(255,255,255,0.15),
        inset 0 -3px 6px rgba(0,0,0,0.5);
}

body.dark-mode .cell .cell-name,
body.dark-mode .cell .cell-cost,
body.dark-mode .cell .cell-number {
    color: #e0e0e0;
    text-shadow: 0 1px 2px rgba(0,0,0,0.7);
}

body.dark-mode .center-cell {
    background: var(--center-bg, linear-gradient(145deg, #2a2a2a, #1a1a1a));
    border-color: var(--center-border, #444);
    color: var(--center-font-color, #e0e0e0);
    box-shadow:
        0 2px 4px rgba(0,0,0,0.5),
        inset 0 1px 0 rgba(255,255,255,0.08);
}

body.dark-mode .center-cell h4 {
    color: var(--center-title-color, #e0e0e0);
    border-bottom-color: rgba(224, 224, 224, 0.2);
}

body.dark-mode #chatMessages,
body.dark-mode #journal,
body.dark-mode #notifications,
body.dark-mode #playersList {
    background: rgba(255, 255, 255, 0.05);
    color: #e0e0e0;
}

body.dark-mode .journal-item,
body.dark-mode .notification-item,
body.dark-mode .player-item {
    background: rgba(255, 255, 255, 0.05);
    color: #e0e0e0;
}

body.dark-mode #myInfo { color: #e0e0e0; }
body.dark-mode #myInfo .player-money { color: #fff; }
body.dark-mode #myInfo .player-name { color: #e0e0e0; }

body.dark-mode #cellInfoPanel {
    background: rgba(255, 255, 255, 0.05);
    color: #e0e0e0;
}


/* ============================================================
   13. WAITING ROOM
   ============================================================ */
#waitingRoomOverlay {
    animation: choiceFadeIn 0.3s ease;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

@media (max-width: 768px) {
    #waitingRoomOverlay > div > div:nth-child(3),
    #waitingPlayersList {
        grid-template-columns: 1fr;
    }
}


/* ============================================================
   14. BUY CARD BŪSENOS
   ============================================================ */
#buyCard.pending #buyCardBox {
    border-color: #ffc107;
    box-shadow:
        0 8px 30px rgba(255, 193, 7, 0.55),
        inset 0 2px 4px rgba(255,255,255,0.3);
}

#buyCard.pending #buyCardHeader {
    color: #e0a800;
    border-bottom-color: #ffc107;
}

#buyCard.success #buyCardBox {
    border-color: #28a745;
    box-shadow:
        0 8px 30px rgba(40, 167, 69, 0.55),
        inset 0 2px 4px rgba(255,255,255,0.3);
}

#buyCard.success #buyCardHeader {
    color: #28a745;
    border-bottom-color: #28a745;
}

#buyCard.cancel #buyCardBox {
    border-color: var(--red);
    box-shadow:
        0 8px 30px rgba(220, 53, 69, 0.55),
        inset 0 2px 4px rgba(255,255,255,0.3);
}

#buyCard.cancel #buyCardHeader {
    color: var(--red);
    border-bottom-color: var(--red);
}


/* ============================================================
   15. AUKCIONO MINI KORTELĖ
   ============================================================ */
#auctionMiniCardContainer {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px;
    background: rgba(255, 255, 255, 0.20);
    border-radius: 10px;
    min-height: 100px;
    box-shadow: inset 0 2px 6px rgba(0,0,0,0.12);
}

#auctionMiniCardContainer .mini-card {
    width: 80px;
    height: 120px;
    flex: 0 0 80px;
    background: #f5f0e8;
    border: 3px solid var(--brown);
    border-radius: 8px;
    box-shadow:
        0 6px 18px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255,255,255,0.6);
}


/* ============================================================
   16. #center-1 SCROLL FIX
   ============================================================ */
#center-1 {
    overflow: hidden;
    position: relative;
    z-index: 100;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

#center-1 .center-cell { overflow: hidden; }

#center-1 .mini-cards-container {
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1 1 45%;
    min-height: 0;
}

#center-1 #myInfo { overflow: hidden; }


/* ============================================================
   17. TRADE BUTTONS
   ============================================================ */
.btn-trade-option {
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 10px;
    font-size: clamp(12px, 0.9vw, 16px);
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 4px 0;
    box-shadow:
        0 3px 8px rgba(0,0,0,0.3),
        inset 0 1px 0 rgba(255,255,255,0.25);
}

.btn-trade-option:hover:not(:disabled) {
    transform: translateY(-1px) scale(1.02);
    box-shadow:
        0 6px 14px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255,255,255,0.3);
}


/* ============================================================
   18. SOUND BUTTONS
   ============================================================ */
#musicBtn,
#soundBtn,
#themeBtn,
#modeBtn,
#statsBtn {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* ============================================================
   18.5. PAGE FOOTER
   ============================================================ */
.page-footer {
    margin-top: 30px;
    padding-top: 15px;
    border-top: 1px solid rgba(201, 168, 76, 0.3);
    text-align: center;
    color: rgba(212, 184, 150, 0.6);
    font-size: 12px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    pointer-events: none;
    user-select: none;
}

@media (max-width: 768px) {
    .page-footer { margin-top: 20px; padding-top: 10px; font-size: 11px; }
}

@media (max-width: 480px) {
    .page-footer { margin-top: 15px; padding-top: 8px; font-size: 10px; }
}


/* ============================================================
   19. MOBILE
   ============================================================ */
@media (max-width: 768px) {
    :root {
        --corner-width:      clamp(20px, 5vw, 60px);
        --corner-height:     clamp(20px, 5vh, 60px);
        --left-col-width:    clamp(14px, 3.5vw, 40px);
        --right-col-width:   clamp(14px, 3.5vw, 40px);
        --top-row-height:    clamp(25px, 7vh, 70px);
        --bottom-row-height: clamp(25px, 7vh, 70px);
        --board-gap:         clamp(1px, 0.2vw, 2px);
        --board-max-width:   300vw;
        --board-min-width:   300vw;
    }

    body { overflow: hidden; }
    #game { height: 100dvh; overflow: hidden; }

    #gameHeader {
        font-size: 10px;
        padding: 6px 10px;
        gap: 4px;
        flex-wrap: wrap;
    }

    #leftPanel {
        width: 70px !important;
        flex: 0 0 70px !important;
        padding: 4px 3px !important;
        font-size: 8px;
        gap: 4px !important;
    }

    #gameIdBox { font-size: 8px; padding: 4px 2px; }
    #gameIdBox span { font-size: 9px; }

    .left-btn {
        font-size: 8px !important;
        padding: 5px 3px !important;
        white-space: normal;
        line-height: 1.1;
    }

    #leftPlayerCount,
    #leftTurnDisplay {
        font-size: 8px;
        padding: 4px 2px;
    }

    #leftPanelToggle { display: none !important; }
    #gameLangSwitcher { display: none !important; }

    #board {
        flex: 1 1 0 !important;
        width: 300vw !important;
        min-width: 300vw !important;
        max-width: 300vw !important;
        padding: 4px !important;
        overflow: auto !important;
        -webkit-overflow-scrolling: touch;
        transform: none !important;
        border-radius: 12px !important;
    }

    .cell {
        font-size: 6px;
        padding: 1px;
        border-width: 1px;
        border-radius: 4px;
    }

    .cell .cell-name { font-size: 7px; max-width: 95%; }
    .cell .cell-cost { font-size: 6px; }

    .cell-bg-icon { font-size: 3em; }
    .cell.corner .cell-bg-icon { font-size: 4em; }
    .row-middle-left .cell-bg-icon,
    .row-middle-right .cell-bg-icon { font-size: 2.5em; }

    .cell .players-on-cell .player-dot { width: 14px; height: 14px; border-width: 1.5px; }
    .cell.corner .players-on-cell .player-dot { width: 12px; height: 12px; }
    .row-middle-left .cell .players-on-cell .player-dot,
    .row-middle-right .cell .players-on-cell .player-dot { width: 14px; height: 14px; }

    .player-emoji { font-size: 200%; }

    .center-cell {
        padding: 2px 3px;
        border-width: 1px;
        border-radius: 5px;
        min-height: 40px;
    }

    .center-cell h4 {
        font-size: 8px;
        padding-bottom: 1px;
        margin-bottom: 2px;
    }

    .dice {
        width: 34px;
        height: 34px;
        border-width: 1.5px;
        border-radius: 8px;
        transform-style: preserve-3d;
        backface-visibility: hidden;
    }

    .dice-dots-container { width: 24px; height: 24px; gap: 2px; padding: 2px; }
    .dice-dot { width: 5px; height: 5px; }
    .dice-container { gap: 8px; }

    .control-buttons button { font-size: 8px; padding: 3px 6px; border-radius: 4px; }
    .btn-half { font-size: 8px; padding: 3px 2px; }

    .btn-bankrupt,
    .btn-jail,
    .btn-build,
    .btn-demolish {
        font-size: 8px;
        padding: 4px 3px;
    }

    #myInfo { font-size: 7px; }
    #myInfo .player-money { font-size: 14px; }
    #myInfo .player-name { font-size: 9px; }
    #myInfo .player-color { width: 12px; height: 12px; }

    #chatMessages,
    #journal,
    #notifications,
    #playersList {
        font-size: 7px;
        min-height: 30px;
    }

    .journal-item,
    .notification-item,
    .player-item {
        font-size: 7px;
        padding: 1px 3px;
    }
}


/* ============================================================
   21. WAITING ROOM — MOBILE
   ============================================================ */
@media (max-width: 768px) {
    #waitingRoomOverlay {
        padding: 10px !important;
        align-items: flex-start !important;
    }

    #waitingRoomOverlay > div {
        padding: 15px !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    #waitingRoomOverlay > div > div:nth-child(3) {
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important;
    }

    #waitingRoomOverlay > div > div:nth-child(3) > div {
        width: 100% !important;
        min-width: 0 !important;
    }

    #waitingPlayersList {
        grid-template-columns: 1fr !important;
        gap: 6px !important;
    }

    #waitingGameCode {
        font-size: 22px !important;
        letter-spacing: 4px !important;
    }

    #readyBtn,
    #addBotBtn,
    #startGameBtn {
        width: 100% !important;
        padding: 12px !important;
        font-size: 14px !important;
    }

    #waitingRoomOverlay h2 { font-size: 1.5em !important; }
    #waitingChatMessages { height: 80px !important; }

    #waitingRoomOverlay > div > div:last-child {
        flex-direction: column !important;
    }
}


/* ============================================================
   22. FEEDBACK
   ============================================================ */
#feedbackBtn {
    padding: 4px 10px;
    border: 2px solid var(--gold);
    border-radius: 6px;
    background: var(--green-deep);
    color: var(--gold);
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s;
    box-shadow:
        0 2px 6px rgba(0,0,0,0.35),
        inset 0 1px 0 rgba(255,255,255,0.10);
}

#feedbackBtn:hover {
    background: var(--gold);
    color: var(--green-deep);
    transform: translateY(-1px) scale(1.03);
    box-shadow:
        0 4px 12px rgba(255,215,0,0.4),
        inset 0 1px 0 rgba(255,255,255,0.4);
}

@media (max-width: 768px) {
    #feedbackBtn .btn-text { display: none; }
    #feedbackBtn { padding: 4px 8px; font-size: 14px; }
}

#feedbackModal {
    animation: choiceFadeIn 0.25s ease;
}

@media (max-width: 768px) {
    #feedbackModal > div { padding: 20px 15px !important; }
    #feedbackModal h2 { font-size: 1.2em !important; }
    #feedbackMessage { height: 100px !important; }
}

/* ===== LOGO SU PERBRAUKTA RAIDĖ ===== */
.bankrot-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    font-family: 'Arial Black', 'Impact', sans-serif;
    position: relative;
    line-height: 1;
}

.bank-icon {
    font-size: clamp(28px, 5vw, 48px);
    line-height: 1;
    margin-top: -4px;
    margin-bottom: 10px;
    z-index: 2;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
    display: block;
}

.bankrot-text {
    display: inline-block;
    position: relative;
    font-size: clamp(20px, 4.5vw, 42px);
    font-weight: 900;
    letter-spacing: 1px;
    color: #FFD700;
    text-shadow:
        2px 2px 0 #B8860B,
        3px 3px 0 #8B6914,
        4px 4px 6px rgba(0, 0, 0, 0.5);
    white-space: nowrap;
    margin-top: 0;
}

.crossed-u {
    display: inline-block;
    position: relative;
    color: #FFD700;
    font-size: 1.15em;
    line-height: 1;
    transform: translateY(-0.15em);
    text-shadow:
        0 0 8px rgba(255, 215, 0, 0.9),
        0 0 16px rgba(255, 215, 0, 0.5),
        2px 2px 0 #B8860B;
    z-index: 3;
}

.crossed-u::before,
.crossed-u::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 1.1em;
    height: 4px;
    background: #E30613;
    border-radius: 2px;
    box-shadow: 0 0 4px rgba(227, 6, 19, 0.6);
    z-index: 4;
}

.crossed-u::before { transform: translate(-50%, -50%) rotate(45deg); }
.crossed-u::after  { transform: translate(-50%, -50%) rotate(-45deg); }

.o-house {
    display: inline-block;
    position: relative;
    color: #FFD700;
    text-shadow:
        2px 2px 0 #B8860B,
        3px 3px 0 #8B6914;
    z-index: 1;
}

@media (max-width: 600px) {
    .bankrot-text {
        font-size: clamp(16px, 5vw, 24px);
        letter-spacing: 0.5px;
    }
    .bank-icon {
        font-size: clamp(22px, 6vw, 32px);
        margin-top: -2px;
        margin-bottom: 6px;
    }
    .crossed-u {
        font-size: 1.1em;
        transform: translateY(-0.12em);
    }
    .crossed-u::before,
    .crossed-u::after {
        height: 3px;
        width: 1em;
    }
    .o-house { font-size: 1em; }
}

/* PAŽYMĖTOS KORTELĖS PREKYBOJE */
.mini-card {
    position: relative;
}

.mini-card.selected {
    border: 3px solid #ffd700 !important;
    box-shadow:
        0 0 12px rgba(255, 215, 0, 0.9),
        0 4px 12px rgba(0,0,0,0.3) !important;
    transform: translateY(-2px) scale(1.05);
    background: linear-gradient(145deg, #fff8dc, #f5f0e8) !important;
    z-index: 5;
}

.mini-card.selected::after {
    content: '✓';
    position: absolute;
    top: -8px;
    right: -8px;
    background: #28a745;
    color: white;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    box-shadow: 0 2px 6px rgba(0,0,0,0.4);
    z-index: 10;
    border: 2px solid white;
}

/* SPALVOS JUOSTOS ŠVYTĖJIMAS */
.cell.property.has-owner::before {
    filter:
        drop-shadow(0 0 6px var(--owner-color, var(--gold)))
        drop-shadow(0 0 12px var(--owner-color, var(--gold)));
    z-index: 2;
}

/* AUKCIONO MODALAS */
#auctionModal > div:not([class]) { color: #3d2b1f; }
#auctionModal > div > h2 { color: #ffc107; }

#auctionModal #auctionContent,
#auctionModal #auctionContent p,
#auctionModal #auctionContent strong,
#auctionModal #auctionContent span { color: #3d2b1f; }

#auctionModal #auctionCurrentBid { color: #28a745 !important; }
#auctionModal #auctionTimer { color: #dc3545 !important; }


/* ============================================================
   ============================================================
   🌌 NEON / KOSMINĖ TEMA  — MEGA 3D EDITION
   ============================================================
   ============================================================ */

body.theme-neon {
    background:
        radial-gradient(circle at 20% 10%, rgba(255,0,255,0.10), transparent 55%),
        radial-gradient(circle at 80% 90%, rgba(0,255,255,0.10), transparent 55%),
        radial-gradient(circle at center, #1a0b2e 0%, #000000 100%) !important;
    color: #00ffff !important;
    font-family: 'Courier New', Courier, monospace;
}

/* LENTA — neoninis stiklas, auksinė juosta per visą perimetrą */
body.theme-neon #board {
    background:
        radial-gradient(ellipse at 30% 20%, rgba(0,255,255,0.08), transparent 55%),
        radial-gradient(ellipse at 70% 80%, rgba(255,0,255,0.10), transparent 60%),
        rgba(0, 0, 0, 0.55) !important;
    box-shadow:
        0 0 30px rgba(0, 255, 255, 0.25),
        0 0 80px rgba(255, 0, 255, 0.15),
        0 30px 70px rgba(0, 0, 0, 0.8),
        inset 0 0 60px rgba(0, 255, 255, 0.08) !important;
    border: 1.5px solid #ff00ff !important;
    border-radius: 18px !important;
}

/* BALTI PAVADINIMAI IR KAINOS */
body.theme-neon .cell .cell-name,
body.theme-neon .cell .cell-cost,
body.theme-neon .cell .cell-number,
body.theme-neon .cell.corner .cell-name,
body.theme-neon .cell.corner .cell-cost,
body.theme-neon .cell.start .cell-name,
body.theme-neon .cell.start .cell-cost,
body.theme-neon .cell.jail .cell-name,
body.theme-neon .cell.jail .cell-cost,
body.theme-neon .cell.parking .cell-name,
body.theme-neon .cell.parking .cell-cost,
body.theme-neon .cell.taxi .cell-name,
body.theme-neon .cell.taxi .cell-cost,
body.theme-neon .cell.go-to-jail .cell-name,
body.theme-neon .cell.go-to-jail .cell-cost {
    color: #ffffff !important;
    text-shadow:
        0 0 5px rgba(255, 255, 255, 0.6),
        0 0 10px rgba(0, 255, 255, 0.3) !important;
}

body.theme-neon .cell:hover {
    box-shadow:
        inset 0 0 25px rgba(0, 255, 255, 0.6),
        0 0 20px #00ffff,
        0 0 40px rgba(0, 255, 255, 0.5) !important;
    border-color: #00ffff !important;
    transform: translateY(-3px) scale(1.025) translateZ(6px);
}

body.theme-neon .cell {
    background: #0d0d1a !important;
    border-color: rgba(0, 255, 255, 0.35) !important;
    box-shadow:
        0 0 8px rgba(0, 255, 255, 0.20),
        0 4px 12px rgba(0, 0, 0, 0.7),
        inset 0 1px 0 rgba(0, 255, 255, 0.20),
        inset 0 -2px 6px rgba(0, 0, 0, 0.6) !important;
}

body.theme-neon .cell.property::before {
    background: var(--group-color) !important;
    box-shadow:
        0 0 15px var(--group-color),
        0 0 30px var(--group-color),
        inset 0 1px 2px rgba(255,255,255,0.4) !important;
}

body.theme-neon .row-top .cell.property::before {
    top: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
    height: 15px !important;
}

body.theme-neon .row-bottom .cell.property::before {
    top: 0 !important;
    bottom: auto !important;
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
    height: 15px !important;
}

body.theme-neon .row-middle-left .cell.property::before {
    top: 0 !important;
    bottom: 0 !important;
    right: 0 !important;
    left: auto !important;
    width: 15px !important;
    height: auto !important;
}

body.theme-neon .row-middle-right .cell.property::before {
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    right: auto !important;
    width: 15px !important;
    height: auto !important;
}

body.theme-neon .center-cell,
body.theme-neon #leftPanel,
body.theme-neon #playersList,
body.theme-neon #journal,
body.theme-neon #chatMessages {
    background:
        linear-gradient(145deg,
            rgba(0,255,255,0.04),
            rgba(255,0,255,0.04)),
        rgba(10, 10, 20, 0.85) !important;
    border: 1px solid #ff00ff !important;
    box-shadow:
        0 0 15px rgba(255, 0, 255, 0.30),
        0 0 30px rgba(0, 255, 255, 0.10),
        inset 0 1px 0 rgba(0, 255, 255, 0.10) !important;
    color: #00ffff !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

body.theme-neon h4,
body.theme-neon h3,
body.theme-neon h2 {
    color: #ff00ff !important;
    text-shadow:
        0 0 10px #ff00ff,
        0 0 20px rgba(255, 0, 255, 0.5) !important;
}

body.theme-neon button {
    background: transparent !important;
    border: 1px solid #00ffff !important;
    color: #00ffff !important;
    box-shadow:
        0 0 10px rgba(0, 255, 255, 0.35),
        inset 0 0 5px rgba(0, 255, 255, 0.10) !important;
    text-shadow: 0 0 5px #00ffff;
    border-radius: 4px !important;
}

body.theme-neon button:hover {
    background: rgba(0, 255, 255, 0.20) !important;
    box-shadow:
        0 0 20px #00ffff,
        0 0 40px rgba(0, 255, 255, 0.5),
        inset 0 0 10px rgba(0, 255, 255, 0.2) !important;
}

body.theme-neon .btn-dice,
body.theme-neon .btn-trade,
body.theme-neon #rollBtn,
body.theme-neon #tradeBtn {
    border-color: #ff00ff !important;
    color: #ff00ff !important;
    box-shadow:
        0 0 15px rgba(255, 0, 255, 0.55),
        0 0 30px rgba(255, 0, 255, 0.25),
        inset 0 0 5px rgba(255, 0, 255, 0.15) !important;
    text-shadow: 0 0 5px #ff00ff;
}

body.theme-neon .dice {
    background:
        radial-gradient(circle at 30% 25%, #1a1a2e 0%, #0a0a14 100%) !important;
    border: 2px solid #00ffff !important;
    box-shadow:
        0 0 20px #00ffff,
        0 0 40px rgba(0, 255, 255, 0.4),
        inset 0 1px 0 rgba(0, 255, 255, 0.3) !important;
}

body.theme-neon .dice-dot {
    background:
        radial-gradient(circle at 30% 30%, #aaf 0%, #00ffff 80%) !important;
    box-shadow:
        0 0 10px #00ffff,
        0 0 20px rgba(0, 255, 255, 0.6) !important;
}

body.theme-neon .modal-content,
body.theme-neon .buy-choice-box,
body.theme-neon #feedbackModal > div {
    background: linear-gradient(145deg, #0a0a14, #0d0d1a) !important;
    border: 2px solid #ff00ff !important;
    box-shadow:
        0 0 40px rgba(255, 0, 255, 0.5),
        0 0 80px rgba(0, 255, 255, 0.15),
        inset 0 1px 0 rgba(0, 255, 255, 0.15) !important;
    color: #00ffff !important;
}

body.theme-neon .left-btn {
    background: rgba(0, 255, 255, 0.05) !important;
    border: 1px solid #00ffff !important;
    color: #00ffff !important;
}

body.theme-neon .cell.service1,
body.theme-neon .cell.service2,
body.theme-neon .cell.service3 {
    background: #0d0d1a !important;
    border: 1px solid #00ffff !important;
    box-shadow:
        inset 0 0 15px rgba(0, 255, 255, 0.25),
        0 0 15px rgba(0, 255, 255, 0.20),
        0 0 30px rgba(0, 255, 255, 0.10) !important;
}

body.theme-neon .cell.service1 .cell-bg-icon,
body.theme-neon .cell.service2 .cell-bg-icon,
body.theme-neon .cell.service3 .cell-bg-icon {
    opacity: 0.35 !important;
    filter:
        drop-shadow(0 0 10px #00ffff)
        drop-shadow(0 0 20px rgba(0, 255, 255, 0.5)) !important;
}

body.theme-neon .cell.service1 .cell-name,
body.theme-neon .cell.service2 .cell-name,
body.theme-neon .cell.service3 .cell-name,
body.theme-neon .cell.service1 .cell-cost,
body.theme-neon .cell.service2 .cell-cost,
body.theme-neon .cell.service3 .cell-cost {
    color: #ffffff !important;
    text-shadow:
        0 0 5px rgba(0, 255, 255, 0.9),
        0 0 10px rgba(0, 255, 255, 0.5) !important;
}

body.theme-neon .cell.special,
body.theme-neon .cell.tax {
    background: #0d0d1a !important;
    border: 1px solid #ff00ff !important;
    box-shadow:
        inset 0 0 15px rgba(255, 0, 255, 0.25),
        0 0 15px rgba(255, 0, 255, 0.20),
        0 0 30px rgba(255, 0, 255, 0.10) !important;
}

body.theme-neon .cell.special .cell-bg-icon,
body.theme-neon .cell.tax .cell-bg-icon {
    opacity: 0.35 !important;
    filter:
        drop-shadow(0 0 10px #ff00ff)
        drop-shadow(0 0 20px rgba(255, 0, 255, 0.5)) !important;
}

body.theme-neon .cell.special .cell-name,
body.theme-neon .cell.special .cell-cost,
body.theme-neon .cell.tax .cell-name,
body.theme-neon .cell.tax .cell-cost {
    color: #ffffff !important;
    text-shadow:
        0 0 5px rgba(255, 0, 255, 0.9),
        0 0 10px rgba(255, 0, 255, 0.5) !important;
}

body.theme-neon #cell-4,
body.theme-neon #cell-5,
body.theme-neon #cell-13,
body.theme-neon #cell-21,
body.theme-neon #cell-50 {
    background: #0d0d1a !important;
    border: 1px solid #ff00ff !important;
    box-shadow:
        inset 0 0 15px rgba(255, 0, 255, 0.25),
        0 0 15px rgba(255, 0, 255, 0.20),
        0 0 30px rgba(255, 0, 255, 0.10) !important;
}

body.theme-neon #cell-4 .cell-bg-icon,
body.theme-neon #cell-5 .cell-bg-icon,
body.theme-neon #cell-13 .cell-bg-icon,
body.theme-neon #cell-21 .cell-bg-icon,
body.theme-neon #cell-50 .cell-bg-icon {
    opacity: 0.35 !important;
    filter:
        drop-shadow(0 0 10px #ff00ff)
        drop-shadow(0 0 20px rgba(255, 0, 255, 0.5)) !important;
}

body.theme-neon #cell-4 .cell-name,
body.theme-neon #cell-4 .cell-cost,
body.theme-neon #cell-5 .cell-name,
body.theme-neon #cell-5 .cell-cost,
body.theme-neon #cell-13 .cell-name,
body.theme-neon #cell-13 .cell-cost,
body.theme-neon #cell-21 .cell-name,
body.theme-neon #cell-21 .cell-cost,
body.theme-neon #cell-50 .cell-name,
body.theme-neon #cell-50 .cell-cost {
    color: #ffffff !important;
    text-shadow:
        0 0 5px rgba(255, 0, 255, 0.9),
        0 0 10px rgba(255, 0, 255, 0.5) !important;
}

body.theme-neon #chatMessages {
    color: #ffffff !important;
    background: rgba(0, 0, 0, 0.65) !important;
    text-shadow:
        0 0 3px #ffffff,
        0 0 8px #00ffff !important;
    font-weight: 700;
    box-shadow:
        inset 0 0 15px rgba(0, 255, 255, 0.15),
        0 0 10px rgba(0, 255, 255, 0.10) !important;
}

body.theme-neon #chatMessages span { color: #ffffff !important; }

body.theme-neon #chatMessages b {
    color: #00ffff !important;
    text-shadow:
        0 0 10px #00ffff,
        0 0 20px rgba(0, 255, 255, 0.6) !important;
    font-weight: 800;
}

body.theme-neon #journal {
    color: #ffffff !important;
    text-shadow:
        0 0 2px #ffffff,
        0 0 5px rgba(255, 255, 255, 0.5) !important;
    font-weight: 600;
}

body.theme-neon .journal-item .jnum {
    color: #ff00ff !important;
    text-shadow:
        0 0 10px #ff00ff,
        0 0 20px rgba(255, 0, 255, 0.6) !important;
    font-weight: 800;
}

body.theme-neon .journal-item .jtime {
    color: rgba(0, 255, 255, 0.85) !important;
    text-shadow: 0 0 5px #00ffff !important;
}

body.theme-neon .journal-item {
    border-bottom: 1px solid rgba(255, 0, 255, 0.30) !important;
    background: rgba(0, 0, 0, 0.45) !important;
}

body.theme-neon .journal-item .jtext {
    color: #ffffff !important;
    text-shadow: 0 0 2px #ffffff !important;
}

body.theme-neon #myInfo {
    color: #ffffff !important;
    text-shadow: 0 0 5px rgba(0, 255, 255, 0.5) !important;
}

body.theme-neon #myInfo .player-name {
    color: #ffffff !important;
    text-shadow: 0 0 8px #ff00ff !important;
}

body.theme-neon #myInfo .player-money {
    color: #00ffff !important;
    text-shadow:
        0 0 10px #00ffff,
        0 0 20px rgba(0, 255, 255, 0.5) !important;
}

body.theme-neon #myInfo .player-money.negative {
    color: #ff00ff !important;
    text-shadow: 0 0 10px #ff00ff !important;
}

body.theme-neon #playersList .player-item .pname {
    color: #ffffff !important;
}

body.theme-neon #playersList .player-item .pmoney {
    color: #00ffff !important;
    text-shadow: 0 0 5px #00ffff !important;
}

body.theme-neon #myInfo > div {
    color: #ffffff !important;
    text-shadow: 0 0 5px rgba(0, 255, 255, 0.5) !important;
}

body.theme-neon #myInfo > div[style*="color"] {
    color: #ffffff !important;
}

body.theme-neon .cell .players-on-cell .player-dot {
    border-color: rgba(0, 255, 255, 0.9) !important;
    box-shadow:
        0 0 12px rgba(0, 255, 255, 0.55),
        0 0 25px rgba(255, 0, 255, 0.25),
        0 4px 10px rgba(0, 0, 0, 0.6),
        inset -3px -4px 8px rgba(0,0,0,0.5),
        inset 2px 3px 6px rgba(255,255,255,0.4) !important;
}

body.theme-neon .cell .players-on-cell .player-dot:hover {
    box-shadow:
        0 0 20px #00ffff,
        0 0 40px rgba(0, 255, 255, 0.6),
        0 8px 20px rgba(0, 0, 0, 0.7),
        inset -3px -4px 8px rgba(0,0,0,0.5),
        inset 2px 3px 6px rgba(255,255,255,0.4) !important;
}

body.theme-neon .cell-houses span {
    background: rgba(0, 255, 255, 0.15) !important;
    box-shadow:
        0 0 8px rgba(0, 255, 255, 0.6),
        inset 0 1px 0 rgba(255,255,255,0.3) !important;
    color: #ffffff !important;
    text-shadow: 0 0 5px #00ffff !important;
}

body.theme-neon .mini-card {
    background: linear-gradient(145deg, #1a1a2e, #0a0a14) !important;
    border-color: rgba(0, 255, 255, 0.5) !important;
    box-shadow:
        0 0 10px rgba(0, 255, 255, 0.35),
        0 4px 12px rgba(0, 0, 0, 0.6),
        inset 0 1px 0 rgba(0, 255, 255, 0.2) !important;
}

body.theme-neon .mini-card:hover {
    box-shadow:
        0 0 20px rgba(0, 255, 255, 0.65),
        0 0 40px rgba(255, 0, 255, 0.25),
        0 8px 20px rgba(0, 0, 0, 0.7) !important;
    border-color: #00ffff !important;
}

body.theme-neon .mini-card-name,
body.theme-neon .mini-card-info {
    color: #ffffff !important;
    text-shadow: 0 0 4px rgba(0, 255, 255, 0.5) !important;
}

body.theme-neon .mini-card-body {
    background: rgba(10, 10, 20, 0.9) !important;
}

body.theme-neon ::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #00ffff, #ff00ff) !important;
    box-shadow: 0 0 8px rgba(0, 255, 255, 0.6);
}

body.theme-neon ::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.4) !important;
}



/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    #board { transform: none !important; }
}


/* ============================================================
   HIGH CONTRAST
   ============================================================ */
@media (prefers-contrast: more) {
    .cell { border-width: 3px !important; }
    .cell .cell-name,
    .cell .cell-cost {
        text-shadow: 0 1px 2px rgba(0,0,0,0.8) !important;
    }
}


/* ============================================
   📢 5 LANGELIO IŠŠOKANTYS PRANEŠIMAI
   ============================================ */
.cell-action-body p {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
}

/* 🎯 Kito žaidėjo eilė */
#cellActionInfo.cell5-turn .cell-action-box {
    width: 92%;
    max-width: 320px;
    padding: 16px 12px;
    text-align: center;
}
.cell5-turn-label {
    font-size: 18px;
    font-weight: 700;
    color: #3d2b1f;
    margin-bottom: 6px;
}
.cell5-turn-name {
    font-size: 30px;
    font-weight: 900;
    line-height: 1.1;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
    word-break: break-word;
}

/* 🎲 Mano eilė */
#cellActionInfo.cell5-turn-mine .cell-action-box {
    width: 92%;
    max-width: 320px;
    padding: 18px 12px;
    text-align: center;
    background: linear-gradient(145deg, #2ecc71, #1e7e34);
    border-color: #ffd700;
    box-shadow: 0 0 30px rgba(46, 204, 113, 0.7), 0 15px 40px rgba(0, 0, 0, 0.5);
    animation: cell5Pulse 1s ease-in-out infinite;
}
.cell5-turn-title {
    font-size: 30px;
    font-weight: 900;
    color: #ffd700;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
    margin-bottom: 6px;
}
.cell5-turn-sub {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
}
@keyframes cell5Pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.04); }
}

/* 💰 Nuoma */
#cellActionInfo.cell5-rent .cell-action-box {
    width: 92%;
    max-width: 300px;
    text-align: center;
}
.cell5-rent-field {
    font-size: 12px;
    font-weight: 700;
    color: #6c757d;
    margin-bottom: 6px;
}
.cell5-rent-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
}
.cell5-chip {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 12px;
    color: #fff;
    font-weight: 800;
    font-size: 14px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
    border: 2px solid rgba(255, 255, 255, 0.7);
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cell5-arrow {
    font-size: 20px;
    font-weight: 900;
    color: #28a745;
}
.cell5-rent-amount {
    font-size: 30px;
    font-weight: 900;
    color: #1e7e34;
    margin-top: 6px;
}

/* Mažas pranešimas */
#cellActionInfo.cell5-small {
    background: rgba(0, 0, 0, 0.25);
}
#cellActionInfo.cell5-small .cell-action-box {
    padding: 8px 10px;
}

/* ⏳ Pirkimo kortelės laiko juosta */
#buyCardTimer {
    height: 6px;
    background: rgba(0, 0, 0, 0.15);
    border-radius: 3px;
    overflow: hidden;
    margin-top: 6px;
}
#buyCardTimerFill {
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg, #dc3545, #ffc107, #28a745);
    border-radius: 3px;
}

@media (max-width: 768px) {
    .cell5-turn-name, .cell5-turn-title, .cell5-rent-amount { font-size: 20px; }
    .cell5-turn-label, .cell5-turn-sub { font-size: 13px; }
    .cell5-chip { font-size: 11px; padding: 2px 6px; }
}
.cell5-turn-name.cell5-light {
    -webkit-text-stroke: 1px #3d2b1f;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}
#turnIndicatorName.cell5-light,
#turnIndicatorNext.cell5-light {
    -webkit-text-stroke: 1px #3d2b1f;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

/* 🎯 „Dabar eina / Kitas“ – per visą 5 langelį */
#center-5 #turnIndicator {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    margin-bottom: 0 !important;
    min-height: 0;
    padding: 10px !important;
    box-sizing: border-box;
}
#center-5 #turnIndicator > div {
    width: 100%;
    margin-bottom: 0 !important;
}
#center-5 #turnIndicatorName {
    font-size: clamp(22px, 2.6vw, 40px) !important;
    font-weight: 900;
}
#center-5 #turnIndicatorNext {
    font-size: clamp(18px, 2vw, 30px) !important;
    font-weight: 800;
}

/* ⏸️ AFK juosta */
#afkBanner {
    position: fixed;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9990;
    display: none;
    align-items: center;
    gap: 12px;
    max-width: calc(100% - 32px);
    padding: 10px 14px;
    background: linear-gradient(145deg, #ffc107, #e0a800);
    color: #3d2b1f;
    font-weight: 700;
    font-size: 14px;
    border: 2px solid #3d2b1f;
    border-radius: 12px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.45);
    animation: cell5Pulse 1.2s ease-in-out infinite;
}
#afkBanner button {
    flex-shrink: 0;
    padding: 8px 14px;
    border: none;
    border-radius: 8px;
    background: linear-gradient(145deg, #28a745, #1e7e34);
    color: #fff;
    font-weight: 800;
    font-size: 14px;
    cursor: pointer;
}

/* ============================================
   🎲 3D KAULIUKAI (metami į 2 langelį)
   ============================================ */
#center-2 .dice-container {
    position: relative;
    overflow: visible;
    min-height: calc(var(--dice-size, clamp(38px, 3.8vw, 60px)) + 16px);
}
.dice.d3,
body.theme-neon .dice.d3 {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0;
    perspective: 800px;
    transform-style: preserve-3d;
    filter: drop-shadow(0 9px 8px rgba(0, 0, 0, 0.35));
    overflow: visible;
}
.dice.d3:not(.rolling):hover {
    transform: none;
    box-shadow: none !important;
}
.d3-cube {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    will-change: transform;
}
.d3-face {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16%;
    background: radial-gradient(circle at 32% 28%, #ffffff 0%, #f7f5f0 45%, #e4ddd0 100%);
    border: 1px solid rgba(150, 128, 95, 0.45);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.7),
        inset -3px -4px 8px rgba(120, 100, 70, 0.22),
        inset 3px 3px 6px rgba(255, 255, 255, 0.9);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
/* Vidinės „užpildo“ sienelės – kubas atrodo pilnas, su apvaliais kraštais */
.d3-in {
    position: absolute;
    inset: 0;
    background: #ddd4c4;
    border-radius: 4%;
}
.d3-in.d3-f1 { transform: rotateY(0deg)    translateZ(calc(var(--d3-half, 30px) - 1.5px)); }
.d3-in.d3-f6 { transform: rotateY(180deg)  translateZ(calc(var(--d3-half, 30px) - 1.5px)); }
.d3-in.d3-f2 { transform: rotateY(90deg)   translateZ(calc(var(--d3-half, 30px) - 1.5px)); }
.d3-in.d3-f5 { transform: rotateY(-90deg)  translateZ(calc(var(--d3-half, 30px) - 1.5px)); }
.d3-in.d3-f3 { transform: rotateX(90deg)   translateZ(calc(var(--d3-half, 30px) - 1.5px)); }
.d3-in.d3-f4 { transform: rotateX(-90deg)  translateZ(calc(var(--d3-half, 30px) - 1.5px)); }
body.theme-neon .d3-in { background: #07070f; }
.d3-face .dice-dots-container { transform: none; }
.d3-f1 { transform: rotateY(0deg)    translateZ(var(--d3-half, 30px)); }
.d3-f6 { transform: rotateY(180deg)  translateZ(var(--d3-half, 30px)); }
.d3-f2 { transform: rotateY(90deg)   translateZ(var(--d3-half, 30px)); }
.d3-f5 { transform: rotateY(-90deg)  translateZ(var(--d3-half, 30px)); }
.d3-f3 { transform: rotateX(90deg)   translateZ(var(--d3-half, 30px)); }
.d3-f4 { transform: rotateX(-90deg)  translateZ(var(--d3-half, 30px)); }

/* Neoninė tema */
body.theme-neon .d3-face {
    background: radial-gradient(circle at 30% 25%, #1a1a2e 0%, #0a0a14 100%);
    border-color: #00ffff;
    box-shadow: inset 0 0 10px rgba(0, 255, 255, 0.35), 0 0 12px rgba(0, 255, 255, 0.35);
}

/* ✕ informacijos lange – tik telefonuose ir planšetėse (kompiuteryje langas užsidaro patraukus pelę) */
@media (hover: hover) and (pointer: fine) {
    .cell-info-close { display: none !important; }
}

/* ============================================================
   🌙 TAMSI TEMA – PILNAS PADENGIMAS
   (visi langai, lentelės, įvesties laukai, iššokantys pranešimai)
   ============================================================ */
body.dark-mode {
    --dm-bg:        #121212;
    --dm-panel:     linear-gradient(145deg, #262626, #1b1b1b);
    --dm-panel-flat:#202020;
    --dm-card:      #2a2a2a;
    --dm-border:    #4a4a4a;
    --dm-text:      #e6e6e6;
    --dm-muted:     #a8a8a8;
    --dm-accent:    #6fdc9a;

    /* Vidurio langeliai ir „AŠ“ (anksčiau likdavo šviesūs) */
    --center-bg:          var(--dm-panel);
    --center-border:      var(--dm-border);
    --center-font-color:  var(--dm-text);
    --center-title-color: var(--dm-text);
    --myinfo-text-color:  var(--dm-text);
    --myinfo-name-color:  var(--dm-text);
    --myinfo-money-color: #ffffff;
    --brown:              #cfcfcf;
    color: var(--dm-text);
}

/* Puslapių fonai (pradžia, meniu, registracija…) */
body.dark-mode .page,
body.dark-mode #page-landing,
body.dark-mode #page-menu {
    background: linear-gradient(145deg, #161616, #0b0b0b) !important;
}
body.dark-mode .landing-container,
body.dark-mode .menu-container,
body.dark-mode .lobby-container {
    background: rgba(255, 255, 255, 0.04);
    border-color: #555;
}

/* Lenta, antraštė, kairė panelė */
body.dark-mode #board {
    background: radial-gradient(ellipse at center, #1f1f1f, #0e0e0e) !important;
    border-color: #555 !important;
}
body.dark-mode #gameHeader,
body.dark-mode #leftPanel {
    background: linear-gradient(145deg, #1e1e1e, #141414) !important;
    border-color: #555 !important;
}
body.dark-mode .center-cell { background: var(--dm-panel) !important; }

/* Visi langai, kurių fonas užrašytas tiesiai HTML'e (šviesus „pergamentas“) */
body.dark-mode [style*="#f5f0e8"],
body.dark-mode [style*="#e8d5b5"],
body.dark-mode [style*="#f0e8d8"],
body.dark-mode .rules-content,
body.dark-mode .cell-action-box,
body.dark-mode .buy-choice-box,
body.dark-mode #buyCardBox,
body.dark-mode #cellInfoTooltip {
    background: var(--dm-panel) !important;
    color: var(--dm-text) !important;
    border-color: #6a6a6a;
}
body.dark-mode #cellActionInfo.cell5-turn-mine .cell-action-box {
    background: linear-gradient(145deg, #2ecc71, #1e7e34) !important;
}

/* Tamsus tekstas, užrašytas tiesiai HTML'e → šviesus */
body.dark-mode [style*="color:#3d2b1f"], body.dark-mode [style*="color: #3d2b1f"],
body.dark-mode [style*="color:#000000"], body.dark-mode [style*="color: #000000"],
body.dark-mode [style*="color:#000;"],   body.dark-mode [style*="color: #000;"],
body.dark-mode [style*="color:#333"],    body.dark-mode [style*="color: #333"],
body.dark-mode [style*="color:#1a1a2e"], body.dark-mode [style*="color: #1a1a2e"] {
    color: var(--dm-text) !important;
}
body.dark-mode [style*="color:#6c757d"], body.dark-mode [style*="color: #6c757d"],
body.dark-mode [style*="color:#495057"], body.dark-mode [style*="color: #495057"] {
    color: var(--dm-muted) !important;
}
body.dark-mode [style*="color:#1a6b3c"], body.dark-mode [style*="color: #1a6b3c"] {
    color: var(--dm-accent) !important;
}
/* Išimtys: šviesūs mygtukai su tamsiu tekstu lieka kaip yra */
body.dark-mode button[style*="#ffc107"], body.dark-mode button[style*="#ffd700"],
body.dark-mode .btn-primary, body.dark-mode .landing-btn-primary, body.dark-mode .btn-trade {
    color: #1a1a1a !important;
}

/* Taisyklės */
body.dark-mode .rules-content h2,
body.dark-mode .rules-content h3 { color: var(--dm-accent); }
body.dark-mode .rules-content p,
body.dark-mode .rules-content li { color: var(--dm-text); }

/* Įvesties laukai, pasirinkimai */
body.dark-mode input[type="text"],
body.dark-mode input[type="number"],
body.dark-mode input[type="email"],
body.dark-mode input[type="password"],
body.dark-mode input:not([type]),
body.dark-mode select,
body.dark-mode textarea {
    background: #1c1c1c !important;
    color: var(--dm-text) !important;
    border-color: #555 !important;
}
body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder { color: #888 !important; }

/* Mažos kortelės (AŠ langelyje, prekyboje, aukcione) */
body.dark-mode .mini-card,
body.dark-mode .mini-card-body {
    background: var(--dm-card) !important;
    border-color: #666;
}
body.dark-mode .mini-card-color.mini-card-icon { background: #333 !important; }
body.dark-mode .mini-card-name,
body.dark-mode .mini-card-cost,
body.dark-mode .mini-card-houses { color: var(--dm-text) !important; }

/* Griovimo / balsavimo kortelės */
body.dark-mode .demolish-card {
    background: rgba(255, 255, 255, 0.06);
    border-color: #555;
    color: var(--dm-text);
}

/* Žurnalas, chat, žaidėjai, info lentelės */
body.dark-mode .journal-item .jnum,
body.dark-mode .journal-item .jtime,
body.dark-mode .notification-item .ntime { color: var(--dm-muted) !important; }
body.dark-mode .player-item .pmoney { color: #ffffff !important; }
body.dark-mode #chatMessages b,
body.dark-mode #chatMessages span { color: var(--dm-text); }
body.dark-mode .info-row .label,
body.dark-mode #cellInfoTooltip .info-row .label { color: var(--dm-muted) !important; }
body.dark-mode .info-row .value,
body.dark-mode #cellInfoTooltip .info-row .value { color: var(--dm-text) !important; }
body.dark-mode .info-row .value.green { color: #5dd879 !important; }
body.dark-mode .info-row .value.red { color: #ff6b6b !important; }
body.dark-mode #cellInfoTooltip .info-header { color: var(--dm-accent) !important; }

/* 5 langelis: „Dabar eina / Kitas“ ir iššokantys pranešimai */
body.dark-mode #turnIndicator span[data-i18n] { color: var(--dm-text) !important; }
body.dark-mode .cell5-turn-label { color: var(--dm-text); }
body.dark-mode .cell5-rent-field { color: var(--dm-muted); }
body.dark-mode .cell5-rent-amount { color: #5dd879; }
body.dark-mode .cell-action-body p,
body.dark-mode .buy-choice-body p { color: var(--dm-text) !important; }
body.dark-mode #buyCardInfo { color: var(--dm-text) !important; }

/* Tamsių spalvų žaidėjų vardai – šviesus kontūras, kad matytųsi ant tamsaus fono */
body.dark-mode .cell5-dark,
body.dark-mode #turnIndicatorName.cell5-dark,
body.dark-mode #turnIndicatorNext.cell5-dark {
    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.85);
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.45);
}

/* Garso panelė, statistika, lyderiai */
body.dark-mode #soundPanel { background: rgba(255, 255, 255, 0.06) !important; }
body.dark-mode #statsModal > div,
body.dark-mode #gameStatsModal > div,
body.dark-mode #leadersModal > div,
body.dark-mode #publicGamesModal > div,
body.dark-mode #feedbackModal > div {
    background: var(--dm-panel) !important;
    color: var(--dm-text);
}

/* Lentelės (statistika) */
body.dark-mode table { color: var(--dm-text); }
body.dark-mode th { background: #2c2c2c !important; color: var(--dm-text) !important; }
body.dark-mode td { border-color: #444 !important; }
body.dark-mode tr:nth-child(even) td { background: rgba(255, 255, 255, 0.03); }
body.dark-mode .chat-input button { background: #3a3a3a; color: #fff; }

body.dark-mode #auctionModal > div:not([class]),
body.dark-mode #auctionModal #auctionContent,
body.dark-mode #auctionModal #auctionContent p,
body.dark-mode #auctionModal #auctionContent strong,
body.dark-mode #auctionModal #auctionContent span { color: var(--dm-text); }
body.dark-mode #auctionModal #auctionContent { background: rgba(255, 255, 255, 0.05) !important; }
body.dark-mode #infoBtn { color: #fff !important; }
body.dark-mode [style*="rgba(61,43,31"], body.dark-mode [style*="rgba(61, 43, 31"] { color: var(--dm-muted) !important; }
body.dark-mode .dlg-shim-box { background: var(--dm-panel) !important; color: var(--dm-text) !important; border-color: #6a6a6a !important; }
body.dark-mode #waitingRoomOverlay {
    background: linear-gradient(145deg, rgba(22, 22, 22, 0.98), rgba(10, 10, 10, 0.98)) !important;
}
body.dark-mode [style*="background:rgba(255,255,255,0.3)"], body.dark-mode [style*="background: rgba(255,255,255,0.3)"],
body.dark-mode [style*="background:rgba(255,255,255,0.5)"], body.dark-mode [style*="background: rgba(255,255,255,0.5)"],
body.dark-mode [style*="background:rgba(255,255,255,0.4)"], body.dark-mode [style*="background: rgba(255,255,255,0.4)"] {
    background-color: rgba(255, 255, 255, 0.06) !important;
}

/* ============================================
   👥 4 LANGELIS – visi žaidėjai telpa be slinkimo
   (dydis skaičiuojamas pagal žaidėjų skaičių ir langelio aukštį)
   ============================================ */
#center-4 { display: flex; flex-direction: column; min-height: 0; }
#center-4 #playersList {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--pl-gap, 3px);
    padding: 2px 4px !important;
}
#center-4 .player-item {
    flex: 0 1 var(--pl-row, 28px);
    min-height: 0;
    margin: 0 !important;
    padding: 0 6px !important;
    gap: 5px !important;
    font-size: var(--pl-font, 13px) !important;
    overflow: hidden;
}
#center-4 .player-item .dot {
    width: var(--pl-dot, 14px) !important;
    height: var(--pl-dot, 14px) !important;
}
#center-4 .player-item .pname {
    font-size: var(--pl-font, 13px) !important;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#center-4 .player-item .pmoney {
    font-size: var(--pl-font, 13px) !important;
    flex-shrink: 0;
    white-space: nowrap;
}
#center-4 .player-item .picons {
    flex-shrink: 0;
    white-space: nowrap;
    font-size: calc(var(--pl-font, 13px) * 0.9);
}
#center-4 .player-item .dot .player-emoji-list { font-size: calc(var(--pl-dot, 14px) * 0.7); }
#center-4 .player-item { line-height: 1.15; }
/* Daug žaidėjų žemame langelyje – 2 stulpeliai */
#center-4 #playersList.pl-2col {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: var(--pl-row, 20px);
    align-content: center;
    column-gap: var(--pl-gap, 3px);
    row-gap: var(--pl-gap, 3px);
}
#center-4 #playersList.pl-2col .pbot { display: none; }
#center-4 #playersList.pl-2col .pmoney { font-size: calc(var(--pl-font, 13px) * 0.9) !important; }
#center-4 #playersList.pl-2col .player-item {
    flex: none;
    height: var(--pl-row, 20px);
    padding: 0 3px !important;
    gap: 3px !important;
    border-left-width: 2px !important;
}


/* ============================================================
   📱 KOMPAKTIŠKAS REŽIMAS (telefonas / planšetė)
   body.cmp nustato script.js → applyCompactLayout().
   Lenta užpildo ekraną be slinkimo, dydžiai skaičiuojami JS.
   ============================================================ */
body.cmp { overflow: hidden; }
body.cmp #game { height: 100vh; height: 100dvh; overflow: hidden; perspective: none; }

body.cmp #gameHeader {
    padding: 4px 8px !important;
    gap: 4px 10px !important;
    font-size: 11px !important;
    border-radius: 0 !important;
    flex-wrap: nowrap !important;
    white-space: nowrap;
}
body.cmp #gameHeader > span { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
body.cmp #turnDisplay { flex: 1 1 auto; text-align: center; }
body.cmp #headerTurnTimer { margin-left: 6px !important; }
body.cmp #feedbackBtn { padding: 3px 8px !important; font-size: 12px !important; flex-shrink: 0; }
body.cmp.cmp-portrait #feedbackBtn .btn-text { display: none; }

body.cmp #gameBody {
    gap: 0 !important;
    padding: 2px !important;
    overflow: hidden !important;
}

/* Kairė panelė – iššokanti virš lentos */
body.cmp #leftPanel {
    display: none !important;
    position: fixed !important;
    left: 0; top: 0; bottom: 0;
    width: 150px !important;
    flex: none !important;
    height: auto !important;
    z-index: 9998;
    padding: 10px 8px !important;
    font-size: 11px !important;
    gap: 6px !important;
    border-radius: 0 12px 12px 0 !important;
    box-shadow: 6px 0 30px rgba(0,0,0,0.6) !important;
}
body.cmp.lp-open #leftPanel { display: flex !important; }
body.cmp #leftPanel .left-btn { font-size: 11px !important; padding: 7px 4px !important; }
body.cmp #leftPanelToggle {
    display: flex !important;
    width: 22px; height: 48px;
    font-size: 13px;
    opacity: 0.85;
    transition: left 0.2s ease;
}
body.cmp.lp-open #leftPanelToggle { left: 150px; opacity: 1; }

/* Lenta */
body.cmp #board,
body.cmp #board.adaptive,
body.cmp #board.fixed {
    flex: 1 1 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 3px !important;
    overflow: hidden !important;
    transform: none !important;
    border-width: 2px !important;
    border-radius: 10px !important;
    gap: var(--board-gap, 1px) !important;
}
body.cmp .board-row,
body.cmp .row-middle,
body.cmp .row-middle-left,
body.cmp .row-middle-right,
body.cmp .row-middle-center,
body.cmp .center-row { gap: var(--board-gap, 1px) !important; }
body.cmp .row-middle-center { padding: 0 !important; }

/* Langeliai */
body.cmp .cell {
    padding: 0 !important;
    border-width: 1px !important;
    border-radius: 4px !important;
    font-size: var(--cell-font-size, 8px) !important;
}
body.cmp .cell:hover { transform: none; }
body.cmp .cell.corner { border-width: 1.5px !important; border-radius: 6px !important; }
body.cmp .cell .cell-name {
    font-size: var(--cell-font-size, 8px) !important;
    max-width: 96% !important;
    padding: 0 1px !important;
    line-height: 1.1 !important;
}
body.cmp .cell.corner .cell-name { font-size: var(--corner-font-size, 9px) !important; }
body.cmp .cell .cell-cost { font-size: var(--c-cost, 8px) !important; }
body.cmp .cell .cell-cost[style*="font-size:14px"] { font-size: calc(var(--c-cost, 8px) * 1.1) !important; }
body.cmp .cell .cell-number { font-size: var(--c-num, 7px) !important; }
body.cmp .cell.corner .cell-number { font-size: calc(var(--c-num, 7px) * 1.3) !important; }
body.cmp .cell-top-bar { gap: 2px !important; }
body.cmp .row-top .cell-top-bar { top: 1px !important; left: 1px !important; }
body.cmp .row-bottom .cell-top-bar { bottom: 1px !important; left: 2px !important; }
body.cmp .row-middle-left .cell-top-bar { top: 1px !important; left: 2px !important; }
body.cmp .row-middle-right .cell-top-bar { bottom: 1px !important; right: 2px !important; }
body.cmp .cell .cell-owner { width: 8px !important; height: 8px !important; border-width: 1px !important; }
body.cmp .row-top .cell-bg-icon,
body.cmp .row-bottom .cell-bg-icon { font-size: var(--c-ic-edge, 20px) !important; }
body.cmp .row-middle-left .cell-bg-icon,
body.cmp .row-middle-right .cell-bg-icon { font-size: var(--c-ic-side, 18px) !important; }
body.cmp .cell.corner .cell-bg-icon { font-size: var(--c-ic-corner, 26px) !important; }
body.cmp .cell-bg-icon { opacity: 0.55 !important; }

/* Siauri viršaus/apačios langeliai (telefonas stačiai) – pavadinimas vertikaliai */
body.cmp-narrow .row-top .cell:not(.corner) .cell-name,
body.cmp-narrow .row-bottom .cell:not(.corner) .cell-name {
    writing-mode: vertical-rl;
    transform: translate(-50%, -50%) rotate(180deg) !important;
    white-space: nowrap !important;
    max-width: none !important;
    max-height: 62% !important;
    overflow: hidden;
    text-overflow: ellipsis;
}
body.cmp-narrow .row-top .cell:not(.corner) .cell-name { top: 42% !important; max-height: 60% !important; }
body.cmp-narrow .row-bottom .cell:not(.corner) .cell-name { top: 58% !important; max-height: 60% !important; }
body.cmp-narrow .row-top .cell:not(.corner) .cell-cost { top: auto !important; bottom: 23% !important; transform: translateX(-50%) !important; }
body.cmp-narrow .row-bottom .cell:not(.corner) .cell-cost { top: 23% !important; transform: translateX(-50%) !important; }
body.cmp-tiny .row-top .cell:not(.corner) .cell-cost,
body.cmp-tiny .row-bottom .cell:not(.corner) .cell-cost { display: none !important; }
body.cmp-tiny .row-top .cell:not(.corner) .cell-name { top: 45% !important; max-height: 62% !important; }
body.cmp-tiny .row-bottom .cell:not(.corner) .cell-name { top: 55% !important; max-height: 62% !important; }
body.cmp-narrow .row-top .cell:not(.corner) .cell-number,
body.cmp-narrow .row-bottom .cell:not(.corner) .cell-number { display: none; }

/* Žetonai */
body.cmp .cell .players-on-cell { gap: 1px !important; padding: 1px !important; }
body.cmp .cell .players-on-cell .player-dot,
body.cmp .cell.corner .players-on-cell .player-dot,
body.cmp .row-middle-left .cell .players-on-cell .player-dot,
body.cmp .row-middle-right .cell .players-on-cell .player-dot {
    width: var(--c-dot, 12px) !important;
    height: var(--c-dot, 12px) !important;
    border-width: 1.5px !important;
}
body.cmp .cell .players-on-cell[data-count="3"] .player-dot,
body.cmp .cell .players-on-cell[data-count="4"] .player-dot {
    width: calc(var(--c-dot, 12px) * 0.8) !important;
    height: calc(var(--c-dot, 12px) * 0.8) !important;
}
body.cmp .cell .players-on-cell[data-count="5"] .player-dot,
body.cmp .cell .players-on-cell[data-count="6"] .player-dot,
body.cmp .cell .players-on-cell[data-count="7"] .player-dot,
body.cmp .cell .players-on-cell[data-count="8"] .player-dot {
    width: calc(var(--c-dot, 12px) * 0.62) !important;
    height: calc(var(--c-dot, 12px) * 0.62) !important;
    border-width: 1px !important;
}
body.cmp .player-emoji { font-size: 120% !important; }

/* Vidurio langeliai */
body.cmp .center-cell {
    padding: 3px 4px !important;
    min-height: 0 !important;
    border-width: 1px !important;
    border-radius: 6px !important;
    font-size: var(--c-cfont, 10px) !important;
}
body.cmp .center-cell:hover { transform: none; }
body.cmp .center-cell h4 {
    font-size: var(--c-title, 9px) !important;
    padding-bottom: 1px !important;
    margin-bottom: 2px !important;
    flex-shrink: 0;
}
body.cmp.cmp-portrait .row-middle-center {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(3, minmax(0, 1fr));
}
body.cmp.cmp-portrait .row-middle-center .center-row { display: contents !important; }
body.cmp.cmp-portrait #center-1 { order: 1; }
body.cmp.cmp-portrait #center-2 { order: 2; }
body.cmp.cmp-portrait #center-4 { order: 3; }
body.cmp.cmp-portrait #center-5 { order: 4; }
body.cmp.cmp-portrait #center-3 { order: 5; }
body.cmp.cmp-portrait #center-6 { order: 6; }

/* AŠ */
body.cmp #myInfo { font-size: var(--c-cfont, 10px) !important; gap: 1px !important; }
body.cmp #myInfo .player-money { font-size: var(--c-money, 18px) !important; }
body.cmp #myInfo .player-name { font-size: var(--c-cfont, 10px) !important; }
body.cmp #myInfo .player-color { width: calc(var(--c-cfont, 10px) * 1.3) !important; height: calc(var(--c-cfont, 10px) * 1.3) !important; }

/* VALDYMAS */
body.cmp .dice,
body.cmp .dice.d3 {
    width: var(--c-dice, 40px) !important;
    height: var(--c-dice, 40px) !important;
}
body.cmp .dice-container { gap: calc(var(--c-dice, 40px) * 0.5) !important; margin: 2px 0 !important; padding: 0 !important; }
body.cmp .control-buttons { gap: 3px !important; }
body.cmp .control-buttons button,
body.cmp .btn-half,
body.cmp .btn-jail,
body.cmp .btn-build {
    font-size: var(--c-btn, 10px) !important;
    padding: 3px 5px !important;
    border-radius: 5px !important;
}
body.cmp .action-row { gap: 3px !important; margin-bottom: 2px !important; }

/* CHAT / ŽURNALAS / PRANEŠIMAI */
body.cmp #chatMessages,
body.cmp #journal,
body.cmp #notifications { font-size: var(--c-cfont, 10px) !important; min-height: 0 !important; max-height: none !important; }
body.cmp .journal-item,
body.cmp .notification-item,
body.cmp .chat-message { font-size: var(--c-cfont, 10px) !important; padding: 1px 3px !important; }
body.cmp .chat-input input { font-size: 16px !important; padding: 2px 4px !important; min-width: 0; }
body.cmp .chat-input button { padding: 2px 6px !important; }
body.cmp #playersList { max-height: none !important; min-height: 0 !important; padding: 1px 2px !important; }
body.cmp #turnIndicator { padding: 4px !important; }
body.cmp .row-middle-left,
body.cmp .row-middle-right {
    flex: 0 0 var(--left-col-width, 60px) !important;
    width: var(--left-col-width, 60px) !important;
    min-width: 0 !important;
}
body.cmp #turnIndicator { font-size: calc(var(--c-cfont, 10px) * 1.3) !important; }
body.cmp #turnIndicator > div { font-size: calc(var(--c-cfont, 10px) * 1.1) !important; margin-bottom: 2px !important; padding-top: 2px !important; }
body.cmp #turnIndicatorName,
body.cmp #turnIndicatorNext { font-size: calc(var(--c-cfont, 10px) * 1.5) !important; overflow-wrap: anywhere; }

/* 5 langelio iššokantys langai – mažesni */
body.cmp .cell-action-box { padding: 6px 6px !important; }
body.cmp .cell-action-body p { font-size: var(--c-cfont, 10px) !important; line-height: 1.25 !important; }
body.cmp .cell5-turn-label,
body.cmp .cell5-turn-sub { font-size: calc(var(--c-cfont, 10px) * 1.2) !important; margin-bottom: 2px !important; }
body.cmp .cell5-turn-name,
body.cmp .cell5-turn-title,
body.cmp .cell5-rent-amount { font-size: calc(var(--c-cfont, 10px) * 1.9) !important; overflow-wrap: anywhere; word-break: normal !important; }
body.cmp .cell5-chip { font-size: var(--c-cfont, 10px) !important; padding: 2px 6px !important; max-width: 100% !important; }
body.cmp .cell5-arrow { font-size: calc(var(--c-cfont, 10px) * 1.3) !important; }
body.cmp .cell5-rent-field { font-size: calc(var(--c-cfont, 10px) * 0.9) !important; }
/* Telefonas stačiai: žurnale be laiko ir numerio – daugiau vietos tekstui */
body.cmp-narrow #journal .jtime,
body.cmp-narrow #journal .jnum { display: none !important; }
body.cmp-narrow #journal .journal-item { display: block !important; }
body.cmp .cell .cell-name { word-break: normal !important; overflow-wrap: anywhere; hyphens: manual; width: max-content; }
body.cmp .row-middle-left .cell .cell-name,
body.cmp .row-middle-right .cell .cell-name { font-size: var(--c-side-font, 8px) !important; max-width: 98% !important; }

/* ============================================================
   🔄 PRIVERSTINIS GULSČIAS VAIZDAS (telefonas)
   ============================================================ */
body.force-rot {
    position: fixed !important;
    top: 0; left: 0;
    margin: 0 !important;
    overflow: hidden !important;
    transform-origin: top left;
    transform: rotate(90deg) translateY(-100%);
}
body.force-rot #page-game.active { width: 100% !important; height: 100% !important; min-height: 0 !important; }
body.force-rot #game { width: 100% !important; max-width: none !important; height: 100% !important; }

#rotateBtn {
    flex-shrink: 0;
    padding: 3px 8px;
    font-size: 11px;
    font-weight: 800;
    border-radius: 8px;
    border: 2px solid var(--gold, #ffd700);
    background: rgba(0, 0, 0, 0.25);
    color: var(--gold, #ffd700);
    cursor: pointer;
    white-space: nowrap;
}
#rotateBtn.active { background: var(--gold, #ffd700); color: #0f4a2a; }
body:not(.cmp) #rotateBtn { display: none !important; }
body.cmp-portrait #rotateBtn .rb-txt { display: none; }

#rotateHint {
    position: fixed;
    left: 50%;
    top: 52px;
    transform: translateX(-50%);
    z-index: 99990;
    width: max-content;
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: calc(100% - 24px);
    padding: 10px 12px;
    border-radius: 14px;
    background: linear-gradient(145deg, #1a6b3c, #0f4a2a);
    border: 2px solid #ffd700;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55);
    animation: rotateHintIn 0.3s ease-out;
}
#rotateHint .rh-go {
    flex-shrink: 0;
    padding: 6px 10px;
    border-radius: 9px;
    border: none;
    background: #ffd700;
    color: #0f4a2a;
    font-weight: 900;
    font-size: 12px;
    cursor: pointer;
}
#rotateHint .rh-x {
    flex-shrink: 0;
    background: transparent;
    border: none;
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    padding: 2px 4px;
}
@keyframes rotateHintIn {
    from { opacity: 0; transform: translate(-50%, -20px); }
    to { opacity: 1; transform: translate(-50%, 0); }
}

/* Žemi vidurio langeliai (gulsčias telefonas) – paslepiam antraeilius dalykus */
body.cmp-short #center-2 h4 { display: none !important; }
body.cmp-short #turnIndicator > div:nth-child(2) { display: none !important; }
body.cmp-short .center-cell h4 { margin-bottom: 1px !important; }

/* 🔍 Vidurys proporcingai sumažinamas */
body.cmp .row-middle-center { zoom: var(--c-zoom, 1); }

/* ============================================================
   ⬛ KOMPIUTERIS: kampai kvadratiniai (75–200 px), mažėja tolygiai.
   Kampo kraštinė = viršaus/apačios eilės aukštis = šoninių kolonų plotis.
   Nustatoma ant #board, todėl perrašo ir admin pulto reikšmes.
   ============================================================ */
:root { --corner-size: clamp(75px, min(9.12vw, 16.3vh), 200px); }
body:not(.cmp) #board {
    --corner-width: var(--corner-size);
    --corner-height: var(--corner-size);
    --left-col-width: var(--corner-size);
    --right-col-width: var(--corner-size);
    --top-row-height: var(--corner-size);
    --bottom-row-height: var(--corner-size);
}

/* 🎲 Pasukti 3D kauliukai užima daugiau vietos – didesnis tarpas, kad nesiliestų */
.dice-container:has(.d3) { gap: 30px; }

/* 🎲 Metimo metu kauliukai gali skristi už VALDYMO langelio ribų */
#center-2.dice-flying { overflow: visible !important; z-index: 50; }

/* ============================================================
   🧊 STALO VAIZDAS 2D / 3D
   ============================================================ */
#boardViewSwitch {
    display: inline-flex;
    flex-shrink: 0;
    border: 2px solid var(--gold, #ffd700);
    border-radius: 9px;
    overflow: hidden;
}
#boardViewSwitch button {
    border: none;
    background: rgba(0, 0, 0, 0.25);
    color: var(--gold, #ffd700);
    font-weight: 900;
    font-size: 12px;
    padding: 3px 9px;
    cursor: pointer;
    line-height: 1.2;
}
#boardViewSwitch button + button { border-left: 1px solid rgba(255, 215, 0, 0.5); }
#boardViewSwitch button.active { background: var(--gold, #ffd700); color: #0f4a2a; }
body.cmp #boardViewSwitch button { font-size: 10px; padding: 2px 6px; }

/* 3D: lenta pasvirusi kaip ant stalo, su storu kraštu ir šešėliu */
body.board-3d #board,
body.board-3d #board.adaptive,
body.board-3d #board.fixed {
    transform: perspective(1800px) rotateX(19deg) !important;
    transform-origin: 50% 100% !important;
    box-shadow:
        0 14px 0 #6b4a1a,
        0 16px 0 #4a3210,
        0 40px 60px rgba(0, 0, 0, 0.6),
        inset 0 0 80px rgba(0, 0, 0, 0.35) !important;
}
body.board-3d .cell {
    box-shadow:
        0 3px 0 rgba(90, 65, 30, 0.55),
        0 5px 8px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
body.board-3d .center-cell {
    box-shadow:
        0 3px 0 rgba(90, 65, 30, 0.45),
        0 6px 12px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
body.board-3d .cell .players-on-cell .player-dot {
    box-shadow: 0 4px 0 rgba(0, 0, 0, 0.35), 0 6px 8px rgba(0, 0, 0, 0.4), var(--dot-inner-shadow);
}
/* Telefone / planšetėje – švelnesnis pasvirimas, kad tilptų */
body.cmp.board-3d #board,
body.cmp.board-3d #board.adaptive,
body.cmp.board-3d #board.fixed {
    transform: perspective(1100px) rotateX(15deg) !important;
    transform-origin: 50% 100% !important;
    box-shadow: 0 7px 0 #6b4a1a, 0 9px 0 #4a3210, 0 18px 30px rgba(0, 0, 0, 0.55) !important;
}

/* ============================================================
   🌀 3D+ : laisvai sukiojama lenta
   ============================================================ */
body.board-3dp #gameBody { overflow: hidden !important; }
body.board-3dp #board,
body.board-3dp #board.adaptive,
body.board-3dp #board.fixed {
    transition: none !important;
    touch-action: none;
    box-shadow:
        0 14px 0 #6b4a1a,
        0 16px 0 #4a3210,
        0 40px 60px rgba(0, 0, 0, 0.6),
        inset 0 0 80px rgba(0, 0, 0, 0.35) !important;
    cursor: grab;
}
body.board-3dp #board:active { cursor: grabbing; }
body.board-3dp #board #journal,
body.board-3dp #board #chatMessages,
body.board-3dp #board .chat-input { touch-action: pan-y; cursor: auto; }
body.board-3dp .cell {
    box-shadow:
        0 3px 0 rgba(90, 65, 30, 0.55),
        0 5px 8px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
body.board-3dp .center-cell {
    box-shadow:
        0 3px 0 rgba(90, 65, 30, 0.45),
        0 6px 12px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
#boardViewSwitch .bv-reset { display: none; }
body.board-3dp #boardViewSwitch .bv-reset { display: inline-block; }
body.orbit-dragging #cellInfoTooltip { display: none !important; }
body.orbit-dragging, body.orbit-dragging * { user-select: none !important; }

/* ============================================================
   🏗️ STATYBŲ TAISYKLĖ – laukimo kambarys
   ============================================================ */
.build-rule-box {
    margin-top: 6px;
    padding: 12px 12px 10px;
    border: 2px solid #c9a84c;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.build-rule-title {
    font-weight: 900;
    font-size: 14px;
    letter-spacing: 0.4px;
    text-align: center;
    color: #ffd700;
    padding: 6px 8px;
    margin-bottom: 10px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.25);
}
.build-rule-box.blink .build-rule-title {
    animation: buildRuleBlink 1s steps(1, end) infinite;
}
@keyframes buildRuleBlink {
    0%   { background: #c0392b; color: #fff; box-shadow: 0 0 14px rgba(231, 76, 60, 0.7); }
    50%  { background: #111; color: #ff4d4d; box-shadow: 0 0 6px rgba(0, 0, 0, 0.6); }
}
.build-rule-box.changed { animation: buildRuleChanged 1.2s ease-out; }
@keyframes buildRuleChanged {
    0%, 40% { box-shadow: 0 0 0 3px #ffd700, 0 0 24px rgba(255, 215, 0, 0.7); }
    100% { box-shadow: none; }
}
.build-rule-options { display: flex; flex-direction: column; gap: 7px; }
.build-rule-opt {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    text-align: left;
    padding: 9px 12px;
    border-radius: 22px;
    border: 2px solid rgba(201, 168, 76, 0.55);
    background: rgba(255, 255, 255, 0.92);
    color: #3d2b1f;
    font-weight: 700;
    font-size: 13px;
    line-height: 1.25;
    cursor: pointer;
    transition: transform 0.12s ease, background 0.15s ease;
}
.build-rule-opt .br-num { font-weight: 900; flex-shrink: 0; }
.build-rule-box.is-host .build-rule-opt:not(.active):hover { transform: translateY(-1px); background: #fff; }
.build-rule-opt.active {
    background: linear-gradient(145deg, #2ecc71, #1e9e50);
    border-color: #4ade80;
    color: #fff;
    box-shadow: 0 0 14px rgba(46, 204, 113, 0.45);
}
.build-rule-opt.active::after { content: '✓'; margin-left: auto; font-weight: 900; }
.build-rule-opt:disabled { cursor: default; opacity: 1; }
.build-rule-box:not(.is-host) .build-rule-opt:not(.active) { opacity: 0.6; }
.build-rule-note {
    margin-top: 8px;
    text-align: center;
    font-size: 11px;
    color: #d4b896;
}
@media (max-width: 768px) {
    .build-rule-title { font-size: 12px; }
    .build-rule-opt { font-size: 12px; padding: 8px 10px; }
}

/* 🏗️ Sklypo pasirinkimas statybai */
#buildPicker {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 99980;
    background: rgba(0, 0, 0, 0.55);
    align-items: center;
    justify-content: center;
    padding: 16px;
}
#buildPicker .bp-box {
    width: 100%;
    max-width: 360px;
    max-height: 90%;
    overflow: auto;
    background: linear-gradient(145deg, #f5ead6, #e8d5b5);
    border: 3px solid #c9a84c;
    border-radius: 16px;
    padding: 14px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
    color: #3d2b1f;
}
#buildPicker .bp-title { font-size: 18px; font-weight: 900; text-align: center; }
#buildPicker .bp-rule { font-size: 11px; text-align: center; color: #6c5a44; margin: 4px 0 10px; }
#buildPicker .bp-list { display: flex; flex-direction: column; gap: 6px; }
#buildPicker .bp-item {
    display: flex; align-items: center; gap: 8px;
    padding: 9px 10px; border-radius: 10px;
    border: 2px solid rgba(201, 168, 76, 0.6);
    background: #fff; cursor: pointer; font-weight: 700; color: #3d2b1f; text-align: left;
}
#buildPicker .bp-item:hover { border-color: #28a745; background: #f0fff4; }
#buildPicker .bp-swatch { width: 14px; height: 30px; border-radius: 4px; flex-shrink: 0; }
#buildPicker .bp-name { flex: 1; }
#buildPicker .bp-info { font-size: 12px; white-space: nowrap; }
#buildPicker .bp-close {
    margin-top: 10px; width: 100%; padding: 8px; border: none; border-radius: 10px;
    background: #6c757d; color: #fff; font-weight: 800; cursor: pointer;
}
body.dark-mode #buildPicker .bp-box { background: linear-gradient(145deg, #262626, #1b1b1b); border-color: #555; color: #e6e6e6; }
body.dark-mode #buildPicker .bp-item { background: #2a2a2a; color: #e6e6e6; border-color: #4a4a4a; }
body.dark-mode #buildPicker .bp-rule { color: #a8a8a8; }

/* ============================================================
   🚶 Einanti figūrėlė (judėjimo metu visada matoma)
   ============================================================ */
.walker-holder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 40;
    pointer-events: none;
}
.walker-holder .player-dot {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.95);
    box-shadow:
        0 4px 10px rgba(0, 0, 0, 0.45),
        inset -2px -2px 4px rgba(0, 0, 0, 0.3),
        inset 2px 2px 4px rgba(255, 255, 255, 0.5);
    flex-shrink: 0;
}
.walker-holder .player-dot .player-emoji { font-size: 120%; line-height: 1; }
.walker-holder .player-dot.hop { animation: walkerHop 260ms ease-out; }
@keyframes walkerHop {
    0%   { transform: translateY(0) scale(1); }
    40%  { transform: translateY(-45%) scale(1.15); box-shadow: 0 12px 16px rgba(0, 0, 0, 0.35); }
    100% { transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    .walker-holder .player-dot.hop { animation: none; }
}

/* ============================================================
   🎥 KAMERA (priartinimas judant figūrėlei)
   ============================================================ */
#boardCamClip {
    flex: 1 1 0;
    min-width: 0;
    min-height: 0;
    height: 100%;
    display: flex;
    overflow: hidden;
    position: relative;
    border-radius: 18px;
}
#boardCam {
    flex: 1 1 0;
    min-width: 0;
    min-height: 0;
    display: flex;
    width: 100%;
    height: 100%;
    transform-origin: 0 0;
    will-change: transform;
}
#boardCam.cam-active { pointer-events: auto; }


/* ============================================================
   🚕 TAKSI
   ============================================================ */
body.taxi-pick #board .cell.taxi-target {
    cursor: pointer;
    animation: taxiTarget 1.1s ease-in-out infinite;
    outline: 2px solid rgba(255, 210, 63, 0.9);
    outline-offset: -2px;
}
/* Pasirinkimo metu langelių numeriai gerai matomi – kad būtų lengva įvesti numerį */
body.taxi-pick #board .cell .cell-number {
    color: #111 !important;
    background: #ffd23f;
    border-radius: 6px;
    padding: 0 4px;
    font-weight: 900;
    opacity: 1 !important;
    display: inline-block !important;
}
body.taxi-pick #board .cell.taxi-forbidden .cell-number { background: #777; color: #fff !important; }
body.taxi-pick #board .cell.taxi-target:hover { outline: 3px solid #ffd700; outline-offset: -2px; z-index: 6; }
body.taxi-pick #board .cell.taxi-forbidden { filter: grayscale(0.8) brightness(0.7); cursor: not-allowed; }
body.taxi-pick #board .cell.taxi-selected {
    animation: none;
    outline: 4px solid #f4b400;
    outline-offset: -3px;
    box-shadow: 0 0 22px rgba(244, 180, 0, 0.95), inset 0 0 18px rgba(244, 180, 0, 0.5) !important;
    z-index: 7;
}
@keyframes taxiTarget {
    0%, 100% { box-shadow: 0 0 2px rgba(255, 215, 0, 0.3), var(--cell-shadow-rest); filter: brightness(1); }
    50% { box-shadow: 0 0 18px rgba(255, 215, 0, 1), inset 0 0 14px rgba(255, 215, 0, 0.55); filter: brightness(1.12); }
}
#taxiPanel {
    display: none;
    position: fixed;
    left: 50%;
    top: 52%;
    transform: translate(-50%, -50%);
    z-index: 99970;
    align-items: center;
    gap: 12px;
    width: max-content;
    max-width: calc(100% - 24px);
    padding: 10px 14px;
    border-radius: 16px;
    background: linear-gradient(145deg, #2b2b2b, #111);
    border: 3px solid #f4b400;
    color: #fff;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.6), 0 0 24px rgba(244, 180, 0, 0.35);
    animation: taxiIn 0.45s cubic-bezier(0.2, 1.4, 0.4, 1);
}
@keyframes taxiIn {
    from { transform: translate(-150%, -50%); opacity: 0; }
    to { transform: translate(-50%, -50%); opacity: 1; }
}
#taxiPanel .tx-car { font-size: 40px; line-height: 1; filter: drop-shadow(0 3px 4px rgba(0,0,0,0.5)); }
#taxiPanel .tx-title { font-weight: 900; color: #ffd23f; font-size: 15px; }
#taxiPanel .tx-text { font-size: 13px; font-weight: 600; margin-top: 2px; }
#taxiPanel .tx-extra { font-size: 12px; color: #6fdc9a; font-weight: 700; min-height: 0; }
#taxiPanel .tx-btns { display: flex; align-items: center; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
#taxiPanel button {
    border: none; border-radius: 10px; padding: 7px 14px; font-weight: 900; font-size: 13px; cursor: pointer;
}
#taxiPanel .tx-go { background: #f4b400; color: #111; }
#taxiPanel .tx-go:disabled { opacity: 0.45; cursor: default; }
#taxiPanel .tx-stay { background: #555; color: #fff; }
#taxiPanel .tx-left { font-size: 12px; color: #ccc; }
body.cmp #taxiPanel { padding: 6px 10px; gap: 8px; max-width: min(78%, 520px); }
body.cmp #taxiPanel button { padding: 5px 10px; font-size: 12px; }
body.cmp #taxiPanel .tx-title { font-size: 13px; }
body.cmp #taxiPanel .tx-car { font-size: 28px; }
body.cmp #taxiPanel .tx-text { font-size: 12px; }
/* 🚕 Taksi automobilis */
.walker-holder.is-taxi { z-index: 45; will-change: transform; }
.taxi-car {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.5));
    transition: transform 0.15s ease;
}
.taxi-car-body { display: block; line-height: 1; }
.taxi-car-roof {
    position: absolute;
    top: -14%;
    left: 50%;
    width: 30%;
    height: 30%;
    transform: translateX(-50%);
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}
/* 🚕 emoji žiūri į kairę – pasukam pagal važiavimo kryptį */
.taxi-car[data-dir="right"] .taxi-car-body { transform: scaleX(-1); }
.taxi-car[data-dir="down"]  .taxi-car-body { transform: rotate(-90deg); }
.taxi-car[data-dir="up"]    .taxi-car-body { transform: rotate(90deg); }
.walker-holder.is-taxi.drive-off { transition: opacity 0.6s ease, transform 0.6s ease !important; opacity: 0; }
.walker-holder.is-taxi.drive-off .taxi-car[data-dir="right"] { transform: translateX(120%); }
.walker-holder.is-taxi.drive-off .taxi-car[data-dir="left"]  { transform: translateX(-120%); }
.walker-holder.is-taxi.drive-off .taxi-car[data-dir="down"]  { transform: translateY(120%); }
.walker-holder.is-taxi.drive-off .taxi-car[data-dir="up"]    { transform: translateY(-120%); }
.walker-holder.is-taxi.drive-off .taxi-car { transition: transform 0.6s ease-in; }

/* Numerio įvedimas taksi lange */
#taxiPanel .tx-num { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 12px; color: #ddd; }
#taxiPanel .tx-num-input {
    width: 64px; padding: 4px 6px; border-radius: 8px; border: 2px solid #f4b400;
    background: #fff; color: #111; font-weight: 900; font-size: 15px; text-align: center;
}
#taxiPanel .tx-num-input.bad { border-color: #e74c3c; background: #ffe5e5; }

/* 🧪 Laikinas testo mygtukas */
#taxiTestBtn {
    background: repeating-linear-gradient(45deg, #ffd23f 0 8px, #222 8px 16px) !important;
    color: #fff !important; text-shadow: 0 1px 2px #000; border: 2px solid #f4b400 !important;
    font-weight: 900;
}
#taxiTestBtn:disabled { opacity: 0.45; }
#airTestBtn {
    background: repeating-linear-gradient(45deg, #6ec6ff 0 8px, #222 8px 16px) !important;
    color: #fff !important; text-shadow: 0 1px 2px #000; border: 2px solid #2f9be0 !important;
    font-weight: 900;
}
#airTestBtn:disabled { opacity: 0.45; }
#gasTestBtn {
    background: repeating-linear-gradient(45deg, #9be15d 0 8px, #222 8px 16px) !important;
    color: #fff !important; text-shadow: 0 1px 2px #000; border: 2px solid #6abf2e !important;
    font-weight: 900;
}
#gasTestBtn:disabled { opacity: 0.45; }

/* ✈️ Oro uosto efektas */
.ap-fx { position: absolute; width: 0; height: 0; pointer-events: none; z-index: 950; transform: translateZ(34px); }
body.board-3d .ap-fx, body.board-3dp .ap-fx { transform-style: flat; }
.ap-plane, .ap-shadow { position: absolute; left: 0; top: 0; will-change: transform, opacity; }
.ap-plane { width: 0; height: 0; }
/* ✈️ emoji „žiūri“ į viršų dešinėn (-45°) – pasukam, kad nosis būtų +X kryptimi */
.ap-emoji { position: absolute; left: 0; top: 0; line-height: 1; transform: translate(-50%, -50%) rotate(45deg);
    filter: drop-shadow(0 3px 4px rgba(0,0,0,0.35)); }
.ap-trail { position: absolute; right: 0.35em; top: 0; transform: translateY(-50%); width: 0; border-radius: 4px;
    background: linear-gradient(to left, rgba(255,255,255,0.95), rgba(255,255,255,0)); }
.ap-shadow { margin: 0; border-radius: 50%; translate: -50% -50%;
    background: radial-gradient(ellipse at center, rgba(0,0,0,0.55), rgba(0,0,0,0) 70%); }
#board.ap-hide-8 #cell-8 .cell-bg-icon { opacity: 0 !important; animation: none !important; transition: none; }
.cell-bg-icon.ap-return { animation: apReturn 0.8s ease-out; }
@keyframes apReturn {
    0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.4); }
    70%  { opacity: 0.85; transform: translate(-50%, -50%) scale(1.08); }
    100% { opacity: 0.8; transform: translate(-50%, -50%) scale(1); }
}
.cell-bg-icon.ap-wiggle { animation: apWiggle 0.6s ease-in-out; }
@keyframes apWiggle {
    0%, 100% { transform: translate(-50%, -50%) rotate(0); }
    30% { transform: translate(-40%, -55%) rotate(-6deg); }
    60% { transform: translate(-58%, -48%) rotate(4deg); }
}
.ap-lights { position: absolute; height: 4px; pointer-events: none;
    transform: translate(-50%, -50%) rotate(var(--ar, 0deg)); border-radius: 2px;
    background: repeating-linear-gradient(90deg, #fff6a8 0 6px, transparent 6px 14px);
    box-shadow: 0 0 6px 1px rgba(255, 240, 140, 0.8);
    animation: apLights 0.35s steps(2) infinite; }
@keyframes apLights { 0% { opacity: 1; background-position: 0 0; } 100% { opacity: 0.35; background-position: 14px 0; } }

/* 🧪 Efektų testo mygtukai – maži, tik ženkliukas */
.fx-test-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 2px; width: 100%; margin-top: 4px; }
.fx-test-lbl { font-size: 12px; margin-right: 1px; }
.fx-test-row .fx-test-btn { width: 22px !important; height: 22px !important; min-width: 0 !important; padding: 0 !important; margin: 0 !important;
    font-size: 12px !important; line-height: 1 !important; border-radius: 5px !important; flex: 0 0 auto !important;
    background: repeating-linear-gradient(45deg, #ffe58a 0 5px, #fff6cf 5px 10px) !important; border: 1.5px solid #c9a13a !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.25) !important; color: #000 !important; text-shadow: none !important; }
.fx-test-row .fx-test-btn:disabled { opacity: 0.6; filter: grayscale(0.4); }
#jailTestBtn { background: repeating-linear-gradient(45deg, #2f6bff 0 8px, #222 8px 16px) !important;
    color: #fff !important; text-shadow: 0 1px 2px #000; border: 2px solid #ff2f3a !important; font-weight: 900; }
#jailTestBtn:disabled { opacity: 0.45; }
#spaTestBtn { background: repeating-linear-gradient(45deg, #7fd3e8 0 8px, #222 8px 16px) !important;
    color: #fff !important; text-shadow: 0 1px 2px #000; border: 2px solid #ff9ad5 !important; font-weight: 900; }
#spaTestBtn:disabled { opacity: 0.45; }
#trainTestBtn { background: repeating-linear-gradient(45deg, #e07b39 0 8px, #222 8px 16px) !important; color: #fff !important; text-shadow: 0 1px 2px #000; border: 2px solid #b85a1f !important; font-weight: 900; }
#shipTestBtn  { background: repeating-linear-gradient(45deg, #3c7fb8 0 8px, #222 8px 16px) !important; color: #fff !important; text-shadow: 0 1px 2px #000; border: 2px solid #1f5a8f !important; font-weight: 900; }
#busTestBtn   { background: repeating-linear-gradient(45deg, #f2b600 0 8px, #222 8px 16px) !important; color: #fff !important; text-shadow: 0 1px 2px #000; border: 2px solid #c98f00 !important; font-weight: 900; }
#trainTestBtn:disabled, #shipTestBtn:disabled, #busTestBtn:disabled { opacity: 0.45; }

/* 🚂 🚢 🚌 Stočių efektai */
#board.vx-hide-19 #cell-19 .cell-bg-icon,
#board.vx-hide-37 #cell-37 .cell-bg-icon,
#board.vx-hide-46 #cell-46 .cell-bg-icon { opacity: 0 !important; animation: none !important; }
.vx-fx { position: absolute; width: 0; height: 0; pointer-events: none; z-index: 940; transform: translateZ(30px); }
body.board-3d .vx-fx, body.board-3dp .vx-fx { transform-style: flat; }
.vx-veh { position: absolute; left: 0; top: 0; width: 0; height: 0; will-change: transform, opacity; }
.vx-bob { position: absolute; left: 0; top: 0; }
.vx-img { position: absolute; left: 0; top: 0; translate: -50% -60%; line-height: 0; filter: drop-shadow(0 4px 3px rgba(0,0,0,0.35)); }
.vx-img svg { width: 100%; height: auto; display: block; }
.vx-train .vx-bob { animation: vxRattle 0.16s linear infinite; }
.vx-bus .vx-bob   { animation: vxBounce 0.42s ease-in-out infinite; }
.vx-ship .vx-bob  { animation: vxRock 1.3s ease-in-out infinite; }
@keyframes vxRattle { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.2px); } }
@keyframes vxBounce { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-2.5px) rotate(-0.8deg); } }
@keyframes vxRock {
    0%, 100% { transform: translateY(0) rotate(-4deg); }
    50%      { transform: translateY(-5px) rotate(4deg); }
}
.vx-ground { position: absolute; left: 0; top: 0; transform-origin: 0 50%; opacity: 0; border-radius: 6px; }
.vx-rails { height: 12px; margin-top: -6px;
    background:
        linear-gradient(#6b6b6b, #6b6b6b) 0 1px / 100% 2px no-repeat,
        linear-gradient(#6b6b6b, #6b6b6b) 0 9px / 100% 2px no-repeat,
        repeating-linear-gradient(90deg, #7a5230 0 4px, transparent 4px 11px); }
.vx-road { height: 16px; margin-top: -8px; background:
        repeating-linear-gradient(90deg, #fff 0 10px, transparent 10px 22px) 0 7px / 100% 2px no-repeat,
        linear-gradient(rgba(60,60,60,0.75), rgba(60,60,60,0.75)); }
.vx-waves { height: 22px; margin-top: -10px; border-radius: 10px;
    background:
        radial-gradient(circle at 10px 0, transparent 9px, rgba(255,255,255,0.85) 10px, transparent 12px) 0 6px / 20px 12px repeat-x,
        linear-gradient(rgba(60,140,210,0.65), rgba(30,90,160,0.75));
    animation: vxWaves 0.8s linear infinite; }
@keyframes vxWaves { from { background-position: 0 6px, 0 0; } to { background-position: 20px 6px, 0 0; } }
.vx-wake { position: absolute; left: 0; top: 0; width: 70px; height: 10px; translate: 0 2px; border-radius: 50%;
    background: radial-gradient(ellipse at left, rgba(255,255,255,0.9), rgba(255,255,255,0) 70%); }
.vx-ship .vx-wake { transform-origin: 0 50%; }
.vx-puff { position: absolute; border-radius: 50%; translate: -50% -50%; pointer-events: none;
    animation: vxPuff 1.3s ease-out forwards; }
.vx-steam { background: radial-gradient(circle, rgba(255,255,255,0.95) 0%, rgba(235,235,235,0.7) 45%, rgba(220,220,220,0) 72%); }
.vx-exhaust { background: radial-gradient(circle, rgba(110,110,110,0.7) 0%, rgba(120,120,120,0.35) 50%, rgba(120,120,120,0) 72%); }
@keyframes vxPuff {
    0%   { opacity: 0.95; transform: translate(0, 0) scale(0.5); }
    100% { opacity: 0;    transform: translate(var(--px, -10px), var(--py, -20px)) scale(2.4); }
}

/* 🎬 Langelių efektai */
#board.fx-hide-11 #cell-11 .cell-bg-icon, #board.fx-hide-14 #cell-14 .cell-bg-icon, #board.fx-hide-32 #cell-32 .cell-bg-icon,
#board.fx-hide-44 #cell-44 .cell-bg-icon { opacity: 0 !important; animation: none !important; }
.fx-layer { position: absolute; width: 0; height: 0; pointer-events: none; z-index: 945; transform: translateZ(32px); }
body.board-3d .fx-layer, body.board-3dp .fx-layer { transform-style: flat; }
.fx-obj { position: absolute; left: 0; top: 0; width: 0; height: 0; will-change: transform, opacity; }
.fx-emoji span { position: absolute; left: 0; top: 0; translate: -50% -50%; line-height: 1; filter: drop-shadow(0 2px 3px rgba(0,0,0,0.3)); }
.fx-obj .vx-img { translate: -50% -50%; }
.fx-truck .vx-img { translate: -50% -55%; }
/* VMI */
.fx-money .vx-img { filter: drop-shadow(0 2px 2px rgba(0,0,0,0.3)); }
.fx-coin { position: absolute; left: 0; top: 0; translate: -50% -50%; line-height: 1; }
.fx-minus span { position: absolute; left: 0; top: 0; translate: -50% -50%; white-space: nowrap; font-weight: 900; font-size: var(--fs, 20px);
    color: #e53935; text-shadow: 0 0 3px #fff, 0 0 6px #fff, 0 2px 3px rgba(0,0,0,0.35); }
.fx-stamp span { position: absolute; left: 0; top: 0; translate: -50% -50%; white-space: nowrap; font-weight: 900; font-size: var(--fs, 13px);
    letter-spacing: 0.5px; color: #d32f2f; border: 3px double #d32f2f; border-radius: 6px; padding: 2px 6px; background: rgba(255,255,255,0.72);
    font-family: 'Courier New', monospace; box-shadow: 0 0 0 1px rgba(211,47,47,0.3); }

/* SPA */
.fx-tub .vx-img { translate: -50% -55%; filter: drop-shadow(0 4px 6px rgba(0,0,0,0.3)); }
.fx-bubble { position: absolute; left: 0; top: 0; border-radius: 50%; will-change: transform, opacity; translate: -50% -50%;
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.95) 0 12%, rgba(255,255,255,0.15) 30%, rgba(180,220,255,0.25) 60%, rgba(255,170,230,0.45) 100%);
    box-shadow: inset 0 0 3px rgba(255,255,255,0.9), 0 0 2px rgba(120,170,220,0.5); }

/* Baseinas */
.fx-pool { position: absolute; border-radius: 6px; overflow: hidden; transform-origin: 0 50%;
    background: linear-gradient(180deg, #5fc3f0, #2b8fd6); border: 3px solid #f4f7fa;
    box-shadow: inset 0 0 0 2px #9fd7f3, 0 3px 8px rgba(0,0,0,0.35); }
.fx-pool-lane { position: absolute; left: 0; right: 0; top: 50%; height: 3px; margin-top: -1.5px;
    background: repeating-linear-gradient(90deg, #e74c3c 0 6px, #fff 6px 12px); opacity: 0.85; }
.fx-pool-shine { position: absolute; inset: 0; opacity: 0.45;
    background: repeating-linear-gradient(115deg, rgba(255,255,255,0.0) 0 10px, rgba(255,255,255,0.55) 12px 14px, rgba(255,255,255,0) 16px 26px);
    animation: fxShine 1.6s linear infinite; }
@keyframes fxShine { from { background-position: 0 0; } to { background-position: 52px 0; } }
.fx-pool-block { position: absolute; width: 12px; height: 36%; background: #e8e8e8; border: 2px solid #9aa; border-radius: 3px; }
.fx-drop { position: absolute; left: 0; top: 0; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: #e6f7ff; box-shadow: 0 0 3px #7fd0ff; }
.fx-ring { position: absolute; top: 0; width: 34px; height: 34px; border-radius: 50%; border: 2.5px solid rgba(255,255,255,0.9); }
.fx-swim .fx-arm { transform-box: fill-box; transform-origin: 0% 50%; animation: fxStroke 0.5s ease-in-out infinite alternate; }
.fx-swim .fx-arm2 { animation-delay: -0.5s; }
@keyframes fxStroke { from { transform: rotate(-35deg); } to { transform: rotate(35deg); } }
/* Elektra */
.fx-dim { position: absolute; background: #0b1020; opacity: 0; }
.fx-bolt { position: absolute; filter: drop-shadow(0 0 6px #fff59d) drop-shadow(0 0 12px #ffd54f); }
.fx-glow { position: absolute; left: 0; top: 0; border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,220,0.95) 0%, rgba(255,230,90,0.7) 30%, rgba(255,200,0,0) 70%); }
.fx-spark { position: absolute; left: 0; top: 0; width: 12px; height: 2.5px; margin-top: -1px; border-radius: 2px; transform-origin: 0 50%;
    background: linear-gradient(90deg, #fffbe0, #ffd54f); box-shadow: 0 0 4px #ffd54f; }
/* Pirtis */
.fx-hut .vx-img { translate: -50% -60%; }
.fx-door { position: absolute; transform-origin: 0 50%; line-height: 0; }
.fx-door svg { width: 100%; height: 100%; display: block; }
/* Vanduo */
.fx-man .vx-img { translate: -50% -60%; }
.fx-man .fx-leg { transform-box: fill-box; transform-origin: 50% 0%; }
.fx-man.walking .fx-leg1 { animation: fxLeg 0.42s ease-in-out infinite alternate; }
.fx-man.walking .fx-leg2 { animation: fxLeg 0.42s ease-in-out infinite alternate-reverse; }
.fx-man.walking .vx-img svg { animation: fxStep 0.21s ease-in-out infinite alternate; }
@keyframes fxLeg { from { transform: rotate(-22deg); } to { transform: rotate(22deg); } }
@keyframes fxStep { from { transform: translateY(0); } to { transform: translateY(-2px); } }
.fx-bucket .vx-img { translate: -50% -10%; }
.fx-bucket-water { transform-box: fill-box; transform: translateY(100%); }
.fx-jet { position: absolute; width: 4px; transform-origin: 50% 0; border-radius: 2px;
    background: linear-gradient(180deg, #bfe6ff, #3d9be9); box-shadow: 0 0 3px rgba(61,155,233,0.7); }
/* Paplūdimys */
.fx-beach { position: absolute; border-radius: 12px; overflow: hidden; border: 3px solid #fff8e1;
    box-shadow: 0 6px 16px rgba(0,0,0,0.4); background: #ffe2a8; }
.fx-sky { position: absolute; left: 0; right: 0; top: 0; height: 42%; background: linear-gradient(180deg, #7ec8f5, #c6ebff); }
.fx-sun { position: absolute; right: 9%; top: 14%; width: calc(var(--bh) * 0.2); height: calc(var(--bh) * 0.2); border-radius: 50%;
    background: radial-gradient(circle, #fff7b0 0%, #ffd23f 60%, #ffb300 100%);
    box-shadow: 0 0 10px 4px rgba(255,210,63,0.75); animation: fxSun 2.4s ease-in-out infinite alternate; }
@keyframes fxSun { from { box-shadow: 0 0 8px 3px rgba(255,210,63,0.6); } to { box-shadow: 0 0 16px 7px rgba(255,210,63,0.9); } }
.fx-gull { position: absolute; left: -10%; top: 18%; font-size: calc(var(--bh) * 0.13); color: #3b3b3b; animation: fxGull 4.5s linear forwards; }
@keyframes fxGull { from { transform: translate(0, 0); } 50% { transform: translate(calc(var(--bw) * 0.55), -4px); } to { transform: translate(calc(var(--bw) * 1.1), 2px); } }
.fx-sea { position: absolute; left: 0; right: 0; top: 42%; height: 22%; overflow: hidden; background: linear-gradient(180deg, #1e88c8, #47b5e6); }
.fx-wave { position: absolute; left: -20%; width: 140%; height: 4px; border-radius: 3px; opacity: 0.85;
    background: repeating-linear-gradient(90deg, rgba(255,255,255,0.95) 0 14px, rgba(255,255,255,0) 14px 30px); }
.fx-wave.w1 { top: 30%; animation: fxWave 2.2s linear infinite; }
.fx-wave.w2 { top: 72%; opacity: 0.6; animation: fxWave 3s linear infinite reverse; }
@keyframes fxWave { from { transform: translateX(0); } to { transform: translateX(30px); } }
.fx-sand { position: absolute; left: 0; right: 0; bottom: 0; height: 38%;
    background: radial-gradient(circle at 20% 30%, rgba(180,140,80,0.35) 1px, transparent 2px) 0 0 / 9px 9px,
                linear-gradient(180deg, #f8e2a6, #eccb7c); }
.fx-sand::before { content: ''; position: absolute; left: 0; right: 0; top: -5px; height: 9px; border-radius: 50%;
    background: rgba(255,255,255,0.75); animation: fxFoam 2.2s ease-in-out infinite alternate; }
@keyframes fxFoam { from { transform: translateY(0) scaleX(1); opacity: 0.8; } to { transform: translateY(3px) scaleX(1.03); opacity: 0.5; } }
.fx-umb { position: absolute; left: 14%; bottom: 14%; width: calc(var(--bh) * 0.55); line-height: 0; transform-origin: 60% 100%; animation: fxUmb 1.8s ease-in-out infinite alternate; }
.fx-umb svg { width: 100%; height: auto; display: block; }
@keyframes fxUmb { from { transform: rotate(-3deg); } to { transform: rotate(3deg); } }
.fx-towel { position: absolute; left: 42%; bottom: 10%; width: 22%; height: 12%; border-radius: 3px;
    background: repeating-linear-gradient(90deg, #3498db 0 6px, #fff 6px 12px); transform: skewX(-20deg); }
.fx-ball { position: absolute; right: 16%; bottom: 12%; font-size: calc(var(--bh) * 0.16); animation: fxBall 0.9s ease-in-out infinite alternate; }
@keyframes fxBall { from { transform: translateY(0); } to { transform: translateY(-7px); } }
.fx-shell { position: absolute; left: 70%; bottom: 4%; font-size: calc(var(--bh) * 0.1); }
/* Gimtadienis */
.fx-confetti { position: absolute; left: 0; top: 0; border-radius: 1px; will-change: transform, opacity; }

/* 🚓 Policijos autobusiukas */
.pv-van .vx-img { translate: -50% -55%; }
.pv-bob { position: absolute; left: 0; top: 0; animation: vxBounce 0.42s ease-in-out infinite; }
.pv-van.siren .pv-l1 { animation: pvBlue 0.36s steps(1) infinite; }
.pv-van.siren .pv-l2 { animation: pvRed 0.36s steps(1) infinite; }
@keyframes pvBlue { 0% { fill: #2f6bff; } 50% { fill: #0b1f66; } }
@keyframes pvRed  { 0% { fill: #5a0b10; } 50% { fill: #ff2f3a; } }
.pv-van.siren .vx-img { filter: drop-shadow(0 4px 3px rgba(0,0,0,0.35)) drop-shadow(0 0 6px rgba(80,120,255,0.55)); }
.pv-piece-in { position: absolute; left: 0; top: 0; translate: -50% -70%; line-height: 0; }
.pv-piece-in > * { width: 100% !important; height: 100% !important; }

/* 💨 Dujų efektas */
.cell.gas-host { animation: gasGlow 1.8s ease-out; }
@keyframes gasGlow {
    0%   { box-shadow: inset 0 0 0 0 rgba(160, 230, 60, 0); }
    25%  { box-shadow: inset 0 0 22px 6px rgba(160, 230, 60, 0.75), 0 0 18px 4px rgba(160, 230, 60, 0.55); }
    100% { box-shadow: inset 0 0 0 0 rgba(160, 230, 60, 0); }
}
.gas-fx { position: absolute; width: 0; height: 0; pointer-events: none; z-index: 900; transform: translateZ(30px); }
body.board-3d .gas-fx, body.board-3dp .gas-fx { transform-style: flat; }
body.board-3d .gas-puff, body.board-3dp .gas-puff { filter: none; }
.gas-puff {
    position: absolute; left: 0; top: 0;
    width: var(--sz, 50px); height: var(--sz, 50px); margin: calc(var(--sz, 50px) / -2) 0 0 calc(var(--sz, 50px) / -2);
    border-radius: 50%;
    background: radial-gradient(circle at 40% 40%,
        hsla(var(--h, 80), 90%, 72%, 0.92) 0%,
        hsla(var(--h, 80), 75%, 55%, 0.65) 42%,
        hsla(var(--h, 80), 60%, 45%, 0) 72%);
    filter: blur(2px);
    opacity: 0;
    transform: translate(0, 0) scale(0.25) rotate(0deg);
    animation: gasPuff 3s ease-out var(--d, 0s) forwards;
    will-change: transform, opacity;
}
@keyframes gasPuff {
    0%   { opacity: 0;    transform: translate(0, 0) scale(0.25) rotate(0deg); }
    18%  { opacity: 0.95; transform: translate(calc(var(--tx) * 0.2), calc(var(--ty) * 0.2)) scale(calc(var(--s) * 0.9)) rotate(calc(var(--r) * 0.3)); }
    100% { opacity: 0;    transform: translate(var(--tx), var(--ty)) scale(calc(var(--s) * 2.3)) rotate(var(--r)); }
}

/* ============================================================
   🏗️ STATYBŲ LANGAS (15 s)
   ============================================================ */
#buildWindowPanel {
    display: none;
    position: fixed;
    left: 50%;
    top: 52%;
    transform: translate(-50%, -50%);
    z-index: 99960;
    align-items: center;
    gap: 12px;
    width: max-content;
    max-width: calc(100% - 24px);
    padding: 10px 14px;
    border-radius: 16px;
    background: linear-gradient(145deg, #1e7e34, #145a24);
    border: 3px solid #ffd700;
    color: #fff;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.55), 0 0 24px rgba(255, 215, 0, 0.35);
    animation: bwIn 0.35s cubic-bezier(0.2, 1.4, 0.4, 1);
}
@keyframes bwIn {
    from { transform: translate(-50%, -50%) scale(0.6); opacity: 0; }
    to { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}
#buildWindowPanel .bw-icon { font-size: 38px; line-height: 1; }
#buildWindowPanel .bw-title { font-weight: 900; font-size: 16px; color: #ffd700; }
#buildWindowPanel .bw-bar { height: 6px; border-radius: 4px; background: rgba(0, 0, 0, 0.3); margin: 6px 0; overflow: hidden; }
#buildWindowPanel .bw-bar span { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #ffd700, #ff9f1a); }
#buildWindowPanel .bw-btns { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#buildWindowPanel button { border: none; border-radius: 10px; padding: 7px 14px; font-weight: 900; font-size: 13px; cursor: pointer; }
#buildWindowPanel .bw-build { background: #ffd700; color: #14401f; }
#buildWindowPanel .bw-end { background: rgba(255, 255, 255, 0.92); color: #14401f; }
#buildWindowPanel button:disabled { opacity: 0.5; cursor: default; }
#buildWindowPanel .bw-left { font-size: 13px; font-weight: 800; color: #fff; }
body.cmp #buildWindowPanel { padding: 6px 10px; gap: 8px; }
body.cmp #buildWindowPanel .bw-icon { font-size: 26px; }
body.cmp #buildWindowPanel button { padding: 5px 10px; font-size: 12px; }
/* Sklypo pasirinkimas turi būti virš statybų lango */
#buildPicker { z-index: 99985; }

/* 🎥 Kameros režimų mygtukas */
#cameraSwitch { position: relative; display: inline-flex; flex-shrink: 0; }
#cameraSwitch .cam-btn {
    border: 2px solid var(--gold, #ffd700);
    border-radius: 9px;
    background: rgba(0, 0, 0, 0.25);
    color: var(--gold, #ffd700);
    font-weight: 800;
    font-size: 12px;
    padding: 3px 9px;
    cursor: pointer;
    white-space: nowrap;
}
#cameraSwitch.open .cam-btn { background: var(--gold, #ffd700); color: #0f4a2a; }
#cameraSwitch .cam-menu {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 100000;
    min-width: 210px;
    background: #1b1b1b;
    border: 2px solid var(--gold, #ffd700);
    border-radius: 10px;
    padding: 4px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
    flex-direction: column;
    gap: 2px;
}
#cameraSwitch.open .cam-menu { display: flex; }
#cameraSwitch .cam-item {
    text-align: left;
    border: none;
    background: transparent;
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    padding: 8px 10px;
    border-radius: 7px;
    cursor: pointer;
    white-space: nowrap;
}
#cameraSwitch .cam-item:hover { background: rgba(255, 215, 0, 0.15); }
#cameraSwitch .cam-item.active { background: var(--gold, #ffd700); color: #0f4a2a; }
body.cmp #cameraSwitch .cam-lbl { display: none; }
body.cmp #cameraSwitch .cam-btn { font-size: 11px; padding: 2px 7px; }
/* Antraštės meniu (kamera) turi būti virš lentos */
#gameHeader { position: relative; z-index: 60; }
/* Langelis, kuriame dabar yra einanti figūrėlė / taksi – virš kaimynų */
#board .cell.has-walker { z-index: 30 !important; overflow: visible !important; }

/* ============================================================
   🏚️ „Griauti“ – AŠ langelyje šalia vardo; 💀 „Bankrotuoju“ – kairės panelės apačioje
   ============================================================ */
#myInfo .myinfo-name-row { flex-wrap: nowrap; }
#myInfo .myinfo-demolish-slot { display: inline-flex; flex-shrink: 0; }
.myinfo-demolish {
    font-size: 11px !important;
    padding: 3px 8px !important;
    border-radius: 7px !important;
    line-height: 1.1;
    white-space: nowrap;
    width: auto !important;
}
.myinfo-demolish:disabled { opacity: 0.45; }
body.cmp .myinfo-demolish { font-size: 0 !important; padding: 2px 5px !important; }
body.cmp .myinfo-demolish::before { content: '🏚️'; font-size: 13px; }
.debtor-hint { font-size: 0.8em; color: #a12a2a; font-weight: 700; margin-top: 2px; line-height: 1.2; }
body.dark-mode .debtor-hint { color: #ff8a8a; }

.left-bankrupt-wrap {
    padding-bottom: 8px;
    border-bottom: 2px dashed rgba(255, 107, 107, 0.45);
    width: 100%;
}
#leftPanel .left-bankrupt {
    width: 100%;
    background: linear-gradient(145deg, #dc3545, #a71d2a) !important;
    color: #fff !important;
    border-color: #ff6b6b !important;
    font-weight: 900;
    font-size: 12px;
    padding: 8px 6px;
}
#leftPanel .left-bankrupt:disabled { opacity: 0.5; }

/* 📱 Telefonas stačiai: antraštė dviem eilutėmis – viršuje informacija, apačioje mygtukai */
body.cmp.cmp-portrait #gameHeader {
    flex-wrap: wrap !important;
    row-gap: 4px !important;
    justify-content: space-between;
}
body.cmp.cmp-portrait #gameHeader::before {
    content: '';
    order: 5;
    flex-basis: 100%;
    height: 0;
}
body.cmp.cmp-portrait #gameIdDisplay { order: 1; flex: 0 0 auto; }
body.cmp.cmp-portrait #playerCount { order: 2; flex: 0 0 auto; }
body.cmp.cmp-portrait #turnDisplay { order: 3; flex: 1 1 auto; text-align: right; }
body.cmp.cmp-portrait #boardViewSwitch { order: 6; }
body.cmp.cmp-portrait #cameraSwitch { order: 7; }
body.cmp.cmp-portrait #rotateBtn { order: 8; margin-left: auto; }
body.cmp.cmp-portrait #feedbackBtn { order: 9; }
body.cmp.cmp-portrait #gameHeader > span { overflow: visible; }
body.cmp.cmp-portrait #turnDisplay { overflow: hidden !important; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* ============================================================
   🎲 FIGŪRĖLĖS (SVG žaidėjo spalva)
   ============================================================ */
.player-dot.has-piece {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    overflow: visible !important;
}
.player-dot.has-piece .tok {
    width: 140%;
    height: 140%;
    margin: -25% -20% -15%;
    flex-shrink: 0;
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.35));
    transform: rotate(var(--piece-rz, 0deg));
    transform-origin: 50% 85%;
    pointer-events: none;
}
.player-dot.has-piece:hover { transform: translateY(-3px) scale(1.12) !important; }
.player-dot.has-piece .player-emoji {
    position: absolute; top: -40%; right: -40%; font-size: 70% !important; z-index: 2;
}
/* Einanti figūrėlė */
.walker-holder .player-dot.has-piece { width: auto; }
/* Žaidėjų sąraše (4 langelis) – maža figūrėlė vietoj taško */
#center-4 .player-item .dot.has-piece { background: none !important; border: none !important; box-shadow: none !important; overflow: visible; }
#center-4 .player-item .dot.has-piece .tok { width: 150%; height: 150%; margin: -25%; }
.player-item .dot.has-piece { background: none !important; border: none !important; box-shadow: none !important; }
.player-item .dot.has-piece .tok { width: 130%; height: 130%; margin: -15%; }

/* Katinas tai sėdi, tai stovi */
.tok-cat .tok-cat-stand { opacity: 0; animation: catStand 9s infinite; }
.tok-cat .tok-cat-sit { animation: catSit 9s infinite; }
@keyframes catSit   { 0%, 62% { opacity: 1; } 66%, 96% { opacity: 0; } 100% { opacity: 1; } }
@keyframes catStand { 0%, 62% { opacity: 0; } 66%, 96% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
    .tok-cat .tok-cat-stand { animation: none; opacity: 0; }
    .tok-cat .tok-cat-sit { animation: none; opacity: 1; }
}

/* Laukimo kambarys */
.wr-piece { width: 26px; height: 26px; flex-shrink: 0; display: inline-flex; }
.wr-piece .tok { width: 100%; height: 100%; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5)); }
.piece-box {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 20px;
}
.piece-title { color: #ffd700; font-weight: 700; font-size: 15px; margin-bottom: 8px; }
.piece-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.piece-opt {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: 6px 2px 4px; border-radius: 10px;
    border: 2px solid rgba(255, 255, 255, 0.12);
    background: rgba(0, 0, 0, 0.2); color: #d4b896; cursor: pointer;
    transition: transform 0.12s ease, border-color 0.15s ease;
}
.piece-opt .tok { width: 42px; height: 42px; filter: drop-shadow(0 2px 2px rgba(0,0,0,0.45)); }
.piece-opt .piece-name { font-size: 9.5px; font-weight: 700; line-height: 1.1; text-align: center; }
.piece-opt:hover { transform: translateY(-2px); border-color: rgba(255, 215, 0, 0.6); }
.piece-opt.active { border-color: #ffd700; background: rgba(255, 215, 0, 0.18); color: #fff; box-shadow: 0 0 12px rgba(255, 215, 0, 0.4); }
@media (max-width: 480px) { .piece-opt .tok { width: 34px; height: 34px; } .piece-opt .piece-name { font-size: 8.5px; } }

/* ============================================================
   🎲 FIGŪRĖLĖS STOVI ANT LANGELIO (išlenda virš jo)
   ============================================================ */
#board .cell.has-pieces { overflow: visible !important; z-index: 25; }
#board .cell.has-walker { z-index: 30 !important; }
#board .cell .players-on-cell {
    top: auto !important;
    bottom: 12% !important;
    left: 0 !important;
    right: 0 !important;
    max-width: none !important;
    max-height: none !important;
    width: auto !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: flex-end !important;
    gap: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    z-index: 40 !important;
}
/* Viršutinė eilė – spalvota juosta apačioje, todėl figūrėlė stovi virš jos */
#board .row-top .cell .players-on-cell { bottom: 26% !important; }
#board .cell.corner .players-on-cell { bottom: 14% !important; }
/* Kelios figūrėlės – šiek tiek persidengia, lyg stovėtų ant stalo */
#board .cell .players-on-cell .player-dot.has-piece {
    width: var(--ps, 30px) !important;
    height: var(--ps, 30px) !important;
    margin: 0 calc(var(--ps, 30px) * -0.18) !important;
    pointer-events: none !important;
    flex-shrink: 0 !important;
}
#board .cell .players-on-cell .player-dot.has-piece:nth-child(even) { transform: translateY(18%); }
#board .cell .players-on-cell .player-dot.has-piece .tok {
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    filter: drop-shadow(0 3px 2px rgba(0, 0, 0, 0.45)) drop-shadow(0 0 1px rgba(0, 0, 0, 0.35));
}
/* Telefone / planšetėje – tokios pat taisyklės (perrašom senas mažų taškų taisykles) */
body.cmp #board .cell .players-on-cell .player-dot.has-piece {
    width: var(--ps, 24px) !important;
    height: var(--ps, 24px) !important;
}
/* Einanti figūrėlė – tokio paties dydžio, stovi ant langelio */
.walker-holder:not(.is-taxi) { align-items: flex-end; padding-bottom: 12%; }
.row-top .walker-holder:not(.is-taxi) { padding-bottom: 26%; }
.walker-holder .player-dot.has-piece .tok { width: 100%; height: 100%; margin: 0; filter: drop-shadow(0 4px 3px rgba(0,0,0,0.45)); }

/* Kelios figūrėlės viename langelyje – visos telpa, šiek tiek persidengia, galinė eilė už priekinės */
#board .cell .players-on-cell.multi {
    left: 50% !important;
    right: auto !important;
    width: var(--pw, 60px) !important;
    transform: translateX(-50%);
    flex-wrap: wrap-reverse !important;
    justify-content: center !important;
    align-content: flex-start !important;
}
#board .cell .players-on-cell.multi .player-dot.has-piece {
    margin: calc(var(--ps, 30px) * -0.38) calc(var(--ps, 30px) * -0.18) 0 !important;
    transform: none !important;
}

/* ============================================================
   🎲 3D / 3D+: figūrėlės ATSISTOJA (neguli priplotos ant pasvirusios lentos)
   Lenta pasvirusi kampu X, figūrėlė pasukama atgal tuo pačiu kampu nuo savo pagrindo,
   todėl stovi stačiai prieš žiūrovą. Tam reikia tikro 3D (preserve-3d) per visą grandinę.
   ============================================================ */
body.board-3d { --piece-rx: 19deg; }
body.cmp.board-3d { --piece-rx: 15deg; }
body.board-3d #board, body.board-3d #board.adaptive, body.board-3d #board.fixed,
body.board-3dp #board, body.board-3dp #board.adaptive, body.board-3dp #board.fixed,
body.cmp.board-3d #board, body.cmp.board-3dp #board { overflow: visible !important; }
body.board-3d #board .board-row, body.board-3dp #board .board-row,
body.board-3d #board .row-middle-left, body.board-3dp #board .row-middle-left,
body.board-3d #board .row-middle-right, body.board-3dp #board .row-middle-right,
body.board-3d #board .cell, body.board-3dp #board .cell,
body.board-3d #board .players-on-cell, body.board-3dp #board .players-on-cell,
body.board-3d #board .player-dot.has-piece, body.board-3dp #board .player-dot.has-piece,
body.board-3d #board .walker-holder, body.board-3dp #board .walker-holder {
    transform-style: preserve-3d !important;
}
/* (figūrėlės pastatymas – žr. „TŪRINĖS FIGŪRĖLĖS“ žemiau) */
/* 3D: langeliai truputį virš lentos plokštumos – kad paspaudimai visada pataikytų į langelį */
body.board-3d #board .cell, body.board-3dp #board .cell { transform: translateZ(1px); }
body.board-3d #board .cell:hover, body.board-3dp #board .cell:hover { transform: translateZ(3px); }
body.board-3d #board .players-on-cell, body.board-3dp #board .players-on-cell { transform: translateZ(2px); }
body.board-3d #board .players-on-cell.multi, body.board-3dp #board .players-on-cell.multi { transform: translateX(-50%) translateZ(2px); }

/* 🛒 3D: centras (pirkimo langas, mygtukai) virš lentos plokštumos – kad paspaudimai nepakliūtų į lentą.
   Centras lieka plokščias (be bendro 3D) – kitaip naršyklė kartais paslepia centro langelius. */
body.board-3d #board .row-middle-center, body.board-3dp #board .row-middle-center { transform: translateZ(4px); }

/* 🎲 3D: kauliukai „atsistoja“ – centras pasviręs kartu su lenta, todėl kauliukas ištempiamas
   aukštyn tiek, kiek lenta jį suspaudžia, ir atsuktas į žiūrovą (3D+). Apačioje – šešėlis. */
body.board-3d #board #center-2, body.board-3dp #board #center-2 { overflow: visible !important; z-index: 5; }
body.board-3d #board #center-2 > .dice-container, body.board-3dp #board #center-2 > .dice-container {
    pointer-events: none;
    margin-top: 6px !important;
    margin-bottom: 6px !important;
}
body.board-3d #board .dice.d3, body.board-3dp #board .dice.d3 { filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.25)); }
.d3-stand { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; }
body.board-3d #board .d3-stand, body.board-3dp #board .d3-stand {
    transform-origin: 50% 100%;
    transform: rotate(var(--piece-rz, 0deg)) scaleY(calc(1 / cos(var(--piece-rx, 0deg))));
    transition: transform 0.25s ease;
}
/* Šešėlis ant stalo po kauliuku */
.dice-shadow { display: none; }
body.board-3d #board .dice-shadow, body.board-3dp #board .dice-shadow {
    display: block;
    position: absolute;
    pointer-events: none;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(30, 15, 0, 0.85) 0%, rgba(30, 15, 0, 0.5) 40%, rgba(30, 15, 0, 0) 70%);
    filter: blur(1.5px);
}

/* ============================================================
   🧱 TŪRINĖS FIGŪRĖLĖS: priekis + storio sluoksniai + nugarėlė
   2D – rodomas tik paveikslėlis (.tok-flat).
   3D / 3D+ – figūrėlė su storiu: už priekio sudėti tamsesni sluoksniai, pastumti į šoną.
   Figūrėlė lentoje stovi kaip vienas paviršius – sudėtingas 3D figūrėlės viduje
   (naršyklėse) kartais paslėpdavo kitus lentos elementus.
   ============================================================ */
.tok3d {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    flex-shrink: 0;
    pointer-events: none;
}
.tok3d > .tok3d-in, .player-dot > .tok-floor { display: none; }
.tok3d > .tok-flat { display: block; width: 100%; height: 100%; }
.tok3d > .tok-flat > .tok { width: 100% !important; height: 100% !important; margin: 0 !important; transform: none !important; }

body.board-3d #board .tok3d, body.board-3dp #board .tok3d {
    transform-style: flat !important;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.35));
    transform-origin: 50% 92%;
    transform: rotateZ(var(--piece-rz, 0deg)) rotateX(calc(-1 * var(--piece-rx, 0deg)));
    transition: transform 0.25s ease;
}
body.board-3d #board .tok3d > .tok-flat, body.board-3dp #board .tok3d > .tok-flat { display: none; }
body.board-3d #board .tok3d > .tok3d-in, body.board-3dp #board .tok3d > .tok3d-in {
    display: block;
    position: absolute;
    inset: 0;
}
body.board-3d #board .tok3d-in > .tok, body.board-3dp #board .tok3d-in > .tok {
    display: block;
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    filter: none !important;
    /* storis: sluoksniai pastumti į šoną ir atgal (be 3D – vienas paviršius lentoje) */
    transform: translate(calc(var(--ps, 30px) * 0.0055 * (5 - var(--k, 0))), calc(var(--ps, 30px) * -0.0025 * (5 - var(--k, 0)))) !important;
}
/* Kraštas tamsėja tolyn – atrodo kaip apvalus šonas, ne antra figūrėlė */
body.board-3d #board .tok3d-in > .tok-layer, body.board-3dp #board .tok3d-in > .tok-layer {
    filter: brightness(calc(0.55 + 0.07 * var(--k, 0))) !important;
}
body.board-3d #board .tok3d-in > .tok-back, body.board-3dp #board .tok3d-in > .tok-back { filter: brightness(0.8) !important; }
/* Šešėlis ant langelio po figūrėle (guli lentos plokštumoje) */
body.board-3d #board .player-dot > .tok-floor, body.board-3dp #board .player-dot > .tok-floor {
    display: block;
    position: absolute;
    left: 0;
    width: 100%;
    top: 78%;
    height: 30%;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.25) 45%, rgba(0, 0, 0, 0) 70%);
    pointer-events: none;
}

/* ⛓️ „Išeiti iš kalėjimo“ – siauras mygtukas centre (≈ trečdalis pločio) */
#center-2 #jailBtn {
    width: auto !important;
    min-width: 33%;
    max-width: 100%;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    white-space: nowrap;
    align-self: center;
}

/* 📋 Stalo ID viršutinėje juostoje kompiuteryje nerodomas – jis jau yra kairiajame stulpelyje.
   Telefone / planšetėje (kai kairysis stulpelis paslėptas) – paliekamas. */
body:not(.cmp) #gameHeader #gameIdDisplay { display: none !important; }

/* ============================================================
   🎲 FIGŪRĖLĖS PASIRINKIMAS (po statybų taisykle)
   Raudona – dar nepasirinkta, žalia – pasirinkta. Užimtos – papilkintos su savininko spalva.
   ============================================================ */
#piecePickerBox.piece-box {
    margin: 0 0 12px;
    padding: 12px 12px 10px;
    border: 2px solid #c9a84c;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.08);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
#piecePickerBox .piece-title {
    font-weight: 900;
    font-size: 14px;
    letter-spacing: 0.4px;
    text-align: center;
    padding: 6px 8px;
    margin-bottom: 10px;
    border-radius: 8px;
    color: #fff;
    transition: background 0.3s ease;
}
#piecePickerBox.need { border-color: #e74c3c; box-shadow: 0 0 14px rgba(231, 76, 60, 0.35); }
#piecePickerBox.need .piece-title {
    background: #c0392b;
    animation: pieceNeedPulse 1.4s ease-in-out infinite;
}
@keyframes pieceNeedPulse {
    0%, 100% { background: #c0392b; box-shadow: 0 0 14px rgba(231, 76, 60, 0.7); }
    50%      { background: #8e1f14; box-shadow: 0 0 4px rgba(231, 76, 60, 0.3); }
}
#piecePickerBox.chosen { border-color: #2ecc71; box-shadow: 0 0 14px rgba(46, 204, 113, 0.35); }
#piecePickerBox.chosen .piece-title { background: linear-gradient(145deg, #2ecc71, #1e9e50); }
#piecePickerBox .piece-opt { position: relative; }
#piecePickerBox .piece-opt.active {
    border-color: #2ecc71;
    background: rgba(46, 204, 113, 0.2);
    box-shadow: 0 0 12px rgba(46, 204, 113, 0.45);
}
#piecePickerBox .piece-opt.taken {
    cursor: not-allowed;
    opacity: 0.4;
    filter: grayscale(0.85);
}
#piecePickerBox .piece-opt.taken:hover { transform: none; border-color: rgba(255, 255, 255, 0.12); }
#piecePickerBox .piece-owner {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 1.5px solid #fff;
    filter: none;
}
#piecePickerBox .piece-note {
    margin-top: 8px;
    text-align: center;
    font-size: 11px;
    color: #d4b896;
    min-height: 14px;
}
#piecePickerBox .piece-note.flash { color: #ffd700; font-weight: 800; font-size: 13px; }
.wr-nopiece { display: inline-flex; width: 100%; height: 100%; align-items: center; justify-content: center; font-size: 18px; opacity: 0.8; }
@media (max-width: 768px) { #piecePickerBox .piece-title { font-size: 12px; } }

/* ============================================================
   🏗️ STATYBŲ MYGTUKAS (žalias – užtenka pinigų, raudonas – ne) ir 15 s langas 5 langelyje
   ============================================================ */
#center-2 #buildBtn {
    width: auto !important;
    min-width: 33%;
    max-width: 100%;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    white-space: nowrap;
    align-self: center;
}
#buildBtn.can-pay { background: linear-gradient(145deg, #2ecc71, #1e8f4a) !important; color: #fff; }
#buildBtn.can-pay:hover:not(:disabled) { box-shadow: 0 6px 14px rgba(46, 204, 113, 0.45), inset 0 1px 0 rgba(255,255,255,0.3) !important; }
#buildBtn.no-money { background: linear-gradient(145deg, #e74c3c, #a93226) !important; color: #fff; opacity: 0.92; }
#buildPicker .bp-item.no-money { opacity: 0.45; filter: grayscale(0.6); cursor: not-allowed; }

/* 15 s langas – 5 langelio (pranešimų) viduje, kaip pirkimo kortelė */
#buildWindowPanel.in-cell5 {
    position: absolute;
    inset: 0;
    left: 0;
    top: 0;
    transform: none;
    width: auto;
    max-width: none;
    z-index: 12;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    padding: 8px 10px;
    border-radius: 8px;
    border-width: 2px;
    text-align: center;
    animation: bwInCell 0.3s cubic-bezier(0.2, 1.4, 0.4, 1);
}
@keyframes bwInCell { from { transform: scale(0.7); opacity: 0; } to { transform: scale(1); opacity: 1; } }
#buildWindowPanel.in-cell5 .bw-body { width: 100%; max-width: 260px; }
#buildWindowPanel.in-cell5 .bw-btns { justify-content: center; }
#buildWindowPanel.in-cell5 .bw-icon { font-size: 30px; }
body.cmp #buildWindowPanel.in-cell5 { padding: 4px 6px; gap: 2px; }
body.cmp #buildWindowPanel.in-cell5 .bw-icon { font-size: 18px; }
body.cmp #buildWindowPanel.in-cell5 .bw-title { font-size: 12px; }
body.cmp #buildWindowPanel.in-cell5 .bw-bar { margin: 3px 0; }
body.cmp #buildWindowPanel.in-cell5 button { padding: 4px 8px; font-size: 11px; }
body.cmp #buildWindowPanel.in-cell5 .bw-left { font-size: 11px; }

/* ============================================================
   🤝 PREKYBA: žaidėjai su figūrėle ir spalva
   ============================================================ */
#tradeTargetPlayer.trade-select-hidden { display: none !important; }
#tradeTargetChips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin: 6px 0 8px; }
#tradeTargetChips .ttc {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    padding: 5px 8px 5px 6px;
    border-radius: 10px;
    border: 2px solid var(--ttc-color, #c9a84c);
    border-left-width: 6px;
    background: rgba(255, 255, 255, 0.75);
    color: #3d2b1f;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    text-align: left;
    transition: transform 0.12s ease, box-shadow 0.15s ease, background 0.15s ease;
}
#tradeTargetChips .ttc:hover { transform: translateY(-1px); background: #fff; }
#tradeTargetChips .ttc.active {
    background: #fff;
    box-shadow: 0 0 0 2px var(--ttc-color, #c9a84c), 0 4px 12px rgba(0, 0, 0, 0.25);
}
#tradeTargetChips .ttc.active::after { content: '✓'; margin-left: auto; color: #1e9e50; font-weight: 900; }
#tradeTargetChips .ttc-piece { width: 26px; height: 26px; flex-shrink: 0; display: inline-flex; }
#tradeTargetChips .ttc-piece .tok { width: 100%; height: 100%; filter: drop-shadow(0 1px 1px rgba(0,0,0,0.4)); }
#tradeTargetChips .ttc-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; border: 1px solid rgba(0,0,0,0.3); }
#tradeTargetChips .ttc-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
#tradeTargetChips .ttc-money { font-size: 11px; color: #1a6b3c; font-weight: 800; flex-shrink: 0; }
#tradeTargetChips .ttc-empty { color: #6c757d; padding: 6px; }
@media (max-width: 480px) { #tradeTargetChips { grid-template-columns: 1fr; } #tradeTargetChips .ttc { font-size: 12px; } }

/* 🏪 Prekybos langas: „Patvirtinti / Grįžti“ visada matomi apačioje, ✕ kampe */
#tradingModal .trading-box { position: relative; }
#tradingModal .trade-x {
    position: absolute; top: 10px; right: 12px;
    width: 34px; height: 34px; border-radius: 50%;
    border: 2px solid #c9a84c; background: rgba(255, 255, 255, 0.85);
    color: #3d2b1f; font-size: 16px; font-weight: 900; line-height: 1; cursor: pointer; z-index: 3;
}
#tradingModal .trade-x:hover { background: #fff; }
#tradingModal .trade-actions {
    position: sticky;
    bottom: -30px;
    margin: 8px -30px -30px;
    padding: 12px 30px 16px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    z-index: 30;
    isolation: isolate;
    background: linear-gradient(to top, #e8d5b5 78%, rgba(232, 213, 181, 0));
    border-radius: 0 0 17px 17px;
}
#tradingModal .trade-actions button { margin: 0 !important; padding: 10px 6px !important; font-size: 14px !important; white-space: normal; line-height: 1.15; }
@media (max-width: 420px) { #tradingModal .trade-actions button { font-size: 13px !important; } }

/* ⏱️ Statybų lango laikmatis – virš mygtukų (juosta + sekundės vienoje eilutėje) */
#buildWindowPanel .bw-timer { display: flex; align-items: center; gap: 8px; margin: 6px 0 8px; }
#buildWindowPanel .bw-timer .bw-bar { flex: 1; margin: 0; height: 8px; }
#buildWindowPanel .bw-timer .bw-left { flex-shrink: 0; font-size: 15px; font-weight: 900; color: #ffd700; min-width: 54px; text-align: right; }
#buildWindowPanel .bw-btns { flex-wrap: nowrap; }
body.cmp #buildWindowPanel .bw-timer { margin: 3px 0 4px; gap: 5px; }
body.cmp #buildWindowPanel .bw-timer .bw-left { font-size: 11px; min-width: 36px; }
#buildWindowPanel.in-cell5 .bw-body { max-width: 340px; }
#buildWindowPanel .bw-btns button { white-space: nowrap; }