/* Domino on the Magida design language (night by default, day on request).
   Tokens first: bare :root is the night palette; the day palette applies when
   the OS asks for light (unless the page is pinned dark) or data-theme="light". */

:root {
  color-scheme: dark;
  --bg: #000000;
  --bg-2: #0a0b0f;
  --panel: #0e1016;
  --panel-line: rgba(255, 255, 255, .10);
  --glass: rgba(255, 255, 255, .08);
  --glass-strong: rgba(255, 255, 255, .13);
  --line: rgba(255, 255, 255, .15);
  --line-soft: rgba(255, 255, 255, .08);
  --text: #f5f5f2;
  --text-2: rgba(245, 245, 242, .62);
  --text-3: rgba(245, 245, 242, .40);
  --ink: #070914;
  --lime: #d6ff3b;
  --lime-hover: #efffb0;
  --lime-tint: rgba(214, 255, 59, .14);
  --lime-line: rgba(214, 255, 59, .45);
  --accent-text: #d6ff3b;
  --danger: #ff4d5a;
  --danger-text: #ff6b76;
  --warn-text: #ffb13d;
  --good-text: #3ddc97;
  --felt-a: #12141c;
  --felt-b: #06070a;
  --felt-glow: rgba(214, 255, 59, .08);
  --tile: #f3efe3;
  --tile-2: #e3dcc9;
  --tile-edge: #a89f88;
  --tile-div: #a39a82;
  --pip: #16181e;
  --back-a: #1b1f29;
  --back-b: #0c0e13;
  --shadow: 0 .8rem 2rem rgba(0, 0, 0, .55);
  --sheet-bg: rgba(0, 0, 0, .55);

  --font-display: "Onest", "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-ka: "Noto Sans Georgian", "DejaVu Sans", "Sylfaen", sans-serif;
  --r-control: .8rem;
  --r-panel: 1.25rem;
  --r-card: 1.75rem;
  --ease: cubic-bezier(.2, .7, .2, 1);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --bg: #f5f6f0;
    --bg-2: #eceee6;
    --panel: #ffffff;
    --panel-line: rgba(0, 0, 0, .08);
    --glass: rgba(0, 0, 0, .05);
    --glass-strong: rgba(0, 0, 0, .09);
    --line: rgba(0, 0, 0, .13);
    --line-soft: rgba(0, 0, 0, .07);
    --text: #0b0d10;
    --text-2: rgba(11, 13, 16, .64);
    --text-3: rgba(11, 13, 16, .44);
    --lime-tint: rgba(120, 160, 0, .13);
    --lime-line: rgba(88, 117, 0, .5);
    --accent-text: #4f6a00;
    --danger-text: #c62a36;
    --warn-text: #8a5200;
    --good-text: #1f7a4d;
    --felt-a: #fdfdf9;
    --felt-b: #e9ebe2;
    --felt-glow: rgba(150, 190, 0, .10);
    --tile: #fffdf7;
    --tile-2: #efe9da;
    --tile-edge: #bdb39b;
    --back-a: #2a2f3a;
    --back-b: #151820;
    --shadow: 0 .8rem 1.8rem rgba(30, 40, 0, .16);
    --sheet-bg: rgba(240, 242, 235, .6);
  }
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f5f6f0;
  --bg-2: #eceee6;
  --panel: #ffffff;
  --panel-line: rgba(0, 0, 0, .08);
  --glass: rgba(0, 0, 0, .05);
  --glass-strong: rgba(0, 0, 0, .09);
  --line: rgba(0, 0, 0, .13);
  --line-soft: rgba(0, 0, 0, .07);
  --text: #0b0d10;
  --text-2: rgba(11, 13, 16, .64);
  --text-3: rgba(11, 13, 16, .44);
  --lime-tint: rgba(120, 160, 0, .13);
  --lime-line: rgba(88, 117, 0, .5);
  --accent-text: #4f6a00;
  --danger-text: #c62a36;
  --warn-text: #8a5200;
  --good-text: #1f7a4d;
  --felt-a: #fdfdf9;
  --felt-b: #e9ebe2;
  --felt-glow: rgba(150, 190, 0, .10);
  --tile: #fffdf7;
  --tile-2: #efe9da;
  --tile-edge: #bdb39b;
  --back-a: #2a2f3a;
  --back-b: #151820;
  --shadow: 0 .8rem 1.8rem rgba(30, 40, 0, .16);
  --sheet-bg: rgba(240, 242, 235, .6);
}
:root[data-theme="dark"] { color-scheme: dark; }

/* ------------------------------------------------------------------ base */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 1rem/1.5 var(--font-body);
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}
[hidden] { display: none !important; }
:lang(ka), [lang="ka"] { font-family: var(--font-ka); }
:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; border-radius: .4rem; }
button { font: inherit; color: inherit; }

#app { display: flex; flex-direction: column; min-height: 100%; padding-left: max(16px, 1.5rem, env(safe-area-inset-left, 0px)); padding-right: max(16px, 1.5rem, env(safe-area-inset-right, 0px)); max-width: 76rem; margin: 0 auto; }
/* at the table the page is exactly one screen: the table takes what the top bar leaves */
#app.app--table { height: 100dvh; }
/* at the table the site's own bar steps aside: the game bar is the only top row */
#app.app--table > .topbar { display: none; }

.label { margin: 0; font-size: .75rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.dim { color: var(--text-2); }
.eyebrow { margin: 0; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-text); }

/* ----------------------------------------------------------------- topbar */
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: calc(.8rem + env(safe-area-inset-top, 0px)) .8rem; }
.brand { display: inline-flex; align-items: center; gap: .6rem; padding: .25rem .4rem .25rem .2rem; border: 0; background: none; cursor: pointer; border-radius: .6rem; }
.brand__tile { width: 1.05rem; height: 2.1rem; transform: rotate(-12deg); }
.brand__tile rect { fill: var(--tile); stroke: var(--tile-edge); stroke-width: .6; }
.brand__tile line { stroke: var(--tile-div); stroke-width: .6; }
.brand__tile circle { fill: var(--pip); }
.brand__name { font: 800 1.35rem/1 var(--font-display); letter-spacing: -0.03em; }
.brand__ka { font-size: .9rem; color: var(--text-3); }
.topbar__tools { display: flex; gap: .4rem; }
.icon-btn { width: 2.5rem; height: 2.5rem; display: inline-grid; place-items: center; border-radius: var(--r-control); border: 1px solid var(--line); background: var(--glass); cursor: pointer; font-weight: 600; transition: background-color .2s; }
.icon-btn:hover { background: var(--glass-strong); }
.icon-btn[aria-pressed="false"] { color: var(--text-3); text-decoration: line-through; }

