/* =====================================================================
   НЕ СЕ СЪРДИ ЧОВЕЧЕ — лоби, маса, зар, повторение (агент A). Префикс .ld-
   Кремава дъска в орехова рамка със златен кант; лъскави пулове; 3D зар.
   ===================================================================== */

/* ---------- дъска ---------- */
.ld-board{position:relative; width:100%; aspect-ratio:1; box-sizing:border-box; padding:2.3%; border-radius:4.5%;
  background:repeating-linear-gradient(97deg, rgba(255,255,255,.035) 0 2px, transparent 2px 9px), linear-gradient(160deg,#5a3818,#2a180a);
  box-shadow:0 0 0 2px var(--gold3,#a85a0c), 0 0 0 4px var(--gold,#ffc53d), 0 22px 46px rgba(3,8,30,.55), inset 0 2px 0 rgba(255,255,255,.1)}
.ld-felt{--u:1cqw; position:relative; width:100%; height:100%; border-radius:3%; container-type:inline-size;
  background:radial-gradient(circle at 50% 42%, #fdf7e6 0%, #f1e3c2 62%, #e2cb98 100%);
  box-shadow:inset 0 0 0 1px rgba(122,84,36,.4), inset 0 0 6cqw rgba(122,84,36,.28)}
.ld-svg{position:absolute; inset:0; width:100%; height:100%; pointer-events:none}
.ld-path{fill:none; stroke:rgba(110,74,30,.38); stroke-width:.07; stroke-linejoin:round}
.ld-medal{fill:#ffc53d; stroke:#a85a0c; stroke-width:.06}
.ld-medal2{fill:#fff3cf}
.ld-star{fill:#c0701a}
.ld-quad{position:absolute; border-radius:16%; transition:box-shadow .4s, filter .4s;
  background:radial-gradient(circle at 30% 24%, color-mix(in srgb, var(--pl) 60%, #fff), color-mix(in srgb, var(--pc) 70%, #fff) 72%, color-mix(in srgb, var(--pc) 85%, #000) 140%);
  box-shadow:inset 0 0 0 .55cqw rgba(255,255,255,.55), inset 0 -1cqw 2.4cqw rgba(0,0,0,.14), 0 .4cqw .9cqw rgba(90,58,20,.3)}
.ld-quad.off{filter:grayscale(.85) opacity(.42)}
.ld-quad.on{animation:ldglow 1.7s ease-in-out infinite}
@keyframes ldglow{0%,100%{box-shadow:inset 0 0 0 .55cqw rgba(255,255,255,.55), 0 0 0 .6cqw var(--pc), 0 0 3cqw .6cqw var(--pc)} 50%{box-shadow:inset 0 0 0 .55cqw rgba(255,255,255,.55), 0 0 0 .9cqw var(--pc), 0 0 6cqw 1.6cqw var(--pc)}}
.ld-hole,.ld-cell{position:absolute; width:calc(100% / 11); aspect-ratio:1; display:grid; place-items:center; pointer-events:none}
.ld-hole::before{content:''; width:70%; height:70%; border-radius:50%; background:radial-gradient(circle at 50% 62%, rgba(0,0,0,.04), rgba(0,0,0,.24)); box-shadow:inset 0 .45cqw .8cqw rgba(0,0,0,.3), 0 0 0 .35cqw rgba(255,255,255,.6)}
.ld-cell::before{content:''; grid-area:1/1; width:80%; height:80%; border-radius:50%; background:radial-gradient(circle at 50% 32%, #fff, #f3e8cd);
  box-shadow:inset 0 -.35cqw .55cqw rgba(122,84,36,.25), 0 0 0 .28cqw rgba(110,74,30,.5), 0 .3cqw .45cqw rgba(90,58,20,.25)}
.ld-cell.start::before{background:radial-gradient(circle at 38% 30%, var(--pl), var(--pc) 70%); box-shadow:0 0 0 .32cqw var(--pd), 0 .3cqw .6cqw rgba(0,0,0,.3), inset 0 -.4cqw .6cqw rgba(0,0,0,.2)}
.ld-cell.home::before{background:radial-gradient(circle at 38% 30%, color-mix(in srgb, var(--pl) 65%, #fff), var(--pl) 55%, var(--pc) 120%); box-shadow:0 0 0 .3cqw var(--pd), inset 0 -.4cqw .6cqw rgba(0,0,0,.15)}
.ld-cell.off{opacity:.55; filter:grayscale(.7)}
.ld-arrow{grid-area:1/1; width:44%; height:44%; fill:none; stroke:#fff; stroke-width:3.6; stroke-linecap:round; stroke-linejoin:round; z-index:1; filter:drop-shadow(0 1px 1px rgba(0,0,0,.35))}
.ld-marks,.ld-layer,.ld-fx{position:absolute; inset:0; pointer-events:none}
.ld-fx{z-index:3}

/* ---------- пулове ---------- */
.ld-tok{position:relative; display:block; width:76%; height:76%; border-radius:50%; transition:transform .2s var(--pspring,ease);
  background:radial-gradient(circle at 34% 28%, rgba(255,255,255,.95) 0 6%, transparent 17%), radial-gradient(circle at 50% 50%, var(--pl) 0, var(--pc) 52%, var(--pd) 100%);
  box-shadow:0 calc(var(--u) * .5) 0 var(--pd), 0 calc(var(--u) * 1.1) calc(var(--u) * 1.3) rgba(30,15,0,.45), inset 0 calc(var(--u) * -.5) calc(var(--u) * .8) rgba(0,0,0,.25), inset 0 calc(var(--u) * .3) calc(var(--u) * .4) rgba(255,255,255,.4)}
.ld-tok::before{content:''; position:absolute; inset:23%; border-radius:50%; background:radial-gradient(circle at 36% 30%, #fff 0 9%, var(--pl) 28%, var(--pc) 72%, var(--pd)); box-shadow:0 calc(var(--u) * .45) calc(var(--u) * .6) rgba(0,0,0,.42), inset 0 calc(var(--u) * -.2) calc(var(--u) * .3) rgba(0,0,0,.25)}
.ld-pawn{position:absolute; left:0; top:0; width:calc(100% / 11); aspect-ratio:1; margin:0; padding:0; border:0; background:none; color:inherit; display:grid; place-items:center;
  transform:translate(calc(var(--x, 0) * 100%), calc(var(--y, 0) * 100%)); pointer-events:auto; cursor:default; -webkit-tap-highlight-color:transparent; outline:none}
.ld-pawn.can{cursor:pointer; z-index:60!important}
.ld-pawn.can::before{content:''; position:absolute; inset:-20%; border-radius:50%}
.ld-pawn.can::after{content:''; position:absolute; inset:3%; border-radius:50%; border:calc(var(--u) * .5) solid #ffd54a; box-shadow:0 0 calc(var(--u) * 1.6) calc(var(--u) * .3) rgba(255,197,61,.85); animation:ldring 1.1s ease-in-out infinite; pointer-events:none}
.ld-pawn.can .ld-tok{animation:ldbob 1.1s ease-in-out infinite}
.ld-pawn.can:hover .ld-tok,.ld-pawn.can:focus-visible .ld-tok{animation:none; transform:translateY(-14%) scale(1.12)}
.ld-pawn:focus-visible::after{content:''; position:absolute; inset:-2%; border-radius:50%; border:calc(var(--u) * .6) solid #fff; box-shadow:0 0 0 calc(var(--u) * .5) var(--paccent,#ffc53d)}
.ld-pawn.moving .ld-tok{box-shadow:0 calc(var(--u) * .5) 0 var(--pd), 0 calc(var(--u) * 2.4) calc(var(--u) * 2) rgba(30,15,0,.4)}
.ld-pawn.hit .ld-tok{filter:brightness(1.2)}
.ld-pawn.home .ld-tok{width:70%; height:70%}
.ld-pawn.last .ld-tok{box-shadow:0 0 0 calc(var(--u) * .55) #fff, 0 0 calc(var(--u) * 2.4) var(--pc)}
@keyframes ldbob{50%{transform:translateY(-12%) scale(1.06)}}
@keyframes ldring{50%{transform:scale(1.14); opacity:.5}}
.ld-dest{position:absolute; width:calc(100% / 11); aspect-ratio:1; margin:0; padding:0; border:0; background:none; display:grid; place-items:center; pointer-events:auto; cursor:pointer}
.ld-dest::before{content:''; width:36%; height:36%; border-radius:50%; background:var(--pc); box-shadow:0 0 0 calc(var(--u) * .4) #fff, 0 0 calc(var(--u) * 1.6) var(--pc); opacity:.85; animation:ldping 1.4s ease-in-out infinite}
.ld-dest.cap::before{width:98%; height:98%; background:none; border:calc(var(--u) * .55) dashed var(--pbad,#ff5d6c); box-shadow:0 0 calc(var(--u) * 1.5) rgba(255,93,108,.7); animation:ldspin 3s linear infinite}
.ld-dest.quiet{display:none}
@keyframes ldping{50%{transform:scale(.7); opacity:.5}}
@keyframes ldspin{to{transform:rotate(360deg)}}
.ld-ghost{position:absolute; width:calc(100% / 11); aspect-ratio:1; display:grid; place-items:center; opacity:.6; animation:ldghost 1s ease-in-out infinite}
.ld-ghost .ld-tok{outline:calc(var(--u) * .45) dashed #fff; outline-offset:calc(var(--u) * .3)}
.ld-ghost.cap .ld-tok{outline-color:var(--pbad,#ff5d6c)}
@keyframes ldghost{50%{opacity:.35}}
.ld-step{position:absolute; width:calc(100% / 11); aspect-ratio:1; display:grid; place-items:center}
.ld-step::before{content:''; width:22%; height:22%; border-radius:50%; background:var(--pc); box-shadow:0 0 0 calc(var(--u) * .3) #fff; opacity:.85}
.ld-ripple{position:absolute; width:calc(100% / 11); aspect-ratio:1; border-radius:50%; box-shadow:0 0 0 calc(var(--u) * .6) var(--rc); animation:ldrip .65s ease-out forwards; pointer-events:none}
@keyframes ldrip{from{transform:scale(.4); opacity:1} to{transform:scale(2.8); opacity:0}}
.ld-spark{position:absolute; width:calc(100% / 11); aspect-ratio:1; display:grid; place-items:center; pointer-events:none}
.ld-spark::before{content:''; width:30%; height:30%; background:var(--pc); clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%); filter:drop-shadow(0 0 3px #fff)}

/* ---------- страница на масата ---------- */
.page.ld-playing{max-width:none; padding:8px 10px 10px}
.ld-table{--bw:max(240px, min(100%, calc(100dvh - var(--phdr, 60px) - 292px), 740px));
  display:grid; grid-template-columns:minmax(0,1fr); grid-template-areas:"top" "seatsT" "board" "seatsB" "ctrl" "log"; justify-items:center; row-gap:6px; width:100%; max-width:760px; margin:0 auto}
.ld-top{grid-area:top; width:100%; display:flex; align-items:center; gap:8px; min-width:0}
.ld-title{display:flex; flex-direction:column; min-width:0; flex:1}
.ld-title b{font:400 clamp(15px,3.8vw,19px)/1.15 var(--display); color:var(--paccent); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ld-title span{font-size:12px; color:var(--pmuted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ld-tools{flex:0 0 auto}
.ld-seats{width:var(--bw); display:grid; grid-template-columns:1fr 1fr; gap:8px}
.ld-seats.top{grid-area:seatsT} .ld-seats.bot{grid-area:seatsB}
.ld-boardwrap{grid-area:board; position:relative; width:var(--bw); isolation:isolate}
.ld-seat{position:relative; display:flex; align-items:center; gap:8px; min-width:0; height:42px; box-sizing:border-box; padding:2px 10px 2px 2px; border-radius:99px; background:rgba(255,255,255,.05); border:1.5px solid var(--pline); transition:background .3s, border-color .3s, box-shadow .3s}
.ld-seat.empty{visibility:hidden}
.ld-seats:has(> .empty){grid-template-columns:minmax(0,1fr)}
.ld-seats:has(> .empty) > .empty{display:none}
.ld-seats:has(> .empty) > .ld-seat{justify-self:start; max-width:100%}
.ld-seats:has(> .empty:first-child) > .ld-seat{justify-self:end}
.ld-seats > .ld-seat:nth-child(2){flex-direction:row-reverse; text-align:right; padding:2px 2px 2px 10px}
.ld-seat .pava{box-shadow:0 0 0 2px var(--pc)}
.ld-seat.on{border-color:var(--pc); background:color-mix(in srgb, var(--pc) 24%, transparent); box-shadow:0 0 0 3px color-mix(in srgb, var(--pc) 35%, transparent), 0 0 22px color-mix(in srgb, var(--pc) 55%, transparent)}
.ld-seat.on .pava{box-shadow:0 0 0 2px var(--pc), 0 0 0 5px rgba(255,197,61,.55); animation:ldava 1.6s ease-in-out infinite}
@keyframes ldava{50%{transform:scale(1.07)}}
.ld-seat.won{border-color:var(--paccent)}
.ld-ava{display:grid; flex:0 0 auto}
.ld-who{display:flex; flex-direction:column; min-width:0; flex:1}
.ld-who b{font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ld-tag{font-size:11px; color:var(--pmuted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ld-dot{display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--pc); margin-right:4px; vertical-align:.05em}
.ld-pips{display:flex; gap:3px; flex:0 0 auto}
.ld-pips i{width:8px; height:8px; border-radius:50%; border:1.5px solid var(--pc); box-sizing:border-box}
.ld-pips i.o{background:color-mix(in srgb, var(--pc) 45%, transparent)}
.ld-pips i.h{background:var(--pc)}
.ld-bubble{position:absolute; bottom:calc(100% + 8px); left:6px; z-index:30; max-width:min(70vw,230px); padding:7px 12px; border-radius:14px 14px 14px 4px; background:var(--paper,#fffdf7); color:var(--ink,#14161c); font:600 13px/1.3 var(--body); box-shadow:0 8px 20px rgba(3,8,30,.5); animation:ldpop .3s var(--pspring); white-space:normal; text-align:left}
.ld-seats > .ld-seat:nth-child(2) .ld-bubble{left:auto; right:6px; border-radius:14px 14px 4px 14px}
.ld-seats.top .ld-bubble{bottom:auto; top:calc(100% + 8px)}
@keyframes ldpop{from{opacity:0; transform:scale(.6) translateY(6px)}}

.ld-ctrl{grid-area:ctrl; width:var(--bw); display:flex; align-items:center; gap:14px; min-height:70px}
.ld-tray{position:relative; flex:0 0 auto; display:flex; flex-direction:column; align-items:center; gap:3px; padding:8px 12px 5px; border-radius:20px;
  background:radial-gradient(ellipse at 50% 40%, var(--felt,#1d4bb8), var(--felt-deep,#0d2466)); border:2px solid color-mix(in srgb, var(--pc) 70%, transparent); box-shadow:inset 0 0 18px rgba(0,0,0,.45); transition:border-color .3s}
.ld-tray.ready{animation:ldtray 1.6s ease-in-out infinite}
@keyframes ldtray{50%{box-shadow:inset 0 0 18px rgba(0,0,0,.45), 0 0 0 5px color-mix(in srgb, var(--pc) 35%, transparent), 0 0 24px color-mix(in srgb, var(--pc) 60%, transparent)}}
.ld-dice{--d:46px; position:relative; width:var(--d); height:var(--d); margin:2px 6px 9px; padding:0; border:0; background:none; cursor:pointer; perspective:320px; -webkit-tap-highlight-color:transparent}
.ld-dice::before{content:''; position:absolute; inset:-12px}
.ld-dice[aria-disabled="true"]{cursor:default}
.ld-dice:focus-visible{outline:3px solid var(--paccent); outline-offset:8px; border-radius:12px}
.ld-toss{position:absolute; inset:0; transform-style:preserve-3d}
.ld-cube{position:absolute; inset:0; transform-style:preserve-3d; transform:rotateX(-22deg) rotateY(30deg) rotateY(180deg)}
.ld-face{position:absolute; inset:0; box-sizing:border-box; border-radius:14%; display:grid; grid-template:repeat(3,1fr)/repeat(3,1fr); padding:12%;
  background:linear-gradient(145deg,#fffdf7,#e8dcc2); box-shadow:inset 0 0 0 1px rgba(0,0,0,.07), inset 0 -3px 6px rgba(0,0,0,.13); backface-visibility:hidden; -webkit-backface-visibility:hidden}
.ld-face i{margin:16%; border-radius:50%; visibility:hidden; background:radial-gradient(circle at 40% 35%, #444a5c, #0b0c10)}
.ld-face i.on{visibility:visible}
.ld-face.f1 i.on{margin:2%; background:radial-gradient(circle at 40% 35%, #ff7078, #b3111f)}
.ld-face.f1{transform:translateZ(calc(var(--d) / 2))}
.ld-face.f6{transform:rotateY(180deg) translateZ(calc(var(--d) / 2))}
.ld-face.f2{transform:rotateY(90deg) translateZ(calc(var(--d) / 2))}
.ld-face.f5{transform:rotateY(-90deg) translateZ(calc(var(--d) / 2))}
.ld-face.f3{transform:rotateX(90deg) translateZ(calc(var(--d) / 2))}
.ld-face.f4{transform:rotateX(-90deg) translateZ(calc(var(--d) / 2))}
.ld-core{position:absolute; inset:4%; background:#e8dcc2; transform:translateZ(0)}
.ld-dshadow{position:absolute; left:8%; right:8%; bottom:-14%; height:20%; border-radius:50%; background:rgba(0,0,0,.55); filter:blur(4px); opacity:.55}
.ld-dice-cta{font:700 10px/1 var(--body); letter-spacing:.14em; text-transform:uppercase; color:var(--paccent); opacity:.25; transition:opacity .3s}
.ld-tray.ready .ld-dice-cta{opacity:1}
.ld-msgbox{flex:1; min-width:0}
.ld-msg{font:400 clamp(15px,4.2vw,20px)/1.2 var(--display); color:var(--ptext); text-wrap:balance}
.ld-msg b{font-weight:400; color:var(--paccent)}
.ld-sub{font-size:13px; line-height:1.35; color:var(--pmuted); min-height:1.35em; margin-top:3px}
.ld-chipdie{display:inline-grid; place-items:center; width:1.35em; height:1.35em; border-radius:.3em; background:#fffdf7; color:#14161c; font:700 .85em/1 var(--num); vertical-align:.08em; margin-left:.2em; box-shadow:0 2px 0 #c9b98f}
.ld-logbox{grid-area:log; display:none; width:100%; min-height:0}
.ld-logbox h3{font:700 12px var(--body); letter-spacing:.12em; text-transform:uppercase; color:var(--pmuted); margin:6px 0}
.ld-log{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:4px; font-size:13px; color:#dfe5fb}
.ld-log li{padding-left:10px; border-left:3px solid var(--pc)}
.ld-log li:first-child{color:var(--ptext); font-weight:600}

@media (min-width:900px) and (orientation:landscape){
  .ld-table{--bw:max(300px, min(calc(100vw - 420px), calc(100dvh - var(--phdr, 60px) - 84px), 760px));
    max-width:1180px; grid-template-columns:auto minmax(270px,340px); grid-template-rows:auto auto auto auto 1fr;
    grid-template-areas:"top top" "board seatsT" "board seatsB" "board ctrl" "board log"; column-gap:22px; align-items:start; justify-content:center}
  .ld-seats{width:100%; grid-template-columns:1fr}
  .ld-seats > .ld-seat:nth-child(2){flex-direction:row; text-align:left; padding:2px 10px 2px 2px}
  .ld-seats > .ld-seat:nth-child(2) .ld-bubble{left:6px; right:auto}
  .ld-seat.empty{display:none}
  .ld-seats:has(> .empty) > .ld-seat{justify-self:stretch}
  .ld-ctrl{width:100%; flex-direction:column; align-items:stretch; text-align:center; padding:12px; border-radius:20px; background:rgba(255,255,255,.04); border:1px solid var(--pline)}
  .ld-tray{align-self:center}
  .ld-dice{--d:64px; margin:6px 10px}
  .ld-logbox{display:block}
}
@media (max-height:600px) and (orientation:portrait){ .ld-seat{height:36px} .ld-seat .pava{--s:30px!important} }

/* край на играта */
.ld-result{position:absolute; inset:0; z-index:120; display:grid; place-items:center; border-radius:4.5%; background:rgba(6,12,40,.62); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); animation:pfade .35s ease}
.ld-rcard{width:min(88%,360px); box-sizing:border-box; padding:18px 18px 16px; text-align:center; border-radius:22px; background:var(--pbg2); border:2px solid var(--pc); box-shadow:0 24px 60px rgba(0,0,0,.55), 0 0 40px color-mix(in srgb, var(--pc) 40%, transparent); animation:prise .45s var(--pspring); display:flex; flex-direction:column; align-items:center; gap:6px}
.ld-rcard h2{font:400 clamp(22px,6vw,30px)/1.1 var(--display); margin:4px 0 0; color:var(--paccent)}
.ld-rcard p{margin:0}
.ld-rava{position:relative}
.ld-rava .pava{box-shadow:0 0 0 3px var(--pc), 0 0 0 7px rgba(255,197,61,.4)}
.ld-crown{position:absolute; top:-16px; left:50%; translate:-50% 0; color:var(--paccent); font-size:26px; filter:drop-shadow(0 2px 2px rgba(0,0,0,.5)); animation:ldpop .5s .2s var(--pspring) both}
.ld-coins{display:inline-flex; align-items:center; gap:6px; padding:6px 14px; border-radius:99px; background:rgba(255,197,61,.14); border:1px solid rgba(255,197,61,.5); color:var(--paccent); font-weight:600}
.ld-coins b{font-size:20px}
.ld-ractions{display:flex; flex-direction:column; gap:8px; width:100%; margin-top:8px}

/* наръчник при първа игра */
.ld-coach{position:fixed; inset:0; z-index:85; pointer-events:none}
.ld-spot{position:fixed; border-radius:18px; box-shadow:0 0 0 200vmax rgba(4,8,26,.58), 0 0 0 3px var(--paccent); transition:left .35s var(--pease), top .35s var(--pease), width .35s var(--pease), height .35s var(--pease)}
.ld-tip{position:fixed; left:50%; translate:-50% 0; width:min(calc(100vw - 32px),340px); box-sizing:border-box; pointer-events:auto; display:flex; flex-direction:column; gap:6px; padding:14px 16px; border-radius:16px; background:var(--pbg2); border:1px solid var(--pline2); box-shadow:0 18px 40px rgba(0,0,0,.5); animation:ldpop .3s var(--pspring)}
.ld-tip b{font:400 18px/1.2 var(--display); color:var(--ptext)}
.ld-tip p{margin:0; color:#dfe5fb; font-size:14px; line-height:1.45}

/* меню */
.ld-opt{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 0; border-bottom:1px solid var(--pline); cursor:pointer}
.ld-opt > span{display:flex; flex-direction:column; min-width:0}
.ld-opt small{color:var(--pmuted); font-size:12px}
div.ld-opt{cursor:default; flex-wrap:wrap}

/* ---------- лоби ---------- */
.ld-lobby{display:flex; flex-direction:column; gap:20px}
.ld-hero{display:grid; grid-template-columns:minmax(0,1fr); gap:18px; align-items:center}
.ld-hero-txt{display:flex; flex-direction:column; gap:10px; min-width:0}
.ld-hero-board{width:min(70%,240px); justify-self:center; transform:perspective(900px) rotateX(16deg) rotateZ(-4deg); filter:drop-shadow(0 18px 24px rgba(0,0,0,.35))}
@media (min-width:760px){ .ld-hero{grid-template-columns:1.4fr 1fr} .ld-hero-board{width:min(100%,300px)} }
.ld-resume{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; border-color:rgba(255,197,61,.55); background:linear-gradient(100deg, rgba(255,197,61,.16), rgba(240,140,26,.05)), var(--pcard)}
.ld-resume > div:first-child{display:flex; flex-direction:column}
.ld-grid{display:grid; gap:16px; grid-template-columns:minmax(0,1fr); align-items:start}
@media (min-width:880px){ .ld-grid{grid-template-columns:1.25fr 1fr} }
.ld-setup{display:flex; flex-direction:column; gap:16px}
.ld-field{display:flex; flex-direction:column; gap:8px; min-width:0}
.ld-lab{font:700 12px var(--body); letter-spacing:.12em; text-transform:uppercase; color:var(--pmuted)}
.ld-seg{display:inline-flex; flex-wrap:wrap; gap:4px; padding:4px; border-radius:22px; background:rgba(255,255,255,.06); border:1px solid var(--pline); align-self:flex-start; max-width:100%; box-sizing:border-box}
.ld-seg button{min-height:40px; min-width:44px; padding:0 16px; border:0; border-radius:99px; background:transparent; color:var(--pmuted); font:600 14px var(--body); cursor:pointer; transition:background .2s, color .2s}
.ld-seg button:hover{color:var(--ptext)}
.ld-seg button[aria-pressed="true"]{background:linear-gradient(180deg,var(--paccent),var(--paccent2)); color:var(--pacc-ink); box-shadow:0 2px 0 var(--gold3)}
.ld-seg button:focus-visible,.ld-sw:focus-visible{outline:3px solid var(--paccent); outline-offset:2px}
.ld-seg.sm button{min-height:36px; padding:0 11px; font-size:13px}
.ld-colors{display:flex; gap:10px; flex-wrap:wrap}
.ld-sw{--u:4.6px; width:52px; height:52px; padding:0; border-radius:50%; display:grid; place-items:center; border:2px solid transparent; background:rgba(255,255,255,.05); cursor:pointer; transition:transform .2s var(--pspring), border-color .2s}
.ld-sw .ld-tok{width:36px; height:36px}
.ld-sw:hover{transform:translateY(-2px)}
.ld-sw[aria-checked="true"]{border-color:var(--paccent); box-shadow:0 0 0 4px rgba(255,197,61,.2); transform:scale(1.06)}
.ld-others{display:flex; flex-direction:column; gap:8px}
.ld-opp{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; padding:10px; border-radius:14px; background:rgba(255,255,255,.04); border:1px solid var(--pline); border-left:4px solid var(--pc)}
.ld-opp-who{display:flex; align-items:center; gap:10px; min-width:0}
.ld-opp-who > span:last-child{display:flex; flex-direction:column; min-width:0}
.ld-opp-who small{color:var(--pmuted); font-size:12px}
.ld-opp-set{display:flex; flex-wrap:wrap; gap:6px}
.ld-tok.sm{--u:2.4px; width:18px; height:18px; flex:0 0 auto}
.ld-house summary{cursor:pointer; font-weight:600; padding:6px 0; color:var(--ptext)}
.ld-reward{margin:0; text-align:center; font-size:13px}
.ld-reward b{color:var(--paccent)}
.ld-rules{margin:8px 0 12px; padding-left:18px; line-height:1.5; color:#dfe5fb}
.ld-rules li{margin-bottom:4px}
.ld-how .ph3,.ld-recent .ph3{display:flex; align-items:center; gap:8px}
.ld-how .ph3 .pi,.ld-recent .ph3 .pi{color:var(--paccent)}
.ld-rec{display:flex; align-items:center; gap:10px}
.ld-rec-t{flex:1; min-width:0; display:flex; flex-direction:column; font-size:14px}
.ld-rec-t small{font-size:12px}

/* ---------- повторение ---------- */
.ld-replay{display:flex; flex-direction:column; gap:10px; align-items:center}
.ld-rp-legend{display:flex; flex-wrap:wrap; gap:6px; justify-content:center}
.ld-rp-board{width:min(100%,460px,58vh)}
.ld-board.replay .ld-pawn{transition:transform .38s var(--pease)}
.ld-rp-cap{display:flex; align-items:center; gap:10px; min-height:34px; width:100%; max-width:460px}
.ld-rp-die{display:grid; place-items:center; flex:0 0 auto; width:30px; height:30px; border-radius:8px; background:#fffdf7; color:#14161c; font:700 16px var(--num); box-shadow:0 0 0 2px var(--pc,var(--paccent))}
.ld-rp-txt{font-size:14px; color:var(--ptext)}
.ld-rp-ctrl{display:flex; align-items:center; gap:6px; width:100%; max-width:460px}
.ld-rp-range{flex:1; min-width:60px; accent-color:var(--paccent)}
.ld-rp-n{font-size:13px; color:var(--pmuted); min-width:56px; text-align:right}