/* Oakmont lobby — same room as the table: dark walnut, brass, cream plates, green felt. */
:root{
  --room:#120e0b; --room-2:#241a13; --panel:#2b2119; --panel-2:#1d1611; --line:#4a3828;
  --felt:#1d5637; --felt-hi:#2b7a4c; --walnut:#4a2915; --walnut-hi:#7a4a2a;
  --brass:#c9a45c; --brass-hi:#e2c079; --brass-lo:#8c6d33;
  --cream:#efe6d2; --cream-2:#d9ccb0; --ink:#2a1d12; --ink-2:#6b5840; --muted:#9c8a70;
  --oxblood:#8e1b22; --good:#7fc48a; --bad:#e0676d;
  --ui:"Barlow Semi Condensed","Arial Narrow",Arial,sans-serif;
  --display:"DM Serif Display",Georgia,"Times New Roman",serif;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{background:var(--room)}
/* signed in first (2026-10-12): hidden until the server has said who you are. Not shown after a while whatever happens
 * any more (owner, 2026-10-14: "this is what i see when i open the seance website sometimes, i need to refresh it to show
 * me the login page"): a server slow to answer — the app opened as the machine wakes — showed the page as it is before
 * anybody is signed in, which reads as the offline lobby. Until it answers the page says it is connecting, and the bar
 * that says the server can't be reached (js/net.js) shows over it. */
html.signing-in body{visibility:hidden}
html.signing-in body::after{content:'Connecting to Sahra Club…';visibility:visible;position:fixed;inset:0;display:grid;place-items:center;
  font:600 15px/1.3 var(--ui);letter-spacing:.08em;color:var(--muted);opacity:0;animation:oak-show .3s 1s forwards}
html.signing-in #net-down{visibility:visible}
@keyframes oak-show{to{opacity:1}}
body{
  margin:0;min-height:100vh;color:var(--cream);font-family:var(--ui);font-size:16px;line-height:1.4;
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%, #3a2a1c 0%, var(--room-2) 45%, var(--room) 100%) no-repeat,
    var(--room);
  padding-inline:16px;padding-block:28px 40px;
}
body::before{ /* the table room's faint carpet weave */
  content:"";position:fixed;inset:0;pointer-events:none;opacity:.06;
  background:repeating-linear-gradient(45deg,#c9a45c 0 1px,transparent 1px 14px),repeating-linear-gradient(-45deg,#c9a45c 0 1px,transparent 1px 14px);
}
.wrap{position:relative;max-width:1120px;margin:0 auto}

/* ---------- header ---------- */
.top{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;padding-bottom:22px;border-bottom:1px solid var(--line);margin-bottom:26px;flex-wrap:wrap}
.eyebrow{margin:0 0 2px;color:var(--brass);font-weight:700;font-size:13px;letter-spacing:.24em;text-transform:uppercase}
h1{margin:0;font-family:var(--display);font-weight:400;font-size:56px;line-height:1;letter-spacing:.01em}
/* THE SITE'S NAME, Sahra Club: its logo, "L3" (owner, 2026-10-24), the version drawn for dark grounds — the big title on
   the lobby and the sign-in pages (h1.site-name), the small one over the other pages' titles (.eyebrow.site-name). The
   name stays in the page as text, read out by screen readers. */
h1.site-name{font-size:0;line-height:0;height:72px;width:221px;max-width:100%;background:url(../img/brand/sahra-club-logo-on-green.svg) left center/contain no-repeat}
.eyebrow.site-name{font-size:0;line-height:0;height:34px;width:104px;margin-bottom:6px;background:url(../img/brand/sahra-club-logo-on-green.svg) left center/contain no-repeat}
.auth .brand h1.site-name{font-size:0;height:96px;width:295px;margin:0 auto;background-position:center}
/* …and its emblem at the start of the menu bar, a way back to the lobby */
.tabs .tab-mark{display:block;width:40px;height:40px;margin-right:6px;flex:none;background:url(../img/brand/sahra-club-mark-on-green.svg) center/contain no-repeat}
.tabs .tab-mark:focus-visible{outline:2px solid var(--brass);outline-offset:2px;border-radius:50%}
@media (max-width:560px){ h1.site-name{height:56px;width:172px} }
.lede{margin:10px 0 0;color:var(--cream-2);font-size:17px;max-width:52ch}
.you{display:flex;align-items:center;gap:8px;font-weight:600;font-size:17px;padding:6px 8px 6px 6px;border:1px solid var(--line);border-radius:999px;background:rgba(29,22,17,.7)}
.you .dot,.tabs .dot{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--oxblood);font-family:var(--display);font-size:17px;box-shadow:0 0 0 2px var(--brass)}

/* ---------- the room's bar (Rany, v43.6) ----------
   Six doors and your own name, in the same order on every page, above the heading rather than tucked
   into the corner where the old strip of links lived. Built by js/nav.js.

   A rail rather than a pill: the pill was the right shape for one name and a couple of links and the
   wrong one for a row of tabs, which have to read as a set of equals and have to wrap on a phone
   without becoming a lozenge three lines tall. The line under it is the same brass hairline the
   header already draws, so the two read as one masthead. */
.tabs{
  display:flex;align-items:center;gap:4px;flex-wrap:wrap;
  margin:0 0 18px;padding:0 0 12px;border-bottom:1px solid var(--line);
}
.tabs .tab{
  font-family:var(--ui);font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--cream-2);text-decoration:none;background:none;border:1px solid transparent;
  border-radius:999px;padding:7px 14px;cursor:pointer;white-space:nowrap;
}
.tabs .tab:hover{color:var(--cream);border-color:var(--brass-lo);background:rgba(0,0,0,.2)}
.tabs .tab:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
/* Where you already are. Brass on ink rather than a heavier weight, because a bar of seven uppercase
   words needs one of them to be unmistakable at a glance and none of them to shift position. */
.tabs .tab.on{color:var(--ink);background:var(--brass);border-color:var(--brass);cursor:default}
.tabs .tab.on:hover{color:var(--ink);background:var(--brass-hi)}
/* Your account — the first door. It carries a picture, so it keeps its own padding and sits flush
   against the left edge of the row. */
.tabs .tab-me{display:inline-flex;align-items:center;gap:8px;padding:4px 14px 4px 4px;
  font-size:14px;letter-spacing:.06em;margin-right:6px;border-color:var(--line);background:rgba(29,22,17,.7)}
