/* Backgammon: the page's own look (loaded only on its page, after app.css and t21.css, whose panels, time bar and
   messages it shares). A wooden board with its lid, turned checkers, real dice. The admin chooses the board, the
   checkers and the dice (the classes tvb-*, tvc-*, tvd-* below). */

/* ---------- top bar: a little board with a die ---------- */
.logo-tv { position: relative; width: 40px; height: 40px; flex: none; }
.logo-tv svg { width: 40px; height: 40px; display: block; filter: drop-shadow(0 3px 5px rgba(0,0,0,.45)); }
.logo-die { position: absolute; right: -3px; bottom: -2px; width: 15px; height: 15px; border-radius: 4px; background: linear-gradient(145deg, #fff, #e9e1cf);
  box-shadow: 0 2px 4px rgba(0,0,0,.5); transform: rotate(-14deg); display: grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr); padding: 2px; }
.logo-die b { width: 3px; height: 3px; border-radius: 50%; background: #1c1830; place-self: center; }
.logo-die b:nth-child(1) { grid-area: 1 / 1; } .logo-die b:nth-child(2) { grid-area: 2 / 2; } .logo-die b:nth-child(3) { grid-area: 3 / 3; }

/* ---------- the themes (the admin's choice): modern boards — gloss lacquer frames, smooth playing fields, clean points ---------- */
.tvb-modern { --wd1: #343946; --wd2: #1a1d25; --wd3: #0b0d12; --grain-a: .05; --fl1: #1c3f4b; --fl2: #143039; --fiber-a: 0;
  --pa1: #cfd5e0; --pa2: #f8f9fc; --pb1: #a81f36; --pb2: #e2485d; --inlay: rgba(255,255,255,.22); --bar: #0f1116; --tray: #06070a;
  --screw: #aab3c4; --num: rgba(215,225,245,.38); --gloss-a: 1; }
.tvb-midnight { --wd1: #2a3761; --wd2: #151c38; --wd3: #0a0f20; --grain-a: .04; --fl1: #182649; --fl2: #111c3b; --fiber-a: 0;
  --pa1: #b8913e; --pa2: #ecca76; --pb1: #c3c9d5; --pb2: #f2f4f8; --inlay: rgba(255,255,255,.2); --bar: #0b1024; --tray: #060a17;
  --screw: #cfae5e; --num: rgba(220,228,255,.36); --gloss-a: 1; }
.tvb-arctic { --wd1: #fbfcfe; --wd2: #e3e7ee; --wd3: #c4cad6; --grain-a: 0; --fl1: #edf1f5; --fl2: #e1e6ec; --fiber-a: 0;
  --pa1: #2c3340; --pa2: #4d5769; --pb1: #0e8e8a; --pb2: #27c3bc; --inlay: rgba(0,0,0,.1); --bar: #d3d9e2; --tray: #bcc3cf;
  --screw: #8a93a3; --num: rgba(40,50,70,.42); --gloss-a: .8; }
.tvb-carbon { --wd1: #2d2e33; --wd2: #151619; --wd3: #070708; --grain-a: .03; --fl1: #26282d; --fl2: #1d1f23; --fiber-a: 0;
  --pa1: #b01c2e; --pa2: #e8394b; --pb1: #aab0bb; --pb2: #e6e9ef; --inlay: rgba(255,255,255,.14); --bar: #0c0d0f; --tray: #050506;
  --screw: #9095a0; --num: rgba(230,232,240,.32); --gloss-a: 1; }
.tvb-emerald { --wd1: #1f4036; --wd2: #10261f; --wd3: #06120e; --grain-a: .04; --fl1: #125c47; --fl2: #0d4737; --fiber-a: 0;
  --pa1: #d6dbe1; --pa2: #f8f9fb; --pb1: #b88b2e; --pb2: #e8c563; --inlay: rgba(255,255,255,.2); --bar: #08170f; --tray: #040c08;
  --screw: #cfae5e; --num: rgba(220,245,235,.36); --gloss-a: 1; }
/* classic, as the boards in the shops: varnished wood everywhere, the grain under the gloss, dark and cream points */
.tvb-classic { --wd1: #8f4c22; --wd2: #5e2f12; --wd3: #351a08; --grain-a: .5; --fl1: #cf9f66; --fl2: #b9884f; --fiber-a: 0; --fgrain-a: .38;
  --pa1: #3f1d0b; --pa2: #6e3719; --pb1: #d9c299; --pb2: #f6e9cb; --inlay: rgba(240,205,130,.55); --bar: #4a240d; --tray: #2a1406;
  --screw: #e2bd62; --num: rgba(255,236,200,.45); --gloss-a: .9; }
/* space: a black gloss frame, a deep galaxy for a playing field with stars and a nebula, neon points */
.tvb-space { --wd1: #2c2446; --wd2: #120e24; --wd3: #05040c; --grain-a: 0; --fl1: #0b0a26; --fl2: #150d3a; --fiber-a: 0; --space-a: 1;
  --nb1: #7b3fe4; --nb2: #1fb6d9; --pa1: #0e7c9a; --pa2: #3fe3ff; --pb1: #8a1f9e; --pb2: #f04fd6; --inlay: rgba(190,230,255,.45);
  --bar: #0a0818; --tray: #04030a; --screw: #9fd8ff; --num: rgba(190,220,255,.45); --gloss-a: 1; }
/* two more from space: a violet nebula with gold points; the northern lights over a dark sky */
.tvb-nebula { --wd1: #3a2350; --wd2: #1a0f2a; --wd3: #080410; --grain-a: 0; --fl1: #150a26; --fl2: #1f0d35; --fiber-a: 0; --space-a: 1;
  --nb1: #d0368a; --nb2: #6a3df0; --pa1: #a67a2a; --pa2: #f0cd6e; --pb1: #c9c3dc; --pb2: #fbf8ff; --inlay: rgba(255,220,160,.45);
  --bar: #0c0616; --tray: #05020a; --screw: #f0cd6e; --num: rgba(240,210,255,.45); --gloss-a: 1; }
.tvb-aurora { --wd1: #16323d; --wd2: #0a1a22; --wd3: #03090d; --grain-a: 0; --fl1: #06141c; --fl2: #0a2230; --fiber-a: 0; --space-a: 1;
  --nb1: #1fd89a; --nb2: #3a7cff; --pa1: #139a6a; --pa2: #5dffbe; --pb1: #6fa9d8; --pb2: #dff3ff; --inlay: rgba(200,255,235,.4);
  --bar: #041017; --tray: #02070a; --screw: #8fffd6; --num: rgba(200,255,235,.45); --gloss-a: 1; }
.tv-svg .fgrain { opacity: var(--fgrain-a, 0); }
.tv-svg .space { opacity: var(--space-a, 0); }
.tv-svg .space circle { fill: #fff; }
.tv-svg .nb1 { stop-color: var(--nb1, #000); } .tv-svg .nb2 { stop-color: var(--nb2, #000); }
.tv-svg .wd1 { stop-color: var(--wd1); } .tv-svg .wd2 { stop-color: var(--wd2); } .tv-svg .wd3 { stop-color: var(--wd3); }
.tv-svg .fl1 { stop-color: var(--fl1); } .tv-svg .fl2 { stop-color: var(--fl2); }
.tv-svg .pa1 { stop-color: var(--pa1); } .tv-svg .pa2 { stop-color: var(--pa2); } .tv-svg .pb1 { stop-color: var(--pb1); } .tv-svg .pb2 { stop-color: var(--pb2); }
.tv-svg .grain { opacity: var(--grain-a); }
.tv-svg .gloss { opacity: var(--gloss-a, 1); pointer-events: none; }
.tv-svg .fiber { opacity: var(--fiber-a); }
.tv-svg .bevel-l { fill: none; stroke: rgba(255,255,255,.24); stroke-width: .5; }
.tv-svg .bevel-d { fill: none; stroke: rgba(0,0,0,.45); stroke-width: .6; }
.tv-svg .pt { stroke: var(--inlay); stroke-width: .28; stroke-linejoin: round; }
.tv-svg .bar { fill: var(--bar); }
.tv-svg .bar-edge { fill: none; stroke: rgba(0,0,0,.5); stroke-width: .5; }
.tv-svg .screw { fill: var(--screw); }
.tv-svg .tray { fill: var(--tray); }
/* the lid: deep wells (dark at the top left where the wall throws its shadow, a little light on the floor and on the
   far edge), a lip round them, a raised divider */
.tv-svg .tf1 { stop-color: color-mix(in srgb, var(--tray) 80%, #000); }
.tv-svg .tf2 { stop-color: color-mix(in srgb, var(--fl2) 40%, var(--tray)); }
.tv-svg .well-shade { fill: none; stroke: rgba(0,0,0,.9); stroke-width: 4.2; transform: translate(.9px, .9px); }
.tv-svg .well-light { fill: none; stroke: rgba(255,255,255,.16); stroke-width: .45; }
.tv-svg .well-lip-d { fill: none; stroke: rgba(0,0,0,.7); stroke-width: .6; }
.tv-svg .well-lip-l { fill: none; stroke: rgba(255,255,255,.2); stroke-width: .45; }
.tv-svg .tray-bar { stroke: rgba(0,0,0,.6); stroke-width: .3; }
.tv-svg .tray-bar-hi { stroke: rgba(255,255,255,.45); stroke-width: .35; }
.tv-svg .bar-drop { fill: rgba(0,0,0,.75); }
.tv-svg .inner-shade rect { fill: none; stroke: rgba(0,0,0,.6); stroke-width: 3.4; }
.tv-svg .edge-in { fill: none; stroke: rgba(0,0,0,.5); stroke-width: .45; }
.tv-svg .nums text { font: 700 2px 'Inter', system-ui, sans-serif; fill: var(--num); text-anchor: middle; letter-spacing: .05px; }

/* the checkers: smooth and glossy, a bright reflection, a real shadow (the light: top left) */
.tvc-glossy { --c0h: #ffffff; --c0: #eef1f6; --c0e: #c7cedb; --c0r: #7f889b; --c0n: #2a3040;
  --c1h: #626878; --c1: #23262e; --c1e: #0f1116; --c1r: #000; --c1n: #f1f4fa; }
.tvc-classic { --c0h: #ffffff; --c0: #f3efe6; --c0e: #d4cdbf; --c0r: #8c8574; --c0n: #2a2622;
  --c1h: #4c4c55; --c1: #1b1b20; --c1e: #0c0c0f; --c1r: #000; --c1n: #f3efe6; }
.tvc-planets { --c0h: #ffc09a; --c0: #e0582a; --c0e: #8c2a0d; --c0r: #3a0f03; --c0n: #fff;
  --c1h: #9fd6ff; --c1: #2a6fd6; --c1e: #123a8a; --c1r: #050f33; --c1n: #fff; }
.tvc-neon { --c0h: #c8ffff; --c0: #23d9e8; --c0e: #0a7f95; --c0r: #02323b; --c0n: #02262c;
  --c1h: #ffd0f6; --c1: #e03fc4; --c1e: #8a1275; --c1r: #33062b; --c1n: #fff; }
.tvc-neon .ck:not(.off) { box-shadow: inset calc(var(--u) * .28) calc(var(--u) * .32) calc(var(--u) * .22) rgba(255,255,255,.45),
  inset calc(var(--u) * -.3) calc(var(--u) * -.38) calc(var(--u) * .3) rgba(0,0,0,.38), 0 0 0 calc(var(--u) * .1) rgba(0,0,0,.55),
  0 calc(var(--u) * .38) 0 var(--kr), 0 0 calc(var(--u) * 1.6) var(--kb), calc(var(--u) * .4) calc(var(--u) * 1) calc(var(--u) * 1.1) rgba(0,0,0,.45); }
.tvc-redblue { --c0h: #ff8a99; --c0: #dc2440; --c0e: #9b1027; --c0r: #4d0613; --c0n: #fff;
  --c1h: #7eaaff; --c1: #2558d6; --c1e: #153a91; --c1r: #07173f; --c1n: #fff; }
.tvc-metal { --c0h: #fff5c8; --c0: #e6bb4e; --c0e: #b3841f; --c0r: #5e4308; --c0n: #3a2604;
  --c1h: #ffffff; --c1: #d6dae1; --c1e: #9ea6b4; --c1r: #4f5664; --c1n: #1f2530; }
.tvc-teal { --c0h: #ffffff; --c0: #f1f4f7; --c0e: #cbd2dc; --c0r: #8a93a3; --c0n: #1f2d33;
  --c1h: #6ee6dc; --c1: #13a39b; --c1e: #0a6e68; --c1r: #033a37; --c1n: #eafffc; }
.tvc-amber { --c0h: #ffdca0; --c0: #f39c21; --c0e: #b86a08; --c0r: #5c3200; --c0n: #3a1f00;
  --c1h: #737888; --c1: #33363f; --c1e: #1a1c22; --c1r: #000; --c1n: #f3f4f7; }
.ck.p0 { --kh: var(--c0h, #fff); --kb: var(--c0, #eef1f6); --ke: var(--c0e, #c7cedb); --kr: var(--c0r, #7f889b); --kn: var(--c0n, #2a3040); }
.ck.p1 { --kh: var(--c1h, #626878); --kb: var(--c1, #23262e); --ke: var(--c1e, #0f1116); --kr: var(--c1r, #000); --kn: var(--c1n, #fff); }
.ck { position: absolute; display: block; width: calc(var(--u) * 9.2); height: calc(var(--u) * 9.2); margin: calc(var(--u) * -4.6) 0 0 calc(var(--u) * -4.6);
  border-radius: 50%; font-style: normal;
  /* flat like a real checker (the classic design): a flat face with an even sheen, one inner circle cut into it,
     a raised rim at the edge, and a little thickness showing under it */
  background:
    radial-gradient(circle closest-side, transparent 0 66%, rgba(0,0,0,.32) 66.5% 69%, rgba(255,255,255,.36) 70% 72.5%, transparent 73.5%),
    conic-gradient(from 210deg, rgba(255,255,255,.14), rgba(255,255,255,0) 22%, rgba(255,255,255,.1) 48%, rgba(255,255,255,0) 72%, rgba(255,255,255,.14)),
    radial-gradient(circle at 35% 30%, rgba(255,255,255,.12), rgba(255,255,255,0) 55%),
    linear-gradient(150deg, rgba(255,255,255,.3) 0%, rgba(255,255,255,.06) 42%, rgba(0,0,0,0) 60%, rgba(0,0,0,.14) 100%),
    radial-gradient(circle closest-side, var(--kb) 0 84%, var(--ke) 93%, var(--kr) 100%);
  box-shadow: inset calc(var(--u) * .28) calc(var(--u) * .32) calc(var(--u) * .22) rgba(255,255,255,.4),
              inset calc(var(--u) * -.3) calc(var(--u) * -.38) calc(var(--u) * .3) rgba(0,0,0,.38),
              0 0 0 calc(var(--u) * .1) rgba(0,0,0,.55), 0 calc(var(--u) * .38) 0 var(--kr),
              calc(var(--u) * .4) calc(var(--u) * 1) calc(var(--u) * 1.1) rgba(0,0,0,.5);
  transition: left .3s cubic-bezier(.3,.8,.3,1), top .3s cubic-bezier(.3,.8,.3,1), height .32s, margin .32s, border-radius .32s, filter .2s, scale .2s; }
/* the turned design (admin): three fine grooves, as on a lathe */
.tvs-lathe .ck:not(.off) { background:
    radial-gradient(circle closest-side, transparent 0 26%, rgba(0,0,0,.3) 26.5% 28.5%, rgba(255,255,255,.34) 29.5% 31%, transparent 32%,
                    transparent 51%, rgba(0,0,0,.3) 51.5% 53.5%, rgba(255,255,255,.34) 54.5% 56%, transparent 57%,
                    transparent 76%, rgba(0,0,0,.3) 76.5% 78.5%, rgba(255,255,255,.34) 79.5% 81%, transparent 82%),
    conic-gradient(from 210deg, rgba(255,255,255,.14), rgba(255,255,255,0) 22%, rgba(255,255,255,.1) 48%, rgba(255,255,255,0) 72%, rgba(255,255,255,.14)),
    radial-gradient(circle at 35% 30%, rgba(255,255,255,.12), rgba(255,255,255,0) 55%),
    linear-gradient(150deg, rgba(255,255,255,.3) 0%, rgba(255,255,255,.06) 42%, rgba(0,0,0,0) 60%, rgba(0,0,0,.14) 100%),
    radial-gradient(circle closest-side, var(--kb) 0 84%, var(--ke) 93%, var(--kr) 100%); }
.ck .em { display: none; }
.ck.many::after { content: attr(data-n); position: absolute; inset: 0; display: grid; place-items: center; font: 800 calc(var(--u) * 3.6) / 1 'Inter', system-ui, sans-serif;
  color: var(--kn); text-shadow: 0 calc(var(--u) * .15) 0 rgba(0,0,0,.35); }
/* borne off: in the lid, seen from the side */
.ck.off { height: calc(var(--u) * 2.4); margin-top: calc(var(--u) * -1.2); border-radius: calc(var(--u) * .8);
  background: linear-gradient(180deg, var(--kh) 0, var(--kb) 30%, var(--ke) 75%, var(--kr) 100%);
  box-shadow: inset 0 0 0 calc(var(--u) * .12) rgba(0,0,0,.5), inset 0 calc(var(--u) * .25) 0 rgba(255,255,255,.25), 0 calc(var(--u) * .3) calc(var(--u) * .3) rgba(0,0,0,.6); }
/* pinned (Plakoto): held down under the other one */
.ck.pinned { filter: brightness(.8); }
.ck.pinhit { animation: tvPin .5s ease-out; }
@keyframes tvPin { 30% { scale: .88; } 60% { scale: 1.04; } }
/* your turn: a soft light round the checkers that can move; the chosen one is lifted */
.ck.can { cursor: pointer; touch-action: none; }
.ck.can::before { content: ''; position: absolute; inset: calc(var(--u) * -.55); border-radius: 50%; z-index: -1;
  box-shadow: 0 0 0 calc(var(--u) * .28) rgba(255,236,190,.75), 0 0 calc(var(--u) * 1.8) rgba(255,214,130,.55); animation: tvPulse 1.6s ease-in-out infinite; }
@keyframes tvPulse { 50% { opacity: .35; } }
.ck.sel { scale: 1.1; filter: drop-shadow(0 0 calc(var(--u) * 1.2) rgba(255,226,160,.9)) brightness(1.05); z-index: 55 !important; }
.ck.dragging { z-index: 80 !important; transition: none; cursor: grabbing; filter: drop-shadow(calc(var(--u) * 1) calc(var(--u) * 2.4) calc(var(--u) * 1.6) rgba(0,0,0,.55)); }
.ck.flying { z-index: 70 !important; filter: drop-shadow(calc(var(--u) * 1) calc(var(--u) * 2.4) calc(var(--u) * 1.8) rgba(0,0,0,.5)); }
.ck.nope { animation: tvNope .35s; }
@keyframes tvNope { 25% { translate: calc(var(--u) * -1) 0; } 75% { translate: calc(var(--u) * 1) 0; } }

/* ---------- the board ---------- */
.tv-board { --u: 4px; position: relative; width: 100%; aspect-ratio: 155 / 112; border-radius: calc(var(--u) * 2.6); user-select: none; -webkit-user-select: none;
  box-shadow: 0 30px 60px -26px rgba(0,0,0,.95), 0 8px 18px -8px rgba(0,0,0,.6); -webkit-tap-highlight-color: transparent;
  transform: perspective(calc(var(--u) * 800)) rotateX(10deg); transform-origin: 50% 100%; }
.tv-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; border-radius: inherit; }
.tv-layer { position: absolute; inset: 0; z-index: 2; }
.tv-dice { position: absolute; inset: 0; z-index: 40; pointer-events: none; perspective: calc(var(--u) * 700); }
/* where a checker can go: a soft ring of light where it lands (and the dice it takes); the lid when it can be borne off */
/* where the chosen checker can go: its point darkens (the whole triangle; for bearing off, your half of the lid) */
.tv-dest { position: absolute; width: calc(var(--u) * 10); height: calc(var(--u) * 47); margin: 0; border: 0; padding: 0; background: none; z-index: 1; cursor: pointer;
  -webkit-tap-highlight-color: transparent; }
.tv-dest i { position: absolute; inset: 0; background: linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.34)); animation: tvDest 1.6s ease-in-out infinite, tvDestIn .25s ease-out; }
.tv-dest.down i { clip-path: polygon(2.5% 0, 97.5% 0, 50% 97%); background: linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.3)); }
.tv-dest.up i { clip-path: polygon(2.5% 100%, 97.5% 100%, 50% 3%); background: linear-gradient(rgba(0,0,0,.3), rgba(0,0,0,.5)); }
.tv-dest.near i, .tv-dest:hover i { animation: none; opacity: 1; filter: brightness(.7); }
.tv-dest.off { width: calc(var(--u) * 13); height: calc(var(--u) * 51); }
.tv-dest.off i { border-radius: calc(var(--u) * 1.2); background: rgba(0,0,0,.45); }
@keyframes tvDestIn { from { opacity: 0; } }
@keyframes tvDest { 50% { opacity: .7; } }

/* ---------- the dice: small hard cubes, rounded edges, sunk pips ---------- */
.tvd-modern { --df: linear-gradient(155deg, #ffffff 0%, #f1f3f7 55%, #dde1e8 100%); --de: rgba(40,50,70,.18); --dsh: rgba(40,50,80,.25); --dp: #2b3140; }
.tvd-carbon { --df: linear-gradient(155deg, #3a3e48 0%, #1f2229 55%, #121419 100%); --de: rgba(255,255,255,.14); --dsh: rgba(0,0,0,.55); --dp: #f4f6fa; }
.tvd-ruby { --df: linear-gradient(155deg, #f04a5f 0%, #cc1f37 55%, #8f0c20 100%); --de: rgba(255,255,255,.22); --dsh: rgba(50,0,8,.45); --dp: #ffffff; }
.tvd-ocean { --df: linear-gradient(155deg, #4c8cf5 0%, #2360d2 55%, #143f94 100%); --de: rgba(255,255,255,.22); --dsh: rgba(0,15,50,.45); --dp: #ffffff; }
.tv-die { position: absolute; width: calc(var(--u) * 4.8); height: calc(var(--u) * 4.8); margin: calc(var(--u) * -2.4) 0 0 calc(var(--u) * -2.4);
  transform-style: preserve-3d; transition: opacity .4s, filter .3s, scale .4s; }
.tv-die-sh { position: absolute; left: 12%; right: -14%; top: 22%; bottom: -18%; border-radius: 28%; background: radial-gradient(ellipse at 45% 50%, rgba(0,0,0,.6), transparent 70%);
  transform: translateZ(calc(var(--u) * -2.5)); filter: blur(calc(var(--u) * .35)); }
.tv-cube { position: absolute; inset: 0; transform-style: preserve-3d; }
.tv-cube .f { position: absolute; inset: 0; border-radius: 26%; background: var(--df); display: grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr); padding: 14%;
  box-shadow: inset 0 0 0 calc(var(--u) * .12) var(--de), inset calc(var(--u) * -.5) calc(var(--u) * -.5) calc(var(--u) * .9) var(--dsh),
              inset calc(var(--u) * .3) calc(var(--u) * .3) calc(var(--u) * .5) rgba(255,255,255,.45);
  backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.tv-cube .f1 { transform: translateZ(calc(var(--u) * 2.4)); }
.tv-cube .f6 { transform: rotateY(180deg) translateZ(calc(var(--u) * 2.4)); }
.tv-cube .f2 { transform: rotateY(90deg) translateZ(calc(var(--u) * 2.4)); }
.tv-cube .f5 { transform: rotateY(-90deg) translateZ(calc(var(--u) * 2.4)); }
.tv-cube .f3 { transform: rotateX(90deg) translateZ(calc(var(--u) * 2.4)); }
.tv-cube .f4 { transform: rotateX(-90deg) translateZ(calc(var(--u) * 2.4)); }
.tv-cube .f i { width: 72%; aspect-ratio: 1; border-radius: 50%; place-self: center; background: var(--dp);
  box-shadow: inset calc(var(--u) * .12) calc(var(--u) * .2) calc(var(--u) * .25) rgba(0,0,0,.6), 0 calc(var(--u) * .06) 0 rgba(255,255,255,.4); }
.tv-cube .k1 { grid-area: 1 / 1; } .tv-cube .k3 { grid-area: 1 / 3; } .tv-cube .k4 { grid-area: 2 / 1; } .tv-cube .k5 { grid-area: 2 / 2; }
.tv-cube .k6 { grid-area: 2 / 3; } .tv-cube .k7 { grid-area: 3 / 1; } .tv-cube .k9 { grid-area: 3 / 3; }
/* a die at rest: flat, only its top face, turned on the board (smooth edges, a little thickness under it) */
.tv-die.flat, .tv-die.flat .tv-cube { transform-style: flat; }
.tv-die.flat .tv-cube .f { display: none; }
.tv-die.flat .tv-cube .f.show { display: grid; transform: none;
  box-shadow: inset 0 0 0 calc(var(--u) * .12) var(--de), inset calc(var(--u) * -.45) calc(var(--u) * -.45) calc(var(--u) * .8) var(--dsh),
              inset calc(var(--u) * .3) calc(var(--u) * .3) calc(var(--u) * .45) rgba(255,255,255,.5), 0 calc(var(--u) * .35) 0 rgba(0,0,0,.28); }
.tv-die.flat .tv-die-sh { transform: translate(calc(var(--u) * .45), calc(var(--u) * .7)); }
.tv-die.used { filter: brightness(.55) saturate(.55); scale: .92; }
.tv-die.gone { opacity: 0; scale: .8; }
.tv-die.nope { animation: tvNope .4s 2; }
.tv-die[data-left]:not([data-left=""])::after { content: attr(data-left); position: absolute; left: 50%; top: 125%; transform: translate(-50%, 0) translateZ(1px);
  padding: 1px 5px; border-radius: 999px; background: rgba(10,8,6,.8); color: #f3dfaa; font: 800 calc(var(--u) * 2) / 1.3 'Inter', system-ui, sans-serif; white-space: nowrap; }
/* who plays now: a see-through label with a shadow, on the side of the player (yours at the bottom); red when the time runs out */
.tv-turn { position: absolute; left: 50%; top: calc(var(--u) * 5); z-index: 48; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 6px 16px; border-radius: 999px; pointer-events: none; text-align: center; white-space: nowrap;
  background: rgba(12,10,8,.5); backdrop-filter: blur(6px) saturate(1.2); -webkit-backdrop-filter: blur(6px) saturate(1.2);
  border: 1px solid rgba(255,236,190,.28); box-shadow: 0 10px 24px -8px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.12);
  animation: tvTurnIn .35s ease-out; transition: background .3s, border-color .3s; }
.tv-turn.me { top: auto; bottom: calc(var(--u) * 5); border-color: rgba(255,214,130,.6); }
.tv-turn b { font-size: 14px; font-weight: 800; letter-spacing: .3px; color: #f8ecd2; text-shadow: 0 1px 2px rgba(0,0,0,.7); }
.tv-turn.me b { color: #ffe3a3; }
.tv-turn small { font-size: 11.5px; font-weight: 700; color: #ffb3a6; }
.tv-turn small:empty { display: none; }
.tv-turn.low { background: rgba(80,10,14,.55); border-color: rgba(255,120,110,.75); animation: tvTurnIn .35s ease-out, tvLow 1s ease-in-out infinite; }
.tv-turn.hidden { display: none; }
@keyframes tvTurnIn { from { opacity: 0; transform: translateX(-50%) translateY(6px); } }
@keyframes tvLow { 50% { box-shadow: 0 10px 24px -8px rgba(0,0,0,.8), 0 0 22px rgba(255,90,80,.55); } }

/* ---------- on the board: roll, the messages, the end of a round ---------- */
.tv-roll { position: absolute; left: calc(var(--u) * 104); top: 50%; z-index: 45; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 12px;
  padding: 13px 26px 13px 15px; border-radius: 999px; cursor: pointer; font: 800 19px 'Inter', system-ui, sans-serif; color: #f6e7c1; letter-spacing: .8px; text-transform: uppercase;
  background: linear-gradient(180deg, rgba(40,26,14,.92), rgba(20,12,6,.94)); border: 1px solid rgba(222,186,110,.65);
  box-shadow: 0 10px 24px -8px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,236,190,.2), 0 0 0 3px rgba(222,186,110,.12);
  animation: tvRollIn .35s ease-out, tvRollGlow 2s ease-in-out .4s infinite; }
.tv-roll:hover { border-color: rgba(240,210,140,.9); }
.tv-roll:active { transform: translate(-50%, calc(-50% + 2px)); }
.tv-roll.hidden { display: none; }
.tv-rd { position: relative; width: 38px; height: 30px; }
.tv-rd b { position: absolute; width: 20px; height: 20px; border-radius: 4.5px; background: radial-gradient(circle, #17151c 0 2px, transparent 2.5px) 50% 50% / 100% 100% no-repeat,
  linear-gradient(150deg, #fffdf8, #e2d6bd); box-shadow: 1px 2px 3px rgba(0,0,0,.6); }
.tv-rd b:first-child { left: 0; top: 2px; transform: rotate(-12deg); }
.tv-rd b:last-child { left: 16px; top: 9px; transform: rotate(16deg);
  background: radial-gradient(circle at 30% 30%, #17151c 0 1.8px, transparent 2.3px), radial-gradient(circle at 70% 70%, #17151c 0 1.8px, transparent 2.3px), linear-gradient(150deg, #fffdf8, #e2d6bd); }
@keyframes tvRollIn { from { transform: translate(-50%, -50%) scale(.85); opacity: 0; } }
@keyframes tvRollGlow { 50% { box-shadow: 0 10px 24px -8px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,236,190,.2), 0 0 0 3px rgba(222,186,110,.25), 0 0 22px rgba(222,186,110,.35); } }
.tv-banner { z-index: 50; }
.tv-board .paused21 { border-radius: inherit; }
.tv-end { position: absolute; inset: 0; z-index: 70; display: grid; place-items: center; border-radius: inherit; background: rgba(6,6,20,.55);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.tv-end.hidden { display: none; }
.tv-end-in { width: min(420px, 86%); padding: 30px 20px 18px; border-radius: 26px; text-align: center; position: relative;
  background: radial-gradient(120% 90% at 50% 0%, rgba(255,207,77,.2), transparent 70%), linear-gradient(170deg, rgba(34,30,84,.97), rgba(13,12,38,.97));
  border: 1px solid rgba(255,255,255,.14); box-shadow: 0 40px 80px -24px rgba(0,0,0,.95), 0 0 90px -20px rgba(255,207,77,.35); animation: tvEndIn .55s cubic-bezier(.3,1.4,.5,1); }
.tv-end-in.over { background: radial-gradient(130% 110% at 50% 0%, rgba(255,207,77,.4), transparent 72%), linear-gradient(170deg, rgba(34,30,84,.97), rgba(13,12,38,.97)); }
@keyframes tvEndIn { from { transform: scale(.86) translateY(14px); opacity: 0; } }
.tv-end-in h3 { margin: 12px 0 4px; font-size: 21px; font-weight: 900; background: linear-gradient(180deg, #fff, #ffe9a6); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tv-why { margin: 0 0 10px; font-size: 14px; font-weight: 800; color: #ffd866; }
.tv-why.plain { color: #c6ffa6; font-size: 16px; }
.tv-end-score { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 6px 0 2px; }
.tv-end-score b { font-size: 38px; font-weight: 900; line-height: 1; }
.tv-end-score em { font-style: normal; font-size: 28px; color: var(--muted); }
.tv-end-score span { display: inline-flex; flex-direction: column; align-items: center; gap: 5px; font-size: 12px; font-weight: 800; color: var(--muted); max-width: 90px; overflow: hidden; text-overflow: ellipsis; }
.tv-end-score .ck { --u: 2.6px; position: relative; margin: 0; }
.tv-end-to { font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase; color: rgba(223,228,255,.6); font-weight: 800; }
.he-hero { position: relative; display: inline-grid; place-items: center; width: 70px; height: 70px; border-radius: 50%; padding: 4px;
  background: conic-gradient(from var(--a, 0deg), #ffcf4d, #fff3c4, #c98f1d, #ffcf4d); animation: rot21 4s linear infinite; box-shadow: 0 0 32px rgba(255,207,77,.55); }
.he-hav { position: relative; width: 100%; height: 100%; border-radius: 50%; display: grid; place-items: center; overflow: hidden; font-size: 24px; font-weight: 900; color: #fff;
  background: radial-gradient(circle at 35% 28%, rgba(255,255,255,.55), transparent 42%), var(--bg); }
.he-hav svg.i { width: 28px; height: 28px; } .he-hav .ava-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.he-crown { position: absolute; left: 50%; top: -25px; width: 38px; transform: translateX(-50%) rotate(-8deg); filter: drop-shadow(0 3px 4px rgba(0,0,0,.5)); animation: tvCrown 2.4s ease-in-out infinite; }
.he-crown svg { display: block; width: 100%; }
@keyframes tvCrown { 50% { transform: translateX(-50%) translateY(-4px) rotate(6deg); } }
.he-next { margin: 14px 4px 0; font-size: 12px; color: rgba(223,228,255,.7); }
.he-next i { display: block; height: 6px; margin-top: 7px; border-radius: 6px; background: rgba(255,255,255,.08); overflow: hidden; }
.he-next b { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #5fd1f0, #a28dff); transform-origin: left; animation: tvBar linear forwards; }
@keyframes tvBar { from { transform: scaleX(0); } }

/* ---------- around the board: the players, the score, your controls ---------- */
/* the table fills the screen under the top bar, nothing scrolls: the board as big as it fits, narrow columns beside it */
html:has(body.game-tavli[data-page="table"]) { overflow: hidden; }
body.game-tavli[data-page="table"] .site-foot { display: none; }
body.game-tavli[data-page="table"] #table.page { max-width: none; height: calc(100dvh - var(--top)); box-sizing: border-box; overflow: hidden; padding: 10px 14px; }
.tv-wrap { display: grid; grid-template-columns: 150px minmax(0, 1fr) 190px; gap: 12px; height: 100%; align-items: stretch; }
.tv-side { display: flex; flex-direction: column; gap: 10px; min-width: 0; min-height: 0; overflow: hidden; }
.tv-side-l { justify-content: space-between; }
.tv-boardbox { display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 0; }
.tv-boardbox .tv-board { flex: none; width: min(100%, calc((100dvh - var(--top) - 20px) * 155 / 112)); }
.tv-panel:not(.tv-logp) { display: none; }
.tv-logp { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.tv-logp .log21 { flex: 1; min-height: 0; max-height: none; }
.tv-pl { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 10px 12px; border-radius: 18px; min-width: 0;
  background: linear-gradient(160deg, rgba(30,25,72,.85), rgba(18,15,46,.82)); border: 1px solid var(--stroke); transition: border-color .3s, box-shadow .3s; }
.tv-pl.turn { border-color: rgba(255,216,102,.55); box-shadow: 0 0 0 3px rgba(255,216,102,.1), 0 16px 30px -18px rgba(255,216,102,.5); }
.tv-av { position: relative; width: 46px; height: 46px; flex: none; border-radius: 50%; padding: 3px; }
.tv-ring { position: absolute; inset: 0; border-radius: 50%; background: rgba(255,255,255,.14); }
.tv-pl.turn .tv-ring { background: conic-gradient(#ffd866 calc(var(--k, 1) * 360deg), rgba(255,255,255,.12) 0); }
.tv-avi { position: relative; display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; color: #fff; font-weight: 900; font-size: 17px;
  background: radial-gradient(circle at 35% 28%, rgba(255,255,255,.5), transparent 42%), var(--bg); box-shadow: 0 0 0 2px #17153a; }
.tv-avi svg.i { width: 22px; height: 22px; } .tv-avi .ava-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tv-pn { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.tv-pn b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tv-pn small { font-size: 11.5px; color: var(--muted); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tv-sw.ck { --u: 2.5px; position: absolute; right: 10px; top: 12px; margin: 0; }
.tv-pn { width: 100%; }
.tv-score { text-align: center; padding: 12px 10px; border-radius: 18px; background: linear-gradient(160deg, rgba(30,25,72,.85), rgba(18,15,46,.82)); border: 1px solid var(--stroke); }
.tv-score small { display: block; font-size: 11px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
.tv-sc { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 4px 0; font-size: 38px; font-weight: 900; line-height: 1.1; font-variant-numeric: tabular-nums; }
.tv-sc i { font-style: normal; color: var(--muted); font-size: 26px; }
.tv-sc b.me { color: #ffd866; }
.tv-dock { display: block; margin: 0; padding: 14px 14px 12px; }
.tv-dock .turnlbl { flex-direction: column; gap: 3px; margin-bottom: 10px; }
.tv-dock .turnlbl b { white-space: normal; line-height: 1.3; }
.tv-dock .turnlbl span { text-align: left; }
.tv-acts { display: flex; align-items: center; gap: 8px; margin-top: 10px; min-height: 0; }
.tv-acts:empty { display: none; }
.tv-btn { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: 999px; cursor: pointer; font: 800 13px 'Inter', system-ui, sans-serif;
  color: #fff; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); animation: pop21 .3s cubic-bezier(.3,1.6,.5,1); }
.tv-btn:hover { background: rgba(255,255,255,.16); }
.tv-btn svg.i { width: 16px; height: 16px; }
.tv-btn.hidden { display: none; }
.pause-mini { margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.06); color: #dfe4ff; font-size: 11.5px; font-weight: 800; cursor: pointer; }
.pause-mini svg.i { width: 14px; height: 14px; }
.pause-mini.hidden { display: none; }

.tv-foot { display: flex; }
/* leaving: a calm button that stays inside its column (its words may take two lines) */
.tv-foot { justify-content: center; }
.tv-foot .tv-leave { flex: none; width: auto; min-width: 0; height: 34px; min-height: 0; padding: 0 14px; border-radius: 999px; display: inline-flex; align-items: center;
  justify-content: center; gap: 6px; white-space: nowrap; text-align: center; line-height: 1.2; font-size: 12px; letter-spacing: .2px; text-transform: none;
  color: rgba(255,255,255,.82); background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
.tv-foot .tv-leave svg.i { flex: none; width: 16px; height: 16px; }
/* the sound: a small button in the corner of the score */
.tv-scorebox { position: relative; }
.tv-sound { display: flex; justify-content: flex-end; }
.tv-mute { width: 34px; height: 34px; border-radius: 11px; }
.tv-mute svg.i { width: 17px; height: 17px; }
body.game-tavli[data-page="table"] .chat-fab { display: none !important; }
.tv-chat { position: relative; align-self: flex-start; width: 42px; height: 42px; border-radius: 14px; border: 0; cursor: pointer; display: grid; place-items: center; color: #fff;
  background: linear-gradient(180deg, #ffe58f 0%, #f6c84a 48%, #e3a61f 100%); box-shadow: 0 4px 0 #8a5a0a, 0 10px 20px -8px rgba(0,0,0,.8); }
.tv-chat svg.i { width: 20px; height: 20px; }
.tv-chat:active { transform: translateY(2px); box-shadow: 0 2px 0 #8a5a0a; }
.tv-chat b { position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; display: grid; place-items: center;
  font-size: 11px; font-weight: 900; background: var(--p); border: 2px solid var(--bg); }
.tv-chat.hidden, .tv-chat b.hidden { display: none; }
.tv-mute .tv-snd-off { display: none; }
body.tv-muted .tv-mute .tv-snd-off { display: inline; } body.tv-muted .tv-mute .tv-snd-on { display: none; }

/* ---------- home: a little board, two dice that breathe, the games and the rounds ---------- */
.hero-tv .tv-art { position: relative; height: 150px; }
.tv-mini { position: absolute; left: 4px; top: 4px; width: 208px; aspect-ratio: 155 / 112; --u: 1.34px; filter: drop-shadow(0 14px 22px rgba(0,0,0,.6)); animation: in .7s cubic-bezier(.2,.9,.3,1) backwards; }
.tv-mini svg { width: 100%; height: 100%; display: block; }
.tv-mini .frame { fill: var(--wd2); stroke: rgba(0,0,0,.6); stroke-width: 1.2; }
.tv-mini .field { fill: var(--fl1); }
.tv-mini .bar { fill: var(--bar); }
.tv-mini .pt-a { fill: var(--pa2); } .tv-mini .pt-b { fill: var(--pb2); }
.tv-mini .art-ck { --u: 1.34px; transform: none; animation: tvDrop .6s cubic-bezier(.3,1.5,.5,1) backwards; animation-delay: calc(var(--d) + .3s); }
@keyframes tvDrop { from { translate: 0 -24px; opacity: 0; } }
.art-dice { position: absolute; left: calc(100% + 56px); top: 16%; width: 120px; height: 100px; perspective: 500px; }
.art-die { --u: 5px; position: absolute; }
.art-die:first-child { left: 10px; top: 8px; animation: tvBob 3.6s ease-in-out infinite; }
.art-die:last-child { left: 62px; top: 42px; animation: tvBob 3.6s ease-in-out -1.8s infinite; }
@keyframes tvBob { 50% { translate: 0 -8px; rotate: 6deg; } }
@media (max-width: 520px) { .tv-mini { width: 176px; --u: 1.13px; } .art-dice { left: calc(100% + 26px); transform: scale(.85); transform-origin: left top; } }
.tv-games { display: grid; gap: 8px; }
.tv-g { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border-radius: 16px; cursor: pointer; text-align: left; color: var(--text);
  background: rgba(255,255,255,.04); border: 1px solid var(--stroke); transition: background .2s, border-color .2s, transform .15s; }
.tv-g:active { transform: scale(.985); }
.tv-g.on { background: linear-gradient(160deg, rgba(212,146,74,.2), rgba(212,146,74,.06)); border-color: rgba(230,170,90,.55); }
.tv-gi { width: 38px; height: 38px; flex: none; border-radius: 12px; display: grid; place-items: center; background: rgba(255,255,255,.07); }
.tv-gi svg { width: 26px; height: 26px; fill: #f3e6c8; stroke: #a8865a; stroke-width: 1; }
.tv-gi svg .dk { fill: #3b2a1c; stroke: #0006; }
.tv-gi svg path { fill: none; stroke: #f3c77a; }
.tv-gt { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.tv-gt b { font-size: 15px; }
.tv-gt small { font-size: 12px; color: var(--muted); line-height: 1.35; }
.tv-gk { width: 24px; height: 24px; flex: none; border-radius: 8px; border: 2px solid rgba(255,255,255,.25); display: grid; place-items: center; transition: background .2s, border-color .2s; }
.tv-gk svg { width: 16px; height: 16px; fill: none; stroke: #2a1a00; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transform: scale(.4); transition: opacity .2s, transform .25s cubic-bezier(.3,1.6,.5,1); }
.tv-g.on .tv-gk { background: #ffc53d; border-color: #ffc53d; }
.tv-g.on .tv-gk svg { opacity: 1; transform: none; }
.tv-g.nope { animation: tvNope .35s; }
.tv-to { display: grid; grid-template-columns: repeat(4, 1fr); }
.tv-to button { font-size: 16px; font-weight: 900; }

/* ---------- phones: played sideways (turned upright: a message to turn the phone) ---------- */
.tv-rotate { display: none; position: fixed; inset: 0; z-index: 90; place-items: center; padding: 24px; background: rgba(8,7,26,.94); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.tv-rot-box { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; max-width: 320px; }
.tv-rot-box b { font-size: 20px; font-weight: 900; }
.tv-rot-box span { color: var(--muted); font-size: 14px; line-height: 1.5; }
.tv-rot-phone { width: 64px; height: 104px; border-radius: 14px; border: 4px solid #d8d4f0; position: relative; margin-bottom: 8px; animation: tvTurn 2.4s ease-in-out infinite; }
.tv-rot-phone i { position: absolute; left: 50%; bottom: 6px; width: 16px; height: 4px; margin-left: -8px; border-radius: 3px; background: #d8d4f0; }
.tv-rot-phone::before { content: ''; position: absolute; inset: 10px 6px 16px; border-radius: 4px; background: linear-gradient(160deg, #1f6448, #174f39); }
@keyframes tvTurn { 0%, 20% { transform: rotate(0); } 55%, 80% { transform: rotate(-90deg); } 100% { transform: rotate(0); } }
@media (orientation: portrait) and (max-width: 820px) and (pointer: coarse) {
  body.game-tavli[data-page="table"] .tv-rotate { display: grid; }
}

/* narrower screens (tablets, small laptops) */
@media (max-width: 1100px) { .tv-wrap { grid-template-columns: 130px minmax(0, 1fr) 160px; gap: 10px; } .tv-logp { display: none; } }
/* screens held upright (a big tablet, a monitor or a television turned) and small windows: the board takes the whole width */
@media (orientation: portrait), (max-width: 820px) and (min-height: 521px) {
  .tv-wrap { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; }
  .tv-side { overflow: visible; }
  .tv-pl { flex-direction: row; align-items: center; }
  .tv-boardbox .tv-board { width: min(100%, calc((100dvh - var(--top) - 250px) * 155 / 112)); }
  .tv-logp { display: none; }
  .tv-side-l { flex-direction: row; align-items: stretch; }
  .tv-side-l .tv-pl { flex: 1; }
  .tv-side-l .tv-scorebox { order: 2; flex: none; min-width: 120px; }
  .tv-side-l .tv-score { height: 100%; }
  .tv-side-l .tv-pl.me { order: 3; }
  .tv-boardbox .tv-board { width: 100%; }
  .tv-side-r { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .tv-side-r .tv-dock, .tv-side-r .tv-foot { grid-column: 1 / -1; }
}
/* a phone sideways: the whole screen for the board, the players on the left, your controls on the right */
@media (orientation: landscape) and (max-height: 520px) {
  body.game-tavli[data-page="table"] .top, body.game-tavli[data-page="table"] .site-foot { display: none; }
  html:has(body.game-tavli[data-page="table"]), body.game-tavli[data-page="table"] { height: 100%; overflow: hidden; overscroll-behavior: none; }
  body.game-tavli[data-page="table"] main { height: 100dvh; overflow: hidden; }
  body.game-tavli[data-page="table"] #table.page { max-width: none; height: 100dvh; box-sizing: border-box; overflow: hidden; margin: 0;
    padding: 3px max(6px, env(safe-area-inset-right)) 3px max(6px, env(safe-area-inset-left)); }
  .tv-wrap { grid-template-columns: 100px minmax(0, 1fr) 108px; gap: 6px; height: 100%; align-items: stretch; }
  .tv-side { min-height: 0; overflow: hidden; }
  .tv-boardbox { align-items: center; }
  .tv-boardbox .tv-board { width: min(100%, calc((100dvh - 6px) * 155 / 112)); }
  .tv-side { gap: 6px; }
  .tv-pl { flex-direction: column; align-items: flex-start; gap: 6px; padding: 7px 8px; border-radius: 14px; }
  .tv-av { width: 34px; height: 34px; padding: 2px; }
  .tv-avi { font-size: 13px; }
  .tv-pn b { font-size: 12px; } .tv-pn small { font-size: 10px; white-space: normal; }
  .tv-sw.ck { position: absolute; right: 8px; top: 10px; --u: 2px; }
  .tv-score { padding: 6px; border-radius: 14px; }
  .tv-score small { font-size: 9px; letter-spacing: .5px; }
  .tv-sc { font-size: 26px; gap: 6px; } .tv-sc i { font-size: 18px; }
  .tv-dock { padding: 8px 9px; border-radius: 14px; }
  .tv-dock .turnlbl { font-size: 11.5px; margin-bottom: 6px; } .tv-dock .turnlbl span { font-size: 10.5px; }
  .tv-dock .tbar { height: 10px; }
  .tv-acts { flex-wrap: wrap; margin-top: 6px; }
  .tv-btn { height: 30px; padding: 0 10px; font-size: 12px; }
  .tv-panel { display: none; }
  .tv-side-r { justify-content: space-between; }
  .tv-foot { margin-bottom: 0; }
  .tv-foot .tv-leave { height: 32px; padding: 0 12px; gap: 5px; font-size: 11.5px; }
  .tv-foot .tv-leave svg.i { width: 13px; height: 13px; }
  .tv-mute { width: 28px; height: 28px; border-radius: 9px; } .tv-mute svg.i { width: 14px; height: 14px; }
  .tv-chat { width: 34px; height: 34px; border-radius: 11px; } .tv-chat svg.i { width: 16px; height: 16px; }
  .tv-turn { padding: 4px 12px; } .tv-turn b { font-size: 12px; } .tv-turn small { font-size: 10px; }
  .tv-roll { padding: 9px 18px 9px 11px; font-size: 16px; gap: 9px; }
  .tv-rd { width: 32px; height: 26px; } .tv-rd b { width: 17px; height: 17px; } .tv-rd b:last-child { left: 13px; top: 8px; }
  .tv-end-in { padding: 20px 14px 12px; } .tv-end-in h3 { font-size: 16px; } .tv-end-score b { font-size: 28px; } .he-hero { width: 52px; height: 52px; }
  body.game-tavli[data-page="table"] .chat-fab { right: 8px; bottom: calc(8px + var(--kb, 0px)); width: 38px; height: 38px; border-radius: 12px; }
  body.game-tavli[data-page="table"] .chat-fab svg.i { width: 19px; height: 19px; }
}
@media (prefers-reduced-motion: reduce) { .ck.can::before, .tv-dest i, .tv-roll, .art-die, .tv-rot-phone { animation: none; } }
@media (orientation: portrait), (max-width: 820px) and (min-height: 521px) { .tv-side-r .tv-sound { grid-column: 1 / -1; } }

/* the end of a round always fits inside the board, never past its border: everything in it follows the board's size */
.tv-end { padding: calc(var(--u, 4px) * 2.5); overflow: hidden; }
.tv-end-in { box-sizing: border-box; max-height: 100%; overflow: hidden auto; scrollbar-width: none;
  padding: clamp(18px, calc(var(--u, 4px) * 6.5), 30px) clamp(10px, calc(var(--u, 4px) * 4), 20px) clamp(8px, calc(var(--u, 4px) * 3.5), 18px); }
.tv-end-in::-webkit-scrollbar { display: none; }
.tv-end-in h3 { margin: clamp(4px, calc(var(--u, 4px) * 2.2), 12px) 0 3px; font-size: clamp(14px, calc(var(--u, 4px) * 4.4), 21px); }
.tv-end-in .he-hero { width: clamp(38px, calc(var(--u, 4px) * 14), 70px); height: clamp(38px, calc(var(--u, 4px) * 14), 70px); padding: 3px; }
.tv-end-in .he-crown { width: clamp(22px, calc(var(--u, 4px) * 7.5), 38px); top: clamp(-25px, calc(var(--u, 4px) * -5), -14px); }
.tv-end-in .tv-why { margin-bottom: clamp(4px, calc(var(--u, 4px) * 2), 10px); font-size: clamp(11px, calc(var(--u, 4px) * 3), 14px); }
.tv-end-in .tv-end-score b { font-size: clamp(22px, calc(var(--u, 4px) * 7.6), 38px); }
.tv-end-in .tv-end-score em { font-size: clamp(16px, calc(var(--u, 4px) * 5.6), 28px); }
.tv-end-in .he-next { margin-top: clamp(6px, calc(var(--u, 4px) * 2.8), 14px); font-size: clamp(10px, calc(var(--u, 4px) * 2.4), 12px); }

/* the checkers on a point the chosen checker can go to: a faint gold ring — tap one to move there (a full point) */
.ck.on-dest { cursor: pointer; outline: calc(var(--u, 4px) * .45) solid rgba(255,216,102,.55); outline-offset: calc(var(--u, 4px) * -.1);
  animation: tvOnDest 1.4s ease-in-out infinite; }
@keyframes tvOnDest { 50% { outline-color: rgba(255,216,102,.9); } }
@media (prefers-reduced-motion: reduce) { .ck.on-dest { animation: none; } }

/* the round is lost anyway: a quiet question under the time (play on, or resign) */
.tv-resign { margin-top: 10px; padding: 10px; border-radius: 14px; background: linear-gradient(160deg, rgba(255,128,112,.13), rgba(255,128,112,.04));
  border: 1px solid rgba(255,140,120,.35); animation: tvRsIn .45s cubic-bezier(.3,1.4,.5,1); }
.tv-resign.hidden { display: none; }
@keyframes tvRsIn { from { transform: translateY(6px); opacity: 0; } }
#tvResignT { display: block; font-size: 12px; line-height: 1.35; font-weight: 700; color: #ffdcd6; }
.tv-resign { overflow: hidden; }
#tvResignT { overflow-wrap: anywhere; }
.tv-rs-acts { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.tv-rs-btn { width: 100%; min-width: 0; min-height: 30px; padding: 5px 8px; border-radius: 16px; display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  font: 800 12px/1.2 'Inter', system-ui, sans-serif; white-space: normal; overflow-wrap: anywhere; text-align: center; cursor: pointer; color: #fff; }
/* the buttons and the words under the time always stay inside the dock (never past its border) */
.tv-dock { min-width: 0; overflow: hidden; }
.tv-dock .turnlbl b, .tv-dock .turnlbl span { overflow-wrap: anywhere; }
.tv-acts .tv-btn { min-width: 0; max-width: 100%; }
.tv-acts .tv-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tv-rs-btn.keep { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.22); }
.tv-rs-btn.keep:hover { background: rgba(255,255,255,.16); }
.tv-rs-btn.give { border: 0; background: linear-gradient(#ff8a7a, #d9344a); box-shadow: 0 2px 0 #8f1b2a; }
.tv-rs-btn.give:active { transform: translateY(1px); box-shadow: 0 1px 0 #8f1b2a; }
.tv-rs-btn svg.i { width: 13px; height: 13px; }
@media (orientation: landscape) and (max-height: 520px) {
  .tv-resign { margin-top: 6px; padding: 6px 7px; border-radius: 11px; }
  #tvResignT { font-size: 10px; }
  .tv-rs-acts { gap: 4px; margin-top: 6px; }
  .tv-rs-btn { min-height: 26px; padding: 4px 5px; font-size: 10px; border-radius: 12px; }
  .tv-rs-btn svg.i { display: none; }
  .tv-acts .tv-btn { height: 28px; padding: 0 7px; gap: 4px; font-size: 10.5px; }
  .tv-acts .tv-btn svg.i { width: 13px; height: 13px; }
}

/* the messages on the board: a small glass pill on the top edge of the frame, never over the dice or the checkers */
.tv-board .tv-banner { top: calc(var(--u) * 2); left: 50%; transform: translate(-50%, -50%); width: max-content; max-width: 88%; box-sizing: border-box;
  padding: clamp(3px, calc(var(--u) * .9), 6px) clamp(10px, calc(var(--u) * 3.4), 16px); border-radius: 999px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: clamp(10px, calc(var(--u) * 3), 14px); font-weight: 800; line-height: 1.25; letter-spacing: .2px; color: #f8ecd2; text-shadow: 0 1px 2px rgba(0,0,0,.7);
  background: rgba(12,10,8,.66); backdrop-filter: blur(6px) saturate(1.2); -webkit-backdrop-filter: blur(6px) saturate(1.2);
  border: 1px solid rgba(255,236,190,.3); box-shadow: 0 6px 16px -6px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.1); animation: tvBanIn .35s ease-out; }
.tv-board .tv-banner.blank { animation: none; }
@keyframes tvBanIn { from { opacity: 0; transform: translate(-50%, -90%); } }
/* full screen: a small button next to the sound */
.tv-sound { gap: 6px; }
.tv-fsb { width: 34px; height: 34px; border-radius: 11px; }
.tv-fsb svg.i { width: 17px; height: 17px; }
.tv-fsb.hidden { display: none; }
@media (orientation: landscape) and (max-height: 520px) { .tv-fsb { width: 28px; height: 28px; border-radius: 9px; } .tv-fsb svg.i { width: 14px; height: 14px; } }
/* ================= the table (2026-10): the board on the left (the most room), one column on the right with
   everything else; a phone held upright: the buttons, then the board as wide as the screen, then the rest ================= */
.tv-wrap { grid-template-columns: minmax(0, 1fr) 300px; grid-template-rows: auto minmax(0, 1fr); grid-template-areas: "board tools" "board side"; gap: 10px 18px; }
.tv-tools { grid-area: tools; display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; min-width: 0; }
.tv-boardbox { grid-area: board; }
.tv-side { grid-area: side; }
.tv-players { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.tv-pl { flex-direction: row; align-items: center; gap: 10px; padding: 9px 40px 9px 10px; }
.tv-pl .tv-sw.ck { top: 50%; right: 12px; margin: calc(var(--u) * -4.6) 0 0; }
.tv-score { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; padding: 8px 12px; }
.tv-score small { line-height: 1.3; } .tv-score small:last-child { text-align: right; }
.tv-sc { margin: 0; font-size: 30px; } .tv-sc i { font-size: 22px; }
/* the buttons: one bar of glass, the same size and look for each (pause has its word) */
.tv-tools .tv-tool { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 7px; width: 40px; height: 40px; padding: 0; flex: none;
  align-self: auto; border-radius: 13px; cursor: pointer; color: #f1ecff; font: 800 13px 'Inter', system-ui, sans-serif; border: 1px solid rgba(255,255,255,.16);
  background: linear-gradient(180deg, rgba(255,255,255,.13), rgba(255,255,255,.04)), linear-gradient(160deg, rgba(36,30,84,.95), rgba(18,15,46,.95));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 8px 18px -10px rgba(0,0,0,.9); transition: border-color .2s, transform .15s; }
.tv-tools .tv-tool:hover { border-color: rgba(255,216,102,.55); }
.tv-tools .tv-tool:active { transform: translateY(1px) scale(.97); }
.tv-tools .tv-tool svg.i { width: 18px; height: 18px; flex: none; }
.tv-tools .tv-tool.wide { width: auto; padding: 0 15px; }
.tv-tools .tv-tool.tv-chat { color: #f1ecff !important; }      /* (light like the other tools: the old gold chat button's dark icon is not for the glass) */
.tv-tools .tv-tool.hidden { display: none; }
.tv-tools .tv-tool > b { position: absolute; top: -6px; right: -6px; min-width: 19px; height: 19px; padding: 0 5px; box-sizing: border-box; border-radius: 10px; display: grid;
  place-items: center; font-size: 11px; font-weight: 900; color: #fff; background: #ff4d6d; border: 0; box-shadow: 0 0 0 2px #15123a; }
.tv-tools .tv-tool > b.hidden { display: none; }
/* (phones: no more "turn your phone": held upright, the board takes the whole width) */
body.game-tavli[data-page="table"] .tv-rotate { display: none !important; }
@media (max-width: 1100px) { .tv-wrap { grid-template-columns: minmax(0, 1fr) 260px; gap: 10px 14px; } }
@media (max-width: 1100px) and (min-width: 821px) and (min-height: 600px) { .tv-logp { display: flex; } }
@media (orientation: portrait), (max-width: 820px) and (min-height: 521px) {
  body.game-tavli[data-page="table"] #table.page { height: auto; overflow: visible; padding: 8px 10px 14px; }
  html:has(body.game-tavli[data-page="table"]) { overflow: auto; }
  .tv-wrap { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; grid-template-areas: "tools" "board" "side"; gap: 8px; height: auto; }
  .tv-boardbox { width: 100%; aspect-ratio: 155 / 112; }
  .tv-side { overflow: visible; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .tv-players { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 8px; }
  .tv-pl { padding: 7px 9px; } .tv-pl .tv-sw.ck { display: none; }
  .tv-score { display: flex; flex-direction: column; justify-content: center; gap: 0; height: 100%; box-sizing: border-box; padding: 6px 10px; text-align: center; min-width: 96px; }
  .tv-score small:last-child { text-align: center; }
  .tv-logp { display: flex; max-height: 220px; }
}
@media (max-width: 520px) {
  .tv-pl { padding: 6px 7px; gap: 6px; } .tv-av { width: 34px; height: 34px; padding: 2px; }
  .tv-pn b { font-size: 12px; } .tv-pn small { font-size: 10.5px; white-space: normal; }
  .tv-sc { font-size: 24px; gap: 6px; } .tv-sc i { font-size: 16px; } .tv-score small { font-size: 9px; letter-spacing: .4px; }
  .tv-tools .tv-tool { width: 38px; height: 38px; }
}
/* a phone sideways: the board on the left the whole height, the buttons and the rest in one column on the right */
@media (orientation: landscape) and (max-height: 520px) {
  .tv-wrap { grid-template-columns: minmax(0, 1fr) 190px; grid-template-rows: auto minmax(0, 1fr); grid-template-areas: "board tools" "board side"; gap: 5px 8px; }
  .tv-tools { gap: 5px; }
  .tv-tools .tv-tool { width: 30px; height: 30px; border-radius: 10px; }
  .tv-tools .tv-tool svg.i { width: 14px; height: 14px; }
  /* (the pause: its icon only, so that the five buttons, Leave too, stay on one line in the narrow column) */
  .tv-tools .tv-tool.wide { width: 30px; padding: 0; }
  .tv-tools .tv-tool.wide > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .tv-players { gap: 4px; }
  .tv-pl { flex-direction: row; align-items: center; padding: 4px 26px 4px 6px; gap: 6px; border-radius: 12px; }
  .tv-av { width: 26px; height: 26px; }
  .tv-pn b { font-size: 11px; } .tv-pn small { font-size: 9px; }
  .tv-pl .tv-sw.ck { --u: 1.8px; right: 7px; }
  .tv-score { padding: 3px 8px; border-radius: 12px; } .tv-sc { font-size: 18px; } .tv-sc i { font-size: 13px; } .tv-score small { font-size: 8px; letter-spacing: .3px; }
}
@media (orientation: portrait), (max-width: 820px) and (min-height: 521px) {
  body.game-fs.game-tavli[data-page="table"] { height: auto; min-height: 100dvh; overflow: visible; }
}