:root {
    --bg: #eef1ec;
    --board: #d8ead2;
    --tile: #fbfbf7;
    --ink: #1d2320;
    --muted: #5d6a63;
    --line: #9aa89f;
    --accent: #1f7a4d;
    --danger: #b3261e;

    /* группы участков: от дешёвых к дорогим */
    --latgale: #6b8e23;
    --vidzeme: #2a9d8f;
    --kurzeme: #3d6cc9;
    --zemgale: #e9b23a;
    --pilsetas: #8e44ad;
    --rigas_apkaimes: #d35f2a;
    --rigas_centrs: #c2185b;
    --prestizs: #8b1e2e;
    /* письма «E-Pasts» */
    --mail: #1f6fd1;

    --house: #2e9d4f;
    --hotel: #c62828;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    padding: 16px;
    background: var(--bg);
    color: var(--ink);
    font: 14px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif;
}

.hidden { display: none !important; }

.panel {
    max-width: 360px;
    margin: 10vh auto 0;
    padding: 24px;
    background: var(--tile);
    border: 1px solid var(--line);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.panel h1, .panel h2 { margin: 0; }
.panel label { display: flex; flex-direction: column; gap: 4px; }
.row { display: flex; gap: 8px; }
.row input { flex: 1; min-width: 0; }

/* ---- вход и регистрация ---- */
#auth-form, #lobby-actions { display: flex; flex-direction: column; gap: 12px; }
.auth-tabs { display: flex; border-bottom: 1px solid var(--line); }
.auth-tabs button {
    flex: 1;
    background: none;
    color: var(--muted);
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    margin-bottom: -1px;
}
.auth-tabs button.active { color: var(--ink); border-bottom-color: var(--accent); font-weight: 600; }
.auth-hint { color: var(--muted); font-size: 12px; }
#forgot-form, #reset-form { display: flex; flex-direction: column; gap: 12px; }
.auth-extra p { margin: 0; }
.auth-done { padding: 8px 10px; border-radius: 8px; background: var(--board); font-size: 13px; }
#auth-form .link-button, .auth-extra .link-button { align-self: center; }
.account-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.account-row button { padding: 4px 10px; }
.account-stats { color: var(--muted); font-size: 13px; }

/* ---- стартовая страница: слева игры, справа чат ---- */
#home {
    display: grid;
    grid-template-columns: minmax(0, 400px) minmax(0, 380px);
    justify-content: center;
    align-items: start;
    gap: 16px;
    margin: 6vh auto 0;
}
#home .panel { margin: 0; max-width: none; }
#home > section { grid-column: 1; }
#home > #chat { grid-column: 2; grid-row: 1; }
@media (max-width: 760px) {
    #home { grid-template-columns: minmax(0, 1fr); margin-top: 0; }
    #home > #chat { grid-column: 1; grid-row: auto; }
}
.section-title {
    margin: 4px 0 0;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--muted);
}

.create-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.create-label { font-weight: 600; }
.capacity-choice { display: flex; }
.capacity-choice button {
    background: var(--tile);
    color: var(--ink);
    border-color: var(--line);
    border-radius: 0;
    min-width: 40px;
    margin-left: -1px;
}
.capacity-choice button:first-child { border-radius: 8px 0 0 8px; margin-left: 0; }
.capacity-choice button:last-child { border-radius: 0 8px 8px 0; }
.capacity-choice button[aria-checked="true"] {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    position: relative;
}

