/* Audio Table -- styles. Dark by default (follows the system), light and high-contrast themes, RTL aware,
   motion only when the user allows it. */
:root {
  --bg: #0d1712; --bg2: #13221b; --panel: #172a21; --panel2: #1d3429; --text: #eef5ef; --muted: #a9bfb2;
  --accent: #f2c14e; --accent2: #6fd3a0; --danger: #ff7a6b; --line: #2b4637; --focus: #ffd54a;
  --felt1: #1f7a4d; --felt2: #0f4a2c; --rim: #5a3a1e; --shadow: 0 8px 28px #0008;
  --card-w: 64px; --radius: 14px; --font: system-ui, "Segoe UI", Roboto, "Noto Sans", "Noto Sans Arabic", "Noto Sans Devanagari", sans-serif;
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  :root[data-theme="auto"] { --bg: #f3efe6; --bg2: #e9e3d6; --panel: #fffdf8; --panel2: #f5f0e5; --text: #1b241f;
    --muted: #55645b; --accent: #8a5208; --accent2: #1d7a4c; --danger: #b3261e; --line: #d9d0bf; --focus: #0a58ca;
    --shadow: 0 6px 20px #0002; color-scheme: light; }
}
:root[data-theme="light"] { --bg: #f3efe6; --bg2: #e9e3d6; --panel: #fffdf8; --panel2: #f5f0e5; --text: #1b241f;
  --muted: #55645b; --accent: #8a5208; --accent2: #1d7a4c; --danger: #b3261e; --line: #d9d0bf; --focus: #0a58ca;
  --shadow: 0 6px 20px #0002; color-scheme: light; }
:root[data-theme="contrast"] { --bg: #000; --bg2: #000; --panel: #000; --panel2: #111; --text: #fff; --muted: #fff;
  --accent: #ffff00; --accent2: #00ffff; --danger: #ff6060; --line: #fff; --focus: #ffff00; --felt1: #003d1f; --felt2: #001a0d; }
:root.big { --card-w: 92px; font-size: 118%; }

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); line-height: 1.45; }
body { min-height: 100vh; background: radial-gradient(ellipse at top, var(--bg2), var(--bg) 60%); }
button, input, select { font: inherit; color: inherit; }
h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 .5rem; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; inset-inline-start: 8px; top: -60px; background: var(--accent); color: var(--bg); padding: 8px 14px;
  border-radius: 8px; z-index: 100; }
