:root{
  --bg:#0b1018; --bg2:#141c2b; --panel:#182236; --line:#243146;
  --ink:#e8eefc; --dim:#8ea0bf; --acc:#39d98a; --warn:#ff6b6b; --gold:#f5c451;
  --radius:10px;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%}
body{
  margin:0; background:radial-gradient(1200px 820px at 70% -10%,#1b2740,#080c14 62%);
  color:var(--ink); font:14px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,sans-serif;
  overflow:hidden; -webkit-font-smoothing:antialiased;
}
button{font:inherit; cursor:pointer; border:0; border-radius:9px}
button:disabled{opacity:.4; cursor:not-allowed}
select,input{font:inherit; color:var(--ink); background:var(--panel); border:1px solid var(--line);
  border-radius:10px; padding:8px 11px; outline:none;
  transition:border-color .18s, box-shadow .18s, background-color .18s}
input:focus{border-color:var(--acc); box-shadow:0 0 0 3px rgba(57,217,138,.16)}
/* Селекты не оставляем в дефолтном виде: убираем системную стрелку и рисуем
   свой шеврон, добавляем ховер, фокус-кольцо и лёгкое нажатие. */
select{
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
  padding:8px 34px 8px 12px; cursor:pointer;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="8" viewBox="0 0 12 8"><path fill="none" stroke="%238ea0bf" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" d="M1 1.5 6 6.5 11 1.5"/></svg>');
  background-repeat:no-repeat; background-position:right 12px center;
}
select:hover{border-color:#33445f; background-color:#1d2942}
select:focus{border-color:var(--acc); box-shadow:0 0 0 3px rgba(57,217,138,.16);
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="8" viewBox="0 0 12 8"><path fill="none" stroke="%2339d98a" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" d="M1 1.5 6 6.5 11 1.5"/></svg>')}
select:active{transform:translateY(1px)}
select:disabled{opacity:.5; cursor:not-allowed}
/* список вариантов: тёмный фон вместо системного белого (где браузер разрешает) */
select option{background:#152036; color:var(--ink)}
select option:checked{background:#223050}
.muted{opacity:.5}
svg{display:block}

/* ================= экран настройки ================= */
.screen{height:100vh; width:100vw}
#setup{display:flex; align-items:center; justify-content:center; padding:20px; overflow:auto;
  transition:opacity .25s, transform .25s}
#setup.fade-out{opacity:0; transform:scale(.97)}
.setup-box{width:min(600px,100%); background:linear-gradient(180deg,#182236,#111827);
  border:1px solid var(--line); border-radius:20px; padding:26px 28px;
  box-shadow:0 40px 100px rgba(0,0,0,.65); animation:boxIn .4s cubic-bezier(.2,1.1,.3,1) both}
@keyframes boxIn{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:none}}
.setup-head{display:flex; gap:18px; align-items:center; margin-bottom:20px}
.setup-mascot{width:104px; flex:none; filter:drop-shadow(0 10px 20px rgba(0,0,0,.5))}
.setup-mascot svg{width:100%; height:auto; display:block}
.logo{display:flex; align-items:center; gap:12px; margin:0; font-size:36px;
  letter-spacing:2px; font-weight:900; line-height:1}
.logo .mark{width:48px; height:48px; font-size:27px}

/* Знак: красная лента по диагонали с белой «M» — то же, что в центре доски
   и на вкладке браузера. */
.mark{position:relative; flex:none; display:grid; place-items:center;
  border-radius:24%; background:linear-gradient(180deg,#1b2942,#0e1729); overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.mark::before{content:''; position:absolute; left:-20%; right:-20%; top:34%; height:32%;
  background:linear-gradient(180deg,#f0564e,#c9332c); transform:rotate(-18deg);
  box-shadow:0 2px 6px rgba(0,0,0,.4)}
.mark i{position:relative; font-style:normal; font-weight:700; color:#fff;
  font-family:Georgia,'Times New Roman',serif; transform:rotate(-18deg); line-height:1}
/* вторая половина названия остаётся акцентной */
.brand-txt em{font-style:normal; color:var(--acc)}
.sub{margin:8px 0 0; color:var(--dim); font-size:13px}
.row{display:flex; align-items:center; justify-content:space-between; margin:12px 0; gap:12px}
.row label{color:var(--dim)}
.row select{min-width:190px; text-align:left}
.counter{display:flex; align-items:center; gap:10px}
.counter button{width:34px; height:34px; background:var(--panel); color:var(--ink);
  border:1px solid var(--line); font-size:18px; transition:background .15s,transform .1s}
.counter button:hover{background:#223050}
.counter button:active{transform:scale(.92)}
.counter span{width:26px; text-align:center; font-weight:800}
.slots{display:flex; flex-direction:column; gap:8px; margin:14px 0 18px}
.slot{display:grid; grid-template-columns:30px 1fr 116px 132px; gap:9px; align-items:center;
  animation:slotIn .3s ease-out both}
@keyframes slotIn{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}
.slot-token{width:24px; height:24px; border-radius:50%; background:var(--c);
  box-shadow:inset 0 -24% 24% -12% rgba(0,0,0,.4), inset 0 20% 20% -14% rgba(255,255,255,.6),
             0 0 0 2px rgba(255,255,255,.14)}
.dot{width:14px; height:14px; border-radius:50%}
.primary{background:linear-gradient(180deg,#4ae59b,#2fbf7c); color:#04241a; font-weight:800;
  padding:11px 18px; box-shadow:0 4px 0 #1c8a58, 0 8px 18px rgba(47,191,124,.25);
  transition:transform .1s, box-shadow .1s, filter .15s}
.primary:hover:not(:disabled){filter:brightness(1.07)}
/* выключенная кнопка должна выглядеть выключенной, а не просто не нажиматься */
.primary:disabled{filter:grayscale(.55) brightness(.8); box-shadow:none}
.primary:active:not(:disabled){transform:translateY(3px); box-shadow:0 1px 0 #1c8a58}
.big{width:100%; padding:15px; font-size:16px; margin-top:8px}
.ghost{background:var(--panel); color:var(--ink); border:1px solid var(--line); padding:9px 13px;
  transition:background .15s, transform .1s}
.ghost:hover:not(:disabled){background:#223050}
.ghost:active:not(:disabled){transform:translateY(1px)}

/* ================= макет игры ================= */
#game{display:grid; grid-template-columns:clamp(180px,15vw,240px) 1fr clamp(260px,22vw,330px);
  gap:12px; padding:10px}
.board-wrap{display:flex; align-items:center; justify-content:center; position:relative;
  min-width:0; perspective:1400px}

.board{
  width:min(calc(100vh - 86px), 100%); aspect-ratio:1/1; position:relative;
  display:grid;
  grid-template-columns:2.1fr repeat(9,1fr) 2.1fr;
  grid-template-rows:2.1fr repeat(9,1fr) 2.1fr;
  --tab:clamp(12px,1.45vw,21px);
  background:#0d1422; border:1px solid #1e2a3e; border-radius:18px; gap:3px;
  padding:calc(var(--tab) + 9px);
  box-shadow:0 30px 90px rgba(0,0,0,.55);
  animation:boardIn .5s cubic-bezier(.2,1.05,.3,1) both;
}
@keyframes boardIn{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}

/* ---------- центр ---------- */
.center{grid-area:2/2/11/11; position:relative; border-radius:12px; overflow:hidden;
  background:#0f1726}
.center-art{position:absolute; inset:0; pointer-events:none}
.banner{position:absolute; left:-12%; right:-12%; transform:rotate(-16deg);
  background:#e2483f; padding:1.7% 0; text-align:center; top:19%;
  animation:bannerIn .7s cubic-bezier(.2,1.1,.3,1) both .15s}
@keyframes bannerIn{from{opacity:0;transform:rotate(-16deg) scaleX(.7)}
  to{opacity:1;transform:rotate(-16deg) scaleX(1)}}
.banner span{font-weight:800; letter-spacing:.26em; color:#fff;
  font-size:clamp(11px,2.2vw,32px)}

.center-ui{position:absolute; left:5%; right:5%; top:34%; bottom:6%; z-index:2;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:10px; text-align:center}
.center-ui::before{content:none}
.pot{color:var(--gold); font-size:13px; min-height:18px}
.pot-in{display:inline-flex; align-items:center; gap:6px; animation:potIn .3s ease-out}
.pot-in svg{width:15px;height:15px}
@keyframes potIn{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:none}}
.turnline{font-size:15px; color:var(--dim); min-height:22px}
.tl{display:inline-flex; align-items:center; gap:8px}
.tl-tok{width:13px; height:13px; border-radius:50%; background:var(--c);
  box-shadow:0 0 0 2px rgba(255,255,255,.2), 0 0 12px var(--c)}
.turnline b{text-shadow:0 0 14px currentColor}
.turnline.swap .tl{animation:tlIn .34s cubic-bezier(.2,1.2,.3,1)}
@keyframes tlIn{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}

/* ---------- кубики ---------- */
.dice{--d:clamp(40px,4.4vw,66px);
  display:flex; gap:clamp(14px,1.6vw,24px); min-height:calc(var(--d) * 1.3);
  align-items:center; justify-content:center; perspective:720px; perspective-origin:50% 40%}
.die-slot{position:relative; width:var(--d); height:var(--d); transform-style:preserve-3d}
.die-wrap{position:absolute; inset:0; transform-style:preserve-3d}
.die3d{position:absolute; inset:0; transform-style:preserve-3d; will-change:transform}
/* Скругление у граней оставляем крошечным: при большом радиусе по краям
   кубика проступают щели между соседними гранями — те самые лишние линии. */
.face{position:absolute; inset:0; border-radius:5%;
  background:linear-gradient(148deg,#ffffff 0%,#eef2f9 45%,#cfd8e8 100%);
  display:grid; grid-template:repeat(3,1fr)/repeat(3,1fr); padding:13%; gap:4%;
  backface-visibility:hidden;
  box-shadow:inset 0 0 0 1px rgba(20,30,50,.16), inset 0 4px 8px rgba(255,255,255,.95),
             inset 0 -5px 10px rgba(90,110,140,.22)}
.face i{width:80%; aspect-ratio:1; align-self:center; justify-self:center; border-radius:50%;
  background:radial-gradient(circle at 34% 28%,#4a5870,#0e1723);
  box-shadow:inset 0 -1px 2px rgba(255,255,255,.3), 0 1px 1px rgba(255,255,255,.5)}
.f1{transform:translateZ(calc(var(--d) / 2))}
.f6{transform:rotateY(180deg) translateZ(calc(var(--d) / 2))}
.f2{transform:rotateY(90deg)  translateZ(calc(var(--d) / 2))}
.f5{transform:rotateY(-90deg) translateZ(calc(var(--d) / 2))}
.f3{transform:rotateX(90deg)  translateZ(calc(var(--d) / 2))}
.f4{transform:rotateX(-90deg) translateZ(calc(var(--d) / 2))}
.die-shadow{position:absolute; left:10%; right:10%; bottom:-14%; height:16%; border-radius:50%;
  background:rgba(0,0,0,.65); filter:blur(5px); z-index:-1}

@keyframes toss{
  0%  {transform:translate3d(var(--tx),-150%,0) scale(.72)}
  50% {transform:translate3d(calc(var(--tx) * .35),4%,0) scale(1.06)}
  66% {transform:translate3d(0,-34%,0) scale(.97)}
  82% {transform:translate3d(0,3%,0) scale(1.03)}
  92% {transform:translate3d(0,-9%,0) scale(.99)}
  100%{transform:none}}
@keyframes tossShadow{
  0%  {opacity:.05; transform:scale(.45)}
  50% {opacity:.65; transform:scale(1.08)}
  66% {opacity:.3;  transform:scale(.75)}
  100%{opacity:.55; transform:scale(1)}}
.die-slot.tossing .die-wrap{animation:toss var(--dur,950ms) cubic-bezier(.2,.6,.3,1) var(--delay,0ms) both}
.die-slot.tossing .die-shadow{animation:tossShadow var(--dur,950ms) ease-out var(--delay,0ms) both}

/* ---------- панель действий ---------- */
.panel{display:flex; flex-wrap:wrap; gap:9px; justify-content:center; align-items:center;
  max-width:96%; min-height:42px}
.panel .hint{width:100%; color:var(--dim); font-size:13px}
.panel .hint b{color:var(--ink)}
.panel input.bid{width:120px; text-align:center; font-weight:700}
.pop{animation:btnIn .26s cubic-bezier(.2,1.3,.4,1) both}
@keyframes btnIn{from{opacity:0;transform:translateY(8px) scale(.92)}to{opacity:1;transform:none}}
.thinking i{opacity:.2; animation:blink 1.1s infinite}
.thinking i:nth-child(2){animation-delay:.18s}
.thinking i:nth-child(3){animation-delay:.36s}
@keyframes blink{0%,100%{opacity:.2}40%{opacity:1}}

/* ================= клетки ================= */
.tile{position:relative; background:#f3f6fa; border:0; border-radius:0;
  display:flex; flex-direction:column; cursor:pointer;
  box-shadow:inset 0 0 0 1px rgba(10,20,35,.14);
  transition:background .4s cubic-bezier(.4,0,.2,1), box-shadow .4s cubic-bezier(.4,0,.2,1),
             transform .28s cubic-bezier(.3,.9,.35,1.1)}
.tile:hover{transform:scale(1.05); z-index:6;
  box-shadow:inset 0 0 0 1px rgba(10,20,35,.3), 0 12px 28px rgba(0,0,0,.55)}
.tile::before{content:''; position:absolute; inset:0; background:var(--own);
  opacity:0; transition:opacity .5s cubic-bezier(.4,0,.2,1); pointer-events:none; z-index:0}
.tile.owned::before{opacity:.2}
.tile.owned{box-shadow:inset 0 0 0 1.5px var(--own), 0 2px 10px rgba(0,0,0,.3)}
/* Полоса владельца — заливка цветом игрока у ВНУТРЕННЕГО края (напротив ленты
   с ценой). Появляется при покупке. */
.own-strip{position:absolute; z-index:3; background:var(--own); border-radius:2px;
  box-shadow:0 0 8px var(--own), 0 1px 3px rgba(0,0,0,.5);
  opacity:0; transform:scale(.4); transform-origin:center;
  transition:opacity .35s cubic-bezier(.2,1.1,.3,1), transform .35s cubic-bezier(.2,1.1,.3,1)}
.tile.owned .own-strip{opacity:1; transform:none}
.tile.t-bottom .own-strip{left:10%; right:10%; top:4px; height:5px}
.tile.t-top    .own-strip{left:10%; right:10%; bottom:4px; height:5px}
.tile.t-left   .own-strip{top:10%; bottom:10%; right:4px; width:5px}
.tile.t-right  .own-strip{top:10%; bottom:10%; left:4px; width:5px}

.tile .bar{position:absolute; z-index:4; background:var(--g); border-radius:0;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  box-shadow:0 3px 10px rgba(0,0,0,.5); transition:background .4s}
.tile.t-bottom .bar{left:2%; right:2%; top:100%; margin-top:5px; height:var(--tab)}
.tile.t-top    .bar{left:2%; right:2%; bottom:100%; margin-bottom:5px; height:var(--tab)}
.tile.t-left   .bar{top:2%; bottom:2%; right:100%; margin-right:5px; width:var(--tab)}
.tile.t-right  .bar{top:2%; bottom:2%; left:100%; margin-left:5px; width:var(--tab)}
/* в полосе купленной клетки стоит аренда — отличаем её лёгким курсивом */
.tile .bar.rent .bprice{font-style:italic}
.bprice{font-size:clamp(6px,.7vw,10.5px); font-weight:700; color:#fff; white-space:nowrap;
  letter-spacing:0; line-height:1; font-variant-numeric:tabular-nums}
.tile.t-left .bprice{transform:rotate(-90deg)}
.tile.t-right .bprice{transform:rotate(90deg)}
.tile.t-bottom{flex-direction:column-reverse}
.tile .body{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:2px 3px; gap:1px; min-height:0; position:relative; z-index:1}
/* Полоса у внутреннего края клетки отдана фишкам, текст туда не заходит.
   Угловые клетки квадратные: там подпись стоит по центру, без сдвига. */
.tile.t-bottom:not(.corner) .body{padding-top:32%}
.tile.t-top:not(.corner)    .body{padding-bottom:32%}
.tile.t-left:not(.corner)   .body{padding-right:32%}
.tile.t-right:not(.corner)  .body{padding-left:32%}

.tname{font-size:clamp(6.5px,.74vw,11px); line-height:1.3; text-align:center; font-weight:700;
  letter-spacing:.04em; text-transform:uppercase; color:#3d4a5c;
  overflow-wrap:break-word; hyphens:manual; padding:0 2px;
  overflow:hidden; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;
  transition:color .3s}
.tile:hover .tname{color:#111a27}
.tile.corner .tname{font-size:clamp(8px,1vw,15px); letter-spacing:.1em; font-weight:800; color:#2a3547}
/* пустое место под картинку — небольшой пунктирный квадрат */
.tslot{width:clamp(16px,2vw,30px); height:clamp(16px,2vw,30px); flex:none; border-radius:7px;
  margin-bottom:5px; border:1px dashed rgba(20,35,60,.22); background:rgba(20,35,60,.04);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  transition:border-color .3s, transform .3s}
/* На наведении подрастает только пустой слот. У логотипа своё положение
   (сдвиг в центр, иногда поворот) — его нельзя перебивать одним scale,
   иначе знак уезжает из клетки и обрезается краем. */
.tile:hover .tslot:not(.filled){border-color:rgba(20,35,60,.4); transform:scale(1.06)}

/* Логотип занимает клетку целиком и лежит вдоль её длинной стороны:
   у верхнего и нижнего рядов клетка вытянута вниз, поэтому слот повёрнут. */
.tslot.filled{position:absolute; top:50%; left:50%; margin:0; border:0; background:none;
  width:calc(var(--tile-short, 60px) * .9); height:calc(var(--tile-long, 100px) * .9);
  transform:translate(-50%,-50%); z-index:2; pointer-events:none}
.tile.t-left .tslot.filled,
.tile.t-right .tslot.filled{width:calc(var(--tile-long, 100px) * .9);
  height:calc(var(--tile-short, 60px) * .9)}
/* вытянутую надпись кладём вдоль длинной стороны клетки */
.tile.t-bottom .tslot.filled.wide,
.tile.t-top    .tslot.filled.wide{width:calc(var(--tile-long, 100px) * .9);
  height:calc(var(--tile-short, 60px) * .9); transform:translate(-50%,-50%) rotate(-90deg)}
.tile:hover .tslot.filled{transform:translate(-50%,-50%) scale(1.05)}
.tile.t-bottom:hover .tslot.filled.wide,
.tile.t-top:hover    .tslot.filled.wide{transform:translate(-50%,-50%) rotate(-90deg) scale(1.05)}
/* max-* вместо 100%: процентная высота у центрированного элемента не считалась,
   и широкий слот на боковых клетках резал знак по горизонтали */
.tslot img{max-width:100%; max-height:100%; width:auto; height:auto; display:block}
.tslot.filled svg{width:100%; height:100%; display:block}
/* Высокий знак на высокой клетке иначе получается вдвое больше, чем на боковой:
   ограничиваем его короткой стороной — тогда на всех четырёх сторонах одинаково. */
.tile.t-top .tslot.filled.tall:not(.wide),
.tile.t-bottom .tslot.filled.tall:not(.wide){height:calc(var(--tile-short, 60px) * .9)}
/* на углах картинка крупная и вместо подписи */
.tile.corner .tslot.filled{width:82%; height:82%}
/* свои рисунки — квадратные, равняем по короткой стороне клетки */
.tslot.filled.art{width:calc(var(--tile-short, 60px) * .86);
  height:calc(var(--tile-short, 60px) * .86)}
.tile.corner .tslot.filled.art{width:82%; height:82%}
/* светлый знак на светлой клетке — тонкая обводка, иначе его просто не видно */
.tslot.light img{filter:drop-shadow(0 0 1px rgba(20,35,60,.75)) drop-shadow(0 1px 1px rgba(20,35,60,.35))}

.tile.mortgaged .bar{filter:saturate(.25); opacity:.55}
.tile.mortgaged .tslot.filled{filter:grayscale(.85); opacity:.45}
.tile.mortgaged .tname{color:#c0392b; text-decoration:line-through;
  text-decoration-thickness:1px; text-underline-offset:2px}
.tile.mortgaged::before{opacity:.07}
/* Звёзды сидят тёмной лентой вплотную к внутреннему краю карточки — так их
   видно на любом логотипе и на любом цвете группы. Лента ровно по той полосе,
   что и так отведена фишкам, поэтому логотип она не перекрывает, а размеры
   звёзд считаются от короткой стороны клетки: четыре штуки всегда влезают. */
.houses{position:absolute; z-index:4; display:flex; align-items:center; justify-content:center;
  --band:calc(var(--tile-short, 60px) * .32);
  --sz:calc(var(--tile-short, 60px) * .2);
  --hsz:calc(var(--tile-short, 60px) * .27);
  gap:calc(var(--tile-short, 60px) * .035);
  background:linear-gradient(180deg,#22314c,#0d1626);
  box-shadow:0 1px 6px rgba(0,0,0,.5), inset 0 -1px 0 rgba(255,255,255,.09)}
.tile.t-bottom .houses{left:0; right:0; top:0;    height:var(--band)}
.tile.t-top    .houses{left:0; right:0; bottom:0; height:var(--band)}
.tile.t-left   .houses{top:0; bottom:0; right:0; width:var(--band); flex-direction:column;
  background:linear-gradient(90deg,#22314c,#0d1626);
  box-shadow:0 1px 6px rgba(0,0,0,.5), inset -1px 0 0 rgba(255,255,255,.09)}
.tile.t-right  .houses{top:0; bottom:0; left:0;  width:var(--band); flex-direction:column;
  background:linear-gradient(270deg,#22314c,#0d1626);
  box-shadow:0 1px 6px rgba(0,0,0,.5), inset 1px 0 0 rgba(255,255,255,.09)}
/* Постройки — звёзды: белые за дома, золотая и покрупнее за отель. */
.hs{width:var(--sz); height:var(--sz); flex:none;
  background:linear-gradient(180deg,#fff,#cddaec);
  clip-path:polygon(50% 0%,61.8% 34.5%,98% 34.5%,68.2% 56%,79.4% 90.5%,
                    50% 69%,20.6% 90.5%,31.8% 56%,2% 34.5%,38.2% 34.5%);
  filter:drop-shadow(0 0 2px rgba(0,0,0,.85));
  animation:hsIn .34s cubic-bezier(.2,1.4,.4,1) both}
.hs.hotel{width:var(--hsz); height:var(--hsz);
  background:linear-gradient(180deg,#fff6cf,#efb01f);
  filter:drop-shadow(0 0 3px rgba(0,0,0,.85))}
.hs.mini{--sz:11px; --hsz:13px; display:inline-block; vertical-align:middle; animation:none}
@keyframes hsIn{from{opacity:0;transform:scale(0) translateY(-6px)}to{opacity:1;transform:none}}

@keyframes flashAnim{
  0%{box-shadow:inset 0 0 0 4px var(--flash), 0 0 26px var(--flash)}
  100%{box-shadow:inset 0 0 0 2px var(--own)}}
.tile.flash{animation:flashAnim .9s ease-out; z-index:5}
@keyframes pulseAnim{0%,100%{transform:none}45%{transform:scale(1.1)}}
.tile.pulse{animation:pulseAnim .7s ease-out; z-index:5}

/* ---------- фишки ---------- */
.token-layer{position:absolute; inset:0; pointer-events:none; z-index:6}
.token{position:absolute; top:0; left:0;
  transition:transform var(--move,.22s) var(--move-ease,cubic-bezier(.25,.8,.35,1)), opacity .35s;
  will-change:transform}
/* пока фишка идёт, её ведёт скрипт покадрово — переход тут только мешает */
.token.walking{transition:none}
.token.gone{opacity:0; transform:scale(.2)!important}
.tk-dot{position:absolute; inset:0; border-radius:50%; background:var(--c);
  box-shadow:inset 0 -26% 26% -12% rgba(0,0,0,.45), inset 0 22% 22% -14% rgba(255,255,255,.65),
             0 0 0 2px rgba(255,255,255,.92), 0 0 10px var(--c), 0 3px 8px rgba(0,0,0,.6);
  transition:box-shadow .35s cubic-bezier(.4,0,.2,1),
             transform .35s cubic-bezier(.3,.9,.35,1.25)}
.token.active .tk-dot{transform:scale(1.18);
  box-shadow:inset 0 -26% 26% -12% rgba(0,0,0,.45),
  inset 0 22% 22% -14% rgba(255,255,255,.7),
  0 0 0 2.5px #fff, 0 0 18px var(--c), 0 0 34px var(--c), 0 4px 12px rgba(0,0,0,.65)}
/* расходящееся кольцо — сразу видно, чей ход */
.token.active .tk-dot::after{content:''; position:absolute; inset:-20%; border-radius:50%;
  border:2px solid var(--c); animation:ringPing 1.7s cubic-bezier(.2,.6,.4,1) infinite}
@keyframes ringPing{0%{transform:scale(.8); opacity:.7}70%{opacity:0}100%{transform:scale(1.7); opacity:0}}
.tk-glow{position:absolute; inset:-38%; border-radius:50%; background:var(--c);
  opacity:0; filter:blur(9px); transition:opacity .45s}
.token.active .tk-glow{opacity:.5; animation:glowPulse 2s ease-in-out infinite}
/* своя фишка: белое кольцо, метка «ВЫ» и обводка клетки — «а где я?» */
.token.me{z-index:3}
.token.me .tk-dot{box-shadow:inset 0 -26% 26% -12% rgba(0,0,0,.45), inset 0 22% 22% -14% rgba(255,255,255,.65),
  0 0 0 2.5px #fff, 0 0 0 5px var(--c), 0 0 14px var(--c), 0 3px 8px rgba(0,0,0,.6)}
.token.me::before{content:attr(data-you); position:absolute; left:50%; bottom:100%;
  transform:translate(-50%,-4px); font-size:9px; font-weight:900; letter-spacing:.08em; line-height:1;
  padding:2px 5px; border-radius:99px; background:#fff; color:#0b1119; white-space:nowrap;
  box-shadow:0 2px 6px rgba(0,0,0,.55); pointer-events:none}
.tile.here{box-shadow:inset 0 0 0 3px var(--myc,#fff), 0 0 16px var(--myc,#fff); z-index:4}

/* ===== всплывашки по событиям ===== */
/* На компе — над журналом справа: там они ничего важного не закрывают.
   На телефоне (см. медиазапрос) — сверху по центру. */
.notes{position:fixed; top:62px; left:50%; transform:translateX(-50%); z-index:95;
  display:flex; flex-direction:column; gap:7px; width:min(92vw,560px); pointer-events:none}
.note{pointer-events:auto; cursor:pointer; background:rgba(16,24,40,.95); color:var(--ink);
  border:1px solid var(--line); border-left:4px solid #8ea0bf; border-radius:10px;
  font-size:15px; line-height:1.4; padding:11px 16px; box-shadow:0 12px 30px rgba(0,0,0,.55);
  animation:noteIn .25s cubic-bezier(.2,1.1,.3,1) both}
.note.good{border-left-color:#5fd08a}
.note.bad{border-left-color:#ff7b7b}
.note.card{border-left-color:#f5c451}
.note.sys{border-left-color:#8ea0bf}
.note.win{border-left-color:#f5c451}
.note.warn{background:#2a1c20; border-color:#6b2b2f; border-left-color:#ff7b7b; color:#ffc9c6}
.note.out{animation:noteOut .2s ease-in both}
@keyframes noteIn{from{opacity:0; transform:translateY(-8px) scale(.96)}to{opacity:1; transform:none}}
@keyframes noteOut{to{opacity:0; transform:translateY(-6px)}}
/* чужой выбор в лотерее — те же кубики, но без нажатий */
.lotto-picks.watch .lotto-die{cursor:default; pointer-events:none}
@keyframes glowPulse{0%,100%{opacity:.3}50%{opacity:.7}}


/* ================= сайдбар ================= */
.side{display:flex; flex-direction:column; gap:10px; min-height:0}
/* Карточки игроков всегда влезают в высоту экрана: они делят колонку поровну
   и ужимаются тем сильнее, чем больше игроков. Прокрутки нет, и свечение
   карточки чьего хода ничем не обрезается. */
.players-col{display:flex; flex-direction:column; gap:10px; min-height:0; overflow:visible}
.players{display:flex; flex-direction:column; gap:var(--pgap,10px); flex:1; min-height:0}
.pcard{position:relative; text-align:center; background:var(--panel);
  border:1px solid var(--line); border-radius:16px; padding:var(--ppad,14px) 12px;
  flex:1 1 0; min-height:0; display:flex; flex-direction:column; justify-content:center;
  transition:background .35s, box-shadow .35s, transform .3s}
.pcard.turn{background:linear-gradient(165deg,
    color-mix(in srgb, var(--c) 26%, #18233a), #151e30);
  box-shadow:0 0 0 1px var(--c), 0 10px 26px rgba(0,0,0,.45);
  transform:translateY(-2px)}
.pcard.dead{opacity:.34; filter:grayscale(1)}
.pava{width:var(--pava,clamp(38px,3.4vw,54px)); height:var(--pava,clamp(38px,3.4vw,54px));
  margin:0 auto var(--pgap2,9px); flex:none;
  border-radius:50%; display:grid; place-items:center; font-weight:800; overflow:hidden;
  font-size:calc(var(--pava,44px) * .42); color:#0b1119; background:var(--c);
  box-shadow:0 0 0 3px rgba(255,255,255,.1), inset 0 -20% 22% -12% rgba(0,0,0,.35),
             inset 0 18% 18% -12% rgba(255,255,255,.55); transition:box-shadow .35s}
.pava img{width:100%; height:100%; object-fit:cover; display:block}
.pcard.turn .pava{box-shadow:0 0 0 3px var(--c), 0 0 22px var(--c),
  inset 0 -20% 22% -12% rgba(0,0,0,.35), inset 0 18% 18% -12% rgba(255,255,255,.55)}
.pname{font-weight:600; font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ptags{display:flex; gap:4px; justify-content:center; min-height:14px; margin-top:3px}
.tag{font-size:9px; padding:1px 6px; border-radius:20px; background:#26344d; color:var(--dim)}
.tag.jail{background:#4a1d22; color:#ff9aa2}
.pmoney{font-weight:800; color:var(--acc); font-variant-numeric:tabular-nums;
  font-size:var(--pmoney,clamp(16px,1.5vw,22px)); margin-top:4px; letter-spacing:-.01em}
.pmeta{font-size:11px; color:var(--dim); display:flex; flex-direction:column;
  gap:5px; align-items:center; margin-top:var(--pgap2,7px)}

/* Низкий экран и много игроков: карточка становится строкой — аватар,
   имя и деньги. Так всё влезает без прокрутки и имена остаются читаемыми. */
.players-col.compact .pcard{flex-direction:row; align-items:center; gap:9px;
  text-align:left; padding:6px 10px; border-radius:12px}
.players-col.compact .pcard.turn{transform:none}
.players-col.compact .pava{width:30px; height:30px; margin:0; font-size:13px;
  box-shadow:0 0 0 2px rgba(255,255,255,.1)}
.players-col.compact .pcard.turn .pava{box-shadow:0 0 0 2px var(--c), 0 0 14px var(--c)}
.players-col.compact .pbody{flex:1; min-width:0; display:flex; flex-direction:column;
  align-items:flex-start; gap:1px}
.players-col.compact .pname{max-width:100%; font-size:12px}
.players-col.compact .pmoney{margin:0; font-size:15px; white-space:nowrap; line-height:1.15}
.players-col.compact .ptags,.players-col.compact .pmeta{display:none}
.players-col.compact .pdeal{left:auto; right:10px; bottom:auto; top:50%;
  transform:translate(6px,-50%); font-size:9px; padding:2px 7px}
.players-col.compact .pcard.deal:hover .pdeal{transform:translate(0,-50%)}
.players-col.compact .delta{top:2px}

/* чем больше игроков, тем компактнее карточка */
.players-col[data-n="5"],.players-col[data-n="6"]{--pgap:8px}
.players-col[data-n="5"] .players,.players-col[data-n="6"] .players{--ppad:10px; --pava:38px; --pgap2:6px; --pmoney:18px}
.players-col[data-n="7"],.players-col[data-n="8"]{--pgap:6px}
.players-col[data-n="7"] .players,.players-col[data-n="8"] .players{--ppad:7px; --pava:30px; --pgap2:4px; --pmoney:15px}
.players-col[data-n="7"] .pname,.players-col[data-n="8"] .pname{font-size:12px}
.players-col[data-n="7"] .pmeta,.players-col[data-n="8"] .pmeta{font-size:10px; gap:3px}
.players-col[data-n="6"] .worth,
.players-col[data-n="7"] .worth,.players-col[data-n="8"] .worth{display:none}
.players-col[data-n="6"] .pmeta{margin-top:5px}
/* в компактном режиме карточки не растягиваются на всю колонку */
.players-col.compact .players{justify-content:flex-start}
.players-col.compact .pcard{flex:0 0 auto; min-height:52px}
.players-col[data-n="8"] .ptags{min-height:0}
.chips{display:flex; gap:6px; flex-wrap:wrap; justify-content:center}
.cg{display:inline-flex; align-items:center; gap:3px}
.chip{display:inline-block; width:9px; height:9px; border-radius:2px; flex:none}
.delta{position:absolute; right:10px; top:6px; font-weight:800; font-size:13px;
  pointer-events:none; animation:floatUp 1.4s ease-out forwards; text-shadow:0 2px 8px #000}
.delta.up{color:#4ade80} .delta.down{color:#ff6b6b}
@keyframes floatUp{0%{opacity:0;transform:translateY(8px) scale(.9)}
  16%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-28px)}}

.timer{display:flex; align-items:center; gap:9px; width:min(280px,82%); margin-top:2px;
  animation:btnIn .25s ease-out both}
.timer-track{flex:1; height:4px; border-radius:2px; background:rgba(255,255,255,.09); overflow:hidden}
.timer-track i{display:block; height:100%; border-radius:2px; background:var(--acc);
  transition:width .1s linear, background .3s}
#timer-txt{font-size:11px; color:var(--dim); min-width:36px; text-align:right;
  font-variant-numeric:tabular-nums; transition:color .3s}
.timer.low .timer-track i{background:var(--warn)}
/* идёт чужое время — полоска в цвете того, кого ждём */
.timer.other .timer-track i{background:var(--tc,#8ea0bf)}
.timer.other .clock,.timer.other span{color:var(--tc,#8ea0bf)}
.timer.low #timer-txt{color:var(--warn)}

.side-tools{display:flex; gap:8px; align-items:center}
.side-tools .ghost{padding:6px 11px; font-size:12px}
#btn-speed{padding:6px 8px; font-size:12px; border-radius:9px}
#btn-sound.off{opacity:.5}
.clock{margin-left:auto; font-size:12px; color:var(--dim); font-variant-numeric:tabular-nums}

.rules{max-height:58vh; overflow:auto; font-size:13px; line-height:1.6; color:#bccbe4}
.rules p{margin:0 0 11px}
.rules b{color:#fff}

.side-head{font-size:11px; text-transform:uppercase; letter-spacing:.1em; color:var(--dim);
  font-weight:700; margin:2px 0 -2px}
.log{flex:1.4; overflow:auto; background:var(--panel); border:1px solid var(--line);
  border-radius:11px; padding:10px; font-size:12px; min-height:0}
.le{padding:3px 0; border-bottom:1px solid rgba(255,255,255,.035); color:var(--dim);
  animation:logIn .25s ease-out}
@keyframes logIn{from{opacity:0;transform:translateX(-7px)}to{opacity:1;transform:none}}
.le.good{color:var(--acc)} .le.bad{color:var(--warn)} .le.sys{color:var(--ink)}
.le.card{color:var(--gold)} .le.win{color:var(--gold); font-weight:700} .le.roll{color:#9fb4d8}
.arow{display:flex; justify-content:space-between; gap:6px; padding:4px 7px;
  border-radius:7px; background:#1b2539; margin-bottom:3px; align-items:center; font-size:12px}
.aname{display:flex; align-items:center; gap:5px}
.side-foot{display:flex; gap:8px}
.side-foot button{flex:1}

/* ================= модалки ================= */
.modal{position:fixed; inset:0; background:rgba(4,7,12,.78); display:grid; place-items:center;
  z-index:50; backdrop-filter:blur(3px); animation:fadeIn .2s ease-out}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.modal-box{position:relative; background:linear-gradient(180deg,#182236,#111827);
  border:1px solid var(--line); border-radius:18px; padding:22px; width:min(740px,94vw);
  max-height:88vh; overflow:auto; box-shadow:0 40px 100px rgba(0,0,0,.7)}
.modal-box.in{animation:modalIn .32s cubic-bezier(.2,1.2,.3,1) both}
@keyframes modalIn{from{opacity:0;transform:translateY(20px) scale(.95)}to{opacity:1;transform:none}}
.modal-box h2{margin:0 0 14px; font-size:20px}
.trade-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.tcol h3{margin:0 0 8px; font-size:13px; color:var(--dim)}
.tlist{max-height:250px; overflow:auto; display:flex; flex-direction:column; gap:4px; margin-bottom:8px}
.titem{display:flex; align-items:center; gap:7px; padding:6px 9px; background:var(--panel);
  border:1px solid var(--line); border-radius:8px; font-size:12px; cursor:pointer;
  transition:border-color .15s, background .15s, transform .1s}
.titem:hover{background:#223050}
.titem:active{transform:scale(.99)}
.titem.sel{border-color:var(--acc); background:#17301f}
.tprice2{margin-left:auto; opacity:.6}
.pad{padding:8px}
.tmoney{display:flex; align-items:center; gap:8px}
.tmoney input{width:100%}
.modal-actions{display:flex; gap:8px; justify-content:flex-end; margin-top:16px}
.offer{background:var(--panel); border:1px solid var(--line); border-radius:11px;
  padding:12px; margin-bottom:8px}
.offer b{color:var(--gold)}
.win-wrap{text-align:center}
.cup{width:58px; height:58px; border-radius:50%; margin:0 auto 14px; background:var(--c,#f5c451);
  box-shadow:inset 0 -24% 24% -12% rgba(0,0,0,.4), inset 0 20% 20% -14% rgba(255,255,255,.6),
             0 0 0 6px rgba(255,255,255,.07), 0 0 34px var(--c,#f5c451);
  animation:cupIn .6s cubic-bezier(.2,1.3,.3,1) both;
  display:grid; place-items:center; font-size:27px; line-height:1}
@keyframes cupIn{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}
.standings{max-width:420px; margin:0 auto}
.standings .st{animation:logIn .35s ease-out both; font-size:13px; padding:7px 10px}
.confetti{position:fixed; inset:0; overflow:hidden; pointer-events:none; z-index:1}
.confetti i{position:absolute; top:-24px; border-radius:2px; animation-name:fall;
  animation-timing-function:linear; animation-fill-mode:forwards}
@keyframes fall{to{transform:translateY(105vh) rotate(760deg); opacity:0}}

/* ================= карточка «Шанс» ================= */
.chance-card{position:absolute; top:50%; left:50%; width:min(560px,80%); aspect-ratio:7/5;
  transform:translate(-50%,-50%); border-radius:20px; overflow:hidden; z-index:85;
  box-shadow:0 36px 90px rgba(0,0,0,.75), 0 0 0 3px rgba(255,255,255,.13)}
/* z-index выше закреплённой карточки клетки (80): та перекрывала кнопку «Понятно» */
.cc-art{position:absolute; inset:0}
.cc-art svg{width:100%; height:100%}
.cc-scrim{position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(4,8,14,0) 46%,rgba(4,8,14,.45) 62%,rgba(4,8,14,.9) 80%,rgba(4,8,14,.97) 100%)}
.cc-body{position:absolute; inset:auto 0 0 0; padding:18px 24px 24px; text-align:center}
.cc-title{font-size:11px; letter-spacing:.45em; color:var(--gold); font-weight:800; margin-bottom:9px}
#cardtext{font-size:clamp(14px,1.45vw,21px); font-weight:700; color:#fff; line-height:1.3;
  text-shadow:0 2px 12px rgba(0,0,0,.7)}
#cardok{margin-top:14px; padding:9px 26px; font-size:14px;
  animation:btnIn .3s cubic-bezier(.2,1.3,.4,1) both .25s}
@keyframes cardIn{from{opacity:0; transform:translate(-50%,-50%) rotateY(-72deg) scale(.78)}
  to{opacity:1; transform:translate(-50%,-50%) rotateY(0) scale(1)}}
@keyframes cardOut{to{opacity:0; transform:translate(-50%,-50%) scale(.88) translateY(-18px)}}
.chance-card.in{animation:cardIn .45s cubic-bezier(.2,1.15,.3,1) both}
.chance-card.out{animation:cardOut .22s ease-in both}

/* ================= карточка клетки (title deed) ================= */
.tooltip{position:fixed; z-index:80; pointer-events:none; width:214px; overflow:hidden;
  background:#f6f1e4; color:#16202f; border-radius:10px; padding:0;
  box-shadow:0 22px 55px rgba(0,0,0,.7), 0 0 0 1px rgba(0,0,0,.5);
  animation:tipIn .14s ease-out}
@keyframes tipIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.tt-head{padding:9px 11px; font-weight:800; font-size:13px; text-align:center;
  letter-spacing:.02em; border-bottom:2px solid rgba(0,0,0,.35);
  display:flex; align-items:center; justify-content:center; gap:8px}
.tt-emblem{width:26px; height:26px; flex:none; opacity:.9}
.tt-emblem svg,.tt-emblem img{width:100%; height:100%; display:block; object-fit:contain}
.tt-flag{width:22px; aspect-ratio:3/2; flex:none; border-radius:2px; overflow:hidden;
  box-shadow:0 0 0 1px rgba(0,0,0,.45)}
.tt-flag svg{width:100%; height:100%; display:block}
.tt-rows{padding:8px 11px 10px}
.tt-row{display:flex; justify-content:space-between; gap:8px; padding:2px 0;
  color:#4a5568; font-size:11.5px}
.tt-row b{color:#111a27; font-weight:700; font-variant-numeric:tabular-nums}
.tt-row.hi{color:#0a6b3f} .tt-row.hi b{color:#0a6b3f}
.tt-row.sep{margin-top:5px; padding-top:5px; border-top:1px dashed rgba(0,0,0,.25)}
.tt-row .warn{color:#b3261e; font-weight:700}
.tooltip.wide{width:428px}
.tooltip.wide .tt-rows{column-count:2; column-gap:16px}
.tt-note{font-size:10.5px; color:#5e6a7c; margin-bottom:6px; column-span:all; line-height:1.45}
.tt-rows .tt-note:last-child{margin:7px 0 0; padding-top:7px; border-top:1px dashed rgba(0,0,0,.2)}
.tt-card{font-size:10.5px; line-height:1.32; padding:2.5px 0 2.5px 11px; position:relative;
  color:#2b3648; border-top:1px solid rgba(0,0,0,.07); break-inside:avoid}
.tt-card:first-of-type{border-top:0}
.tt-card::before{content:''; position:absolute; left:1px; top:8px; width:5px; height:5px;
  border-radius:50%; background:#9aa3b0}
.tt-card.plus::before{background:#12915c}
.tt-card.minus::before{background:#c0392b}
.tt-card.move::before{background:#b9821c}

/* на узком экране клетка ~27px — суммы туда не влезают, они есть в карточке по тапу */
/* На телефоне клетка — это примерно 27 px: название там всё равно не прочитать,
   поэтому оставляем цвет, логотип и домики, а подробности показываем по нажатию. */
@media (max-width:700px){
  .bprice{display:none}
  .tooltip.wide{width:min(300px,88vw)}
  .tooltip.wide .tt-rows{column-count:1}
  .board{--tab:7px}
  .tile:not(.corner) .tname{display:none}
  .tile.corner .tname{font-size:7px; letter-spacing:-.02em; line-height:1.1;
    overflow-wrap:anywhere; -webkit-line-clamp:3; padding:0}
  .tile:not(.corner) .tslot{width:68%; height:68%; margin:0; border-radius:5px}
  .tile .bar{box-shadow:0 2px 6px rgba(0,0,0,.45)}
  .tile.t-bottom .bar{margin-top:3px}
  .tile.t-top    .bar{margin-bottom:3px}
  .tile.t-left   .bar{margin-right:3px}
  .tile.t-right  .bar{margin-left:3px}
}
@media (max-width:1180px){
  #game{grid-template-columns:170px 1fr 280px}
  .pava{width:34px; height:34px; font-size:15px}
  .pmoney{font-size:15px}
}
@media (max-width:1000px){
  .banner{top:24%; padding:1.6% 0}
  .center-ui{top:42%; bottom:3%; gap:6px}
  .dice{min-height:0; gap:9px}
  .turnline{font-size:13px; min-height:18px}
  .panel{gap:6px; min-height:34px}
  .panel .hint{font-size:11px}
  #game{grid-template-columns:1fr; grid-template-rows:auto auto auto; overflow:auto;
    height:auto; min-height:100vh}
  .players{flex-direction:row; overflow:auto}
  .pcard{min-width:120px}
  body{overflow:auto}
  .board{width:min(96vw,640px)}
  /* в колонке flex-basis перебивает height, поэтому фиксируем размеры явно,
     а min-height:0 убираем — иначе строка с карточками игроков схлопывается в ноль */
  .side{min-height:auto}
  /* строка со скроллом даёт нулевой минимум, поэтому высоту задаём явно */
  #game{grid-template-rows:auto auto auto}
  .players-col{height:152px; min-height:152px; flex:none; overflow-x:auto; overflow-y:hidden}
  .players{height:100%; align-items:stretch}
  .log{flex:none; height:170px}
  .chat-box.in-game{flex:none; height:130px}
  #game, #game > *{min-width:0}
}

/* карточка игрока кликабельна для сделки */
.pcard{cursor:default}
.pcard.deal{cursor:pointer}
.pcard.deal:hover{box-shadow:0 0 0 1px var(--c), 0 10px 26px rgba(0,0,0,.45);
  transform:translateY(-2px)}
.pdeal{position:absolute; left:50%; bottom:8px; transform:translate(-50%,6px);
  font-size:10px; letter-spacing:.09em; text-transform:uppercase; font-weight:700;
  color:#0b1119; background:var(--c); border-radius:99px; padding:3px 10px;
  opacity:0; pointer-events:none; transition:opacity .18s, transform .18s; white-space:nowrap}
.pcard.deal:hover .pdeal{opacity:1; transform:translate(-50%,0)}
/* когда сделка доступна, подсказка на карточке подсвечивается */
.pcard.can-trade .pdeal{background:var(--acc); color:#08130c}

/* ===== Предложение обмена в центре доски ===== */
/* Раньше это было окно на весь экран, и за ним не было видно, сложится
   монополия или нет. Теперь оно живёт в центре поля, а клетки сделки
   подсвечены прямо на доске. */
.tr-ask{display:flex; flex-direction:column; gap:5px; text-align:left; width:100%;
  padding:8px 10px; border-radius:10px; background:rgba(10,17,30,.62);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.tr-who{font-size:clamp(10px,1vw,13px); color:#a9bad6; text-align:center; margin-bottom:2px}
.tr-line{display:flex; align-items:baseline; gap:6px; font-size:clamp(10px,1.02vw,13px); line-height:1.25}
.tr-line span{flex:none; width:44px; font-size:10px; text-transform:uppercase; letter-spacing:.04em}
.tr-line.get span{color:#5fd08a}
.tr-line.give span{color:#ff9a9a}
.tr-line b{color:#eaf1ff; font-weight:700; overflow-wrap:anywhere}
.tr-bal{display:flex; align-items:center; justify-content:center; gap:10px; margin-top:3px;
  font-size:clamp(13px,1.5vw,19px); font-weight:800; font-variant-numeric:tabular-nums; color:#eaf1ff}
.tr-bal i{font-style:normal; font-size:.85em; color:#7b8ca8}
.tr-bal i.good{color:#5fd08a}
.tr-bal i.bad{color:#ff9a9a}
.tr-note{display:flex; flex-direction:column; gap:2px; margin-top:3px}
.tr-note i{font-style:normal; font-size:clamp(9.5px,.95vw,12px); line-height:1.3}
.tr-note i.ok{color:#5fd08a}
.tr-note i.bad{color:#ffc46b}
.tr-acts{display:flex; gap:6px; width:100%}
.tr-acts button{flex:1}
/* клетки сделки видно прямо на доске */
.tile.tr-get{box-shadow:inset 0 0 0 3px #4ade80, 0 0 18px rgba(74,222,128,.5); z-index:5}
.tile.tr-give{box-shadow:inset 0 0 0 3px #ff7b7b, 0 0 18px rgba(255,123,123,.45); z-index:5}
.tile.tr-get, .tile.tr-give{animation:trPulse 1.5s ease-in-out infinite}
@keyframes trPulse{50%{filter:brightness(1.22)}}

/* ===== Табло аукциона ===== */
.auc{display:flex; flex-direction:column; align-items:center; gap:4px; width:100%;
  padding:8px 10px; border-radius:10px; background:rgba(10,17,30,.62);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.auc-top{font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:#8ea0bf}
.auc-name{font-size:clamp(12px,1.35vw,17px); font-weight:800; color:#eaf1ff; text-align:center;
  line-height:1.15; border-bottom:3px solid var(--g); padding-bottom:3px}
.auc-bid{display:flex; align-items:baseline; gap:7px; flex-wrap:wrap; justify-content:center}
.auc-bid span{font-size:10px; text-transform:uppercase; letter-spacing:.06em; color:#8ea0bf}
.auc-bid b{font-size:clamp(17px,2.1vw,26px); font-weight:800; color:#f5d67b;
  font-variant-numeric:tabular-nums; line-height:1}
.auc-bid i{font-style:normal; font-size:clamp(10px,1vw,13px); font-weight:700}
.auc-who{display:flex; flex-wrap:wrap; gap:4px; justify-content:center}
.auc-chip{font-size:10px; padding:2px 7px; border-radius:99px; color:#b9c7de;
  background:rgba(255,255,255,.06); box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
/* чей сейчас ход ставить — подсвечен его цветом */
.auc-chip.on{color:#0c1220; background:var(--c); font-weight:800}
.auc-acts{display:flex; gap:6px; width:100%}
.auc-acts button{flex:1}

/* ===== Сборка сделки в центре доски ===== */
/* Доска при этом остаётся кликабельной: клетки выбираются прямо на поле. */
.tr-make{display:flex; flex-direction:column; gap:5px; width:100%; text-align:left;
  padding:8px 10px; border-radius:10px; background:rgba(10,17,30,.72);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.tr-head{display:flex; align-items:center; gap:7px; justify-content:center}
.tr-head span{font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:#8ea0bf}
.tr-head select{padding:4px 26px 4px 9px; font-size:clamp(10px,1vw,13px); background-position:right 8px center}
.tr-hint{font-size:clamp(9px,.92vw,11.5px); line-height:1.3; color:#7f90ad; text-align:center}
.tr-make .tr-line{align-items:center}
.tr-make .tr-line b{flex:1; min-width:0}
.tr-make .tr-line input{flex:none; width:84px; padding:2px 6px; text-align:center;
  font-weight:700; font-size:clamp(10px,1vw,12.5px)}
/* пока собираем сделку, центр отдан панели: кубики и джекпот не нужны */
.center.making .center-ui{top:8%; bottom:4%; justify-content:center; overflow:auto}
.center.making #pot, .center.making #dice, .center.making #turnline{display:none}
.center.making .panel{max-height:100%}
/* высокие табло (аукцион, сделка, лотерея, очередь) — центр отдан им целиком */
.center.busy .center-ui{top:22%; bottom:3%; justify-content:flex-end; gap:6px}
.center.busy #pot{display:none}
.center.busy #dice{--d:34px; min-height:0}
.center.busy .panel{max-height:100%}
/* панель не влезла в центр — поднимаем её и ужимаем кости */
.center.tight .center-ui{top:20%; gap:5px}
.center.tight #pot{display:none}
.center.tight #dice{--d:34px; min-height:0}
.center-ui.below{top:auto}
.tr-warn{min-height:0; font-size:clamp(9px,.92vw,11.5px); line-height:1.3;
  color:#ff9a9a; text-align:center}
.tr-warn:empty{display:none}

/* Закреплённая карточка клетки: та же, что при наведении, но с кнопками
   и живыми нажатиями — окна поверх доски больше нет. */
.tooltip.pinned{pointer-events:auto; animation:none;
  box-shadow:0 26px 60px rgba(0,0,0,.75), 0 0 0 2px rgba(120,170,255,.55)}
.tt-hint{padding:0 11px 9px; font-size:10.5px; line-height:1.4; color:#5e6a7c}
.tt-acts{display:flex; flex-direction:column; gap:5px; padding:9px 10px;
  background:rgba(20,30,48,.06); border-top:1px solid rgba(0,0,0,.14)}
.tt-acts button{width:100%; padding:7px 10px; font-size:12px; font-weight:700;
  border-radius:8px; border:0; cursor:pointer}
.tt-acts button.primary{background:linear-gradient(180deg,#5bd08a,#34a765); color:#07200f}
.tt-acts button.primary:hover{filter:brightness(1.07)}
.tt-acts button.ghost{background:rgba(20,30,48,.1); color:#1d2635;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.18)}
.tt-acts button.ghost:hover{background:rgba(20,30,48,.16)}

/* ===== лотерея в центре ===== */
.lotto-picks.inline{display:flex; gap:6px; justify-content:center; width:100%; margin:2px 0}
.lotto-picks.inline .lotto-die{width:clamp(36px,3.8vw,46px); height:clamp(36px,3.8vw,46px); padding:0;
  display:grid; place-items:center}
/* грань — квадрат по размеру кнопки, точки в процентах: на мелких кнопках
   фиксированная 36px-грань вылезала за края и точки съезжали */
.lotto-picks.inline .lotto-die .die-face{width:100%; height:100%; padding:13%; gap:5%; box-sizing:border-box}
.lotto-picks.inline .lotto-die .die-face i{width:80%; height:80%}
.auc.lot .lotto-roll{min-height:64px; display:flex; justify-content:center; margin:4px 0}
.auc.lot .lotto-result{font-size:clamp(11px,1.1vw,14px); text-align:center}
.auc.lot .lotto-result.win{color:#5fd08a; font-weight:700}
.auc.lot .lotto-result.lose{color:#ff9a9a}
.auc.lot .lotto-result.muted{color:#8ea0bf}
/* номер круга рядом с часами */
.round{font-size:12px; color:var(--dim); font-variant-numeric:tabular-nums; margin-left:auto}

/* ===== телефон ===== */
.center-slot{display:none}
.center-slot:not([hidden]){display:block}
/* Панель хода на телефоне прибита к низу экрана: раньше она стояла под доской,
   и на невысоких телефонах кнопки «Бросить», «Купить» и прочие оказывались за
   краем — их приходилось искать скроллом. Высоту панели измеряет ui.js и кладёт
   в --bar-h, чтобы низ страницы (журнал, чат) не прятался под ней. */
.center-ui.below{position:fixed; left:0; right:0; bottom:0; inset-block-start:auto; z-index:40;
  width:auto; display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:8px 10px calc(10px + env(safe-area-inset-bottom, 0px)); margin:0;
  max-height:62vh; overflow:auto; overscroll-behavior:contain;
  background:var(--panel); border:1px solid var(--line); border-bottom:0; border-radius:14px 14px 0 0;
  box-shadow:0 -14px 34px rgba(0,0,0,.55)}
/* два id в селекторе — иначе #scr-game #game из site.css перебивает отступ */
body.in-game.bar #scr-game #game{padding-bottom:calc(var(--bar-h, 150px) + 10px)}
/* кости слева, джекпот и «ходит» справа — так панель ниже и доска видна целиком */
.center-ui.below{display:grid; grid-template-columns:auto 1fr; column-gap:14px; row-gap:4px;
  grid-template-areas:"dice pot" "dice turn" "panel panel" "timer timer"; align-items:center; justify-items:center}
.center-ui.below #dice{grid-area:dice; --d:34px; min-height:0; gap:10px; margin:0 2px}
.center-ui.below #pot{grid-area:pot; font-size:12px; min-height:0; align-self:end}
.center-ui.below #turnline{grid-area:turn; font-size:13px; min-height:0; align-self:start}
.center-ui.below #panel{grid-area:panel; width:100%; max-width:100%; gap:6px; margin-top:4px}
.center-ui.below #timer{grid-area:timer; width:100%}
.center-ui.below #pot:empty,.center-ui.below #turnline:empty{display:none}
.center-ui.below .panel{width:100%}
.center-ui.below .tr-make,.center-ui.below .auc,.center-ui.below .tr-ask{background:rgba(10,17,30,.45)}
@media (max-width:700px){
  #game{padding:6px; gap:8px}
  /* в партии вкладки «Столы/Профиль/Рейтинг» только отъедают высоту */
  body.in-game .nav{display:none}
  /* карточка «Шанс» — поверх экрана, а не поверх доски: доска может быть
     прокручена, и карточка вместе с кнопкой «Понятно» уезжала из вида */
  .chance-card{position:fixed; top:50%; left:50%; width:min(92vw,420px)}
  .center-ui.below .panel{min-height:0}
  .center-ui.below .dice{min-height:0}
  .notes{top:calc(env(safe-area-inset-top, 0px) + 56px); width:calc(100vw - 20px)}
  .note{font-size:13.5px; padding:9px 12px}
  /* шапка в одну строку: знак, пользователь, язык, выход; вкладки — второй строкой */
  .top{gap:8px; padding:6px 10px}
  .brand-txt{display:none}
  .nav{order:3; width:100%; gap:4px; justify-content:center}
  .nav-btn{padding:5px 10px; font-size:12px}
  .top-right{gap:6px}
  .top-user .mini-ava{width:24px; height:24px}
  .top .ghost.sm{padding:5px 9px; font-size:12px; white-space:nowrap}
  /* имя не переносится на две строки и не раздувает шапку на узких телефонах */
  .top-user{max-width:38vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:block; line-height:24px}
  .top-user .mini-ava{display:inline-grid; vertical-align:middle; margin-right:4px}
  /* карточки игроков — узкая лента */
  .players-col{height:92px; min-height:92px}
  .pcard{flex:0 0 auto; min-width:118px; max-width:150px; padding:6px 8px}
  .pcard .chips,.pcard .worth,.pcard .pdeal{display:none}
  .pava{width:28px; height:28px; font-size:13px}
  .pmoney{font-size:14px}
  /* кнопки — сразу под доской, потом журнал и чат */
  .side{gap:8px}
  .side-foot{order:-2} .side-tools{order:-1; flex-wrap:wrap}
  .side-tools .ghost{padding:6px 9px; font-size:12px}
  .side-head{font-size:11px}
  .log{height:150px}
  .chat-box.in-game{height:110px}
  .tr-make .tr-line input{width:72px}
  .tooltip{width:min(214px,80vw)}
  .modal-box{width:min(94vw,520px); padding:14px}
}
/* совсем узкие телефоны (320–360): шапка в одну строку без метки «гость» */
@media (max-width:380px){
  .top{gap:6px; padding:6px 8px}
  .top-right{gap:5px}
  #top-user .tag{display:none}
  .top-right .lang{min-width:34px; padding:5px 6px}
  .top .ghost.sm{padding:5px 7px; font-size:11.5px}
}

/* ===================== режим 2×2 и рейтинг ===================== */
:root{ --team0:#ff6f6f; --team1:#5aa0ff; }
/* командный бейдж на карточке игрока и цветная левая грань */
.pcard.hasteam{border-left:3px solid var(--tc,#8ea0bf)}
.pcard.hasteam.t0{--tc:var(--team0)} .pcard.hasteam.t1{--tc:var(--team1)}
.pteam{position:absolute; top:6px; right:6px; font-size:8.5px; font-weight:800; letter-spacing:.03em;
  padding:2px 6px; border-radius:20px; color:#0b1119; background:var(--tc,#8ea0bf); white-space:nowrap}
/* командное кольцо на фишке (для чужих фишек; своя перекрывается меткой ВЫ) */
.token.t0 .tk-glow{background:var(--team0)} .token.t1 .tk-glow{background:var(--team1)}
.token.t0 .tk-dot{box-shadow:inset 0 -26% 26% -12% rgba(0,0,0,.45), inset 0 22% 22% -14% rgba(255,255,255,.6),
  0 0 0 2px #fff, 0 0 0 4px var(--team0), 0 0 10px var(--c), 0 3px 8px rgba(0,0,0,.6)}
.token.t1 .tk-dot{box-shadow:inset 0 -26% 26% -12% rgba(0,0,0,.45), inset 0 22% 22% -14% rgba(255,255,255,.6),
  0 0 0 2px #fff, 0 0 0 4px var(--team1), 0 0 10px var(--c), 0 3px 8px rgba(0,0,0,.6)}
/* итоговая таблица: командная грань и дельта рейтинга */
.arow.t0{border-left:3px solid var(--team0); padding-left:8px}
.arow.t1{border-left:3px solid var(--team1); padding-left:8px}
.elo{font-weight:800; font-size:.9em}
.elo.up{color:#5fd08a} .elo.down{color:#ff7b7b}

/* ===================== косметика ===================== */
/* иконка фишки поверх цветного кружка */
.tk-ico{position:absolute; inset:0; display:grid; place-items:center; z-index:2;
  pointer-events:none; filter:drop-shadow(0 1px 2px rgba(0,0,0,.55))}
.tk-ico:empty{display:none}
.tk-ico svg{width:82%; height:82%; display:block}

/* рамки аватара — работают на .pf-ava, .pp-ava, .cos-frame (box-shadow не режется overflow) */
.frame-ring{box-shadow:0 0 0 3px #fff}
.frame-silver{box-shadow:0 0 0 3px #c9d2de}
.frame-gold{box-shadow:0 0 0 3px #f5c451, 0 0 14px rgba(245,196,81,.5)}
.frame-neon{box-shadow:0 0 0 2px #39d98a, 0 0 16px #39d98a}
.frame-rainbow{animation:rainbowRing 4s linear infinite}
@keyframes rainbowRing{
  0%{box-shadow:0 0 0 3px #ff6b6b, 0 0 14px #ff6b6b}
  25%{box-shadow:0 0 0 3px #f5c451, 0 0 14px #f5c451}
  50%{box-shadow:0 0 0 3px #39d98a, 0 0 14px #39d98a}
  75%{box-shadow:0 0 0 3px #4ea8ff, 0 0 14px #4ea8ff}
  100%{box-shadow:0 0 0 3px #c084fc, 0 0 14px #c084fc}}

/* панель выбора */
.cos-panel{background:linear-gradient(180deg,#182236,#121a29); border:1px solid var(--line);
  border-radius:18px; padding:20px 22px; box-shadow:0 20px 50px rgba(0,0,0,.35)}
.cos-group{margin-bottom:18px}
.cos-title{font-size:13px; font-weight:700; color:var(--dim); margin-bottom:10px;
  text-transform:uppercase; letter-spacing:.05em}
.cos-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(56px,1fr)); gap:10px}
.cos-item{position:relative; height:56px; border-radius:13px; cursor:pointer;
  background:#1a2337; border:1px solid var(--line); display:grid; place-items:center;
  transition:transform .18s, border-color .18s, box-shadow .18s}
.cos-item:hover{transform:translateY(-2px); border-color:#33445f}
.cos-item.on{border-color:var(--acc); box-shadow:0 0 0 2px rgba(57,217,138,.35); background:#1d2a41}
.cos-item.locked{opacity:.6}
.cos-item.locked:hover{transform:none}
.cos-tok{width:34px; height:34px; display:grid; place-items:center}
.cos-tok svg{width:34px; height:34px; display:block; filter:drop-shadow(0 1px 2px rgba(0,0,0,.4))}
.cos-dot{width:24px; height:24px; border-radius:50%; background:linear-gradient(150deg,#ff6f6f,#e0483f);
  box-shadow:inset 0 -30% 30% -12% rgba(0,0,0,.45), inset 0 22% 22% -14% rgba(255,255,255,.6), 0 0 0 2px #fff}
.cos-frame{width:30px; height:30px; border-radius:50%; background:linear-gradient(150deg,#4ea8ff,#2f6fd0)}
.cos-frame.frame-none{box-shadow:inset 0 0 0 2px rgba(255,255,255,.15)}
.cos-lock{position:absolute; top:4px; right:5px; font-size:11px}
.cos-note{font-size:12px; color:var(--dim); line-height:1.45; margin-top:4px}

/* ===================== предложение обмена для всех ===================== */
/* клетки, участвующие в сделке (для зрителей и предлагающего) */
.tile.deal-a{box-shadow:inset 0 0 0 3px #f5b451, 0 0 16px rgba(245,180,81,.55); z-index:5;
  animation:dealPulse 1.4s ease-in-out infinite}
.tile.deal-b{box-shadow:inset 0 0 0 3px #5aa0ff, 0 0 16px rgba(90,160,255,.5); z-index:5;
  animation:dealPulse 1.4s ease-in-out infinite}
@keyframes dealPulse{50%{filter:brightness(1.25)}}

/* баннер сделки поверх верха доски */
.deal-banner{position:absolute; top:10px; left:50%; transform:translateX(-50%); z-index:20;
  width:min(78%,520px); pointer-events:none; text-align:center;
  background:rgba(11,17,28,.93); border:1px solid rgba(255,255,255,.1); border-radius:16px;
  padding:10px 14px 12px; box-shadow:0 22px 55px rgba(0,0,0,.6)}
.deal-banner.in{animation:dealIn .4s cubic-bezier(.2,1.1,.3,1) both}
@keyframes dealIn{from{opacity:0; transform:translate(-50%,-14px) scale(.96)}to{opacity:1; transform:translate(-50%,0) scale(1)}}
.deal-top{font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:#8ea0bf; margin-bottom:8px}
.deal-body{display:grid; grid-template-columns:1fr auto 1fr; gap:10px; align-items:center}
.deal-col{min-width:0}
.deal-who{display:flex; align-items:center; justify-content:center; gap:6px; font-weight:800;
  font-size:clamp(11px,1.2vw,14px); color:#eaf1ff}
.deal-who i{width:9px; height:9px; border-radius:50%; background:var(--c); flex:none;
  box-shadow:0 0 8px var(--c)}
.deal-lbl{font-size:9.5px; text-transform:uppercase; letter-spacing:.06em; color:#7f90ad; margin:3px 0 2px}
.deal-items{font-size:clamp(10px,1.05vw,13px); color:#cdd8ee; line-height:1.3; overflow-wrap:anywhere}
.deal-swap{font-size:20px; color:#5fd08a; font-weight:700; animation:dealSwap 1.6s ease-in-out infinite}
@keyframes dealSwap{0%,100%{transform:translateX(0)}50%{transform:translateX(0) scale(1.18)}}
.deal-timer{height:3px; border-radius:2px; background:rgba(255,255,255,.08); margin-top:10px; overflow:hidden}
.deal-timer i{display:block; height:100%; width:100%; border-radius:2px;
  background:linear-gradient(90deg,#5fd08a,#39d98a); transform-origin:left;
  animation:dealCountdown linear forwards}
@keyframes dealCountdown{from{width:100%}to{width:0}}
@media (max-width:700px){ .deal-banner{width:92%; top:4px; padding:8px 10px 10px} }

/* игрок без связи: приглушаем карточку и помечаем тегом */
.pcard.offline{opacity:.72}
.tag.off{background:#3a2a12; color:#f5c451}

/* золотая кнопка создателя в панели инструментов */
.ghost.gold{color:#ffe27a; border-color:rgba(245,196,81,.5)}
.ghost.gold:hover{background:rgba(245,196,81,.14); border-color:#f0c14b}
/* появление кубка на финале — вместо конфетти */
.win-wrap .cup{animation:cupPop .55s cubic-bezier(.2,1.5,.3,1) both}
@keyframes cupPop{from{transform:scale(.3) rotate(-12deg); opacity:0}to{transform:none; opacity:1}}