/* 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)}
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}
.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}

/* ---------- 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}
.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)}
/* 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.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}
.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}
.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 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}
}
/* 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}
.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}
.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-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}

.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}

/* 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}