/* MDR Mahjong — the one stylesheet.
   The parts of the screen follow the sets of the series:
     the page     the green carpet of the refiners' office, laid in squares
     the table    a refiner's terminal: a dark screen of faint numbers in a
                  pale plastic case. On it, a row for each of the other three
                  players (a staff badge, and a bin for the tiles they have
                  shown) and the tally of every tile thrown away
     the dock     the terminal's keyboard: a cream tray holding a dark blue
                  plate. Your badge, your tiles, and a key for each thing
                  you can do
     pop-ups      company paperwork: the logo, a small heading line, thin rules
   Everything on the screen is sized in "em" from one number, the width of a
   tile in the tally, which js/ui.js sets so that the screen always fits. */

:root {
  --ink: #262c3a;
  --paper: #f3f4f1;
  --white: #ffffff;
  /* The main colour: the blue the owner chose for the poker game on 2026-10-11, #03468b, with a darker one for the edge
     under a key. It replaced a brighter company blue: #0b47e6 and #08329f here, the same two as BLUE and DEEP_BLUE in
     js/art.js, and rgba(11, 71, 230, 0.2) in the focus rule for the typing boxes, would put that back. */
  --blue: #03468b;
  --blue-d: #022f5f;
  --green: #2f8a57;
  --green-d: #236a42;
  --navy: #2d3546;
  --navy-d: #171c27;
  /* On trial in the poker game since 2026-10-11, and brought here with it: a brick red and a paler carpet, both from
     the web page the owner takes colours from. To put the red back: #e8371b here and RED in js/art.js. To put the
     carpet back: --carpet #4c7d5c and --on-carpet #ffffff. */
  --red: #993129;
  --carpet: #7da17e;        /* the page */
  --on-carpet: #262c3a;     /* the line of words at the top, which sits straight on it: dark on this paler green, white on the old one */
  --mint: #abffe9;          /* the glow of the terminal's numbers */
  --mint-pale: #e3fff8;
  --glass: #04141d;         /* the screen */
  /* A seat whose turn it is, or that has won, pulses: its badge fades to one of these and back. */
  --turn: #b4c3d3;
  --won: #b5f7e6;
  --pulse: 2.6s;            /* one slow breath */
  /* The keyboard: a cream tray holding a dark blue plate, with key caps in three blues. */
  --rim: 6px;               /* how much of the tray shows round the plate */
  --plate: #17406a;
  --plate-d: #113457;
  --well: #0b2644;          /* anything sunk into the plate */
  --key-navy: #20468f;      /* the dark keys */
  --key-navy-d: #112858;
  --key-blue: #2f7ad6;      /* the mid keys */
  --key-blue-d: #1a4f9a;
  --key-cyan: #1c97d1;      /* the bright keys */
  --key-cyan-d: #0f6a99;
  --legend: #ffffff;        /* the lettering on every key, and every other word on the plate */
  --case: #e9e6dc;          /* terminal plastic */
  --case-d: #bdb9ac;
  --edge: #cfd3d6;
  --lip: rgba(10, 16, 22, 0.28);
  --font: "Helvetica Neue", Helvetica, "Forma DJR", Arial, "Segoe UI", system-ui, sans-serif;
  --display: "Michroma", "Eurostile Extended", "Eurostile", "Microgramma", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "IBM Plex Mono", "Input Mono", "SF Mono", Menlo, Consolas, "Courier New", monospace;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  font-family: var(--font);
  font-weight: 500;
  color: var(--ink);
  /* carpet, laid in squares */
  background-color: var(--carpet);
  background-image: linear-gradient(rgba(0, 0, 0, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 0, 0, 0.06) 1px, transparent 1px);
  background-size: 64px 64px;
}

