:root {
  --felt: #1e6b43; --felt2: #2d8a57; --gold: #f2c14e; --gold2: #d9a426;
  --ink: #1b1f1c; --paper: #eef3ef; --card: #ffffff; --line: #d4dfd7; --muted: #5d6b62;
  --accent: #1e6b43; --danger: #c42121; --shadow: 0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.06);
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root { --ink: #e7eee9; --paper: #0f1612; --card: #1a231d; --line: #2c3a31; --muted: #98aa9e; --accent: #5fc98d;
          --shadow: 0 1px 3px rgba(0,0,0,.5); }
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Helvetica, sans-serif; color: var(--ink); background: var(--paper);
       -webkit-text-size-adjust: 100%; }
.hidden { display: none !important; }
[hidden] { display: none !important; }
h1, h2, h3 { margin: 0; line-height: 1.2; }
h1 { font-size: 22px; }
h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 700; }
h3 { font-size: 16px; }
p { margin: 0; }
a { color: var(--accent); }
button, input, select { font: inherit; color: inherit; }
input, select, textarea { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; min-width: 0; }
input:focus-visible, select:focus-visible, button:focus-visible, a:focus-visible { outline: 2px solid var(--gold2); outline-offset: 2px; }
.fine { color: var(--muted); font-size: 13px; }
.error { color: var(--danger); background: rgba(220,40,40,.1); border-radius: 8px; padding: 8px 10px; }

.button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 14px; min-height: 38px;
          border-radius: 10px; border: 1px solid var(--line); background: var(--card); font-weight: 600; cursor: pointer;
          box-shadow: var(--shadow); text-decoration: none; white-space: nowrap; }
.button:hover:not(:disabled) { border-color: var(--felt2); }
.button.primary { background: linear-gradient(var(--felt2), var(--felt)); color: #fff; border-color: rgba(0,0,0,.25);
                  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), var(--shadow); }
.button.small { padding: 4px 10px; min-height: 30px; font-size: 13px; border-radius: 8px; }
.button.wide { width: 100%; }
.button:disabled { opacity: .5; cursor: default; }
.link { background: none; border: 0; padding: 2px 4px; color: var(--accent); cursor: pointer; text-decoration: underline; font-size: 13px; }

/* Sign in */
#signin { min-height: 100vh; display: grid; place-items: center; padding: 16px;
          background: radial-gradient(circle at 50% 30%, var(--felt2), var(--felt) 70%); }
.signin-card { width: min(380px, 100%); background: var(--card); border-radius: 18px; padding: 28px 24px; text-align: center;
               box-shadow: 0 10px 40px rgba(0,0,0,.35); display: flex; flex-direction: column; gap: 12px; }
.signin-card .logo { font-size: 56px; line-height: 1; }
.signin-card h1 { font-size: 30px; letter-spacing: -.01em; }
.tagline { color: var(--muted); }
.divider { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 12px; margin-top: 6px; }
.divider::before, .divider::after { content: ""; flex: 1; border-top: 1px solid var(--line); }
.dev-form { display: flex; gap: 8px; align-items: end; text-align: left; }
.dev-form label { flex: 1; display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; }

/* The frame */
#topbar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 14px; padding: 8px 16px;
          padding-top: max(8px, env(safe-area-inset-top)); color: #fff;
          background: linear-gradient(var(--felt2), var(--felt)); box-shadow: inset 0 -1px 0 rgba(0,0,0,.2), 0 2px 6px rgba(0,0,0,.15); }
.brand { color: #fff; font-weight: 800; font-size: 18px; text-decoration: none; text-shadow: 1px 1px 0 rgba(0,0,0,.3); white-space: nowrap; }
#crumbs { flex: 1; display: flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; font-size: 14px; }
#crumbs a, #crumbs span { color: rgba(255,255,255,.92); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#crumbs a { text-decoration: none; }
#crumbs a:hover { text-decoration: underline; }
#crumbs .sep { opacity: .6; }
#me { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
#me .link { color: var(--gold); }
#banner { background: var(--gold); color: #3a2a00; text-align: center; padding: 6px 12px; font-size: 14px; }
#banner .link { color: #3a2a00; }
#main { max-width: 1180px; margin: 0 auto; padding: 16px; padding-bottom: max(16px, env(safe-area-inset-bottom)); }
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.page-head > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.avatar { font-size: 1.1em; }
h1 .emoji { margin-right: .35em; }

/* Lobby */
.game-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.game-card { display: flex; gap: 14px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 16px;
             box-shadow: var(--shadow); }
.game-card.disabled { opacity: .6; box-shadow: none; }
.game-emoji { font-size: 40px; line-height: 1; }
.game-body { display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 0; }
.game-card .count { color: var(--muted); font-weight: 400; font-size: 13px; }
.room-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 4px; }
.room-link { display: flex; flex-direction: column; align-items: flex-start; gap: 0; min-width: 0; padding: 7px 10px; border-radius: 10px;
             border: 1px solid var(--line); text-decoration: none; color: var(--ink); font-weight: 600; font-size: 14px; }