/* ---------------------------------------------------------------- buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 2.75rem; padding: 0 1.15rem; border-radius: var(--r-control); border: 1px solid transparent; font: 500 .9375rem/1 var(--font-body); cursor: pointer; white-space: nowrap; transition: background-color .2s, transform .2s var(--ease), opacity .2s; }
.btn:active:not(:disabled) { transform: scale(.97); }
.btn:disabled { opacity: .45; cursor: default; }
.btn--primary { background: var(--lime); color: var(--ink); font-weight: 600; }
.btn--primary:hover:not(:disabled) { background: var(--lime-hover); }
.btn--ghost { background: var(--glass); border-color: var(--line-soft); }
.btn--ghost:hover:not(:disabled) { background: var(--glass-strong); }
.btn--danger { background: rgba(255, 77, 90, .1); border-color: rgba(255, 77, 90, .45); color: var(--danger-text); }
.btn--sm { min-height: 2.25rem; padding: 0 .85rem; font-size: .8rem; }
.btn--link { background: none; color: var(--text-2); padding-inline: .2rem; }
.btn--link:hover { color: var(--text); }
.cta { position: relative; padding: 1.15rem 2rem; border-radius: 1.5rem; border: .4rem solid rgba(0, 0, 0, .55); background: var(--lime); color: #000; font: 800 1.3rem/1 var(--font-display); letter-spacing: -0.01em; cursor: pointer; transition: background-color .2s, transform .2s var(--ease); }
.cta:hover { background: var(--lime-hover); }
.cta:active { transform: scale(.97); }

.input { min-height: 2.75rem; padding: .6rem .75rem; border-radius: .75rem; border: 1px solid var(--line); background: var(--glass); color: var(--text); font: 400 .9375rem/1.3 var(--font-body); outline: 0; }
.input:focus-visible { border-color: var(--accent-text); }
select.input { appearance: none; padding-right: 2rem; background-image: linear-gradient(45deg, transparent 50%, var(--text-2) 50%), linear-gradient(135deg, var(--text-2) 50%, transparent 50%); background-position: calc(100% - 15px) 55%, calc(100% - 10px) 55%; background-size: 5px 5px; background-repeat: no-repeat; }
select.input option { background: var(--panel); color: var(--text); }
.code-input { width: 6.5rem; text-transform: uppercase; letter-spacing: .25em; font: 800 1.05rem/1 var(--font-display); text-align: center; }

.seg { display: inline-flex; flex-wrap: wrap; gap: .2rem; padding: .25rem; border-radius: var(--r-panel); background: var(--glass); border: 1px solid var(--line-soft); }
.seg button { min-height: 2.25rem; padding: .4rem .85rem; border: 0; border-radius: 1rem; background: none; font-size: .85rem; color: var(--text-2); cursor: pointer; transition: background-color .2s, color .2s; }
.seg button:hover { color: var(--text); }
.seg button[aria-pressed="true"], .seg button[aria-selected="true"] { background: var(--lime); color: #000; font-weight: 600; }
.seg button:disabled { opacity: .35; cursor: default; }

.panel { border-radius: var(--r-panel); background: var(--panel); border: 1px solid var(--panel-line); }
.chip { display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .7rem; border-radius: 999px; background: var(--glass); border: 1px solid var(--line-soft); font-size: .78rem; white-space: nowrap; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.chip b { font: 700 .85rem/1 var(--font-display); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ entry */
.screen { flex: 1; }
.entry { display: grid; gap: 1.6rem; padding-bottom: 2.5rem; }
.hero { display: grid; gap: .5rem; padding-top: 1.2rem; }
.hero__title { margin: 0; font: 800 clamp(3rem, 9vw, 5.5rem)/.95 var(--font-display); letter-spacing: -0.045em; }
.hero__lede { margin: 0; max-width: 38rem; font-size: 1.1rem; color: var(--text-2); text-wrap: pretty; }