button { font: inherit; color: inherit; cursor: pointer; }
button:disabled { cursor: default; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.dock :focus-visible { outline-color: #fff; }
svg { display: block; }
[hidden] { display: none !important; }
/* text boxes can be selected and typed in, unlike the rest of the page */
input { font: inherit; color: inherit; -webkit-user-select: text; user-select: text; }

/* Text drawn inside SVG artwork */
.t-text { font-family: var(--font); font-weight: 500; }
.t-mono { font-family: var(--mono); font-weight: 600; }

/* --- lettering ---------------------------------------------------------
   Labels, buttons and pills are in Capital Case. A few are in ALL CAPITALS:
   the start screen's buttons, the deal button and the names of the card's
   families. Whole sentences, the artwork and anything a player types are
   left as written. */
body, button { text-transform: capitalize; }            /* buttons do not inherit it by themselves */
svg, input, p, .say, .how, .toast, .feed, .chat-log, .menu-list .btn small, .card-note, .mdr { text-transform: none; }

/* ------------------------------------------------------------------ */
/* overall layout: bar, table, dock                                    */
/* ------------------------------------------------------------------ */

.app {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  padding-top: max(8px, env(safe-area-inset-top));
  padding-bottom: max(13px, calc(env(safe-area-inset-bottom) + 5px));       /* 8px, and the dock's skirt */
  padding-left: max(8px, env(safe-area-inset-left));
  padding-right: max(8px, env(safe-area-inset-right));
  font-size: 16px;
}

.bar { flex: none; display: flex; align-items: center; gap: 8px; min-height: 40px; }
.logo { flex: none; width: 150px; border-radius: 3px; overflow: hidden; box-shadow: 0 3px 0 var(--lip); }
.logo-svg { width: 100%; height: auto; }
.info { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; gap: 2px 12px; overflow: hidden; color: var(--on-carpet); font-family: var(--mono); font-weight: 500; font-size: 0.8em; line-height: 1.15; letter-spacing: 0.02em; text-transform: uppercase; }
.info span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.info b { font-weight: 700; }
.info .dim { opacity: 0.75; }
.bar-btns { display: flex; gap: 6px; margin-left: auto; flex: none; }
.icon-btn {
  position: relative;
  width: 2.5em;
  height: 2.5em;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.28);
  font-weight: 700;
  font-size: 1em;
}
.icon-btn svg { width: 58%; height: 58%; }
.icon-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.28); }
.icon-btn.off { opacity: 0.55; }
.icon-btn.pill { width: auto; padding: 0 0.75em; display: flex; gap: 0.35em; font-family: var(--mono); letter-spacing: 0.12em; }
.icon-btn.pill svg { width: 1.3em; height: 1.3em; color: var(--blue); }
.icon-btn.word { width: auto; padding: 0 0.8em; font-size: 0.82em; letter-spacing: 0.08em; height: 3.05em; }
/* the count of unread lines on the chat button */
.count { position: absolute; top: -0.35em; right: -0.35em; min-width: 1.55em; height: 1.55em; padding: 0 0.3em; border-radius: 999px; background: var(--red); color: #fff; font-family: var(--mono); font-style: normal; font-weight: 700; font-size: 0.62em; display: grid; place-items: center; }

.table-wrap { position: relative; flex: 1 1 0; min-height: 0; min-width: 0; display: grid; place-items: center; }

/* ------------------------------------------------------------------ */
/* tiles                                                               */
/* ------------------------------------------------------------------ */

/* A tile is its face (an SVG from js/art.js) and, under it, its side: a hard edge that is part of the tile when rows are spaced. */
.tile {
  position: relative;
  display: block;
  flex: none;
  aspect-ratio: 120 / 160;
  padding: 0;
  border: 0;
  border-radius: 9.2% / 6.9%;
  background: none;
  box-shadow: 0 var(--side, 2px) 0 #a9a598, 0 calc(var(--side, 2px) + 2px) 4px rgba(0, 0, 0, 0.35);
}
.tile svg { width: 100%; height: 100%; }

/* ------------------------------------------------------------------ */
/* the table: a terminal screen in its case                            */
/* ------------------------------------------------------------------ */

.table { font-size: 28px; }                                  /* the width of a tile in the tally; set by js/ui.js */
.case {
  position: relative;
  margin-bottom: 0.14em;                                     /* its skirt */
  padding: 0.34em;
  border-radius: 0.95em;
  background: var(--case);
  box-shadow: inset 0 0 0 1px #d6d2c5, inset 0 0.06em 0 rgba(255, 255, 255, 0.6), 0 0.14em 0 var(--case-d), 0 0.5em 0.9em rgba(0, 0, 0, 0.3);
}
.screen {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 0.25em;
  grid-template-columns: 10.44em;
  grid-template-rows: 0.5em 4.3em calc(4 * var(--show, 1.3334em) + 1.4em) 0.8em;      /* the tally: four rows of tile, mark and gap */
  grid-template-areas: "head" "seats" "tally" "banner";
  padding: 0.4em 0.45em 0.45em;
  border-radius: 0.66em;
  background:
    repeating-linear-gradient(0deg, rgba(171, 255, 233, 0.04) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at 50% 45%, #0b2c38 0%, #05171f 58%, #020b11 100%);
  box-shadow: inset 0 0 1.4em rgba(0, 0, 0, 0.7), inset 0 0 0 max(1px, 0.05em) rgba(171, 255, 233, 0.16), 0 0 0 0.14em #0d1c24;
}
/* On a wide screen the three players are a column beside the tally. --left is how wide that column is. */
.table.wide .screen {
  grid-template-columns: var(--left, 14em) 10.44em;
  grid-template-rows: 0.5em 6.73em 0.9em;
  grid-template-areas: "head head" "seats tally" "seats banner";
  column-gap: 0.6em;
}
.screen > * { position: relative; z-index: 1; min-width: 0; min-height: 0; }

/* (There is no company mark on the screen: the owner had it taken off, because it made the tiles of the tally hard to read.) */

/* The numbers on the screen (js/screen.js): real numbers laid over it in squares. They are small, and all at 5%:
   the owner asked for both, so that they never get in the way of the tiles. The ones near the pointer stir (they
   are moved about a pixel at a time, and marked .near), but they do not brighten. */
.nums { position: absolute; z-index: 0; inset: 0; overflow: hidden; display: grid; grid-template-columns: repeat(var(--cols, 11), 1fr); grid-auto-rows: var(--cell, 30px); place-items: center; font-family: Menlo, Consolas, "Courier New", monospace; font-size: max(7px, 0.27em); line-height: 1; color: var(--mint); pointer-events: none; }
.nums i { font-style: normal; opacity: 0.05; }                             /* every number, always: the ones that stir are no brighter */
.nums i.b { font-size: 1.3em; }

.scr-head { grid-area: head; display: flex; align-items: center; justify-content: space-between; font-family: var(--mono); font-weight: 500; font-size: max(8.5px, 0.34em); letter-spacing: 0.14em; text-transform: uppercase; color: rgba(171, 255, 233, 0.85); white-space: nowrap; }

/* --- the other three players: a staff badge and a bin each --- */
.seats { grid-area: seats; display: grid; grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 0.2em; }
.seat { position: relative; display: grid; grid-template-columns: 2.7em minmax(0, 1fr); gap: 0.22em; padding-bottom: 0.1em; }   /* the padding is room for the badge's hard shadow */
.badge {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: 0.16em;
  padding: 0 0.12em 0.12em 0.14em;
  border-radius: 0.16em;
  background: #fff;
  box-shadow: inset 0 -0.12em 0 var(--blue), 0 0.1em 0 rgba(0, 0, 0, 0.35);
  overflow: hidden;
  line-height: 1.08;
}
.badge .avatar { width: 0.86em; height: 0.86em; }
.badge .txt { min-width: 0; display: grid; }
/* A badge's initials always fit: js/ui.js says how many letters there are (--len, counting the East key as nearly two),
   and a line too long for the badge is set smaller by exactly as much as it needs. */
.badge .who { font-size: min(max(9px, 0.42em), calc(2.05em / var(--len, 3))); font-weight: 700; letter-spacing: 0.06em; white-space: nowrap; overflow: hidden; }
.badge .pts { font-family: var(--mono); font-weight: 500; font-size: max(8px, 0.34em); color: #4b5567; white-space: nowrap; }
.badge .pts.away { color: var(--red); }
.seat.away .avatar { filter: grayscale(1); opacity: 0.55; }
/* A dead hand: its player has shown groups that fit no hand on the card and plays no more this hand. */
.badge .pts.dead { color: var(--red); }
.seat.dead .avatar, .me.dead .avatar { filter: grayscale(1); opacity: 0.55; }
.meld.dead { opacity: 0.45; }
/* East this hand: a small key cap in the company blue */
.east { display: inline-grid; place-items: center; width: 1.25em; height: 1.25em; margin-left: 0.3em; border-radius: 0.25em; background: var(--blue); color: #fff; font-family: var(--font); font-style: normal; font-weight: 700; font-size: 0.8em; letter-spacing: 0; line-height: 1; vertical-align: 0.08em; box-shadow: 0 0.12em 0 var(--blue-d); }
/* A seat whose turn it is, or that has won, has no outline: its badge pulses, softly and slowly, fading to a tint
   and back (grey-blue for a turn, mint for a win). Where a device asks for less motion the badge holds the tint. */
.seat.turn .badge { animation: seat-turn var(--pulse) ease-in-out infinite; }
.seat.winner .badge { box-shadow: inset 0 -0.12em 0 var(--green), 0 0.1em 0 rgba(0, 0, 0, 0.35); animation: seat-won var(--pulse) ease-in-out infinite; }
@keyframes seat-turn { 50% { background-color: var(--turn); } }
@keyframes seat-won { 50% { background-color: var(--won); } }
/* the turn clock: a bar along the foot of the badge */
.clock { position: absolute; left: 0; bottom: 0; height: 0.12em; width: 100%; background: var(--red); transform-origin: 0 50%; animation: clock linear forwards; }
@keyframes clock { from { transform: scaleX(var(--from, 1)); } to { transform: scaleX(0); } }

/* a bin: a clean dark box with a mint hairline, as on a refiner's screen */
.bin { display: flex; align-items: center; gap: 0.22em; padding: 0 0.16em; border-radius: 0.1em; background: rgba(3, 16, 23, 0.82); box-shadow: inset 0 0 0 max(1px, 0.04em) rgba(171, 255, 233, 0.42); overflow: hidden; }
.meld { display: flex; gap: 0.05em; flex: none; }
.bin .tile { width: var(--mt, 0.7em); --side: max(1px, 0.05em); }
/* what a player has just done ("Pung", "Mahjong"), at the end of their bin for a moment */
.seat-say { position: absolute; z-index: 3; right: 0.4em; top: 0; transform: translateY(-30%); padding: 0.14em 0.6em; border-radius: 0.12em; background: var(--blue); color: #fff; font-family: var(--mono); font-weight: 700; font-size: max(8.5px, 0.34em); letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; animation: say-in 0.2s ease-out; pointer-events: none; }
.seat-say.win { background: var(--mint); color: var(--ink); }
.seat-say:empty { display: none; }
@keyframes say-in { from { opacity: 0; transform: translateY(10%); } }
/* on a wide screen the rows are taller: a bigger picture, bigger tiles */
.table.wide .seat { grid-template-columns: 3.6em minmax(0, 1fr); gap: 0.3em; }
.table.wide .badge { column-gap: 0.24em; padding: 0 0.2em 0.12em 0.22em; }
.table.wide .badge .avatar { width: 1.3em; height: 1.3em; }
.table.wide .badge .who { font-size: min(max(10px, 0.5em), calc(2.4em / var(--len, 3))); }
.table.wide .badge .pts { font-size: max(9px, 0.4em); }
.table.wide .bin { padding: 0 0.3em; gap: 0.12em 0.34em; flex-wrap: wrap; align-content: center; }
.table.wide .bin .tile { width: var(--mt, 1.1em); }

/* --- the tally: one place for each kind of tile, with a mark for each one thrown away ---
   The tiles stand in four troughs, a suit to a row. Where the screen is short of height (a phone with its
   browser's bars showing) they stand lower in them: --show, set by js/ui.js, is how much of each tile is
   above the edge, from the whole tile down to its number and the top of its device. */
.tally { grid-area: tally; display: grid; grid-template-columns: repeat(9, 1em); column-gap: 0.18em; row-gap: 0.2em; align-content: start; }
.cell { display: grid; gap: 0.1em; justify-items: center; }
.cell .tile { width: 1em; height: var(--show, 1.3334em); aspect-ratio: auto; overflow: hidden; --side: max(1px, 0.06em); transition: opacity 0.3s; }
.cell .tile svg { width: 1em; height: 1.3334em; }
.cell.none .tile { opacity: 0.28; box-shadow: none; }
.cell.spent .tile { opacity: 0.5; }                                         /* every one of them is gone */
.cell.last .tile { box-shadow: 0 0 0 max(1.5px, 0.07em) var(--mint), 0 0 0.5em rgba(171, 255, 233, 0.65); }   /* the latest throw */
.pips { display: flex; gap: 0.06em; height: 0.1em; }
.pips b { width: 0.2em; height: 0.1em; background: rgba(171, 255, 233, 0.2); }
.pips b.on { background: var(--mint); }
.pips.eight { gap: 0.03em; }
.pips.eight b { width: 0.098em; }

/* the line under the tally: what has just happened, or what the table is waiting for */
.banner { grid-area: banner; display: grid; place-items: center; font-family: var(--mono); font-weight: 500; font-size: min(max(9.5px, 0.38em), calc(10.2em / (var(--len, 20) * 0.74))); letter-spacing: 0.12em; text-transform: uppercase; color: rgba(171, 255, 233, 0.85); white-space: nowrap; overflow: hidden; }
.banner b { font-weight: 700; color: var(--mint-pale); }

/* ------------------------------------------------------------------ */
/* your seat and your keys: the keyboard                               */
/* ------------------------------------------------------------------ */

/* The dock is the refiners' keyboard as it is in the series: a cream tray (the rim round the edge, and the skirt
   underneath) holding a dark blue plate, with key caps and white legends. Sunk into the plate: your badge, the
   bin for the tiles you have shown, the rack of your own tiles, and the box for a message to the table. Every
   word on the plate is white. The dock keeps one height whatever it shows, so the table above never jumps. */
.dock {
  position: relative;
  isolation: isolate;
  flex: none;
  display: grid;
  grid-template-columns: 208px minmax(0, 1fr);
  grid-template-areas: "me rack" "melds rack" "say say" "keys keys";
  gap: 8px;
  padding: calc(8px + var(--rim)) calc(12px + var(--rim));
  border-radius: 12px;
  background: var(--case);
  box-shadow: inset 0 0 0 1px #d6d2c5, inset 0 2px 0 rgba(255, 255, 255, 0.6), 0 5px 0 var(--case-d);
}
.dock::before { content: ""; position: absolute; z-index: -1; inset: var(--rim); border-radius: 7px; background: linear-gradient(180deg, #194470, var(--plate) 40%, var(--plate-d)); box-shadow: inset 0 0 0 1px rgba(4, 18, 36, 0.55), inset 0 2px 5px rgba(4, 18, 36, 0.5), 0 1px 0 rgba(255, 255, 255, 0.75); }
/* On a wide screen there is bare plate beside the keys, and the company's mark is pressed into it, as on the real keyboard. */
.plate-mark { display: none; position: absolute; z-index: -1; right: calc(var(--rim) + 24px); bottom: calc(var(--rim) + 20px); width: 88px; color: #0c2b4b; filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.13)); pointer-events: none; }
.plate-mark svg { width: 100%; height: auto; }
@media (min-width: 1180px) { .app:not(.short) .plate-mark { display: block; } }

.me { grid-area: me; position: relative; display: flex; align-items: center; gap: 8px; min-width: 0; height: 44px; padding: 0 12px 4px 10px; border-radius: 6px; background: rgba(6, 22, 44, 0.5); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), inset 0 2px 3px rgba(2, 10, 22, 0.55), inset 0 -4px 0 var(--key-cyan); color: var(--legend); overflow: hidden; }
.me .avatar { flex: none; width: 26px; height: 26px; }
.me .who { font-weight: 700; letter-spacing: 0.06em; white-space: nowrap; }
.me .pts { margin-left: auto; font-family: var(--mono); font-weight: 600; white-space: nowrap; }
.me .clock { bottom: 4px; height: 4px; }
/* Your own badge has no outline either: on your turn it pulses to the bright keys' blue, on a win to mint. */
.me.turn { animation: me-turn var(--pulse) ease-in-out infinite; }
.me.winner { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), inset 0 2px 3px rgba(2, 10, 22, 0.55), inset 0 -4px 0 var(--mint); animation: me-won var(--pulse) ease-in-out infinite; }
@keyframes me-turn { 50% { background-color: rgba(28, 151, 209, 0.62); } }
@keyframes me-won { 50% { background-color: rgba(120, 222, 196, 0.5); } }

/* sunk into the plate */
.well { border-radius: 6px; background: rgba(6, 22, 44, 0.5); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), inset 0 2px 3px rgba(2, 10, 22, 0.55); }
.my-melds { grid-area: melds; display: flex; align-items: center; gap: 6px; min-width: 0; height: 44px; padding: 0 8px 2px; overflow: hidden; }
.my-melds .tile { width: var(--mt, 24px); --side: 2px; }
.my-melds:empty::before { content: "No Tiles Shown"; width: 100%; text-align: center; font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255, 255, 255, 0.4); }

/* the rack: your own tiles. One row on a wide screen; two rows of seven on a phone, so that a finger can find one. */
.rack { grid-area: rack; display: flex; align-items: center; justify-content: center; gap: 5px; min-width: 0; padding: 9px 10px 12px; }
.rack .tile { width: var(--rt, 56px); --side: 3px; cursor: pointer; transition: transform 0.12s ease-out; }
.rack .tile.up { transform: translateY(-9px); }
.rack .tile.drawn { margin-left: 10px; }                                    /* the tile just drawn sits a little apart */
.rack .tile.new::after { content: ""; position: absolute; left: 20%; right: 20%; bottom: -8px; height: 2px; background: var(--mint); }   /* tiles that have just come to you */
.rack .tile:disabled { cursor: default; }
.rack .tile.in { animation: tile-in 0.28s cubic-bezier(0.2, 0.9, 0.3, 1) backwards; }
@keyframes tile-in { from { opacity: 0; transform: translateY(-40%); } }
.rack { min-height: calc(var(--rt, 56px) * 1.3334 + 24px); }
.rack .gap { display: none; aspect-ratio: 120 / 160; }                           /* empty places: only where the rack is a grid */

/* the line of text: about you and the table, never about whose turn it is */
.say { grid-area: say; height: 30px; display: flex; align-items: center; justify-content: center; gap: 0 0.5em; flex-wrap: wrap; padding: 0 4px; color: var(--legend); font-size: 1.05em; font-weight: 500; line-height: 1.15; text-align: center; overflow: hidden; }
.say b { font-weight: 700; }

/* the row of keys, or (off your turn) the box for a message to the table */
.keys { grid-area: keys; display: flex; align-items: flex-start; justify-content: center; gap: 8px; height: 51px; }
.keys > * { max-width: 300px; }
.keys .quick-chat { max-width: 520px; }

/* The keys. Each is a cap seen from just above: a top face that catches the light, sloping sides (the frame
   round the face, deeper along the bottom), and under it the front of the cap, which is the skirt every row
   leaves room for. --bg is the face's colour and --lipc the front's. */
.key {
  --bg: var(--key-navy);
  --lipc: var(--key-navy-d);
  flex: 1 1 0;
  min-width: 0;
  height: 46px;
  display: grid;
  place-items: center;
  padding: 0 0.3em;
  border: solid transparent;
  border-width: 2px 3px 4px;
  border-radius: 7px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0) 72%) padding-box,
    linear-gradient(var(--bg), var(--bg)) padding-box,
    linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(2, 12, 30, 0.34)) border-box,
    var(--bg);
  color: var(--legend);
  font-weight: 700;
  font-size: 1.02em;
  line-height: 1.05;
  white-space: nowrap;
  text-shadow: 0 1px 1px rgba(4, 24, 54, 0.5);
  box-shadow: 0 5px 0 var(--lipc), 0 7px 5px rgba(2, 12, 28, 0.45);
  transition: transform 0.06s, box-shadow 0.06s, opacity 0.15s;
}
.key.mid { --bg: var(--key-blue); --lipc: var(--key-blue-d); }
.key.bright { --bg: var(--key-cyan); --lipc: var(--key-cyan-d); }
.key small { display: block; font-family: var(--mono); font-weight: 600; font-size: 0.66em; letter-spacing: 0.04em; }
.key:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 1px 0 var(--lipc); }
.key:disabled { opacity: 0.38; }
.quick-chat { flex: 1 1 auto; min-width: 0; height: 36px; margin-top: 5px; padding: 0 0.9em; border: 0; border-radius: 6px; background: var(--well); box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.6), 0 1px 0 rgba(255, 255, 255, 0.14); color: var(--legend); font-weight: 500; font-size: 0.95em; }
.quick-chat::placeholder { color: rgba(255, 255, 255, 0.62); }
.quick-chat:focus { outline: none; box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.6), 0 0 0 2px var(--key-cyan); }

