/* The browser table's look - the Mac app's, see TableView.swift and
   TableChrome.swift: the felt, the plates and bubbles, the bows, the
   trick, the panels, the side, the lobby, and the phone. */
  /* The table in the browser - one page, no framework, written from
     protocol/PROTOCOL.md alone. It draws what the wire tells it and nothing more:
     the rules stay on the server. The look follows the Mac app's table
     (TableView.swift): the same held bow of cards, the same seat plates,
     the same deck (cards.js is CardViews.swift in SVG). */
  /* the two themes' colours come from design/theme.json (Theme.swift's
     numbers), set by Settings/Theme.js; these are the dark ones so the page
     is never colourless. The table's chrome - panel, bubbles, buttons -
     keeps its explicit colours in both themes, as in the app. */
  :root { --ink: #fff; --ink-rgb: 255,255,255; --backdrop-top: #17382a; --backdrop-bottom: #0d1f17;
          --felt-top: #1a4d30; --felt-bottom: #0f301f; --warning: #ffd14d;
          --felt-ink: #f4efe2; --gold: #f2c94c; --panel: #2b2b2e; --cw: 72px; --ch: 104px; }
  * { box-sizing: border-box; }
  body { margin: 0; font: 15px/1.4 -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
         background: #1e2022; color: var(--felt-ink); }
  /* the Sideboard's width and the felt's share on a phone come
     from design/table.json (layout), set by App.js - the Mac app's */
  main { display: grid; grid-template-columns: 1fr var(--sideboardw, 340px); gap: 0; height: 100vh; }

  /* the menus: the intro, the settings, the help, the archive - the app's
     backdrop and ink (Theme.swift), swapped whole by the theme */
  .menu { min-height: 100vh; position: relative; background: linear-gradient(var(--backdrop-top), var(--backdrop-bottom));
          color: var(--ink); display: flex; flex-direction: column; align-items: center; gap: 26px; padding: 40px 16px; }
  .menu .title { font: 900 44px/1.1 Georgia, "Times New Roman", serif; margin: 0; text-align: center; }
  .menu .title.small { font: 700 28px/1.2 -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif; }
  .corner { position: absolute; top: 22px; right: 22px; display: flex; gap: 18px; }
  .icon-btn { width: 28px; height: 28px; padding: 0; border: 0; background: none; color: rgba(var(--ink-rgb), .55); cursor: pointer; }
  .icon-btn svg { width: 100%; height: 100%; fill: currentColor; }
  .icon-btn:hover { color: rgba(var(--ink-rgb), .85); }
  .footer { font-size: 12px; color: rgba(var(--ink-rgb), .45); min-height: 1em; }
  .seg { display: flex; background: rgba(var(--ink-rgb), .10); border-radius: 8px; padding: 2px; width: min(560px, 100%); }
  .seg.w420 { width: min(420px, 100%); }
  .seg button { flex: 1; border: 0; background: none; padding: 6px 4px; font-size: 15px; color: inherit; border-radius: 6px; cursor: pointer;
                display: flex; align-items: center; justify-content: center; gap: 6px; }
  /* the game symbols (design/symbols) beside the games' names, in the ink around them */
  .seg button svg, .title svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
  .seg button svg { width: 16px; height: 16px; }
  .seg button span { white-space: nowrap; }
  .title svg { width: 28px; height: 28px; vertical-align: -5px; margin-right: 10px; }
  .seg button.on { background: #fff; color: #1a241f; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
  .tiles { display: grid; grid-template-columns: repeat(auto-fit, 280px); gap: 18px; justify-content: center; width: min(578px, 100%); }
  .tile { width: 280px; height: 130px; border-radius: 16px; background: rgba(var(--ink-rgb), .10); border: 1px solid rgba(var(--ink-rgb), .25);
          color: inherit; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
          cursor: pointer; box-shadow: 0 6px 14px rgba(0,0,0,.18); font: inherit; }
  .tile svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .tile b { font-size: 19px; } .tile small { font-size: 12px; opacity: .6; }
  .tile:hover:not([disabled]) { background: rgba(var(--ink-rgb), .14); }
  .tile[disabled] { background: rgba(var(--ink-rgb), .06); border: 1.5px dashed rgba(var(--ink-rgb), .35); opacity: .65; cursor: default;
                    box-shadow: 0 2px 5px rgba(0,0,0,.12); }
  body.narrow .tiles { grid-template-columns: 1fr; width: 100%; } body.narrow .tile { width: 100%; }
  .archive .record { background: rgba(var(--ink-rgb), .10); border-radius: 12px; padding: 10px 14px; width: min(640px, 100%); margin: 0 auto 10px; }
  .archive .record .when { font-size: 12px; opacity: .6; } .archive .record .how { font-size: 14px; }
  .archive .empty { opacity: .7; text-align: center; }
  /* SoftButton: a soft capsule in the ink */
  .pill { background: rgba(var(--ink-rgb), .10); color: rgba(var(--ink-rgb), .75); border: 1px solid rgba(var(--ink-rgb), .22);
          padding: 8px 24px; border-radius: 999px; font: inherit; font-size: 15px; cursor: pointer; box-shadow: 0 2px 4px rgba(0,0,0,.2); }
  .pill:hover { background: rgba(var(--ink-rgb), .16); }
  /* the settings: one box per section (SettingsView.swift) */
  .box { background: rgba(var(--ink-rgb), .08); border-radius: 14px; padding: 16px; width: min(720px, 100%); }
  .box h3 { margin: 0 0 10px; font-size: 11px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase; color: rgba(var(--ink-rgb), .5); }
  .box .note { margin: 8px 0 0; font-size: 12px; color: rgba(var(--ink-rgb), .55); }
  .swatches { display: flex; gap: 14px; }
  /* the first start: the app's wizard, centred, one question at a time */
  .wizard .setup-body { display: flex; flex-direction: column; align-items: center; gap: 22px; }
  .wizard .welcome { font-size: 22px; font-weight: 700; margin: 0; }
  .wizard .seg { justify-content: center; }
  .swatch { background: none; border: 0; padding: 0; color: inherit; font: inherit; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 8px; }
  .swatch div { width: 130px; height: 74px; border-radius: 10px; border: 1px solid rgba(var(--ink-rgb), .2); }
  .swatch.on div { border: 2.5px solid rgba(255,220,0,.9); } .swatch.on span { font-weight: 700; }
  .books .row { display: flex; gap: 12px; align-items: center; padding: 6px 0; }
  .books .name { width: 190px; font-weight: 600; } .books .sum { flex: 1; font-size: 12px; color: rgba(var(--ink-rgb), .55); line-height: 1.4; }
  .books .row button { background: #fff; color: #1a241f; border: 0; border-radius: 6px; padding: 4px 10px; font: inherit; font-size: 14px; cursor: pointer; }
  .books .row button[disabled] { opacity: .45; }
  .books .seg { margin-bottom: 8px; }
  /* the help book: the contents left, the page right (HelpView.swift) */
  .book { display: flex; gap: 18px; height: 470px; max-width: 100%; }
  .topics { width: 260px; background: rgba(var(--ink-rgb), .06); border-radius: 14px; padding: 8px; overflow: auto; }
  .topics h4 { margin: 6px 12px 2px; font-size: 10px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase; color: rgba(var(--ink-rgb), .45); }
  .topics h4 + h4, .topics .topic + h4 { margin-top: 16px; }
  .topic { display: flex; gap: 10px; align-items: center; padding: 8px 12px; border-radius: 9px; cursor: pointer; font-size: 15px; }
  .topic.on { background: rgba(var(--ink-rgb), .12); font-weight: 600; }
  .topic svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: .5; }
  .page { width: 560px; background: rgba(var(--ink-rgb), .06); border-radius: 14px; padding: 20px; overflow: auto; }
  .page h2 { display: flex; gap: 10px; align-items: center; margin: 0 0 14px; font-size: 19px; }
  .page h2 svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: .6; }
  .page p, .page ul { margin: 0 0 14px; font-size: 15px; line-height: 1.45; color: rgba(var(--ink-rgb), .8); }
  .page ul { list-style: none; padding: 0; } .page li { margin: 0 0 6px; }
  body.narrow .book { flex-direction: column; height: auto; } body.narrow .topics, body.narrow .page { width: 100%; }
  /* the rule-book editor, in the settings' place (RulesEditor.swift) */
  .editor { width: min(600px, 100%); display: flex; flex-direction: column; gap: 16px; }
  .editor .bookname { font-size: 19px; font-weight: 700; }
  .editor input.bookname { width: 280px; padding: 6px 10px; border-radius: 8px; border: 1px solid rgba(var(--ink-rgb), .3); background: rgba(255,255,255,.7); color: #1a241f; }
  .pane { background: rgba(var(--ink-rgb), .08); border: 1px solid rgba(var(--ink-rgb), .15); border-radius: 14px; padding: 16px;
          display: flex; flex-direction: column; gap: 14px; }
  .pane h2 { margin: 0; font-size: 19px; }
  .pane .note { margin: 0; color: rgba(var(--ink-rgb), .6); }
  .psec { display: flex; flex-direction: column; gap: 7px; }
  .psec h4 { margin: 0; font-size: 11px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase; color: rgba(var(--ink-rgb), .5); }
  .toggle { display: flex; align-items: center; gap: 8px; font-size: 15px; } .toggle.off { opacity: .45; }
  .stepper { display: flex; align-items: center; gap: 6px; font-size: 15px; } .stepper.off .lbl { opacity: .4; }
  .stepper .lbl { width: 90px; } .stepper .val { width: 40px; text-align: right; font-variant-numeric: tabular-nums; }
  .stepper button, .brow button { border: 1px solid rgba(var(--ink-rgb), .25); background: rgba(255,255,255,.6); color: #1a241f; border-radius: 6px;
                                  width: 26px; height: 24px; cursor: pointer; font: inherit; line-height: 1; }
  .stepper button[disabled] { opacity: .3; cursor: default; }
  .brow { display: flex; gap: 10px; } .brow button { width: auto; padding: 0 10px; font-size: 12px; }
  .radio label { display: flex; gap: 8px; align-items: center; font-size: 15px; padding: 2px 0; }
  .choice { display: flex; align-items: center; gap: 10px; font-size: 15px; }
  .choice select { font: inherit; font-size: 14px; padding: 3px 6px; border-radius: 6px; border: 1px solid rgba(var(--ink-rgb), .25); }
  .editor .footer-row { display: flex; align-items: center; gap: 10px; } .editor .spacer { flex: 1; }
  .editor .footer-row button { font: inherit; font-size: 15px; border: 0; border-radius: 999px; padding: 8px 20px; cursor: pointer; }
  .editor button.quiet { background: rgba(var(--ink-rgb), .10); color: rgba(var(--ink-rgb), .8); }
  .editor button.danger { background: none; color: rgba(220, 40, 40, .85); }
  .editor button.gold { background: var(--gold); color: #000; font-weight: 700; padding: 9px 34px; box-shadow: 0 2px 5px rgba(0,0,0,.25); }
  .editor .warn { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; font-weight: 500; font-size: 15px;
                  color: var(--warning); background: rgba(242, 184, 64, .22); border: 1px solid rgba(242, 184, 64, .35); }
  .editor .warn::before { content: '⚠︎'; }
  .seg.w220 { width: min(220px, 100%); } .seg.w260 { width: min(260px, 100%); }
  /* the seat setup: the rules first, you, the characters, the options (SeatSetupView.swift) */
  .setup-body { width: min(1000px, 100%); display: flex; flex-direction: column; align-items: center; gap: 20px; }
  .setup-body .title { margin-bottom: 6px; }
  /* the Tschau Sepp centre: the draw pile (a beacon when drawing is the only move), the discard, the wish chip (TschauSeppView.swift) */
  .ts-pile, .ts-discard { position: absolute; width: 0; height: 0; }
  .ts-pile .card, .ts-discard .card { position: absolute; left: 0; top: 0; }
  .ts-pile { cursor: pointer; } .ts-pile.empty { opacity: .35; }
  .ts-pile.beacon .card:last-of-type { outline: 3px solid rgba(242,201,76,.9); outline-offset: -3px; animation: beacon .7s ease-in-out infinite alternate; }
  @keyframes beacon { from { transform: translate(-50%, -50%) translate(4px, -4px) scale(1); } to { transform: translate(-50%, -50%) translate(4px, -4px) scale(1.06); opacity: .7; } }
  .ts-badge { position: absolute; left: 0; transform: translate(-50%, -50%); background: rgba(242,201,76,.92); color: #000; font-weight: 700; padding: 3px 10px; border-radius: 12px; white-space: nowrap; font-size: 14px; box-shadow: 0 2px 6px rgba(0,0,0,.4); }
  .ts-chip { position: absolute; transform: translate(-50%, -50%); width: 34px; height: 34px; border-radius: 50%; background: rgba(0,0,0,.55); display: flex; align-items: center; justify-content: center; }
  .ts-chip .disc { width: 22px; height: 22px; }
  .team.ts { display: flex; justify-content: space-between; align-items: baseline; } .team.ts .pts.small { font-size: 13px; }
  /* the tournament: the crosstable and the progress bar (TournamentViews.swift) */
  .progress { width: min(460px, 100%); text-align: center; }
  .progress .bar { height: 6px; border-radius: 3px; background: rgba(var(--ink-rgb), .15); overflow: hidden; }
  .progress .fill { height: 100%; background: rgba(var(--ink-rgb), .6); transition: width .3s; }
  .standings { border-collapse: collapse; margin: 0 auto; font-variant-numeric: tabular-nums; }
  .standings th { font-size: 10px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; color: rgba(var(--ink-rgb), .5); padding: 4px 12px; }
  .standings td { padding: 5px 12px; text-align: right; } .standings td:nth-child(2), .standings th:nth-child(2) { text-align: left; min-width: 150px; }
  .box .busy { position: absolute; top: 8px; right: 12px; opacity: .5; } .box { position: relative; }
  .warn { color: #e0b000; font-size: 13px; }
  #tournaments h3 { margin: 0 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: .5px; opacity: .6; }
  .box.wide { width: min(1000px, 100%); }
  .row-box { display: flex; align-items: center; gap: 12px; }
  .row-box .lbl { font-size: 15px; } .row-box .sum { flex: 1; font-size: 12px; color: rgba(var(--ink-rgb), .6); }
  .row-box .lbl + select { width: 72px; }
  .row-box select, .seat-row select, .options select { font: inherit; font-size: 14px; padding: 3px 6px; border-radius: 6px; border: 1px solid rgba(var(--ink-rgb), .25);
                                                       background: rgba(255,255,255,.75); color: #1a241f; min-width: 200px; }
  .row-box button.small { border: 1px solid rgba(var(--ink-rgb), .25); background: rgba(255,255,255,.7); color: #1a241f; border-radius: 6px; padding: 4px 10px; font: inherit; font-size: 14px; cursor: pointer; }
  .setup-body input.name { width: 200px; font: inherit; font-size: 15px; padding: 6px 10px; border-radius: 8px; border: 1px solid rgba(var(--ink-rgb), .3); background: rgba(255,255,255,.75); color: #1a241f; }
  /* the profile row: who plays, its face, and a name for a new one or a rename (SeatSetupView.swift) */
  .profile-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .profile-row .face { width: 70px; }
  .profile-row input.name { width: 170px; font-size: 14px; padding: 3px 8px; border-radius: 6px; }   /* as tall as the buttons beside it */
  .seats { display: flex; flex-direction: column; gap: 10px; width: auto; }
  .seat-row { display: grid; grid-template-columns: 90px 210px auto auto; align-items: center; gap: 12px; font-size: 15px; }
  .seat-row .skill, .options .skill { font-size: 12px; color: rgba(var(--ink-rgb), .55); font-variant-numeric: tabular-nums; }
  .seat-row .temper { font-size: 12px; font-style: italic; color: rgba(var(--ink-rgb), .45); }
  .options { display: flex; gap: 26px; align-items: center; flex-wrap: wrap; justify-content: center; }
  .options .choice { display: flex; align-items: center; gap: 10px; font-size: 15px; }
  .options input[type=range] { width: 150px; }
  .setup-body .buttons { display: flex; gap: 16px; align-items: center; }
  .start { background: var(--gold); color: #000; border: 0; border-radius: 999px; padding: 12px 44px; font: inherit; font-size: 19px; font-weight: 700; cursor: pointer; box-shadow: 0 3px 8px rgba(0,0,0,.3); }
  body.narrow .seat-row { grid-template-columns: 1fr; gap: 4px; } body.narrow .row-box { flex-wrap: wrap; }

  /* the felt */
  .table { position: relative; background: linear-gradient(var(--felt-top), var(--felt-bottom));   /* T.feltTop -> T.feltBottom */
           overflow: hidden; }
  .plate { position: absolute; width: 56px; height: 56px; border-radius: 50%; background: rgba(0,0,0,.4);
           border: 2px solid rgba(255,255,255,.25); display: flex; align-items: center; justify-content: center;
           font-size: 30px; transform: translate(-50%, -50%); z-index: 3; transition: box-shadow .2s; }
  .plate.due { background: rgba(242,201,76,.3); border-color: rgba(242,201,76,.9); box-shadow: 0 0 0 4px rgba(242,201,76,.25); }
  .plate .tip { position: absolute; display: none; z-index: 9; background: rgba(0,0,0,.85); color: var(--felt-ink);
                border-radius: 12px; padding: 10px 14px; width: 230px; text-align: left; font-size: 13px;
                border: 1px solid rgba(255,255,255,.3); box-shadow: 0 4px 14px rgba(0,0,0,.4); }
  .plate:hover .tip { display: block; }
  .plate .tip b { display: block; font-size: 15px; }
  .plate .tip .kind { color: var(--gold); font-size: 12px; font-weight: 600; margin: 2px 0 4px; }
  .plate .tip .blurb { opacity: .8; font-size: 12px; }
  .plate.p0 .tip { left: 50%; bottom: calc(100% + 10px); transform: translateX(-50%); }
  .plate.p2 .tip { left: 50%; top: calc(100% + 10px); transform: translateX(-50%); }
  .plate.p1 .tip { left: calc(100% + 10px); top: 50%; transform: translateY(-50%); }
  .plate.p3 .tip { right: calc(100% + 10px); top: 50%; transform: translateY(-50%); }
  .bubble { position: absolute; z-index: 4; padding: 7px 12px; background: #fff; color: #222; border-radius: 14px;
            font-size: 14px; font-weight: 500; max-width: 240px; box-shadow: 0 2px 8px rgba(0,0,0,.35);
            animation: pop .25s ease-out; }
  .bubble::after { content: ''; position: absolute; width: 0; height: 0; border: 8px solid transparent; }
  .bubble.up::after   { bottom: 100%; left: 50%; margin-left: -8px; border-bottom-color: #fff; }
  .bubble.lft::after  { right: 100%; top: 50%; margin-top: -8px; border-right-color: #fff; }
  .bubble.rgt::after  { left: 100%; top: 50%; margin-top: -8px; border-left-color: #fff; }
  @keyframes pop { from { transform: scale(.6); opacity: 0 } to { opacity: 1 } }
  .bubble.still { animation: none; }            /* drawn again, not new (bubbleEl) */

  /* the held bow: every card on one circle around a pivot below the hand */
  /* the hands: another seat's lies on the felt, your own in front of everything (TSTableView's zIndex 5) */
  .fan { position: absolute; width: 0; height: 0; z-index: 2; }
  .fan.mine { z-index: 5; }
  .fan .card { position: absolute; left: 0; top: 0; transition: transform .15s, opacity .15s; }
  .card { width: var(--cw); height: var(--ch); filter: drop-shadow(0 2px 3px rgba(0,0,0,.35)); user-select: none; }
  .card img { width: 100%; height: 100%; display: block; }
  .card.small { width: calc(var(--cw) * var(--other)); height: calc(var(--ch) * var(--other)); }
  .card.legal { cursor: pointer; }
  .card.dim { opacity: .8; }
  /* the trump, on a dark disc at the exact centre of the table */
  .mark { position: absolute; width: 60px; height: 60px; border-radius: 50%; background: rgba(0,0,0,.32);
          border: 1px solid rgba(255,255,255,.18); transform: translate(-50%, -50%); display: flex;
          align-items: center; justify-content: center; z-index: 1; }
  .mark img { width: 34px; height: 34px; }
  .mark span { font-size: 30px; font-weight: 700; color: rgba(255,255,255,.85); line-height: 1; }
  /* the tricks a seat has taken, face down in front of its hand */
  .pile { position: absolute; width: calc(var(--cw) * var(--mini)); height: calc(var(--ch) * var(--mini)); cursor: pointer;
          transform: translate(-50%, -50%); z-index: 2; filter: drop-shadow(0 1px 2px rgba(0,0,0,.4)); }
  .pile img { width: 100%; height: 100%; display: block; }
  .pile:hover { filter: drop-shadow(0 0 6px rgba(242,201,76,.9)); }
  .spread { position: absolute; z-index: 7; background: rgba(0,0,0,.85); border-radius: 12px; padding: 8px 10px 10px;
            border: 1px solid rgba(255,255,255,.25); text-align: center; }
  .spread .title { font-size: 12px; font-weight: 600; margin-bottom: 6px; opacity: .9; white-space: nowrap; }
  .spread .cards { display: flex; gap: 5px; }
  .spread .card { width: calc(var(--cw) * .5); height: calc(var(--ch) * .5); filter: none; }
  .spread::after { content: ''; position: absolute; width: 0; height: 0; border: 8px solid transparent; }
  .spread.above { transform: translate(-50%, -100%); }
  .spread.above::after { top: 100%; left: 50%; margin-left: -8px; border-top-color: rgba(0,0,0,.85); }
  .spread.below { transform: translate(-50%, 0); }
  .spread.below::after { bottom: 100%; left: 50%; margin-left: -8px; border-bottom-color: rgba(0,0,0,.85); }
  .spread.rightof { transform: translate(0, -50%); }
  .spread.rightof::after { right: 100%; top: 50%; margin-top: -8px; border-right-color: rgba(0,0,0,.85); }
  .spread.leftof { transform: translate(-100%, -50%); }
  .spread.leftof::after { left: 100%; top: 50%; margin-top: -8px; border-left-color: rgba(0,0,0,.85); }

  /* the trick: a cross around the centre, each card lying towards its owner */
  .slot { position: absolute; width: 0; height: 0; z-index: 2; }
  .slot .turn { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); }
  /* the beats: a slot moves (left/top), its wrapper scales, the card
     turns and flips - all transitions, the state machine sets targets */
  .slot.beat { transition: left .45s ease-in-out, top .45s ease-in-out; }
  .slot.beat .turn { transition: transform .45s ease-in-out; }
  .slot.beat .card { transition: transform .45s ease-in-out; }
  .slot.sweep { transition: left .6s ease-in, top .6s ease-in; }
  .slot.sweep .card { transition: transform .6s ease-in; }
  .card .layer { position: absolute; inset: 0; transition: opacity .3s; }
  .card .layer img { width: 100%; height: 100%; display: block; }
  .card .layer.back { opacity: 0; }
  .card.flipped .layer.back { opacity: 1; }
  .card.flipped .layer.face { opacity: 0; }

  /* the question: a dark band across the middle, like the app's panels */
  .ask { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 6;
         background: rgba(0,0,0,.72); padding: 16px 22px; border-radius: 16px; text-align: center;
         border: 1px solid rgba(255,255,255,.18); max-width: 92%; }
  .ask .weis { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; } .ask .weis .card { position: static; width: 44px; height: calc(44px * 1.45); }
  .ask .weis b { margin-left: 6px; }
  .ask.wide { max-width: 92%; padding: 24px; }   /* no width: an absolute box shrinks to its content everywhere (max-content does not, in Safari) */
  .ask h3 { margin: 0 0 12px; font-size: 22px; font-weight: 700; }
  .ask .signs { display: flex; justify-content: center; gap: 14px; flex-wrap: nowrap; margin-bottom: 14px; }   /* one row: the box shrinks to it (a box at left 50% is offered only half the felt) */
  body.narrow .ask .signs { flex-wrap: wrap; }
  .ask .sign { cursor: pointer; text-align: center; font-size: 12px; opacity: .95; width: 68px; }
  .ask .sign .disc { width: 54px; height: 54px; border-radius: 50%; background: #fff; margin: 0 auto 6px;
                     display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(0,0,0,.4);
                     transition: transform .12s; }
  .ask .sign:hover .disc { transform: translateY(-4px); }
  .ask .sign .disc img { width: 32px; height: 32px; }
  .ask .sign .disc span { font-size: 28px; color: #222; line-height: 1; }
  .ask button { background: var(--gold); color: #222; border: 0; padding: 10px 28px; border-radius: 999px;
                font-weight: 700; cursor: pointer; margin: 3px; font-size: 16px; }
  .ask button.quiet { background: rgba(255,255,255,.22); color: var(--felt-ink); }
  .ask input { width: 80px; font-size: 18px; padding: 6px; border-radius: 8px; border: 0; text-align: center; }
  .ask .sheet { text-align: left; min-width: 260px; margin-bottom: 10px; font-size: 15px; }
  .ask .sheet .big { font-size: 20px; font-weight: 800; margin-bottom: 6px; }
  /* the table's controls: quiet icons in the bottom corners, white at
     .75, a disabled one at .35 - TableView.swift's overlays */
  .felt-btns { position: absolute; bottom: 12px; display: flex; gap: 14px; z-index: 5; }
  .tvBar { position: absolute; transform: translate(-50%, -50%); z-index: 10; display: flex; align-items: center; gap: 14px; padding: 6px 18px;
           background: rgba(0,0,0,.62); border: 1px solid rgba(255,255,255,.2); border-radius: 999px; color: rgba(255,255,255,.75); font-size: 14px; white-space: nowrap; }
  .tvBar .felt-btn { width: 28px; height: 28px; } .tvBar .felt-btn[disabled] { opacity: .4; }
  .felt-btns.left { left: 16px; } .felt-btns.right { right: 16px; }
  .felt-btn { width: 34px; height: 34px; padding: 4px; border: 0; background: none; color: rgba(255,255,255,.75);
              cursor: pointer; filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); }
  .felt-btn svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .felt-btn:hover { color: #fff; }
  .felt-btn[disabled] { opacity: .35; cursor: default; }
  .felt-btn.on { color: var(--gold); }
  /* the advisers' bubble: white, above the ? button, its tail pointing down at it (HintBubble) */
  .hintBubble { position: absolute; left: 60px; bottom: 58px; z-index: 8; background: rgba(255,255,255,.95); color: #000;
                border-radius: 12px; padding: 8px 14px; font-size: 15px; font-weight: 500; line-height: 1.5;
                box-shadow: 0 4px 14px rgba(0,0,0,.35); }
  .hintBubble::after { content: ''; position: absolute; left: 14px; bottom: -8px; border: 8px solid transparent;
                       border-top-color: rgba(255,255,255,.95); border-bottom: 0; }
  .card.hinted { box-shadow: 0 0 0 3px var(--gold), 0 0 14px rgba(242,201,76,.8); }
  .join .title { font-size: 18px; font-weight: 600; margin-bottom: 6px; }

  /* the side: the app's panel */
  /* the Sideboard (Sideboard.swift): the Chalkboard and the Tischbuech, two slates in a column */
  .sideboard { background: var(--panel); padding: 16px; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; }
  .sideboard > section { background: #3a3a3e; border-radius: 12px; padding: 14px 16px; }
  .head h1 { margin: 0 0 4px; font-size: 24px; font-weight: 700; }
  .head h1 svg { width: 22px; height: 22px; vertical-align: -3px; margin-right: 8px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .hintBubble .mini { display: inline-block; width: 14px; height: 14px; vertical-align: -2px; font-weight: 700; } .hintBubble .mini img, .hintBubble .mini svg { width: 14px; height: 14px; }
  .head .sub { opacity: .75; font-size: 14px; padding-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,.2); margin-bottom: 10px; }
  .team { margin: 10px 0 18px; }
  .team .who { font-size: 20px; letter-spacing: 2px; }
  .team .pts { font-size: 40px; font-weight: 800; line-height: 1; }
  .team .pts small { font-size: 16px; font-weight: 500; opacity: .7; margin-left: 8px; }
  .team .contract { font-size: 13px; opacity: .8; }
  .head .row { display: flex; align-items: center; justify-content: space-between; }
  .head .icon-btn.info { width: 22px; height: 22px; color: rgba(255,255,255,.55); } .head .icon-btn.info svg { fill: none; stroke: currentColor; stroke-width: 1.6; }
  /* the round line is the fold: the account, round by round, under it (SideboardHead) */
  .head summary { cursor: pointer; list-style: none; padding-bottom: 0; border-bottom: 0; margin-bottom: 0; } .head summary::-webkit-details-marker { display: none; }
  .head summary::after { content: ' ▸'; opacity: .6; } .head details[open] summary::after { content: ' ▾'; }
  .head details.closed summary { pointer-events: none; } .head details.closed summary::after { content: ''; }
  .head #tafel { margin-top: 8px; }
  .chalkboard .status { font-size: 12px; opacity: .5; margin-top: 10px; }
  .strichli-lines { margin-top: 4px; } .strichli-line { display: flex; align-items: center; gap: 10px; padding: 3px 0; }
  .strichli-line .who { font-size: 15px; letter-spacing: 1px; } .strichli-line .cost { margin-left: auto; font-size: 12px; opacity: .6; font-variant-numeric: tabular-nums; }
  /* the info card: this table's rules, then the game's page from the help book (TableInfoCard) */
  .info-card { position: absolute; right: 16px; top: 60px; z-index: 12; width: min(380px, calc(100% - 32px)); max-height: 70vh; overflow: auto; padding: 18px;
               background: #212628; border: 1px solid rgba(255,255,255,.15); border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.5); font-size: 14px; line-height: 1.4; }
  .info-card .cap { font-size: 11px; font-weight: 600; letter-spacing: .5px; color: rgba(255,255,255,.55); margin: 10px 0 4px; } .info-card .cap:first-child { margin-top: 0; }
  .info-card .game { font-size: 19px; font-weight: 700; margin-bottom: 6px; } .info-card .game svg { width: 20px; height: 20px; vertical-align: -3px; margin-right: 8px; fill: none; stroke: currentColor; stroke-width: 1.8; }
  .info-card table { border-collapse: collapse; } .info-card td { padding: 2px 14px 2px 0; vertical-align: top; } .info-card td:first-child { color: rgba(255,255,255,.6); }
  .info-card .devs { color: rgba(255,220,0,.85); font-size: 12px; margin-top: 6px; } .info-card hr { border: 0; border-top: 1px solid rgba(255,255,255,.25); margin: 12px 0; }
  .info-card p { margin: 0 0 10px; color: rgba(255,255,255,.72); }
  /* the chalk: 20er strokes in five-bar gates, and the Strichli tally (Chalkboard.swift) */
  .chalk { display: block; margin-top: 6px; } .chalk path { fill: none; stroke: rgba(255,255,255,.9); stroke-width: 2.2; stroke-linecap: round; }
  .tally { vertical-align: middle; } .tally path { fill: none; stroke: rgba(255,255,255,.85); stroke-width: 2; stroke-linecap: round; }
  table.tafel { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 6px; }
  table.tafel td, table.tafel th { padding: 2px 4px; text-align: right; }
  table.tafel th { opacity: .6; font-weight: 500; }
  table.tafel td:first-child, table.tafel th:first-child { text-align: left; opacity: .7; }
  table.tafel tr.sum td { border-top: 1px solid rgba(255,255,255,.3); font-weight: 700; }
  .strichli { font-family: ui-monospace, Menlo, monospace; letter-spacing: 1px; }
  .ladder { font-size: 13px; margin-top: 6px; }
  .ladder span { display: inline-block; margin-right: 6px; opacity: .45; }
  .ladder span.spent { opacity: 1; text-decoration: line-through; }
  .tischbuech h2 { margin: 0 0 8px; font-size: 15px; font-weight: 600; opacity: .85; }
  .log { font-size: 14px; }
  .log .row { display: flex; align-items: center; gap: 8px; padding: 3px 0; }
  .log .row .av { width: 22px; text-align: center; flex: none; }
  .log .talkb { background: #fff; color: #222; border-radius: 14px; padding: 4px 10px; font-size: 13px; }
  .log .fact { opacity: .8; font-size: 13px; }
  .log .rmark { color: var(--gold); font-weight: 600; margin-top: 8px; font-size: 13px; }

  /* sitting down */
  .join { position: absolute; inset: 0; z-index: 10; display: flex; align-items: center; justify-content: center;
          background: rgba(0,0,0,.45); }
  .join form { background: #10321f; padding: 22px 26px; border-radius: 14px; text-align: center; }
  .join input { font-size: 16px; padding: 7px 10px; border-radius: 8px; border: 0; width: 220px; }
  .join p { margin: 6px 0 12px; opacity: .8; font-size: 13px; }
  .join button { background: var(--gold); color: #222; border: 0; padding: 7px 14px; border-radius: 999px;
                 font-weight: 600; cursor: pointer; margin: 3px; font-size: 14px; }
  .join button.quiet { background: rgba(255,255,255,.2); color: var(--felt-ink); }
  .lobbyBox { background: #10321f; padding: 18px 22px; border-radius: 14px; width: min(520px, 92%); max-height: 92%;
              overflow-y: auto; }
  .lobbySection { margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.12); }
  .lobbySection h3 { margin: 0 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .8px; opacity: .7; }
  .lobbySection label { margin-right: 12px; font-size: 14px; }
  .lobbySection select, .lobbySection input { font-size: 14px; padding: 4px 6px; border-radius: 6px; border: 0; }
  .tableRow { display: flex; align-items: center; gap: 10px; padding: 5px 0; font-size: 14px; }
  .tableRow .who { flex: 1; opacity: .85; }
  .tableRow code { background: rgba(255,255,255,.12); padding: 2px 6px; border-radius: 5px; letter-spacing: 1px; }
  .seatPlan { display: flex; gap: 8px; align-items: center; font-size: 13px; margin: 3px 0; }
  [hidden] { display: none !important; }

  /* a phone: the felt on top, the panel below. `compact` is set by
     App.js below the design's layout.compactBelowPx - the width the
     Mac app stacks its table by too (TableView.swift). No breakpoint
     of the page's own. */
  body.compact main { grid-template-columns: 1fr; height: auto; }
  body.compact .table { height: calc(var(--feltshare, .78) * 100vh); min-height: 520px; }
  body.compact .plate { width: 40px; height: 40px; font-size: 22px; }
  /* a phone (narrower than the app's own floor): the menus have to give
     way, because nothing here may push the page wider than the glass -
     one overflowing row takes the title and the tiles with it. */
  /* the help "i" and the gear keep the top-right corner; on a phone the
     title would run underneath them, so it starts below instead. */
  body.narrow .menu { padding: 62px 12px 28px; gap: 20px; }
  body.narrow .corner { top: 16px; right: 16px; }
  body.narrow .menu .title { font-size: 30px; }
  /* five games will not sit in one row on a phone: let them wrap rather
     than stretch the page. The names stay whole (no ellipsis on a game). */
  body.narrow .seg { flex-wrap: wrap; justify-content: center; }
  body.narrow .seg button { flex: 0 1 auto; padding: 6px 10px; }
  /* A phone has room for one thing at a time: while the table is asking
     (trump, a Weis, a Schub) the chatter steps aside rather than being
     read through the overlay. The app's window is never this narrow -
     when Android comes, it will want this rule too. */
  body.narrow .table:has(#ask:not([hidden])) .bubble { display: none; }
  body.narrow .ask h3 { font-size: 17px; }
  body.narrow .ask.wide { width: 94%; padding: 12px; }
  body.compact .side { padding: 10px; }