.rooms-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.rooms-list li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
}
.rooms-list li.empty { border-style: dashed; color: var(--muted); justify-content: center; }
.room-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.room-host { font-weight: 600; }
.room-players { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.room-seats { font-variant-numeric: tabular-nums; font-weight: 700; }
.join-by-code summary { cursor: pointer; color: var(--muted); font-size: 13px; }
.join-by-code .row { margin-top: 8px; }

/* ---- чат ---- */
.chat-online { font-size: 12px; color: var(--muted); }
.chat-online button, .chat-author {
    background: none;
    border: none;
    padding: 0;
    color: var(--accent);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}
.chat-online button:hover, .chat-author:hover { text-decoration: underline; }
.chat-messages {
    list-style: none;
    margin: 0;
    padding: 8px;
    height: min(46vh, 420px);
    overflow-y: auto;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--bg);
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 13px;
    overflow-wrap: anywhere;
}
.chat-messages li.empty { color: var(--muted); text-align: center; margin: auto 0; }
.chat-messages li.private { background: #fff4d6; border-radius: 6px; padding: 2px 6px; }
.chat-time { color: var(--muted); font-size: 11px; margin-right: 4px; font-variant-numeric: tabular-nums; }
.chat-to { color: var(--muted); }
.chat-form { display: flex; flex-direction: column; gap: 6px; }
.chat-target { font-size: 12px; color: #8a5a00; display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; }
.link-button {
    background: none;
    border: none;
    padding: 0;
    color: var(--muted);
    text-decoration: underline;
    cursor: pointer;
    font-size: 12px;
}
.account-stats b { color: var(--ink); }

/* ---- письмо администратору ---- */
.lobby-links { display: flex; justify-content: space-between; gap: 8px; margin-top: 12px; font-size: 12px; }
.lobby-links a { color: var(--accent); }
.game-chat > .feedback-open { align-self: flex-start; margin-top: 6px; }
.feedback-dialog {
    width: min(480px, calc(100vw - 32px));
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 16px;
    background: var(--tile);
    color: var(--ink);
}
.feedback-dialog::backdrop { background: rgba(0, 0, 0, 0.35); }
.feedback-dialog form { display: flex; flex-direction: column; gap: 10px; }
.feedback-dialog h3 { margin: 0; }
.feedback-kinds { border: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.feedback-kinds legend { font-weight: 600; margin-bottom: 4px; }
.feedback-kinds label { display: flex; align-items: center; gap: 6px; }
.feedback-dialog textarea { font: inherit; padding: 8px; border: 1px solid var(--line); border-radius: 8px; resize: vertical; }

.chat-muted {
    padding: 6px 8px;
    border: 1px solid var(--danger);
    border-radius: 8px;
    background: #fdecea;
    color: var(--danger);
    font-size: 12px;
}

.danger-link { color: var(--danger); }
.delete-list { margin: 0; padding-left: 20px; font-size: 13px; }
.feedback-dialog p { margin: 0; }
.feedback-dialog form > label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.feedback-dialog button.danger { background: var(--danger); border-color: var(--danger); color: #fff; }

/* ---- блокировка и жалобы ---- */
.msg-menu {
    position: absolute;
    z-index: 50;
    display: flex;
    flex-direction: column;
    min-width: 180px;
    padding: 4px;
    background: var(--tile);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}
.msg-menu button {
    background: none;
    border: none;
    color: var(--ink);
    text-align: left;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 13px;
}
.msg-menu button:hover, .msg-menu button:focus-visible { background: var(--board); }
.msg-menu-title { padding: 4px 10px; font-size: 12px; color: var(--muted); }
.blocked-box { font-size: 12px; color: var(--muted); }
.blocked-box summary { cursor: pointer; }
.blocked-list { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.blocked-list li { display: flex; gap: 8px; align-items: baseline; }

/* ---- группы друзей и приватные игры ---- */
.chat-tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.chat-tab {
    background: var(--tile);
    color: var(--ink);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 3px 10px;
    font-size: 12px;
    font-weight: 600;
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.chat-tab[aria-selected="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.chat-unread {
    display: inline-block;
    margin-left: 5px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--danger);
    color: #fff;
    font-size: 10px;
}
.group-new, .group-panel { display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.group-new p { margin: 0; }
.group-members { color: var(--muted); font-size: 12px; }
.group-details summary { cursor: pointer; font-weight: 600; }
.group-details[open] { display: flex; flex-direction: column; gap: 6px; padding-bottom: 4px; }
.group-search-results { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.group-search-results li { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.group-search-results li.empty { color: var(--muted); font-size: 12px; }
.group-game-who { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.group-panel > .link-button { align-self: flex-start; }
.online-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 4px;
    border-radius: 50%;
    background: #2fa84f;
    vertical-align: 1px;
}
.chat-messages li.system { color: var(--muted); font-style: italic; }
.room-private { font-size: 11px; font-weight: 700; color: #8a5a00; text-transform: uppercase; letter-spacing: 0.03em; }
.private-room { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; font-size: 13px; }
.private-room-info { color: #8a5a00; }

input, button {
    font: inherit;
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid var(--line);
}
button {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
    cursor: pointer;
}
button:disabled { opacity: .35; cursor: default; }
button.secondary { background: var(--tile); color: var(--ink); border-color: var(--line); }
button.danger { background: var(--tile); color: var(--danger); border-color: var(--danger); }

/* ---- поле 11x11 ---- */
#board {
    display: grid;
    /* minmax(0, …): клетки и центр не растягивают сетку под своё содержимое — доска всегда квадратная */
    grid-template-columns: minmax(0, 1.6fr) repeat(9, minmax(0, 1fr)) minmax(0, 1.6fr);
    grid-template-rows: minmax(0, 1.6fr) repeat(9, minmax(0, 1fr)) minmax(0, 1.6fr);
    gap: 2px;
    width: min(100%, 94vh);
    aspect-ratio: 1;
    /* без этого минимальная высота = высота содержимого, и длинный журнал вытягивает доску вниз */
    min-height: 0;
    margin: 0 auto;
    padding: 2px;
    background: var(--line);
}

.tile {
    position: relative;
    background: var(--tile);
    font-size: clamp(7px, 1vw, 11px);
    line-height: 1.15;
    padding: 2px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.tile .band { width: 100%; height: 18%; flex: none; }

/* ---- постройки ---- */
.buildings {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1px;
}
.house, .hotel {
    display: inline-block;
    height: 70%;
    max-height: 12px;
    min-height: 6px;
    aspect-ratio: 1;
    background: var(--house);
    border: 1px solid #fff;
    border-radius: 2px;
}
.hotel {
    aspect-ratio: 2.2;
    background: var(--hotel);
}
.tile .name { flex: 1; display: flex; align-items: center; }
.tile .price { color: var(--muted); }
.tile.owned { box-shadow: inset 0 0 0 3px var(--owner); }
/* окно покупки: остальные клетки и центр затемнены, выбранная клетка — яркая, с обводкой и свечением цвета группы */
.tile, #center { transition: filter 300ms ease; }
#board.spotlight .tile:not(.spotlit),
#board.spotlight #center { filter: brightness(.7) saturate(.8); }
#board.spotlight .tile.spotlit {
    z-index: 1;
    outline: 3px solid var(--spot);
    outline-offset: -2px;
    box-shadow: 0 0 0 3px #fff, 0 0 24px 8px var(--spot);
    animation: spot-pulse 1.6s ease-in-out infinite alternate;
}
@keyframes spot-pulse {
    to { box-shadow: 0 0 0 3px #fff, 0 0 12px 3px var(--spot); }
}
@media (prefers-reduced-motion: reduce) {
    #board.spotlight .tile.spotlit { animation: none; }
}
/* ---- фишки ---- */
#board { position: relative; }
#piece-layer { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.piece {
    position: absolute;
    translate: -50% -50%;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px var(--ink), 0 1px 3px rgb(0 0 0 / .35);
    transition-property: left, top, width, height;
    transition-duration: 180ms;
    transition-timing-function: ease-out;
}
/* фишка игрока, чей ход: крупная, по центру клетки, с пульсирующим кольцом */
.piece.current {
    border-width: 3px;
    z-index: 1;
    animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse {
    0%, 100% { box-shadow: 0 0 0 1px var(--ink), 0 0 0 0 rgb(31 122 77 / .55); }
    50% { box-shadow: 0 0 0 1px var(--ink), 0 0 0 7px rgb(31 122 77 / 0); }
}
/* каждый шаг — маленький прыжок */
.piece.hop { animation: hop var(--step-ms, 180ms) ease-out; }
@keyframes hop {
    0% { scale: 1; }
    45% { scale: 1.3; }
    100% { scale: 1; }
}
/* перелёт в тюрьму через поле: фишка «подлетает» — растёт, тень уходит вниз — и приземляется */
.piece.fly {
    z-index: 3;
    animation: fly var(--step-ms, 1000ms) ease-in-out;
}
@keyframes fly {
    0% { scale: 1; box-shadow: 0 0 0 1px var(--ink), 0 1px 3px rgb(0 0 0 / .35); }
    50% { scale: 1.9; box-shadow: 0 0 0 1px var(--ink), 0 14px 18px rgb(0 0 0 / .3); }
    85% { scale: .9; }
    100% { scale: 1; box-shadow: 0 0 0 1px var(--ink), 0 1px 3px rgb(0 0 0 / .35); }
}
@media (prefers-reduced-motion: reduce) {
    .piece { transition-duration: 0ms !important; }
    .piece.hop, .piece.fly, .piece.current { animation: none; }
}

/* пока фишка идёт — кнопки и поля ввода неактивны (результат хода ещё не показан) */
body.animating #center button,
body.animating #center input {
    pointer-events: none;
    opacity: .45;
}

/* ---- открытая карточка «E-Pasts» по центру доски ---- */
.card-reveal {
    position: absolute;
    left: 50%;
    top: 50%;
    translate: -50% -50%;
    z-index: 4;
    width: min(340px, 60%);
    padding: 18px 20px 16px;
    border-radius: 14px;
    background: var(--tile);
    border: 3px solid var(--card-color);
    box-shadow: 0 16px 40px rgb(0 0 0 / .3);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
    animation: card-in 380ms ease-out;
}
.card-reveal.e-pasts { --card-color: var(--mail); }
.card-reveal-from { font-size: 13px; color: var(--muted); margin-top: -6px; }
.card-reveal-from:empty { display: none; }
.card-reveal-deck {
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--card-color);
}
.card-reveal-text { font-size: 17px; line-height: 1.35; font-weight: 600; }
.card-reveal button { background: var(--card-color); border-color: var(--card-color); padding: 8px 22px; }
.card-reveal-wait { color: var(--muted); font-size: 13px; }
.card-reveal-wait:empty { display: none; }
/* окно платежа: аренда — рамка цвета владельца, налог — тёмно-красная (задаётся из JS) */
.payment-due-tile { font-size: 18px; font-weight: 700; }
.payment-due-owner { font-size: 14px; color: var(--muted); }
.payment-due-amount { font-size: 30px; font-weight: 800; font-variant-numeric: tabular-nums; }
.card-reveal.payment button { text-shadow: 0 1px 2px rgb(0 0 0 / .45); }
/* окно покупки свободного поля: рамка цвета группы, внутри карточка клетки */
/* не выше центра доски (углы — 1.6 из 12.2 долей с каждой стороны): клетки по краю, в том числе выделенная, остаются видны */
.card-reveal.buy-offer { width: min(360px, 70%); max-height: 72%; gap: 10px; }
.buy-offer-card {
    width: 100%;
    flex: 0 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--line);
    border-radius: 10px;
    overflow: hidden;
    text-align: left;
    font-size: 13px;
}
.buy-offer-card .tile-card-head { cursor: default; }
.buy-offer-money { display: flex; width: 100%; gap: 8px; }
.buy-offer-money > div {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 6px 8px;
    border-radius: 10px;
    background: var(--board);
    font-variant-numeric: tabular-nums;
}
.buy-offer-money span { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.buy-offer-money b { font-size: 24px; font-weight: 800; }
.buy-offer-price { outline: 3px solid var(--card-color); outline-offset: -3px; }
.buy-offer-cash.short b { color: var(--danger); }
.buy-offer-buttons { display: flex; gap: 8px; }
.card-reveal.buy-offer button { text-shadow: 0 1px 2px rgb(0 0 0 / .45); }
.card-reveal.buy-offer .card-reveal-deck { color: var(--muted); }
.card-reveal.buy-offer.light button:not(.secondary):not(.link-button) { color: var(--ink); text-shadow: none; }
.card-reveal.buy-offer button.secondary { background: var(--tile); color: var(--ink); border-color: var(--line); text-shadow: none; }
.card-reveal.buy-offer button:disabled { opacity: .4; }
.card-reveal.buy-offer .link-button {
    background: none;
    border: none;
    padding: 0;
    color: var(--muted);
    text-decoration: underline;
    text-shadow: none;
    font-size: 13px;
}
/* карточка «Банкрот»: тёмная, с красной рамкой */
.card-reveal.bankrupt {
    --card-color: var(--danger);
    background: #1f1515;
    color: #f5eded;
    border-width: 4px;
}
.bankrupt-title {
    font-size: 30px;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #ff5a4f;
}
.bankrupt-text { font-size: 15px; line-height: 1.4; font-weight: 600; }
.card-reveal.bankrupt .card-reveal-wait { color: #c9b7b5; }
.bankrupt-buttons { display: flex; gap: 8px; }
.card-reveal.bankrupt button.secondary { background: transparent; color: #f5eded; border-color: #8a7471; }
@keyframes card-in {
    from { opacity: 0; scale: .6; rotate: -6deg; }
    to { opacity: 1; scale: 1; rotate: 0deg; }
}
@media (prefers-reduced-motion: reduce) {
    .card-reveal { animation: none; }
}

/* ---- карточка клетки (по наведению) ---- */
#tile-card {
    position: fixed;
    z-index: 15;
    width: 230px;
    border-radius: 10px;
    overflow: hidden;
    background: var(--tile);
    border: 1px solid var(--line);
    box-shadow: 0 8px 24px rgb(0 0 0 / .22);
    font-size: 13px;
    /* в низком окне карточка не выходит за экран — у неё появляется своя прокрутка */
    max-height: calc(100vh - 16px);
    display: flex;
    flex-direction: column;
}
.tile-card-head {
    padding: 10px 12px;
    color: #fff;
    text-align: center;
    text-shadow: 0 1px 2px rgb(0 0 0 / .45);
    flex: none;
    cursor: grab;
    user-select: none;
    touch-action: none;
}
#tile-card.dragging { box-shadow: 0 14px 32px rgb(0 0 0 / .3); }
#tile-card.dragging .tile-card-head { cursor: grabbing; }
.tile-card-head.plain { background: var(--board); color: var(--ink); text-shadow: none; }
.tile-card-group { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; opacity: .9; }
.tile-card-title { font-weight: 700; font-size: 15px; }
.tile-card-price { font-size: 12px; opacity: .9; }
.tile-card-body { padding: 8px 12px 10px; display: flex; flex-direction: column; gap: 4px; overflow-y: auto; min-height: 0; }
.tile-card-section {
    margin-top: 4px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--muted);
}
.tile-card-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.tile-card-table td { padding: 1px 4px; }
.tile-card-table td:last-child { text-align: right; white-space: nowrap; }
.tile-card-table tr.current { background: var(--board); font-weight: 700; }
.tile-card-text { margin: 0; line-height: 1.4; }
.tile-card-status { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; }
/* тонкая тёмная обводка — чтобы читались и светлые цвета игроков (жёлтый) */
.tile-card-owner {
    font-weight: 700;
    text-shadow: -.5px -.5px 0 rgb(0 0 0 / .55), .5px -.5px 0 rgb(0 0 0 / .55),
                 -.5px .5px 0 rgb(0 0 0 / .55), .5px .5px 0 rgb(0 0 0 / .55);
}

/* кружок игрока в таблице игроков */
.token {
    width: clamp(8px, 1.4vw, 14px);
    aspect-ratio: 1;
    border-radius: 50%;
    border: 1.5px solid #fff;
    box-shadow: 0 0 0 1px var(--ink);
}

#center {
    grid-area: 2 / 2 / 11 / 11;
    background: var(--board);
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    /* не хватает места (маленькая доска) — центр прокручивается сам, а не растягивает доску */
    overflow-y: auto;
}
#status { font-weight: 600; font-size: 15px; }
#dice {
    font-size: 56px;
    line-height: 1;
    min-height: 56px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.die { display: inline-block; transform-origin: 50% 55%; }
#dice-note { font-size: 13px; font-weight: 700; color: var(--accent); margin-left: 6px; }
/* бросок: кубики трясутся и кувыркаются, второй — со сдвигом, чтобы не синхронно */
#dice.rolling .die { animation: tumble 260ms linear infinite; }
#dice.rolling .die + .die { animation-duration: 220ms; animation-direction: reverse; }
@keyframes tumble {
    0% { translate: 0 0; rotate: 0deg; }
    25% { translate: 6px -10px; rotate: 90deg; }
    50% { translate: -4px 0; rotate: 180deg; }
    75% { translate: 4px -6px; rotate: 270deg; }
    100% { translate: 0 0; rotate: 360deg; }
}
/* остановка: короткий отскок */
#dice.landed .die { animation: land 260ms ease-out; }
@keyframes land {
    0% { scale: 1.35; }
    60% { scale: .9; }
    100% { scale: 1; }
}
/* дубль — кубики подсвечены */
#dice.double .die { color: var(--accent); text-shadow: 0 0 8px rgb(31 122 77 / .45); }
@media (prefers-reduced-motion: reduce) {
    #dice.rolling .die, #dice.landed .die { animation: none; }
}
#card {
    padding: 8px 10px;
    border-radius: 8px;
    border: 2px solid var(--card-color);
    background: var(--tile);
    max-width: 360px;
}
#card.e-pasts { --card-color: var(--mail); }
#card .card-deck {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--card-color);
}

#auction {
    padding: 8px 10px;
    border-radius: 8px;
    border: 2px solid var(--accent);
    background: var(--tile);
    display: flex;
    flex-direction: column;
    gap: 4px;
}
#auction-title { font-weight: 700; }
#auction-bidders { color: var(--muted); font-size: 12px; }
#auction-controls { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
#auction-controls button, #auction-controls input { padding: 6px 10px; }
#bid-input { width: 90px; }
.tile.auctioned { outline: 3px solid var(--accent); outline-offset: -3px; z-index: 1; }

.status-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 12px; }
#timer { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
#timer.urgent { color: var(--danger); font-weight: 700; }
#trades-left { align-self: center; font-size: 12px; color: var(--muted); }

#trade-offer {
    padding: 8px 10px;
    border-radius: 8px;
    border: 2px solid var(--mail);
    background: var(--tile);
    display: flex;
    flex-direction: column;
    gap: 3px;
}
#trade-offer-title { font-weight: 700; }
#trade-offer-note { color: var(--muted); font-size: 12px; }
#trade-offer-note:empty { display: none; }
#trade-offer-controls { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
#trade-offer-controls button { padding: 6px 10px; }

/* ---- окно обмена ---- */
.modal {
    position: fixed;
    inset: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgb(0 0 0 / .35);
}
.modal-box {
    width: min(640px, 100%);
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    padding: 16px;
    border-radius: 12px;
    background: var(--tile);
    border: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.modal-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; }
.modal-head h3 { margin: 0; }
.modal-head select { font: inherit; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--line); }
.trade-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.trade-col { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.trade-col h4 { margin: 0; }
.trade-tiles {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 240px;
    overflow-y: auto;
    color: var(--muted);
}
.trade-tile { display: flex; align-items: center; gap: 6px; color: var(--ink); cursor: pointer; }
.trade-tile:has(input:disabled) { color: var(--muted); cursor: default; }
.trade-tile .swatch { width: 12px; height: 12px; border-radius: 3px; flex: none; }
.trade-field { display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--muted); }
.trade-field input { width: 120px; }
.trade-hint { margin: 0; font-size: 12px; color: var(--muted); }
.trade-tile-price { margin-left: auto; padding-left: 8px; color: var(--muted); font-variant-numeric: tabular-nums; }
.trade-total { margin-top: 2px; padding-top: 6px; border-top: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.trade-balance {
    padding: 8px 10px;
    border-radius: 8px;
    background: var(--board);
    font-weight: 600;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.trade-balance.bad { background: rgb(179 38 30 / .1); color: var(--danger); }
.modal-actions { display: flex; gap: 8px; justify-content: flex-end; }
@media (max-width: 520px) {
    .trade-columns { grid-template-columns: 1fr; }
}

#debt {
    padding: 8px 10px;
    border-radius: 8px;
    border: 2px solid var(--danger);
    background: var(--tile);
    display: flex;
    flex-direction: column;
    gap: 4px;
}
#debt-text { font-weight: 700; }
#debt-hint { color: var(--muted); font-size: 12px; }
#debt-controls { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
#debt-controls button { padding: 6px 10px; }

#property {
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid var(--line);
    background: var(--tile);
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: none;
    max-height: 40%;
    overflow-y: auto;
}
.property-head { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.property-title { font-weight: 700; }
#property-bank { color: var(--muted); font-size: 12px; }
.property-row {
    display: grid;
    grid-template-columns: 12px 1fr 64px auto auto;
    align-items: center;
    gap: 6px;
}
.property-row .swatch { width: 12px; height: 12px; border-radius: 3px; }
.property-row .property-level { display: flex; gap: 2px; align-items: center; height: 14px; color: var(--muted); }
.property-row .property-level .house, .property-row .property-level .hotel { height: 12px; }
.property-row .build-buttons { display: flex; gap: 4px; }
.property-row button { padding: 3px 8px; font-size: 12px; }
.property-row.mortgaged .property-name { color: var(--muted); text-decoration: line-through; }

/* заложенная клетка на поле: бледная, с плашкой «IEĶĪLĀTS» (заложено) */
.tile.mortgaged > * { opacity: .4; }
.tile.mortgaged::after {
    content: "IEĶĪLĀTS";
    white-space: nowrap;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-20deg);
    padding: 0 3px;
    font-weight: 700;
    font-size: clamp(6px, .8vw, 10px);
    letter-spacing: .04em;
    color: var(--hotel);
    border: 1.5px solid var(--hotel);
    border-radius: 3px;
    background: var(--tile);
}

#actions { display: flex; flex-wrap: wrap; gap: 6px; }
#actions button { padding: 6px 10px; }

#players { border-collapse: collapse; width: 100%; }
#players td { padding: 2px 6px; border-bottom: 1px solid var(--line); }
#players tr.current { font-weight: 700; }
#players tr.bankrupt { text-decoration: line-through; color: var(--muted); }

#log {
    flex: 1;
    min-height: 120px;
    overflow-y: auto;
    margin: 0;
    padding: 6px 6px 6px 28px;
    background: var(--tile);
    border-radius: 6px;
    font-size: 12px;
}