/* --- a phone held upright --- */
.app.narrow .bar { min-height: 36px; gap: 5px; }
.app.narrow .logo { width: 104px; }
.app.narrow.playing .logo { display: none; }                                /* no room for it beside the room code and buttons */
.app.narrow .info { font-size: 0.72em; flex-direction: column; flex-wrap: nowrap; gap: 0; }
.app.narrow .icon-btn { width: 2.25em; height: 2.25em; }
.app.narrow .icon-btn.pill { width: auto; padding: 0 0.5em; letter-spacing: 0.06em; }
.app.narrow .icon-btn.pill svg { display: none; }
.app.narrow .bar-btns { gap: 4px; }
.app.narrow #btnCard, .app.narrow.playing #btnHelp { display: none; }       /* the card is the drawer under the keyboard; help is in the menu */
.app.narrow .dock { grid-template-columns: 112px minmax(0, 1fr); grid-template-areas: "me melds" "rack rack" "say say" "keys keys" "handle handle"; gap: 7px; padding: calc(7px + var(--rim)) calc(7px + var(--rim)) 0; border-radius: 10px; }
.app.narrow .dock::before { bottom: 28px; }                                 /* the plate stops at the handle, which is the front of the tray */
.app.narrow .me { height: 36px; gap: 5px; padding: 0 7px 4px 6px; font-size: 0.82em; }
.app.narrow .me .avatar { width: 17px; height: 17px; }
.app.narrow .my-melds { height: 36px; gap: 4px; padding: 0 5px 2px; }
.app.narrow .my-melds .tile { width: var(--mt, 17px); --side: 1.5px; }
.app.narrow .my-melds:empty::before { font-size: 8.5px; }
.app.narrow .rack { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 9px 5px; padding: 7px 6px 10px; }
.app.narrow .rack { min-height: 0; }
.app.narrow .rack .tile, .app.narrow .rack .gap { display: block; width: 100%; }
.app.narrow .rack .tile.drawn { margin-left: 0; }
.app.narrow .say { height: 34px; min-height: 0; font-size: 0.88em; }       /* room for two lines, used or not */
.app.narrow .keys { gap: 6px; }
.app.narrow .key { font-size: 0.95em; }

