/* CY_BORG — виртуальный стол: HUD-слой поверх table.css (киберпанк, жёлтый/розовый/циан на чёрном) */
#table-dlg { --glow-y: 0 0 14px rgba(255, 230, 0, .45); --glow-p: 0 0 18px rgba(255, 61, 180, .5); --glow-c: 0 0 14px rgba(24, 230, 255, .45); --ease: cubic-bezier(.2, .8, .2, 1); scrollbar-color: var(--p) #000; scrollbar-width: thin; }
#table-dlg ::-webkit-scrollbar { width: 8px; height: 8px; }
#table-dlg ::-webkit-scrollbar-track { background: #000; }
#table-dlg ::-webkit-scrollbar-thumb { background: var(--p); border: 2px solid #000; }

/* фон: сетка + сканлайны + виньетка */
.tv {
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 3px),
    radial-gradient(1000px 560px at 50% 42%, rgba(255, 61, 180, .2), transparent 70%),
    radial-gradient(700px 400px at 90% 0%, rgba(24, 230, 255, .12), transparent 70%),
    #05060d;
}

/* шапка */
.tv-h { position: relative; gap: 10px; border-bottom: 0; background: linear-gradient(180deg, #0b0b12, #000); padding: 10px 20px 14px; }
.tv-h::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: repeating-linear-gradient(135deg, var(--y) 0 14px, #000 14px 28px); }
.tv-h small::before { content: '▌'; margin-right: 6px; color: var(--y); animation: tv-blink 1.2s steps(2) infinite; }
.tv-h h2 { text-shadow: 2px 0 var(--p), -2px 0 var(--c); letter-spacing: .02em; }
.tv-st { display: inline-flex; align-items: center; gap: 8px; border: 2px solid rgba(255, 255, 255, .3); padding: 6px 12px; background: #000; }
.tv-st::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: #31ff7a; box-shadow: 0 0 8px #31ff7a; animation: tv-pulse 2s ease-in-out infinite; }
.tv .btn, .tv-h .btn { min-height: 40px; transition: transform .15s var(--ease), box-shadow .15s var(--ease), background-color .15s, color .15s; }
.tv .btn:hover { transform: translate(-2px, -2px); box-shadow: 3px 3px 0 var(--p); }
.tv .btn:active { transform: translate(1px, 1px); box-shadow: none; }
.tv .btn:focus-visible, .tv input:focus-visible, .tv select:focus-visible, .tv summary:focus-visible { outline: 3px solid var(--c); outline-offset: 2px; }

/* стол: вращающиеся кольца и неоновая рамка */
.tv-surface { border-color: var(--p); box-shadow: 0 0 0 8px #000, 0 0 0 11px var(--y), 0 0 70px rgba(255, 61, 180, .4) inset, var(--glow-p); overflow: visible; }
.tv-surface::before, .tv-surface::after { content: ''; position: absolute; border-radius: 50%; pointer-events: none; }
.tv-surface::before { inset: 10%; border: 2px dashed rgba(24, 230, 255, .45); animation: tv-spin 60s linear infinite; }
.tv-surface::after { inset: 24%; border: 1px solid rgba(255, 230, 0, .35); animation: tv-spin 40s linear infinite reverse; }
.tv-center { position: relative; z-index: 1; }
.tv-center b { transition: transform .2s var(--ease); }
.tv-center.fresh b { animation: tv-pop .5s var(--ease); }
.tv-center span { letter-spacing: .2em; color: var(--c); }

/* места игроков: уголки HUD вместо плоской карточки */
.seat { background: linear-gradient(135deg, #12121c, #000 60%); transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s; }
.seat::before, .seat::after { content: ''; position: absolute; width: 10px; height: 10px; pointer-events: none; }
.seat::before { top: -6px; left: -6px; border-top: 3px solid var(--c); border-left: 3px solid var(--c); }
.seat::after { bottom: -6px; right: -6px; border-bottom: 3px solid var(--c); border-right: 3px solid var(--c); }
button.seat:hover { transform: translate(-50%, -50%) scale(1.05); box-shadow: 6px 6px 0 var(--p), var(--glow-y); background: #181822; }
.seat.me { border-color: var(--c); background: linear-gradient(135deg, #06222a, #000 65%); box-shadow: 4px 4px 0 var(--y), var(--glow-c); }
.seat.gm { box-shadow: 4px 4px 0 var(--y), var(--glow-p); }
.seat.off .emb { filter: grayscale(1); }
.seat .hp { height: 12px; border: 1px solid rgba(255, 255, 255, .25); background: repeating-linear-gradient(90deg, #1b1b22 0 6px, #14141a 6px 8px); }
.seat .hp i { background: linear-gradient(90deg, #ff1a0d, #ff3db4); box-shadow: 0 0 8px rgba(255, 26, 13, .6); transition: width .4s var(--ease); }
.seat .hp em { text-shadow: 0 0 3px #000, 0 0 3px #000; line-height: 10px; }
.seat .dot { width: 10px; height: 10px; }
.seat .dot.on { animation: tv-pulse 2s ease-in-out infinite; }

/* правая панель */
.tv-side { background: linear-gradient(180deg, #0a0a10, #000); border-left: 0; position: relative; }
#tv-say .btn { flex: 0 0 auto; white-space: nowrap; }
.tv-side { overflow-x: hidden; }
.tv-side::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, var(--p), var(--c) 50%, var(--y)); }
.tv-dice { gap: 6px; padding: 8px; border: 2px solid rgba(255, 255, 255, .18); background: #050508; position: relative; }
.tv-dice::before { content: 'КУБИКИ'; position: absolute; top: -9px; left: 10px; background: #000; padding: 0 6px; font-family: var(--f-pix); font-size: 11px; letter-spacing: .15em; color: var(--p); }
.tv-dice .btn { flex: 0 0 auto; min-width: 44px; min-height: 44px; font-family: var(--f-pix); font-weight: 700; }
.tv-dice .btn:hover { background: var(--y); color: #000; }
.tv-cnt select { min-height: 40px; }
.tv-log { background: #030306; border: 2px solid rgba(255, 255, 255, .18); }
.tv-log li { border-left: 3px solid transparent; border-bottom: 1px solid rgba(255, 255, 255, .07); padding: 7px 10px; animation: tv-slide .3s var(--ease); }
.tv-log .roll { border-left-color: var(--y); background: linear-gradient(90deg, rgba(255, 230, 0, .08), transparent 60%); }
.tv-log .roll strong { text-shadow: 1px 0 var(--p); }
.tv-log .say { border-left-color: var(--c); }
.tv-log .say.gm { border-left-color: var(--p); background: linear-gradient(90deg, rgba(255, 61, 180, .1), transparent 60%); }
.tv-log .sys { border-left-color: rgba(255, 255, 255, .25); opacity: .75; }
#tv-say input { flex: 1 1 0; min-width: 0; min-height: 44px; background: #050508; }
#tv-say input:focus { border-color: var(--c); box-shadow: var(--glow-c); }
.tv-sheet { border-color: var(--c); box-shadow: var(--glow-c); }

/* трекер боя */
.tv-combat { position: relative; border: 3px solid var(--p); background: linear-gradient(180deg, #0d060b, #050508); box-shadow: var(--glow-p), 6px 6px 0 #000; }
.tv-combat::before { content: ''; position: absolute; left: -3px; right: -3px; top: -3px; height: 5px; background: repeating-linear-gradient(135deg, var(--y) 0 12px, #000 12px 24px); }
.cb-h { padding-top: 6px; }
.cb-h b { text-shadow: 2px 0 var(--p); }
.cb-r { display: inline-block; background: var(--p); color: #000; padding: 0 8px; margin-left: 10px; font-weight: 700; }
.cb-ph { color: var(--c); }
.cb-col { background: rgba(255, 255, 255, .02); transition: border-color .25s, box-shadow .25s; }
.cb-col.act { box-shadow: 4px 4px 0 var(--p), var(--glow-y); animation: tv-turn 2s ease-in-out infinite; }
.cb-now { animation: tv-blink 1s steps(2) infinite; }
.cb-card { position: relative; background: #08080d; border-left-width: 6px; transition: transform .15s var(--ease), opacity .25s, filter .25s; }
.cb-card:hover { transform: translateX(2px); }
.cb-card.sel { outline-offset: 1px; box-shadow: var(--glow-y); }
.cb-card.down { opacity: .4; filter: grayscale(.7); }
.cb-card.down .cb-top b { text-decoration: line-through; text-decoration-color: var(--p); text-decoration-thickness: 3px; }
.cb-hp { height: 22px; border: 2px solid #000; background: repeating-linear-gradient(90deg, #1b1b22 0 8px, #121218 8px 10px); outline: 1px solid rgba(255, 255, 255, .2); }
.cb-hp i { background: linear-gradient(90deg, #17b85a, #2de27a); box-shadow: 0 0 10px rgba(45, 226, 122, .5); transition: width .45s var(--ease), background-color .3s; }
.cb-hp.hurt i { background: linear-gradient(90deg, #d9a400, var(--y)); box-shadow: 0 0 10px rgba(255, 230, 0, .5); }
.cb-hp.down i { background: linear-gradient(90deg, #c4007a, var(--p)); box-shadow: 0 0 10px rgba(255, 61, 180, .6); animation: tv-blink 1s steps(2) infinite; }
.cb-act .btn, .cb-its .btn { min-height: 32px; min-width: 32px; }
.cb-it { background: rgba(255, 255, 255, .05); }
.cb-calc { background: rgba(255, 230, 0, .04); box-shadow: inset 0 0 0 1px rgba(255, 230, 0, .2); }
.cb-res { text-shadow: var(--glow-y); }
.cb-log li:first-child { color: var(--y); }
.cb-rules > summary { padding: 4px 0; }

@keyframes tv-spin { to { transform: rotate(360deg); } }
@keyframes tv-pulse { 50% { opacity: .35; } }
@keyframes tv-blink { 50% { opacity: 0; } }
@keyframes tv-pop { 0% { transform: scale(1.6) rotate(-4deg); filter: brightness(2); } 100% { transform: none; filter: none; } }
@keyframes tv-slide { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
@keyframes tv-turn { 50% { box-shadow: 4px 4px 0 var(--p), 0 0 24px rgba(255, 230, 0, .6); } }

@media (max-width: 720px) {
  .tv-h { padding: 10px 14px 14px; }
  .tv-h h2 { font-size: 26px; }
  button.seat:hover { transform: none; }
  .tv-surface::before, .tv-surface::after { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  #table-dlg *, #table-dlg *::before, #table-dlg *::after { animation: none !important; transition: none !important; }
}

/* ===== фон стола: ночной город, неоновый горизонт, сетка-пол, дождь ===== */
#table-dlg { background: #05060d; }
.tv { position: relative; isolation: isolate; background: linear-gradient(180deg, #05060d 0%, #120a22 45%, #2a0b3a 72%, #05060d 100%); }
.tv > * { position: relative; z-index: 2; }
.tv::before, .tv::after, .tv-bg-sky, .tv-bg-grid { content: ''; position: fixed; left: 0; right: 0; pointer-events: none; z-index: 0; }

/* солнце-неон и свечение горизонта */
.tv::before {
  top: 0; bottom: 0;
  background:
    radial-gradient(circle at 50% 62%, rgba(255, 230, 0, .0) 0 9%, rgba(255, 61, 180, .55) 9.4%, rgba(255, 61, 180, .18) 16%, transparent 38%),
    radial-gradient(900px 300px at 50% 66%, rgba(24, 230, 255, .22), transparent 70%);
  mix-blend-mode: screen;
}
/* дождь + сканлайны + виньетка */
.tv::after {
  top: 0; bottom: 0; z-index: 3;
  background:
    repeating-linear-gradient(104deg, transparent 0 46px, rgba(150, 220, 255, .09) 46px 47px, transparent 47px 93px),
    repeating-linear-gradient(0deg, rgba(0, 0, 0, .22) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, .75) 100%);
  background-size: 93px 120px, auto, auto;
  animation: tv-rain 1.1s linear infinite;
}
@keyframes tv-rain { to { background-position: -30px 120px, 0 0, 0 0; } }

/* два слоя силуэтов города (параллакс) — SVG в data-URI */
.tv-main::before, .tv-main::after { content: ''; position: fixed; left: 0; right: 0; bottom: 14vh; height: 34vh; z-index: -1; pointer-events: none; background-repeat: repeat-x; background-position: bottom; }
.tv-main::before {
  opacity: .55; background-size: 900px 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 900 300' preserveAspectRatio='none'%3E%3Cpath fill='%230b0618' d='M0 300V190h40v-40h50v60h30V120h60v70h40v-90h50v110h30V160h70v-60h40v120h50V140h60v50h40V90h50v130h40V170h60v-50h50v180z'/%3E%3C/svg%3E");
  animation: tv-city 240s linear infinite;
}
.tv-main::after {
  opacity: .9; height: 26vh; background-size: 700px 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 700 300' preserveAspectRatio='none'%3E%3Cpath fill='%23020208' d='M0 300V150h60V80h40v60h50V40h50v100h40V110h70v40h40V60h60v90h50V100h60v50h50V70h60v230z'/%3E%3Cg fill='%23ffe600'%3E%3Crect x='70' y='95' width='6' height='8'/%3E%3Crect x='86' y='115' width='6' height='8'/%3E%3Crect x='170' y='60' width='6' height='8'/%3E%3Crect x='186' y='90' width='6' height='8'/%3E%3Crect x='360' y='75' width='6' height='8'/%3E%3Crect x='440' y='115' width='6' height='8'/%3E%3Crect x='580' y='88' width='6' height='8'/%3E%3C/g%3E%3Cg fill='%23ff3db4'%3E%3Crect x='110' y='125' width='6' height='8'/%3E%3Crect x='250' y='70' width='6' height='8'/%3E%3Crect x='520' y='110' width='6' height='8'/%3E%3Crect x='640' y='90' width='6' height='8'/%3E%3C/g%3E%3Cg fill='%2318e6ff'%3E%3Crect x='300' y='125' width='6' height='8'/%3E%3Crect x='400' y='92' width='6' height='8'/%3E%3Crect x='610' y='128' width='6' height='8'/%3E%3C/g%3E%3C/svg%3E");
  animation: tv-city 120s linear infinite reverse;
}
@keyframes tv-city { to { background-position: 900px bottom; } }

/* сетка-пол в перспективе */
.tv-side, .tv-table { background-color: transparent; }
.tv-table::before {
  content: ''; position: fixed; left: -20%; right: -20%; bottom: -6vh; height: 34vh; z-index: -1; pointer-events: none;
  background:
    repeating-linear-gradient(90deg, rgba(255, 61, 180, .55) 0 2px, transparent 2px 70px),
    repeating-linear-gradient(0deg, rgba(24, 230, 255, .5) 0 2px, transparent 2px 46px);
  transform: perspective(380px) rotateX(62deg); transform-origin: 50% 0;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 35%); mask-image: linear-gradient(180deg, transparent, #000 35%);
  animation: tv-floor 3s linear infinite;
}
@keyframes tv-floor { to { background-position: 0 46px, 0 46px; } }

/* панели читаются поверх фона */
.tv-side { background: rgba(0, 0, 0, .84); }
.tv-h { background: rgba(0, 0, 0, .9); }
.tv-combat { background: rgba(8, 4, 10, .92); }

@media (max-width: 720px) { .tv-table::before { height: 20vh; } .tv::after { animation: none; } }
@media (prefers-reduced-motion: reduce) { .tv::after, .tv-main::before, .tv-main::after, .tv-table::before { animation: none !important; } }

/* ===== фон стола: арт «Город СУ» из рулбука ===== */
.tv {
  background:
    linear-gradient(180deg, rgba(5, 6, 13, .72) 0%, rgba(5, 6, 13, .35) 40%, rgba(5, 6, 13, .8) 100%),
    url("../img/table-bg.jpg") center 35% / cover no-repeat fixed,
    #05060d;
}
.tv::before, .tv-main::before, .tv-main::after, .tv-table::before { display: none; }
.tv::after { background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .2) 0 1px, transparent 1px 3px), radial-gradient(ellipse at center, transparent 50%, rgba(0, 0, 0, .7) 100%); animation: none; }
.tv-surface { background: repeating-linear-gradient(90deg, rgba(24, 230, 255, .1) 0 1px, transparent 1px 34px), repeating-linear-gradient(0deg, rgba(24, 230, 255, .1) 0 1px, transparent 1px 34px), radial-gradient(circle, rgba(16, 26, 58, .78), rgba(7, 11, 28, .88) 70%); }
.tv-side, .tv-h { background: rgba(0, 0, 0, .8); }
@media (max-width: 720px) { .tv { background-attachment: scroll; } }

/* фон на всё окно, без пустой полосы внизу */
#table-dlg { background: linear-gradient(180deg, rgba(5, 6, 13, .72), rgba(5, 6, 13, .35) 40%, rgba(5, 6, 13, .8)), url("../img/table-bg.jpg") center 35% / cover no-repeat fixed, #05060d; }
#table-dlg[open] { display: block; }
.tv { min-height: 100vh; min-height: 100dvh; background: none; }
.tv-main { align-items: stretch; }
.tv-side { max-height: none; }
@media (min-width: 981px) { .tv-side { position: sticky; top: 0; align-self: start; max-height: 100vh; overflow-y: auto; } }
@media (min-width: 981px) { .tv-side { align-self: stretch; max-height: none; position: static; } }

/* ===== «Бой» — всплывающее окно поверх стола ===== */
.tv > .tv-combat {
  position: fixed; z-index: 50; left: 50%; top: 50%; margin: 0; transform: translate(-50%, -50%);
  width: min(1120px, calc(100vw - 24px)); max-height: min(88vh, 900px); overflow: auto;
  background: rgba(8, 4, 10, .97); box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .68), var(--glow-p), 8px 8px 0 #000;
  animation: tv-popup .25s var(--ease);
}
.tv > .tv-combat[hidden] { display: none; }
.tv-combat .cb-h { position: sticky; top: -12px; z-index: 2; margin: -12px -12px 0; padding: 10px 12px; background: #000; border-bottom: 2px solid var(--p); }
@keyframes tv-popup { from { opacity: 0; transform: translate(-50%, -46%) scale(.96); } to { opacity: 1; transform: translate(-50%, -50%); } }
@media (max-width: 720px) { .tv > .tv-combat { width: calc(100vw - 12px); max-height: 92vh; } }
.tv > .tv-combat { overflow-x: hidden; }
.tv-combat .cb-top, .tv-combat .cb-act, .tv-combat .cb-its { min-width: 0; }

/* ===== живой фон: дрейф камеры, глитч-подрагивания, дождь, сканирующий луч ===== */
#table-dlg { background: #05060d; }
.tv::before {
  display: block; content: ''; position: fixed; inset: -6%; z-index: 0; pointer-events: none;
  background: linear-gradient(rgba(5, 6, 13, .5), rgba(5, 6, 13, .5)), url("../img/table-bg.jpg") center 35% / cover no-repeat;
  animation: tv-drift 38s ease-in-out infinite alternate, tv-glitch 8s steps(1) infinite;
  backface-visibility: hidden;
}
.tv::after {
  background:
    repeating-linear-gradient(103deg, transparent 0 38px, rgba(160, 225, 255, .1) 38px 39px, transparent 39px 77px),
    repeating-linear-gradient(103deg, transparent 0 61px, rgba(255, 255, 255, .06) 61px 62px, transparent 62px 131px),
    repeating-linear-gradient(0deg, rgba(0, 0, 0, .2) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at center, transparent 48%, rgba(0, 0, 0, .75) 100%);
  background-size: 77px 140px, 131px 190px, auto, auto;
  animation: tv-rain2 .9s linear infinite, tv-flicker 6s steps(1) infinite;
}
@keyframes tv-drift { from { scale: 1; translate: 0 0; } to { scale: 1.1; translate: -2.5% 1.8%; } }
@keyframes tv-glitch {
  0%, 90%, 93%, 96.5%, 100% { transform: none; }
  91% { transform: translate(-9px, 2px) skewX(-1.5deg); }
  92% { transform: translate(7px, -3px) skewX(2deg); }
  95% { transform: translate(-4px, 1px); }
  96% { transform: translate(5px, 0); }
}
@keyframes tv-rain2 { to { background-position: -26px 140px, -44px 190px, 0 0, 0 0; } }
@keyframes tv-flicker { 0%, 100% { opacity: 1; } 47% { opacity: 1; } 48% { opacity: .75; } 49% { opacity: 1; } 71% { opacity: .85; } 72% { opacity: 1; } }

/* сканирующий неоновый луч */
.tv-main::before {
  display: block; content: ''; position: fixed; left: 0; right: 0; top: 0; height: 140px; z-index: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(24, 230, 255, .1) 50%, rgba(255, 61, 180, .12) 52%, transparent);
  animation: tv-scan 7s linear infinite;
}
@keyframes tv-scan { from { transform: translateY(-160px); } to { transform: translateY(105vh); } }

/* мерцание неона в шапке и лёгкая «дыхалка» столешницы и мест */
.tv-h h2 { animation: tv-neon 5s steps(1) infinite; }
@keyframes tv-neon { 0%, 100% { opacity: 1; } 52% { opacity: 1; } 53% { opacity: .55; } 54% { opacity: 1; } 56% { opacity: .7; } 57% { opacity: 1; } }
.tv-surface { animation: tv-breathe 4s ease-in-out infinite; }
@keyframes tv-breathe { 50% { box-shadow: 0 0 0 8px #000, 0 0 0 11px var(--y), 0 0 90px rgba(255, 61, 180, .55) inset, 0 0 26px rgba(255, 61, 180, .7); } }
.tv-center b { animation: tv-jit 3.2s steps(1) infinite; }
@keyframes tv-jit { 0%, 100% { text-shadow: 3px 0 var(--p), -3px 0 var(--c); } 60% { text-shadow: 5px 0 var(--p), -5px 0 var(--c); transform: translateX(1px); } 61% { text-shadow: -3px 0 var(--p), 3px 0 var(--c); transform: translateX(-1px); } 62% { transform: none; } }
.seat { animation: tv-float 5s ease-in-out infinite; }
.seat:nth-child(2n) { animation-duration: 6.3s; animation-delay: -1.5s; }
.seat:nth-child(3n) { animation-duration: 7.1s; animation-delay: -3s; }
@keyframes tv-float { 50% { translate: 0 -4px; } }
button.seat:hover { animation-play-state: paused; }
@media (max-width: 720px) { .tv-main::before { display: none; } .tv::before { inset: -3%; } }

/* ===== объёмный кубик в центре стола ===== */
.tv-center { display: grid; justify-items: center; gap: 6px; padding: 0; width: 100%; }
.tv-center .dc-who { font-family: var(--f-pix); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: #fff; opacity: .9; text-shadow: 0 0 8px #000; }
.tdie { --col: var(--y); --glow: rgba(255, 230, 0, .45); position: relative; width: 140px; height: 140px; margin: calc(70px * (var(--dscale, 1.5) - 1) + 8px) 0; perspective: 1300px; scale: var(--dscale, 1.5); filter: drop-shadow(0 0 16px var(--glow)); }
.tdie::after { content: ''; position: absolute; left: 10%; right: 10%; bottom: -26px; height: 20px; border-radius: 50%; background: radial-gradient(ellipse, rgba(0, 0, 0, .75), transparent 70%); }
.tdie .hop, .tdie .tilt, .tdie .spin, .tdie .poly { position: absolute; inset: 0; transform-style: preserve-3d; }
.tdie .tilt { transform: rotateX(-9deg) rotateY(12deg); }
.tf { position: absolute; left: 0; top: 0; width: 140px; height: 140px; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.tf svg { width: 100%; height: 100%; overflow: visible; display: block; }
.tf polygon { stroke: var(--col); stroke-width: 2.6; stroke-linejoin: round; fill: #141026; }
.tf.t0 polygon { fill: #1b1236; } .tf.t1 polygon { fill: #0f1030; } .tf.t2 polygon { fill: #221036; } .tf.t3 polygon { fill: #0b0b24; } .tf.t4 polygon { fill: #1a0f2c; }
.tf.win polygon { fill: #2a1244; }
.tf text { font-family: var(--f-head); font-weight: 700; fill: var(--col); text-anchor: middle; dominant-baseline: central; paint-order: stroke; stroke: #000; stroke-width: 2px; stroke-linejoin: round; }
.tdie .ring { position: absolute; inset: 6%; border-radius: 50%; border: 3px solid var(--col); opacity: 0; pointer-events: none; transform: translateZ(0); }
.dc-res { font-family: var(--f-head); font-size: 40px; line-height: 1; color: var(--col, var(--y)); text-shadow: 3px 0 var(--p), -3px 0 var(--c); min-height: 40px; }
.tv-center.idle .dc-res, .tv-center.rolling .dc-res { visibility: hidden; }
.dc-dice, .dc-hist { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; min-height: 26px; }
.dc-dice i { font-style: normal; font-family: var(--f-pix); font-weight: 700; min-width: 28px; padding: 2px 8px; text-align: center; background: #000; color: var(--c); border: 2px solid var(--c); box-shadow: 2px 2px 0 var(--p); animation: dc-chip .35s var(--ease) both; }
.dc-hist { min-height: 22px; }
.dc-hist i { font-style: normal; font-family: var(--f-pix); font-size: 12px; padding: 1px 7px; color: rgba(255, 255, 255, .7); border: 1px solid rgba(255, 255, 255, .25); background: rgba(0, 0, 0, .55); }
.dc-hist i:last-child { color: #fff; border-color: rgba(255, 255, 255, .5); }

/* ожидание: кость медленно вращается */
.tv-center.idle .tdie { --col: var(--c); --glow: rgba(24, 230, 255, .35); opacity: .85; }
.tdie .spin.idle { animation: die-idle 14s linear infinite; }
@keyframes die-idle { to { transform: rotateY(360deg) rotateX(360deg); } }

/* бросок: кость влетает сбоку дугой, трижды ударяется о стол, тень и искры реагируют на каждый удар */
.tv-center.rolling .tdie { --col: var(--c); --glow: rgba(24, 230, 255, .6); }
.tdie.thrown .hop { animation: die-hop var(--dur, 1.15s) linear var(--dl) both, die-squash var(--dur, 1.15s) linear var(--dl) both; transform-origin: 50% 88%; }
.tdie .spin.throw { animation: die-roll var(--dur, 1.15s) var(--ease, cubic-bezier(.12, .68, .22, 1)) var(--dl) both; }
.tdie.thrown::after { animation: die-shadow var(--dur, 1.15s) linear var(--dl) both; }
@keyframes die-hop {
  0% { translate: var(--sx) var(--sy); opacity: 0; animation-timing-function: cubic-bezier(.5, 0, .9, .6); }
  5% { opacity: 1; }
  30% { translate: calc(var(--sx) * .3) 0; animation-timing-function: cubic-bezier(.1, .6, .4, 1); }
  42% { translate: calc(var(--sx) * .14) calc(var(--h1) * -1); animation-timing-function: cubic-bezier(.6, 0, .9, .5); }
  54% { translate: calc(var(--sx) * .05) 0; animation-timing-function: cubic-bezier(.1, .6, .4, 1); }
  64% { translate: calc(var(--sx) * .02) calc(var(--h2) * -1); animation-timing-function: cubic-bezier(.6, 0, .9, .5); }
  72% { translate: 0 0; animation-timing-function: cubic-bezier(.1, .6, .4, 1); }
  82% { translate: 0 calc(var(--h3) * -1); animation-timing-function: cubic-bezier(.6, 0, .9, .5); }
  90%, 100% { translate: 0 0; opacity: 1; }
}
@keyframes die-squash {
  0%, 29% { scale: 1 1; } 30% { scale: 1.14 .84; } 36% { scale: .96 1.05; } 42% { scale: 1 1; }
  53% { scale: 1 1; } 54% { scale: 1.08 .92; } 60% { scale: 1 1; } 71% { scale: 1 1; } 72% { scale: 1.04 .96; } 78%, 100% { scale: 1 1; }
}
@keyframes die-roll { from { transform: rotate3d(var(--ax, 1), var(--ay, .75), var(--az, .35), calc(var(--turns, -1440) * 1deg)); } to { transform: rotate3d(var(--ax, 1), var(--ay, .75), var(--az, .35), 0deg); } }
@keyframes die-shadow {
  0% { opacity: 0; scale: .3; } 12% { opacity: .35; scale: .5; } 30% { opacity: 1; scale: 1.05; } 42% { opacity: .45; scale: .62; }
  54% { opacity: 1; scale: 1; } 64% { opacity: .65; scale: .78; } 72% { opacity: 1; scale: 1; } 82% { opacity: .85; scale: .92; } 100% { opacity: 1; scale: 1; }
}
.sparks { position: absolute; left: 50%; bottom: 6px; width: 0; height: 0; pointer-events: none; z-index: 3; }
.sparks i { position: absolute; left: -2px; top: -2px; width: 5px; height: 5px; background: var(--col); box-shadow: 0 0 8px var(--col); opacity: 0; animation: spark .55s ease-out calc(var(--dl) + var(--dur, 1.15s) * .3) both; }
.sparks i.b { width: 3px; height: 3px; animation-delay: calc(var(--dl) + var(--dur, 1.15s) * .54); animation-duration: .4s; }
@keyframes spark { 0% { opacity: 0; transform: translate(0, 0); } 6% { opacity: 1; } 100% { opacity: 0; transform: translate(calc(cos(var(--a)) * var(--r)), calc(sin(var(--a)) * var(--r) * -1.1 + 14px)); } }
.dice-row { position: relative; max-width: 100%; margin: 4px auto; }
.dice-row .tdie { flex: 0 0 auto; }
/* стол вздрагивает при ударах */
.tv-surface:has(.rolling) { animation: tv-breathe 4s ease-in-out infinite, tv-bump 1.15s linear 1; }
@keyframes tv-bump { 0%, 29%, 45%, 53%, 60%, 71%, 76%, 100% { translate: 0 0; } 31% { translate: 0 3px; } 43% { translate: 0 -1px; } 55% { translate: 0 2px; } 73% { translate: 0 1px; } }
.tv-center.landed .tdie .ring { animation: die-ring .8s ease-out; }
.tv-center.landed .dc-res { animation: tv-pop .45s var(--ease); }
@keyframes die-ring { 0% { opacity: .9; transform: scale(.7); } 100% { opacity: 0; transform: scale(2.1); } }
@keyframes dc-chip { from { opacity: 0; transform: translateY(10px) scale(.7); } to { opacity: 1; transform: none; } }

/* крит и провал */
.tv-center.crit .tdie { --col: #ffd400; --glow: rgba(255, 212, 0, .95); animation: die-crit 1.2s ease-in-out infinite; }
.tv-center.crit .dc-who, .tv-center.crit .dc-res { color: #ffd400; }
.tv-center.crit .tdie .ring { animation: die-ring .8s ease-out 3; }
@keyframes die-crit { 50% { filter: drop-shadow(0 0 40px rgba(255, 212, 0, 1)) drop-shadow(0 0 70px rgba(255, 61, 180, .7)); } }
.tv-center.fumble .tdie { --col: var(--r); --glow: rgba(255, 26, 13, .9); animation: die-shake .5s steps(2) 3; }
.tv-center.fumble .dc-who, .tv-center.fumble .dc-res { color: var(--r); }
@keyframes die-shake { 25% { translate: -6px 0; } 75% { translate: 6px 0; } }

/* столешница: яркая рамка при броске */
.tv-surface:has(.rolling) { box-shadow: 0 0 0 8px #000, 0 0 0 11px var(--c), 0 0 90px rgba(24, 230, 255, .45) inset, 0 0 40px rgba(24, 230, 255, .6); }
.tv-surface:has(.crit) { box-shadow: 0 0 0 8px #000, 0 0 0 11px #ffd400, 0 0 110px rgba(255, 212, 0, .5) inset, 0 0 50px rgba(255, 212, 0, .7); }
.tv-surface:has(.fumble) { box-shadow: 0 0 0 8px #000, 0 0 0 11px var(--r), 0 0 110px rgba(255, 26, 13, .5) inset; }
.tv-center b { animation: none; }

@media (max-width: 720px) { .tdie { --dscale: 1.1; } }
@media (min-height: 860px) and (min-width: 981px) { .tdie { --dscale: 1.85; } }
/* упавшая кость: у d4 и d6 остаётся объёмная поза (иначе это плоский треугольник или квадрат), у остальных выпавшая грань смотрит строго на игрока */
.tdie .tilt { transition: transform .45s var(--ease); }
.tdie[data-k="4"] { --lx: -34deg; --ly: 36deg; }
.tdie[data-k="6"] { --lx: -26deg; --ly: 34deg; }
.tdie[data-k="8"] { --lx: 0deg; --ly: 0deg; }
.tdie[data-k="10"] { --lx: 0deg; --ly: 0deg; }
.tdie[data-k="12"] { --lx: 0deg; --ly: 0deg; }
.tdie[data-k="20"] { --lx: 0deg; --ly: 0deg; }
.tv-center.landed .tdie .tilt { transform: rotateX(var(--lx, -22deg)) rotateY(var(--ly, 26deg)); }
/* выпавшая грань подсвечена: заливка цветом кости, толстый контур и мерцающая цифра */
.tv-center.landed .tf.win polygon { fill: color-mix(in srgb, var(--col) 34%, #141026); stroke-width: 4.2; }
.tv-center.landed .tf.win text { fill: #fff; stroke: var(--col); stroke-width: 3px; filter: drop-shadow(0 0 6px var(--col)); }
@media (prefers-reduced-motion: no-preference) {
  .tv-center.landed .tf.win polygon { animation: die-win 1.3s ease-in-out infinite alternate; }
  @keyframes die-win { from { fill: color-mix(in srgb, var(--col) 22%, #141026); } to { fill: color-mix(in srgb, var(--col) 48%, #141026); } }
}

/* страховка: статичный фон на самом окне — если анимированный слой сбросится видеодрайвером, картинка не пропадёт */
#table-dlg { background: linear-gradient(rgba(5, 6, 13, .55), rgba(5, 6, 13, .55)), url("../img/table-bg.jpg") center 35% / cover no-repeat fixed, #05060d; }

/* ===== журнал стола: в окне видны последние ~10 записей, остальное прокручивается; высота подстраивается под экран ===== */
.tv-side { --row: 44px; } /* высота строки броска ≈ 43px */
.tv-side .tv-log {
  flex: 0 0 auto; min-height: 0; max-height: none;
  height: clamp(150px, calc(10 * var(--row) + 4px), calc(100dvh - 330px));
  overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scroll-behavior: smooth;
  scrollbar-width: thin; scrollbar-color: var(--p) #0b0b12;
}
.tv-side .tv-log::-webkit-scrollbar { width: 8px; }
.tv-side .tv-log::-webkit-scrollbar-track { background: #0b0b12; }
.tv-side .tv-log::-webkit-scrollbar-thumb { background: var(--p); border: 2px solid #0b0b12; }
.tv-side .tv-log:focus-visible { outline: 2px solid var(--c); outline-offset: 2px; }
/* стол ниже таблицы (узкий экран): окно журнала не больше половины высоты экрана */
@media (max-width: 980px) { .tv-side .tv-log { height: clamp(150px, calc(10 * var(--row) + 4px), 48dvh); } }
@media (max-width: 520px) { .tv-side { --row: 42px; } .tv-side .tv-log li { padding: 6px 8px; } }
@media (max-height: 560px) { .tv-side .tv-log { height: clamp(110px, calc(10 * var(--row) + 4px), 42dvh); } }

/* ===== телефон: без рассадки игроков, кубик и его поле компактнее ===== */
@media (max-width: 720px) {
  .tv-seats { display: none; }
  .tv-table { margin: 8px 10px 4px; }
  .tv-surface { margin-bottom: 0; min-height: 0; padding: 2px; }
  .tdie { --dscale: .7; }
  .tv-center { gap: 2px; }
  .tv-center .dc-who { font-size: 11px; }
  .dc-res { font-size: 30px; min-height: 30px; }
  .dc-dice, .dc-hist { min-height: 0; gap: 4px; }
  .dc-dice i { min-width: 24px; padding: 1px 6px; }
}

/* ===== живой лист: ПЗ, глитчи, кредики и состояние меняются в игре (игрок — свои, мастер — любые) ===== */
.lv { display: grid; gap: 8px; padding: 10px; margin: 8px 0; border: 2px solid var(--p); background: #08050c; box-shadow: 4px 4px 0 #000; }
.lv-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.lv-k { font-family: var(--f-pix); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--c); min-width: 66px; }
.lv-bar { flex: 1 1 90px; height: 14px; border: 2px solid rgba(255, 255, 255, .3); background: #000; overflow: hidden; }
.lv-bar i { display: block; height: 100%; background: linear-gradient(90deg, #31ff7a, var(--y)); transition: width .5s var(--ease); }
.lv-bar.low i { background: var(--r); }
.lv-bar.gl i { background: linear-gradient(90deg, var(--c), var(--p)); }
.lv-v { font-family: var(--f-head); font-size: 22px; line-height: 1; color: var(--y); min-width: 56px; text-align: right; display: inline-block; }
.lv-v.wide { min-width: 0; text-align: left; }
.lv-btns { display: flex; flex-wrap: wrap; gap: 6px; }
.lv-btns .btn { min-height: 38px; min-width: 44px; justify-content: center; }
.lv-na { opacity: .6; font-size: 13px; }
.lv-cond { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.lv-cond input { flex: 1 1 140px; min-width: 0; min-height: 38px; font-size: 14px; padding: 6px 8px; border-width: 2px; background: #050508; }
.seat .hp.low i { background: var(--r); }
@media (prefers-reduced-motion: no-preference) {
  .lv-v.chg { animation: lv-chg .7s cubic-bezier(.2, .8, .2, 1); }
  @keyframes lv-chg { 0% { transform: scale(1.7); color: #fff; text-shadow: 0 0 16px var(--p); } 100% { transform: none; } }
}

/* мастер: выбор листа игрока в шапке стола */
.tv-sheets { min-height: 40px; max-width: 220px; padding: 6px 10px; font: 700 14px var(--f-head); text-transform: uppercase; color: var(--y); background: #000; border: 2px solid #fff; box-shadow: 3px 3px 0 var(--p); cursor: pointer; }
.tv-sheets[hidden] { display: none; }
.tv-sheets option { background: #000; color: #fff; text-transform: none; }

/* прокачка по рулбуку: итоги последних бросков */
.lv-last { list-style: none; margin: 0; padding: 8px 10px; display: grid; gap: 4px; border: 1px dashed rgba(255, 255, 255, .3); background: rgba(0, 0, 0, .35); font-size: 14px; }
.lv-last li { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; }
.lv-last i { font: 700 12px var(--f-pix); font-style: normal; color: var(--c); min-width: 74px; }
.lv-last li.up b, .lv-last li.up { color: #31ff7a; }
.lv-last li.dn b, .lv-last li.dn { color: var(--r); }
.lv-last li.up i, .lv-last li.dn i { color: var(--c); }
@media (prefers-reduced-motion: no-preference) {
  .lv-last.new li { animation: lv-new .5s cubic-bezier(.2, .8, .2, 1) both; }
  .lv-last.new li:nth-child(2) { animation-delay: .08s; } .lv-last.new li:nth-child(3) { animation-delay: .16s; } .lv-last.new li:nth-child(4) { animation-delay: .24s; }
  .lv-last.new li:nth-child(5) { animation-delay: .32s; } .lv-last.new li:nth-child(6) { animation-delay: .4s; } .lv-last.new li:nth-child(7) { animation-delay: .48s; }
  @keyframes lv-new { from { opacity: 0; transform: translateX(-16px); filter: brightness(2.4); } }
}