#connection {
    position: fixed;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
    max-width: calc(100% - 32px);
    padding: 8px 14px;
    border-radius: 8px;
    background: var(--ink);
    color: var(--tile);
    font-weight: 600;
    text-align: center;
}

#error {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    background: var(--danger);
    color: #fff;
    padding: 10px 16px;
    border-radius: 8px;
}

@media (max-width: 700px) {
    body { padding: 8px; }
    #center { padding: 6px; font-size: 11px; }
    #dice { font-size: 40px; min-height: 40px; }
}

/* ---- игра: доска и чат партии справа (на узком экране — под доской) ---- */
#game-screen { display: flex; gap: 16px; align-items: flex-start; justify-content: center; }
#game-screen #board { flex: none; width: min(calc(100vw - 32px - 16px - 300px), 94vh); margin: 0; }
.game-chat {
    width: 300px;
    flex: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    background: var(--tile);
    border: 1px solid var(--line);
    border-radius: 12px;
}
.game-chat .chat-messages { height: min(60vh, 520px); }
.game-chat-to { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.game-chat-to select {
    flex: 1;
    font: inherit;
    color: var(--ink);
    padding: 4px 8px;
    border-radius: 8px;
    border: 1px solid var(--line);
    background: var(--tile);
}
@media (max-width: 900px) {
    #game-screen { flex-direction: column; align-items: center; }
    #game-screen #board { width: min(100%, 94vh); }
    .game-chat { width: min(100%, 94vh); }
}

/* «Pamest spēli» — в правом конце панели, подальше от «Mest kauliņus» */
#resign-btn { margin-left: auto; }

/* штраф за «Pamest spēli» на стартовой странице */
.verify-note {
    padding: 8px 10px;
    border: 1px solid #c9a227;
    border-radius: 8px;
    background: #fff8e1;
    color: #6b5200;
    font-size: 13px;
}
.verify-note .link-button { font-size: 13px; color: inherit; }
.penalty-note {
    padding: 8px 10px;
    border: 1px solid var(--danger);
    border-radius: 8px;
    background: #fdecea;
    color: var(--danger);
    font-size: 13px;
}

/* ---- страница администратора (/admin) ---- */
.admin { max-width: 860px; margin: 0 auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.admin-header { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.admin-header h1 { font-size: 20px; margin: 0; }
.admin-header a, .admin a { color: var(--accent); }
.admin h2 { font-size: 16px; margin: 0 0 8px; }
.admin-message { padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--tile); }
.admin-filters { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.admin-tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.admin-tabs button { background: var(--tile); color: var(--ink); border: 1px solid var(--line); border-radius: 999px; font-size: 13px; }
.admin-tabs button[aria-selected="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.admin-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.admin-list li.empty { color: var(--muted); padding: 12px; }
.admin-item { background: var(--tile); border: 1px solid var(--line); border-left: 4px solid var(--line); border-radius: 8px; padding: 10px 12px; }
.admin-item.bug { border-left-color: var(--danger); }
.admin-item.idea { border-left-color: var(--accent); }
.admin-item-head { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; font-size: 13px; }
.admin-kind { font-weight: 700; text-transform: uppercase; font-size: 11px; letter-spacing: 0.03em; }
.admin-when, .admin-status { color: var(--muted); }
.admin-status { margin-left: auto; }
.admin-text { white-space: pre-wrap; overflow-wrap: anywhere; margin: 8px 0; }
.admin-context { font-size: 12px; color: var(--muted); overflow-wrap: anywhere; margin: 0 0 8px; }
.admin-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.admin-sections { display: flex; gap: 6px; border-bottom: 1px solid var(--line); margin-bottom: 12px; }
.admin-sections button {
    background: none;
    color: var(--muted);
    border: none;
    border-bottom: 3px solid transparent;
    border-radius: 0;
    padding: 8px 12px;
    font-weight: 600;
}
.admin-sections button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); }
.admin-item.report { border-left-color: #c9a227; }
.stat-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-bottom: 16px; }
.stat-tile { background: var(--tile); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.stat-tile b { font-size: 26px; font-variant-numeric: tabular-nums; }
.stat-tile span { font-size: 12px; color: var(--muted); }
.admin-item.punishment { border-left-color: var(--danger); }
.admin-actions button.danger { background: var(--danger); border-color: var(--danger); color: #fff; }

/* ---- документы: правила игры и политика конфиденциальности ---- */
.site-footer { margin-top: 16px; font-size: 12px; color: var(--muted); text-align: center; }
.site-footer a, .auth-hint a { color: var(--muted); }
.doc { max-width: 820px; margin: 0 auto; padding: 16px; line-height: 1.55; }
.doc a { color: var(--accent); }
.doc h1 { font-size: 24px; margin: 12px 0 4px; }
.doc h2 { font-size: 17px; margin: 24px 0 8px; }
.doc-meta { color: var(--muted); margin-top: 0; }
.doc mark { background: #fff1a8; padding: 0 2px; }
.doc-table { overflow-x: auto; }
.doc table { border-collapse: collapse; width: 100%; font-size: 14px; }
.doc th, .doc td { border: 1px solid var(--line); padding: 6px 8px; text-align: left; vertical-align: top; }
.doc th { background: var(--board); }