/* --- a phone that is short of height (most phones, while the browser's own bars are showing): the keyboard is a
   little more compact, to leave the screen what room there is. Every row keeps a fixed height, as above. --- */
.app.narrow.low .dock { gap: 6px; padding-top: calc(6px + var(--rim)); }
.app.narrow.low .me, .app.narrow.low .my-melds { height: 30px; }
.app.narrow.low .rack { grid-template-columns: repeat(7, 36px); justify-content: center; gap: 8px 6px; padding: 6px 6px 9px; }
.app.narrow.low .say { height: 32px; font-size: 0.84em; }
.app.narrow.low .keys { height: 47px; }
.app.narrow.low .key { height: 42px; }
.app.narrow.low .quick-chat { height: 34px; margin-top: 4px; }
.app.narrow.low .card-toggle { height: 26px; }
.app.narrow.low .dock::before { bottom: 26px; }

/* the smallest phones: the keys' lettering a size smaller, so that "Swap Joker" fits its key */
@media (max-width: 350px) { .app.narrow .key { font-size: 0.8em; } .app.narrow .say { font-size: 0.8em; } }
/* Five keys in the row (a throw that could be called three ways and is mahjong as well: rare): smaller lettering and
   less padding, so that each word stays on its key. */
.app.narrow .keys .key:first-child:nth-last-child(n+5), .app.narrow .keys .key:first-child:nth-last-child(n+5) ~ .key { font-size: 0.72em; padding-left: 3px; padding-right: 3px; }
@media (max-width: 350px) { .app.narrow .keys .key:first-child:nth-last-child(n+5), .app.narrow .keys .key:first-child:nth-last-child(n+5) ~ .key { font-size: 0.56em; } }