.tabs .tab-me .who{color:var(--cream)}
.tabs .tab-me:hover .who{color:var(--brass)}
.tabs .tab-me:hover .dot{box-shadow:0 0 0 2px var(--brass), 0 0 12px rgba(201,164,92,.5)}
.tabs .tab-end{margin-left:auto;display:flex;align-items:center;gap:6px}
.tabs .tab-out{color:var(--muted)}
.tabs .tab-out:hover{color:var(--bad);border-color:var(--bad)}
.tabs .pill{display:inline-grid;place-items:center;min-width:18px;height:18px;margin-left:6px;padding:0 5px;
  border-radius:9px;background:var(--oxblood);color:#fff;font-size:11px;letter-spacing:0;vertical-align:1px}
.tabs .tab.on .pill{background:var(--oxblood);color:#fff}
.tabs .build{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;letter-spacing:.04em;
  color:var(--muted);border:1px solid var(--line);border-radius:5px;padding:2px 6px}
.tabs .build[hidden],.tabs .tab[hidden]{display:none}
@media (max-width:560px){
  .tabs{gap:2px}
  .tabs .tab{padding:6px 10px;letter-spacing:.06em}
  .tabs .tab-end{margin-left:0;width:100%;justify-content:flex-end}
}

/* The way to the form from where the tables are (Rany, v43.6). Pushed to the far end of the heading
   row, opposite the count, so the row reads "Your tables · 3 open ————— Create table". A brass
   outline rather than a filled button: the filled one on this page is "Open table", the thing that
   actually opens it, and two brass slabs saying nearly the same words is how you get a press that
   was meant for the other one. */
.make{margin-left:auto;font-family:var(--ui);font-size:13px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--brass);background:none;border:1px solid var(--brass-lo);
  border-radius:999px;padding:6px 14px;cursor:pointer}
.make:hover{color:var(--ink);background:var(--brass);border-color:var(--brass)}
.make:focus-visible{outline:2px solid var(--brass);outline-offset:2px}

/* ---------- the rooms (owner, 2026-10-10: the new lobby layout) ----------
   Séance Poker, the main room, across the top in a brass frame: its felt and a spade on the left, its name, players,
   one line and two buttons on the right; under it "Other card games", one smaller card each. The felt goes above the
   words on a phone (the flex wraps). */
.rooms{display:flex;flex-direction:column;gap:26px;margin-bottom:30px}
.room{border-radius:14px;background:var(--panel);border:1px solid var(--line)}
/* create a table first (2026-10-24): every game an equal card under "Create a table" */
.cf{margin:0 0 18px;padding:24px 28px;border:1px solid var(--brass);border-radius:16px;display:flex;align-items:center;gap:20px 24px;flex-wrap:wrap;
  background:linear-gradient(135deg,rgba(43,122,76,.35),rgba(29,22,17,.85) 60%)}
.cf-text{flex:1 1 300px;min-width:0}
.cf h2{margin:0;font-family:var(--display);font-weight:400;font-size:38px;line-height:1.05}
.cf p{margin:6px 0 0;color:var(--cream-2);font-size:17px;max-width:48ch}
.cf-go{font-family:var(--ui);font-weight:700;font-size:18px;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;
  padding:16px 30px;border-radius:10px;border:1px solid var(--brass);background:var(--brass);color:var(--ink)}
.cf-go:hover{background:var(--brass-hi);border-color:var(--brass-hi)}
.cf-go:focus-visible{outline:2px solid var(--brass-hi);outline-offset:2px}
@media (max-width:560px){ .cf{padding:20px} .cf h2{font-size:30px} .cf-go{width:100%} }
.games{display:grid;grid-template-columns:repeat(auto-fill,minmax(196px,1fr));gap:16px}
.room.game{display:flex;flex-direction:column;padding:0;overflow:hidden;border-radius:14px;cursor:pointer}
.room.game:hover{border-color:var(--brass)}
.game-pic{position:relative;overflow:hidden;height:120px;display:grid;place-items:center;
  background:radial-gradient(ellipse 70% 70% at 50% 45%,var(--felt-hi) 0%,var(--felt) 60%,#12402a 100%)}
.game-pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.game-text{flex:1;display:flex;flex-direction:column;gap:4px;padding:14px 16px 16px}
.game-text h3{margin:0;font-family:var(--display);font-weight:400;font-size:24px;line-height:1.1}
.game-text .room-players{font-size:13px;color:var(--brass)}
.game-text .room-line{font-size:14px;line-height:1.4}
.game-go{align-self:flex-start;margin-top:auto;padding:10px 0 0;border:none;background:none;cursor:pointer;
  font-family:var(--ui);font-weight:700;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--brass-hi)}
.game-go:focus-visible{outline:2px solid var(--brass-hi);outline-offset:2px}
@media (max-width:560px){ .games{grid-template-columns:1fr 1fr;gap:10px} .game-pic{height:90px}
  .game-text{padding:10px 12px 12px} .game-text h3{font-size:20px} .game-text .room-line{display:none} }
.room.big{display:flex;flex-wrap:wrap;overflow:hidden;border-radius:16px;border-color:var(--brass)}
.room.big.closed .room-felt{filter:grayscale(.7) brightness(.7)}
.room-closed{font-size:20px!important;color:var(--cream)!important}
.room.picked{box-shadow:0 0 0 2px var(--brass-hi)}
/* the main room's photo (2026-10-12): it fills its side of the card */
.room-photo{position:relative;overflow:hidden;display:block;min-height:260px}
.room.big .room-photo{flex:1 1 50%}
.room.big .room-photo + .room-text{flex:1 1 50%}
@media (max-width:760px){ .room.big .room-photo,.room.big .room-photo + .room-text{flex-basis:100%} .room-photo{min-height:200px} }
.room-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 60%}
.room-felt{flex:1 1 320px;min-height:240px;display:grid;place-items:center;
  background:radial-gradient(ellipse 70% 70% at 50% 45%, var(--felt-hi) 0%, var(--felt) 60%, #12402a 100%)}
.room-chip{width:170px;height:170px;border-radius:50%;border:8px solid var(--brass);display:grid;place-items:center;background:var(--felt)}
.room.big .room-text{flex:999 1 420px;min-width:0;padding:28px 30px;display:flex;flex-direction:column;gap:10px;justify-content:center}
.room.big h2{font-size:44px;line-height:1.05}
.room-players{margin:0;font-weight:700;font-size:15px;letter-spacing:.14em;text-transform:uppercase;color:var(--brass-hi)}
.room.small .room-players{font-size:13px;color:var(--brass)}
.room-line{margin:0;color:var(--cream-2);max-width:52ch}
.room.big .room-line{font-size:18px}
.room-acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.room-btn{font-family:var(--ui);font-weight:700;font-size:15px;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;
  padding:12px 20px;border-radius:8px;border:1px solid var(--brass);background:var(--brass);color:var(--ink)}
.room-btn:hover{background:var(--brass-hi);border-color:var(--brass-hi)}
.room-btn.ghosted{background:none;color:var(--cream)}
.room-btn.ghosted:hover{background:rgba(201,164,92,.15)}
.room-btn.small{font-size:13px;padding:8px 14px;align-self:flex-start;margin-top:6px}
.room-btn[aria-pressed="true"]{background:var(--brass);color:var(--ink)}
.room-btn:focus-visible{outline:2px solid var(--brass-hi);outline-offset:2px}
.others-h{margin:0 0 14px;font-family:var(--ui);font-weight:700;font-size:13px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
.others{display:flex;flex-wrap:wrap;gap:16px}
.room.small{flex:1 1 240px;min-width:0;display:flex;gap:14px;align-items:flex-start;padding:16px 18px}
.room-mark{flex:none;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:var(--felt);box-shadow:0 0 0 2px var(--brass)}
.room.small .room-text{display:flex;flex-direction:column;gap:4px;min-width:0}
/* a small room with a photo (2026-10-13): the photo across its top, the text under it */
.room.small:has(> .room-photo){flex-direction:column;gap:0;padding:0;overflow:hidden}
.room.small > .room-photo{flex:none;width:100%;min-height:150px}
.room.small > .room-photo + .room-text{padding:14px 18px 16px}
.room.small h3{margin:0;font-family:var(--display);font-weight:400;font-size:24px;line-height:1.1}
@media (max-width:560px){ .room-felt{min-height:180px} .room-chip{width:130px;height:130px} .room-chip svg{width:72px;height:72px}
  .room.big .room-text{padding:22px 20px} .room.big h2{font-size:36px} }
.room-acts.small{gap:8px;margin-top:6px}
.room-acts.small .room-btn.small{margin-top:0}
/* THE CREATE PAGE (owner, 2026-10-10): index.html?create=<mode> shows the form alone, centred, with a way back; the lobby
   itself no longer shows it (js/lobby.js) */
body:not(.creating) .side > .create{display:none}
body.creating .rooms,body.creating .grid > section,body.creating .friends,body.creating .chat,body.creating .foot{display:none}
body.creating .grid{display:block}
body.creating .side{max-width:640px;margin:0 auto}
.create .to-lobby{display:inline-block;margin:0 0 10px;font-weight:700;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);text-decoration:none}
.create .to-lobby:hover{color:var(--ink)}
/* a mode's own page: its mode is the page's, so the mode buttons go; its line stays, under the heading */
.mode-fixed > label,.mode-fixed .mode-chips{display:none}
/* "Showing the Big Two tables only. Show every game" — over the lists while a room's "See tables" is pressed */
.showing{margin:0 0 14px;color:var(--cream-2)}
.showing .link{font:inherit;color:var(--brass-hi);background:none;border:none;padding:0;cursor:pointer;text-decoration:underline}

/* ---------- layout ---------- */
.grid{display:grid;grid-template-columns:minmax(0,1fr) 390px;gap:28px;align-items:start}
@media (max-width:900px){ .grid{grid-template-columns:1fr} h1{font-size:44px} }
h2{margin:0;font-family:var(--display);font-weight:400;font-size:28px}
.section-head{display:flex;align-items:baseline;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.count{color:var(--muted);font-size:15px;letter-spacing:.06em}

/* ---------- finding a game in forty of them (Rany, v41.31) ----------
   "add a search/filter textbox, and allow users to choose games as favorites"

   Pushed to the right of its heading rather than given a row of its own: it is a tool for the list
   under it, and a list you can already see is the thing a filter is about. `margin-left:auto` inside
   the flex head does that without a wrapper. */
.findrow{margin-left:auto;display:flex;align-items:center;gap:10px}
.find{
  font-family:inherit;font-size:14px;color:var(--cream,#f3e9d6);
  background:rgba(24,18,13,.75);border:1px solid rgba(201,164,92,.34);border-radius:6px;
  padding:7px 11px;min-width:190px;max-width:44vw;
}
.find::placeholder{color:rgba(201,164,92,.55)}
.find:focus{outline:none;border-color:rgba(201,164,92,.75);background:rgba(30,23,16,.9)}
/* How many of them the filter is letting through, so an empty list reads as "no match" and not as
   "the games have gone". */
.findnote{color:var(--muted);font-size:13px;white-space:nowrap}

/* The star. A button, not a tick — it is one press and it says its own state, so it carries
   aria-pressed and changes only its colour and its glyph. Sized generously enough to hit on a phone
   without becoming the loudest thing in the row. */
.fav{
  background:none;border:none;cursor:pointer;padding:2px 6px;line-height:1;
  font-size:19px;color:rgba(201,164,92,.35);transition:color .12s,transform .12s;
}
.fav:hover{color:rgba(201,164,92,.75);transform:scale(1.12)}
.fav[aria-pressed="true"]{color:#e8c66a}
.fav:focus-visible{outline:2px solid rgba(201,164,92,.8);outline-offset:2px;border-radius:4px}
/* A starred row is worth seeing at a glance in a list of forty, but only just — a brass edge, not a
   highlight that turns the page into bunting. */
.trow.starred{box-shadow:inset 3px 0 0 rgba(232,198,106,.75)}
tr.starred td:first-child{box-shadow:inset 3px 0 0 rgba(232,198,106,.75)}
@media (max-width:560px){ .findrow{width:100%} .find{min-width:0;flex:1;max-width:none} }

/* ---------- table list ---------- */
.tables{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.trow{
  display:grid;grid-template-columns:132px minmax(0,1fr) auto;gap:18px;align-items:center;
  padding:16px 18px;border-radius:14px;background:linear-gradient(180deg,var(--panel),var(--panel-2));
  border:1px solid var(--line);box-shadow:0 10px 24px rgba(0,0,0,.35);
}
@media (max-width:620px){ .trow{grid-template-columns:96px minmax(0,1fr)} .trow .acts{grid-column:1 / -1;justify-content:flex-start} }
/* a little table: walnut rail, felt, one dot per seat — filled when someone sits there */
.mini{position:relative;width:100%;max-width:132px;aspect-ratio:1.9;border-radius:50%;
  background:radial-gradient(ellipse at 50% 30%,var(--walnut-hi),var(--walnut) 70%);box-shadow:0 6px 12px rgba(0,0,0,.45)}
.mini::before{content:"";position:absolute;inset:9px;border-radius:50%;background:radial-gradient(ellipse at 50% 45%,var(--felt-hi),var(--felt));box-shadow:inset 0 0 0 1px rgba(201,164,92,.7)}
.mini i{position:absolute;width:12px;height:12px;border-radius:50%;transform:translate(-50%,-50%);background:#1a1410;box-shadow:0 0 0 1.5px var(--brass-lo)}
.mini i.on{background:var(--cream);box-shadow:0 0 0 1.5px var(--brass)}
.mini i.you{background:var(--oxblood);box-shadow:0 0 0 1.5px var(--brass-hi)}
.tname{margin:0;font-family:var(--display);font-size:24px;line-height:1.15;overflow-wrap:anywhere}
.meta{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 0;padding:0;list-style:none}
.meta li{font-size:14px;font-weight:600;letter-spacing:.03em;color:var(--cream-2);background:rgba(18,14,11,.6);border:1px solid var(--line);border-radius:6px;padding:2px 9px}
.meta li b{color:var(--brass);font-weight:700;margin-right:4px}
.last{margin:8px 0 0;font-size:14px;color:var(--muted);font-variant-numeric:tabular-nums}
.last .up{color:var(--good)} .last .down{color:var(--bad)}
.acts{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
@media (max-width:620px){ .acts{flex-direction:row;align-items:center} }

/* ---------- buttons ---------- */
button,.btn{font-family:var(--ui);cursor:pointer}
.primary,.sit{
  display:inline-flex;align-items:center;justify-content:center;border:none;border-radius:9px;
  background:linear-gradient(180deg,var(--brass-hi),var(--brass));color:var(--ink);
  font-weight:700;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;
  box-shadow:inset 0 1px 0 rgba(255,250,230,.6),0 3px 0 var(--brass-lo),0 8px 16px rgba(0,0,0,.35);
  transition:filter .15s,transform .08s;
}
.sit{font-size:16px;padding:10px 18px;white-space:nowrap}
.primary{width:100%;font-size:20px;padding:14px 18px;margin-top:6px}
.primary:hover,.sit:hover{filter:brightness(1.08)}
.primary:active,.sit:active{transform:translateY(2px)}
.ghost{background:none;border:1px solid transparent;color:var(--muted);font-size:14px;letter-spacing:.08em;text-transform:uppercase;padding:4px 8px;border-radius:6px}
.ghost:hover{color:var(--cream);border-color:var(--line)}
.ghost.confirm{color:var(--bad);border-color:var(--bad)}
:focus-visible{outline:2px solid #f0d99a;outline-offset:2px}

/* ---------- empty state ---------- */
.empty{border:1px dashed rgba(201,164,92,.5);border-radius:14px;padding:26px 22px;color:var(--cream-2);background:rgba(29,22,17,.5)}
.empty p{margin:0;max-width:48ch}
.empty-title{font-family:var(--display);font-size:24px;color:var(--cream);margin-bottom:6px!important}

/* ---------- create form: a cream plate, like the seats ---------- */
.create{
  position:relative;border-radius:14px;padding:22px 22px 24px;color:var(--ink);
  background:linear-gradient(180deg,#f6efde,var(--cream) 40%,var(--cream-2));
  box-shadow:0 0 0 1px rgba(0,0,0,.35),0 0 0 4px var(--walnut),0 18px 40px rgba(0,0,0,.5);
}
@media (max-width:900px){ .create{position:static} }
.create h2{color:var(--ink);margin-bottom:14px}
.field{display:flex;flex-direction:column;gap:6px;margin:0 0 16px;border:0;padding:0;min-width:0}
.field > label,.field > legend{font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);padding:0}
.field legend{margin-bottom:6px}
input[type=text],input[type=number],input[type=email],input[type=tel],select{
  width:100%;font-family:var(--ui);font-size:18px;font-weight:600;color:var(--ink);
  background:#fffaf0;border:1px solid #b9a67f;border-radius:8px;padding:8px 10px;font-variant-numeric:tabular-nums;
}
input:focus,select:focus{border-color:var(--brass-lo);box-shadow:0 0 0 3px rgba(201,164,92,.35);outline:none}
.with-unit{position:relative}
.with-unit input{padding-right:58px}
.with-unit span{position:absolute;right:12px;top:50%;transform:translateY(-50%);color:var(--ink-2);font-size:14px;font-weight:600;pointer-events:none}
.chips{display:flex;flex-wrap:wrap;gap:5px}
.chips button{font-size:14px;font-weight:600;padding:3px 9px;border-radius:999px;border:1px solid #b9a67f;background:transparent;color:var(--ink-2)}
.chips button:hover{border-color:var(--brass-lo);color:var(--ink)}
.chips button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--cream)}
.hint{margin:0;font-size:14px;color:var(--ink-2);line-height:1.35}
.pair{display:grid;grid-template-columns:1.25fr 1fr;gap:12px}
.pair .field{margin-bottom:8px}
.pair + .hint{margin:-2px 0 16px}
.seats{display:flex;flex-direction:column;gap:8px}
.seat-opt{display:grid;grid-template-columns:auto 34px 1fr;align-items:center;gap:10px;padding:8px 12px;border:1px solid #c9b88f;border-radius:10px;cursor:pointer;background:rgba(255,250,240,.5)}
.seat-opt input{accent-color:var(--oxblood);margin:0}
.seat-opt .n{font-family:var(--display);font-size:26px;line-height:1;color:var(--ink);text-align:center}
/* a word in the number's place (2026-10-05: every table is six seats; the choice is laps or none) */
.seat-opt{grid-template-columns:auto minmax(34px,auto) 1fr}
.seat-opt .n.w{font-size:19px;white-space:nowrap;text-align:left;min-width:4.4em}
.seat-opt .d{font-size:15px;color:var(--ink-2);line-height:1.25}
.seat-opt:has(input:checked){border-color:var(--ink);background:#fffaf0;box-shadow:inset 0 0 0 1px var(--ink)}
.error{margin:0 0 10px;padding:8px 10px;border-radius:8px;background:rgba(142,27,34,.1);color:var(--oxblood);font-weight:600;font-size:15px;border:1px solid rgba(142,27,34,.35)}

.foot{margin-top:34px;padding-top:16px;border-top:1px solid var(--line);color:var(--muted);font-size:14px;max-width:70ch}
@media (prefers-reduced-motion:reduce){ *{transition:none!important} }

/* ---------- your cards ---------- */
.cards-head{margin-top:34px}
.cards-pick{display:flex;flex-direction:column;gap:12px;padding:14px 16px;border-radius:14px;
  background:linear-gradient(180deg,var(--panel),var(--panel-2));border:1px solid var(--line);box-shadow:0 10px 24px rgba(0,0,0,.35)}
.cards-pick .deck-row{gap:10px}
.cards-pick .deck-opt small{color:var(--cream-2);font-size:13px}
.cards-pick .deck-label{color:var(--brass);opacity:1;width:44px}

/* ---------- you ---------- */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.you input{width:150px;background:transparent;border:1px solid transparent;border-radius:6px;color:var(--cream);font:inherit;font-weight:600;padding:3px 6px}
.you input:hover,.you input:focus{border-color:var(--line);outline:none;background:rgba(0,0,0,.25)}
.you button{font-family:var(--ui);font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;background:var(--brass);color:var(--ink);border:none;border-radius:999px;padding:5px 12px;cursor:pointer}
.you button[hidden]{display:none}
.net,.tabs .net{width:10px;height:10px;border-radius:50%;background:#5a4632;margin:0 6px 0 2px;flex:none}
.net.online{background:var(--good);box-shadow:0 0 8px rgba(127,196,138,.6)}
.net.connecting{background:var(--brass)}
.net.offline{background:#5a4632}

/* ---------- right column: chat above the form ---------- */
.side{display:flex;flex-direction:column;gap:26px;min-width:0}
.chat{border-radius:14px;padding:16px 16px 14px;background:linear-gradient(180deg,var(--panel),var(--panel-2));border:1px solid var(--line);box-shadow:0 10px 24px rgba(0,0,0,.35)}
.chat-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.chat h2{font-size:24px}
/* Who is online: a strip of faces that still reads with twenty people on it, and the full list with
   names underneath when you press it. */
.online{margin:4px 0 10px;font-size:14px;color:var(--muted)}
.online .nobody{color:var(--muted)}
.pfaces{display:flex;align-items:center;padding:2px;background:none;border:0;cursor:pointer;border-radius:999px}
.pfaces:hover .pface,.pfaces.open .pface{border-color:var(--brass-lo)}
.pfaces:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
.pface{
  width:26px;height:26px;flex:none;margin-right:-7px;border-radius:50%;
  display:grid;place-items:center;font-style:normal;font-size:12px;font-weight:700;letter-spacing:0;
  background:var(--av,#4a3828);color:#f6efe0;border:2px solid var(--room-2);transition:border-color .15s;
}
.pface:last-child{margin-right:0}
.pface.playing{box-shadow:0 0 0 2px var(--brass-lo)}
/* a player's own picture in the presence strip (v33) — cropped to the circle, the initial hidden
   only once the picture is really there, so a photo that fails to load still leaves an avatar */
.pface.has-photo{background-size:cover;background-position:50% 50%;background-repeat:no-repeat;color:transparent}
.pface.me{box-shadow:0 0 0 2px var(--brass)}
.pface.more{background:#3a2c20;color:var(--cream-2);font-size:11px}
/* the opened list */
.names{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.names .who{display:inline-flex;align-items:center;gap:7px;padding:3px 10px 3px 3px;border-radius:999px;
  border:1px solid var(--line);background:rgba(36,26,19,.55);max-width:100%}
.names .who .pface{width:20px;height:20px;margin:0;font-size:10px;border-width:1px}
.names .who b{color:var(--cream-2);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.names .who em{font-style:normal;font-size:12px;color:var(--muted);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;max-width:14ch}
.names .who.playing{border-color:var(--brass-lo)}
.names .who.playing em{color:var(--brass)}
.names .who.me{border-color:var(--brass);background:rgba(201,164,92,.12)}
/* ---------- friends (Rany, v43) ----------
   The same panel as the chat, so the side column reads as one thing: who is about, then what is being
   said. Everything in it is a row of people, and a row of people is the `.names .who` pill the online
   strip already uses — reused rather than reinvented, so a friend looks the same wherever he appears. */
.friends{border-radius:14px;padding:16px;background:linear-gradient(180deg,var(--panel),var(--panel-2));
  border:1px solid var(--line);box-shadow:0 10px 24px rgba(0,0,0,.35)}
.friends h2{font-size:24px}
/* The switch reads as a sentence about other people, not as a labelled control: what a man wants to
   know is whether strangers can see him, and "visible to all" is the name of a flag. */
.seen-by{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:var(--muted);cursor:pointer;
  white-space:nowrap}
.seen-by input{accent-color:var(--brass);width:15px;height:15px;cursor:pointer}
.seen-by:hover{color:var(--cream-2)}
.seen-by-set{display:flex;flex-direction:column;align-items:flex-end;gap:3px}
.friends .hint{margin:6px 0 0;font-size:13px;color:var(--muted)}
.frow{display:flex;align-items:center;gap:8px;padding:5px 6px 5px 5px;border-radius:999px;
  border:1px solid var(--line);background:rgba(36,26,19,.55);margin-top:7px}
.frow .pface{width:22px;height:22px;margin:0;font-size:11px;border-width:1px}
.frow b{color:var(--cream-2);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}
.frow em{font-style:normal;font-size:12px;color:var(--muted);white-space:nowrap}
/* online now: the same brass ring the presence strip uses for somebody at a table, so the two panels
   agree about what "he is here" looks like */
.frow.on{border-color:var(--brass-lo)}
.frow.on em{color:var(--good)}
.frow.off{opacity:.55}
.frow button{font-family:var(--ui);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  background:#3a2c20;color:var(--cream);border:1px solid #5a4632;border-radius:5px;padding:3px 9px;cursor:pointer;flex:none}
.frow button:hover{border-color:var(--brass)}
.frow button.yes{background:rgba(127,196,138,.16);border-color:rgba(127,196,138,.5);color:var(--good)}
.frow button.drop{background:none;border-color:transparent;color:var(--muted);padding:3px 6px}
.frow button.drop:hover{color:#e7a0a4;border-color:rgba(231,160,164,.4)}
/* somebody waiting on an answer — the one row in here that is asking for something */
.frow.asking{border-color:var(--brass);background:rgba(201,164,92,.12)}
.friends .none{margin:8px 0 0;font-size:14px;color:var(--muted)}
/* The two lists, as two tabs of one panel (v43.1). Quiet by default and brass when chosen: this is a
   switch between two views of the same room, not a navigation bar. */
.ftabs{display:flex;gap:6px;margin:12px 0 2px;border-bottom:1px solid var(--line)}
.ftab{font-family:var(--ui);font-size:14px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  background:none;border:0;border-bottom:2px solid transparent;color:var(--muted);padding:6px 4px 7px;cursor:pointer;
  display:inline-flex;align-items:center;gap:6px;margin-bottom:-1px}
.ftab:hover{color:var(--cream-2)}
.ftab[aria-selected="true"]{color:var(--cream);border-bottom-color:var(--brass)}
.ftab:focus-visible{outline:2px solid var(--brass);outline-offset:2px;border-radius:4px}
/* how many, in a small pill. It turns brass when somebody is WAITING on an answer, which is the one
   thing in this panel worth catching an eye that is looking at the other tab. */
.fcount{font-size:11px;font-weight:700;letter-spacing:.04em;color:var(--muted);
  background:rgba(18,14,11,.6);border:1px solid var(--line);border-radius:999px;padding:0 6px;min-width:18px;text-align:center}
.fcount:empty{display:none}
.fcount.asking{color:var(--ink);background:var(--brass);border-color:var(--brass)}
.fsearch{width:100%;margin:10px 0 2px;font-family:var(--ui);font-size:15px;color:var(--cream);
  background:#1a1410;border:1px solid var(--line);border-radius:6px;padding:7px 10px}
.fsearch::placeholder{color:rgba(201,164,92,.55)}
.fsearch:focus{outline:none;border-color:var(--brass)}
/* A row of the Public list IS the button — "u can add friends by clicking on a user from the public
   list" — so it is a real <button> carrying the same shape as the rows beside it, with the + only
   appearing under the pointer so a list of them does not read as a row of controls. */
button.frow.pub{width:100%;text-align:left;font-family:var(--ui);font-size:16px;color:inherit;cursor:pointer}
button.frow.pub:hover,button.frow.pub:focus-visible{border-color:var(--brass);background:rgba(201,164,92,.1)}
/* The + is always there, faintly: a row you can press has to look like one before the pointer is on
   it, and on a touch screen there is no before. It lights up under the pointer. */
button.frow.pub .plus{font-style:normal;font-size:17px;font-weight:700;color:var(--brass);opacity:.4;flex:none;padding:0 2px;transition:opacity .12s}
button.frow.pub:hover .plus,button.frow.pub:focus-visible .plus{opacity:1}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.chat-log{height:230px;overflow-y:auto;display:flex;flex-direction:column;gap:4px;padding:8px 10px;border-radius:8px;background:rgba(12,9,7,.55);border:1px solid var(--line);
  font-size:15px;line-height:1.35;scrollbar-width:thin;scrollbar-color:#5a4632 transparent}
.chat-log p{margin:0;overflow-wrap:anywhere}
.chat-log .who{color:var(--brass);font-weight:700}
.chat-log .me .who{color:#e7a0a4}
.chat-log time{color:var(--muted);font-size:12px;margin-left:6px}
.chat-log .none{color:var(--muted)}
/* The day the messages below it were said (v45). A rule with the date sitting in it, so it reads as a
   break in the log rather than as another message: the line is drawn across the whole width by the
   pseudo-elements either side, and the label is the only thing above the background. `gap` on .chat-log
   already spaces it, and a touch more above than below because the heading belongs to what follows. */
.chat-log .daybreak{display:flex;align-items:center;gap:8px;margin:8px 0 2px;color:var(--muted);
  font-family:var(--ui);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.chat-log .daybreak::before,.chat-log .daybreak::after{content:'';flex:1;height:1px;background:var(--line)}
.chat-log .daybreak:first-child{margin-top:0}
.chat-row{display:flex;gap:6px;margin-top:8px}
.chat-row input{flex:1;min-width:0;font-family:var(--ui);font-size:16px;color:var(--cream);background:#1a1410;border:1px solid var(--line);border-radius:6px;padding:7px 10px}
.chat-row input:focus{outline:none;border-color:var(--brass)}
.chat-row button{font-family:var(--ui);font-size:14px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;background:#3a2c20;color:var(--cream);border:1px solid #5a4632;border-radius:6px;padding:0 14px;cursor:pointer}
.chat-off{margin:8px 0 0;font-size:14px;color:var(--muted)}
.chat.offline .chat-log,.chat.offline .chat-row,.chat.offline .online{opacity:.45;pointer-events:none}

/* ---------- live now ---------- */
.live-head{margin-top:34px}
.empty-line{margin:0;color:var(--muted);font-size:15px}
.trow .host{margin:2px 0 0;font-size:14px;color:var(--cream-2)}
.trow .host b{color:var(--brass);font-weight:700}
.badge{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;border-radius:4px;padding:1px 7px;margin-left:8px;vertical-align:middle}
.badge.live{background:rgba(127,196,138,.16);color:var(--good);border:1px solid rgba(127,196,138,.5)}
.badge.away{background:rgba(156,138,112,.12);color:var(--muted);border:1px solid var(--line)}
.sit.wait{background:#3a2c20;color:var(--cream-2);box-shadow:none;cursor:default}
.sit[aria-disabled="true"]{opacity:.5;pointer-events:none}
.acts .note{font-size:13px;color:var(--muted);max-width:150px;text-align:right}

/* ---------- v9: the Games page ---------- */
.tables.games .trow{grid-template-columns:minmax(0,1fr) auto}
/* An admin's row carries five controls now (Rany, v43.6: publish / rename / disable / delete, and
   Try it) where it carried two, so the column they sit in is allowed to become two short lines
   rather than one tall one — a single column of five buttons is taller than the game it belongs to
   and drags every row apart. */
.tables.games .acts{flex-flow:row wrap;justify-content:flex-end;align-items:center;gap:6px;max-width:300px}
/* Renaming in place: the input stands exactly where the name stood, at the name's own size, so the
   row does not jump when it appears. */
.tname .rename{font-family:var(--display);font-size:22px;padding:2px 8px;min-width:0;width:min(320px,60vw)}
.gtitle{cursor:default}

/* The auto-sort switch, under the deck (Rany, v43.9). A tick and a sentence rather than a tick and
   two words: what it does when it is OFF is the part worth saying, and that takes a line. */
.sortrow{display:flex;gap:10px;align-items:flex-start;margin-top:18px;padding:14px 16px;
  border:1px solid var(--line);border-radius:10px;background:rgba(29,22,17,.55);cursor:pointer}
.sortrow input{margin:3px 0 0;accent-color:var(--brass);width:16px;height:16px;flex:none}
.sortrow b{display:block;font-size:16px;font-weight:600;color:var(--cream)}
.sortrow span{font-size:14px;color:var(--muted);line-height:1.45;max-width:56ch}
.sortrow:hover{border-color:var(--brass-lo)}
/* a row with a choice of three rather than a tick (Chinese Poker's card size, 2026-10-14) */
.sizerow{cursor:default}
.sizerow .seg{display:inline-flex;margin:10px 0 0}
.sizerow .seg button{padding:8px 16px}
/* the Options page's side column (v46.1): the table's own switches, in two small groups */
.prefs .hint{color:var(--cream-2);margin-top:6px}
.prefs .hint b{color:var(--brass);letter-spacing:.06em}
.prefs-sub{margin:20px 0 0;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--brass)}
.prefs .sortrow{margin-top:10px}

/* The séance a person takes off his own list (Rany, v43.6). Quiet until it is armed: the row it sits
   in is one you click to open, so a loud red button beside "Open" would be the loudest thing on a
   page about reading back an evening. Armed, it says exactly what it is about to do. */
/* Moving between hands, beside the way back up (Rany, v43.8). Pushed to the far end of the crumb
   row so the two kinds of "back" are not side by side: one leaves the hand, these two change it. */
.crumbs{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.handnav{margin-left:auto;display:flex;gap:6px}
.handnav .ghost{font-size:13px;border-color:var(--line)}
.handnav .ghost:disabled{opacity:.4;cursor:default;border-color:transparent;color:var(--muted)}

.acts .rm{font-size:13px}
.acts .rm.confirm{color:var(--bad);border-color:var(--bad)}
.acts .rm-all{color:var(--bad)}
.trow.game .rules{margin:8px 0 0;display:flex;flex-wrap:wrap;gap:4px 18px;font-size:15px;color:var(--cream-2)}
.trow.game .rules b{color:var(--brass);font-weight:700;font-size:11px;letter-spacing:.14em;text-transform:uppercase;margin-right:4px}
.trow.game .steps{margin:6px 0 0;font-size:13px;color:var(--muted);overflow-wrap:anywhere}
.badge.pending{background:rgba(201,164,92,.14);color:#f0d99a;border:1px solid var(--brass-lo)}

/* ---------- v9: simulation tables ---------- */
.sim-toggle{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:600;color:var(--ink);text-transform:none;letter-spacing:0}
.sim-toggle input{accent-color:var(--oxblood);width:18px;height:18px;margin:0}
.sim-seats{display:flex;flex-direction:column;gap:6px;margin:4px 0 2px}
.sim-seats div{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:10px}
.sim-seats span{font-size:14px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.sim-seats select{font-size:16px;padding:5px 8px}
.badge.tour{background:rgba(201,164,92,.16);color:var(--brass-hi);border:1px solid var(--brass-lo);letter-spacing:.08em}
.badge.sim{background:rgba(201,164,92,.16);color:var(--brass);border:1px solid var(--brass-lo)}
/* a table with a password (v41.2) — and for its host, the word itself, which is not shouted */
.badge.lock{background:rgba(142,27,34,.16);color:#e5b6b6;border:1px solid rgba(179,38,46,.5);letter-spacing:.08em}
/* You have been asked to this table (v43). Brass and gently pulsing: it is the one badge on the row
   that is waiting for an answer, and the row it sits on is otherwise a table like any other. */
.badge.invited{background:rgba(201,164,92,.2);color:#f6efe0;border:1px solid var(--brass);
  animation:inv-glow 2.2s ease-in-out infinite}
@keyframes inv-glow{0%,100%{box-shadow:0 0 0 0 rgba(201,164,92,.4)}50%{box-shadow:0 0 0 5px rgba(201,164,92,0)}}
@media (prefers-reduced-motion:reduce){.badge.invited{animation:none}}
.passpick input{font-size:13px;border-radius:7px;padding:5px 11px;border:1px solid var(--line);
  background:#241a13;color:var(--cream);min-width:180px}
.passpick input:focus{outline:none;border-color:var(--brass-lo)}
.passpick input.bad{border-color:rgba(179,38,46,.7)}

/* ---------- v8: your account (header), sign-in page, admin page ---------- */
.you .who{padding:0 4px;white-space:nowrap}
.you a,.you .link{font-family:var(--ui);font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--cream-2);text-decoration:none;
  background:none;border:1px solid var(--line);border-radius:999px;padding:4px 11px;cursor:pointer}
.you a:hover,.you .link:hover{color:var(--cream);border-color:var(--brass-lo)}
.you .pill{display:inline-grid;place-items:center;min-width:18px;height:18px;margin-left:5px;padding:0 5px;border-radius:9px;background:var(--oxblood);color:#fff;font-size:11px;letter-spacing:0}
/* the build the server says it is running (v41.2) — admins only, and deliberately quiet: it is there
   to be checked after a deploy, not to be read every time you open the lobby */
.you .build{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;letter-spacing:.04em;
  color:var(--muted);border:1px solid var(--line);border-radius:5px;padding:2px 7px;background:rgba(36,26,19,.6)}
.you .build[hidden]{display:none}
.auth{max-width:420px;margin:6vh auto 0}
.auth .brand{text-align:center;margin-bottom:22px}
.auth .brand h1{font-size:52px}
.auth .create{padding-top:14px}
.switch{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;margin:0 0 18px;border-radius:10px;background:rgba(42,29,18,.1);border:1px solid #c9b88f}
.switch button{border:none;background:none;border-radius:7px;padding:8px 6px;font-size:15px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.switch button[aria-selected="true"]{background:var(--ink);color:var(--cream)}
input[type=password]{width:100%;font-family:var(--ui);font-size:18px;font-weight:600;color:var(--ink);background:#fffaf0;border:1px solid #b9a67f;border-radius:8px;padding:8px 10px}
.ok-note{margin:0 0 10px;padding:10px 12px;border-radius:8px;background:rgba(29,86,55,.1);color:#1d5637;font-weight:600;font-size:15px;border:1px solid rgba(29,86,55,.35)}
.auth .small{margin:16px 0 0;text-align:center;color:var(--muted);font-size:14px}
.auth .small a{color:var(--oxblood);font-weight:600}
.users{width:100%;border-collapse:collapse;font-size:16px}
.users th{text-align:left;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--brass);padding:8px 10px;border-bottom:1px solid var(--line)}
.users td{padding:10px;border-bottom:1px solid rgba(74,56,40,.6);vertical-align:middle}
.users td.acts{display:flex;flex-direction:row;flex-wrap:wrap;gap:6px;justify-content:flex-end;align-items:center}
.users .sit{font-size:13px;padding:6px 12px}
/* Deleting an account for good (v45). The Delete button is muted like its neighbours until it is
   pressed — it is not the loud thing in the row, it is the last thing in it — and turns to the warning
   colour only on hover, so the column still reads as a row of equals. The strip that replaces the cell
   IS loud, because by then the admin has asked for it and needs to read the name back. */
.users .ghost.bad:hover{color:var(--bad);border-color:var(--bad)}
.users .delask{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--bad)}
.users input.delname{font-family:var(--ui);font-size:14px;color:var(--cream);background:#1a1410;
  border:1px solid var(--bad);border-radius:6px;padding:4px 8px;width:14ch;min-width:0}
.users input.delname:focus{outline:none;border-color:var(--brass)}
.users .ghost.bad.go[disabled]{opacity:.45;border-color:transparent;color:var(--muted);cursor:default}
.users .ghost.bad.go:not([disabled]){color:var(--bad);border-color:var(--bad)}
.users .tag{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;border-radius:4px;padding:1px 7px;border:1px solid var(--line);color:var(--muted);margin-left:6px}
.users .tag.admin{color:var(--brass);border-color:var(--brass-lo)}
.users .tag.pending{color:#f0d99a;border-color:#8c6d33}
.users .tag.disabled{color:var(--bad);border-color:rgba(224,103,109,.5)}
/* Connected right now (v41.35). Green, and with no left margin: unlike the others this is not a badge
   pinned after a name, it is the whole contents of the "Last seen" cell. */
.users .tag.online{color:#7fc79a;border-color:rgba(127,199,154,.45);margin-left:0}
.users .when{color:var(--muted);font-size:14px;white-space:nowrap}
/* the Accounts page's site switches (2026-10-12) */
.site-box{padding:14px 16px}
.site-box.on{border-color:var(--bad);box-shadow:0 0 0 1px var(--bad),0 10px 24px rgba(0,0,0,.35)}
.site-switch,.site-mode{display:flex;gap:10px;align-items:flex-start;cursor:pointer}
.site-switch input,.site-mode input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--brass);flex:none}
.site-switch span{display:flex;flex-direction:column;gap:2px}
.site-switch small,.site-head small{display:block;color:var(--muted);font-size:13px;font-weight:400}
.site-head{margin:16px 0 8px;font-weight:700}
.site-switch.site-gap{margin-top:12px}
.site-modes{display:flex;flex-wrap:wrap;gap:10px 24px}
.site-mode span{font-weight:600}
.site-tag{display:inline-block;margin-left:6px;padding:0 6px;border:1px solid var(--line);border-radius:6px;font-size:11px;font-weight:600;color:var(--muted);vertical-align:1px}
.panelbox{border-radius:14px;padding:6px 8px 10px;background:linear-gradient(180deg,var(--panel),var(--panel-2));border:1px solid var(--line);box-shadow:0 10px 24px rgba(0,0,0,.35);overflow-x:auto;margin-bottom:28px}
.reqs{margin:8px 0 0;display:flex;flex-direction:column;gap:6px}
.reqs div{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:14px;color:var(--cream-2)}
.reqs b{color:var(--brass)}
.reqs button{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;border-radius:6px;padding:3px 10px;border:1px solid var(--line);background:#3a2c20;color:var(--cream)}
.reqs button.yes{background:var(--brass);color:var(--ink);border-color:var(--brass)}
/* ---------- choosing which seat to take (Rany, v41.2) ----------
   It opens under the table's own row, beside the line saying who is already there, because where you
   want to sit is usually a question about who you want to sit next to. A bot's chair carries the
   bot's name on a second line: taking it puts that bot out, which should be done on purpose. */
.seatpick{margin:9px 0 0;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.seatpick-lead{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--brass)}
.trow .acts .ghost.seatpick-one,
.seatpick button{display:inline-flex;flex-direction:column;align-items:flex-start;gap:1px;
  font-size:13px;font-weight:600;line-height:1.15;border-radius:7px;padding:5px 11px;
  border:1px solid var(--line);background:#3a2c20;color:var(--cream)}
.seatpick button:hover{border-color:var(--brass-lo)}
.seatpick button i{font-style:normal;font-size:11px;font-weight:500;color:var(--cream-2);letter-spacing:.02em}
.seatpick .seatpick-any{color:var(--cream-2);background:transparent}

.people{margin:4px 0 0;font-size:14px;color:var(--cream-2)}
.people .here{color:var(--good)}
.trow .acts .ghost{font-size:13px}

/* ---------- History (v29): séances, their results, and every hand ---------- */
.trow.pick{grid-template-columns:minmax(0,1fr) auto;cursor:pointer;transition:border-color .15s,transform .08s}
.trow.pick:hover,.trow.pick:focus-visible{border-color:var(--brass-lo);outline:none}
.trow.pick:active{transform:translateY(1px)}
.stable .go,.trow.pick .go{font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--brass)}
.trow .gname{font-family:var(--ui);font-size:14px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--brass);margin-left:10px;vertical-align:middle}
.meta li.on{color:var(--brass);border-color:var(--brass-lo)}
.meta li.notmine{color:var(--muted);font-style:italic}
.meta li.up b,.meta li.up{color:var(--good)} .meta li.down{color:var(--bad)}
.crumbs{margin:0 0 14px}
.results{margin-bottom:26px}
.results .standings{width:100%;max-width:420px;border-collapse:collapse;font-variant-numeric:tabular-nums}
.results .standings th{text-align:left;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--brass);padding:0 10px 6px 0;border-bottom:1px solid var(--line)}
.results .standings td{padding:5px 10px 5px 0;font-size:16px;color:var(--cream-2);border-bottom:1px solid rgba(74,56,40,.4)}
.results .note{margin:0;color:var(--muted);font-size:15px}
.results .standings th:not(:first-child),.results .standings td:not(:first-child){text-align:right;padding-left:10px}
.results .standings td.up{color:var(--good)} .results .standings td.down{color:var(--bad)}
/* a tournament's results (2026-10-10): the place first, the player's name beside it, left like a name */
.results .standings.tour{max-width:560px}
.results .standings.tour th:nth-child(2),.results .standings.tour td:nth-child(2){text-align:left}
/* a séance's results, opened under its row in the list (v46.0) */
.trow .res-panel{grid-column:1 / -1;margin:6px 0 0;cursor:default}
.trow .res-panel .note{margin-bottom:6px}

/* ---------- History: the players' figures (owner: "clean the players list with their stats") ----------
 * A real grid: one row a player, every figure under its heading, numbers right-aligned. Your own row is
 * picked out by colour and a faint tint, never by changing its shape (the old row borrowed the nav's
 * `.you` pill and stopped being a table row). Short headings on a phone, full words where there is room;
 * the table scrolls sideways inside its own box rather than pushing the page wider. */
.seg{display:inline-flex;flex-wrap:wrap;gap:0;margin:0 0 12px;border:1px solid var(--line);border-radius:999px;overflow:hidden;background:rgba(0,0,0,.2)}
.seg button{font:inherit;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--cream-2);
  background:none;border:none;border-right:1px solid var(--line);padding:6px 14px;cursor:pointer}
.seg button:last-child{border-right:none}
.seg button:hover{color:var(--cream);background:rgba(201,164,92,.1)}
.seg button.on{color:var(--ink);background:var(--brass)}
.seg button:focus-visible{outline:2px solid var(--brass);outline-offset:-2px}
.lt-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-bottom:26px;max-width:100%}
.lt{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;font-size:15px}
.lt th{text-align:right;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--brass);
  padding:0 10px 6px;border-bottom:1px solid var(--line);white-space:nowrap;cursor:help}
.lt th:first-child,.lt td:first-child{text-align:left;padding-left:8px}
.lt td{text-align:right;padding:6px 10px;color:var(--cream-2);border-bottom:1px solid rgba(74,56,40,.4);white-space:nowrap}
.lt td:first-child{color:var(--cream);max-width:160px;overflow:hidden;text-overflow:ellipsis}
.lt td small{font-size:.78em;color:var(--muted)}
.lt tr.me td{color:var(--brass-hi);font-weight:700;background:rgba(201,164,92,.09)}
.lt tr.me td small{color:var(--brass)}
.lt .abbr{display:none}
@media (max-width:760px){
  .lt .abbr{display:inline} .lt .full{display:none}
  .lt{font-size:13px} .lt th,.lt td{padding-left:4px;padding-right:4px} .lt th{letter-spacing:.06em}
  .lt td:first-child{max-width:84px}
  .seg{display:grid;grid-template-columns:repeat(5,1fr);width:100%;border-radius:12px}
  .seg button{padding:7px 2px;font-size:12px;letter-spacing:.03em}
  .seg.seg-3{grid-template-columns:repeat(3,1fr)}
}
/* the séance list as a table (Rany, v46.1: layout D). Its own cells only (`>`), so the results table
   that opens under a line keeps its own, tighter look. */
.stable-wrap{max-width:100%}
.stable{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.stable > thead th{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--brass);
  text-align:left;padding:0 10px 8px;border-bottom:1px solid var(--line);white-space:nowrap}
.stable > tbody > tr > td{padding:10px;border-bottom:1px solid rgba(74,56,40,.5);color:var(--cream-2);white-space:nowrap;vertical-align:middle}
.stable > thead .num,.stable > tbody > tr > td.num{text-align:right}
.stable .srow{cursor:pointer}
.stable .srow:hover > td{background:rgba(201,164,92,.06)}
.stable .srow:focus-visible{outline:2px solid var(--brass);outline-offset:-2px}
.stable .tname{font-family:var(--display);font-size:19px;color:var(--cream);margin-right:8px}
.stable .tag{display:inline-block;font-size:12px;font-weight:600;color:var(--cream-2);background:rgba(18,14,11,.6);
  border:1px solid var(--line);border-radius:6px;padding:0 7px;margin-left:5px;vertical-align:middle}
.stable .tag.on{color:var(--brass-hi);border-color:var(--brass-lo)}
.stable .me{font-weight:700} .stable .me.up{color:var(--good)} .stable .me.down{color:var(--bad)}
.stable .me small{font-weight:400;color:var(--muted)}
.stable .notmine,.stable .dim{color:var(--muted);font-style:italic}
.stable > tbody > tr > td.acts{display:table-cell;text-align:right}
.stable .acts > *{margin-left:10px}
.stable .acts .rm{font-size:12px}
.stable > tbody > tr.res-row > td{padding:2px 10px 14px;white-space:normal}
.stable .res-panel{margin:0}
.stable .res-panel .standings td{padding:4px 10px 4px 0;font-size:15px}
/* a phone: each séance becomes a small block — name, then host · when · you, then the buttons */
@media (max-width:620px){
  .stable > thead{display:none}
  .stable > tbody{display:block;border-bottom:1px solid rgba(74,56,40,.5);padding:8px 0}
  .stable > tbody > tr.srow{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px}
  .stable > tbody > tr > td{display:block;padding:0;border:0}
  .stable > tbody > tr > td.sname{width:100%}
  .stable .opt{display:none}
  .stable > tbody > tr > td.num{margin-left:auto}
  .stable > tbody > tr > td.acts{display:block;width:100%;text-align:left;padding-top:4px}
  .stable .acts > *{margin:0 12px 0 0}
  .stable > tbody > tr.res-row{display:block}
  .stable > tbody > tr.res-row > td{display:block;padding:6px 0 4px}
}
/* the séance list's filters (v46.0): the bot choice, and "Hosted by me" beside it as a pill of its own */
.s-filters{display:flex;flex-wrap:wrap;align-items:flex-start;gap:8px 10px;margin:0 0 12px}
/* which game's stats (owner, 2026-10-10): a row of its own over the period's; as many buttons as there are games */
.seg.seg-mode{display:flex;width:max-content;max-width:100%}
@media (max-width:760px){ .seg.seg-mode{display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:1fr;width:100%} }
.s-filters .seg{margin:0}
.seg-toggle{font:inherit;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--cream-2);
  background:rgba(0,0,0,.2);border:1px solid var(--line);border-radius:999px;padding:6px 14px;cursor:pointer}
.seg-toggle:hover{color:var(--cream);background:rgba(201,164,92,.1)}
.seg-toggle[aria-pressed="true"]{color:var(--ink);background:var(--brass);border-color:var(--brass)}
.seg-toggle:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
@media (max-width:760px){
  .s-filters .seg{grid-template-columns:repeat(3,1fr)}
  .seg-toggle{width:100%;border-radius:12px;padding:7px 2px;font-size:12px;letter-spacing:.03em}
}
/* one hand, laid out to read rather than drawn on a felt */
.replay{display:flex;flex-direction:column;gap:12px;margin-bottom:14px}
.rp-board,.rp-thrown{padding:12px 14px;border-radius:12px;background:rgba(29,86,55,.28);border:1px solid var(--line)}
.rp-label{margin:0 0 8px;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--brass)}
.rp-pot{margin:8px 0 0;font-size:15px;color:var(--cream-2);font-variant-numeric:tabular-nums}
.rp-pot.split{display:flex;flex-wrap:wrap;gap:4px 14px}
.rp-potline.current{color:var(--cream);font-weight:600}
.rp-seat{padding:10px 14px;border-radius:12px;background:rgba(29,22,17,.6);border:1px solid var(--line)}
.rp-seat.me{border-color:var(--brass-lo);background:rgba(201,164,92,.09)}
.rp-seat.folded{opacity:.5}
.rp-who{margin:0 0 8px;display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-size:17px;font-weight:600;color:var(--cream)}
.rp-who em{font-style:normal;font-size:15px;font-weight:500;color:var(--cream-2);font-variant-numeric:tabular-nums}
.rp-who b{font-size:14px;font-weight:600;color:var(--brass);font-variant-numeric:tabular-nums}
.rp-who .rp-act{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  border:1px solid var(--line);border-radius:4px;padding:1px 7px}
.rp-who i{font-style:normal;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--display);font-size:12px}
.rp-who .rp-d{background:var(--oxblood);color:#fff3e6}
/* the banker of a 7 w noss round: the word in a brass pill, where a poker hand has its D */
.rp-who .rp-d.bank{width:auto;padding:0 7px;border-radius:999px;font-size:10px;letter-spacing:.08em;background:var(--brass,#c9a45c);color:#2a1d12}
.rp-who .rp-o{background:var(--brass);color:#2a1d12}
/* the cards are the real ones (js/cards.js): each sits in a box its own size and is SCALED into it,
   so every rule inside the card keeps the proportions it was drawn for */
.rp-cards{display:flex;gap:6px;flex-wrap:wrap;min-height:66px;align-items:flex-start}
.rp-run{display:flex;align-items:center;gap:10px}
.rp-run + .rp-run{margin-top:6px}
.rp-run-n{flex:none;width:44px;font-size:12px;color:var(--muted)}
.rp-cards .cw{position:relative;display:block;flex:none;overflow:hidden;border-radius:5px}
.rp-controls{display:flex;align-items:center;gap:8px;margin-bottom:12px;flex-wrap:wrap}
.rp-controls button{min-width:38px;height:32px;font-size:14px;background:var(--panel);color:var(--cream);
  border:1px solid var(--line);border-radius:6px;cursor:pointer}
.rp-controls button:hover:not(:disabled){border-color:var(--brass-lo)}
.rp-controls button:disabled{opacity:.35;cursor:default}
.rp-controls input[type=range]{flex:1;min-width:140px;accent-color:var(--brass)}
.rp-controls span{font-size:14px;color:var(--muted);font-variant-numeric:tabular-nums}
.rp-log{max-height:150px;overflow-y:auto;font-size:15px;line-height:1.4;color:var(--muted);
  padding:10px 12px;border-radius:10px;background:rgba(12,9,7,.55);border:1px solid var(--line)}
.rp-log p{margin:0} .rp-log p.now{color:var(--cream)}
.rp-result{margin:10px 0 0;font-size:16px;color:var(--brass);min-height:1.3em}

/* ---------- your profile (Rany, v36) ----------
   "in lobby, enable clicking the player's name to be able to edit his profile (name, email,
   phonenumber, and avatar photo). remove the photo option from the table's setup tab"
   The chip in the header is now a button; the panel it opens borrows the same cream card the
   Open-a-table form uses, so there is one kind of form on this page rather than two. */
.mebtn{display:flex;align-items:center;gap:8px;background:none;border:0;padding:0;margin:0;
       color:inherit;font:inherit;font-weight:600;cursor:pointer;border-radius:999px}
.mebtn:hover .who{color:var(--brass)}
.mebtn:hover .dot{box-shadow:0 0 0 2px var(--brass), 0 0 12px rgba(201,164,92,.5)}
.mebtn:focus-visible{outline:2px solid var(--brass);outline-offset:3px}
.you .dot.has-photo,.tabs .dot.has-photo{background-size:cover;background-position:50% 50%;background-repeat:no-repeat;color:transparent}

.sheet{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:20px}
.sheet[hidden]{display:none}
.sheet-back{position:absolute;inset:0;background:rgba(12,8,5,.72)}
.sheet .create{position:relative;width:min(440px,100%);max-height:calc(100vh - 40px);overflow-y:auto}
/* History's results card (owner, 2026-10-11): the session's results over the page, its email button under them */
.sheet .res-card{width:min(600px,100%)}
.res-card .eyebrow{color:var(--brass-lo)}
.res-card h2{margin:0 0 4px}
.res-card .standings{max-width:none}
.res-card .standings td{color:var(--ink)}
.res-card .standings th{color:var(--ink-2)}
.res-card .standings td.up{color:#2f7a3f} .res-card .standings td.down{color:#a3262e}
#rc-body{overflow-x:auto;margin-top:10px}
@media (max-width:560px){
  .sheet{padding:12px}
  .res-card .standings th{letter-spacing:.04em;font-size:10px}
  .res-card .standings td{font-size:14px}
  .res-card .standings th,.res-card .standings td{padding-right:6px}
  .res-card .standings th:not(:first-child),.res-card .standings td:not(:first-child){padding-left:4px}
}
.res-card .rc-acts{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:14px}
.res-card .rc-acts .primary{width:auto;flex:1 1 220px}
.res-card .rc-acts .ghost{color:var(--ink-2)}

.pf-photo{display:flex;align-items:center;gap:16px;margin:0 0 20px}
.pf-acts{display:flex;flex-wrap:wrap;align-items:center;gap:8px;min-width:0}
.pf-acts .hint{flex-basis:100%;margin-top:2px}
.pf-acts .ghost{color:var(--ink-2);border-color:#c9b88f;cursor:pointer}
.pf-acts .ghost:hover{color:var(--ink);border-color:var(--ink-2)}
.dot.big{width:72px;height:72px;flex:0 0 72px;border-radius:50%;display:grid;place-items:center;
         background:var(--oxblood);color:var(--cream);font-family:var(--display);font-size:34px;
         box-shadow:0 0 0 2px var(--brass)}
.dot.big.has-photo{background-size:cover;background-position:50% 50%;background-repeat:no-repeat;color:transparent}
.field > label .opt{font-weight:600;letter-spacing:.04em;text-transform:none;color:var(--muted);margin-left:6px}
.pf-buttons{display:flex;align-items:center;justify-content:flex-end;gap:10px}
.pf-buttons .primary{width:auto;margin-top:0;font-size:17px;padding:11px 22px}
/* the account (owner, 2026-10-07): the fixed username, the email's state, Change password on the left */
.profile input.locked{background:rgba(42,29,18,.06);color:var(--ink-2);cursor:default}
.profile .pf-mail,.profile #pf-name-hint{margin:-8px 0 14px}
.profile #pf-error,.profile #pf-ok{margin-top:12px}
.linkish{border:none;background:none;padding:0;font:inherit;color:var(--oxblood);text-decoration:underline;cursor:pointer}
.pf-buttons #pf-pass-open{margin-right:auto}
.pf-pass{margin:0 0 14px;padding:12px 12px 2px;border:1px solid #c9b88f;border-radius:10px}
.users .who-sub{font-size:13px;color:var(--muted);margin-top:2px}
.users .tag.mail-ok{color:#7fc79a;border-color:rgba(127,199,154,.45)}
.users .tag.mail-no{color:#f0d99a;border-color:#8c6d33}
.pf-pass .primary{width:auto;margin:6px 0 10px;font-size:15px;padding:9px 16px}

/* A GAME THAT IS OUT OF THE ROTATION (Rany, v41.56). Dimmed rather than hidden, and only an admin can
   see it at all: it is still one of the room's games, it is just not one that can be dealt today. The
   name and the badge stay at full strength so the row can still be read and found. */
/* the games as a table (Rany, v46.1: layout A) — one line per game, the rarer buttons behind "⋯" */
.gtable-wrap{max-width:100%}
.gtable{width:100%;border-collapse:collapse}
.gtable > thead th{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--brass);
  text-align:left;padding:0 10px 8px;border-bottom:1px solid var(--line);white-space:nowrap}
.gtable > tbody > tr > td{padding:9px 10px;border-bottom:1px solid rgba(74,56,40,.5);color:var(--cream-2);vertical-align:middle}
.gtable > tbody:hover > tr.gline > td{background:rgba(201,164,92,.05)}
.gtable .gstar{width:1%;padding-right:0}
.gtable .tname{margin:0;font-size:18px;display:flex;align-items:center;flex-wrap:wrap;gap:6px}
.gtable .gsub{margin:2px 0 0;font-size:13px;color:var(--muted);display:flex;flex-wrap:wrap;gap:0 12px}
.gtable .gsub b{color:var(--brass);font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.gtable .gplayers{white-space:nowrap}
.gtable .grule{font-size:15px}
.gtable .gtags{margin:0}
.gtable .gmore{width:1%;padding-right:0}
.gtable .more{background:none;border:1px solid transparent;border-radius:7px;color:var(--cream-2);font-size:20px;line-height:1;
  padding:2px 8px 6px;cursor:pointer}
.gtable .more:hover,.gtable .more[aria-expanded="true"]{border-color:var(--line);color:var(--cream)}
.gtable .more:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
.gtable > tbody > tr > td.acts{display:table-cell;position:relative;width:1%;white-space:nowrap;text-align:right}
.gtable .gmenu{position:absolute;right:calc(100% + 4px);top:6px;z-index:5;display:flex;flex-direction:column;align-items:stretch;gap:4px;
  min-width:170px;padding:8px;border-radius:10px;background:var(--panel);border:1px solid var(--line);box-shadow:0 12px 30px rgba(0,0,0,.55)}
.gtable .gmenu[hidden]{display:none}
.gtable .gmenu > *{text-align:left}
.gtable > tbody > tr.gpick > td{padding-top:0}
.gtable .grow.off > tr.gline{opacity:.55}
@media (max-width:760px){
  .gtable > thead{display:none}
  .gtable > tbody{display:block;border-bottom:1px solid rgba(74,56,40,.5);padding:8px 0}
  .gtable > tbody > tr.gline{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:4px 8px}
  .gtable > tbody > tr > td{display:block;padding:0;border:0}
  .gtable .gstar{grid-column:1;grid-row:1}
  .gtable .gname{grid-column:2;grid-row:1}
  .gtable .gmore{grid-column:3;grid-row:1}
  .gtable > tbody > tr > td.acts{grid-column:4;grid-row:1}
  .gtable .gplayers,.gtable .grule,.gtable .gtagcell{grid-column:2 / -1;font-size:14px}
  .gtable .gplayers::before{content:"Players ";color:var(--brass);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
  .gtable .grule:nth-child(4)::before{content:"Open ";color:var(--brass);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
  .gtable .grule:nth-child(5)::before{content:"Win ";color:var(--brass);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
  .gtable .gmenu{right:0;top:calc(100% + 4px)}
  .gtable > tbody > tr.gpick{display:block}
}
.trow.game.off{opacity:.55}
.trow.game.off .tname{opacity:1}

/* ---------- the room's tags (Rany, v44) ----------
   "i should be able to create many types, and then tag the games with these types."
   The bar at the top of the Games page is the registry; the chips on a row are that game's filing;
   the block that opens under a row is the picker. One chip shape for all three so they read as the
   same object in three states, with the ring — not colour alone — carrying "this game has it". */
.tagbar{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:0 0 14px}
.tagbar-lead{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted,#9c8a70);margin-right:4px}
.gtag{display:inline-block;padding:2px 9px;border-radius:999px;font-size:12px;line-height:1.7;
  border:1px solid rgba(239,230,210,.22);color:#e9e0cd;background:rgba(239,230,210,.06);white-space:nowrap}
.gtag.admin{cursor:pointer;user-select:none}
.gtag.admin:hover{border-color:rgba(201,164,92,.6)}
.gtag.pick{cursor:pointer}
.gtag.pick.on{background:rgba(201,164,92,.22);border-color:#c9a45c;color:#fff}
.gtag.out{border-style:dashed;color:var(--muted,#9c8a70)}
.gtags{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 0}
.tagpick{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 0;padding:8px;border-radius:8px;
  background:rgba(0,0,0,.18);border:1px solid rgba(239,230,210,.10)}
.acts .ghost.on{border-color:#c9a45c;color:#fff}

/* The tours tick (Rany, v44.1: "replace 'IN TOURS' with a checkbox for Tour games"). Sized and spaced
   to sit in the row of ghost buttons beside it without being one. */
.tourbox{display:inline-flex;align-items:center;gap:6px;cursor:pointer;user-select:none;
  font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted,#9c8a70);white-space:nowrap}
.tourbox input{accent-color:#c9a45c;width:15px;height:15px;cursor:pointer}
.tourbox:hover{color:#e9e0cd}
.tourbox input:disabled{cursor:default;opacity:.6}
/* …and the chip that marks a game kept OUT of the tours, for readers who have no tick to look at. */
.gtag.untag{border-style:dashed}
/* the built-in Tour tag (v46.1) looks like every other tag (Rany: "make the TOUR tag looks similar to
   the other tags"); only in Edit tags does it read as fixed, since it cannot be renamed or deleted */
.gtag.tour.fixed{opacity:.7;cursor:default}

/* THE RENAME BOX WEARS THE TITLE'S OWN FACE (Rany, v44.1: "u change the font while renaming a game.
   dont do that"). It borrowed `.find`, which is the search box — body face, 14px — so pressing Rename
   dropped the name to a different font at half the size and putting it back jumped it again. It is the
   same words being edited where they stand, so it should go on looking like itself. */
.rename{font-family:var(--display);font-size:24px;line-height:1.15;padding:1px 8px;
  min-width:0;width:auto;max-width:min(26ch,44vw)}
/* …AND ITS OWN COLOURS WHILE TYPING (Rany, v46.4: "while editing the text, the color changes to
   something unreadable"). The page's rule for every text box (input[type=text]: dark ink on cream) is
   more specific than .find, so ink won the colour while .find:focus won the dark background — dark on
   dark. Said here with the input's own type in the selector, so it outranks both. And the box takes
   the whole name column: a name can be 40 characters, and the old 26ch cut it off mid-word. */
input[type=text].rename,input[type=text].rename:focus{color:var(--cream,#f3e9d6);background:rgba(30,23,16,.9);
  font-weight:400;width:100%;max-width:none}
/* A TABLE OF ANOTHER MODE THAN THE SÉANCE (Texas / Omaha 2026-10-08, 7 w noss and Big Two 2026-10-09; split, v51): the
   séance's own fields step aside, and of the lobby's own the mode keeps the ones it asks for (its lobby piece's
   `fields`: js/lobby.js syncMode); a row left with none goes too */
#create .mode-off{display:none!important}