.room-link .count { font-size: 12px; font-weight: 400; color: var(--muted); }
.room-link:hover { border-color: var(--felt2); background: color-mix(in srgb, var(--felt2) 8%, transparent); }
.room-link.social { border-color: color-mix(in srgb, var(--gold2) 60%, var(--line)); }
.soon-head { margin: 26px 0 10px; }

/* Rooms and tables share a layout: the main area, and a side column for people and chat. */
.room-layout, .table-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
.side { display: flex; flex-direction: column; gap: 12px; position: sticky; top: 72px; }
.panel { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 12px; box-shadow: var(--shadow);
         display: flex; flex-direction: column; gap: 8px; }
.people { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; max-height: 180px; overflow: auto; }
.people li { display: flex; align-items: center; gap: 6px; }
.people li.me { font-weight: 700; }
.people .link { margin-left: auto; }

.table-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.empty-room { grid-column: 1 / -1; text-align: center; padding: 40px 16px; background: var(--card); border: 1px dashed var(--line); border-radius: 14px; }
.table-card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 12px; box-shadow: var(--shadow);
              display: flex; flex-direction: column; gap: 8px; }
.table-card.playing { border-color: color-mix(in srgb, var(--felt2) 50%, var(--line)); }
.table-card header, .table-card footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.table-card .actions { display: flex; gap: 6px; }
.status { font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--paper); color: var(--muted); }
.status.playing { background: color-mix(in srgb, var(--felt2) 18%, transparent); color: var(--accent); }
.badges { display: flex; flex-wrap: wrap; gap: 4px; }
.badge { font-size: 12px; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); white-space: nowrap; }
.badge.rated { border-color: var(--gold2); color: var(--ink); background: color-mix(in srgb, var(--gold) 25%, transparent); }
.seat-row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.chip { display: flex; align-items: center; width: 100%; min-height: 32px; padding: 4px 8px; border-radius: 8px; font-size: 13px;
        border: 1px solid var(--line); border-left: 4px solid var(--seat); background: var(--paper);
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chip.bot { font-style: italic; color: var(--muted); }
.chip.away { opacity: .6; }
.chip.empty { cursor: pointer; justify-content: center; color: var(--muted); border-style: dashed; border-left-style: solid; }
.chip.empty:hover:not(:disabled) { color: var(--accent); border-color: var(--felt2); }
.chip.empty:disabled { cursor: default; }

/* Chat */
.chat { min-height: 0; }
.chat-log { height: 260px; overflow-y: auto; display: flex; flex-direction: column; gap: 3px; padding-right: 4px; overflow-wrap: anywhere; }
.chat-log .line .from { font-weight: 700; color: #1a55c4; }
.chat-log .line.mine .from { color: #c41a1a; }
.chat-log .line.kibitzer .from { color: var(--muted); }
.chat-log .line.system { color: var(--muted); font-style: italic; font-size: 13px; }
.chat-log .tag { font-weight: 400; font-size: 12px; }
@media (prefers-color-scheme: dark) {
  .chat-log .line .from { color: #7d9bff; }
  .chat-log .line.mine .from { color: #ff7b7b; }
}
.chat-form { display: flex; gap: 6px; }
.chat-input { flex: 1; }

/* A table */
.status-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; border-radius: 12px;
              background: var(--card); border: 1px solid var(--line); margin-bottom: 12px; font-weight: 600; min-height: 46px; }
.status-bar.mine { background: color-mix(in srgb, var(--gold) 30%, var(--card)); border-color: var(--gold2); }
.your-move { font-size: 17px; }
.clock { font-variant-numeric: tabular-nums; }
.clock.low { color: var(--danger); }
.board-wrap { position: relative; display: flex; justify-content: center; background: var(--card); border: 1px solid var(--line);
              border-radius: 16px; padding: 12px; box-shadow: var(--shadow); }
.board-host { width: 100%; max-width: 560px; display: flex; justify-content: center; }
.board-canvas { display: block; touch-action: manipulation; }
.result { position: absolute; inset: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
          text-align: center; padding: 16px; border-radius: 12px; background: color-mix(in srgb, var(--card) 92%, transparent);
          backdrop-filter: blur(3px); }
.result h2 { font-size: 26px; color: var(--ink); text-transform: none; letter-spacing: 0; }
.standings { list-style: none; margin: 0; padding: 0; min-width: 220px; display: flex; flex-direction: column; gap: 4px; }
.standings li { display: flex; justify-content: space-between; gap: 16px; padding: 6px 10px; border-radius: 8px;
                border-left: 4px solid var(--seat); background: var(--paper); font-weight: 600; }
.seed { max-width: 100%; overflow-wrap: anywhere; }
.controls { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.controls:empty { display: none; }
.help { margin-top: 10px; }
.seats { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.seat { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 10px; border: 1px solid transparent; }
.seat.turn { border-color: var(--seat); background: color-mix(in srgb, var(--seat) 10%, transparent); }
.swatch { width: 12px; height: 12px; border-radius: 3px; background: var(--seat); flex: none; }
.seat .who { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seat .who.empty { color: var(--muted); font-style: italic; }
.seat .tag { font-size: 12px; color: var(--muted); }
.seat .tag.ready { color: var(--accent); font-weight: 700; }
.seat .tag.away { color: var(--gold2); }
.seat .score { font-weight: 800; font-variant-numeric: tabular-nums; font-size: 17px; }

/* Dialogs */
.dialog { border: 0; border-radius: 16px; padding: 0; width: min(440px, calc(100vw - 32px)); background: var(--card); color: var(--ink);
          box-shadow: 0 20px 60px rgba(0,0,0,.4); }
.dialog::backdrop { background: rgba(0,0,0,.4); }
.dialog-form { padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.dialog-form h2 { font-size: 18px; color: var(--ink); text-transform: none; letter-spacing: 0; }
.dialog-form label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; }
.dialog-form label.check { flex-direction: row; align-items: center; gap: 8px; font-weight: 400; font-size: 14px; }
.dialog-form input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--felt); }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; }

/* Toasts */
#toasts { position: fixed; z-index: 50; left: 50%; transform: translateX(-50%); bottom: max(16px, env(safe-area-inset-bottom));
          display: flex; flex-direction: column; gap: 8px; width: min(460px, calc(100vw - 32px)); pointer-events: none; }
.toast { pointer-events: auto; display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 12px; background: #1b1f1c;
         color: #fff; box-shadow: 0 6px 24px rgba(0,0,0,.3); font-size: 14px; }
.toast span { flex: 1; }
.toast .close { background: none; border: 0; color: #fff; opacity: .7; font-size: 18px; cursor: pointer; padding: 0 4px; }

/* Phones: one column, the board first, chat below. */
@media (max-width: 820px) {
  .room-layout, .table-layout { grid-template-columns: minmax(0, 1fr); }
  .side { position: static; }
  .chat-log { height: 200px; }
}
@media (max-width: 520px) {
  #main { padding: 12px; }
  #topbar { gap: 10px; padding-left: 12px; padding-right: 12px; }
  #me .name { display: none; }
  #crumbs { font-size: 13px; }
  .game-grid { grid-template-columns: minmax(0, 1fr); }
  .board-wrap { padding: 6px; }
  .result { inset: 6px; }
  .grid2 { grid-template-columns: minmax(0, 1fr); }
}

/* Names open profiles; ratings sit beside them. */
.name-tag { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; text-align: left;
            overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
button.name-tag:hover { text-decoration: underline; }
span.name-tag { cursor: default; }
.rating { color: var(--muted); font-size: .85em; font-variant-numeric: tabular-nums; }
.standings .delta { font-size: 13px; font-variant-numeric: tabular-nums; margin-left: auto; }
.standings .delta.up { color: var(--accent); }
.standings .delta.down { color: var(--danger); }
.profile-head { display: flex; align-items: center; gap: 12px; }
.big-avatar { font-size: 44px; line-height: 1; }
.records { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.records th, .records td { text-align: right; padding: 6px 4px; border-bottom: 1px solid var(--line); }
.records th:first-child { text-align: left; }
.records thead th { color: var(--muted); font-size: 12px; font-weight: 600; }

/* Solo games and card tables: cards on felt. */
.board-wrap.felt { background: radial-gradient(circle at 50% 35%, #2d8a57, #1e6b43 75%); border-color: #17563a; }
.board-host.wide { max-width: 640px; }
.solo-links { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.big-score { font-size: 22px; font-weight: 800; }
.leaderboard { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; max-height: 420px; overflow: auto; }
.leaderboard li { display: grid; grid-template-columns: 2em 1.4em minmax(0, 1fr) auto auto; gap: 6px; align-items: center; padding: 4px 6px;
                  border-radius: 8px; font-variant-numeric: tabular-nums; }
.leaderboard li.fine { display: block; }
.leaderboard li.me { background: color-mix(in srgb, var(--gold) 22%, transparent); font-weight: 700; }
.leaderboard .rank { color: var(--muted); text-align: right; }
.leaderboard .score { font-weight: 700; }
.leaderboard .time { min-width: 4em; text-align: right; }

/* Spades */
.spades { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; }
.bid-panel { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; padding: 10px; border-radius: 12px;
             background: rgba(0,0,0,.35); max-width: 520px; }
.bid-panel .bid-title { width: 100%; text-align: center; color: #fff; font-weight: 600; margin-bottom: 2px; }
.bid-panel .button.small { min-width: 40px; }
.spades-scores { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; color: #fff; align-items: baseline; }
.spades-scores .team { display: flex; gap: 8px; align-items: baseline; }
.spades-scores .team-name { font-weight: 700; }
.spades-scores .team-score { font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; }
.spades-scores .fine { color: rgba(255,255,255,.75); }

/* 8-Ball in a classic game window, Yahoo! Pool style: grey bevels, Verdana, a blue title bar and
   players' strip, and a wood-and-felt table. The window keeps its own palette in light and dark. */
.board-wrap.classic { background: #c9cfdb; border: 2px solid; border-color: #f4f6fa #5f6779 #5f6779 #f4f6fa; border-radius: 3px;
                      padding: 0; color: #111; font: 11px/1.3 Verdana, Geneva, Tahoma, sans-serif; box-shadow: 2px 2px 0 rgba(0,0,0,.35);
                      overflow: hidden; }
.board-wrap.classic .board-host { max-width: none; min-width: 0; }
.pool { width: 100%; min-width: 0; display: flex; flex-direction: column; -webkit-user-select: none; user-select: none;
        -webkit-tap-highlight-color: transparent; }
.pool-button { font: inherit; color: #111; background: #d9dde6; border: 1px solid; border-color: #fff #4d5566 #4d5566 #fff; border-radius: 0;
               box-shadow: inset -1px -1px #98a0b1, inset 1px 1px #eef1f6; padding: 2px 8px; cursor: pointer; white-space: nowrap; }
.pool-button:active { border-color: #4d5566 #fff #fff #4d5566; box-shadow: inset 1px 1px #98a0b1; }
.pool-button:focus-visible { outline: 1px dotted #000; outline-offset: -4px; }

/* The title bar, with a little 8-ball for an icon. */
.pool-title { display: flex; align-items: center; gap: 6px; padding: 2px 2px 2px 5px; min-height: 22px;
              background: linear-gradient(90deg, #0b2a74, #3c6db0 70%, #8fb4e3); color: #fff; font-weight: bold; }
.pool-title-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: .03em;
                   text-shadow: 1px 1px 0 rgba(0,0,0,.45); }
.pool-logo { flex: none; position: relative; width: 14px; height: 14px; border-radius: 50%;
             background: radial-gradient(circle at 35% 30%, #777, #111 55%, #000); box-shadow: 0 0 0 1px rgba(255,255,255,.35); }
.pool-logo::after { content: "8"; position: absolute; left: 3px; top: 3px; width: 8px; height: 8px; border-radius: 50%; background: #fff;
                    color: #000; font: bold 7px/8px Verdana, Geneva, sans-serif; text-align: center; }
/* 9-Ball's: the 9, a yellow stripe. */
.pool-logo.nine { background: linear-gradient(#fff 0 22%, #f2c418 22% 78%, #fff 78%); }
.pool-logo.nine::after { content: "9"; }
.pool-title .pool-button { padding: 0 6px; font-size: 10px; font-weight: normal; line-height: 16px; }

/* The players: whose turn it is, and each one's rack, sunk balls dimmed. */
.pool-players { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px; padding: 4px 6px;
                background: linear-gradient(#5579bb, #2c4c8c); color: #fff; border-bottom: 1px solid #1d3565; }
.pool-player { min-width: 0; display: flex; flex-direction: column; gap: 3px; padding: 3px 6px;
               border: 1px solid rgba(255,255,255,.2); background: rgba(0,0,0,.14); }
.pool-player:last-child { align-items: flex-end; }
.pool-player.up { border-color: #ffd21f; background: rgba(255,210,31,.17); box-shadow: 0 0 0 1px rgba(255,210,31,.35); }
.pool-player.won { border-color: #a6ec9e; background: rgba(166,236,158,.15); }
.pool-who { display: flex; align-items: center; gap: 5px; min-width: 0; max-width: 100%; font-weight: bold; }
.pool-player:last-child .pool-who { flex-direction: row-reverse; }
.pool-marker { flex: none; width: 9px; color: #ffd21f; font-size: 9px; text-align: center; }
.pool-swatch { flex: none; width: 8px; height: 8px; border: 1px solid rgba(255,255,255,.75); }
.pool-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pool-group { flex: none; font-size: 10px; font-weight: normal; font-style: italic; color: #dde6ff; }
.pool-rack { display: flex; gap: 2px; max-width: 100%; }
.pool-ball { --ball: #888; flex: none; display: block; width: 12px; height: 12px; border-radius: 50%;
             background: radial-gradient(circle at 34% 30%, rgba(255,255,255,.85) 0 12%, rgba(255,255,255,0) 34%), var(--ball);
             box-shadow: inset -1px -2px 2px rgba(0,0,0,.35), 0 0 0 1px rgba(0,0,0,.4); }
.pool-ball.stripe { background: radial-gradient(circle at 34% 30%, rgba(255,255,255,.85) 0 12%, rgba(255,255,255,0) 34%),
                                linear-gradient(#fbfaf2 24%, var(--ball) 24% 76%, #fbfaf2 76%); }
.pool-ball.sunk { opacity: .3; filter: grayscale(.5); }
.pool-ball.empty { background: rgba(0,0,0,.2); box-shadow: inset 1px 1px 2px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.15); }
.pool-ball.b1, .pool-ball.b9 { --ball: #f2c418; }
.pool-ball.b2, .pool-ball.b10 { --ball: #1f4fb4; }
.pool-ball.b3, .pool-ball.b11 { --ball: #d3281f; }
.pool-ball.b4, .pool-ball.b12 { --ball: #5b2b8f; }
.pool-ball.b5, .pool-ball.b13 { --ball: #ef7a18; }
.pool-ball.b6, .pool-ball.b14 { --ball: #1b7f3e; }
.pool-ball.b7, .pool-ball.b15 { --ball: #7a1f1f; }
.pool-ball.b8 { --ball: #141414; }

/* The table, and beside it (below it, on phones) the power meter, English, and fine aim. */
.pool-middle { display: flex; gap: 8px; padding: 8px; justify-content: center; align-items: stretch; min-width: 0; }
.pool-felt { position: relative; flex: none; }
.pool-table { display: block; background: #161616; border: 2px solid; border-color: #5f6779 #f4f6fa #f4f6fa #5f6779;
              touch-action: pan-y pinch-zoom; }
.pool-table.active { touch-action: none; }
.pool-table:focus-visible { outline: 2px solid #ffd21f; outline-offset: -4px; }
.pool-side { flex: none; width: 56px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.pool-meter { --power: 0%; position: relative; flex: 1 1 auto; min-height: 90px; width: 26px; display: flex; align-items: flex-end;
              justify-content: center; overflow: hidden; cursor: ns-resize; touch-action: none;
              border: 2px solid; border-color: #5f6779 #f4f6fa #f4f6fa #5f6779;
              background: repeating-linear-gradient(transparent 0 11px, rgba(255,255,255,.13) 11px 12px), #161616; }
.pool-meter-fill { position: absolute; inset: 0; background: linear-gradient(#2fd05a, #f2d12e 55%, #e0341c);
                   clip-path: inset(0 0 calc(100% - var(--power)) 0); }
.pool-meter span { position: relative; writing-mode: vertical-rl; transform: rotate(180deg); padding: 6px 0; color: #c3c7d0;
                   font-size: 9px; letter-spacing: 2px; text-shadow: 0 0 2px #000, 0 0 2px #000; pointer-events: none; }
.pool-english { flex: none; width: 52px; height: 52px; cursor: pointer; touch-action: none; }
.pool-nudge { display: none; }
.pool-nudge .pool-button { width: 38px; height: 38px; padding: 0; font-size: 20px; line-height: 1; }

/* Phones: the table's on its side, with the meter running along under it. */
.pool.portrait .pool-players { gap: 4px; padding: 3px 4px; }
.pool.portrait .pool-middle { flex-direction: column; align-items: center; padding: 6px; gap: 6px; }
.pool.portrait .pool-side { width: 100%; flex-direction: row; gap: 6px; }
.pool.portrait .pool-meter { flex: 1 1 auto; width: auto; min-width: 0; min-height: 0; height: 36px; align-items: center;
                             justify-content: flex-start; cursor: ew-resize;
                             background: repeating-linear-gradient(90deg, transparent 0 11px, rgba(255,255,255,.13) 11px 12px), #161616; }
.pool.portrait .pool-meter-fill { background: linear-gradient(90deg, #2fd05a, #f2d12e 55%, #e0341c);
                                  clip-path: inset(0 calc(100% - var(--power)) 0 0); }
.pool.portrait .pool-meter span { writing-mode: horizontal-tb; transform: none; padding: 0 8px; }
.pool.portrait .pool-english { width: 44px; height: 44px; }
.pool.portrait .pool-nudge { display: flex; gap: 4px; }
.pool.portrait .pool-callout b { font-size: 16px; }
.pool.portrait .pool-callout.eight b { font-size: 22px; }

/* The status line, sunk into the window's bottom edge, with Skip while a replay runs. */
.pool-status { display: flex; align-items: center; gap: 6px; padding: 3px 4px; border-top: 1px solid #f4f6fa; }
.pool-status-text { flex: 1; min-width: 0; min-height: 21px; padding: 3px 6px; background: #e9ecf2;
                    border: 1px solid; border-color: #7d8699 #f4f6fa #f4f6fa #7d8699; }
.pool-skip { flex: none; }

/* Callouts in the window, like a tooltip that means it, and the winner's banner. */
.pool-callout { position: absolute; left: 50%; top: 45%; transform: translate(-50%, -50%); width: max-content; max-width: 88%;
                padding: 6px 16px 7px; background: #ffffe1; color: #000; border: 1px solid #000; box-shadow: 3px 3px 0 rgba(0,0,0,.45);
                text-align: center; line-height: 1.3; pointer-events: none; }
.pool-callout b { display: block; font-size: 20px; }
.pool-callout small { display: block; font-size: 11px; }
.pool-callout small:empty { display: none; }
.pool-callout.good b { color: #0b2a74; }
.pool-callout.foul b { color: #c0141c; }
.pool-callout.groups b { color: #155d27; }
.pool-callout.eight b { font-size: 28px; }
.pool-callout.pop { animation: pool-pop .25s cubic-bezier(.2, 1.5, .5, 1) both; }
@keyframes pool-pop {
  from { opacity: 0; transform: translate(-50%, -50%) scale(.5); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.pool-banner { position: absolute; left: 50%; bottom: 12%; transform: translateX(-50%); width: max-content; min-width: 50%; max-width: 90%;
               background: #c9cfdb; border: 2px solid; border-color: #f4f6fa #4d5566 #4d5566 #f4f6fa; box-shadow: 3px 3px 0 rgba(0,0,0,.45);
               text-align: center; line-height: 1.3; pointer-events: none; }
.pool-banner b { display: block; padding: 3px 10px; background: linear-gradient(90deg, #0b2a74, #3c6db0); color: #fff; font-size: 14px; }
.pool-banner small { display: block; padding: 6px 10px; font-size: 11px; }
@media (prefers-reduced-motion: reduce) {
  .pool-callout.pop { animation: none; }
}