/* --- a phone on its side: everything a size smaller --- */
.app.short { --rim: 4px; }
.app.short .bar { min-height: 32px; }
.app.short .logo { width: 96px; }
.app.short .icon-btn { width: 2.1em; height: 2.1em; }
.app.short .icon-btn.word { width: auto; height: 2.56em; }
.app.short .dock { grid-template-columns: 150px minmax(0, 1fr) minmax(0, 1.2fr); grid-template-areas: "me rack rack" "melds rack rack" "say say keys"; gap: 5px 8px; padding: calc(5px + var(--rim)) calc(8px + var(--rim)); }
.app.short .me, .app.short .my-melds { height: 30px; font-size: 0.8em; }
.app.short .me .avatar { width: 17px; height: 17px; }
.app.short .my-melds .tile { width: var(--mt, 15px); --side: 1.5px; }
.app.short .rack { padding: 6px 8px 8px; gap: 4px; }
.app.short .rack .tile { --side: 2px; }
.app.short .say { font-size: 0.85em; height: auto; }
.app.short .keys { height: 43px; }
.app.short .key { height: 38px; font-size: 0.9em; }
.app.short .quick-chat { height: 32px; margin-top: 3px; }

/* ------------------------------------------------------------------ */
/* the card                                                            */
/* ------------------------------------------------------------------ */

/* The hands that win, family by family, as on the card every American player holds. Each hand is a line of
   mono lettering; the three colours mark the suits within one hand (any suit may be any colour). With the guide
   on, each line has a bar that fills as your tiles come nearer to it, as a file fills as it is refined. */