.pick { display: grid; gap: .7rem; }
.variants { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .7rem; }
.vcard--feature { grid-column: 1 / -1; min-height: 0; grid-template-columns: 1fr auto; grid-template-rows: auto auto auto auto; column-gap: 2rem; padding: 1.2rem 1.3rem; }
.vcard--feature .vcard__name { font-size: 1.9rem; }
.vcard--feature .vcard__blurb { max-width: 40rem; font-size: .95rem; }
.vcard--feature .vcard__tiles { position: static; grid-column: 2; grid-row: 1 / span 4; align-self: center; transform: scale(1.7); transform-origin: right center; margin-right: .8rem; }
@media (max-width: 900px) { .variants { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .variants { grid-template-columns: 1fr; } .vcard--feature { grid-template-columns: 1fr; } .vcard--feature .vcard__tiles { display: none; } }
/* the smallest phones (320 px): the top bar's icons shrink so the page never scrolls sideways */
@media (max-width: 350px) { .topbar__tools { gap: .25rem; } .topbar__tools .icon-btn { width: 2.1rem; height: 2.1rem; } }
.vcard { position: relative; display: grid; grid-template-rows: auto auto 1fr auto; gap: .35rem; min-height: 11.5rem; padding: 1rem 1rem .9rem; border-radius: var(--r-panel); border: 1px solid var(--panel-line); background: var(--panel); text-align: left; cursor: pointer; transition: border-color .2s, transform .2s var(--ease), background-color .2s; }
.vcard:hover { border-color: var(--line); }
.vcard[aria-checked="true"] { border-color: var(--lime-line); background: linear-gradient(180deg, var(--lime-tint), var(--panel) 70%); }
.vcard[aria-checked="true"]::after { content: ""; position: absolute; top: 1rem; right: 1rem; width: .6rem; height: .6rem; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 .3rem var(--lime-tint); }
.vcard__name { font: 800 1.3rem/1.05 var(--font-display); letter-spacing: -0.02em; }
.vcard__local { font-size: .85rem; color: var(--accent-text); }
.vcard__blurb { font-size: .85rem; line-height: 1.45; color: var(--text-2); }
.vcard__meta { display: flex; gap: .35rem; flex-wrap: wrap; align-items: flex-end; min-height: 2.1rem; padding-right: 3.4rem; }
.vcard--feature .vcard__meta { min-height: 0; padding-right: 0; }
.vcard__meta span { padding: .15rem .5rem; border-radius: 999px; border: 1px solid var(--line-soft); font-size: .7rem; color: var(--text-2); }
.vcard__tiles { position: absolute; right: .9rem; bottom: .8rem; opacity: .9; }

.setup { display: flex; flex-wrap: wrap; gap: 1rem 1.4rem; align-items: flex-end; }
.field { display: grid; gap: .4rem; }
.field--grow { flex: 1 1 12rem; }
.field--grow .input { width: 100%; }
.house { display: flex; flex-wrap: wrap; gap: .8rem 1.2rem; align-items: flex-end; padding: .9rem 1rem; border-radius: var(--r-panel); border: 1px dashed var(--line); }
.house:empty { display: none; }
.house > .label { flex-basis: 100%; }
.go { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem; }
.online { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.or { color: var(--text-3); font-size: .85rem; }
/* open tables anyone can join (online only) */
.tables { display: grid; gap: .7rem; }
.tables__head { display: flex; align-items: baseline; gap: .8rem; }
.tables__live { font-size: .8rem; color: var(--text-3); }
.tables__empty { margin: 0; font-size: .875rem; color: var(--text-2); }
.tables__list .who { display: grid; gap: .15rem; }
.tables__list .who > * { display: block; overflow: hidden; text-overflow: ellipsis; }
.tables__list .who b { font-weight: 600; }
.tables__list .who small { font-size: .78rem; color: var(--text-2); }
.tables__dots { flex: none; display: inline-flex; align-items: center; gap: .25rem; font: 700 .8rem/1 var(--font-display); color: var(--text-2); font-variant-numeric: tabular-nums; }
.tables__dots i { width: .5rem; height: .5rem; border-radius: 50%; background: var(--lime); }
.tables__dots i.is-bot { background: var(--text-3); }
.tables__dots i.is-empty { background: none; box-shadow: inset 0 0 0 1.5px var(--line); }
.tables__dots span { margin-left: .2rem; }
/* optional sign-in (online, when the server has it): who you are, the ways in,
   and your recent games — the Magida account corner, as Nardi's */
.account { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; padding: .75rem 1rem; font-size: .875rem; color: var(--text-2); }
.account__who { flex: 1 1 12rem; margin: 0; }
.account__ways { display: flex; flex-wrap: wrap; gap: .5rem; }
.account__form { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.account__form .input { flex: 1 1 11rem; min-width: 0; min-height: 2.25rem; padding: .45rem .7rem; font-size: .875rem; }
.account__error { flex-basis: 100%; margin: 0; font-size: .8rem; color: var(--danger-text); }
.input:disabled { opacity: .7; cursor: default; }
.res { flex: none; min-width: 3.3rem; padding: .3rem .5rem; border-radius: 999px; background: var(--glass); text-align: center; font: 600 .78rem/1 var(--font-body); }
.res--won { background: var(--lime); color: #000; }
.res--lost { color: var(--danger-text); box-shadow: inset 0 0 0 1px rgba(255, 77, 90, .4); }
.history__score { flex: none; font: 700 .9rem/1 var(--font-display); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ lobby */
.lobby { display: grid; place-items: start center; padding-block: 1.5rem 3rem; }
.lobby__card { width: min(34rem, 100%); padding: 1.4rem; display: grid; gap: .9rem; }
.lobby__code { display: flex; align-items: center; gap: 1rem; }
.lobby__code strong { font: 800 2.6rem/1 var(--font-display); letter-spacing: .14em; color: var(--accent-text); }
.seat-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.seat-list li { display: flex; align-items: center; gap: .7rem; padding: .55rem .7rem; border-radius: .9rem; background: var(--glass); }
.seat-list .who { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seat-list .tag { font-size: .72rem; letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); }
.lobby__host { display: flex; flex-wrap: wrap; gap: .6rem; align-items: flex-end; }

.avatar { flex: none; display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 50%; background: hsl(var(--h, 220) 45% 40%); color: #fff; font: 800 .95rem/1 var(--font-display); }

/* ------------------------------------------------------------------ table */
.table { flex: 1 1 0; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: .6rem; min-height: 0; padding-top: calc(.7rem + env(safe-area-inset-top, 0px)); padding-bottom: calc(.8rem + env(safe-area-inset-bottom, 0px)); }
/* The game bar: leave, the game and the hand, the score sheet, and a menu for
   what is not the game (rules, cameras, sound, theme). Scores sit at the seats. */
.table__bar { position: relative; display: flex; align-items: center; gap: .6rem; }
.table__info { flex: 1 1 auto; min-width: 0; display: flex; align-items: baseline; gap: .6rem; }
.table__info b { flex: none; font: 800 1.15rem/1 var(--font-display); letter-spacing: -0.02em; }
.table__info span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .85rem; color: var(--text-2); }
.table__btns { flex: none; display: flex; gap: .35rem; }
.table__btns .btn { min-height: 2.25rem; }
.icon-btn--bar { flex: none; width: 2.25rem; height: 2.25rem; }
.menu { position: absolute; right: 0; top: calc(100% + .4rem); z-index: 30; display: grid; min-width: 12rem; padding: .35rem; border-radius: var(--r-panel); background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow); transform-origin: top right; animation: pop .15s var(--ease); }
.menu button { display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; min-height: 2.75rem; padding: 0 .8rem; border: 0; border-radius: .8rem; background: none; font-size: .92rem; text-align: left; cursor: pointer; }
.menu button:hover, .menu button:focus-visible { background: var(--glass); }
.menu button span { color: var(--text-3); }
.menu__info { display: none; margin: 0; padding: .45rem .8rem .55rem; border-bottom: 1px solid var(--line-soft); font-size: .8rem; color: var(--text-2); white-space: nowrap; }
.btn--scores svg { display: none; }

/* The felt: you at the bottom, the others round the board in turn order
   (seat+1 on your left, the way a clockwise table passes). Every hand, face
   up or face down, uses the same tile size --tw (a tile is --tw x 2--tw). */
.felt { --tw: clamp(2.1rem, min(4.2vw, 7vh), 3.6rem); display: grid; gap: .6rem; min-height: 0; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto minmax(0, 1fr) auto; }
.felt[data-n="2"] { grid-template-areas: ". top ." "left board baz" "me me me"; }
.felt[data-n="3"] { grid-template-areas: ". baz ." "left board right" "me me me"; }
.felt[data-n="4"] { grid-template-areas: ". top baz" "left board right" "me me me"; }
.seat--top { grid-area: top; }
.seat--left { grid-area: left; }
.seat--right { grid-area: right; }
.bazaar { grid-area: baz; }
.board-wrap { grid-area: board; }
.seat--me { grid-area: me; }

.seat { position: relative; min-width: 0; min-height: 0; }
.seat--top { display: flex; align-items: center; justify-content: center; gap: .8rem; }
.seat--left, .seat--right { display: flex; flex-direction: column; align-items: center; gap: .6rem; width: calc(var(--tw) * 2.3); }

/* Seat frame: the Magida seat tile, sized for a camera picture later
   (4:3, hue per seat; a <video class="cam__video"> will sit under the tag). */
.cam { --cw: calc(var(--tw) * 2.1); position: relative; flex: none; width: var(--cw); aspect-ratio: 1; border-radius: 50%; color: #f5f5f2; background: radial-gradient(120% 90% at 50% 105%, hsl(var(--h, 220) 38% 27%), hsl(var(--h, 220) 30% 8%)); border: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 .6rem 1.4rem rgba(0, 0, 0, .35); transition: box-shadow .3s, border-color .3s; }
.cam > * { position: absolute; z-index: 1; }
.cam__video { inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.cam__initial { left: 50%; top: 47%; width: calc(var(--cw) * .4); aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: hsl(var(--h, 220) 45% 42%); display: grid; place-items: center; font: 800 calc(var(--cw) * .18) / 1 "Onest", var(--font-display); }
.cam__tag { left: 50%; bottom: calc(var(--cw) * -.07); transform: translateX(-50%); max-width: calc(var(--cw) * 1.4); display: inline-flex; align-items: baseline; gap: .35rem; padding: .2rem .45rem; border-radius: .45rem; background: rgba(0, 0, 0, .55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); font-size: .74rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cam__tag small { font-size: .68rem; font-weight: 400; color: rgba(245, 245, 242, .62); }
.cam__chips { top: calc(var(--cw) * .02); right: calc(var(--cw) * -.1); display: flex; flex-direction: column; align-items: flex-end; gap: .2rem; }
.cam__deed { top: calc(var(--cw) * .02); left: calc(var(--cw) * -.1); }
.cam__chip { display: inline-flex; align-items: center; height: 1.35rem; padding: 0 .45rem; border-radius: .45rem; background: rgba(0, 0, 0, .55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); font: 700 .7rem / 1 var(--font-display); letter-spacing: .02em; white-space: nowrap; animation: pop .25s var(--ease); }
.cam__chip--lime { background: var(--lime); color: #000; }
.cam__chip--score { height: 1.55rem; padding: 0 .5rem; gap: .25rem; background: rgba(0, 0, 0, .72); border: 1px solid rgba(214, 255, 59, .55); font-size: .82rem; font-variant-numeric: tabular-nums; }
.cam__chip--score small { font: 600 .62rem/1 var(--font-body); color: #d6ff3b; }
.cam__chip--goat { border-color: rgba(255, 77, 90, .7); color: #ff6b76; }
.cam__chip--warn { color: #ffb13d; }
.cam__chip--you { border: 1px solid rgba(214, 255, 59, .6); color: var(--lime); }
.cam__chip--partner { color: var(--lime); }
/* away (online): the seat's time ran out twice in a row; its picture greys
   until its player moves again */
.cam__chip--away { border: 1px solid rgba(245, 245, 242, .45); color: rgba(245, 245, 242, .85); }
/* the bot plays the seat: its player is absent (three timeouts in a row) or
   left the match; greyed like away, and said in amber */
.cam__chip--bot { border: 1px solid rgba(255, 177, 61, .6); color: #ffb13d; }
/* "Bot" and " playing" are separate flex items, which drop a leading space: a margin keeps it. "Bot" alone on the
   small pictures (yours — the notice on the table says the bot is playing for you — and the side seats), so the chip
   stays clear of the clock and the badges at the other corner */
.cam__more { margin-left: .28em; }
.seat--me .cam__more, .seat--left .cam__more, .seat--right .cam__more { display: none; }
.cam--away .cam__initial, .cam--away .cam__video { filter: grayscale(1); opacity: .5; }
.cam--turn { border-color: rgba(214, 255, 59, .7); box-shadow: 0 0 0 2px rgba(214, 255, 59, .7), 0 0 1.6rem rgba(214, 255, 59, .35); animation: cam-talk 1.4s ease-in-out infinite; }
@keyframes cam-talk { 0%, 100% { box-shadow: 0 0 0 2px rgba(214, 255, 59, .55), 0 0 1rem rgba(214, 255, 59, .25); } 50% { box-shadow: 0 0 0 2px rgba(214, 255, 59, .9), 0 0 2rem rgba(214, 255, 59, .45); } }
/* cameras on: the picture fills the circle; the initial steps aside */
.cam__video { background: var(--face, none) center / cover no-repeat; }
.felt--video .cam__initial { display: none; }
.cam__face--arch { --face: url(faces/arch.jpg); }
.cam__face--levan { --face: url(faces/levan.jpg); }
.cam__face--ana { --face: url(faces/ana.jpg); }
.cam__face--guram { --face: url(faces/guram.jpg); }
.cam__mic { right: calc(var(--cw) * .02); bottom: calc(var(--cw) * .12); display: grid; place-items: center; width: clamp(1rem, var(--cw) * .24, 1.9rem); aspect-ratio: 1; border-radius: 50%; background: rgba(0, 0, 0, .7); color: #f5f5f2; }
.cam__mic svg { width: 58%; height: 58%; fill: currentColor; }
.cam__mic--live { background: var(--lime); color: #000; box-shadow: 0 0 0 .2rem rgba(214, 255, 59, .25); }
#cam-btn[aria-pressed="true"] { background: var(--lime); color: #000; border-color: transparent; }
/* The turn clock (online): a ring round the picture of the player to move runs
   down from the top, with the seconds left just inside it (inside, so a seat
   at the edge of the felt never loses them); amber for the last few. */
.cam__clock { left: -5px; top: -5px; z-index: 2; width: calc(100% + 10px); height: calc(100% + 10px); transform: rotate(-90deg); overflow: visible; pointer-events: none; }
.cam__clock circle { fill: none; stroke: var(--lime); stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 100 100; }
.cam__clock--low circle { stroke: #ffb13d; }
.cam__secs { top: calc(var(--cw) * .05); left: 50%; z-index: 3; transform: translateX(-50%); display: grid; place-items: center; min-width: 1.6rem; height: 1.2rem; padding: 0 .3rem; border-radius: .45rem; background: rgba(0, 0, 0, .78); border: 1px solid rgba(214, 255, 59, .6); color: var(--lime); font: 700 .72rem / 1 var(--font-display); font-variant-numeric: tabular-nums; pointer-events: none; }
.cam__secs--low { border-color: rgba(255, 177, 61, .75); color: #ffb13d; animation: clock-low 1s ease-in-out infinite; }
/* the window used up, the seat's time bank for the match runs: the ring turns
   amber and runs down the bank, the time in minutes and seconds; red for the
   last few */
.cam__clock--bank circle { stroke: #ffb13d; }
.cam__secs--bank { border-color: rgba(255, 177, 61, .75); color: #ffb13d; }
.cam__clock--bank.cam__clock--low circle { stroke: #ff4d5a; }
.cam__secs--bank.cam__secs--low { border-color: rgba(255, 77, 90, .8); color: #ff6b76; }
/* an away seat's short turn: the ring and the seconds grey, not lime or amber */
.cam__clock--away circle { stroke: #8d95a5; }
.cam__secs--away { border-color: #8d95a5; color: #f5f5f2; animation: none; }
@keyframes clock-low { 50% { transform: translateX(-50%) scale(1.12); } }
.seat--left .cam, .seat--right .cam { --cw: calc(var(--tw) * 1.8); margin-bottom: .5rem; }

/* face-down tiles: the Magida back (dark, hairline, the white M) */
.backs { --ov: .3rem; display: flex; min-width: 0; min-height: 0; }
.backs--row { flex-direction: row; }
.backs--col { flex-direction: column; flex: 1 1 0; align-items: center; contain: size; width: calc(var(--tw) * 2); } /* sized by the row, never sizing it */
.backs--row .back + .back { margin-left: var(--ov); }
.backs--col .back + .back { margin-top: var(--ov); }
.back { --bw: var(--tw); position: relative; flex: none; display: block; width: var(--bw); height: calc(var(--bw) * 2); border-radius: calc(var(--bw) * .16); background: linear-gradient(180deg, var(--back-a), var(--back-b)); border: 1px solid rgba(255, 255, 255, .16); box-shadow: 0 calc(var(--bw) * .08) calc(var(--bw) * .25) rgba(0, 0, 0, .45); }
.back::after { content: "M"; position: absolute; left: 50%; top: 50%; width: calc(var(--bw) * .36); aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 22%; background: #f5f5f2; color: #000; display: grid; place-items: center; font: 800 calc(var(--bw) * .23) / 1 var(--font-display); letter-spacing: -0.06em; opacity: .82; }
.backs--col .back { width: calc(var(--bw) * 2); height: var(--bw); }
/* The five back readings from the brandbook (Domino tiles · The back).
   #felt[data-back] picks one; A (the M) is today's. */
.felt[data-back="B"] .back::after, .felt[data-back="D"] .back::after, .felt[data-back="E"] .back::after { content: ""; width: calc(var(--bw) * .17); background: radial-gradient(circle at 35% 30%, #ffffff, #d5d6d8 45%, #8d9096 100%); border-radius: 50%; box-shadow: 0 0 0 calc(var(--bw) * .025) rgba(0, 0, 0, .55), 0 calc(var(--bw) * .02) calc(var(--bw) * .06) rgba(0, 0, 0, .6); opacity: 1; }
.felt[data-back="B"] .back::before, .felt[data-back="D"] .back::before, .felt[data-back="E"] .back::before { content: ""; position: absolute; left: 18%; right: 18%; top: calc(50% - .5px); height: 1px; background: rgba(255, 255, 255, .15); }
.felt[data-back="B"] .backs--col .back::before, .felt[data-back="D"] .backs--col .back::before, .felt[data-back="E"] .backs--col .back::before { left: calc(50% - .5px); right: auto; top: 18%; bottom: 18%; width: 1px; height: auto; }
.felt[data-back="C"] .back::after { content: "მ"; width: calc(var(--bw) * .5); background: none; border: 1.5px solid rgba(245, 245, 242, .7); border-radius: 50%; color: #f5f5f2; font: 700 calc(var(--bw) * .27) / 1 var(--font-ka); opacity: 1; }
.felt[data-back="D"] .back { background: radial-gradient(circle, rgba(255, 255, 255, .08) 0 calc(var(--bw) * .06), transparent calc(var(--bw) * .07)) 0 0 / calc(var(--bw) / 3) calc(var(--bw) / 3), linear-gradient(180deg, var(--back-a), var(--back-b)); }
.felt[data-back="E"] .seat .back { background: radial-gradient(120% 90% at 50% 105%, hsl(var(--h, 205) 38% 28%), hsl(var(--h, 205) 30% 8%)); }
/* F · bone & ebony: an ivory rim round the ebony back, an ivory dot */
.felt[data-back="F"] .back { background: linear-gradient(180deg, #15171d, #08090c); border-color: rgba(233, 226, 207, .45); box-shadow: inset 0 0 0 calc(var(--bw) * .055) #e9e2cf, inset 0 0 0 calc(var(--bw) * .08) rgba(0, 0, 0, .55), 0 calc(var(--bw) * .08) calc(var(--bw) * .25) rgba(0, 0, 0, .45); }
.felt[data-back="F"] .back::after { content: ""; width: calc(var(--bw) * .12); background: #e9e2cf; border-radius: 50%; box-shadow: 0 0 0 calc(var(--bw) * .02) rgba(0, 0, 0, .5); opacity: 1; }
/* G · borjgali: the Georgian sun in silver */
.felt[data-back="G"] .back::after { content: ""; width: calc(var(--bw) * .66); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='%23d5d6d8'%3E%3Cpath d='M50 50C43.5 37 49 19 65.5 11.5C58.5 21.5 56.5 35.5 50 50Z' transform='rotate(0.0 50 50)'/%3E%3Cpath d='M50 50C43.5 37 49 19 65.5 11.5C58.5 21.5 56.5 35.5 50 50Z' transform='rotate(51.429 50 50)'/%3E%3Cpath d='M50 50C43.5 37 49 19 65.5 11.5C58.5 21.5 56.5 35.5 50 50Z' transform='rotate(102.857 50 50)'/%3E%3Cpath d='M50 50C43.5 37 49 19 65.5 11.5C58.5 21.5 56.5 35.5 50 50Z' transform='rotate(154.286 50 50)'/%3E%3Cpath d='M50 50C43.5 37 49 19 65.5 11.5C58.5 21.5 56.5 35.5 50 50Z' transform='rotate(205.714 50 50)'/%3E%3Cpath d='M50 50C43.5 37 49 19 65.5 11.5C58.5 21.5 56.5 35.5 50 50Z' transform='rotate(257.143 50 50)'/%3E%3Cpath d='M50 50C43.5 37 49 19 65.5 11.5C58.5 21.5 56.5 35.5 50 50Z' transform='rotate(308.571 50 50)'/%3E%3C/g%3E%3Ccircle cx='50' cy='50' r='5.5' fill='%23d5d6d8'/%3E%3C/svg%3E") center / contain no-repeat; border-radius: 0; opacity: .9; }
/* H · guilloche: engraved arcs from both ends (from the sides on a turned tile) */
.felt[data-back="H"] .back { background: repeating-radial-gradient(circle at 50% -10%, transparent 0 calc(var(--bw) * .07), rgba(255, 255, 255, .075) calc(var(--bw) * .07) calc(var(--bw) * .082)), repeating-radial-gradient(circle at 50% 110%, transparent 0 calc(var(--bw) * .07), rgba(255, 255, 255, .075) calc(var(--bw) * .07) calc(var(--bw) * .082)), linear-gradient(180deg, var(--back-a), var(--back-b)); }
.felt[data-back="H"] .backs--col .back { background: repeating-radial-gradient(circle at -10% 50%, transparent 0 calc(var(--bw) * .07), rgba(255, 255, 255, .075) calc(var(--bw) * .07) calc(var(--bw) * .082)), repeating-radial-gradient(circle at 110% 50%, transparent 0 calc(var(--bw) * .07), rgba(255, 255, 255, .075) calc(var(--bw) * .07) calc(var(--bw) * .082)), linear-gradient(90deg, var(--back-a), var(--back-b)); }
/* I · glass: a translucent panel with one highlight */
.felt[data-back="I"] .back { background: linear-gradient(160deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .04) 45%, rgba(255, 255, 255, .02)), #0b0d12; border-color: rgba(255, 255, 255, .28); }
.felt[data-back="I"] .back::before { content: ""; position: absolute; left: 8%; right: 8%; top: 3%; height: 36%; border-radius: calc(var(--bw) * .12) calc(var(--bw) * .12) 50% 50% / calc(var(--bw) * .12) calc(var(--bw) * .12) 18% 18%; background: linear-gradient(180deg, rgba(255, 255, 255, .2), transparent); }
.felt[data-back="H"] .back::after, .felt[data-back="I"] .back::after, .felt[data-back="J"] .back::after { content: none; }
/* K · two halves: a lighter half and a darker half split by a groove */
.felt[data-back="K"] .back { background: linear-gradient(180deg, #1b1e28 0 50%, #0a0b10 50% 100%); }
.felt[data-back="K"] .backs--col .back { background: linear-gradient(90deg, #1b1e28 0 50%, #0a0b10 50% 100%); }
.felt[data-back="K"] .back::after { content: ""; left: 0; right: 0; top: calc(50% - 1px); width: auto; height: 2px; aspect-ratio: auto; transform: none; border-radius: 0; background: rgba(0, 0, 0, .7); box-shadow: 0 1px 0 rgba(255, 255, 255, .08); opacity: 1; }
.felt[data-back="K"] .backs--col .back::after { left: calc(50% - 1px); right: auto; top: 0; bottom: 0; width: 2px; height: auto; }
.back--new { animation: deal .4s var(--ease) both; }

/* the bazaar: one seed, one heap; taken tiles leave the table. The heap
   spreads over whatever room its place on the felt gives it. */
.bazaar { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .35rem; min-width: 0; min-height: 0; }
.heap { --hw: calc(var(--tw) * .8); position: relative; flex: 1 1 auto; width: 100%; min-height: calc(var(--tw) * 2.2); }
.felt[data-n="2"] .bazaar { width: calc(var(--tw) * 5.4); }
.felt[data-n="3"] .bazaar { justify-self: center; width: min(100%, calc(var(--tw) * 13)); height: calc(var(--tw) * 3 + 2rem); }
.felt[data-n="4"] .bazaar { grid-area: auto; grid-row: 1; grid-column: 2 / 4; justify-self: end; width: calc(var(--tw) * 5.6); }
.hslot { --x: 0; --y: 0; --r: 0deg; --z: 0; position: absolute; left: calc(50% + max(0px, 100% - var(--hw) * 1.8) * var(--x) / 82); top: calc(50% + max(0px, 100% - var(--hw) * 2.3) * var(--y) / 72); z-index: var(--z); padding: 0; border: 0; background: none; transform: translate(-50%, -50%) rotate(var(--r)); transition: left .6s var(--ease), top .6s var(--ease), transform .6s var(--ease), opacity .5s var(--ease); cursor: default; }
.hslot .back { --bw: var(--hw); }
.hslot--in { left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(var(--r)) scale(.6); opacity: 0; }
.hslot--gone { transform: translate(calc(-50% + var(--gx, 0px)), calc(-50% + var(--gy, 0px))) rotate(0deg) scale(1.1); opacity: 0; pointer-events: none; }
.heap--pickable .hslot { cursor: pointer; }
.heap--pickable .hslot .back { border-color: var(--lime-line); }
.heap--pickable .hslot:hover, .heap--pickable .hslot:focus-visible { transform: translate(-50%, -58%) rotate(var(--r)) scale(1.06); z-index: 60; }
.heap--pickable .hslot:hover .back, .heap--pickable .hslot:focus-visible .back { border-color: var(--lime); box-shadow: 0 0 calc(var(--hw) * .5) rgba(214, 255, 59, .35); }
.hslot--picked { z-index: 70; transform: translate(-50%, -70%) rotate(0deg) scale(1.15); }
.bazaar__label { margin: 0; display: inline-flex; align-items: baseline; gap: .35rem; padding: .25rem .7rem; border-radius: 999px; background: var(--glass); border: 1px solid var(--line-soft); font-size: .78rem; white-space: nowrap; }
.bazaar__label b { font: 800 .95rem/1 var(--font-display); font-variant-numeric: tabular-nums; }
.bazaar__label small { color: var(--text-3); }
.bazaar--pickable .bazaar__label { background: var(--lime); color: #000; border-color: transparent; }
.bazaar--pickable .bazaar__label small { color: rgba(0, 0, 0, .6); }

.bubble { position: absolute; right: -.3rem; top: -.7rem; z-index: 3; padding: .15rem .55rem; border-radius: 999px; background: var(--panel); border: 1px solid var(--line); font-size: .72rem; color: var(--text-2); white-space: nowrap; animation: pop .25s var(--ease); }
.bubble--knock { color: var(--warn-text); border-color: currentColor; }
.bubble--score { color: var(--accent-text); border-color: var(--lime-line); font-weight: 600; }

.board-wrap { position: relative; min-height: 6rem; border-radius: var(--r-card); background: radial-gradient(60% 55% at 50% 50%, var(--felt-glow), transparent 70%), linear-gradient(160deg, var(--felt-a), var(--felt-b)); border: 1px solid var(--panel-line); box-shadow: var(--shadow); overflow: hidden; isolation: isolate; }
.board { position: absolute; inset: 0; width: 100%; height: 100%; }
.board__chips { position: absolute; left: .8rem; top: .8rem; display: flex; gap: .4rem; flex-wrap: wrap; z-index: 2; }
.chip--count { border-color: var(--lime-line); }
.chip--count.is-five { background: var(--lime); color: #000; border-color: transparent; }

/* tiles on the board (SVG, 1 unit = half a tile) */
.t-body { stroke: var(--tile-edge); stroke-width: .03; }
.t-div { stroke: var(--tile-div); stroke-width: .035; }
.t-pip { fill: var(--pip); }
.t-pin { fill: var(--lime); stroke: var(--pip); stroke-width: .02; }
.t-shadow { fill: rgba(0, 0, 0, .35); }
.t-last .t-body { stroke: var(--lime); stroke-width: .07; }
.t-new { animation: land .35s var(--ease) both; transform-box: fill-box; transform-origin: center; }
.ghost { cursor: pointer; }
.ghost rect { fill: var(--lime-tint); stroke: var(--lime); stroke-width: .05; stroke-dasharray: .16 .1; animation: breathe 1.4s ease-in-out infinite; }
.ghost:hover rect, .ghost:focus-visible rect { fill: rgba(214, 255, 59, .3); }
.ghost:focus { outline: none; }
.board-msg { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0; font-size: .95rem; color: var(--text-3); pointer-events: none; white-space: nowrap; }
.board-msg:empty { display: none; }
/* A player is gone (online, a match in play): at the foot of the line of play,
   "The bot is playing for you" with I'm back, or — two players — "Claim the
   win". Only then does anything sit on the board: it asks for a decision. */
.notice { position: absolute; left: 50%; bottom: .7rem; z-index: 3; transform: translateX(-50%); width: max-content; max-width: calc(100% - 1.2rem); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .45rem .7rem; padding: .5rem .55rem .5rem .9rem; border-radius: var(--r-panel); background: var(--panel); border: 1px solid var(--lime-line); box-shadow: var(--shadow); animation: fade .2s ease-out; }
.notice__text { margin: 0; font-size: .85rem; font-weight: 600; line-height: 1.3; text-align: center; text-wrap: balance; }

/* ------------------------------------------------------------ your seat */
.seat--me { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; grid-template-areas: "cam status hand actions"; align-items: center; gap: .9rem; }
.seat--me .cam { --cw: calc(var(--tw) * 2.3); grid-area: cam; margin-bottom: .6rem; }
.seat--me .status { grid-area: status; width: 8.5rem; }
.seat--me .hand { grid-area: hand; justify-self: center; }
.seat--me .actions { grid-area: actions; flex-direction: column; align-items: stretch; width: 10.5rem; }
/* next to your picture: your score, and whose turn it is (no banner over the line) */
.status { min-width: 0; display: grid; gap: .35rem; align-content: center; justify-items: start; }
.status p { margin: 0; }
.status__score { display: flex; align-items: baseline; gap: .35rem; font-size: .8rem; color: var(--text-2); white-space: nowrap; }
.status__score b { font: 800 1.6rem/1 var(--font-display); letter-spacing: -0.02em; color: var(--text); font-variant-numeric: tabular-nums; }
.status__score small { font-size: .75rem; color: var(--text-3); }
.status__score em { font-style: normal; font-size: .72rem; font-weight: 600; color: var(--accent-text); }
.status__score--goat b { color: var(--danger-text); }
.status__turn { max-width: 100%; padding: .32rem .7rem; border-radius: 999px; background: var(--glass); border: 1px solid var(--line-soft); font-size: .8rem; font-weight: 600; line-height: 1.2; }
.status__turn--you { background: var(--lime); color: #000; border-color: transparent; }
.status__turn--note { border-color: var(--warn-text); color: var(--warn-text); animation: nudge .45s var(--ease); }
.status__away { max-width: 100%; font-size: .72rem; font-weight: 600; line-height: 1.25; color: var(--warn-text); }
/* your time bank for the match (online): amber while it runs */
.status__bank { font-size: .72rem; line-height: 1.2; color: var(--text-3); white-space: nowrap; }
.status__bank b { font: 700 .78rem/1 var(--font-display); font-variant-numeric: tabular-nums; color: var(--text-2); }
.status__bank--on, .status__bank--on b { color: var(--warn-text); }
@keyframes nudge { 0%, 100% { transform: none; } 25% { transform: translateX(-4px); } 50% { transform: translateX(4px); } 75% { transform: translateX(-2px); } }
.hand { display: flex; flex-wrap: wrap; justify-content: center; gap: .45rem; min-height: calc(var(--tw) * 2 + .6rem); padding: .3rem 0 .2rem; }
.htile { position: relative; width: var(--hand-tw, var(--tw)); height: calc(var(--hand-tw, var(--tw)) * 2); padding: 0; border: 0; border-radius: calc(var(--hand-tw, var(--tw)) * .16); background: none; cursor: default; transition: transform .2s var(--ease), opacity .2s, filter .2s; }
.htile svg { display: block; width: 100%; height: 100%; filter: drop-shadow(0 .25rem .5rem rgba(0, 0, 0, .35)); }
.htile--ok { cursor: pointer; }
.htile--ok::after { content: ""; position: absolute; left: 20%; right: 20%; bottom: -.4rem; height: .2rem; border-radius: 1rem; background: var(--lime); }
.htile--ok:hover { transform: translateY(-.35rem); }
.htile--off { opacity: .42; filter: saturate(.6); }
.htile--sel { transform: translateY(-.7rem); }
.htile--sel svg { filter: drop-shadow(0 0 .5rem var(--lime)) drop-shadow(0 .3rem .6rem rgba(0, 0, 0, .4)); }
.htile--new { animation: deal .4s var(--ease) both; }
.actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .6rem 1rem; min-height: 2.5rem; }
/* a switch that reads as a button: auto draw / auto knock */
.toggle { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-height: 2.25rem; padding: 0 .85rem 0 .6rem; border-radius: 999px; border: 1px solid var(--line); background: var(--glass); color: var(--text-2); font: 500 .8rem/1 var(--font-body); white-space: nowrap; cursor: pointer; transition: background-color .2s, color .2s, border-color .2s; }
.toggle i { flex: none; display: grid; place-items: center; width: .95rem; height: .95rem; border-radius: 50%; border: 1.5px solid currentColor; }
.toggle[aria-pressed="true"] { color: var(--text); border-color: var(--lime-line); background: var(--lime-tint); }
.toggle[aria-pressed="true"] i { background: var(--lime); border-color: var(--lime); }
.toggle[aria-pressed="true"] i::after { content: ""; width: .38rem; height: .2rem; border: solid #000; border-width: 0 0 1.6px 1.6px; transform: translateY(-18%) rotate(-45deg); }

/* ----------------------------------------------------------------- sheets */
.sheet { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: max(1rem, env(safe-area-inset-top, 0px)) max(1rem, env(safe-area-inset-right, 0px)) max(1rem, env(safe-area-inset-bottom, 0px)) max(1rem, env(safe-area-inset-left, 0px)); background: var(--sheet-bg); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); animation: fade .2s ease-out; }
.sheet__panel { position: relative; width: min(26rem, 100%); max-height: calc(100dvh - max(1rem, env(safe-area-inset-top, 0px)) - max(1rem, env(safe-area-inset-bottom, 0px))); display: flex; flex-direction: column; gap: .7rem; padding: 1.4rem 1.4rem 1.2rem; border-radius: var(--r-panel); background: var(--panel); border: 1px solid var(--line); box-shadow: 0 2rem 5rem rgba(0, 0, 0, .45); overflow: hidden; }
.sheet__panel--wide { width: min(40rem, 100%); }
.sheet__title { margin: 0; font: 800 1.6rem/1.1 var(--font-display); letter-spacing: -0.02em; text-wrap: balance; }
.sheet__sub { margin: 0; color: var(--text-2); font-size: .95rem; }
.sheet__scroll { overflow: auto; min-height: 0; }
.sheet__actions { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: flex-end; padding-top: .3rem; }
.countdown { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--line-soft); }
.countdown i { display: block; height: 100%; width: 100%; background: var(--lime); transform-origin: left; }

/* The hand's result: compact, so a phone sees the whole of it at once */
.result { gap: .6rem; padding: 1.1rem 1.2rem 1rem; }
.result__head { display: grid; gap: .25rem; }
.result .sheet__title { font-size: 1.4rem; }
.result .sheet__sub { font-size: .88rem; }
.result__hands { display: grid; gap: .3rem; overflow: auto; min-height: 0; }
/* a short screen scrolls the whole result rather than folding the hands away */
#result .sheet__panel { overflow-y: auto; }
#result .sheet__panel > * { flex-shrink: 0; }
.rh { display: grid; grid-template-columns: minmax(5rem, 8rem) minmax(0, 1fr) auto; align-items: center; gap: .6rem; padding: .3rem .6rem; border-radius: .7rem; background: var(--glass); }
.rh .avatar { width: 1.5rem; height: 1.5rem; font-size: .72rem; }
.rh--win { background: var(--lime-tint); }
.rh__who { display: flex; align-items: center; gap: .4rem; min-width: 0; font-size: .84rem; font-weight: 600; }
.rh__who span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rh__tiles { display: flex; flex-wrap: wrap; gap: .25rem; min-width: 0; }
.rh__tiles svg { width: 1.9rem; height: .95rem; }
.rh__pips { font: 700 .9rem/1 var(--font-display); font-variant-numeric: tabular-nums; color: var(--text-2); text-align: right; white-space: nowrap; }
.rh__pips small { margin-left: .2rem; font: 500 .6rem/1 var(--font-body); letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); }
.result__totals { display: flex; flex-wrap: wrap; gap: .4rem; }
.tot { flex: 1 1 6.5rem; display: grid; grid-template-columns: auto 1fr; align-items: baseline; column-gap: .5rem; padding: .4rem .7rem .45rem; border-radius: .75rem; border: 1px solid var(--line-soft); }
.tot__who { grid-column: 1 / -1; font-size: .72rem; color: var(--text-2); }
.tot__n { font: 800 1.25rem/1.1 var(--font-display); font-variant-numeric: tabular-nums; }
.tot__d { font-size: .75rem; font-weight: 600; color: var(--accent-text); text-align: right; white-space: nowrap; }
.tot__d--bad { color: var(--danger-text); }
.tot__bar { grid-column: 1 / -1; height: 3px; margin-top: .3rem; border-radius: 3px; background: var(--line-soft); overflow: hidden; }
.tot__bar i { display: block; height: 100%; background: var(--lime); }
.tot--goat .tot__bar i { background: var(--danger); }
.match-banner { font: 800 clamp(1.6rem, 5vw, 2.4rem)/1 var(--font-display); letter-spacing: -0.03em; }

.scoretable { width: 100%; border-collapse: collapse; font-size: .85rem; font-variant-numeric: tabular-nums; }
.scoretable th, .scoretable td { padding: .45rem .5rem; text-align: right; border-bottom: 1px solid var(--line-soft); white-space: nowrap; }
.scoretable th:first-child, .scoretable td:first-child, .scoretable td.what { text-align: left; }
.scoretable th { position: sticky; top: 0; background: var(--panel); font-weight: 600; color: var(--text-2); }
.scoretable tfoot td { font: 800 1rem/1 var(--font-display); border-bottom: 0; }
.scoretable .plus { color: var(--accent-text); }
.scoretable .minus { color: var(--danger-text); }

.rules__tabs { align-self: flex-start; }
.rules__body { font-size: .92rem; line-height: 1.55; color: var(--text-2); }
.rules__body h3 { margin: .9rem 0 .3rem; font: 700 1rem/1.2 var(--font-display); color: var(--text); }
.rules__body p, .rules__body ul { margin: 0 0 .5rem; }
.rules__body ul { padding-left: 1.1rem; }
.rules__body b { color: var(--text); font-weight: 600; }
.rules__body .term { color: var(--accent-text); }

.toast { position: fixed; left: 50%; bottom: calc(1.2rem + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 60; padding: .65rem 1.05rem; border-radius: .9rem; background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow); font-size: .9rem; max-width: calc(100% - 2rem); }


/* ----------------------------------------------------------------- motion */
@keyframes pop { from { transform: scale(.7); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes land { from { transform: scale(1.35); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes deal { from { transform: translateY(1.2rem); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes breathe { 0%, 100% { opacity: .65; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ------------------------------------------------------------- responsive */
@media (max-width: 720px) {
  .topbar { padding-block: calc(.5rem + env(safe-area-inset-top, 0px)) .5rem; }
  .brand__ka { display: none; }
  .table { gap: .45rem; padding-top: calc(.5rem + env(safe-area-inset-top, 0px)); }
  .table__bar { gap: .45rem; }
  .table__info { gap: .45rem; }
  .table__info b { font-size: 1rem; }
  .table__info span { font-size: .78rem; }
  .table__btns .btn { padding: 0 .7rem; }
  /* phones: the same tile size everywhere; the side players' tiles peek in
     from the screen edges so the board keeps its width */
  .felt { --tw: clamp(2rem, min(11.4vw, 6.2dvh), 2.9rem); gap: .45rem; overflow: hidden; margin-left: calc(-1 * max(16px, 1.5rem, env(safe-area-inset-left, 0px))); margin-right: calc(-1 * max(16px, 1.5rem, env(safe-area-inset-right, 0px))); padding-left: max(16px, 1.5rem, env(safe-area-inset-left, 0px)); padding-right: max(16px, 1.5rem, env(safe-area-inset-right, 0px)); }
  .felt[data-n="2"] { grid-template-areas: "top top baz" "board board board" "me me me"; }
  .felt[data-n="3"] { grid-template-areas: "baz baz baz" "left board right" "me me me"; }
  .felt[data-n="4"] { grid-template-areas: "top top baz" "left board right" "me me me"; }
  .seat--top { justify-content: flex-start; gap: .5rem; }
  .seat--top .cam { --cw: calc(var(--tw) * 1.6); }
  .cam__tag small, .cam__chips .cam__chip:not(.cam__chip--score):not(.cam__chip--away):not(.cam__chip--bot) { display: none; }
  .cam__chip--score { height: 1.35rem; padding: 0 .38rem; font-size: .74rem; }
  .cam__chip--away, .cam__chip--bot { height: 1.1rem; padding: 0 .3rem; font-size: .6rem; }
  /* the side players' pictures are small here: "Bot" only, so the chip stays on the screen */
  .seat--left .cam__more, .seat--right .cam__more { display: none; }
  .cam__tag { font-size: .66rem; padding: .1rem .35rem; }
  .seat--left, .seat--right { width: calc(var(--tw) * 1.05); }
  .seat--left .backs--col { align-self: flex-end; }
  .seat--right .backs--col { align-self: flex-start; }
  .seat--left .cam, .seat--right .cam { --cw: calc(var(--tw) * 1.05); }
  .seat--left .cam__tag, .seat--right .cam__tag, .seat--left .cam__deed, .seat--right .cam__deed { display: none; }
  .seat--me { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "cam status actions" "hand hand hand"; gap: .35rem .6rem; }
  .seat--me .cam { --cw: calc(var(--tw) * 1.6); margin-bottom: .35rem; }
  .seat--me .status { width: auto; }
  .seat--me .actions { flex-direction: column; align-items: flex-end; width: auto; gap: .35rem; }
  .status__score b { font-size: 1.45rem; }
  .felt[data-n="4"] { grid-template-columns: calc(var(--tw) * 1.05) minmax(0, 1fr) calc(var(--tw) * 1.05); grid-template-areas: "top top top" "left board right" "me me me"; }
  .felt[data-n="4"] .bazaar { grid-area: auto; grid-row: 1; grid-column: 2 / 4; justify-self: end; width: calc(var(--tw) * 2.6); }
  .felt--baz[data-n="4"] .seat--top { padding-right: calc(var(--tw) * 2.6 + .45rem); }
  .felt[data-n="2"] .bazaar { width: calc(var(--tw) * 2.6); }
  .felt[data-n="3"] .bazaar { height: calc(var(--tw) * 1.8 + 1.4rem); }
  .heap { --hw: calc(var(--tw) * .5); min-height: calc(var(--tw) * 1.4); }
  .bazaar__label { font-size: .7rem; padding: .15rem .5rem; }
  .notice { bottom: .45rem; max-width: calc(100% - .8rem); gap: .35rem .5rem; padding: .4rem .45rem .4rem .7rem; }
  .notice__text { font-size: .8rem; }
  .hand { gap: .3rem; }
  .rh { grid-template-columns: minmax(4.2rem, 5.5rem) minmax(0, 1fr) auto; gap: .45rem; padding: .3rem .5rem; }
  .rh__tiles svg { width: 1.7rem; height: .85rem; }
  .result { padding: 1rem 1rem .9rem; }
  .tot { flex-basis: 4.2rem; padding: .35rem .55rem .4rem; }
  .tot__n { font-size: 1.1rem; }
  .vcard { min-height: 0; }
  .cta { width: 100%; }
}
@media (max-width: 380px) {
  .felt { --tw: clamp(2rem, min(11.2vw, 6.2dvh), 2.9rem); }
}

/* Phones on their side: height is what is short. The game bar turns into a
   rail of three icons at the left edge (the game and the hand move into its
   menu), so the board runs the full height above your hand; the two-player
   opponent and the bazaar sit beside the board; your picture, score, hand and
   buttons share the bottom row, which tucks a little into the home-indicator
   zone (the pips stay clear of it). Pictures grow so a face shows past its
   badges. Every hand keeps the one tile size, set by the height. */
@media (orientation: landscape) and (max-height: 500px) {
  #app.app--table { max-width: none; }
  .table { grid-template-columns: auto minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); column-gap: .55rem; padding-top: calc(.4rem + env(safe-area-inset-top, 0px)); padding-bottom: max(.35rem, calc(env(safe-area-inset-bottom, 0px) - .5rem)); }
  .table__bar { grid-column: 1; grid-row: 1; flex-direction: column; align-items: center; justify-content: flex-start; gap: .4rem; }
  .table > .felt { grid-column: 2; grid-row: 1; }
  .table__info { display: none; }
  .table__btns { flex-direction: column; gap: .4rem; }
  .icon-btn--bar, .btn--scores { width: 2.25rem; height: 2.25rem; min-height: 0; padding: 0; }
  .btn--scores span { display: none; }
  .btn--scores svg { display: block; }
  .menu { top: 0; left: calc(100% + .45rem); right: auto; transform-origin: top left; }
  .menu__info { display: block; }
  .board-wrap { min-height: 3.5rem; }
  .felt { --tw: clamp(1.75rem, 8.4dvh, 2.6rem); gap: .4rem; overflow: visible; margin: 0; padding: 0; }
  .cam__tag small, .cam__chips .cam__chip:not(.cam__chip--score):not(.cam__chip--away):not(.cam__chip--bot) { display: none; }
  .cam__tag { font-size: .62rem; padding: .08rem .32rem; }
  .cam__chip { height: 1.15rem; padding: 0 .32rem; font-size: .62rem; }
  .cam__chip--score { height: 1.3rem; font-size: .72rem; }
  .cam__deed { top: calc(var(--cw) * -.12); left: calc(var(--cw) * -.28); }
  .cam__chips { top: calc(var(--cw) * -.1); right: calc(var(--cw) * -.28); }
  .seat--top { justify-content: flex-start; gap: .55rem; }
  .seat--top .cam { --cw: calc(var(--tw) * 2); }
  .seat--left, .seat--right { width: calc(var(--tw) * 2.3); gap: .35rem; }
  .seat--left .backs--col, .seat--right .backs--col { align-self: center; }
  .seat--left .cam, .seat--right .cam { --cw: calc(var(--tw) * 1.9); margin-bottom: .15rem; }
  .seat--left .cam__tag, .seat--right .cam__tag, .seat--left .cam__deed, .seat--right .cam__deed { display: inline-flex; }
  .felt[data-n="2"] { grid-template-columns: minmax(0, 1fr) calc(var(--tw) * 7.5); grid-template-rows: auto minmax(0, 1fr) auto; grid-template-areas: "board top" "board baz" "me me"; }
  .felt[data-n="2"] .seat--top { padding-left: calc(var(--tw) * .45); }
  .felt[data-n="2"] .bazaar { width: auto; justify-self: stretch; }
  .felt[data-n="3"] { grid-template-columns: auto minmax(0, 1fr) auto calc(var(--tw) * 3.4); grid-template-rows: minmax(0, 1fr) auto; grid-template-areas: "left board right baz" "me me me me"; }
  .felt[data-n="3"] .bazaar { width: auto; height: auto; justify-self: stretch; }
  .felt[data-n="4"] { grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-rows: auto minmax(0, 1fr) auto; grid-template-areas: "left top baz right" "left board board right" "me me me me"; }
  .felt[data-n="4"] .bazaar { grid-area: baz; justify-self: stretch; width: calc(var(--tw) * 5); }
  .felt--baz[data-n="4"] .seat--top { padding-right: 0; }
  .felt[data-n="4"] .seat--top { justify-content: center; }   /* clear of the left player's picture and chips */
  .heap { --hw: calc(var(--tw) * .55); min-height: calc(var(--tw) * 1.3); }
  .bazaar__label { font-size: .7rem; padding: .15rem .5rem; }
  .seat--me { grid-template-columns: auto auto minmax(0, 1fr) auto; grid-template-areas: "cam status hand actions"; gap: .6rem; }
  .seat--me .cam { --cw: calc(var(--tw) * 2.1); margin: 0 0 0 calc(var(--tw) * .3); }
  .cam--me .cam__tag { display: none; }
  .seat--me .status { width: 6.5rem; }
  .status__score b { font-size: 1.3rem; }
  .status__turn { font-size: .74rem; padding: .25rem .6rem; }
  .seat--me .actions { flex-direction: column; align-items: stretch; width: auto; max-width: 7.5rem; gap: .35rem; }
  .actions .btn { min-height: 2.25rem; }
  .hand { gap: .3rem; min-height: calc(var(--tw) * 2 + .45rem); padding: .3rem 0 .15rem; }
  /* the hand's result in two columns: what happened and the totals left, everyone's tiles right */
  .result { width: min(48rem, 100%); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); grid-template-rows: auto minmax(0, 1fr) auto; grid-template-areas: "head hands" ". hands" "actions totals"; gap: .45rem 1rem; padding: .8rem 1rem .75rem; }
  .result__hands { gap: .25rem; }
  .rh { padding: .22rem .5rem; }
  .result__head { grid-area: head; }
  .result__hands { grid-area: hands; align-self: start; }
  .result__totals { grid-area: totals; }
  .tot { flex-basis: 4.2rem; padding: .35rem .55rem .4rem; }
  .tot__n { font-size: 1.1rem; }
  .result #result-actions { grid-area: actions; align-self: end; justify-content: flex-start; }
  .result .sheet__title { font-size: 1.15rem; }
  .result .sheet__sub { font-size: .8rem; }
  .match-banner { font-size: 1.5rem; }
}
/* the shortest screens (an older 360 × 640 phone with its bars): the result tightens once more */
@media (max-height: 560px) {
  .result { gap: .4rem; padding-block: .7rem .65rem; }
  .result .label { font-size: .68rem; }
  .result .sheet__title { font-size: 1.1rem; }
  .result .sheet__sub { font-size: .78rem; line-height: 1.35; }
  .result__hands { gap: .2rem; }
  .rh { padding: .18rem .5rem; }
  .result .btn { min-height: 2.4rem; }
}