/* Настольные игры в комнатах (22.10.2026): «Дурак» и «Тропа Граней». Разметка — assets/board-games.js. */
.bg-room { --gold: #ffcf7a; --ink: #f4ead8; --muted: #b6a993; --felt1: #123227; --felt2: #0a1d16; position: relative; display: grid; gap: 12px; color: var(--ink); font-size: 15px; }
.bg-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 14px; border-radius: 16px; border: 1px solid rgba(255, 207, 122, .2);
    background: linear-gradient(180deg, rgba(30, 22, 16, .9), rgba(14, 10, 8, .9)); }
.bg-bar__title { font-family: 'Playfair Display', Georgia, serif; font-weight: 800; font-size: 19px; color: var(--gold); flex: 1; min-width: 0; }
.bg-bar__title small { font-family: inherit; font-weight: 600; font-size: 13px; color: var(--muted); margin-left: 6px; font-family: system-ui, sans-serif; }
.bg-bar__trump { font-size: 13px; color: var(--muted); }
.bg-bar__trump b { font-size: 22px; line-height: 1; color: #f2ead8; margin-left: 4px; vertical-align: -2px; }
.bg-bar__trump b.is-red, .bg-deck__suit.is-red { color: #ff6b6b; }
.bg-timer { min-width: 54px; padding: 4px 10px; border-radius: 99px; text-align: center; font-variant-numeric: tabular-nums; font-weight: 700; font-size: 13px;
    color: var(--gold); border: 1px solid rgba(255, 207, 122, .3); background: rgba(0, 0, 0, .3); }
.bg-timer.is-urgent { color: #ff8080; border-color: rgba(255, 110, 110, .55); animation: bgPulse 1s ease-in-out infinite; }
@keyframes bgPulse { 50% { box-shadow: 0 0 14px rgba(255, 90, 90, .5); } }
.bg-ava { position: relative; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; font-weight: 800; color: #1a1208;
    background: radial-gradient(circle at 35% 30%, #ffe6b3, #d99a45); box-shadow: 0 0 0 2px rgba(255, 207, 122, .4), 0 6px 14px rgba(0, 0, 0, .4); }
.bg-ava i { position: absolute; bottom: -6px; left: 50%; translate: -50% 0; padding: 0 5px; border-radius: 6px; font: 800 9px/14px system-ui, sans-serif; font-style: normal; color: #e9dcff; background: #5b3fa8; }
.bg-ava.is-me { background: radial-gradient(circle at 35% 30%, #c9f5ff, #47a8c9); }
.bg-btn { appearance: none; border: 1px solid rgba(255, 207, 122, .35); border-radius: 14px; padding: 12px 22px; font: 700 15px/1.1 inherit; color: var(--gold); cursor: pointer;
    background: linear-gradient(160deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .02)); backdrop-filter: blur(6px); transition: transform .15s, box-shadow .2s, background-color .2s; }
.bg-btn:hover { transform: translateY(-2px); box-shadow: 0 0 18px rgba(255, 190, 106, .3); }
.bg-btn.is-main { color: #241405; border-color: transparent; background: linear-gradient(180deg, #ffd88f, #f0a245); box-shadow: 0 8px 22px rgba(240, 162, 69, .35); }
.bg-btn.is-red { color: #ffd6d6; border-color: rgba(255, 110, 110, .5); background: rgba(120, 20, 24, .35); }
.bg-btn.is-violet { color: #eadcff; border-color: rgba(180, 140, 255, .55); background: rgba(70, 40, 130, .4); }
.bg-btn.is-wait, .bg-btn:disabled { opacity: .55; pointer-events: none; }
.bg-status { margin: 0; text-align: center; font-size: 15px; color: var(--ink); min-height: 22px; }
.bg-log { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; font-size: 12.5px; color: var(--muted); }
.bg-log li:first-child { color: #e6d9c2; }
.bg-pause { position: absolute; inset: 0; z-index: 20; display: grid; place-content: center; gap: 4px; text-align: center; border-radius: 22px; background: rgba(8, 6, 4, .75); backdrop-filter: blur(4px); }
.bg-pause b { font-size: 26px; color: var(--gold); }

/* ── Карты ── */
.bg-card { --cw: 70px; position: relative; display: inline-flex; flex: none; width: var(--cw); aspect-ratio: 5 / 7; border-radius: calc(var(--cw) * .1);
    color: #241d2b; font-family: 'Playfair Display', Georgia, serif; user-select: none;
    background: radial-gradient(120% 80% at 30% 15%, #fffaf0, #f3e6c8 60%, #e6d1a4); border: 1px solid #b8955a;
    box-shadow: inset 0 0 0 3px #fbf3e0, inset 0 0 0 4px rgba(184, 149, 90, .55), 0 6px 14px rgba(0, 0, 0, .45); }
.bg-card.is-red { color: #c22f3a; }
.bg-card__corner { position: absolute; left: 7%; top: 5%; display: grid; justify-items: center; font-weight: 800; font-size: calc(var(--cw) * .22); line-height: .95; }
.bg-card__corner i { font-style: normal; font-size: .82em; }
.bg-card__corner.is-bottom { left: auto; top: auto; right: 7%; bottom: 5%; rotate: 180deg; }
.bg-card__pips { margin: auto; font-size: calc(var(--cw) * .5); line-height: 1; filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .6)); }
.bg-card__court { margin: auto; display: grid; justify-items: center; gap: 0; width: 62%; padding: 8% 0 6%; border-radius: 40% 40% 12% 12%;
    background: radial-gradient(circle at 50% 30%, rgba(255, 215, 140, .55), rgba(190, 140, 60, .15) 70%); box-shadow: inset 0 0 0 1px rgba(160, 112, 40, .55); }
.bg-card__court b { font-size: calc(var(--cw) * .36); line-height: 1; }
.bg-card__court i { font-style: normal; font-size: calc(var(--cw) * .22); line-height: 1; }
.bg-card__court small { font-family: system-ui, sans-serif; font-size: calc(var(--cw) * .1); font-weight: 700; letter-spacing: .04em; opacity: .75; margin-top: 2px; }
.bg-card__star { position: absolute; right: 8%; top: 5%; font-size: calc(var(--cw) * .15); color: #d18a1c; text-shadow: 0 0 6px rgba(255, 170, 40, .8); }
.bg-card.is-trump { box-shadow: inset 0 0 0 3px #fbf3e0, inset 0 0 0 4px rgba(214, 150, 40, .9), 0 6px 14px rgba(0, 0, 0, .45), 0 0 12px rgba(255, 180, 60, .35); }
.bg-back { --cw: 70px; position: relative; display: inline-block; flex: none; width: var(--cw); aspect-ratio: 5 / 7; border-radius: calc(var(--cw) * .1);
    background:
        radial-gradient(circle at 50% 50%, rgba(255, 200, 110, .35), transparent 40%),
        repeating-linear-gradient(45deg, rgba(255, 207, 122, .14) 0 2px, transparent 2px 9px),
        repeating-linear-gradient(-45deg, rgba(255, 207, 122, .14) 0 2px, transparent 2px 9px),
        linear-gradient(160deg, #2a1640, #160b24);
    border: 1px solid #c79a4e; box-shadow: inset 0 0 0 3px #1a0e28, inset 0 0 0 4px rgba(214, 160, 70, .7), 0 4px 10px rgba(0, 0, 0, .5); }
.bg-back i { position: absolute; left: 50%; top: 50%; width: 34%; aspect-ratio: 1; translate: -50% -50%; clip-path: polygon(50% 0, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
    background: linear-gradient(160deg, #ffe2a0, #d98a2c); box-shadow: 0 0 10px rgba(255, 190, 90, .8); }
.bg-back.is-mini { --cw: 18px; margin-left: -11px; box-shadow: inset 0 0 0 1px rgba(214, 160, 70, .7), 0 2px 4px rgba(0, 0, 0, .5); }
.bg-back.is-mini:first-child { margin-left: 0; }
.bg-back.is-mini i { display: none; }

/* ── Дурак: соперники, стол, рука ── */
.bg-opps { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.bg-opp { position: relative; display: grid; justify-items: center; gap: 3px; min-width: 96px; padding: 10px 12px 9px; border-radius: 16px; text-align: center;
    border: 1px solid rgba(255, 207, 122, .14); background: rgba(16, 12, 10, .7); transition: box-shadow .3s, border-color .3s; }
.bg-opp b { font-size: 13px; max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bg-opp small { font-size: 11.5px; color: var(--muted); }
.bg-opp em { font-style: normal; font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 99px; background: rgba(255, 255, 255, .08); color: var(--muted); }
.bg-opp em.is-att { color: #241405; background: var(--gold); }
.bg-opp em.is-def { color: #ffd6d6; background: rgba(170, 40, 50, .55); }
.bg-opp em.is-out { color: #bff3cf; background: rgba(40, 140, 80, .4); }
.bg-opp.is-active { border-color: rgba(255, 207, 122, .6); box-shadow: 0 0 22px rgba(255, 190, 106, .28); }
.bg-opp.is-done { opacity: .55; }
.bg-opp__fan { display: flex; height: 26px; align-items: flex-end; }
.bg-felt { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; min-height: 196px; padding: 16px 18px; border-radius: 26px;
    background: radial-gradient(120% 90% at 50% 40%, var(--felt1), var(--felt2)); border: 2px solid rgba(201, 150, 70, .55);
    box-shadow: inset 0 0 0 6px rgba(0, 0, 0, .25), inset 0 0 60px rgba(0, 0, 0, .55), 0 18px 40px rgba(0, 0, 0, .45); }
.bg-felt::before { content: ''; position: absolute; inset: 10px; border-radius: 18px; border: 1px dashed rgba(255, 220, 150, .12); pointer-events: none; }
.bg-felt__hint { color: rgba(240, 230, 210, .35); font-size: 14px; margin: auto; }
.bg-deck { position: relative; display: grid; place-items: center; width: 92px; height: 120px; }
.bg-deck .bg-card.is-trumpcard { --cw: 62px; position: absolute; rotate: 90deg; translate: 16px 0; }
.bg-deck__stack { position: relative; display: grid; }
.bg-deck__stack .bg-back { --cw: 62px; grid-area: 1 / 1; }
.bg-deck__stack .bg-back:nth-child(2) { translate: -2px -2px; } .bg-deck__stack .bg-back:nth-child(3) { translate: -4px -4px; }
.bg-deck > b { position: absolute; bottom: -4px; left: 6px; min-width: 26px; padding: 1px 6px; border-radius: 99px; font-size: 12px; text-align: center; color: #241405; background: var(--gold); }
.bg-deck__suit { font-size: 46px; line-height: 1; color: #f2ead8; text-shadow: 0 0 16px rgba(255, 200, 110, .6); }
.bg-discard { display: grid; place-items: center; width: 80px; height: 110px; position: relative; text-align: center; color: var(--muted); }
.bg-discard .bg-back { --cw: 52px; position: absolute; opacity: .65; rotate: 14deg; }
.bg-discard .bg-back.is-tilt2 { rotate: -9deg; translate: 4px 2px; }
.bg-discard small { position: relative; font-size: 11px; text-shadow: 0 1px 3px #000; }
.bg-discard small b { font-size: 16px; color: var(--ink); }
.bg-pairs { display: flex; flex-wrap: wrap; justify-content: center; align-content: center; gap: 12px 18px; min-height: 140px; }
.bg-pair { position: relative; display: grid; padding-bottom: 22px; border-radius: 12px; transition: transform .2s; }
.bg-pair > .bg-card { grid-area: 1 / 1; }
.bg-pair > .bg-card.is-cover { translate: 16px 22px; rotate: 8deg; }
.bg-pair.is-targetable { cursor: pointer; }
.bg-pair.is-targetable > .bg-card:first-child { box-shadow: inset 0 0 0 3px #fbf3e0, inset 0 0 0 4px rgba(184, 149, 90, .55), 0 0 0 2px rgba(255, 110, 110, .5), 0 0 18px rgba(255, 110, 110, .35); }
.bg-pair.is-target > .bg-card:first-child { box-shadow: inset 0 0 0 3px #fbf3e0, 0 0 0 3px #ffcf7a, 0 0 22px rgba(255, 200, 110, .6); transform: translateY(-4px); }
.bg-card.is-in { animation: bgCardIn .45s cubic-bezier(.2, .8, .2, 1) both; }
.bg-card.is-cover.is-in { animation-name: bgCoverIn; }
@keyframes bgCardIn { from { opacity: 0; transform: translateY(80px) rotate(-12deg) scale(.8); } }
@keyframes bgCoverIn { from { opacity: 0; transform: translateY(60px) rotate(18deg) scale(.85); } }
.bg-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; min-height: 0; }
.bg-actions:empty { display: none; }
.bg-me { display: flex; align-items: center; gap: 10px; justify-content: center; color: var(--muted); font-size: 13px; }
.bg-me b { color: var(--ink); font-weight: 700; }
.bg-hand { --cw: clamp(58px, 9vw, 84px); display: flex; justify-content: center; align-items: flex-end; padding: 22px 8px 6px; min-height: calc(var(--cw) * 1.4 + 30px); }
.bg-hand .bg-card { --cw: inherit; width: var(--cw); margin-left: calc(var(--cw) * -.28); cursor: pointer; transition: transform .2s cubic-bezier(.3, 1.4, .5, 1), filter .2s, box-shadow .2s; }
.bg-hand .bg-card:first-child { margin-left: 0; }
.bg-hand .bg-card.is-playable { transform: translateY(-10px); }
.bg-hand .bg-card.is-playable:hover, .bg-hand .bg-card.is-playable:focus-visible { transform: translateY(-22px) rotate(-2deg); z-index: 2; box-shadow: inset 0 0 0 3px #fbf3e0, 0 0 0 2px #ffcf7a, 0 0 24px rgba(255, 200, 110, .6); outline: none; }
.bg-hand .bg-card.is-selected { transform: translateY(-28px); z-index: 3; box-shadow: inset 0 0 0 3px #fbf3e0, 0 0 0 3px #ffcf7a, 0 0 28px rgba(255, 200, 110, .8); }
.bg-hand .bg-card.is-dim { filter: brightness(.72) saturate(.7); }
.bg-hand .bg-card.is-dealt { animation: bgDeal .5s cubic-bezier(.2, .8, .2, 1) both; }
.bg-hand .bg-card.is-wait { pointer-events: none; }
@keyframes bgDeal { from { opacity: 0; transform: translateY(-120px) rotate(10deg); } }
@media (max-width: 640px) {
    .bg-felt { grid-template-columns: 1fr auto; grid-template-rows: auto auto; gap: 8px; padding: 12px; min-height: 0; }
    .bg-deck { grid-row: 1; grid-column: 2; width: 74px; height: 92px; }
    .bg-deck .bg-card.is-trumpcard, .bg-deck__stack .bg-back { --cw: 48px; }
    .bg-discard { grid-row: 1; grid-column: 1; justify-self: start; width: 64px; height: 84px; }
    .bg-discard .bg-back { --cw: 40px; }
    .bg-pairs { grid-column: 1 / -1; grid-row: 2; min-height: 110px; gap: 8px 12px; }
    .bg-pairs .bg-card { --cw: 52px; }
    .bg-pair > .bg-card.is-cover { translate: 12px 16px; }
    .bg-opp { min-width: 78px; padding: 8px; }
    .bg-hand { --cw: min(calc((100vw - 60px) / (var(--n) * .72 + .28)), 70px); }
}

/* ── Тропа Граней ── */
.bg-walk__grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 14px; align-items: start; }
.bg-board-wrap { position: relative; border-radius: 22px; overflow: hidden; border: 2px solid rgba(201, 150, 70, .5); background: #0c0910;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .5), inset 0 0 40px rgba(0, 0, 0, .6); }
.bg-board { display: block; width: 100%; height: auto; }
.bg-sector__name { font: 800 17px 'Playfair Display', Georgia, serif; fill: #ffe2a8; paint-order: stroke; stroke: rgba(0, 0, 0, .75); stroke-width: 4px; }
.bg-path { fill: none; stroke: rgba(255, 220, 150, .35); stroke-width: 10; stroke-linecap: round; stroke-linejoin: round; }
.bg-path__glow { fill: none; stroke: rgba(255, 200, 110, .55); stroke-width: 2.5; stroke-dasharray: 6 10; stroke-linecap: round; animation: bgFlow 2.4s linear infinite; }
@keyframes bgFlow { to { stroke-dashoffset: -32; } }
.bg-portal { fill: none; stroke: #b48cff; stroke-width: 2.5; stroke-dasharray: 3 7; opacity: .75; filter: drop-shadow(0 0 4px #b48cff); animation: bgFlow 1.6s linear infinite; }
.bg-portal.is-back { stroke: #ff7f9f; filter: drop-shadow(0 0 4px #ff7f9f); }
.bg-cell circle { fill: rgba(14, 10, 18, .88); stroke: var(--cc); stroke-width: 3; filter: drop-shadow(0 0 6px var(--cc)); }
.bg-cell.is-plain circle { stroke-width: 1.5; filter: none; fill: rgba(14, 10, 18, .72); }
.bg-cell.is-start circle, .bg-cell.is-finish circle { stroke-width: 4; fill: rgba(40, 26, 12, .92); }
.bg-cell.is-finish circle { animation: bgFinish 2.4s ease-in-out infinite; }
@keyframes bgFinish { 50% { stroke-width: 6; filter: drop-shadow(0 0 14px var(--cc)); } }
.bg-cell text { text-anchor: middle; dominant-baseline: middle; pointer-events: none; }
.bg-cell__ico { font-size: 20px; fill: #fff6e0; }
.bg-cell.is-finish .bg-cell__ico, .bg-cell.is-start .bg-cell__ico { font-size: 26px; }
.bg-cell__no { font: 700 13px system-ui, sans-serif; fill: rgba(240, 230, 210, .55); }
.bg-cell__val { font: 800 11px system-ui, sans-serif; fill: #fff; paint-order: stroke; stroke: #000; stroke-width: 3px; }
.bg-token { transition: transform .22s cubic-bezier(.3, 1.4, .5, 1); }
.bg-token circle { stroke: #fff; stroke-width: 2.5; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .7)); }
.bg-token text { text-anchor: middle; font: 800 14px system-ui, sans-serif; fill: #1a1208; pointer-events: none; }
.bg-token.is-turn circle { stroke: #ffe08a; stroke-width: 3.5; animation: bgTurn 1.4s ease-in-out infinite; }
@keyframes bgTurn { 50% { filter: drop-shadow(0 0 10px #ffe08a); } }
.bg-event { position: absolute; left: 50%; top: 50%; translate: -50% -50%; z-index: 4; width: min(360px, 84%); padding: 18px 20px; border-radius: 18px; text-align: center;
    background: linear-gradient(170deg, rgba(40, 26, 14, .96), rgba(14, 10, 8, .96)); border: 1px solid rgba(255, 207, 122, .6);
    box-shadow: 0 0 40px rgba(255, 190, 106, .35), 0 20px 50px rgba(0, 0, 0, .6); animation: bgEventIn .5s cubic-bezier(.2, .8, .2, 1) both; transition: opacity .6s, transform .6s; }
.bg-event span { font-size: 11.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.bg-event p { margin: 8px 0 0; font: 700 17px/1.35 'Playfair Display', Georgia, serif; color: #fff1d6; }
.bg-event.is-gone { opacity: 0; transform: scale(.94); pointer-events: none; }
@keyframes bgEventIn { from { opacity: 0; transform: scale(.7) rotate(-4deg); } }
.bg-walk__side { display: grid; gap: 12px; }
.bg-walkers { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.bg-walkers li { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 4px 10px; padding: 8px 10px; border-radius: 14px;
    border: 1px solid rgba(255, 207, 122, .12); background: rgba(16, 12, 10, .7); }
.bg-walkers li.is-turn { border-color: rgba(255, 207, 122, .6); box-shadow: 0 0 16px rgba(255, 190, 106, .22); }
.bg-walkers li.is-me b { color: var(--gold); }
.bg-walkers li > i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font-style: normal; font-weight: 800; color: #1a1208; box-shadow: 0 0 0 2px #fff; }
.bg-walkers b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bg-walkers b small { font-size: 10px; padding: 0 5px; border-radius: 5px; background: #5b3fa8; color: #e9dcff; }
.bg-walkers__pos { font-weight: 800; font-size: 18px; color: var(--gold); }
.bg-walkers__pos small { font-size: 11px; color: var(--muted); font-weight: 600; }
.bg-walkers__items { grid-column: 2 / -1; display: flex; gap: 4px; font-size: 16px; min-height: 0; }
.bg-walkers__items:empty { display: none; }
.bg-walkers__eff { grid-column: 2 / -1; display: flex; gap: 4px; flex-wrap: wrap; }
.bg-walkers__eff em { font-style: normal; font-size: 10.5px; font-weight: 700; padding: 1px 7px; border-radius: 99px; background: rgba(110, 220, 150, .2); color: #bff3cf; }
.bg-walkers__eff em.is-slow, .bg-walkers__eff em.is-chains, .bg-walkers__eff em.is-sleep { background: rgba(200, 60, 70, .3); color: #ffd0d0; }
.bg-controls { display: grid; gap: 10px; }
.bg-roll { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 14px; font-size: 17px; }
.bg-roll.is-rolling .bg-die { animation: bgRoll .5s linear infinite; }
.bg-items { display: grid; gap: 6px; }
.bg-items > small, .bg-pick > small { font-size: 12px; color: var(--muted); }
.bg-item { appearance: none; display: grid; grid-template-columns: 30px 1fr; gap: 0 8px; align-items: center; text-align: left; padding: 8px 10px; border-radius: 12px; cursor: pointer;
    color: var(--ink); border: 1px solid rgba(95, 212, 255, .3); background: rgba(14, 26, 36, .7); transition: border-color .2s, box-shadow .2s; }
.bg-item:hover { border-color: rgba(95, 212, 255, .7); box-shadow: 0 0 14px rgba(95, 212, 255, .25); }
.bg-item span { grid-row: span 2; font-size: 22px; }
.bg-item b { font-size: 13.5px; } .bg-item small { font-size: 11.5px; color: var(--muted); }
.bg-pick { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.bg-pick > small { flex-basis: 100%; }
.bg-dice { display: flex; gap: 6px; }
.bg-die { --s: 34px; position: relative; display: inline-grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); width: var(--s); height: var(--s); padding: 5px;
    border-radius: 9px; background: linear-gradient(145deg, #fffaf0, #e9d6ad); box-shadow: inset 0 -3px 0 rgba(150, 110, 50, .45), 0 4px 10px rgba(0, 0, 0, .45); border: 0; cursor: default; }
button.bg-die { cursor: pointer; }
button.bg-die:hover { box-shadow: inset 0 -3px 0 rgba(150, 110, 50, .45), 0 0 0 2px #ffcf7a, 0 0 14px rgba(255, 200, 110, .6); }
.bg-die i { width: 70%; aspect-ratio: 1; margin: auto; border-radius: 50%; background: #2a1d12; }
.bg-die.is-1 i { grid-area: 2 / 2; }
.bg-die.is-2 i:nth-child(1) { grid-area: 1 / 1; } .bg-die.is-2 i:nth-child(2) { grid-area: 3 / 3; }
.bg-die.is-3 i:nth-child(1) { grid-area: 1 / 1; } .bg-die.is-3 i:nth-child(2) { grid-area: 2 / 2; } .bg-die.is-3 i:nth-child(3) { grid-area: 3 / 3; }
.bg-die.is-4 i:nth-child(1) { grid-area: 1 / 1; } .bg-die.is-4 i:nth-child(2) { grid-area: 1 / 3; } .bg-die.is-4 i:nth-child(3) { grid-area: 3 / 1; } .bg-die.is-4 i:nth-child(4) { grid-area: 3 / 3; }
.bg-die.is-5 i:nth-child(1) { grid-area: 1 / 1; } .bg-die.is-5 i:nth-child(2) { grid-area: 1 / 3; } .bg-die.is-5 i:nth-child(3) { grid-area: 2 / 2; } .bg-die.is-5 i:nth-child(4) { grid-area: 3 / 1; } .bg-die.is-5 i:nth-child(5) { grid-area: 3 / 3; }
.bg-die.is-6 i:nth-child(odd) { grid-column: 1; } .bg-die.is-6 i:nth-child(even) { grid-column: 3; }
.bg-die.is-rolling { animation: bgRoll .6s cubic-bezier(.2, .8, .3, 1) both; }
@keyframes bgRoll { 0% { transform: rotate(0) scale(.6); } 60% { transform: rotate(540deg) scale(1.15); } 100% { transform: rotate(720deg) scale(1); } }
@media (max-width: 900px) { .bg-walk__grid { grid-template-columns: 1fr; } .bg-walkers { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .bg-path__glow, .bg-portal, .bg-cell.is-finish circle, .bg-token.is-turn circle { animation: none; } }
/* Козырь виден из-под колоды; карты на столе крупнее на широком экране. */
.bg-deck { width: 128px; }
.bg-deck__stack { translate: -16px 0; z-index: 1; }
.bg-deck .bg-card.is-trumpcard { translate: 26px 0; z-index: 0; }
@media (min-width: 641px) { .bg-pairs .bg-card { --cw: 84px; } .bg-felt { min-height: 230px; } }
/* Узкое поле: подписи миров и номера клеток читаемые. */
.bg-board.is-mobile .bg-sector__name { font-size: 15px; }
@media (max-width: 640px) {
    .bg-room { gap: 8px; }
    .bg-me { display: none; }
    .bg-opps { gap: 6px; flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; scrollbar-width: none; }
    .bg-opp { grid-template-columns: auto 1fr; justify-items: start; text-align: left; gap: 0 8px; min-width: 0; flex: 1 0 auto; padding: 6px 10px; }
    .bg-opp .bg-ava { grid-row: span 3; width: 30px; height: 30px; font-size: 13px; }
    .bg-opp .bg-opp__fan { display: none; }
    .bg-opp em { justify-self: start; }
    .bg-hand { padding-top: 14px; min-height: 0; }
    .bg-status { font-size: 14px; }
}
@media (max-width: 900px) { .bg-walk__side { order: -1; } .bg-walk__side .bg-log li:nth-child(n+3) { display: none; } }

/* ─── GRANI TABLETOP ARTWORK / большой игровой атлас, 23.10.2026 ─── */
.bg-room {
  --gold:#f7cd83; --ink:#f5eddd; --muted:#c0b2a4; --felt1:#2b1642;--felt2:#100b20;
  isolation:isolate; padding:clamp(10px,1.5vw,22px);border-radius:24px;
  border:1px solid rgba(240,188,120,.24);
  background:radial-gradient(ellipse at 55% 0%,rgba(118,55,174,.24),transparent 56%),
   radial-gradient(ellipse at 10% 75%,rgba(62,43,116,.24),transparent 46%),
   linear-gradient(155deg,#171122 0%,#0c0917 78%);
  box-shadow:0 24px 65px rgba(0,0,0,.46),inset 0 1px 0 rgba(255,225,185,.12);
}
.bg-room .bg-bar { border-color:rgba(255,211,148,.28);background:linear-gradient(150deg,rgba(60,37,72,.82),rgba(21,14,33,.92));box-shadow:inset 0 1px rgba(255,232,191,.1); }
.bg-room .bg-btn { font-family:'Golos Text',system-ui,sans-serif;font-weight:700;min-height:42px; }
.bg-durak .bg-felt {
 min-height:clamp(260px,29vw,430px);border-radius:29px;
 border:5px solid #a77535;
 background:
   radial-gradient(ellipse at 50% 55%,rgba(32,13,54,.91) 13%,rgba(20,12,42,.91) 61%,rgba(13,9,22,.78)),
   url('/boardgames/assets/hall.webp') center 50% / cover no-repeat,#191127;
 box-shadow:inset 0 0 0 2px #e3bb73,inset 0 0 0 9px rgba(15,9,23,.85),
  inset 0 0 65px #120a25,0 24px 65px rgba(0,0,0,.66),0 0 30px rgba(107,57,143,.13);
}
.bg-durak .bg-felt::before {
 content:'';position:absolute;inset:17px;border:1px solid rgba(249,208,144,.34);
 border-radius:19px;pointer-events:none;background:
 radial-gradient(circle at center,transparent 0 26%,rgba(245,197,105,.11) 26.2%,transparent 26.5%),
 repeating-conic-gradient(from 22.5deg at center,transparent 0 41deg,rgba(244,201,132,.025) 42deg 44deg);
}
.bg-durak .bg-felt::after {
 content:'✧';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
 color:rgba(252,201,134,.11);font:140px Georgia,serif;pointer-events:none;text-shadow:0 0 50px rgba(172,103,234,.42);
}
.bg-durak .bg-felt > *{z-index:1}
.bg-durak .bg-opps {gap:12px}
.bg-durak .bg-opp {
 border:1px solid rgba(243,198,128,.27);background:linear-gradient(155deg,rgba(59,35,73,.75),rgba(17,12,27,.94));
 box-shadow:0 6px 25px rgba(0,0,0,.25),inset 0 1px rgba(255,255,255,.06)
}
.bg-durak .bg-opp.is-active{border-color:#e5af65;box-shadow:0 0 0 1px rgba(255,219,152,.36),0 0 24px rgba(178,109,245,.3)}
.bg-durak .bg-status{padding:10px 15px;border-radius:13px;background:linear-gradient(90deg,transparent,rgba(92,46,106,.34),transparent)}
.bg-durak .bg-card {background:radial-gradient(ellipse at 25% 12%,#fffefa,#f5e8cd 59%,#e7d3a9 100%)}
.bg-durak .bg-back{
 border-color:#edc985;
 background:
  radial-gradient(circle at center,rgba(255,224,167,.5) 0 1px,transparent 2px 100%),
  repeating-conic-gradient(from 0deg,rgba(255,203,131,.11) 0 11deg,transparent 13deg 24deg),
  radial-gradient(circle at center,#3c1d5d,#130d27 78%);
}
.bg-durak .bg-back i{background:linear-gradient(180deg,#fce5b2,#bb813a);filter:drop-shadow(0 0 4px rgba(238,188,117,.55))}
.bg-durak .bg-pairs .bg-card{--cw:clamp(58px,7vw,88px)}
.bg-durak .bg-hand .bg-card{filter:drop-shadow(0 9px 9px rgba(0,0,0,.3))}
.bg-durak .bg-hand .bg-card.is-playable:hover{filter:drop-shadow(0 10px 15px rgba(233,179,245,.45))}
.bg-map-column{position:relative;min-width:0;display:flex;flex-direction:column;gap:0;border-radius:23px;overflow:hidden;box-shadow:0 16px 45px rgba(0,0,0,.35)}
.bg-map-top{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:13px 19px;border:1px solid rgba(246,204,142,.3);border-bottom:0;background:linear-gradient(90deg,#2a173d,#151024);color:#f8e4b6}
.bg-map-top strong{display:block;font:800 clamp(16px,1.8vw,23px) Georgia,serif}
.bg-map-top small{display:block;margin-top:3px;color:#cabba9;font:500 11px/1.35 system-ui,sans-serif}
.bg-map-expand{flex:none;border:1px solid rgba(243,203,130,.5);background:rgba(255,221,172,.08);color:#ffe0a8;border-radius:11px;padding:10px 13px;cursor:pointer;font:700 12px system-ui,sans-serif}
.bg-map-expand:hover,.bg-map-expand:focus-visible{background:rgba(238,184,114,.2);outline:2px solid rgba(255,226,150,.45);outline-offset:2px}
.bg-board-wrap{border:3px solid #aa713b;border-top:1px solid #b48554;min-height:350px;overflow:auto;overscroll-behavior:contain;background:radial-gradient(ellipse at center,#372357,#080715 75%)}
.bg-board{display:block;width:100%;height:auto;min-width:0}
.bg-board-wrap:focus-within{outline:2px solid #eccc8f}
.bg-board--illustrated .bg-path {stroke:rgba(14,10,27,.9);stroke-width:27;filter:drop-shadow(0 3px 5px #030208)}
.bg-board--illustrated .bg-path__glow {stroke:url(#bgGoldTrack);stroke-width:14;stroke-dasharray:none;animation:none;opacity:.91}
.bg-world-island__caption{font:800 25px Georgia,serif;letter-spacing:.07em;fill:#ffe8bc;paint-order:stroke;stroke:#140b1c;stroke-width:6px;filter:drop-shadow(0 2px 9px #000)}
.bg-map-ornaments{stroke:#f5c57c;stroke-width:2px;fill:none;opacity:.32}
.bg-map-ornaments .bg-map-ornaments__rune{font:110px Georgia,serif;text-anchor:middle;dominant-baseline:middle;fill:#ffdca2;stroke:none}
.bg-map-ornaments__start,.bg-map-ornaments__finish{font:800 20px Georgia,serif;fill:#ffe3ab;stroke:#0c0719;stroke-width:5px;paint-order:stroke;opacity:1}
.bg-board--illustrated .bg-cell .bg-cell__halo{fill:rgba(16,12,33,.68);stroke:#ffe7bc;stroke-width:2;filter:drop-shadow(0 0 7px var(--cc));opacity:.95}
.bg-board--illustrated .bg-cell .bg-cell__disc{fill:radial-gradient(circle,#332048,#100a25);stroke:var(--cc);stroke-width:3;filter:drop-shadow(0 1px 6px #000)}
.bg-board--illustrated .bg-cell.is-plain .bg-cell__halo{stroke:#c3a878;opacity:.5;filter:none}
.bg-board--illustrated .bg-cell.is-plain .bg-cell__disc{fill:rgba(27,16,46,.82);stroke:#cfad78;stroke-width:2}
.bg-board--illustrated .bg-cell.is-choice .bg-cell__halo,.bg-board--illustrated .bg-cell.is-crystal .bg-cell__halo{animation:bgMapPulse 2.8s ease-in-out infinite;stroke:#fff2a2}
.bg-board--illustrated .bg-cell text{filter:drop-shadow(0 1px 4px #000)}
.bg-board--illustrated .bg-token{filter:url(#bgTokenShade)}
.bg-board--illustrated .bg-token circle{stroke:#fff3cc;stroke-width:3}
.bg-board--illustrated .bg-token.is-turn circle{stroke:#ffeb9d}
@keyframes bgMapPulse{50%{stroke-width:6;opacity:.86;filter:drop-shadow(0 0 18px var(--cc))}}
.bg-map-hint{margin:0;padding:8px 12px;background:#140e25;color:#bfb0ca;font:500 11px system-ui,sans-serif;text-align:center;border:1px solid rgba(219,174,108,.16);border-top:0}
.bg-walk__grid{grid-template-columns:minmax(0,1fr) minmax(260px,290px);align-items:start;gap:18px}
.bg-walk__side{gap:15px}
.bg-walkers li{grid-template-columns:30px minmax(0,1fr) auto auto;border-color:rgba(203,153,212,.2);background:linear-gradient(135deg,rgba(58,33,73,.82),rgba(16,12,28,.94));}
.bg-walkers__shards{color:#ddbcff;font-weight:800;font-size:12px;white-space:nowrap}
.bg-walkers__items,.bg-walkers__eff{grid-column:2/-1}
.bg-controls{background:linear-gradient(165deg,rgba(53,30,75,.78),rgba(15,11,28,.92));border:1px solid rgba(214,174,236,.25);padding:13px;border-radius:18px}
.bg-fate{display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap;white-space:normal;color:#f4d8ff;border-color:rgba(194,144,249,.6);background:rgba(94,37,145,.35)}
.bg-fate small{display:block;flex-basis:100%;font:500 11px/1.35 system-ui,sans-serif;color:#d5bddb}
.bg-fate-charged{margin:0;padding:9px;border:1px solid rgba(176,132,255,.38);border-radius:12px;color:#e8cdff;font-size:13px;text-align:center}
.bg-choice-panel{display:grid;gap:8px;padding:8px;background:radial-gradient(ellipse at 20% 0%,rgba(185,126,253,.18),transparent 90%);border-radius:15px}
.bg-choice-panel__kicker{font:800 10px system-ui,sans-serif;letter-spacing:.18em;color:#c3a1f0}
.bg-choice-panel h3{margin:0;color:#ffe5ad;font:800 23px Georgia,serif}
.bg-choice-panel p{margin:0 0 7px;color:#ddd2e5;line-height:1.45;font-size:13px}
.bg-choice-panel .bg-btn{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;width:100%;gap:8px;min-height:48px;text-align:left}
.bg-choice-panel .bg-btn small{font:600 11px system-ui,sans-serif;opacity:.85}
.bg-choice-panel .bg-btn:disabled{opacity:.44}
.bg-map-column.is-expanded{position:fixed;inset:10px;z-index:500;max-width:none;border-radius:20px;background:#130e21;box-shadow:0 0 0 150vmax rgba(0,0,0,.87),0 20px 65px #000}
.bg-map-column.is-expanded .bg-board-wrap{flex:1;min-height:0}
.bg-map-column.is-expanded .bg-board{width:auto;min-width:min(100%,1320px);height:100%;max-width:none;margin:auto}
.bg-room:has(.bg-map-column.is-expanded){z-index:600}
@media (max-width:900px) {
  .bg-walk__grid{grid-template-columns:minmax(0,1fr)}
  .bg-walk__side{order:-1}
  .bg-walk__side .bg-controls{order:-1}
  .bg-board-wrap{height:min(68svh,610px);min-height:365px;overflow:auto}
  .bg-board{width:1100px;max-width:none;min-width:1100px}
  .bg-map-column.is-expanded{inset:8px 4px 8px 4px}
  .bg-map-column.is-expanded .bg-board{height:auto;width:1250px;max-width:none;min-width:1250px}
  .bg-durak .bg-felt{min-height:225px;border-width:3px}
  .bg-durak .bg-felt::after{font-size:75px}
}
@media (max-width:540px) {
 .bg-map-top{padding:10px 12px}
 .bg-map-top strong{font-size:17px}
 .bg-map-top small{font-size:10px}
 .bg-map-expand{padding:9px 10px;font-size:11px}
 .bg-walkers li{grid-template-columns:26px minmax(0,1fr) auto auto;padding:7px}
 .bg-map-column.is-expanded{inset:4px}
 .bg-durak .bg-felt{padding:13px 8px}
}
@media(prefers-reduced-motion:reduce){.bg-board--illustrated .bg-cell.is-choice .bg-cell__halo,.bg-board--illustrated .bg-cell.is-crystal .bg-cell__halo{animation:none}}