.card { display: grid; gap: 12px; text-align: left; }
.card-note { margin: 0; font-size: 0.78em; line-height: 1.35; }
.card section { display: grid; gap: 5px; }
.card h3 { margin: 0; display: flex; align-items: baseline; gap: 0.8em; font-size: 0.72em; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }
.card h3 small { font-weight: 500; letter-spacing: 0.04em; text-transform: none; opacity: 0.75; }
.card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.card li { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 0 0.7em; padding: 0.34em 0.6em 0.42em; border-radius: 2px; background: #fff; box-shadow: inset 0 0 0 1px var(--edge); overflow: hidden; }
.card .pat { font-family: var(--mono); font-weight: 600; font-size: 0.92em; letter-spacing: 0.02em; white-space: nowrap; overflow: hidden; }
.card .pat span { margin-right: 0.5em; }
.card .pat i { font-style: normal; }
.card .pat .a { color: var(--blue); }
.card .pat .b { color: var(--green-d); }
.card .pat .c { color: var(--red); }
.card .what { grid-column: 1; font-size: 0.66em; font-weight: 500; opacity: 0.72; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card .xc, .card .val { grid-row: 1 / span 2; font-family: var(--mono); font-weight: 600; font-size: 0.86em; }
.card .xc { grid-column: 2; opacity: 0.6; }
.card .val { grid-column: 3; min-width: 1.6em; text-align: right; }
.card .fill { position: absolute; left: 0; bottom: 0; height: 3px; width: var(--w, 0%); background: var(--blue); }
.card .go { grid-column: 1; font-family: var(--mono); font-weight: 600; font-size: 0.66em; letter-spacing: 0.06em; color: var(--blue); }
.card li.shut { opacity: 0.45; }                                            /* a hand your shown tiles, or the tiles that are gone, have closed */
.card li.near { box-shadow: inset 0 0 0 2px var(--blue); }                   /* the nearest to your tiles */
.card li.made { background: var(--mint); box-shadow: inset 0 0 0 2px var(--ink); }

/* On a phone the card is a drawer under the keyboard. Its handle is the bottom edge of the dock. Shut (as it is
   when the page loads) the screen is fixed; open, the card is underneath, and the page scrolls to it. */
.card-toggle { display: none; }
.app.narrow .card-toggle { grid-area: handle; display: flex; align-items: center; justify-content: center; gap: 0.8em; height: 28px; margin: 0 calc(-7px - var(--rim)); padding: 0; border: 0; border-radius: 0 0 10px 10px; background: none; color: var(--ink); font-size: 0.62em; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }
.card-toggle i { width: 0.55em; height: 0.55em; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: translateY(-30%) rotate(45deg); transition: transform 0.2s; }
.card-toggle[aria-expanded="true"] i { transform: translateY(25%) rotate(-135deg); }
.drawer { display: none; }
html.scrolls { height: auto; overflow-x: hidden; overflow-y: auto; }
html.scrolls body { height: auto; overflow: visible; padding-bottom: calc(18px + env(safe-area-inset-bottom)); }     /* carpet under the panel and its skirt */
html.scrolls .app { position: relative; inset: auto; height: 100vh; height: 100svh; }
/* Open, the card is on the dock's own plastic: the dock loses its bottom corners and its skirt, and the
   card's panel starts where the dock ends and carries them instead. */
html.scrolls .app.narrow .dock { border-radius: 10px 10px 0 0; box-shadow: inset 1px 0 0 #d6d2c5, inset -1px 0 0 #d6d2c5, inset 0 1px 0 #d6d2c5, inset 0 2px 0 rgba(255, 255, 255, 0.6); }
html.scrolls .app.narrow .card-toggle { border-radius: 0; border-bottom: 1px solid #d3cfc2; }
html.scrolls .drawer {
  display: block;
  position: relative;
  z-index: 1;
  margin: calc(-1 * max(13px, env(safe-area-inset-bottom) + 5px)) max(8px, env(safe-area-inset-right)) 0 max(8px, env(safe-area-inset-left));
  padding: 12px 8px 8px;
  border-radius: 0 0 9px 9px;
  background: var(--case);
  box-shadow: inset 1px 0 0 #d6d2c5, inset -1px 0 0 #d6d2c5, inset 0 -1px 0 #d6d2c5, 0 5px 0 var(--case-d);
  font-size: 15px;
}
.drawer .card li { box-shadow: 0 3px 0 var(--case-d); }
.drawer .card li.near { box-shadow: inset 0 0 0 2px var(--blue), 0 3px 0 var(--case-d); }
.drawer .card li.made { box-shadow: inset 0 0 0 2px var(--ink), 0 3px 0 var(--case-d); }
.drawer .card ul { gap: 8px; }
.drawer .row { max-width: 520px; margin: 14px auto 0; padding-bottom: 5px; }

/* ------------------------------------------------------------------ */
/* buttons off the keyboard: key caps with a flat top and a darker skirt */
/* ------------------------------------------------------------------ */

.btn {
  --bg: var(--ink);
  --lipc: #11141b;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  min-height: 3.1em;
  padding: 0.45em 0.9em;
  border: 0;
  border-radius: 7px;
  background: var(--bg);
  color: #fff;
  font-weight: 700;
  font-size: 1.05em;
  line-height: 1.1;
  letter-spacing: 0.01em;
  box-shadow: 0 5px 0 var(--lipc), inset 0 1px 0 rgba(255, 255, 255, 0.28);
  transition: transform 0.06s, box-shadow 0.06s, filter 0.15s;
}
.btn:hover:not(:disabled) { filter: brightness(1.07); }
.btn:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 1px 0 var(--lipc); }
.btn:disabled { opacity: 0.4; box-shadow: 0 2px 0 var(--lipc); }
.btn small { display: block; font-family: var(--mono); font-size: 0.72em; font-weight: 500; opacity: 0.95; }
.btn span { display: block; }
.btn.go { --bg: var(--blue); --lipc: var(--blue-d); }
.btn.navy { --bg: var(--navy); --lipc: var(--navy-d); }
.btn.out { --bg: #7b8595; --lipc: #545d6b; }
.btn.ghost { --bg: #f8f8f5; --lipc: var(--case-d); color: var(--ink); }
.btn.big { font-size: 1.3em; padding: 0.6em 1.4em; }
.btn.slim { min-height: 2.4em; font-size: 0.95em; }
.row { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; padding-bottom: 5px; }
.row > .btn { flex: 1 1 auto; }
.row > .btn.fit { flex: 0 0 auto; }

/* ------------------------------------------------------------------ */
/* messages, pop-ups                                                   */
/* ------------------------------------------------------------------ */

.toast {
  position: absolute;
  left: 50%;
  top: 6%;
  z-index: 8;
  width: max-content;
  max-width: 86%;
  padding: 0.45em 1em;
  border-radius: 2px;
  background: var(--glass);
  color: var(--mint-pale);
  font-family: var(--mono);
  font-weight: 500;
  font-size: clamp(13px, 2.3vmin, 17px);
  line-height: 1.2;
  text-align: center;
  box-shadow: 0 0 0 1.5px var(--mint), 0 0 22px rgba(171, 255, 233, 0.35), 0 10px 24px rgba(0, 0, 0, 0.45);
  opacity: 0;
  transform: translate(-50%, -30%) scale(0.7);
  transition: transform 0.3s cubic-bezier(0.2, 1.4, 0.4, 1), opacity 0.2s;
  pointer-events: none;
}
.toast.show { opacity: 1; transform: translate(-50%, 0) scale(1); }
.toast b { color: var(--mint); }
/* new lines of table talk appear for a few seconds over the top corner of the table */
.feed { position: absolute; left: 0; top: 0; z-index: 7; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; max-width: min(78%, 360px); pointer-events: none; }
.feed p { margin: 0; padding: 0.32em 0.75em; border-radius: 2px; background: rgba(4, 20, 29, 0.92); color: var(--mint-pale); font-family: var(--mono); font-weight: 500; font-size: 0.84em; line-height: 1.25; overflow-wrap: anywhere; box-shadow: 0 0 0 1px rgba(171, 255, 233, 0.6); animation: feed-in 0.25s; }
.feed b { margin-right: 0.45em; font-weight: 700; color: var(--mint); }
@keyframes feed-in { from { opacity: 0; transform: translateX(-12px); } }

.modal { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 12px; background: rgba(8, 14, 20, 0.72); animation: fade 0.2s; }
@keyframes fade { from { opacity: 0; } }
@keyframes sheet-in { from { transform: scale(0.6); opacity: 0; } }

/* pop-ups are company paperwork */
.sheet {
  width: min(600px, 100%);
  max-height: 100%;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 0.8em;
  padding: clamp(16px, 3vmin, 26px);
  border-radius: 3px;
  background: var(--paper);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
  text-align: left;
  font-size: clamp(15px, 2.2vmin, 19px);
  animation: sheet-in 0.3s cubic-bezier(0.2, 1.3, 0.4, 1);
}
.sheet.wide { width: min(760px, 100%); }
.sheet > * { flex-shrink: 0; }
/* the head of every paper: the company logo, and the department in spaced capitals */
.sheet-head { display: flex; align-items: center; justify-content: space-between; min-height: 46px; padding-bottom: 10px; border-bottom: 1.5px solid var(--ink); font-size: 0.6em; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink); }
.sheet-head svg { height: 40px; width: auto; }
.sheet h2 { margin: 0; font-family: var(--display); font-weight: 400; font-size: 1.12em; letter-spacing: 0.03em; text-transform: uppercase; line-height: 1.25; }
.sheet h2::after { content: ""; display: block; height: 9px; margin-top: 0.55em; background: repeating-linear-gradient(180deg, var(--ink) 0 1.2px, transparent 1.2px 3.9px); }
.sheet h3 { margin: 0.3em 0 0; font-size: 0.72em; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }
.sheet p { margin: 0; font-weight: 500; line-height: 1.3; }
.sheet .lead { font-weight: 700; font-size: 1.1em; }
.sheet .fine { font-size: 0.78em; opacity: 0.7; }
.sheet .wait { font-style: italic; }
.warn { padding: 0.6em 0.8em; border-radius: 2px; background: var(--red); color: #fff; font-weight: 700; font-size: 0.9em; }

/* the start screen */
.sheet.start { text-align: center; }
.start-logo { margin: calc(-1 * clamp(16px, 3vmin, 26px)); margin-bottom: 0; border-radius: 3px 3px 0 0; overflow: hidden; background: var(--ink); }      /* reaches the sheet's edges, whatever its padding */
.start-logo svg { width: 100%; height: auto; max-height: 26vh; }
.start-msg { min-height: 1.3em; color: var(--red); font-weight: 700; }
.start-msg:empty { display: none; }
.sheet.start .btn, #lobbyGo .btn { text-transform: uppercase; letter-spacing: 0.07em; font-size: clamp(11.5px, 3.4vw, 1em); line-height: 1.2; min-height: 3.6em; padding: 0.5em 0.6em; }
.sheet.start .field { align-items: stretch; }
.sheet.start .text-input { width: 100%; }
.sheet.start .join-row { flex-wrap: nowrap; }
.sheet.start .code-input { flex: 1 1 auto; width: auto; min-width: 0; }
.sheet.start .join-row .btn { min-width: 6.5em; }
/* A row of five tiles. Run a finger or the mouse along it and the one under the pointer rises while its
   neighbours lean away: js/ui.js gives each tile --lift (0 to 1) and --part (-1 to 1). */
.fan { display: flex; justify-content: center; gap: 1.6%; padding: 1.1em 0 1.1em; touch-action: pan-y; cursor: grab; }
.fan .tile { width: 12%; max-width: 64px; --side: 3px; transform: translateX(calc(var(--part, 0) * 22%)) rotate(calc(var(--part, 0) * 5deg)) translateY(calc(var(--lift, 0) * -22%)); transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.3, 1); }

.field { display: flex; flex-direction: column; gap: 0.3em; align-items: center; }
.field label { font-size: 0.7em; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }
.text-input, .code-input, .link-input { padding: 0.45em 0.7em; border: 1.5px solid var(--ink); border-radius: 2px; background: #fff; font-weight: 700; }
.text-input { width: min(100%, 15em); text-align: center; font-size: 1.15em; }
.code-input { width: 7.6em; padding: 0.3em 0.2em; text-align: center; font-family: var(--mono); font-size: 1.25em; letter-spacing: 0.18em; text-transform: uppercase; }
.link-input { flex: 1 1 auto; min-width: 0; font-family: var(--mono); font-size: 0.85em; font-weight: 500; }
.text-input:focus, .code-input:focus, .link-input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 2px rgba(3, 70, 139, 0.25); }
.join-row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; align-items: stretch; padding-bottom: 5px; }
.join-row .btn { flex: none; }
.or { display: flex; align-items: center; gap: 0.8em; font-size: 0.68em; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.6; }
.or::before, .or::after { content: ""; flex: 1; height: 2px; background: currentColor; opacity: 0.35; }
.link-row { display: flex; gap: 8px; align-items: stretch; padding-bottom: 5px; }
.link-row .btn { flex: none; min-height: 2.6em; }
.big-code { font-family: var(--mono); font-weight: 700; color: var(--blue); letter-spacing: 0.2em; font-size: 1.5em; line-height: 1.1; padding-left: 0.22em; }

/* the players at the table: key caps like the rest of the sheet, side by side */
.seat-list { list-style: none; margin: 0; padding: 0 0 3px; display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5em, 1fr)); gap: 9px 6px; }
.seat-list li { display: grid; grid-template-columns: 1.9em minmax(0, 1fr) auto; align-items: center; gap: 0.4em; min-height: 2.9em; min-width: 0; padding: 0.25em 0.5em 0.25em 0.45em; border-radius: 3px; background: #fff; box-shadow: inset 4px 0 0 var(--blue), inset 0 0 0 1px #dddacf, 0 3px 0 var(--case-d); font-weight: 700; }
.seat-list li.you { box-shadow: inset 4px 0 0 var(--green), inset 0 0 0 2px var(--green), 0 3px 0 var(--case-d); }
/* the count of free seats is a line of small print across the foot of the list */
.seat-list li.empty { grid-column: 1 / -1; display: block; min-height: 0; padding: 0.1em 0; background: none; box-shadow: none; text-align: center; font-size: 0.68em; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.6; }
.seat-list .avatar { width: 100%; height: auto; }
.seat-list .who { letter-spacing: 0.04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.seat-status { font-family: var(--mono); font-weight: 500; font-size: 0.72em; text-transform: uppercase; opacity: 0.7; white-space: nowrap; }
.seat-list li.away .seat-status { color: var(--red); opacity: 1; }
.seat-list li button { padding: 0.3em 0.5em; border: 0; border-radius: 4px; background: #f8f8f5; box-shadow: 0 2px 0 var(--case-d); font-weight: 700; font-size: 0.7em; }

/* options: rows of choices */
.opts { display: grid; gap: 0.6em; text-align: left; }
.opt { display: grid; grid-template-columns: 8.2em 1fr; gap: 0.6em; align-items: center; }
.opt > span { font-size: 0.7em; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; line-height: 1.15; }
.seg { display: flex; gap: 5px; padding-bottom: 3px; }
.seg button { flex: 1 1 0; min-width: 0; min-height: 2.5em; padding: 0.2em 0.1em; border: 0; border-radius: 5px; background: #f8f8f5; box-shadow: 0 3px 0 var(--case-d), inset 0 0 0 1px #dddacf; font-family: var(--mono); font-weight: 600; font-size: 0.9em; line-height: 1.05; }
.seg button.on { background: var(--blue); color: #fff; box-shadow: 0 3px 0 var(--blue-d); }
@media (max-width: 520px) { .opt { grid-template-columns: 1fr; gap: 0.2em; } }

.menu-list { display: grid; gap: 12px; padding-bottom: 5px; }
.menu-list .btn { justify-content: flex-start; text-align: left; min-height: 2.7em; }
.menu-list .btn > span { flex: 1; font-weight: 700; }
.menu-list .btn small { font-family: var(--font); font-weight: 500; }
.menu-list .btn i { font-style: normal; font-weight: 700; opacity: 0.85; }

/* points */
.score { width: 100%; border-collapse: collapse; font-family: var(--mono); font-weight: 500; text-align: right; }
.score th { padding: 0.2em 0.35em; font-family: var(--font); font-weight: 700; font-size: 0.62em; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.8; }
.score td { padding: 0.36em 0.4em; background: #fff; border-top: 4px solid var(--paper); }
.score td:first-child, .score th:first-child { text-align: left; border-radius: 2px 0 0 2px; font-family: var(--font); font-weight: 700; }
.score td:last-child { border-radius: 0 2px 2px 0; }
.score .name { display: flex; align-items: center; gap: 0.5em; min-width: 0; }
.score .name .avatar { width: 1.8em; height: 1.8em; flex: none; }
.score .up { color: var(--green-d); }
.score .down { color: var(--red); }
@media (max-width: 440px) { .score { font-size: 0.84em; } .score .name .avatar { display: none; } }
#scoreBody .fine { margin-top: 0.8em; }
#scoreBody h3 { margin: 0 0 0.5em; }

.how { display: grid; gap: 0.45em; margin: 0; padding: 0 0 0 1.1em; text-align: left; font-weight: 500; line-height: 1.3; font-size: 0.94em; }
.how b { font-weight: 700; color: var(--blue); }

.podium { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.podium li { display: grid; grid-template-columns: 2.2em 2.2em 1fr auto; gap: 0.6em; align-items: center; padding: 0.3em 0.8em; border-radius: 3px; background: #fff; box-shadow: inset 0 0 0 1px var(--edge); font-weight: 700; text-align: left; }
.podium li.first { background: var(--mint); box-shadow: inset 0 0 0 2px var(--ink); font-size: 1.1em; }
.podium .avatar { width: 100%; height: auto; }
.podium li span:last-child { font-family: var(--mono); font-weight: 600; }

/* table talk */
.chat-log { min-height: 7em; max-height: 46vh; overflow: auto; display: grid; gap: 2px; align-content: start; padding: 6px; border-radius: 2px; background: #fff; box-shadow: inset 0 0 0 1px var(--edge); text-align: left; }
.chat-log p { margin: 0; padding: 0.22em 0.5em; font-weight: 500; line-height: 1.3; overflow-wrap: anywhere; }
.chat-log p b { margin-right: 0.45em; font-weight: 700; color: var(--blue); }
.chat-log p.mine { background: #eafff9; }
.chat-log p.none { opacity: 0.6; font-style: italic; }
.chat-row { display: flex; gap: 8px; align-items: stretch; padding-bottom: 5px; }
.chat-row .btn { flex: none; min-height: 2.6em; }
.chat-input { flex: 1 1 auto; min-width: 0; width: auto; text-align: left; font-size: 1em; }

/* the icon chooser: sixteen pictures, eight to a row */
.icons { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 11px 7px; width: 100%; padding: 5px 4px 7px; }
.icons button { display: block; padding: 0; border: 0; border-radius: 50%; background: none; aspect-ratio: 1; box-shadow: 0 0 0 2px #fff, 0 3px 0 1px var(--case-d); transition: transform 0.1s, box-shadow 0.1s; }
.icons button .avatar { display: block; width: 100%; height: 100%; }
.icons button.on { box-shadow: 0 0 0 2px #fff, 0 0 0 5px var(--blue); transform: scale(1.07); }
.icons button:active { transform: translateY(2px); }

/* the hand that won, laid out on the results */
.won-hand { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; padding: 2px 0 6px; }
.won-hand .meld { gap: 2px; }
.won-hand .tile { width: clamp(22px, 5.4vw, 34px); --side: 2px; }

/* ------------------------------------------------------------------ */
/* the terminal's announcements (js/terminal.js)                       */
/* ------------------------------------------------------------------ */

/* A refiner's terminal comes up over the whole page: the dark screen, its scan lines and faint numbers, and
   lines of type in the middle.
     .mdr-hand   a hand won: the screen opens from a line across the middle, as a tube warms up
     .mdr-game   the game won: a terminal in its case travels in until its screen fills the page
     .mdr-rare   the numbers round the middle are the scary kind until they are binned
   It is above the pop-ups. */
.mdr { position: fixed; inset: 0; z-index: 60; overflow: hidden; cursor: pointer; background: rgba(2, 9, 13, 0); transition: background 0.45s ease; -webkit-user-select: none; user-select: none; }
.mdr.on { background: rgba(2, 9, 13, 0.6); }
.mdr.off { background: rgba(2, 9, 13, 0); transition: background 0.22s ease; }
.mdr-screen { position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden; background: repeating-linear-gradient(0deg, rgba(171, 255, 233, 0.045) 0 1px, transparent 1px 3px), radial-gradient(ellipse at 50% 45%, #0b2c38 0%, #05171f 58%, #020b11 100%); }
.mdr-hand .mdr-screen { clip-path: inset(50% 0 50% 0); opacity: 0.5; transition: clip-path 0.45s cubic-bezier(0.6, 0, 0.2, 1), opacity 0.45s ease; }
.mdr-hand.on .mdr-screen { clip-path: inset(0); opacity: 1; }
.mdr-game .mdr-screen { border-radius: 34px; box-shadow: 0 0 0 5px #0d1c24, 0 0 0 20px var(--case), 0 0 0 23px var(--case-d), 0 40px 90px rgba(0, 0, 0, 0.6); transform: scale(0.06); transition: transform 0.85s cubic-bezier(0.5, 0, 0.15, 1); }
.mdr-game.on .mdr-screen { transform: scale(1.1); }                 /* far enough that the case has passed the edges of the page */
.mdr.off .mdr-screen { opacity: 0; transition: opacity 0.22s ease; }
.mdr-nums { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(var(--cols, 12), 1fr); align-content: space-evenly; justify-items: center; font-family: var(--mono); font-size: 15px; color: var(--mint); pointer-events: none; }
.mdr-nums i { font-style: normal; opacity: 0.07; }
.mdr-nums i.s { opacity: 0.5; animation: mdr-scare 0.42s ease-in-out infinite alternate; }
.mdr.binned .mdr-nums i.s { animation: mdr-bin 0.35s cubic-bezier(0.5, 0, 0.8, 0.4) forwards; }
@keyframes mdr-scare { from { transform: translate(-1.5px, 1px) scale(1.25); } to { transform: translate(1.5px, -1.5px) scale(1.75); } }
@keyframes mdr-bin { from { transform: scale(1.5); opacity: 0.5; } to { transform: translateY(60vh) scale(0.6); opacity: 0; } }
.mdr-logo { position: absolute; width: min(88vw, 640px); opacity: 0.1; pointer-events: none; }
.mdr-logo svg { width: 100%; height: auto; }
.mdr-box { position: relative; width: min(92vw, 660px); padding: 0 10px; text-align: center; font-family: var(--mono); color: var(--mint); text-shadow: 0 0 12px rgba(171, 255, 233, 0.5); }
.mdr-line { margin: 0; min-height: 1.5em; font-size: clamp(12px, 3.5vw, 16px); font-weight: 500; line-height: 1.5; letter-spacing: 0.14em; text-transform: uppercase; }
.mdr-line.dim { opacity: 0.72; }
.mdr-line.note { letter-spacing: 0.03em; text-transform: none; opacity: 0.9; }
.mdr-line.big { min-height: 1.25em; margin: 0.4em 0 0.3em; font-family: var(--display); font-size: clamp(19px, 6.6vw, 42px); font-weight: 400; line-height: 1.25; letter-spacing: 0.03em; color: var(--mint-pale); }
/* At the end of a game the winner's name is the largest thing on the terminal (the owner, of the poker game: "make the
   winners name larger"): as wide as a phone allows and no taller than a screen on its side has room for. The title over
   it is set smaller than a prize is, so that it stays on one line and the name has the room. */
.mdr-game .mdr-line.big, .mdr-line.big.verdict { margin: 0.5em 0 0.2em; font-size: clamp(11px, 3.6vw, 30px); letter-spacing: 0.08em; }   /* one line even at 320px wide (it wrapped at the poker game's 4.2vw) */
/* a notice of reprimand: where the refiner has been sent (the size of the title above, so it stays on one line), then what the company has to say, a little larger than small print */
.mdr-line.note.say { margin: 0.5em 0 0.7em; font-size: clamp(13px, 3.9vw, 19px); line-height: 1.4; opacity: 1; color: var(--mint-pale); }
.mdr-game .mdr-line.big.name { min-height: 1.1em; margin: 0 0 0.18em; font-size: clamp(34px, min(15vw, 15vh), 100px); line-height: 1.1; letter-spacing: 0.05em; text-shadow: 0 0 22px rgba(171, 255, 233, 0.55); }
@media (max-height: 480px) {            /* a phone on its side: everything a little closer, so the last line clears the hint at the foot */
  .mdr-game .mdr-bar { margin-bottom: 1.6em; }
  .mdr-game .mdr-line.big.name { font-size: clamp(34px, 13vh, 100px); }
  .mdr-game .mdr-foot { bottom: 7.5%; }
}
.mdr-line.who { font-weight: 600; font-size: clamp(13px, 3.9vw, 18px); color: var(--mint-pale); }   /* who has won is a little larger than the small print round it */
.mdr-line.typing::after { content: "\2588"; margin-left: 0.12em; animation: mdr-blink 0.5s steps(2) infinite; }
@keyframes mdr-blink { 50% { opacity: 0; } }
.mdr-bar { position: relative; width: min(72%, 380px); height: 13px; margin: 0 auto 2.4em; border: 1.5px solid var(--mint); box-shadow: 0 0 12px rgba(171, 255, 233, 0.3); }
.mdr-bar i { display: block; width: var(--w, 0%); height: 100%; background: var(--mint); }
.mdr-bar b { position: absolute; left: 0; right: 0; top: 18px; font-size: 12px; font-weight: 600; letter-spacing: 0.14em; }
.mdr-foot { position: absolute; left: 0; right: 0; bottom: max(20px, calc(env(safe-area-inset-bottom) + 12px)); margin: 0; text-align: center; font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(171, 255, 233, 0.5); }
.mdr-game .mdr-foot { bottom: 9%; }                                 /* inside the part of the screen still on the page */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
  .seat.turn .badge { animation: none; background: var(--turn); }
  .seat.winner .badge { animation: none; background: var(--won); }
  .me.turn { animation: none; background: rgba(28, 151, 209, 0.45); }
  .me.winner { animation: none; background: rgba(120, 222, 196, 0.36); }
  .mdr-hand .mdr-screen { clip-path: none; transition: opacity 0.15s; }
  .mdr-game .mdr-screen { transform: none; border-radius: 0; box-shadow: none; transition: none; }
  .mdr-game.on .mdr-screen { transform: none; }
}