.skip:focus { top: 8px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
[hidden] { display: none !important; }
kbd { font-family: ui-monospace, monospace; font-size: .85em; border: 1px solid var(--line); border-bottom-width: 2px;
  border-radius: 5px; padding: 0 5px; background: var(--panel2); }

/* buttons + forms */
button { background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; padding: .5rem .9rem; cursor: pointer;
  min-height: 44px; transition: background .15s, transform .1s, border-color .15s; }
button:hover:not(:disabled) { border-color: var(--accent2); }
button:active:not(:disabled) { transform: translateY(1px); }
button:disabled { opacity: .5; cursor: not-allowed; }
button.primary { background: linear-gradient(180deg, #f6cf6a, #e0a92c); color: #1d1503; border-color: #b9861c; font-weight: 650; }
:root[data-theme="contrast"] button.primary { background: #ffff00; color: #000; }
button.danger { border-color: var(--danger); color: var(--danger); }
button[aria-pressed="true"] { background: var(--accent2); color: #04150c; border-color: var(--accent2); }
.iconbtn { min-height: 40px; padding: .35rem .7rem; display: inline-flex; align-items: center; gap: .4rem; }
.ico { width: 1.15em; height: 1.15em; flex: none; vertical-align: -.2em; }
button .ico + span { margin-inline-start: .15rem; }
.gfx, .gameicon { direction: ltr; unicode-bidi: isolate; }
.btnrow { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.form { display: flex; flex-direction: column; gap: .35rem; }
.form label { font-weight: 600; margin-top: .4rem; }
.form label.check { font-weight: 400; display: flex; gap: .5rem; align-items: center; }
input, select { background: var(--bg); border: 1px solid var(--line); border-radius: 9px; padding: .55rem .7rem; min-height: 44px; }
input[type="checkbox"] { width: 22px; height: 22px; min-height: 0; accent-color: var(--accent2); }
input[type="range"] { padding: 0; accent-color: var(--accent); }
fieldset { border: 1px solid var(--line); border-radius: 10px; display: flex; flex-direction: column; gap: .3rem; }
.hint, .sub { color: var(--muted); margin: 0; font-size: .92em; }
.error { color: var(--danger); min-height: 1.4em; margin: .3rem 0; font-weight: 600; }
.empty { color: var(--muted); font-style: italic; }
.badge { display: inline-block; font-size: .75em; padding: 1px 7px; border-radius: 99px; background: var(--panel2);
  border: 1px solid var(--line); margin-inline: .35rem; vertical-align: middle; }
.badge.staff { border-color: var(--accent); color: var(--accent); }

/* layout */
.topbar { display: flex; align-items: center; gap: 1rem; padding: .6rem 1rem; flex-wrap: wrap;
  background: linear-gradient(180deg, #0008, transparent); position: sticky; top: 0; z-index: 10; backdrop-filter: blur(6px); }
.brand { font-size: 1.3rem; margin: 0; display: flex; align-items: center; gap: .4rem; }
.logo { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--felt1), var(--felt2)); color: #fff; box-shadow: 0 0 0 2px var(--accent); }
.conn { margin: 0; display: flex; align-items: center; gap: .4rem; color: var(--muted); font-size: .9em; }
.conn .dot { width: 10px; height: 10px; border-radius: 50%; background: #c9a227; }
.conn[data-state="open"] .dot { background: #3ddc84; box-shadow: 0 0 8px #3ddc84; }
.conn[data-state="closed"] .dot, .conn[data-state="reconnecting"] .dot { background: var(--danger); }
.topnav { margin-inline-start: auto; display: flex; gap: .4rem; flex-wrap: wrap; }
main { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 1rem; padding: 0 1rem 1rem; max-width: 1500px; margin: 0 auto; }
body[data-screen="login"] main { grid-template-columns: 1fr; }
.screen { min-width: 0; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem; box-shadow: var(--shadow); }
.side { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); display: flex; flex-direction: column;
  max-height: calc(100vh - 90px); position: sticky; top: 74px; min-height: 420px; }
.tabs { display: flex; gap: .25rem; padding: .4rem; border-bottom: 1px solid var(--line); }
.tabs [role="tab"] { flex: 1; border-radius: 9px; background: transparent; border-color: transparent; }
.tabs [role="tab"][aria-selected="true"] { background: var(--panel2); border-color: var(--accent); color: var(--accent); font-weight: 650; }
.pane { display: flex; flex-direction: column; flex: 1; min-height: 0; padding: .5rem; }
.log { list-style: none; margin: 0; padding: .3rem; overflow-y: auto; flex: 1; min-height: 200px; font-size: .95em; }
.log li { padding: .25rem .2rem; border-bottom: 1px solid #ffffff0a; word-wrap: break-word; }
.log .time { color: var(--muted); font-size: .8em; }
.log .msg.pm { color: var(--accent2); }
.log .msg.own strong { color: var(--accent); }
.chatform { display: flex; gap: .3rem; padding-top: .4rem; }
.chatform input { flex: 1; min-width: 0; }
.chatform select { width: auto; }
.people { list-style: none; margin: 0; padding: 0; overflow-y: auto; }
.people li { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; padding: .45rem .2rem; border-bottom: 1px solid var(--line); }
.people .btnrow button { min-height: 36px; padding: .2rem .55rem; font-size: .85em; }
.pname { font-weight: 600; flex: 1; }

/* login */
.login-panel { max-width: 460px; margin: 3vh auto; position: relative; overflow: hidden; }
.hero { height: 110px; position: relative; margin-bottom: .5rem; }
.hero-card { position: absolute; top: 12px; left: 50%; width: 62px; height: 88px; border-radius: 9px; background: #fffdf8; color: #111;
  display: flex; flex-direction: column; align-items: flex-start; padding: 6px 8px; font-size: 1.15rem; font-weight: 800; line-height: 1.05;
  box-shadow: var(--shadow); border: 1px solid #0003; text-align: start; }
.hero-card.c1 { transform: translateX(-165%) rotate(-12deg); }
.hero-card.c2 { transform: translateX(-50%) translateY(-8px); color: #c8102e; z-index: 1; }
.hero-card.c3 { transform: translateX(65%) rotate(12deg); color: #c8102e; z-index: 2; }
.login-panel .tabs { margin: .6rem 0; border: 0; padding: 0; }

/* lobby */
.lobby-head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin: .5rem 0 1rem; }
.lobby-head h2 { margin: 0; }
.lobby-head .btnrow { margin-inline-start: auto; }
.lobby-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.filter { display: flex; gap: .5rem; align-items: center; margin-bottom: .6rem; }
.tablelist, .gamelist { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.gamelist { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
.tablelist { grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); }
.tableitem { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; padding: .8rem;
  border-radius: 12px; background: linear-gradient(135deg, var(--felt1), var(--felt2)); color: #fff; border: 2px solid var(--rim); }
.tableitem .sub, .tableitem .seatsline { color: #d7eadf; margin: .1rem 0 0; }
.tableitem.playing { filter: saturate(.8); }
.tableitem h4 { margin: 0; font-size: 1.1rem; }
.gamelist .game { padding: .8rem; border-radius: 14px; background: linear-gradient(160deg, var(--panel2), var(--panel)); border: 1px solid var(--line);
  display: flex; flex-direction: column; gap: .2rem; transition: border-color .2s, transform .2s; }
.gamelist .game:hover, .gamelist .game:focus-within { border-color: var(--accent); transform: translateY(-2px); }
.gamelist .game .sub { flex: 1; }
.gicon { height: 66px; display: grid; place-items: center; border-radius: 10px; margin-bottom: .3rem;
  background: radial-gradient(ellipse at 50% 40%, var(--felt1), var(--felt2)); }
.gicon .gameicon { height: 60px; width: auto; filter: drop-shadow(0 2px 3px #0008); }
.gicon.small { height: 54px; width: 76px; flex: none; }
.gicon.small .gameicon { height: 48px; }
.tableitem .tmeta { flex: 1; min-width: 12rem; }
.gamelist .btnrow { flex-wrap: nowrap; }
.gamelist .btnrow button { min-height: 38px; padding: .3rem .6rem; font-size: .9em; white-space: nowrap; }
.gamelist .game h4 { margin: 0 0 .2rem; color: var(--accent); }
.gamelist .btnrow { margin-top: .5rem; }

/* table */
.table-head { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem 1rem; margin: .5rem 0 .8rem; }
.table-head h2 { margin: 0; }
.table-head .btnrow { width: 100%; }
#btnTalk.on { background: var(--danger); color: #fff; border-color: var(--danger); }
.felt { position: relative; border-radius: 120px; padding: 118px 40px 118px; min-height: 420px;
  background: radial-gradient(ellipse at 50% 40%, var(--felt1), var(--felt2) 75%);
  box-shadow: inset 0 0 0 10px var(--rim), inset 0 0 0 13px #c9a227aa, inset 0 0 60px #0009, var(--shadow); }
.felt::before { content: ""; position: absolute; inset: 13px; border-radius: inherit; pointer-events: none;
  background: repeating-linear-gradient(45deg, #ffffff05 0 2px, transparent 2px 5px); }
.seat-ring { position: absolute; inset: 0; pointer-events: none; }
.felt[data-seats="3"], .felt[data-seats="4"], .felt[data-seats="5"], .felt[data-seats="6"], .felt[data-seats="7"], .felt[data-seats="8"] { padding-inline: 150px; }
.seat { position: absolute; transform: translate(var(--tx, -50%), var(--ty, -50%)); width: 130px; display: flex; flex-direction: column; align-items: center; gap: 2px;
  color: #fff; text-shadow: 0 1px 2px #000; z-index: 2; }
.seat .avatar { width: 52px; height: 52px; }
.avatar { border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: #fff;
  background: radial-gradient(circle at 35% 30%, hsl(var(--hue) 70% 62%), hsl(var(--hue) 60% 35%));
  border: 3px solid #ffffffcc; box-shadow: 0 3px 10px #0008; transition: box-shadow .3s, transform .3s; }
.avatar.small { width: 30px; height: 30px; font-size: .75em; border-width: 2px; }
.seat.empty .avatar { background: #ffffff1a; border-style: dashed; }
.avatar .boticon { width: 62%; height: 62%; color: #fff; }
.seat.away { opacity: .55; }
.seat.turn .avatar { box-shadow: 0 0 0 4px var(--accent), 0 0 24px 6px #f2c14e88; transform: scale(1.08); }
.seat.me .seatname { color: #f6cf6a; }
.seatname { font-size: .82em; font-weight: 650; background: #0007; padding: 0 8px; border-radius: 99px; max-width: 120px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seatscore { font-size: .78em; background: var(--accent); color: var(--bg); border-radius: 99px; padding: 0 7px; font-weight: 800; }
.speaking .avatar, li.speaking .avatar { box-shadow: 0 0 0 3px var(--accent2), 0 0 18px 4px #6fd3a0aa; }
.board { position: relative; z-index: 3; display: flex; flex-direction: column; gap: .4rem; color: #fff; }
.status { text-align: center; font-weight: 700; font-size: 1.12rem; margin: 0; text-shadow: 0 1px 3px #000;
  background: #0006; border-radius: 99px; padding: .3rem 1rem; align-self: center; }
.info { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem; justify-content: center; font-size: .9em; }
.info li { background: #0005; border-radius: 99px; padding: .1rem .7rem; }
.waiting { text-align: center; background: #0006; border-radius: 12px; padding: .8rem; margin: 1rem auto; max-width: 420px; }
.timer { position: absolute; top: -6px; inset-inline-end: 0; width: 46px; height: 46px; display: grid; place-items: center; }
.timer svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.timer circle { fill: none; stroke-width: 4; }
.timer .track { stroke: #ffffff33; }
.timer .arc { stroke: var(--accent2); stroke-dasharray: 94.25; stroke-linecap: round; transition: stroke-dashoffset .25s linear; }
.timer.low .arc { stroke: var(--danger); }
.timer span { font-weight: 800; font-size: .9em; }

.zones { display: flex; flex-wrap: wrap; gap: .6rem; }
.zone { background: #00000026; border-radius: 14px; padding: .45rem .6rem .6rem; flex: 1 1 170px; min-width: 0; }
.zone.wide { flex-basis: 100%; }
.zone.fanned .item + .item { margin-inline-start: calc(var(--card-w) * -.34); }
.zone.fanned .zitems { gap: 0; flex-wrap: wrap; row-gap: 8px; }
.zone.fanned .item:hover, .zone.fanned .item:focus, .zone.fanned .item.sel { z-index: 2; }
.zone.mine { background: #00000040; box-shadow: inset 0 0 0 1px #f2c14e55; }
.zlabel { font-size: .85em; font-weight: 650; letter-spacing: .02em; opacity: .9; margin-bottom: .3rem; }
.zitems { display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-end; min-height: 40px; padding-top: 12px; }
.zone.gridzone .zitems, .zone.boardzone .zitems { padding-top: 0; }
.item { position: relative; border-radius: 9px; cursor: pointer; outline-offset: 2px;
  transition: transform .18s ease, box-shadow .18s ease, opacity .2s; }
.item .gfx { display: block; filter: drop-shadow(0 3px 4px #0007); }
.item[data-type="card"] .gfx { width: var(--card-w); height: calc(var(--card-w) * 1.4); }
.item[data-type="tile"] .gfx { width: calc(var(--card-w) * .72); height: calc(var(--card-w) * 1.03); }
.item[data-type="die"] .gfx { width: calc(var(--card-w) * .8); height: calc(var(--card-w) * .8); }
.item[data-type="piece"] .gfx { width: calc(var(--card-w) * .6); height: calc(var(--card-w) * .6); }
.item[data-type="point"] .gfx { width: calc(var(--card-w) * .55); height: calc(var(--card-w) * 1.45); }
.item[data-type="colorcard"] .gfx { width: var(--card-w); height: calc(var(--card-w) * 1.4); }
.item[data-type="domino"] .gfx { width: calc(var(--card-w) * 1.25); height: calc(var(--card-w) * .63); }
.item[data-type="pit"] .gfx { width: calc(var(--card-w) * .9); height: calc(var(--card-w) * 1.05); }
.item[data-type="pit"] .gfx.store { width: calc(var(--card-w) * 1.2); }
.item:hover { transform: translateY(-4px); }
.item:focus-visible, .item:focus { outline: 3px solid var(--focus); box-shadow: 0 0 0 6px #ffd54a44; transform: translateY(-6px); }
.item.sel { transform: translateY(-14px); box-shadow: 0 0 0 3px var(--accent2), 0 10px 20px #0008; }
.item.dim { opacity: .55; }
.item .cap { display: block; text-align: center; font-size: .8em; padding: 2px 6px; }
.item .chip { display: inline-block; background: #fffdf8; color: #111; padding: .45rem .7rem; border-radius: 9px; font-weight: 700;
  box-shadow: 0 3px 6px #0006; }
.item.summary { display: flex; align-items: center; padding-inline-end: .5rem; min-height: 40px; }
.item.summary .fan { display: inline-block; margin-inline-start: calc(var(--card-w) * -.62); }
.item.summary .fan:first-child { margin-inline-start: 0; }
.item.summary .fan .gfx { width: calc(var(--card-w) * .7); height: calc(var(--card-w) * .98); }
.item.enter { opacity: 0; transform: translateY(-18px) scale(.92); }

/* boards built from "point" items */
.zone.boardzone .zitems { position: relative; display: block; aspect-ratio: 16 / 10; min-height: 260px;
  background: linear-gradient(90deg, #6b4423, #8b5a2b 48%, #4a2e15 48% 52%, #8b5a2b 52%, #6b4423);
  border: 8px solid #3a2410; border-radius: 10px; }
.zone.boardzone .item { position: absolute; width: 7%; height: 46%; }
.zone.boardzone .item[data-kind="square"] { height: auto; width: 6%; }
.zone.boardzone .item .gfx { width: 100%; height: 100%; }
.zone.boardzone .item.sel { transform: none; box-shadow: 0 0 0 3px var(--accent2); }
.zone.boardzone .item:focus { transform: none; }

/* grids built from "cell" items (sea battle) */
.zone.gridzone { flex: 1 1 340px; }
.zone.gridzone .zitems { display: grid; gap: 2px; max-width: 480px; align-items: stretch; margin-inline: auto; }
.zone.gridzone .ghead { font-size: .75em; text-align: center; align-self: center; opacity: .85; }
.zone.gridzone .item .gfx { width: 100%; height: auto; aspect-ratio: 1; filter: none; }
.zone.gridzone .item:hover, .zone.gridzone .item:focus, .zone.gridzone .item.sel { transform: none; }
.zone.gridzone .item:focus { outline-offset: 0; z-index: 1; }
.zone.gridzone[data-gk="board"] .zitems { gap: 0; }
.zone.gridzone[data-gk="board"] .item { border-radius: 0; }
.zone.gridzone[data-gk="board"] .item:focus { outline: 3px solid var(--focus); outline-offset: -3px; box-shadow: none; }
.zone.gridzone[data-gk="board"] .item.sel { box-shadow: inset 0 0 0 3px var(--accent2); }
.zone.gridzone[data-gk="board"] .item.dim { opacity: 1; }
.actionbar { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; padding: .8rem 0; }
.actionbar .act kbd { margin-inline-end: .4rem; }
.table-panels { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.seatlist { list-style: none; margin: 0 0 .6rem; padding: 0; }
.seatrow { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .45rem 0; border-bottom: 1px solid var(--line); }
.seatrow.turn .seatlabel { color: var(--accent); font-weight: 700; }
.seatrow .dot { width: 12px; height: 12px; border-radius: 50%; background: hsl(var(--hue) 60% 50%); }
.seatrow .dot.free { background: transparent; border: 2px dashed var(--muted); }
.seatrow .seatlabel { flex: 1; min-width: 12rem; }
.seatrow .btnrow button { min-height: 36px; padding: .2rem .6rem; font-size: .88em; }
.hostbots { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: .6rem; }
table.scores { width: 100%; border-collapse: collapse; }
table.scores th, table.scores td { text-align: start; padding: .35rem .4rem; border-bottom: 1px solid var(--line); }
table.scores tr.turn th { color: var(--accent); }

/* dialogs */
dialog { background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 16px; padding: 1.2rem;
  width: min(520px, 94vw); box-shadow: 0 20px 60px #000a; }
dialog.wide { width: min(860px, 96vw); }
dialog::backdrop { background: #000a; backdrop-filter: blur(3px); }
.menulist { list-style: none; padding: 0; margin: .5rem 0 1rem; display: grid; gap: .35rem; }
.menulist button { width: 100%; text-align: start; }
.menulist button:focus { background: var(--accent2); color: #04150c; }
.doc { max-height: 62vh; overflow-y: auto; padding: .2rem .4rem; margin-bottom: 1rem; }
.doc dt { font-weight: 700; margin-top: .4rem; }
.doc dd { margin-inline-start: 1rem; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.2rem; }
.grid2 > div { display: flex; flex-direction: column; gap: .35rem; }
table.keys { border-collapse: collapse; width: 100%; }
table.keys th, table.keys td { text-align: start; padding: .35rem; border-bottom: 1px solid var(--line); vertical-align: top; }

/* motion */
@media (prefers-reduced-motion: reduce) {
  :root[data-motion="auto"] *, :root[data-motion="auto"] *::before { transition: none !important; animation: none !important; }
}
:root[data-motion="off"] *, :root[data-motion="off"] *::before { transition: none !important; animation: none !important; }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 4px var(--accent), 0 0 18px 4px #f2c14e66; } 50% { box-shadow: 0 0 0 4px var(--accent), 0 0 30px 10px #f2c14eaa; } }
.seat.turn .avatar { animation: pulse 1.6s ease-in-out infinite; }

/* responsive */
@media (max-width: 1000px) {
  main { grid-template-columns: minmax(0, 1fr); }
  .side { position: static; max-height: 60vh; }
  .lobby-grid, .table-panels { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  :root { --card-w: 50px; }
  :root.big { --card-w: 70px; }
  main { padding: 0 .5rem .5rem; }
  .felt, .felt[data-seats] { border-radius: 26px; padding: 18px 18px 20px; min-height: 300px; }
  .zone { flex-basis: 130px; padding: .4rem .45rem .5rem; }
  .seat-ring { position: static; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 10px; margin-bottom: 8px; position: relative; z-index: 3; }
  .seat { position: static; transform: none; width: auto; flex-direction: row; gap: 4px; }
  .seat .avatar { width: 30px; height: 30px; font-size: .7em; border-width: 2px; }
  .seatname { max-width: 96px; }
  .timer { top: -4px; }
  .status { font-size: 1rem; padding: .3rem .8rem; margin-inline-end: 44px; }
  .topnav { margin-inline-start: 0; width: 100%; justify-content: flex-end; }
  .grid2 { grid-template-columns: 1fr; }
  .gamelist, .tablelist { grid-template-columns: minmax(0, 1fr); }
  .gamelist .btnrow { flex-wrap: wrap; }
  .topbar .iconbtn span[data-i18n] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .actionbar { position: sticky; bottom: 0; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(6px);
    z-index: 5; padding: .4rem; gap: .35rem; border-top: 1px solid var(--line); }
  .actionbar .act { flex: 1 1 45%; min-height: 42px; padding: .3rem .5rem; font-size: .9em; }
  .topbar { gap: .3rem .6rem; padding: .5rem .6rem; }
  .brand { font-size: 1.1rem; }
}
@media (forced-colors: active) {
  .item:focus, .item.sel { outline: 3px solid Highlight; }
}

/* round 3: account, reset, invites, blocks */
.linkbtn { background: none; border: 0; color: var(--accent2); text-decoration: underline; min-height: 40px; padding: .3rem 0; align-self: flex-start; }
.linkbtn:hover:not(:disabled) { border: 0; color: var(--accent); }
.blockbox { margin-top: .6rem; }
.blocklist, .invitebox .people { list-style: none; margin: 0; padding: 0; }
.blocklist li { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .3rem 0; border-bottom: 1px solid var(--line); }
.blockbox .btnrow input, .invitebox .btnrow input { flex: 1; min-width: 0; }
.invitebox { border-top: 1px solid var(--line); margin-top: .6rem; padding-top: .6rem; }
.invitebox h3 { font-size: 1rem; }
.acct2 { margin-top: 1rem; }
.danger-zone { border: 1px solid var(--danger); border-radius: 12px; padding: .8rem; }
.danger-zone h3 { color: var(--danger); }
#dlgAccount h3 { margin: .2rem 0 .3rem; font-size: 1.05rem; }

/* =====================================================================================================
   ROUND 4 -- the table STAGE: one felt, name plates at the edges, my hand at the bottom, piles/boards in the
   centre. Zone headings/counts are visually hidden (still read by screen readers).
   ===================================================================================================== */
body[data-screen="table"] .topbar { padding-block: .35rem; }
body[data-screen="table"] .brand { font-size: 1.05rem; }
.table-head { margin: .2rem 0 .4rem; gap: .2rem .8rem; }
.table-head h2 { font-size: 1.05rem; }
.table-head .sub { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.table-head .btnrow { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.table-head .btnrow::-webkit-scrollbar { display: none; }
.table-head .btnrow button { min-height: 40px; padding: .3rem .75rem; font-size: .9em; white-space: nowrap; flex: none; }

.felt { display: flex; flex-direction: column; border-radius: 34px; padding: 10px 10px 12px;
  min-height: max(520px, calc(100dvh - 190px)); }
.felt .seat-ring { display: none; }
.felt .board { flex: 1; display: flex; flex-direction: column; gap: 4px; min-height: 0; }
.felt .status { font-size: 1rem; padding: .25rem .9rem; max-width: 92%; text-align: center; }
.felt .info { font-size: .78em; gap: 4px; }
.felt .info li { padding: 0 .55rem; }
.felt .info li:nth-child(n+3) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.felt .timer { top: 0; }

/* the stage grid */
#zones.stage { --side: clamp(64px, 16%, 170px); flex: 1; display: grid; gap: 6px; min-height: 0;
  grid-template-columns: var(--side) minmax(0, 1fr) var(--side);
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas: "tl top tr" "left center right" "bl bottom br"; }
#zones.stage[data-seats="1"], #zones.stage[data-seats="2"] { --side: clamp(54px, 13%, 130px); }
.area { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-width: 0; min-height: 0; }
.area-tl { grid-area: tl; } .area-top { grid-area: top; flex-direction: row; flex-wrap: wrap; gap: 6px 14px; }
.area-tr { grid-area: tr; } .area-left { grid-area: left; } .area-right { grid-area: right; }
.area-center { grid-area: center; flex-direction: row; flex-wrap: wrap; align-content: center; gap: 10px 14px; }
.area-bl { grid-area: bl; } .area-br { grid-area: br; }
.area-bottom { grid-area: bottom; justify-content: flex-end; align-items: stretch; }
.stage .zone { background: none; box-shadow: none; padding: 0; margin: 0; flex: 0 1 auto; min-width: 0; border-radius: 0; container-type: inline-size; }
.stage .zone.wide { flex-basis: auto; }
.stage .zlabel { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.stage .zitems { padding-top: 0; min-height: 0; justify-content: center; }
.stage .item.dim { opacity: 1; }
.stage .item.summary .cap { color: #fff; font-weight: 800; text-shadow: 0 1px 2px #000; }

/* name plates */
.plate { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 3px; border-radius: 99px;
  background: linear-gradient(180deg, #f7f1e1, #d9ccab); color: #2b2113; box-shadow: 0 3px 8px #0007; max-width: 100%;
  border: 2px solid #8a6a3c; font-weight: 750; }
.plate .pav { width: 30px; height: 30px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: .72em; color: #fff;
  background: radial-gradient(circle at 35% 30%, hsl(var(--hue) 70% 58%), hsl(var(--hue) 60% 34%)); }
.plate .pname2 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .88em; min-width: 0; }
.plate .pscore { background: #2b2113; color: #f6cf6a; border-radius: 99px; padding: 0 7px; font-size: .78em; flex: none; }
.plate .psub { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 2px; white-space: nowrap; font-size: .7em;
  background: #000a; color: #fff; padding: 0 6px; border-radius: 99px; font-weight: 600; }
.plate.empty { opacity: .55; }
.plate.away { filter: grayscale(.8); opacity: .7; }
.plate.turn { border-color: #ffd54a; box-shadow: 0 0 0 3px #ffd54a99, 0 0 22px 6px #ffd54a88; animation: plateglow 1.4s ease-in-out infinite; }
@keyframes plateglow { 50% { box-shadow: 0 0 0 3px #ffd54acc, 0 0 30px 10px #ffd54aaa; } }
.area-left .plate, .area-right .plate, .area-tl .plate, .area-tr .plate { flex-direction: column; padding: 4px 6px 6px; border-radius: 16px; gap: 2px; max-width: 100%; }
.area-left .plate .pname2, .area-right .plate .pname2, .area-tl .plate .pname2, .area-tr .plate .pname2 { max-width: calc(var(--side) - 14px); font-size: .78em; }
.area-bottom .plate { align-self: flex-start; transform: scale(.9); transform-origin: left center; }
[dir="rtl"] .area-bottom .plate { transform-origin: right center; }
.speaking.plate, .plate.speaking { outline: 3px solid var(--accent2); }

/* opponents: a small fan of backs next to their plate */
.zone[data-kind="backs"] .item.summary { min-height: 0; padding: 0; }
.zone[data-kind="backs"] .item.summary .fan .gfx { width: 26px; height: 37px; }
.zone[data-kind="backs"] .item.summary .fan { margin-inline-start: -17px; }
.zone[data-kind="backs"] .item.summary .fan:first-child { margin-inline-start: 0; }
.zone[data-kind="backs"] .item.summary .cap { font-size: .8em; margin-inline-start: 4px; }
.zone[data-kind="backs"] .item:hover, .zone[data-kind="backs"] .item:focus { transform: none; }

/* sizes on the stage */
.stage { --cw: 70px; }
.stage .item[data-type="card"] .gfx, .stage .item[data-type="colorcard"] .gfx { width: var(--cw); height: calc(var(--cw) * 1.4); }
.stage .item[data-type="tile"] .gfx { width: calc(var(--cw) * .74); height: calc(var(--cw) * 1.06); }
.stage .item[data-type="die"] .gfx { width: calc(var(--cw) * .95); height: calc(var(--cw) * .95); }
.stage .item[data-type="domino"] .gfx { width: calc(var(--cw) * 1.15); height: calc(var(--cw) * .58); }
.stage .item.summary .gfx.tile { width: calc(var(--cw) * .74); height: calc(var(--cw) * 1.06); }

/* my hand: a fan at the bottom */
.zone[data-kind="fan"] .zitems { flex-wrap: nowrap; gap: 0; padding: 18px 4px 4px; }
.zone[data-kind="fan"] .item { margin-inline-start: clamp(calc(var(--cw) * -.72), calc((100cqw - 8px - var(--n) * var(--cw)) / max(1, var(--n) - 1)), 6px);
  transform: rotate(calc((var(--i) - (var(--n) - 1) / 2) * 2deg)) translateY(calc(max(var(--i) - (var(--n) - 1) / 2, (var(--n) - 1) / 2 - var(--i)) * 1px)); transform-origin: 50% 120%; }
.zone[data-kind="fan"] .item:first-child { margin-inline-start: 0; }
.zone[data-kind="fan"] .item:hover, .zone[data-kind="fan"] .item:focus { transform: translateY(-10px); z-index: 3; }
.zone[data-kind="fan"] .item.sel { transform: translateY(-18px); z-index: 3; }

/* actionable: glow only what you can touch now */
.stage .item.can { box-shadow: 0 0 0 3px #8cf5a5, 0 0 16px 3px #5fe08a99; border-radius: 9px; }
.stage .item.can.sel, .stage .item.sel { box-shadow: 0 0 0 4px #ffd54a, 0 8px 18px #0009; }
.stage .zone.tap .item { cursor: pointer; box-shadow: 0 0 0 3px #8cf5a5, 0 0 18px 4px #5fe08a99; border-radius: 9px; animation: tapglow 1.6s ease-in-out infinite; }
@keyframes tapglow { 50% { box-shadow: 0 0 0 3px #b6ffc6, 0 0 26px 8px #5fe08acc; } }

/* okey: the wooden two-row rack */
.zone[data-kind="rack"] .zitems { display: grid; grid-template-columns: repeat(var(--per), minmax(0, 1fr)); gap: 10px 3px; align-items: end;
  padding: 10px 8px 12px; border-radius: 10px; background:
    linear-gradient(180deg, transparent 0 calc(50% - 4px), #5a3416 calc(50% - 4px) calc(50% + 2px), transparent calc(50% + 2px)),
    repeating-linear-gradient(90deg, #00000008 0 3px, transparent 3px 11px),
    linear-gradient(180deg, #c98c4e, #a8682f 60%, #8a5222);
  border: 3px solid #6e3f17; box-shadow: inset 0 2px 0 #ffffff40, 0 8px 18px #0008; }
.zone[data-kind="rack"] .item .gfx { width: 100% !important; height: auto !important; aspect-ratio: 70 / 100; }
.zone[data-kind="rack"] .item:hover, .zone[data-kind="rack"] .item:focus { transform: translateY(-4px); }
.zone[data-kind="rack"] .item.sel { transform: translateY(-9px); }
[data-layout="okey"] .area-tl .gfx.tile, [data-layout="okey"] .area-tr .gfx.tile, [data-layout="okey"] .area-bl .gfx.tile, [data-layout="okey"] .area-br .gfx.tile { width: calc(var(--cw) * .7); height: calc(var(--cw) * 1); }
[data-layout="okey"] .area-center { flex-wrap: nowrap; }
[data-layout="okey"] .zone[data-zid="center"] .gfx { transform: rotate(-4deg); }
[data-layout="okey"] .zone[data-zid^="meld"] .gfx.tile { width: calc(var(--cw) * .48); height: calc(var(--cw) * .69); }
[data-layout="okey"] .zone[data-zid^="meld"] .zitems { gap: 1px; background: #0002; border-radius: 6px; padding: 2px; }
[data-layout="okey"] .area-center:has(.zone[data-zid^="meld"]) { flex-wrap: wrap; }

/* boards in the centre */
.stage .zone[data-kind="board"] { flex: 1 1 100%; display: flex; justify-content: center; }
.stage .zone.gridzone .zitems { width: min(100%, 64vh); max-width: none; }
[data-layout="grid2"] .area-center { flex-wrap: wrap; }
[data-layout="grid2"] .zone.gridzone { flex: 1 1 300px; }
[data-layout="grid2"] .zone[data-zid="fleet"] .zitems { width: min(100%, 34vh); }
[data-layout="grid2"] .zone[data-zid="target"] .zitems { width: min(100%, 50vh); }
.stage .zone.boardzone .zitems { width: min(100%, 96vh); }
[data-layout="tavla"] .area-center { flex-direction: column; flex-wrap: nowrap; }
[data-layout="tavla"] .zone[data-zid="moves"] .zitems { gap: 4px; }
[data-layout="tavla"] .zone[data-zid="moves"] .item .cap { background: #fffdf8; color: #111; border-radius: 8px; padding: .3rem .55rem; font-weight: 700; }

/* mangala: a long wooden board */
[data-layout="mangala"] .area-center { position: relative; width: 100%; aspect-ratio: 2.7 / 1; max-height: 60vh; align-self: center;
  border-radius: 999px / 46%; background: radial-gradient(ellipse at 50% 30%, #d9a066, #a8692f 70%, #7c4a1d);
  box-shadow: inset 0 3px 0 #fff4, inset 0 -6px 12px #0006, 0 12px 26px #000a; border: 4px solid #5a3414; }
[data-layout="mangala"] .area-center .zone { position: absolute; inset: 0; }
[data-layout="mangala"] .area-center .zitems { position: absolute; inset: 0; display: block; }
.stage .item.mpit, .stage .item.mstore { position: absolute; border-radius: 40%; }
.stage .item.mpit .gfx, .stage .item.mstore .gfx { width: 100% !important; height: 100% !important; }
.stage .item.mpit:hover, .stage .item.mpit:focus, .stage .item.mstore:focus { transform: none; }
.stage .item.mpit.can { box-shadow: 0 0 0 3px #8cf5a5, 0 0 18px 5px #5fe08aaa; border-radius: 45%; }

/* ludo: the cross board */
[data-layout="ludo"] .area-center { position: relative; width: min(100%, 62vh); aspect-ratio: 1; align-self: center; flex-wrap: nowrap; }
[data-layout="ludo"] .ludo-bg { position: absolute; inset: 0; border-radius: 10px; overflow: hidden; box-shadow: 0 10px 24px #000a; }
[data-layout="ludo"] .ludo-bg svg { width: 100%; height: 100%; display: block; }
[data-layout="ludo"] .area-center .zone { position: absolute; inset: 0; pointer-events: none; }
[data-layout="ludo"] .area-center .zitems { position: absolute; inset: 0; display: block; }
[data-layout="ludo"] .area-center .item { position: absolute; pointer-events: auto; }
.stage .item.lsq .gfx, .stage .item.ltok .gfx { width: 100% !important; height: 100% !important; filter: drop-shadow(0 2px 2px #0008); }
.stage .item.lsq:hover, .stage .item.lsq:focus, .stage .item.ltok:focus { transform: none; }
.stage .item.lhide { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.stage .item.ltray .gfx { width: 46px; height: 46px; }
[data-layout="ludo"] .zone[data-role="seat_info"] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* dice games */
[data-layout="dice"] .stage .item[data-type="die"] .gfx, [data-layout="dice"] .item[data-type="die"] .gfx { width: 74px; height: 74px; }
.zone[data-kind="scorecard"] .zitems { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px; max-height: 32vh; overflow-y: auto; }
.zone[data-kind="scorecard"] .item .cap, .zone[data-kind="chips"] .item .cap, .zone[data-kind="mini"] .item .cap { background: #fffdf8; color: #1b241f; border-radius: 7px;
  padding: .25rem .5rem; font-size: .82em; text-align: start; font-weight: 650; }
.zone[data-kind="scorecard"] .item:hover, .zone[data-kind="scorecard"] .item:focus { transform: none; }
.zone[data-kind="mini"] .item .cap { font-size: .7em; padding: .1rem .35rem; }

/* waiting for players */
.waitpanel { margin: auto; text-align: center; display: flex; flex-direction: column; gap: .8rem; align-items: center; z-index: 4; position: relative; }
.waitpanel .waiting { margin: 0; }
.waitpanel .big { min-height: 56px; font-size: 1.08rem; padding: .5rem 1.4rem; border-radius: 16px; }
.felt[data-waiting="true"] #zones.stage { flex: 1; }
.felt[data-waiting="true"] .board { position: relative; }
.felt[data-waiting="true"] .waitpanel { position: absolute; inset: 0; justify-content: center; pointer-events: none; }
.felt[data-waiting="true"] .waitpanel > * { pointer-events: auto; }

/* the slim action bar */
.actionbar { position: sticky; bottom: 0; z-index: 6; padding: .45rem .4rem; gap: .45rem; flex-wrap: nowrap;
  background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(8px); border-radius: 16px 16px 0 0; }
.actionbar .act { flex: 1 1 0; min-width: 0; min-height: 52px; font-size: 1rem; font-weight: 700; border-radius: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.actionbar .act kbd { display: none; }
@media (pointer: fine) { .actionbar .act kbd { display: inline-block; } }
.actionbar .act.more { flex: 0 0 auto; padding-inline: 1rem; }

/* desktop */
@media (min-width: 1001px) {
  .stage { --cw: 82px; }
  .felt { min-height: max(560px, calc(100dvh - 170px)); }
}
/* phone portrait (430 x 932 first) */
@media (max-width: 640px) {
  .stage { --cw: 54px; }
  #zones.stage { --side: 74px; gap: 4px; }
  #zones.stage[data-seats="1"], #zones.stage[data-seats="2"] { --side: 50px; }
  .felt, .felt[data-seats] { border-radius: 22px; padding: 8px 6px 10px; min-height: calc(100dvh - 150px); }
  .plate { padding: 2px 8px 2px 2px; gap: 4px; }
  .plate .pav { width: 26px; height: 26px; }
  .plate .pname2 { font-size: .8em; }
  .zone[data-kind="rack"] .zitems { gap: 8px 2px; padding: 8px 5px 10px; }
  [data-layout="dice"] .item[data-type="die"] .gfx { width: 56px; height: 56px; }
  .stage .zone.gridzone .zitems { width: min(100%, 58vh); }
  [data-layout="grid2"] .zone[data-zid="fleet"] .zitems { width: min(78%, 30vh); }
  .table-head { flex-wrap: nowrap; }
  .table-head h2 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 40vw; }
}
.stage .item[data-type="miles"] .gfx { width: var(--cw); height: calc(var(--cw) * 1.4); }
.stage .item[data-type="ball"] .gfx { width: calc(var(--cw) * .62); height: calc(var(--cw) * .62); }
.stage .item.lsq.lyardcell .gfx, .stage .item.lsq.lhome .gfx { filter: none; }
.area-left, .area-right, .area-top, .area-tl, .area-tr { --cw: 34px; }
[data-layout="okey"] .area-tl, [data-layout="okey"] .area-tr, [data-layout="okey"] .area-bl, [data-layout="okey"] .area-br { --cw: 64px; }

/* ---- round 4, iteration 2 ---- */
#zones.stage { grid-template-rows: auto minmax(0, 1fr) auto auto;
  grid-template-areas: "tl top tr" "left center right" "bl center br" "bottom bottom bottom"; }
.felt { height: calc(100dvh - var(--chrome, 196px)); min-height: 460px; }
body[data-screen="table"] { --chrome: 196px; }
.actionbar { position: static; border-radius: 0 0 16px 16px; }
.actionbar .act { white-space: normal; line-height: 1.15; font-size: .95rem; padding: .3rem .5rem; }
.actionbar:empty { display: none; }
.zone.allcan .item.can { box-shadow: none; }
.zone.allcan .zitems { box-shadow: 0 0 0 3px #8cf5a5aa, 0 0 22px 4px #5fe08a66, inset 0 2px 0 #ffffff40; }
.stage .zone[data-role="discard"] .item.summary { width: calc(var(--cw) * .74); height: calc(var(--cw) * 1.06); border: 2px dashed #ffffff70;
  border-radius: 8px; justify-content: center; }
.stage .zone[data-role="discard"] .item.summary .cap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.stage .zone.tap .item.summary { border-color: #8cf5a5; }
@media (min-width: 641px) {
  .area-left .plate, .area-right .plate { flex-direction: row; border-radius: 99px; padding: 3px 10px 3px 3px; }
  .area-left .plate .pname2, .area-right .plate .pname2 { max-width: calc(var(--side) - 60px); font-size: .85em; }
}
@media (max-width: 640px) {
  body[data-screen="table"] { --chrome: 164px; }
  body[data-screen="table"] .topbar { flex-wrap: nowrap; padding: .3rem .5rem; gap: .3rem; }
  body[data-screen="table"] .brand span[data-i18n], body[data-screen="table"] .conn #connText { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  body[data-screen="table"] .topnav { width: auto; margin-inline-start: auto; flex-wrap: nowrap; }
  body[data-screen="table"] .topnav .iconbtn { min-height: 38px; padding: .2rem .5rem; }
  body[data-screen="table"] .table-head h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  body[data-screen="table"] main { padding-top: 0; }
  .table-head { margin: 0 0 .3rem; }
  .table-head .btnrow button { min-height: 36px; padding: .2rem .6rem; font-size: .85em; }
  .actionbar { padding: .35rem .3rem; }
  .actionbar .act { min-height: 50px; font-size: .9rem; }
}
.stage .zone { container-type: normal; }
.stage .zone[data-kind="fan"] { container-type: inline-size; width: 100%; flex: 1 1 100%; }
#zones.stage[data-seats="1"]:not([data-layout="okey"]), #zones.stage[data-seats="2"]:not([data-layout="okey"]) { --side: 0px; gap: 6px 0; }
[data-layout="mangala"] .area-center { width: 100%; max-width: 980px; }
[data-layout="okey"] .area-center { gap: 18px; }
/* ---- iteration 3: boards sized by the space they really have ---- */
.stage .area-center { container-type: size; }
[data-layout="ludo"] .area-center, [data-layout="mangala"] .area-center { container-type: normal; }
.stage .zone.gridzone .zitems { width: min(100cqw, calc(100cqh - 1.8em)); }
[data-layout="grid2"] .zone[data-zid="target"] .zitems { width: min(62cqw, calc(100cqh - 1.8em)); }
[data-layout="grid2"] .zone[data-zid="fleet"] .zitems { width: min(34cqw, calc(60cqh - 1.8em)); }
.stage .zone.boardzone .zitems { min-height: 0; width: min(100cqw, calc((100cqh - 150px) * 1.6)); }
[data-layout="tavla"] .zone[data-role="center"] .item .cap, [data-layout="tavla"] .zone[data-zid="side"] .item .cap { font-size: .8em; padding: .15rem .45rem; }
[data-layout="tavla"] .zone[data-zid="side"] .item .gfx { width: 26px; height: 26px; }
.stage .zone[data-role="center"] .item.summary:not(:has(.fan)):not(:has(svg)) { width: calc(var(--cw) * .9); height: calc(var(--cw) * 1.26); border: 2px dashed #ffffff55; border-radius: 10px; justify-content: center; }
.stage .zone[data-role="center"] .item.summary:not(:has(.fan)):not(:has(svg)) .cap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.zone[data-kind="fan"] .item { margin-inline-start: clamp(calc(var(--cw) * -.72), calc((100cqw - 44px - var(--n) * var(--cw)) / max(1, var(--n) - 1)), 6px); }
.area-left .zone[data-kind="backs"] .item.summary, .area-right .zone[data-kind="backs"] .item.summary { flex-wrap: wrap; justify-content: center; max-width: var(--side); }
.area-left .zone[data-kind="backs"] .fan:nth-child(n+4), .area-right .zone[data-kind="backs"] .fan:nth-child(n+4) { display: none; }
.area-left .zone[data-kind="backs"] .fan .gfx, .area-right .zone[data-kind="backs"] .fan .gfx { width: 22px; height: 31px; }
.area-left .zone[data-kind="backs"] .fan, .area-right .zone[data-kind="backs"] .fan { margin-inline-start: -12px; }
.area-left .zone[data-kind="backs"] .cap, .area-right .zone[data-kind="backs"] .cap { flex-basis: 100%; text-align: center; margin: 0; }
@media (max-width: 640px) {
  [data-layout="grid2"] .area-center { flex-direction: column; flex-wrap: nowrap; }
  [data-layout="grid2"] .zone[data-zid="target"] .zitems { width: min(100cqw, calc(62cqh - 1.8em)); }
  [data-layout="grid2"] .zone[data-zid="fleet"] .zitems { width: min(70cqw, calc(36cqh - 1.8em)); }
}
.stage .area-center { overflow: auto; scrollbar-width: thin; }
.zone[data-kind="chips"] .zitems { gap: 4px; flex-wrap: wrap; max-height: 22vh; overflow-y: auto; padding: 2px; }
.zone[data-kind="chips"] .item .cap { font-size: .8em; padding: .25rem .55rem; }
.zone[data-kind="chips"] .item:hover, .zone[data-kind="chips"] .item:focus { transform: none; }
.area-bottom .zone[data-kind="chips"] { margin-bottom: 4px; }
[data-layout="miles"] .area-center { --cw: 48px; flex-direction: row; flex-wrap: wrap; align-content: center; }
[data-layout="miles"] .zone[data-role="board"] { flex: 1 1 100%; }
[data-layout="miles"] .zone[data-role="board"] .zitems { flex-wrap: nowrap; align-items: center; gap: 6px; }
[data-layout="miles"] .zone[data-role="board"] .item .cap { font-size: .75em; padding: .2rem .45rem; background: #fffdf8; color: #111; border-radius: 7px; font-weight: 700; }
[data-layout="miles"] .zone[data-role="board"][style*="order: 5"] .zitems { background: #ffffff14; border-radius: 12px; padding: 4px; }
@media (max-width: 640px) { [data-layout="miles"] .area-center { --cw: 40px; } }
/* ---- iteration 4 ---- */
#zones.stage { --side: clamp(64px, 12vw, 170px); }
#zones.stage[data-seats="1"], #zones.stage[data-seats="2"] { --side: clamp(54px, 10vw, 130px); }
.zone[data-kind="fan"] .item { margin-inline-start: var(--ov, -20px); }
.zone[data-kind="fan"] .item:first-child { margin-inline-start: 0; }
.area-bottom .zone.gridzone .zitems { width: 100%; max-width: 560px; }
.plate .psub { max-width: 46vw; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 640px) {
  .area-left .plate .psub, .area-right .plate .psub, .area-tl .plate .psub, .area-tr .plate .psub { position: static; transform: none; white-space: normal;
    max-width: calc(var(--side) - 8px); text-align: center; line-height: 1.1; margin-top: 2px; }
}
@media (max-width: 640px) {
  #zones.stage { --side: 76px; }
  #zones.stage[data-seats="1"]:not([data-layout="okey"]), #zones.stage[data-seats="2"]:not([data-layout="okey"]) { --side: 0px; }
}
.zone[data-kind="chips"] .item.summary, .zone[data-kind="mini"] .item.summary { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
[data-layout="miles"] .zone[data-role="board"] .zitems { flex-wrap: wrap; justify-content: center; }
[data-layout="miles"] .zone[data-role="board"] .item .cap { white-space: nowrap; font-size: .68em; }
[data-layout="miles"] .zone[data-role="board"] .item[data-type="text"]:first-child .cap { background: #2563c9; color: #fff; font-size: .78em; }
[data-layout="dominoes"] .area-center { --cw: 46px; gap: 3px; }
[data-layout="dominoes"] .zone[data-role="center"] .zitems { gap: 3px; }
@media (max-width: 640px) { [data-layout="dominoes"] .area-center { --cw: 38px; } }

/* ---- round 4: lobby game tiles + one-step play dialog ---- */
.gamelist { grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: .7rem; }
.gamelist .game { padding: .5rem; gap: .4rem; border-radius: 16px; }
.gamelist .game .gtile { display: flex; flex-direction: column; align-items: center; gap: .3rem; background: none; border: 0; padding: .2rem; min-height: 0; width: 100%; }
.gamelist .game .gtile .gicon { width: 100%; height: 78px; margin: 0; border-radius: 12px; }
.gamelist .game .gtile .gicon .gameicon { height: 66px; }
.gamelist .game .gname { font-weight: 800; font-size: 1.02rem; color: var(--accent); text-align: center; line-height: 1.15; }
.gamelist .game .gplayers { font-size: .78em; color: var(--muted); border: 1px solid var(--line); border-radius: 99px; padding: 0 .55rem; }
.gamelist .game .gplayers::before { content: "\263A\FE0E  "; }
.gamelist .game .gbtns { display: flex; gap: .35rem; }
.gamelist .game .gbtns button { min-height: 40px; padding: .25rem .5rem; font-size: .86em; }
.gamelist .game .gbtns button.primary { flex: 1; }
.gamelist .game:hover { transform: translateY(-2px); }
.createdlg .create-head { display: flex; gap: .8rem; align-items: center; }
.createdlg .create-head .gicon { width: 110px; height: 76px; flex: none; margin: 0; }
.createdlg .create-head .gicon .gameicon { height: 64px; }
.createdlg .btncol { display: flex; flex-direction: column; gap: .5rem; margin: .8rem 0; }
.big { min-height: 54px; font-size: 1.05rem; border-radius: 14px; font-weight: 700; }
.createdlg details { border: 1px solid var(--line); border-radius: 12px; padding: .3rem .7rem; margin-bottom: .6rem; }
.createdlg summary { cursor: pointer; min-height: 40px; display: flex; align-items: center; font-weight: 700; }
.sr-only-select:not(:focus) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 640px) {
  .gamelist { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lobby-head .btnrow button { min-height: 38px; padding: .25rem .6rem; font-size: .88em; }
}
.badges { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; }
.badge2 { background: #fffdf3; color: #2b2113; border-radius: 99px; padding: .1rem .65rem; font-size: .8em; font-weight: 750; box-shadow: 0 2px 5px #0006; }
.badge2.k-trump, .badge2.k-okey { background: #ffd54a; }
.badge2.k-contract, .badge2.k-bid { background: #c9e7ff; }
.badge2.k-pot { background: #f6cf6a; }
.info.vh-list { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.plate.dealer::after { content: "D"; position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; border-radius: 50%; background: #fff; color: #111;
  font-size: .7em; font-weight: 900; display: grid; place-items: center; box-shadow: 0 1px 3px #0008; }
[data-layout="blackjack"] .area-top { flex-direction: column; }
.zone[data-kind="scorecard"] .zitems { grid-template-columns: repeat(3, minmax(0, 1fr)); max-height: 28vh; gap: 3px; }
.zone[data-kind="scorecard"] .item .cap { font-size: .68em; line-height: 1.15; padding: .2rem .35rem; }
.area-bottom .zone[data-kind="scorecard"] { margin-bottom: 4px; }
[data-layout="dice"] .item[data-type="piece"] .gfx { width: 44px; height: 44px; }
.stage .zone[data-role="seat_info"] .item[data-type="text"] .cap { font-size: .66em; }
/* dealer (blackjack) with its own caption; sound memory as a 4 x 4 grid of cards */
.stage .zone[data-role="dealer"] { flex-basis: 100%; display: flex; flex-direction: column; align-items: center; }
.stage .zone[data-role="dealer"] .zlabel { position: static !important; width: auto; height: auto; clip: auto; overflow: visible;
  background: #000a; color: #fff; border-radius: 99px; padding: .05rem .7rem; font-size: .8em; margin-bottom: 4px; }
[data-game="soundmemory"] .zone[data-role="board"] .zitems { display: grid; grid-template-columns: repeat(4, var(--cw)); gap: 8px; }
[data-game="soundmemory"] .zone[data-role="board"] .item[data-type="text"] { width: var(--cw); height: calc(var(--cw) * 1.4); display: grid; place-items: center;
  background: #fffdf8; border-radius: 9px; box-shadow: 0 3px 6px #0006; }
[data-game="soundmemory"] .zone[data-role="board"] .item[data-type="text"] .cap { background: none; color: #2e9a4c; font-size: 1.2em; font-weight: 900; padding: 0; }
#zones .zone[data-kind="scorecard"] .zitems { grid-template-columns: repeat(2, minmax(0, 1fr)); max-height: 24vh; overflow-y: auto; }
#zones .zone[data-kind="scorecard"] .item .cap { font-size: 12px; line-height: 1.2; padding: .2rem .4rem; }
.zone[data-kind="row-mini"] .item.summary { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
@media (max-width: 640px) { [data-game="soundmemory"] .area-center { --cw: 46px; } [data-game="soundmemory"] .zone[data-role="board"] .zitems { gap: 6px; } }
/* text items are drawn as .chip: keep them compact on the stage */
.stage .item .chip { font-size: .85em; padding: .3rem .55rem; border-radius: 8px; }
#zones .zone[data-kind="scorecard"] .item .chip { font-size: 12px; line-height: 1.2; padding: .2rem .4rem; display: block; text-align: start; }
.zone[data-kind="mini"] .item .chip, .stage .zone[data-role="seat_info"] .item .chip { font-size: 11px; padding: .1rem .35rem; max-width: calc(var(--side) + 30px); white-space: normal; }
.zone[data-kind="chips"] .item .chip { font-size: .8em; padding: .25rem .55rem; }
[data-layout="miles"] .zone[data-role="board"] .item .chip { white-space: nowrap; font-size: .68em; padding: .2rem .45rem; }
[data-layout="tavla"] .zone .item .chip { font-size: .8em; padding: .2rem .5rem; }
[data-game="soundmemory"] .zone[data-role="board"] .zitems > .item { width: var(--cw); }
[data-game="soundmemory"] .zone[data-role="board"] .item[data-type="text"] .chip { background: none; box-shadow: none; color: #2e9a4c; font-size: 1.15em; font-weight: 900; padding: 0; }
.stage .item .gfx.road { width: min(200px, 46vw); height: auto; }
.stage .item[data-type="text"]:has(.road) .cap { display: block; text-align: center; font-size: .7em; padding: .1rem .3rem; }

/* =====================================================================================================
   ROUND 5 -- coordinator review fixes
   ===================================================================================================== */
/* 1. one compact header row: [Start/Rematch] [mic] [⋯ Table menu]; no horizontal scrolling anywhere */
.table-head .btnrow.tbar { flex-wrap: nowrap; overflow: visible; gap: .4rem; justify-content: flex-end; flex: 1; }
.table-head { flex-wrap: nowrap; align-items: center; }
.tbar .iconbtn { min-width: 44px; min-height: 44px; justify-content: center; }
.tmenu-wrap { position: relative; }
.tmenu { position: absolute; top: calc(100% + 6px); inset-inline-end: 0; z-index: 30; display: flex; flex-direction: column; gap: 4px;
  min-width: 220px; padding: 6px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 14px 34px #000b; }
.tmenu button { width: 100%; text-align: start; min-height: 46px; justify-content: flex-start; }
#btnVoice[aria-pressed="true"] { background: var(--accent2); color: #04150c; }
html, body { overflow-x: hidden; }
@media (max-width: 640px) {
  #btnTableMenu span[data-i18n] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  body[data-screen="table"] .table-head h2 { position: absolute; }
  .table-head .btnrow.tbar button { min-height: 42px; }
}

/* 6. no text on the felt except the status line and small badges */
.felt .info { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.stage .zone[data-kind="vh"] { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.felt .status { max-width: calc(100% - 70px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plate .pname2 { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.1; word-break: break-word; }
.plate.bot .pname2::before { content: "\2699\FE0E "; opacity: .55; font-size: .85em; }
.area-left .plate .pname2, .area-right .plate .pname2, .area-tl .plate .pname2, .area-tr .plate .pname2,
.area-bl .plate .pname2, .area-br .plate .pname2 { text-align: center; }

/* 2. mangala: the 12 pits and both stores INSIDE one long wooden board that fills the width */
[data-layout="mangala"].stage .area-center { width: 100%; max-width: 1000px; aspect-ratio: 2.25 / 1; max-height: none; align-self: center; }
[data-layout="mangala"].stage .area-center > .zone { position: absolute !important; inset: 0 !important; width: auto !important; height: auto !important; flex: none; display: block; }
[data-layout="mangala"].stage .area-center .zitems { position: absolute; inset: 0; display: block; width: auto; height: auto; }
.stage .item.mpit.can, .stage .item.mstore.can { box-shadow: none !important; animation: none; }
.stage .item.mpit.can .gfx ellipse:nth-of-type(2) { stroke: #8cf5a5; stroke-width: 3; }
.stage .item.mpit.can .gfx { filter: drop-shadow(0 0 5px #5fe08acc); }
.stage .item.mpit.sel .gfx ellipse:nth-of-type(2) { stroke: #ffd54a; stroke-width: 3.5; }
.stage .item.mpit, .stage .item.mstore { box-shadow: none; }
#zones.stage[data-layout="mangala"] { --side: 0px; }

/* 3. ludo: the board fills the width; plates sit in the corners of their colour */
#zones.stage[data-layout="ludo"] { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto auto;
  grid-template-areas: "tl top tr" "center center center" "bl bottom br" "x x x"; }
[data-layout="ludo"].stage .area-center { width: min(100%, calc(100dvh - 330px)); max-width: 640px; justify-self: center; }
[data-layout="ludo"].stage .area-tr, [data-layout="ludo"].stage .area-br { align-items: flex-end; }
[data-layout="ludo"].stage .area-tl, [data-layout="ludo"].stage .area-bl { align-items: flex-start; }
[data-layout="ludo"].stage .area-bottom { justify-content: center; }
[data-layout="ludo"] .area .plate { flex-direction: row !important; border-radius: 99px !important; padding: 3px 10px 3px 3px !important; }
.stage .item.lsq.can .gfx { filter: drop-shadow(0 0 4px #8cf5a5) drop-shadow(0 0 2px #fff); }

/* 4. tavla: legal moves on the board (sources glow, the chosen checker gold, targets glow), small trays */
.stage .zone.boardzone .item.can { box-shadow: none; }
.stage .zone.boardzone .item.can .gfx { filter: drop-shadow(0 0 6px #8cf5a5); }
.stage .zone.boardzone .item.tsel .gfx { filter: drop-shadow(0 0 6px #ffd54a) drop-shadow(0 0 2px #ffd54a); }
.stage .item.tgt { box-shadow: none; }
.stage .zone.boardzone .item.tgt::after { content: ""; position: absolute; left: 25%; right: 25%; bottom: 46%; aspect-ratio: 1; border-radius: 50%;
  background: #8cf5a5cc; box-shadow: 0 0 10px 3px #5fe08a; pointer-events: none; }
.stage .zone.boardzone .item.tgt[data-kind="tri-down"]::after { bottom: auto; top: 46%; }
.stage .zone[data-kind="tray"] .zitems { gap: 6px; flex-wrap: wrap; justify-content: center; }
.stage .zone[data-kind="tray"] .item .gfx.tray { width: 96px; height: 30px; }
.stage .zone[data-kind="tray"] .item .cap, .stage .zone[data-kind="tray"] .item .chip { display: none; }
.stage .zone[data-kind="tray"] .item.can .gfx, .stage .zone[data-kind="tray"] .item.tgt .gfx { filter: drop-shadow(0 0 5px #8cf5a5); }
.stage .zone[data-kind="tray"] .item.tsel .gfx { filter: drop-shadow(0 0 5px #ffd54a); }
[data-layout="tavla"].stage .area-center { gap: 6px; }
[data-layout="tavla"].stage .zone[data-zid="dice"] .item[data-type="die"] .gfx { width: 44px; height: 44px; }

/* 5. 1000 Miles: every team's car = one compact panel */
[data-layout="miles"].stage .zone[data-role="board"] .zitems { display: grid; grid-template-columns: auto auto auto auto; grid-template-rows: auto auto;
  gap: 4px 6px; justify-content: center; align-items: center; padding: 6px 8px; border-radius: 14px; background: #0000002e; box-shadow: inset 0 0 0 1px #ffffff1c; }
[data-layout="miles"].stage .zone[data-role="board"] .item:nth-child(1) { grid-column: 1 / -1; }
[data-layout="miles"].stage .zone[data-role="board"] .item:nth-child(5) { display: none; }
[data-layout="miles"].stage .zone[data-role="board"] .item .cap { display: none; }
[data-layout="miles"].stage .zone[data-role="board"] .item[data-type="miles"] .gfx { width: calc(var(--cw) * .82); height: calc(var(--cw) * 1.15); }
[data-layout="miles"].stage .zone[data-role="board"][style*="order: 5"] .zitems { box-shadow: inset 0 0 0 2px #ffd54a88; }
[data-layout="miles"].stage .area-center { flex-direction: column; flex-wrap: nowrap; gap: 6px; }
[data-layout="miles"].stage .area-center .zone[data-role="board"] { flex: none; }
[data-layout="miles"].stage .area-center:has(.zone[data-role="board"]) > .zone:not([data-role="board"]) { order: 3; }
[data-layout="miles"].stage .zone[data-zid="deck"], [data-layout="miles"].stage .zone[data-zid="discard"] { display: inline-flex; }
@media (max-width: 640px) { [data-layout="miles"].stage .area-center { --cw: 38px; } }

/* 7. dominoes: the line of play snakes; blackjack bet circles between hands */
[data-layout="dominoes"].stage .zone[data-zid="line"] .zitems { display: grid; gap: 3px; justify-content: center; }
[data-layout="dominoes"].stage .zone[data-zid="line"] .item.rev .gfx { transform: rotate(180deg); }
.bj-deco { width: min(100%, 520px); align-self: center; }
.bj-deco svg { width: 100%; height: auto; display: block; }
.stage .item.mpit.sel, .stage .item.mpit.can.sel { box-shadow: none !important; }
[data-layout="mangala"].stage .area-center { aspect-ratio: 1.9 / 1; }
@media (min-width: 641px) { [data-layout="mangala"].stage .area-center { aspect-ratio: 2.4 / 1; } }
.plate .pname2 { word-break: normal; overflow-wrap: anywhere; }
.area-bl .plate, .area-br .plate { max-width: 100%; }
[data-layout="tavla"].stage .area-center { justify-content: center; }
[data-layout="tavla"].stage .area-center > .zone { flex: none !important; }
[data-layout="tavla"].stage .area-center > .zone.boardzone { width: 100%; }
[data-layout="mangala"].stage .area-center { aspect-ratio: 2.9 / 1; }
@media (min-width: 641px) { [data-layout="mangala"].stage .area-center { aspect-ratio: 2.9 / 1; } }
.stage .item.mpit:focus, .stage .item.mstore:focus { outline: none; box-shadow: none !important; }
.stage .item.mpit:focus .gfx ellipse:nth-of-type(2), .stage .item.mstore:focus .gfx ellipse:nth-of-type(2) { stroke: var(--focus); stroke-width: 4; }
.plate.oneword .pname2 { white-space: nowrap; overflow: hidden; text-overflow: clip; display: block; font-size: .8em; }
/* long action labels: two lines at most (the full text stays in the accessible name) */
.actionbar .act > span:not(.sr-only) { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: normal; text-align: center; }
@media (max-width: 640px) { .actionbar .act { font-size: .84rem; } }
/* tombala: a real card (white/blue frame, patterned blanks), no A-I / 1-3 headers */
[data-layout="tombala"].stage .zone.gridzone .zitems { grid-template-columns: 0 repeat(9, minmax(0, 1fr)) !important; grid-template-rows: 0 repeat(3, auto);
  background: repeating-linear-gradient(45deg, #dfe9f7 0 6px, #cddcf1 6px 12px); border: 4px solid #2563c9; border-radius: 12px; padding: 4px; gap: 3px;
  width: min(100%, 520px); box-shadow: 0 8px 18px #0008; }
[data-layout="tombala"].stage .zone.gridzone .ghead { display: none; }
[data-layout="tombala"].stage .zone.gridzone .item .gfx { border-radius: 6px; }
.actionbar .act { display: flex; align-items: center; justify-content: center; gap: .35rem; }
.actionbar .act > span:not(.sr-only) { display: -webkit-box; flex: 0 1 auto; min-width: 0; }
/* other players' score lines and similar text: accessible layer only */
.stage .zone[data-kind="mini"] { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* =====================================================================================================
   ROUND 6 -- QA section B (touch)
   ===================================================================================================== */
/* B1: the hand is a grid of strips (set by fitFans): never off screen, the tap lands on the card you see */
.zone[data-kind="fan"] .zitems.gridfan { display: grid !important; justify-content: center; align-items: end; gap: 6px 0; padding: 14px 0 4px; flex-wrap: nowrap; }
.zone[data-kind="fan"] .zitems.gridfan .item { margin: 0 !important; transform: none; min-width: 0; }
.zone[data-kind="fan"] .zitems.gridfan .item:hover, .zone[data-kind="fan"] .zitems.gridfan .item:focus { transform: translateY(-8px); z-index: 3; }
.zone[data-kind="fan"] .zitems.gridfan .item.sel { transform: translateY(-14px); z-index: 3; }
.zone[data-kind="fan"] .zitems.gridfan.tworow { gap: 4px 0; padding-top: 10px; }
/* B5: drawings never catch taps; the item's own box does (no drawing can cover a neighbour) */
.stage .item .gfx { pointer-events: none; }
/* B6: the action bar always stays on screen */
.actionbar { position: sticky; bottom: 0; }
@media (max-width: 640px) {
  body[data-screen="table"] { --chrome: 200px; }
  /* B2: sea battle -- two separate grids stacked, each sized to fit */
  [data-layout="grid2"].stage .area-center { flex-direction: column; flex-wrap: nowrap; justify-content: flex-start; overflow-y: auto; gap: 10px; }
  [data-layout="grid2"].stage .area-center > .zone.gridzone { flex: none !important; width: 100%; position: relative; }
  [data-layout="grid2"].stage .zone[data-zid="target"] .zitems { width: min(100%, 360px); }
  [data-layout="grid2"].stage .zone[data-zid="fleet"] .zitems { width: min(70%, 230px); }
  /* B4: five dice score card rows are real touch targets */
  #zones .zone[data-kind="scorecard"] .item { min-height: 44px; display: flex; }
  #zones .zone[data-kind="scorecard"] .item .chip, #zones .zone[data-kind="scorecard"] .item .cap { flex: 1; display: flex; align-items: center; min-height: 44px; }
  #zones .zone[data-kind="scorecard"] .zitems { max-height: 36vh; }
}
@media (max-width: 640px) {
  [data-layout="grid2"].stage .area-center { overflow: hidden; justify-content: center; }
  [data-layout="grid2"].stage .zone[data-zid="target"] .zitems { width: min(100%, 360px, calc(100cqh - 1.2em)); }
}
.stage .zone[data-kind="fan"] { container-type: normal; }
.zone[data-kind="fan"] .zitems.gridfan > .item { transform: none !important; margin: 0 !important; }
.zone[data-kind="fan"] .zitems.gridfan > .item:focus, .zone[data-kind="fan"] .zitems.gridfan > .item:hover { transform: translateY(-8px) !important; }
.zone[data-kind="fan"] .zitems.gridfan > .item.sel { transform: translateY(-14px) !important; }
/* container-query units are not reliable in every WebKit: viewport-based sizes first, cq refinements after */
.stage .zone.gridzone .zitems { width: min(100%, 60vh); width: min(100cqw, calc(100cqh - 1.8em)); }
.stage .zone.boardzone .zitems { width: min(100%, 96vh); width: min(100cqw, calc((100cqh - 150px) * 1.6)); }
@media (max-width: 640px) {
  [data-layout="grid2"].stage .zone[data-zid="target"] .zitems { width: min(100%, 360px, 37vh); }
  [data-layout="grid2"].stage .zone[data-zid="fleet"] .zitems { width: min(60%, 21vh); }
  .stage .zone.gridzone:not([data-zid="target"]):not([data-zid="fleet"]) .zitems { width: min(100%, 54vh); }
  [data-layout="tombala"].stage .zone.gridzone .zitems { width: min(100%, 520px) !important; }
}
@media (max-width: 640px) {
  [data-layout="grid2"].stage .area-center { overflow-y: auto; }
  [data-layout="grid2"].stage .zone[data-zid="target"] .zitems { width: min(100%, 360px, 34vh); }
  [data-layout="grid2"].stage .zone[data-zid="fleet"] .zitems { width: min(60%, 20vh); }
}
/* mangala: the stacked board layers never catch taps; only the pits and stores do (QA B3/B5) */
[data-layout="mangala"].stage .area-center > .zone, [data-layout="mangala"].stage .area-center .zitems { pointer-events: none; }
[data-layout="mangala"].stage .area-center .item { pointer-events: auto; }
.stage .zone.gridzone .item { line-height: 0; min-height: 0; }
.stage .zone.gridzone .ghead { line-height: 1; font-size: .72em; }
/* my hand is always on top of anything that might overflow from the side seats (QA: "covered by plate") */
.stage .area-bottom { position: relative; z-index: 4; }
.stage .area-left, .stage .area-right { min-height: 0; overflow: hidden; }
@media (max-width: 640px) {
  [data-layout="grid2"].stage .zone[data-zid="target"] .zitems { width: min(100%, 360px, 36vh) !important; }
  [data-layout="grid2"].stage .zone[data-zid="fleet"] .zitems { width: min(50%, 14vh) !important; }
  [data-layout="grid2"].stage .area-center { gap: 4px; }
}
@media (max-width: 640px) {
  [data-layout="grid2"].stage .zone[data-zid="target"] .zitems { width: min(100%, 380px, max(290px, 40vh)) !important; }
  [data-layout="grid2"].stage .zone[data-zid="fleet"] .zitems { width: min(50%, 13vh) !important; }
}

/* =====================================================================================================
   ROUND 7 -- rendering cost (WebKit), hit areas
   ===================================================================================================== */
/* glow pulses: animate only the opacity of a pseudo-element (compositor), never box-shadow (repaint each frame) */
.plate.turn { animation: none; position: relative; }
.plate.turn::before { content: ""; position: absolute; inset: -5px; border-radius: inherit; box-shadow: 0 0 18px 6px #ffd54acc;
  pointer-events: none; animation: glowfade 1.4s ease-in-out infinite; will-change: opacity; }
.stage .zone.tap .item { animation: none; position: relative; }
.stage .zone.tap .item::before { content: ""; position: absolute; inset: -4px; border-radius: 12px; box-shadow: 0 0 16px 5px #5fe08acc;
  pointer-events: none; animation: glowfade 1.6s ease-in-out infinite; will-change: opacity; }
@keyframes glowfade { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
.seat.turn .avatar { animation: none; }
/* the okey rack: no per-tile filters/shadows, isolated layout and paint */
.zone[data-kind="rack"] .zitems { contain: layout paint; }
.zone[data-kind="rack"] .item { contain: layout paint; transition: transform .12s; }
.zone[data-kind="rack"] .item .gfx, [data-layout="okey"] .item .gfx { filter: none !important; }
.stage .zone[data-kind="rack"] .item.can, .zone[data-kind="rack"].allcan .zitems { box-shadow: none; }
.zone[data-kind="rack"].allcan .zitems { outline: 3px solid #8cf5a5aa; outline-offset: 1px; }
.stage .zone[data-kind="rack"] .item.can:not(.sel) { outline: 2px solid #8cf5a5; outline-offset: -2px; border-radius: 8px; }
.stage .zone[data-kind="rack"] .item.sel { box-shadow: none; outline: 3px solid #ffd54a; outline-offset: -1px; border-radius: 8px; }
/* entering items: animate the drawing, not the cell box, so hit areas never overlap a neighbour mid-animation */
.item.enter { opacity: 1 !important; transform: none !important; }
.item.enter > * { opacity: 0; transform: translateY(-14px) scale(.94); }
.item > * { transition: opacity .18s, transform .18s; }
/* ludo: my pawns' own tap areas, above the board squares */
.stage .item.lhit { position: absolute; z-index: 6; border-radius: 50%; box-shadow: none !important; }
.stage .item.lhit .gfx { width: 100% !important; height: 100% !important; }
.stage .item.lhit .gfx circle { stroke: transparent; stroke-width: .9; }
.stage .item.lhit.can .gfx circle { stroke: #8cf5a5; filter: drop-shadow(0 0 1px #fff); }
.stage .item.lhit.sel .gfx circle, .stage .item.lhit:focus .gfx circle { stroke: #ffd54a; }
.stage .item.lhit:hover, .stage .item.lhit:focus { transform: none; outline: none; }
.plate.oneword .pname2 { overflow: visible; }
[data-layout="ludo"].stage .area .plate { max-width: none; }

/* =====================================================================================================
   ROUND 8 -- move animations, end banners, ludo dice, fixed okey rack
   ===================================================================================================== */
.anim-ghost { position: fixed; z-index: 50; pointer-events: none; }
.anim-ghost > svg, .anim-ghost .gfx { width: 100%; height: 100%; display: block; }
.anim-stone { position: fixed; z-index: 50; width: 14px; height: 14px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 35% 30%, #fff 0 18%, #3f7fd9 22% 100%); box-shadow: 0 2px 3px #0008; }
.anim-pile { width: 100%; height: 100%; border-radius: 50%; background: radial-gradient(circle, #e0a020 0 30%, #2fae6a 32% 55%, transparent 58%); }
.anim-pawn { position: fixed; z-index: 50; pointer-events: none; }
.anim-pawn .gfx { width: 100%; height: 100%; display: block; filter: drop-shadow(0 4px 4px #0009); }
.item.anim-hide .gfx { opacity: 0; }
/* okey: fixed 2 x 15 slot rack (the size never follows the tile count) */
.zone[data-kind="rack"] .zitems { grid-template-columns: repeat(15, minmax(0, 1fr)) !important; grid-template-rows: 1fr 1fr; aspect-ratio: 15 / 3.25;
  gap: 6px 2px; padding: 6px 6px 8px; align-items: stretch;
  background:
    linear-gradient(180deg, transparent 0 calc(50% - 3px), #5a3416 calc(50% - 3px) calc(50% + 2px), transparent calc(50% + 2px)),
    repeating-linear-gradient(90deg, #0000 0 calc((100% - 12px) / 15 - 1px), #00000022 calc((100% - 12px) / 15 - 1px) calc((100% - 12px) / 15)),
    linear-gradient(180deg, #c98c4e, #a8682f 60%, #8a5222); background-origin: content-box, content-box, border-box; }
.zone[data-kind="rack"] .item { min-width: 0; display: flex; align-items: flex-end; }
.zone[data-kind="rack"] .item .gfx { width: 100% !important; height: auto !important; max-height: 100%; aspect-ratio: 70 / 100; }
@media (max-width: 640px) { .zone[data-kind="rack"] .zitems { gap: 5px 1px; padding: 4px 3px 6px; } [data-layout="okey"].stage .area-bottom { margin-inline: -4px; } }
/* end banner */
.endbanner { position: absolute; inset: 0; z-index: 20; display: grid; place-items: center; pointer-events: none; }
.endbanner .endcard { pointer-events: auto; position: relative; min-width: min(92%, 340px); max-width: 92%; padding: 1.2rem 1.4rem 1rem; border-radius: 22px; text-align: center;
  background: linear-gradient(180deg, #fffdf6, #efe4c8); color: #2b2113; box-shadow: 0 20px 50px #000c, 0 0 0 4px #c9a227; }
.endbanner .endtitle { font-size: clamp(1.8rem, 7vw, 2.8rem); margin: .2rem 0 .7rem; font-weight: 900; letter-spacing: .01em; }
.endbanner[data-kind="won"] .endtitle { color: #b8860b; text-shadow: 0 2px 0 #fff, 0 0 18px #ffd54a; }
.endbanner[data-kind="lost"] .endtitle { color: #8a2a20; }
.endbanner[data-kind="hand"] .endtitle { color: #1d5a3a; font-size: clamp(1.5rem, 6vw, 2.2rem); }
.endbanner .endtable { margin: 0 auto .5rem; width: auto; min-width: 70%; color: #2b2113; }
.endbanner .endtable th, .endbanner .endtable td { border-color: #d9ccab; padding: .3rem .7rem; text-align: center; }
.endbanner .endtable tr.me th, .endbanner .endtable tr.me td { background: #ffd54a55; font-weight: 800; }
.endbanner .endtable tr.first td:first-child::before { content: "\2605 "; color: #c9a227; }
.endbanner .endhint { margin: .3rem 0 0; font-size: .85em; color: #6b5a3a; }
.endbanner .endclose { position: absolute; top: 6px; inset-inline-end: 6px; min-height: 36px; min-width: 36px; padding: 0; border-radius: 50%; background: #0000; border: 0; color: #6b5a3a; font-size: 1.4rem; }
.endbanner .endcard.pop { animation: endpop .5s cubic-bezier(.2,1.4,.4,1); }
@keyframes endpop { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
.endbanner .confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.endbanner .confetti i { position: absolute; top: -12px; width: 9px; height: 14px; border-radius: 2px; animation: confall linear forwards; }
@keyframes confall { to { transform: translateY(110vh) rotate(var(--rot)); opacity: .9; } }
/* ludo dice next to the plates */
.ldie { width: 48px; height: 48px; flex: none; position: relative; }
.ldie .gfx { width: 100%; height: 100%; display: block; }
.ldie-num { position: absolute; right: -10px; bottom: -8px; min-width: 24px; height: 24px; padding: 0 4px; border-radius: 12px; background: #1d3f8f; color: #fff; font: 900 16px/24px system-ui, sans-serif; text-align: center; box-shadow: 0 1px 3px #0008; pointer-events: none; }
.ldie.canroll .ldie-num { font-size: 18px; height: 28px; line-height: 28px; min-width: 28px; border-radius: 14px; }
.ldie.current .gfx { filter: drop-shadow(0 0 6px #ffd54a); }
.ldie.canroll { cursor: pointer; width: 60px; height: 60px; }
.ldie.canroll::after { content: ""; position: absolute; inset: -4px; border-radius: 14px; box-shadow: 0 0 14px 4px #8cf5a5; animation: glowfade 1.2s ease-in-out infinite; pointer-events: none; }
.ldie.tumbling { animation: tumble .7s ease-in-out; }
@keyframes tumble { 0% { transform: translateY(0) rotate(0); } 30% { transform: translateY(-16px) rotate(140deg); } 60% { transform: translateY(-4px) rotate(250deg); } 100% { transform: none; } }
[data-layout="ludo"].stage .area-tl, [data-layout="ludo"].stage .area-tr, [data-layout="ludo"].stage .area-bl, [data-layout="ludo"].stage .area-br { flex-direction: row; align-items: center; gap: 6px; }
[data-layout="ludo"].stage .area-tr, [data-layout="ludo"].stage .area-br { flex-direction: row-reverse; }
[data-layout="ludo"].stage .area-tl, [data-layout="ludo"].stage .area-tr, [data-layout="ludo"].stage .area-bl, [data-layout="ludo"].stage .area-br { flex-wrap: nowrap; min-width: 0; overflow: visible; }
[data-layout="ludo"].stage .area .plate { min-width: 0; flex: 0 1 auto; max-width: calc(100% - 50px); }
[data-layout="ludo"].stage .area .plate .pname2 { overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 640px) { .ldie { width: 40px; height: 40px; } .ldie.canroll { width: 52px; height: 52px; } [data-layout="ludo"].stage .area .plate { max-width: calc(100% - 44px); } }
/* ludo corners: the die sits between the name plate and the board (never squeezes the name) */
[data-layout="ludo"].stage .area-tl, [data-layout="ludo"].stage .area-tr { flex-direction: column !important; gap: 4px; }
[data-layout="ludo"].stage .area-bl, [data-layout="ludo"].stage .area-br { flex-direction: column-reverse !important; gap: 4px; }
[data-layout="ludo"].stage .area .plate, [data-layout="ludo"].stage .area .plate { max-width: 100% !important; }
@media (max-width: 640px) { [data-layout="ludo"].stage .area .plate { max-width: 100% !important; } }
/* landlord / snakes and ladders boards */
[data-layout="landlord"].stage .area-center, [data-layout="snakes"].stage .area-center { position: relative; width: min(100%, calc(100dvh - 300px)); max-width: 700px; aspect-ratio: 1;
  justify-self: center; align-self: center; flex-wrap: nowrap; container-type: normal; overflow: visible; }
#zones.stage[data-layout="landlord"], #zones.stage[data-layout="snakes"] { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto auto; grid-template-areas: "tl top tr" "center center center" "bl bottom br" "x x x"; }
[data-layout="landlord"].stage .area-left, [data-layout="landlord"].stage .area-right, [data-layout="snakes"].stage .area-left, [data-layout="snakes"].stage .area-right { grid-row: 3; }
[data-layout="landlord"].stage .area-left, [data-layout="snakes"].stage .area-left { grid-column: 1; }
[data-layout="landlord"].stage .area-right, [data-layout="snakes"].stage .area-right { grid-column: 3; }
[data-layout="landlord"].stage .area-center > .zone[data-zid="board"], [data-layout="snakes"].stage .area-center > .zone[data-zid="board"] { position: absolute; inset: 0; flex: none; }
[data-layout="landlord"].stage .zone[data-zid="board"] .zitems, [data-layout="snakes"].stage .zone[data-zid="board"] .zitems { position: absolute; inset: 0; display: block; padding: 0; }
.stage .item.trsq { position: absolute; border-radius: 0; box-shadow: none !important; }
.stage .item.trsq .gfx { width: 100% !important; height: 100% !important; filter: none !important; }
.stage .item.trsq:hover, .stage .item.trsq:focus { transform: none; z-index: 3; outline: 3px solid var(--focus); outline-offset: -3px; }
[data-layout="landlord"].stage .area-center { background: #cfe8d0; border: 3px solid #1b4d2e; box-shadow: 0 12px 28px #000a; }
.track-deco { position: absolute; pointer-events: none; }
.track-deco[data-kind="snakes"] { inset: 0; z-index: 4; }
.track-deco[data-kind="snakes"] .sn-over { width: 100%; height: 100%; display: block; }
.track-deco[data-kind="landlord"] { inset: 9.09%; display: grid; place-items: center; z-index: 1; }
.llpanel { background: #fffdf6; color: #222; border-radius: 10px; padding: 6px 10px; box-shadow: 0 4px 12px #0005; min-width: 55%; font-size: clamp(10px, 2.6vw, 15px); }
.llp-title { font-weight: 900; letter-spacing: .2em; color: #c62828; text-align: center; margin-bottom: 4px; }
.llp-row { display: flex; align-items: center; gap: 6px; padding: 1px 0; }
.llp-row.turn { font-weight: 800; }
.llp-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.llp-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.llp-money::before { content: "\00A4 "; opacity: .6; }
.stage .zone[data-kind="trackdice"] { position: absolute; z-index: 5; left: 50%; top: 66%; transform: translate(-50%, -50%); flex: none; }
.stage .zone[data-kind="trackdice"] .item .gfx { width: clamp(30px, 8vw, 52px) !important; height: clamp(30px, 8vw, 52px) !important; }
[data-layout="snakes"].stage .zone[data-kind="trackdice"] { top: auto; bottom: -58px; }
.anim-token { position: fixed; z-index: 50; width: 18px; height: 18px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 3px 6px #0009; pointer-events: none; }
.anim-ghost, .anim-stone, .anim-pawn, .anim-token { z-index: 12; }
.stage .item[data-type="spanish_card"] .gfx { width: var(--cw); height: calc(var(--cw) * 1.4); }
.zone[data-kind="rack"] .item .gfx { filter: none; }

/* =====================================================================================================
   ROUND 9 -- okey rack sized to the game, big tiles, landscape phones
   ===================================================================================================== */
.zone[data-kind="rack"] .zitems { grid-template-columns: repeat(var(--slots, 10), minmax(0, 1fr)) !important;
  aspect-ratio: calc(var(--slots, 10) * 0.7) / 2.25; gap: 6px 3px;
  background:
    linear-gradient(180deg, transparent 0 calc(50% - 3px), #5a3416 calc(50% - 3px) calc(50% + 2px), transparent calc(50% + 2px)),
    linear-gradient(180deg, #c98c4e, #a8682f 60%, #8a5222); }
[data-layout="okey"].stage .zone[data-kind="rack"] { width: 100%; }
[data-layout="okey"].stage .zone[data-kind="rack"] .zitems { max-height: 44vh; margin-inline: auto; }
@media (max-width: 640px) { .zone[data-kind="rack"] .zitems { gap: 5px 2px; padding: 5px 4px 7px; } }
/* landscape phones (e.g. 932 x 430): the felt fills the screen, header rows collapse */
@media (orientation: landscape) and (max-height: 520px) {
  body[data-screen="table"] .topbar { position: static; padding: .2rem .5rem; gap: .3rem; flex-wrap: nowrap; }
  body[data-screen="table"] .topbar .brand span[data-i18n], body[data-screen="table"] #connText { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  body[data-screen="table"] .topnav { width: auto; margin-inline-start: auto; flex-wrap: nowrap; }
  body[data-screen="table"] .topnav .iconbtn { min-height: 34px; padding: .1rem .45rem; }
  body[data-screen="table"] .topnav .iconbtn span[data-i18n] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  body[data-screen="table"] main { padding: 0 .3rem; grid-template-columns: minmax(0, 1fr); }
  body[data-screen="table"] .table-head { position: absolute; top: .2rem; left: 50%; transform: translateX(-50%); margin: 0; z-index: 12; }
  body[data-screen="table"] .table-head h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  body[data-screen="table"] .table-head .btnrow button { min-height: 34px; }
  .felt, .felt[data-seats] { height: calc(100dvh - 104px); min-height: 280px; border-radius: 18px; padding: 6px 8px; }
  #zones.stage { --side: 92px; gap: 3px; }
  .stage { --cw: 46px; }
  .felt .status { font-size: .88rem; padding: .1rem .7rem; }
  .actionbar { padding: .25rem .3rem; }
  .actionbar .act { min-height: 40px; font-size: .9rem; }
  [data-layout="okey"].stage .zone[data-kind="rack"] .zitems { max-height: 47dvh; width: auto; height: 47dvh; }
  .plate { padding: 2px 8px 2px 2px; }
  .plate .pav { width: 24px; height: 24px; }
  .area-left .plate, .area-right .plate { flex-direction: row; border-radius: 99px; }
}
.anim-checker { position: fixed; z-index: 12; width: 22px; height: 22px; border-radius: 50%; border: 2px solid #555; box-shadow: 0 4px 6px #0009; pointer-events: none; }
@media (orientation: landscape) and (max-height: 520px) {
  #zones.stage { grid-template-rows: auto minmax(70px, 1fr) auto auto; }
  [data-layout="okey"].stage .zone[data-kind="rack"] .zitems { height: 36dvh; max-height: 36dvh; }
  [data-layout="okey"].stage .area-bottom { flex-direction: row; align-items: flex-end; justify-content: center; gap: 8px; }
  [data-layout="okey"].stage .area-bottom .plate { align-self: flex-end; }
  [data-layout="okey"].stage .zone[data-kind="rack"] { width: auto; }
  [data-layout="okey"] .area-tl .gfx.tile, [data-layout="okey"] .area-tr .gfx.tile, [data-layout="okey"] .area-bl .gfx.tile, [data-layout="okey"] .area-br .gfx.tile { width: 34px; height: 48px; }
  .stage .item.summary .gfx.tile, [data-layout="okey"] .area-center .gfx.tile { width: 38px !important; height: 54px !important; }
  .area-left .plate, .area-right .plate, .area-tl .plate, .area-tr .plate { flex-direction: row !important; padding: 2px 8px 2px 2px !important; }
}
@media (orientation: landscape) and (max-height: 520px) {
  [data-layout="okey"].stage .zone[data-kind="rack"] .zitems { height: 31dvh; max-height: 31dvh; }
  .stage .zone.boardzone .zitems { width: min(100%, calc((100dvh - 175px) * 1.6)) !important; min-height: 0; }
  [data-layout="tavla"].stage .area-center { flex-direction: row !important; flex-wrap: wrap !important; align-content: center; gap: 4px 10px; }
  [data-layout="tavla"].stage .area-center > .zone.boardzone { width: auto !important; order: 2; }
  [data-layout="tavla"].stage .zone[data-zid="dice"] { order: 1; }
  [data-layout="tavla"].stage .zone[data-kind="tray"] { order: 3; }
  [data-layout="tavla"].stage .zone[data-kind="tray"] .zitems { flex-direction: column; }
  [data-layout="tavla"].stage .zone[data-kind="tray"] .item .gfx.tray { width: 80px; height: 24px; }
  /* card games: side seats keep plate + backs on one line */
  .area-left, .area-right { flex-direction: row; flex-wrap: wrap; justify-content: center; }
  .area-left .zone[data-kind="backs"] .fan:nth-child(n+3), .area-right .zone[data-kind="backs"] .fan:nth-child(n+3) { display: none; }
}
@media (orientation: landscape) and (max-height: 520px) {
  [data-layout="tavla"].stage .area-center > .zone.boardzone { width: min(100%, calc((100dvh - 175px) * 1.6)) !important; flex: none !important; }
  [data-layout="tavla"].stage .area-center > .zone.boardzone .zitems { width: 100% !important; }
}

/* 05.10.2026 (beta): the create buttons stay visible at the bottom, right above Cancel, however long the options */
#dlgCreate { max-height: 92vh; overflow-y: auto; }
#dlgCreate .dlgfoot { position: sticky; bottom: -1.2rem; margin: 1rem -1.2rem -1.2rem; padding: .8rem 1.2rem 1.2rem;
  background: var(--panel); border-top: 1px solid var(--line); box-shadow: 0 -8px 16px -10px #0008; z-index: 2; }
#dlgCreate .dlgfoot .btnrow { margin-top: .5rem; }
/* 05.10.2026: compact end bar -- the final board stays visible; "Show results" opens the full card */
.endbanner.compact { inset: .4rem .4rem auto .4rem; place-items: start center; }
.endbanner.compact .endcard { min-width: 0; max-width: 100%; padding: .45rem 2.6rem .45rem 1rem; border-radius: 14px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .3rem .8rem; }
.endbanner.compact .endtitle { font-size: clamp(1.15rem, 4.5vw, 1.6rem); margin: 0; }
.endbanner.compact .endtable, .endbanner.compact .endhint { display: none; }
.endbanner.compact .confetti { display: none; }
.endbanner .endmore { min-height: 40px; padding: .25rem .9rem; border-radius: 999px; font-weight: 800; background: #1d5a3a; color: #fff; border: 2px solid #ffd54a; }

/* =====================================================================================================
   ROUND 10 -- rack drag and drop, final board highlights, 1000 Miles road, ultimate tic-tac-toe
   ===================================================================================================== */
.zone[data-kind="rack"] .item { touch-action: none; cursor: grab; }
.zone[data-kind="rack"] .item.dragging { opacity: .25; }
.rack-ghost { position: fixed; z-index: 60; pointer-events: none; filter: drop-shadow(0 10px 12px #000a); transition: none; }
.rack-ghost .gfx { width: 100% !important; height: 100% !important; }
.zone[data-kind="rack"] .zitems.dropping::after { content: ""; grid-column: var(--drop-col); grid-row: var(--drop-row); border: 3px dashed #ffd54a;
  border-radius: 8px; background: #ffd54a33; pointer-events: none; }
.anim-piece { position: fixed; z-index: 12; pointer-events: none; }
.anim-piece svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 6px 6px #0009); }
.stage .item.anim-hide.cell .gfx, .stage .zone.gridzone .item.anim-hide .gfx text, .stage .zone.gridzone .item.anim-hide .gfx circle { opacity: 0; }
.stage .zone.gridzone .item.anim-hide .gfx { opacity: 1; }
/* the winning line glows gold, the last move is outlined (also on the final board) */
.stage .item.win { z-index: 2; box-shadow: 0 0 0 3px #ffd54a, 0 0 18px 6px #ffd54acc !important; border-radius: 6px; animation: winpulse 1.2s ease-in-out infinite alternate; }
@keyframes winpulse { to { box-shadow: 0 0 0 3px #fff3b0, 0 0 26px 10px #ffd54a; } }
.stage .item.lastmv:not(.win) { box-shadow: inset 0 0 0 3px #4fc3f7 !important; }
.stage .zone.gridzone[data-gk="board"] .item.lastmv:not(.win) { box-shadow: inset 0 0 0 3px #4fc3f7aa !important; }
/* 1000 Miles: the car panel = road track (full width) + battle / speed / safety cards */
[data-layout="miles"].stage .zone[data-role="board"] .zitems { grid-template-columns: repeat(3, auto) !important; }
[data-layout="miles"].stage .zone[data-role="board"] .item.mroad { grid-column: 1 / -1 !important; width: 100%; }
[data-layout="miles"].stage .zone[data-role="board"] .item.mroad .gfx.mtrack { width: min(100%, 420px); height: auto; display: block; margin: 0 auto; }
[data-layout="miles"].stage .zone[data-role="board"] .item[data-type="miles"] .gfx { width: calc(var(--cw) * .7); height: calc(var(--cw) * .98); }
/* ultimate tic-tac-toe: 9 small boards (thick lines every 3 cells), the board you must play in glows */
[data-layout="uttt"].stage .zone.gridzone .zitems { gap: 1px; background: #8a6a3c; padding: 3px; border-radius: 8px; }
[data-layout="uttt"].stage .zone.gridzone .ghead { display: none; }
[data-layout="uttt"].stage .zone.gridzone .zitems { grid-template-columns: 0 repeat(9, minmax(0, 1fr)) !important; grid-template-rows: 0 repeat(9, auto); }
[data-layout="uttt"].stage .zone.gridzone .item { position: relative; }
[data-layout="uttt"].stage .item[data-bc="2"]::after { content: ""; position: absolute; top: -1px; bottom: -1px; right: -3px; width: 4px; background: #5a3414; z-index: 3; pointer-events: none; }
[data-layout="uttt"].stage .item[data-br="2"]::before { content: ""; position: absolute; left: -1px; right: -1px; bottom: -3px; height: 4px; background: #5a3414; z-index: 3; pointer-events: none; }
[data-layout="uttt"].stage .item[style*="grid-column: 10"]::after, [data-layout="uttt"].stage .item[style*="grid-row: 10"]::before { display: none; }
[data-layout="uttt"].stage .item { border-radius: 2px; }
[data-layout="uttt"].stage .item.active { box-shadow: inset 0 0 0 2px #ffd54a !important; }
[data-layout="uttt"].stage .item.can { box-shadow: inset 0 0 0 2px #2e9a4c !important; }
.stage .zone.gridzone[data-gk="board"] .item.lastmv:not(.win) { box-shadow: inset 0 0 0 4px #4fc3f7 !important; }

/* =====================================================================================================
   ROUND 11 -- lounges, co-hosts, table music, My tables
   ===================================================================================================== */
.plate.owner .pav::after, .plate.cohost .pav::after { position: absolute; top: -9px; left: 50%; transform: translateX(-50%); font-size: 13px; line-height: 1;
  text-shadow: 0 1px 2px #000; }
.plate .pav { position: relative; }
.plate.owner .pav::after { content: "\265B\FE0E"; color: #ffd54a; }
.plate.cohost .pav::after { content: "\2605\FE0E"; color: #8cf5a5; }
.ownerline { font-size: .8em; }
.table-head .ownerline { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.rolebadge { font-size: .65em; border-radius: 99px; padding: 0 6px; font-weight: 800; background: #ffd54a; color: #2b2113; }
.rolebadge.cohost { background: #8cf5a5; }
#btnMusic[aria-pressed="true"] { background: #7a3fc1; color: #fff; border-color: #7a3fc1; }
/* lounge on the felt: a round table with people around it */
.loungeview { position: relative; flex: 1; min-height: 320px; margin: 4px auto; width: min(100%, 560px); aspect-ratio: 1; max-height: calc(100dvh - 300px); }
.felt[data-lounge="true"] #zones { display: none; }
.loungeview .lring { position: absolute; inset: 0; border-radius: 50%; }
.loungeview .lcentre { position: absolute; inset: 22%; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  background: radial-gradient(circle at 40% 35%, #8b5a2b, #5a3414 75%); box-shadow: 0 12px 28px #000a, inset 0 2px 0 #fff3; border: 4px solid #3a2410; padding: 1rem; color: #fff; }
.loungeview .ltopic { font-size: clamp(1rem, 4.5vw, 1.5rem); font-weight: 900; margin: 0 0 .3rem; overflow-wrap: anywhere; }
.loungeview .lcount, .loungeview .lmusic { margin: 0; font-size: .85em; opacity: .9; }
.loungeview .lperson { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 2px; width: 90px; text-align: center; }
.loungeview .lperson .pav { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: #fff;
  background: radial-gradient(circle at 35% 30%, #4fc3f7, #1d4fa3); border: 3px solid #fffc; box-shadow: 0 3px 8px #0009; }
.loungeview .lperson.invoice .pav { box-shadow: 0 0 0 3px #8cf5a5, 0 3px 8px #0009; }
.loungeview .lperson.speaking .pav { box-shadow: 0 0 0 4px #8cf5a5, 0 0 16px 4px #5fe08a; }
.loungeview .lpname { font-size: .78em; font-weight: 700; color: #fff; text-shadow: 0 1px 2px #000; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lounges .loungeitem { background: linear-gradient(135deg, #3a2a5a, #241a3a); border-color: #7a3fc1; }
.lounges .lavs { display: flex; }
.lounges .lav { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: .65em; font-weight: 800; color: #fff;
  background: #7a3fc1; border: 2px solid #fff; margin-inline-start: -8px; }
.lounges .lav:first-child { margin-inline-start: 0; }
.lounges .lmeta, #myTablesList .lmeta { flex: 1; min-width: 10rem; }
#myTablesList .savedrow { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .6rem; border-radius: 12px; background: var(--panel2); border: 1px solid var(--line); }
body[data-lounge="true"] .table-panels { display: none; }

/* =====================================================================================================
   ROUND 12 -- progression cosmetics: felts, avatar frames, name colours, titles, Lv chip (card backs: visual.js)
   ===================================================================================================== */
html[data-felt="felt_blue"] { --felt1: #2a6bb8; --felt2: #12325e; }
html[data-felt="felt_burgundy"] { --felt1: #8e2a40; --felt2: #4a0f1d; }
html[data-felt="felt_midnight"] { --felt1: #26305e; --felt2: #0b1028; }
html[data-felt="felt_sand"] { --felt1: #c9a96e; --felt2: #8a6a36; }
html[data-felt="felt_royal"] { --felt1: #5a2e9a; --felt2: #26104a; }
html[data-felt="felt_midnight"] .felt::after { content: ""; position: absolute; inset: 13px; border-radius: inherit; pointer-events: none;
  background-image: radial-gradient(1.2px 1.2px at 12% 18%, #fff9 50%, transparent 51%), radial-gradient(1px 1px at 68% 32%, #fff7 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 42% 76%, #fff8 50%, transparent 51%), radial-gradient(1px 1px at 86% 84%, #fff6 50%, transparent 51%); }
html[data-felt="felt_royal"] .felt { box-shadow: inset 0 0 0 10px #3a2410, inset 0 0 0 13px #ffd54acc, inset 0 0 60px #0009, var(--shadow); }
html[data-felt="felt_sand"] .felt .status { background: #0008; }
/* name plates: Lv chip, title, frames and name colours (from seats[].badge) */
.plate .plv { flex: none; font-size: .68em; font-weight: 900; color: #fff; background: #2563c9; border-radius: 99px; padding: 0 6px; }
.plate .ptitle { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 1px; white-space: nowrap; font-size: .62em; font-weight: 800;
  color: #ffd54a; text-shadow: 0 1px 2px #000; letter-spacing: .02em; pointer-events: none; }
.plate:has(.psub) .ptitle { display: none; }
.plate[data-frame] .pav { outline-offset: 1px; }
.plate[data-frame="frame_bronze"] .pav { outline: 3px solid #b07a3c; }
.plate[data-frame="frame_silver"] .pav { outline: 3px solid #cfd6de; box-shadow: 0 0 6px #fff8; }
.plate[data-frame="frame_gold"] .pav { outline: 3px solid #f2c94c; box-shadow: 0 0 8px #f2c94caa; }
.plate[data-frame="frame_diamond"] .pav { outline: 3px solid #9fe7ff; box-shadow: 0 0 10px #9fe7ffcc, 0 0 2px #fff; }
.plate[data-frame="frame_laurel"] .pav { outline: 3px double #5fbf5f; box-shadow: 0 0 0 5px #2e7d3255; }
.plate[data-name-color="name_teal"] .pname2 { color: #0f7f78; }
.plate[data-name-color="name_violet"] .pname2 { color: #6d3fb8; }
.plate[data-name-color="name_orange"] .pname2 { color: #c4561a; }
.plate[data-name-color="name_gold"] .pname2 { color: #a67c00; text-shadow: 0 0 6px #ffd54a99; }
/* the same in the side lists (ATWEB2 puts data-name-color / data-frame on [data-person] rows) */
[data-person][data-name-color="name_teal"] .pname, [data-person][data-name-color="name_teal"] .seatlabel { color: #1aa39a; }
[data-person][data-name-color="name_violet"] .pname, [data-person][data-name-color="name_violet"] .seatlabel { color: #a77bea; }
[data-person][data-name-color="name_orange"] .pname, [data-person][data-name-color="name_orange"] .seatlabel { color: #f08a3f; }
[data-person][data-name-color="name_gold"] .pname, [data-person][data-name-color="name_gold"] .seatlabel { color: #f2c94c; }
.loungeview .lperson .ptitle { position: static; transform: none; }
.plate:has(.ptitle) { flex-wrap: wrap; justify-content: center; row-gap: 0; }
.plate .ptitle { position: static; transform: none; flex-basis: 100%; text-align: center; margin: -1px 0 1px; color: #a67c00; text-shadow: none; font-size: .6em; line-height: 1.1; }
@media (min-width: 641px) {
  .area-left .plate .pname2, .area-right .plate .pname2 { max-width: none; }
  .area-left .plate, .area-right .plate { max-width: calc(var(--side) + 40px); }
  #zones.stage { --side: clamp(80px, 13vw, 190px); }
}
.plate:has(.ptitle) { flex-wrap: nowrap; padding-bottom: 13px; }
.plate .ptitle { position: absolute; left: 36px; right: 8px; bottom: 1px; top: auto; transform: none; flex-basis: auto; margin: 0; text-align: start;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.area-left .plate:has(.ptitle), .area-right .plate:has(.ptitle), .area-tl .plate:has(.ptitle), .area-tr .plate:has(.ptitle) { padding-bottom: 14px; }
.area-left .plate .ptitle, .area-right .plate .ptitle, .area-tl .plate .ptitle, .area-tr .plate .ptitle { left: 4px; right: 4px; text-align: center; }
@media (max-width: 640px) { .plate .ptitle { left: 30px; } }

/* WEBF 06.10.2026: settings devices / documents / shortcuts, messages list */
#micMeter { width: 100%; height: 1.4rem; }
.doclist { list-style: none; margin: .3rem 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.doclist button { min-height: 44px; }
#scBox { margin: .8rem 0; }
#scBox summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 600; }
#ibList li { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
#ibList .ibrow { flex: 1; min-width: 12rem; text-align: start; min-height: 44px; }
#ibList .ibrow .ibnew { font-weight: 700; }
#pmLog .pmst { opacity: .75; font-size: .85em; margin-inline-start: .4em; }

/* WEBF: Word Weaver -- a 15x15 board as big as the felt allows, letter tiles on a wooden rack */
.stage[data-layout="words"] .area-center { flex-direction: column; flex-wrap: nowrap; align-items: stretch; justify-content: center; width: 100%; }
.stage[data-layout="words"] .zone.gridzone { flex: 1 1 auto; width: 100%; }
.stage[data-layout="words"] .zone.gridzone .zitems { width: min(100%, 74vh, 760px); margin-inline: auto; gap: 1px; grid-template-columns: 1.1em repeat(15, minmax(0, 1fr)) !important; background: #6b4f2a; padding: 3px; border-radius: 8px; box-shadow: 0 8px 20px #0008; }
.stage[data-layout="words"] .zone.gridzone .ghead { color: #f3e6c8; font-size: .62em; }
.stage[data-layout="words"] .zone.gridzone .zitems { height: auto !important; max-height: none; align-content: start; align-items: start; grid-auto-rows: auto; }
.zone.gridzone[data-gk="words"] .item { border-radius: 2px; padding: 0; min-width: 0; min-height: 0; width: 100%; height: auto; align-self: start; }
.zone.gridzone[data-gk="words"] .item .gfx { display: block; width: 100%; height: auto; aspect-ratio: 1; }
.zone.gridzone[data-gk="words"] .item:focus { outline: 3px solid var(--focus); outline-offset: -1px; z-index: 2; }
.zone.gridzone[data-gk="words"] .item.sel { box-shadow: inset 0 0 0 3px #1d4ed8; }
.zone.gridzone[data-gk="words"] .item.dim { opacity: 1; }
.zone[data-kind="wrack"] .zitems { display: flex; flex-wrap: nowrap; justify-content: center; gap: 6px; padding: 8px 10px 10px; background: linear-gradient(#8a6436, #5e4220); border-radius: 10px; box-shadow: 0 6px 14px #0007; width: max-content; max-width: 100%; margin-inline: auto; }
.zone[data-kind="wrack"] .item { width: clamp(38px, 11vw, 60px); height: auto; padding: 0; flex: 0 0 auto; }
.zone[data-kind="wrack"] .item .gfx { width: 100%; height: auto; aspect-ratio: 1; display: block; }
.zone[data-kind="wrack"] .item .cap { display: none; }
.zone[data-kind="wrack"] .item.sel { transform: translateY(-8px); }
.zone[data-kind="wrack"] .item.sel .gfx { filter: drop-shadow(0 0 4px #1d4ed8); }
@media (max-width: 700px) {
  .stage[data-layout="words"] .zone.gridzone .zitems { width: 100%; }
}
/* the board gets the whole width; the other players' plates sit in one row above it */
#zones.stage[data-layout="words"] { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas: "left top right" "center center center" "bottom bottom bottom"; }
#zones.stage[data-layout="words"] .area-left, #zones.stage[data-layout="words"] .area-right { flex-direction: row; }
.stage[data-layout="words"] .zone.gridzone .zitems { width: min(100cqw, calc(100cqh - 4px), 760px) !important; }

/* WEBF: Quiz Night -- a question card and four big answer buttons (keys 1-4), answers marked after the reveal */
.stage[data-layout="quiz"] .area-center { flex-direction: column; flex-wrap: nowrap; align-items: stretch; justify-content: center; gap: 12px; container-type: normal; }
.zone[data-kind="qcard"] .zitems { display: block; }
.zone[data-kind="qcard"] .item { cursor: default; background: #fffdf6; color: #1b241f; border-radius: 16px; padding: 14px 18px; box-shadow: 0 8px 22px #0007; }
.zone[data-kind="qcard"] .qtext { display: block; font-size: clamp(1.05rem, 2.6vw, 1.6rem); font-weight: 800; line-height: 1.3; text-align: center; }
.zone[data-kind="qopts"] .zitems { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.zone[data-kind="qopts"] .item { min-height: 64px; display: flex; align-items: center; padding: 10px 14px; border-radius: 14px; color: #fff;
  font-weight: 800; font-size: clamp(1rem, 2.2vw, 1.3rem); box-shadow: 0 5px 0 #0005, 0 8px 16px #0006; border: 3px solid transparent; }
.zone[data-kind="qopts"] .item[data-qn="1"] { background: #c2410c; }
.zone[data-kind="qopts"] .item[data-qn="2"] { background: #1d4ed8; }
.zone[data-kind="qopts"] .item[data-qn="3"] { background: #a16207; }
.zone[data-kind="qopts"] .item[data-qn="4"] { background: #15803d; }
.zone[data-kind="qopts"] .item .qtext { display: block; text-align: start; overflow-wrap: anywhere; }
.zone[data-kind="qopts"] .item.qmine { border-color: #fff; }
.zone[data-kind="qopts"] .item.qok { outline: 5px solid #86efac; outline-offset: 2px; }
.zone[data-kind="qopts"] .item.qok::after { content: "✓"; margin-inline-start: auto; font-size: 1.6em; }
.zone[data-kind="qopts"] .item.qbad { opacity: .6; text-decoration: line-through; }
.zone[data-kind="qopts"] .item.dim { opacity: .55; }
.zone[data-kind="qlist"] .zitems { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.zone[data-kind="qlist"] .item { cursor: default; background: #0006; color: #fff; border-radius: 999px; padding: 2px 10px; font-size: .85em; }
@media (max-width: 520px) { .zone[data-kind="qopts"] .zitems { grid-template-columns: minmax(0, 1fr); gap: 8px; } .zone[data-kind="qopts"] .item { min-height: 54px; } }
#zones.stage[data-layout="quiz"] { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas: "left top right" "center center center" "bottom bottom bottom"; }
#zones.stage[data-layout="quiz"] .area-left, #zones.stage[data-layout="quiz"] .area-right { flex-direction: row; }
.stage[data-layout="quiz"] .area-center { width: 100%; max-width: 820px; margin-inline: auto; overflow-y: auto; }
.qflash { position: absolute; left: 50%; top: 18%; transform: translateX(-50%); z-index: 20; max-width: min(92%, 640px); padding: 12px 18px;
  border-radius: 16px; font-weight: 800; font-size: 1.1rem; text-align: center; color: #fff; background: #334155ee; box-shadow: 0 10px 26px #000a; pointer-events: none; }
.qflash[data-kind="right"] { background: #15803dee; }
.qflash[data-kind="wrong"] { background: #b91c1cee; }
.qflash[hidden] { display: none; }
/* ATF-WEB: "Message the staff" dialog + the staff inbox */
textarea { font: inherit; color: inherit; background: var(--bg); border: 1px solid var(--line); border-radius: 9px; padding: .55rem .7rem;
  min-height: 7rem; width: 100%; resize: vertical; line-height: 1.4; }
.cstopics { flex-direction: row; flex-wrap: wrap; gap: .2rem 1.1rem; padding: .5rem .8rem .7rem; margin: .4rem 0 0; }
.cstopics legend { font-weight: 600; padding: 0 .3rem; }
.cstopics label.check { margin-top: 0; min-height: 44px; }
input[type="radio"] { width: 22px; height: 22px; min-height: 0; margin: 0; accent-color: var(--accent2); }
.cscount { display: flex; justify-content: space-between; gap: .5rem; }
#csCount { font-variant-numeric: tabular-nums; }
#csMine { border-top: 1px solid var(--line); margin-top: 1rem; padding-top: .8rem; }
#csMine h3:focus { outline-offset: 2px; }
.cslist, .silist { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.csitem { border: 1px solid var(--line); border-radius: 12px; padding: .7rem .9rem; background: var(--panel2); }
.csitem h4 { margin: 0 0 .3rem; font-size: 1rem; }
.cstext { margin: .2rem 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.csreply { border-inline-start: 3px solid var(--accent); padding-inline-start: .7rem; margin-top: .5rem; }
.csby { margin: 0; color: var(--muted); font-size: .9em; }
.csby .badge { margin-inline: 0 .4rem; }
.spinbox { margin-bottom: 1rem; }
.siitem { border: 1px solid var(--line); border-radius: 12px; background: var(--panel2); }
.siitem.unread { border-color: var(--accent); }
.siitem.closed summary { color: var(--muted); }
.siitem summary { cursor: pointer; padding: .65rem .9rem; min-height: 44px; display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; list-style: none; }
.siitem summary::-webkit-details-marker { display: none; }
.siitem summary::before { content: "\25B8"; color: var(--accent2); font-size: .9em; width: 1em; flex: none; }
[dir="rtl"] .siitem summary::before { content: "\25C2"; }
.siitem details[open] > summary::before { content: "\25BE"; }
.siitem details[open] summary { border-bottom: 1px solid var(--line); }
.sibody { padding: .6rem .9rem .9rem; display: flex; flex-direction: column; gap: .35rem; }
.sitext { margin: 0 0 .3rem; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 1.02em; }
.sidl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .25rem .8rem; margin: 0; }
.sidl dt { color: var(--muted); }
.sidl dd { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .5rem; overflow-wrap: anywhere; }
.sibody h4 { margin: .5rem 0 0; font-size: .95rem; }
.sireps { margin: 0; padding-inline-start: 1.1rem; }
.sibody label { font-weight: 600; margin-top: .3rem; }
.sibody label.check { font-weight: 400; display: flex; gap: .5rem; align-items: center; }
button.small { min-height: 36px; padding: .2rem .6rem; font-size: .88em; }
.badge.sinew { background: var(--accent); color: var(--bg); border-color: var(--accent); font-weight: 700; margin-inline: 0 .2rem; }
#btnStaff .badge, #btnInbox .badge { background: var(--accent); color: var(--bg); border-color: var(--accent); font-weight: 700; margin-inline: .1rem 0; }
@media (max-width: 640px) { .sidl { grid-template-columns: minmax(0, 1fr); } .sidl dt { margin-top: .3rem; } }
/* ATF-WEB design pass (06.10.2026) */
/* the key number on a yellow (primary) action button was dark on dark */
.actionbar .act.primary kbd { background: #fff9; color: #1d1503; border-color: #1d150355; }
/* side panel tabs: "Friends" (and longer words in other languages) no longer run out of the panel */
.side .tabs [role="tab"] { min-width: 0; padding-inline: .35rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* toasts: their buttons kept the theme colours and became white on cream (light) / black on dark green (dark) */
#pgToast button { background: #ffffff1f; color: #fff; border-color: #ffffff80; }
#pgToast button:hover:not(:disabled) { border-color: #f2c94c; }
#invToast button:not(.primary) { background: #fff; color: #1b1b1b; border-color: #0b5d3b; }
/* a board where nearly every point is playable: one frame instead of a glowing ring on every point */
.stage .zone.gridzone.mostcan .item.can { box-shadow: none; }
.stage .zone.gridzone.mostcan .zitems { outline: 3px solid #8cf5a5aa; outline-offset: 3px; border-radius: 6px; }
/* Go: a lined wooden board, stones on the intersections, the lines stop at the outermost points */
.stage[data-game="go"] .zone.gridzone .zitems { background: #dcb67a; border-radius: 8px; box-shadow: inset 0 0 0 2px #a07a44, 0 8px 20px #0008; }
.stage[data-game="go"] .zone.gridzone .ghead { color: #4a3519; }
.stage[data-game="go"] .item[data-type="cell"] .gfx rect:nth-of-type(-n+2) { fill: none; stroke: none; }
.stage[data-game="go"] .item[data-type="cell"] { --gl: #4a3519; border-radius: 0;
  background: linear-gradient(var(--gl), var(--gl)) var(--hx, 0) 50% / var(--hw, 100%) 1.5px no-repeat,
    linear-gradient(var(--gl), var(--gl)) 50% var(--vy, 0) / 1.5px var(--vh, 100%) no-repeat; }
.stage[data-game="go"] .item.eL { --hx: 100%; --hw: 50%; }
.stage[data-game="go"] .item.eR { --hx: 0; --hw: 50%; }
.stage[data-game="go"] .item.eT { --vy: 100%; --vh: 50%; }
.stage[data-game="go"] .item.eB { --vy: 0; --vh: 50%; }
.stage[data-game="go"] .item.can:hover .gfx { background: radial-gradient(circle, #0003 0 32%, transparent 34%); }
@media (max-width: 640px) {
  /* a thinner rim on a phone: boards no longer run over it */
  .felt, .felt[data-seats] { box-shadow: inset 0 0 0 5px var(--rim), inset 0 0 0 7px #c9a227aa, inset 0 0 40px #0009, var(--shadow); padding-inline: 9px; }
  .felt::before { inset: 7px; }
  /* side seats: no avatar circle (it was cut off by the narrow column); name, level and score stay */
  .stage .area-left .plate .pav, .stage .area-right .plate .pav { display: none; }
  .stage .area-left, .stage .area-right { justify-content: safe center; }
}
/* staff panel: every section is a column (labels above their fields), like the other forms */
#spMain .spsec, .spinbox { display: flex; flex-direction: column; gap: .35rem; margin-bottom: 1.2rem; }
#spMain .spsec > label { font-weight: 600; margin-top: .3rem; }
#spMain .spsec > select[size] { max-width: 100%; }
#spMain .spsec > input, #spMain .spsec > select { max-width: 32rem; }
#spMain .spsec .btnrow > input { flex: 1; min-width: 0; }
#spRole { margin-bottom: .6rem; }
/* a long option ("Normal (off when the system asks for less motion)") made selects wider than the Settings dialog on a
   phone, so every field ran out of the dialog on the right */
select { max-width: 100%; text-overflow: ellipsis; }
.grid2 > div, .form, dialog .grid2 { min-width: 0; }
dialog { overflow-x: hidden; }
.siitem summary > span:last-child { flex: 1 1 0; min-width: 0; }
/* Ludo on a phone: the level chip squeezed the player's own name to nothing ("SH : Lv 1 0") */
@media (max-width: 640px) { [data-layout="ludo"].stage .plate .plv, [data-layout="ludo"].stage .area .plate .pav { display: none; } [data-layout="ludo"].stage .area .plate { padding-inline-start: 10px !important; } }
/* ATF-WEBQA: the turn timer ring (top end corner of the felt) covered the end of the status line and of the first
   row of pills ("Dictionary: English" in Word Weaver on a 390 px phone): keep them clear of it while it shows */
.felt .board:has(> #timer:not([hidden])) > #status { max-width: calc(100% - 108px); }
.felt .board:has(> #timer:not([hidden])) > :is(#info, #badges) { padding-inline-end: 52px; }
/* ATF-WEBQA: a board taller than the centre area was centred with its top cut off (Go lost its column letters on a
   phone, the top half of them on a desktop): overflow now goes to the bottom, where it can be scrolled to */
.stage .area-center { align-content: safe center; }
/* ATF-WEBQA: on a gap-less board (Reversi) the glow of a playable square was hidden on two sides by its neighbours */
.zone.gridzone[data-gk="board"] .item.can { z-index: 1; }
/* (the same for a centre area laid out as a column: Sea Battle's target grid lost its letters A-J on a phone) */
.stage .area-center { justify-content: safe center; }
/* ATF-WEBQA: Sea Battle on a phone -- the target grid was sized to the whole centre height and the column was
   centred with overflow hidden: cut at both ends (no letters A-J on the target, fleet rows 8-10 under the name plate)
   and the fleet squeezed to a few pixels per column. Now the target keeps its full size (big squares to tap, letters
   visible) and the fleet follows below it: the middle scrolls instead of cutting. */
@media (max-width: 640px) {
  [data-layout="grid2"].stage .area-center { overflow-y: auto; justify-content: safe center; }
  [data-layout="grid2"].stage .zone[data-zid="target"] .zitems { width: min(100%, 360px, calc(100cqh - 1.6em)) !important; }
  [data-layout="grid2"].stage .zone[data-zid="fleet"] .zitems { width: min(70%, 230px) !important; }
  [data-layout="grid2"].stage .area-center > .zone.gridzone { flex-shrink: 0 !important; }
}
/* ATF-WEBQA: Klondike was drawn as seven horizontal rows one under the other, so on a phone only the first four
   columns fitted and the playable cards of columns 5-7 were out of sight. Now the usual solitaire table: stock,
   waste and foundations on top, the seven columns side by side below, each column's cards overlapping downwards. */
.stage[data-game="klondike"] .area-center { display: grid !important; grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-auto-rows: auto; align-content: start; justify-items: center; gap: 10px 4px; overflow-y: auto; }
.stage[data-game="klondike"] .area-center > .zone { --cw: min(78px, calc((100cqw - 34px) / 7)); flex: none !important;
  width: auto !important; min-width: 0; max-width: 100%; margin: 0 !important; }
.stage[data-game="klondike"] .area-center > .zone[data-zid="stock"] { grid-column: 1; grid-row: 1; }
.stage[data-game="klondike"] .area-center > .zone[data-zid="waste"] { grid-column: 2 / span 2; grid-row: 1; justify-self: start; }
.stage[data-game="klondike"] .area-center > .zone[data-zid="found"] { grid-column: 4 / span 4; grid-row: 1; justify-self: end; }
.stage[data-game="klondike"] .area-center > .zone[data-zid^="col"] { grid-row: 2; align-self: start; }
.stage[data-game="klondike"] .zone[data-zid^="col"] .zitems { display: flex !important; flex-direction: column; flex-wrap: nowrap;
  align-items: center; gap: 0; padding: 0; }
.stage[data-game="klondike"] .zone[data-zid^="col"] .item + .item { margin: calc(var(--cw) * -1.02) 0 0 0 !important; }
.stage[data-game="klondike"] .zone[data-zid="found"] .zitems, .stage[data-game="klondike"] .zone[data-zid="waste"] .zitems { flex-wrap: nowrap; gap: 3px; }
.stage[data-game="klondike"] .zone[data-zid="waste"] .item + .item { margin-inline-start: calc(var(--cw) * -.7); }
.stage[data-game="klondike"] .area-center .zlabel { display: none; }
.stage[data-game="klondike"] .area-center { padding-top: 6px; }
/* ATF-WEBQA: Sound Memory on a phone: the first card of rows 2-4 was half cut off -- the board has more than 8 cards,
   so the hand-fan overlap (.zone.fanned .item + .item, a negative margin) shifted them out of their grid column.
   A board is never a fan. The cards also shrink to fit a narrow middle (four players on a 390 px phone). */
.stage .zone.fanned[data-role="board"] .zitems > .item + .item { margin-inline-start: 0; }
[data-game="soundmemory"].stage .area-center > .zone[data-role="board"] { --cw: min(70px, calc((100cqw - 26px) / 4)); }
@media (max-width: 640px) { [data-game="soundmemory"].stage .area-center > .zone[data-role="board"] { --cw: min(46px, calc((100cqw - 22px) / 4)); } }