/* Draughts (Ντάμα): the page's own look (loaded only on its page, after app.css and t21.css, whose panels, time bar and
   messages it shares). The back of a backgammon board: a wooden case with an inlaid border and brass hinges, the
   squares of two woods; turned pieces with a groove, a rim and a shadow; a crowned piece is two, one on the other.
   Five boards (.ntb-*) and four sets of pieces (.ntp-*): the admin's, or each player's own choice. */

/* ---------- the boards ---------- */
.ntb-walnut { --fr1: #6b3a19; --fr2: #4a240d; --fr3: #2b1406; --frg: .55; --in1: #f1d9a4; --in2: #3a1d0b; --inw: #b07a3e;
  --sl1: #ecd3a0; --sl2: #dcbb80; --sd1: #7a4522; --sd2: #5a2f13; --sqg: .4; --gloss: .55; --brass1: #f6dd92; --brass2: #a8781e; --edge: #1d0d03; }
.ntb-olive { --fr1: #9a7a45; --fr2: #6e5129; --fr3: #3d2a12; --frg: .7; --in1: #2a1c12; --in2: #e6cf98; --inw: #4a3520;
  --sl1: #e2c78c; --sl2: #c9a964; --sd1: #2e2119; --sd2: #1c130c; --sqg: .55; --gloss: .5; --brass1: #f6dd92; --brass2: #a8781e; --edge: #241606; }
.ntb-ebony { --fr1: #2c221c; --fr2: #18110d; --fr3: #0a0705; --frg: .25; --in1: #f2ece2; --in2: #b9a27a; --inw: #3a2c20;
  --sl1: #f4f1ea; --sl2: #dcd6ea; --sd1: #261b15; --sd2: #140e0a; --sqg: .15; --gloss: .75; --brass1: #fbe7a8; --brass2: #b48423; --edge: #000;
  --pearl: 1; }
.ntb-marble { --fr1: #f3f0ea; --fr2: #d9d4cb; --fr3: #b4ada2; --frg: 0; --in1: #1f5a46; --in2: #d8b762; --inw: #e9e4db;
  --sl1: #f7f5f0; --sl2: #e4e0d8; --sd1: #2d6b55; --sd2: #18463a; --sqg: 0; --gloss: .7; --brass1: #f6dd92; --brass2: #a8781e; --edge: #7a756c;
  --vein: 1; }
.ntb-midnight { --fr1: #1f2a52; --fr2: #121a38; --fr3: #080c1d; --frg: 0; --in1: #e6c56b; --in2: #8a6a22; --inw: #1a2347;
  --sl1: #f1e8d4; --sl2: #ddd0b2; --sd1: #1e2b58; --sd2: #121b3c; --sqg: 0; --gloss: .85; --brass1: #f6dd92; --brass2: #a8781e; --edge: #04060f; }

/* ---------- the pieces ---------- */
.ntp-wood { --a1: #f3e6c6; --a2: #d9c39a; --a3: #8f744a; --an: rgba(120,84,40,.55); --b1: #4a2a17; --b2: #2e180b; --b3: #120803; --bn: rgba(255,214,150,.3); --crown: #e2b553; }
.ntp-ivory { --a1: #fbf7ec; --a2: #e8dfca; --a3: #a99b7c; --an: rgba(140,120,80,.5); --b1: #2a2a30; --b2: #121216; --b3: #000; --bn: rgba(255,255,255,.28); --crown: #e8c262; }
.ntp-redblack { --a1: #d8343b; --a2: #a81a24; --a3: #5e0910; --an: rgba(0,0,0,.4); --b1: #2a2a2e; --b2: #141416; --b3: #000; --bn: rgba(255,255,255,.25); --crown: #f2cf6b; }
.ntp-brass { --a1: #f1d58b; --a2: #c99f3e; --a3: #6e4f12; --an: rgba(90,60,10,.55); --b1: #d9dde4; --b2: #9ea6b3; --b3: #4b525e; --bn: rgba(30,40,55,.45); --crown: #7a4c10; }

/* ---------- the table: the board on the left (the most room), one column on the right, nothing scrolls ---------- */
html:has(body.game-ntama[data-page="table"]) { overflow: hidden; }
body.game-ntama[data-page="table"] .site-foot { display: none; }
body.game-ntama[data-page="table"] #table.page { max-width: none; height: calc(100dvh - var(--top)); box-sizing: border-box; overflow: hidden; padding: 10px 14px; }
body.game-ntama[data-page="table"] .chat-fab { display: none !important; }
.nt-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 300px; grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas: "board tools" "board side"; gap: 10px 18px; height: 100%; }
.nt-tools { grid-area: tools; }
.nt-boardbox { grid-area: board; display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 0; }
.nt-side { grid-area: side; display: flex; flex-direction: column; gap: 10px; min-width: 0; min-height: 0; overflow: hidden; }
.nt-players { display: flex; flex-direction: column; gap: 8px; min-width: 0; }

/* the case: wood with its grain, a gloss of varnish, a dark edge */
.nt-board { --bw: 560px; position: relative; flex: none; width: var(--bw); aspect-ratio: 1; border-radius: calc(var(--bw) * .026); user-select: none; -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  background:
    linear-gradient(155deg, rgba(255,255,255,calc(var(--gloss) * .22)) 0%, rgba(255,255,255,0) 32%, rgba(0,0,0,0) 70%, rgba(0,0,0,.25) 100%),
    repeating-linear-gradient(94deg, rgba(0,0,0,calc(var(--frg) * .22)) 0 2px, rgba(0,0,0,0) 2px 7px, rgba(255,255,255,calc(var(--frg) * .08)) 7px 8px, rgba(0,0,0,0) 8px 13px),
    repeating-radial-gradient(ellipse 140% 40% at 30% 120%, rgba(0,0,0,calc(var(--frg) * .18)) 0 3px, rgba(0,0,0,0) 3px 9px),
    linear-gradient(135deg, var(--fr1), var(--fr2) 55%, var(--fr3));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), inset 0 2px 0 rgba(255,255,255,.22), inset 0 -3px 6px rgba(0,0,0,.45), 0 0 0 1px var(--edge),
              0 30px 60px -24px rgba(0,0,0,.95), 0 10px 20px -10px rgba(0,0,0,.7);
  transform: perspective(calc(var(--bw) * 3)) rotateX(6deg); transform-origin: 50% 100%; }
.ntb-marble .nt-board { background:
    linear-gradient(155deg, rgba(255,255,255,.4) 0%, rgba(255,255,255,0) 30%, rgba(0,0,0,0) 70%, rgba(0,0,0,.18) 100%),
    radial-gradient(ellipse 60% 20% at 20% 30%, rgba(120,112,100,.35), transparent 70%), radial-gradient(ellipse 40% 12% at 75% 70%, rgba(120,112,100,.3), transparent 70%),
    linear-gradient(115deg, transparent 40%, rgba(130,122,110,.25) 41%, transparent 43%), linear-gradient(135deg, var(--fr1), var(--fr2) 55%, var(--fr3)); }
/* the inlaid border round the squares: a light stripe, a dark one, the wood between */
.nt-case { position: absolute; inset: 3.4%; border-radius: calc(var(--bw) * .012); pointer-events: none;
  box-shadow: inset 0 0 0 calc(var(--bw) * .004) var(--in2), inset 0 0 0 calc(var(--bw) * .009) var(--in1), inset 0 0 0 calc(var(--bw) * .013) var(--in2),
              inset 0 0 0 calc(var(--bw) * .026) var(--inw), 0 0 0 1px rgba(0,0,0,.35); }
/* the hinges: the case closes over the backgammon board on the other side */
.nt-hinge { position: absolute; left: calc(var(--bw) * -.012); width: calc(var(--bw) * .03); height: calc(var(--bw) * .1); border-radius: calc(var(--bw) * .006);
  background: linear-gradient(90deg, var(--brass2), var(--brass1) 45%, var(--brass2)); box-shadow: 0 1px 3px rgba(0,0,0,.6), inset 0 0 0 1px rgba(0,0,0,.25); }
.nt-hinge::before, .nt-hinge::after { content: ''; position: absolute; left: 50%; width: 22%; aspect-ratio: 1; margin-left: -11%; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff6d0, #8a6014); box-shadow: 0 0 0 1px rgba(0,0,0,.35); }
.nt-hinge::before { top: 14%; } .nt-hinge::after { bottom: 14%; }
.nt-hinge.h1 { top: 18%; } .nt-hinge.h2 { bottom: 18%; }
/* the squares: two woods (or marble, pearl…), each with its own grain, under one coat of varnish */
.nt-grid { position: absolute; inset: 6.2%; display: grid; grid-template: repeat(8, 1fr) / repeat(8, 1fr); border-radius: 2px; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(0,0,0,.4), inset 0 0 calc(var(--bw) * .03) rgba(0,0,0,.35); }
.nt-sq { position: relative; display: block; }
.nt-sq.l { background: repeating-linear-gradient(88deg, rgba(0,0,0,calc(var(--sqg) * .08)) 0 1px, rgba(0,0,0,0) 1px 5px), linear-gradient(160deg, var(--sl1), var(--sl2)); }
.nt-sq.d { background: repeating-linear-gradient(2deg, rgba(255,255,255,calc(var(--sqg) * .06)) 0 1px, rgba(0,0,0,0) 1px 6px), linear-gradient(160deg, var(--sd1), var(--sd2)); }
.nt-sq:nth-child(odd).d { background: repeating-linear-gradient(-3deg, rgba(255,255,255,calc(var(--sqg) * .06)) 0 1px, rgba(0,0,0,0) 1px 7px), linear-gradient(200deg, var(--sd1), var(--sd2)); }
.ntb-ebony .nt-sq.l { background: radial-gradient(ellipse at 30% 20%, rgba(255,214,236,.55), transparent 55%), radial-gradient(ellipse at 75% 80%, rgba(190,220,255,.55), transparent 55%),
  linear-gradient(135deg, #f8f6f0, #e6e1f2 50%, #f3efe6); }
.ntb-marble .nt-sq.l { background: linear-gradient(120deg, transparent 45%, rgba(150,140,128,.28) 46%, transparent 48%), linear-gradient(40deg, transparent 60%, rgba(150,140,128,.2) 61%, transparent 63%), linear-gradient(160deg, var(--sl1), var(--sl2)); }
.ntb-marble .nt-sq.d { background: linear-gradient(130deg, transparent 40%, rgba(220,240,230,.25) 41%, transparent 43%), linear-gradient(50deg, transparent 62%, rgba(0,0,0,.25) 63%, transparent 65%), linear-gradient(160deg, var(--sd1), var(--sd2)); }
.nt-grid::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(150deg, rgba(255,255,255,calc(var(--gloss) * .2)) 0%, rgba(255,255,255,0) 35%, rgba(255,255,255,0) 75%, rgba(255,255,255,calc(var(--gloss) * .06)) 100%); }
/* where the chosen piece can go: the square darkens and breathes; where it started, a faint ring */
.nt-sq.dest::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle, rgba(0,0,0,.18) 0 34%, rgba(0,0,0,.45) 35% 100%);
  box-shadow: inset 0 0 0 calc(var(--bw) * .005) rgba(255,224,150,.75); animation: ntDest 1.4s ease-in-out infinite; }
.nt-sq.from::after { content: ''; position: absolute; inset: 18%; border-radius: 50%; border: calc(var(--bw) * .004) dashed rgba(255,224,150,.6); }
@keyframes ntDest { 50% { box-shadow: inset 0 0 0 calc(var(--bw) * .008) rgba(255,224,150,.95); } }
.nt-layer { position: absolute; inset: 6.2%; z-index: 2; cursor: pointer; }

/* ---------- a piece: turned, flat, a groove round its face, a rim, a little thickness, a real shadow ---------- */
.ntp { --u: calc(var(--bw, 560px) * .876 / 8); position: absolute; display: block; left: var(--x, 50%); top: var(--y, 50%); width: calc(var(--u) * .8); aspect-ratio: 1;
  margin: 0; transform: translate(-50%, -54%); border-radius: 50%; font-style: normal; pointer-events: none;
  transition: left calc(.34s * var(--spd, 1)) cubic-bezier(.35,.1,.3,1), top calc(.34s * var(--spd, 1)) cubic-bezier(.35,.1,.3,1), opacity .4s, filter .3s, transform .3s;
  background:
    radial-gradient(circle closest-side, transparent 0 60%, rgba(0,0,0,.3) 61% 64%, rgba(255,255,255,.34) 65% 68%, transparent 69%),
    radial-gradient(circle at 34% 28%, rgba(255,255,255,.5), rgba(255,255,255,0) 46%),
    conic-gradient(from 200deg, rgba(255,255,255,.12), rgba(255,255,255,0) 25%, rgba(255,255,255,.1) 50%, rgba(255,255,255,0) 75%, rgba(255,255,255,.12)),
    radial-gradient(circle closest-side, var(--pc) 0 80%, var(--pe) 92%, var(--pr) 100%);
  box-shadow: inset 0 0 0 calc(var(--u) * .01) var(--pn), inset calc(var(--u) * .03) calc(var(--u) * .035) calc(var(--u) * .03) rgba(255,255,255,.35),
              inset calc(var(--u) * -.03) calc(var(--u) * -.05) calc(var(--u) * .05) rgba(0,0,0,.35),
              0 calc(var(--u) * .045) 0 var(--pr), 0 calc(var(--u) * .07) 0 rgba(0,0,0,.35), calc(var(--u) * .05) calc(var(--u) * .14) calc(var(--u) * .14) rgba(0,0,0,.5); }
.ntp.p0 { --pc: var(--a1); --pe: var(--a2); --pr: var(--a3); --pn: var(--an); }
.ntp.p1 { --pc: var(--b1); --pe: var(--b2); --pr: var(--b3); --pn: var(--bn); }
/* crowned: a second piece on top (the thickness of two), a gold crown on its face */
.ntp.king { box-shadow: inset 0 0 0 calc(var(--u) * .01) var(--pn), inset calc(var(--u) * .03) calc(var(--u) * .035) calc(var(--u) * .03) rgba(255,255,255,.35),
              inset calc(var(--u) * -.03) calc(var(--u) * -.05) calc(var(--u) * .05) rgba(0,0,0,.35),
              0 calc(var(--u) * .045) 0 var(--pr), 0 calc(var(--u) * .06) 0 rgba(0,0,0,.45), 0 calc(var(--u) * .1) 0 var(--pe), 0 calc(var(--u) * .14) 0 var(--pr),
              0 calc(var(--u) * .16) 0 rgba(0,0,0,.35), calc(var(--u) * .06) calc(var(--u) * .2) calc(var(--u) * .16) rgba(0,0,0,.55);
  transform: translate(-50%, -64%); }
.ntp.king::after { content: ''; position: absolute; inset: 27%; background: var(--crown);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 18h18l-1.6-10.5-4.6 4.2L12 4.5l-2.8 7.2-4.6-4.2z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 18h18l-1.6-10.5-4.6 4.2L12 4.5l-2.8 7.2-4.6-4.2z'/%3E%3C/svg%3E") center / contain no-repeat;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.45)); }
/* your turn: the pieces that can move have a soft light round them; the chosen one is lifted */
.ntp.can { cursor: pointer; filter: drop-shadow(0 0 calc(var(--u) * .08) rgba(255,224,150,.95)); animation: ntCan 1.5s ease-in-out infinite; }
@keyframes ntCan { 50% { filter: drop-shadow(0 0 calc(var(--u) * .16) rgba(255,214,120,.9)); } }
.ntp.sel { z-index: 5; transform: translate(-50%, -66%) scale(1.08); filter: drop-shadow(0 calc(var(--u) * .12) calc(var(--u) * .1) rgba(0,0,0,.45)) drop-shadow(0 0 calc(var(--u) * .12) rgba(255,224,150,1)); animation: none; }
.ntp.king.sel { transform: translate(-50%, -76%) scale(1.08); }
.ntp.moving { z-index: 6; }
.ntp.hop { animation: ntHop calc(.34s * var(--spd, 1)) ease-out; }
@keyframes ntHop { 45% { transform: translate(-50%, -80%) scale(1.07); } }
.ntp.doomed { opacity: .55; filter: grayscale(.6) brightness(.85); }
.ntp.taken { opacity: 0; transform: translate(-50%, calc(-54% + var(--ty, -60%))) scale(.4) rotate(20deg); transition: transform .5s cubic-bezier(.4,.1,.6,1), opacity .5s; }
.ntp.crowning { animation: ntCrown .85s cubic-bezier(.3,1.5,.5,1); }
@keyframes ntCrown { 0% { transform: translate(-50%, -54%) scale(1); } 40% { transform: translate(-50%, -90%) scale(1.2); filter: brightness(1.4) drop-shadow(0 0 calc(var(--u) * .3) rgba(255,214,102,1)); }
  100% { transform: translate(-50%, -64%) scale(1); } }
.ntp.arrive { animation: ntArrive .6s cubic-bezier(.3,1.4,.5,1) backwards; animation-delay: var(--d, 0ms); }
@keyframes ntArrive { from { transform: translate(-50%, -160%) scale(.5); opacity: 0; } }
.ntp.nope { animation: ntNope .35s; }
@keyframes ntNope { 25% { transform: translate(-58%, -54%); } 75% { transform: translate(-42%, -54%); } }
@media (prefers-reduced-motion: reduce) { .ntp, .ntp.can, .ntp.hop, .ntp.crowning, .ntp.arrive, .nt-sq.dest::after { animation: none !important; transition: none; } }

/* ---------- on the board: a quiet message on the top edge, whose turn, the end of a game ---------- */
.nt-board .nt-banner { top: calc(var(--bw) * .018); left: 50%; transform: translateX(-50%); z-index: 50; width: max-content; max-width: 86%; box-sizing: border-box;
  padding: clamp(3px, calc(var(--bw) * .007), 6px) clamp(10px, calc(var(--bw) * .026), 16px); border-radius: 999px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-size: clamp(10px, calc(var(--bw) * .024), 14px); font-weight: 800; line-height: 1.25; color: #f8ecd2; text-shadow: 0 1px 2px rgba(0,0,0,.7);
  background: rgba(12,10,8,.68); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border: 1px solid rgba(255,236,190,.3);
  box-shadow: 0 6px 16px -6px rgba(0,0,0,.8); animation: ntBanIn .35s ease-out; pointer-events: none; }
.nt-board .nt-banner.blank { animation: none; }
@keyframes ntBanIn { from { opacity: 0; transform: translate(-50%, -8px); } }
.nt-turn { position: absolute; left: 50%; top: 7.5%; z-index: 48; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 5px 15px; border-radius: 999px; pointer-events: none; text-align: center; white-space: nowrap; background: rgba(12,10,8,.55);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border: 1px solid rgba(255,236,190,.28); box-shadow: 0 10px 24px -8px rgba(0,0,0,.8); animation: ntBanIn .35s ease-out; }
.nt-turn.me { top: auto; bottom: 7.5%; border-color: rgba(255,214,130,.6); }
.nt-turn b { font-size: 13.5px; font-weight: 800; color: #f8ecd2; } .nt-turn.me b { color: #ffe3a3; }
.nt-turn small { font-size: 11.5px; font-weight: 700; color: #ffb3a6; } .nt-turn small:empty { display: none; }
.nt-turn.low { background: rgba(80,10,14,.55); border-color: rgba(255,120,110,.75); }
.nt-turn.hidden { display: none; }
.nt-board .paused21 { border-radius: inherit; z-index: 60; }
.nt-end { position: absolute; inset: 0; z-index: 70; display: grid; place-items: center; border-radius: inherit; padding: 6%; background: rgba(6,6,20,.55);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.nt-end.hidden { display: none; }
.nt-end-in { width: min(400px, 100%); max-height: 100%; overflow: hidden auto; box-sizing: border-box; padding: clamp(18px, calc(var(--bw) * .05), 30px) 18px 16px; border-radius: 24px;
  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: ntEndIn .55s cubic-bezier(.3,1.4,.5,1); }
.nt-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 ntEndIn { from { transform: scale(.86) translateY(14px); opacity: 0; } }
.nt-end-in h3 { margin: 12px 0 4px; font-size: clamp(15px, calc(var(--bw) * .036), 21px); font-weight: 900; background: linear-gradient(180deg, #fff, #ffe9a6); -webkit-background-clip: text;
  background-clip: text; color: transparent; }
.nt-end-draw { display: inline-grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; font-size: 30px; font-weight: 900; color: #ffe9a6;
  background: rgba(255,255,255,.08); box-shadow: 0 0 0 2px rgba(255,216,102,.45); }
.nt-why { margin: 0 0 8px; font-size: 13px; font-weight: 800; color: #ffd866; }
.nt-end-score { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 6px 0 2px; }
.nt-end-score b { font-size: clamp(24px, calc(var(--bw) * .06), 38px); font-weight: 900; line-height: 1; }
.nt-end-score em { font-style: normal; font-size: 26px; color: var(--muted); }
.nt-end-score span { max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 800; color: var(--muted); }
.nt-end-to { font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase; color: rgba(223,228,255,.6); font-weight: 800; }
.nt-end .he-hero { position: relative; display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; padding: 4px;
  background: conic-gradient(from var(--a, 0deg), #ffcf4d, #fff3c4, #c98f1d, #ffcf4d); box-shadow: 0 0 32px rgba(255,207,77,.55); }
.nt-end .he-hav { position: relative; width: 100%; height: 100%; border-radius: 50%; display: grid; place-items: center; overflow: hidden; font-size: 22px; font-weight: 900; color: #fff;
  background: radial-gradient(circle at 35% 28%, rgba(255,255,255,.55), transparent 42%), var(--bg); }
.nt-end .he-hav svg.i { width: 26px; height: 26px; } .nt-end .he-hav .ava-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.nt-end .he-crown { position: absolute; left: 50%; top: -24px; width: 36px; transform: translateX(-50%) rotate(-8deg); filter: drop-shadow(0 3px 4px rgba(0,0,0,.5)); }
.nt-end .he-crown svg { display: block; width: 100%; }
.nt-end .he-next { margin: 12px 4px 0; font-size: 12px; color: rgba(223,228,255,.7); }
.nt-end .he-next i { display: block; height: 6px; margin-top: 7px; border-radius: 6px; background: rgba(255,255,255,.08); overflow: hidden; }
.nt-end .he-next b { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #5fd1f0, #a28dff); transform-origin: left; animation: ntBar linear forwards; }
@keyframes ntBar { from { transform: scaleX(0); } }

/* ---------- around the board: the players, the score, your move, the pieces taken ---------- */
.nt-pl { position: relative; display: flex; flex-direction: row; align-items: center; gap: 10px; padding: 9px 40px 9px 10px; 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; }
.nt-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); }
.nt-av { position: relative; width: 46px; height: 46px; flex: none; border-radius: 50%; padding: 3px; box-sizing: border-box; }
.nt-ring { position: absolute; inset: 0; border-radius: 50%; background: rgba(255,255,255,.14); }
.nt-pl.turn .nt-ring { background: conic-gradient(#ffd866 calc(var(--k, 1) * 360deg), rgba(255,255,255,.12) 0); }
.nt-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; }
.nt-avi svg.i { width: 22px; height: 22px; } .nt-avi .ava-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.nt-pn { display: flex; flex-direction: column; gap: 2px; min-width: 0; width: 100%; }
.nt-pn b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nt-pn small { font-size: 11.5px; color: var(--muted); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nt-pl .nt-sw.ntp { --u: 26px; --bw: 238px; position: absolute; left: auto; right: 12px; top: 50%; margin-top: -10px; width: 20px; transform: none; }
.nt-score { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; padding: 8px 12px; border-radius: 18px;
  background: linear-gradient(160deg, rgba(30,25,72,.85), rgba(18,15,46,.82)); border: 1px solid var(--stroke); }
.nt-score small { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; color: var(--muted); line-height: 1.3; }
.nt-score small:last-child { text-align: right; }
.nt-sc { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0; font-size: 30px; font-weight: 900; line-height: 1.1; font-variant-numeric: tabular-nums; }
.nt-sc i { font-style: normal; color: var(--muted); font-size: 22px; } .nt-sc b.me { color: #ffd866; }
.nt-sc b.bump { animation: ntBump .6s cubic-bezier(.3,1.6,.5,1); }
@keyframes ntBump { 40% { transform: scale(1.35); color: #fff; } }
/* the buttons: one bar of glass, the same size and look for each (pause has its word) */
.nt-tools { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; min-width: 0; }
.nt-tool { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 7px; width: 40px; height: 40px; padding: 0; flex: none;
  border-radius: 13px; cursor: pointer; color: #f1ecff; font: 800 13px 'Inter', system-ui, sans-serif;
  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));
  border: 1px solid rgba(255,255,255,.16); box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 8px 18px -10px rgba(0,0,0,.9);
  transition: border-color .2s, background .2s, transform .15s; -webkit-tap-highlight-color: transparent; }
.nt-tool:hover { border-color: rgba(255,216,102,.55); }
.nt-tool:active { transform: translateY(1px) scale(.97); }
.nt-tool svg.i { width: 18px; height: 18px; flex: none; }
.nt-tool.wide { width: auto; padding: 0 15px; }
.nt-tool.hidden { display: none; }
.nt-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; box-shadow: 0 0 0 2px #15123a; }
.nt-tool > b.hidden { display: none; }
.nt-mute .tv-snd-off { display: none; }
body.tv-muted .nt-mute .tv-snd-off { display: inline; } body.tv-muted .nt-mute .tv-snd-on { display: none; }
.nt-dock { display: block; margin: 0; padding: 14px 14px 12px; min-width: 0; overflow: hidden; }
.nt-dock .turnlbl { flex-direction: column; gap: 3px; margin-bottom: 10px; }
.nt-dock .turnlbl b { white-space: normal; line-height: 1.3; overflow-wrap: anywhere; }
.nt-dock .turnlbl span { text-align: left; color: #ffd38a; }
.nt-dock.my-turn { border-color: rgba(255,216,102,.5); }
.nt-acts { display: flex; gap: 8px; margin-top: 10px; }
.nt-acts:not(:has(.nt-btn:not(.hidden))) { display: none; }
.nt-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); }
.nt-btn:hover { background: rgba(255,255,255,.16); }
.nt-btn svg.i { width: 16px; height: 16px; }
.nt-btn.hidden { display: none; }
.nt-panel.nt-logp { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.nt-logp .log21 { flex: 1; min-height: 0; max-height: none; }
.nt-trays { display: grid; gap: 8px; }
.nt-tray { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 8px; font-size: 12px; font-weight: 800; color: var(--muted); }
.nt-tray > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nt-tray b { font-size: 15px; color: #ffd866; font-variant-numeric: tabular-nums; }
.nt-stack { grid-column: 1 / -1; position: relative; display: flex; min-height: 14px; }
.nt-stack .ntp.flat { --u: 18px; position: relative; left: auto; top: auto; width: 16px; height: 6px; margin-left: -2px; transform: none; border-radius: 4px;
  background: linear-gradient(180deg, var(--pc), var(--pe) 60%, var(--pr)); box-shadow: 0 1px 0 rgba(0,0,0,.4); }
.nt-stack .ntp.flat:nth-child(odd) { margin-top: 4px; }
.nt-foot { display: flex; }
.nt-foot .nt-leave { flex: 1; min-width: 0; height: auto; min-height: 42px; padding: 8px 12px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; white-space: normal; text-align: center; line-height: 1.2; font-size: 12.5px; }
.nt-foot .nt-leave svg.i { flex: none; width: 16px; height: 16px; }

/* ---------- home: a corner of the board, the look, the games to win ---------- */
.logo-nt { position: relative; width: 36px; height: 36px; flex: none; }
.logo-nt svg { width: 36px; height: 36px; display: block; filter: drop-shadow(0 3px 5px rgba(0,0,0,.45)); }
.hero-nt .nt-art { position: relative; height: 150px; display: flex; justify-content: center; align-items: flex-start; }
.nt-mini { --bw: 200px; position: relative; margin-top: 4px; width: 150px; aspect-ratio: 1; padding: 9px; box-sizing: border-box; border-radius: 10px;
  background: linear-gradient(135deg, var(--fr1), var(--fr2) 55%, var(--fr3)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), 0 14px 26px -10px rgba(0,0,0,.8);
  transform: perspective(600px) rotateX(18deg) rotateZ(-6deg); animation: ntMiniIn .7s cubic-bezier(.2,.9,.3,1) backwards; }
@keyframes ntMiniIn { from { transform: perspective(600px) rotateX(40deg) rotateZ(-20deg) translateY(-20px); opacity: 0; } }
.nt-mini-sq { position: relative; display: grid; grid-template: repeat(4, 1fr) / repeat(4, 1fr); width: 100%; height: 100%; border-radius: 3px; overflow: hidden;
  box-shadow: 0 0 0 2px var(--in2), 0 0 0 4px var(--in1); }
.nt-mini-sq i.l { background: linear-gradient(160deg, var(--sl1), var(--sl2)); } .nt-mini-sq i.d { background: linear-gradient(160deg, var(--sd1), var(--sd2)); }
.nt-mini .ntp { --u: 33px; left: calc(9px + var(--x) * 132 / 100); top: calc(9px + var(--y) * 132 / 100); width: 26px; animation: ntArrive .6s cubic-bezier(.3,1.4,.5,1) backwards; animation-delay: calc(var(--d) + .3s); }
.nt-to { display: grid; grid-template-columns: repeat(3, 1fr); }
.nt-to button { font-size: 16px; font-weight: 900; }
/* your look: a small sample of the board and the pieces you see, and what they are called */
.nt-mylook { 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; }
.nt-mylook:hover { background: rgba(255,255,255,.07); border-color: rgba(255,216,102,.4); }
.nt-mylook > svg.i { width: 18px; height: 18px; color: var(--muted); flex: none; }
.nt-ml-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.nt-ml-t b { font-size: 14px; } .nt-ml-t small { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nt-ml-prev, .nt-lk-prev { position: relative; flex: none; display: grid; grid-template: 1fr 1fr / 1fr 1fr; width: 52px; height: 52px; padding: 5px; box-sizing: border-box; border-radius: 8px;
  background: linear-gradient(135deg, var(--fr1), var(--fr2) 55%, var(--fr3)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.2), 0 6px 12px -6px rgba(0,0,0,.8); }
.nt-ml-prev .sq.l, .nt-lk-prev .sq.l { background: linear-gradient(160deg, var(--sl1), var(--sl2)); } .nt-ml-prev .sq.d, .nt-lk-prev .sq.d { background: linear-gradient(160deg, var(--sd1), var(--sd2)); }
.nt-ml-prev .ntp, .nt-lk-prev .ntp { --u: 22px; width: 17px; }
.nt-ml-prev .ntp.p0, .nt-lk-prev .ntp.p0 { left: 70%; top: 32%; } .nt-ml-prev .ntp.p1, .nt-lk-prev .ntp.p1 { left: 30%; top: 70%; }
.nt-modal { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 16px; background: rgba(4,3,14,.6); animation: fade .2s; }
.nt-modal.hidden { display: none; }
.nt-lk-box { width: min(520px, 100%); max-height: 90dvh; overflow-x: hidden; overflow-y: auto; box-sizing: border-box; padding: 20px; border-radius: 24px;
  background: linear-gradient(165deg, rgba(42,31,100,.98), rgba(17,13,44,.98)); border: 1px solid rgba(255,255,255,.14); box-shadow: 0 30px 80px -20px rgba(0,0,0,.9); }
.nt-lk-box h3 { margin: 0 0 4px; font-size: 19px; font-weight: 900; }
.nt-lk-note { margin: 0 0 12px; font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.nt-lk-h { margin: 12px 0 8px; font-size: 11px; font-weight: 900; letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); }
.nt-lk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); gap: 8px; min-width: 0; }
.nt-lk { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 14px; cursor: pointer; color: var(--text); text-align: left; font: 700 12.5px 'Inter', system-ui, sans-serif;
  background: rgba(255,255,255,.04); border: 1px solid var(--stroke); }
.nt-lk { min-width: 0; overflow: hidden; }
.nt-lk > span:last-child { flex: 1; min-width: 0; line-height: 1.25; overflow-wrap: anywhere; hyphens: auto; }
.nt-lk.on { border-color: #ffd866; background: rgba(255,216,102,.1); box-shadow: 0 0 0 1px #ffd866 inset; }
.nt-lk-acts { display: flex; justify-content: flex-end; margin-top: 14px; }

/* ---------- smaller screens ---------- */
@media (max-width: 1100px) { .nt-wrap { grid-template-columns: minmax(0, 1fr) 260px; gap: 10px 14px; } }
@media (max-height: 760px) and (min-width: 821px) { .nt-trayp { display: none; } }
/* upright screens and small windows: the buttons on top, the board as wide as the screen, everything else under it */
@media (orientation: portrait), (max-width: 820px) and (min-height: 521px) {
  body.game-ntama[data-page="table"] #table.page { height: auto; overflow: visible; padding: 8px 10px 14px; }
  html:has(body.game-ntama[data-page="table"]) { overflow: auto; }
  .nt-wrap { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; grid-template-areas: "tools" "board" "side"; gap: 8px; height: auto; }
  .nt-tools { justify-content: flex-end; }
  .nt-boardbox { aspect-ratio: 1; }
  .nt-side { overflow: visible; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
  .nt-players, .nt-dock, .nt-foot { grid-column: 1 / -1; }
  .nt-players { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 8px; }
  .nt-pl { padding: 7px 9px; } .nt-pl .nt-sw.ntp { display: none; }
  .nt-score { display: flex; flex-direction: column; justify-content: center; gap: 0; height: 100%; box-sizing: border-box; padding: 6px 10px; text-align: center; }
  .nt-score small:last-child { text-align: center; }
  .nt-logp { max-height: 220px; }
  .nt-trayp { display: block; }
}
@media (max-width: 520px) {
  .nt-pl { padding: 6px 7px; gap: 6px; } .nt-av { width: 34px; height: 34px; padding: 2px; }
  .nt-pn b { font-size: 12px; } .nt-pn small { font-size: 10.5px; white-space: normal; }
  .nt-sc { font-size: 24px; gap: 6px; } .nt-sc i { font-size: 16px; } .nt-score small { font-size: 9px; letter-spacing: .4px; }
  .nt-side { grid-template-columns: minmax(0, 1fr); }
  .nt-tool { width: 38px; height: 38px; }
}
/* a phone sideways: the whole height for the board on the left, the buttons and the rest in one column on the right */
@media (orientation: landscape) and (max-height: 520px) {
  body.game-ntama[data-page="table"] .top, body.game-ntama[data-page="table"] .site-foot { display: none; }
  body.game-ntama[data-page="table"] #table.page { height: 100dvh; margin: 0; padding: 4px max(6px, env(safe-area-inset-right)) 4px max(6px, env(safe-area-inset-left)); }
  .nt-wrap { grid-template-columns: minmax(0, 1fr) 200px; gap: 6px 8px; }
  .nt-tools { gap: 5px; }
  .nt-tool { width: 32px; height: 32px; border-radius: 10px; } .nt-tool svg.i { width: 15px; height: 15px; }
  /* (the pause: its icon only, so that the five buttons, Leave too, stay on one line in the narrow column) */
  .nt-tool.wide { width: 32px; padding: 0; }
  .nt-tool.wide > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .nt-side { gap: 6px; } .nt-players { gap: 5px; }
  .nt-pl { padding: 5px 30px 5px 7px; gap: 6px; border-radius: 13px; } .nt-av { width: 28px; height: 28px; padding: 2px; }
  .nt-pn b { font-size: 11.5px; } .nt-pn small { font-size: 9.5px; }
  .nt-pl .nt-sw.ntp { --u: 20px; width: 15px; margin-top: -7px; right: 8px; }
  .nt-score { padding: 4px 8px; } .nt-sc { font-size: 20px; } .nt-sc i { font-size: 14px; } .nt-score small { font-size: 8.5px; letter-spacing: .3px; }
  .nt-dock { padding: 7px 9px; border-radius: 13px; } .nt-dock .turnlbl { font-size: 11px; margin-bottom: 5px; }
  .nt-panel { display: none; }
  .nt-foot .nt-leave { min-height: 32px; padding: 5px 8px; font-size: 10.5px; border-radius: 11px; }
}
/* full screen: the table on one screen, nothing scrolls (the page's bar and footer go; the board grows to the height) */
body.game-fs .nt-wrap { height: 100%; }
@media (orientation: portrait), (max-width: 820px) and (min-height: 521px) {
  body.game-fs[data-page="table"]:has(.nt-wrap) { height: auto; min-height: 100dvh; overflow: visible; }
  body.game-fs[data-page="table"] .page#table:has(.nt-wrap) { height: auto; overflow: visible; }
}
/* the look window (2026-10-18): larger, the boards and pieces drawn larger */
.nt-lk-box { width: min(760px, 100%); padding: 22px; }
.nt-lk-grid { grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); gap: 10px; }
.nt-lk { flex-direction: column; justify-content: center; gap: 8px; padding: 10px 8px; text-align: center; font-size: 12.5px; }
.nt-lk .nt-lk-prev { zoom: 1.75; }
@media (max-width: 600px) { .nt-lk-box { padding: 16px 12px; } .nt-lk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .nt-lk .nt-lk-prev { zoom: 1.5; } }

/* the looks window always under the site's bar (it was centred: a tall one went under the bar); where the bar is hidden, the whole height */
.nt-modal { padding-top: calc(var(--top) + 12px); }
.nt-lk-box { max-height: calc(100dvh - var(--top) - 28px); }
body.game-fs .nt-modal { padding-top: 16px; } body.game-fs .nt-lk-box { max-height: calc(100dvh - 32px); }
@media (orientation: landscape) and (max-height: 520px) { body[data-page="table"] .nt-modal { padding-top: 16px; } body[data-page="table"] .nt-lk-box { max-height: calc(100dvh - 32px); } }