/* ---------- friends ----------
   The behaviour arrived from main with the base sheet's geometry — 6px
   corners, a hairline box. Here it takes the cabinet's shapes: pill for
   anything that counts, 12px for anything you press. Structure and every
   class name are main's; only the surface moved. */
.fr-badge{display:inline-flex;align-items:center;justify-content:center;
  min-width:18px;height:18px;margin-left:6px;padding:0 6px;border-radius:999px;
  background:var(--rust);color:var(--on-accent);font:900 10.5px/1 var(--display);
  vertical-align:middle}
.fr-intro{font-size:13.5px;color:var(--text-soft);line-height:1.55;margin:0 0 14px}
.fr-add{display:flex;gap:9px;align-items:stretch}
.fr-add input{flex:1;min-width:0}
.fr-add button,.fr-add button.primary{flex:0 0 auto;padding:0 22px;font-size:13px}
.fr-acwrap{position:relative;flex:1;min-width:0;display:block}
/* Same fill, same reason as .ac above — and the same bug, one modal further
   in: the Friends panel goes white in light mode, so a hardcoded dark list
   dropped out of it too. */
.fr-ac{position:absolute;left:0;right:0;top:calc(100% + 5px);z-index:40;
  background:var(--overlay);border:1px solid var(--border-strong);border-radius:12px;
  overflow:hidden;box-shadow:0 14px 30px rgba(0,0,0,.55)}
.ac-none{padding:11px 14px;font-size:13px;color:var(--text-muted)}
.fr-msg{font-size:12.5px;margin-top:9px;min-height:1.1em;color:var(--text-muted)}
.fr-msg.err{color:#F0907F}
.fr-msg.ok{color:var(--mint)}
.fr-sec{margin-top:18px}
.fr-sec h4{margin:0 0 8px;font:700 10px/1 var(--mono);letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-muted);display:flex;align-items:center;gap:8px}
.fr-sec h4 i{font-style:normal;background:var(--rust);color:var(--on-accent);
  border-radius:999px;padding:3px 8px;font:900 10px/1 var(--display)}
.fr-list{margin-top:10px;display:flex;flex-direction:column;gap:2px}
.fr-row{display:flex;align-items:center;gap:10px;padding:9px 0;
  border-bottom:1px solid var(--hair)}
.fr-row:last-child{border-bottom:0}
.fr-row .nm{flex:1;font-weight:700;font-size:14px;color:var(--text);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.fr-row .rm{border:0;background:none;color:var(--text-muted);cursor:pointer;
  font-size:17px;line-height:1;padding:4px 6px;border-radius:8px}
.fr-row .rm:hover{color:var(--red);background:var(--sheet)}
/* The name and face of an accepted friend open their profile. Underlined on
   hover rather than always: a list where every row is a link reads as a wall
   of links, and the row already carries three other controls. */
/* AND THEY ARE BARE BUTTONS. Both of these are <button>, so both inherited the
   site's button chrome — 13px 26px of padding — which did two visible things:
   it put 36px of empty space between a friend's face and their name (26 of
   padding either side of a 38px avatar, plus the row's 10px gap), and it took
   52px off the name's own box, leaving 88px of the 140 for the text. On a
   phone that is where a username stops being readable, which is the one thing
   this list exists to show. The row is 83px tall for a 38px avatar for the
   same reason.

   Reset rather than re-padded: the avatar and the name are the row's own
   layout, and the button is here to make them pressable, not to occupy space. */
.fr-row .fr-open{cursor:pointer;padding:0;border:0;background:none;
  border-radius:8px;font:inherit;color:inherit;text-align:left;
  display:inline-flex;align-items:center;min-width:0}
.fr-row .nm.fr-open{flex:1}
.fr-row .fr-open:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.fr-row .nm.fr-open:hover{text-decoration:underline;text-underline-offset:2px}
.fr-yes{border:0;background:var(--mint);color:#0B2119;border-radius:10px;
  font:900 11.5px/1 var(--display);letter-spacing:.04em;text-transform:uppercase;
  padding:9px 14px;cursor:pointer;box-shadow:0 3px 0 var(--mint-sh)}
.fr-yes:active{transform:translateY(2px);box-shadow:0 1px 0 var(--mint-sh)}
.fr-wait{font:700 10px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-muted)}
.fr-empty{font-size:13px;color:var(--text-muted);padding:7px 0}
/* The envelope on a friend's row. A ghost button until you are on it, because
   every friend has one and eight solid buttons down the panel would read as the
   point of the list rather than a thing you can do to a row. */
.fr-mail{border:0;background:none;color:var(--text-muted);cursor:pointer;
  font-size:15px;line-height:1;padding:5px 7px;border-radius:8px}
.fr-mail:hover{color:var(--gold);background:var(--sheet);transform:none}

/* ---------- notifications ----------
   Four surfaces, one feature: the bell in the top bar, the panel it opens, the
   box you write in, and the card that interrupts a round.

   EVERY COLOUR IS A TOKEN. The cabinet's own — gold for anything you act on,
   rust for anything that counts, --overlay for anything floating above the
   page. That is the whole reason light mode costs this block nothing. */
/* 24x24 MINIMUM, WITHOUT MOVING ANYTHING. The icon is 19px and the padding
   was 6px/2px, giving a 23x31 target — one pixel under the floor, which is
   the sort of miss that only ever shows up in a measurement.

   The size comes from min-width/min-height rather than more padding, and the
   negative margin cancels the extra width, so the bell sits exactly where it
   sat before while the tappable box around it grows. Padding alone would have
   pushed the theme button along the header. */
.bell-btn{background:none;border:0;padding:6px 2px;cursor:pointer;position:relative;
  color:var(--text-muted);display:inline-flex;align-items:center;line-height:1;
  min-width:24px;min-height:24px;justify-content:center;margin-left:-1px;
  margin-right:-1px}
/* Same note as .theme-btn: the superseded first stylesheet still carries a
   generic button:hover, and a button that sets no background of its own is
   exactly the kind that notices. */
.bell-btn:hover{color:var(--gold);background:none;transform:none}
.bell-btn:focus-visible{outline:2px solid var(--gold);outline-offset:3px;
  border-radius:8px}
.bell-btn svg{width:19px;height:19px;display:block;fill:none;stroke:currentColor;
  stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
/* Rides the bell's top-right corner rather than sitting after it, so the bar's
   spacing does not move as the count appears and goes. Shares .fr-badge's shape
   deliberately — two counts in one bar that disagreed about what a count looks
   like would read as two different kinds of thing. */
.nt-badge{position:absolute;top:-1px;right:-6px;min-width:16px;height:16px;
  padding:0 4px;border-radius:999px;background:var(--rust);color:var(--on-accent);
  font:900 9.5px/16px var(--display);text-align:center;pointer-events:none}
/* One ring, once, when the count goes up while you are looking at the page. */
.bell-btn.ring{animation:ntring .7s ease-in-out}
@keyframes ntring{0%,100%{transform:rotate(0)}
  20%{transform:rotate(-13deg)}40%{transform:rotate(11deg)}
  60%{transform:rotate(-7deg)}80%{transform:rotate(4deg)}}

/* ---- the panel ---- */
.nt-list{margin-top:4px;max-height:min(52vh,420px);overflow-y:auto;
  -webkit-overflow-scrolling:touch}
.nt-row{display:flex;gap:11px;padding:12px 12px 12px 11px;border-radius:12px;
  align-items:flex-start;border-bottom:1px solid var(--hair)}
.nt-row:last-child{border-bottom:0}
/* Unread is a tinted bed and a gold edge, not bold text: the body is somebody's
   sentence and re-weighting it changes how it reads. */
.nt-row.new{background:var(--sheet);border-left:3px solid var(--gold);
  padding-left:8px}
.nt-body{flex:1;min-width:0}
.nt-top{display:flex;align-items:baseline;gap:8px}
.nt-who{font-weight:700;font-size:14px;color:var(--text);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
/* The one small-caps label in the cabinet that is NOT uppercased. "3M" reads as
   three months as easily as three minutes; "3m" beside "1d" does not. */
.nt-when{font:700 9.5px/1 var(--mono);letter-spacing:.08em;
  color:var(--text-muted);white-space:nowrap;margin-left:auto}
/* pre-wrap, so a message typed across three lines arrives as three lines.
   overflow-wrap because a friend WILL paste a link with no spaces in it. */
.nt-text{font-size:13.5px;line-height:1.5;color:var(--text-soft);margin-top:4px;
  white-space:pre-wrap;overflow-wrap:anywhere}
.nt-reply{margin-top:7px;background:none;border:0;padding:0;cursor:pointer;
  color:var(--gold);font:700 11.5px/1 var(--font)}
.nt-reply:hover{color:var(--text);background:none;transform:none}
.nt-empty{font-size:13px;color:var(--text-muted);padding:14px 0;line-height:1.6}
/* A ruled strip, not just a gap. The list above it scrolls, so its bottom edge
   cuts a row in half — and a half-row sitting on the same line as "Close" reads
   as one broken row rather than as "there is more above". The rule is what says
   the list ended and the controls began. */
.nt-tools{display:flex;align-items:center;gap:14px;margin-top:14px;padding-top:13px;
  border-top:1px solid var(--hair)}
.nt-tools a{color:var(--text-muted);cursor:pointer;font-size:12px;font-weight:700}
.nt-tools a:hover{color:var(--text)}

/* ---- the composer ---- */
.nt-to{font-size:13px;color:var(--text-muted);margin:0 0 12px}
.nt-to b{color:var(--text);font-weight:700}
/* Not `.modal input` — that rule is for one-line fields and this is three lines.
   16px for the same Safari reason spelled out at the top of the modal block:
   anything smaller zooms the page on focus and never zooms back. */
.nt-box{width:100%;min-height:96px;resize:vertical;background:var(--field);
  border:1px solid var(--border);border-radius:12px;color:var(--text);
  font-family:var(--font);font-size:16px;line-height:1.5;padding:12px 14px}
.nt-box:focus{outline:2px solid var(--gold);outline-offset:2px;border-color:var(--gold)}
.nt-box::placeholder{color:var(--text-muted)}
.nt-count{font:700 10px/1 var(--mono);letter-spacing:.1em;color:var(--text-muted);
  margin-top:7px;text-align:right}
.nt-count.over{color:var(--red)}
.nt-send{display:flex;gap:12px;align-items:center;margin-top:12px}
/* An explicit height, not `padding:0 22px`. .primary carries 18px of VERTICAL
   padding, and zeroing it the way the friends row does only works there because
   .fr-add stretches its children to the input beside them — there is no input
   here, so the button collapsed onto its own cap height and clipped its label. */
.nt-send button{flex:0 0 auto;height:46px;padding:0 26px;font-size:13px;
  display:inline-flex;align-items:center}

/* ---- the card that interrupts a round ----
   FIXED, TOP RIGHT, AND OUT OF THE LAYOUT ENTIRELY. Nothing about a live
   question may move because a message arrived, and nobody should have to scroll
   to find out what did — so it floats over the corner and takes the page's own
   overlay fill so it cannot be mistaken for part of the question.

   z-index 90: above the game and the HUD, BELOW .modal-bg's 100, so opening the
   panel puts the panel in front and the toast behind it rather than the toast
   riding over the thing it just opened.

   IT DOES SIT OVER THE TOP BAR, and that is accepted rather than worked around.
   Parking it below the bar means measuring one: it is a single row on a desktop
   and three stacked ones on a phone, it is not sticky, and a number taken
   mid-reflow puts the card halfway down the screen. The overlap costs ten
   seconds of a bar nobody is reading during a question, and the card itself
   opens the panel — so the control it covers is not one you need while it is
   there. */
/* ---------- the one-minute call ----------
   TOP CENTRE, ABOVE EVERYTHING, AND SMALL. It appears over whatever the player
   is doing — a solo round, a leaderboard, the home screen — so it is a strip
   rather than a card: one line, one button, one X, and no dimming of the page
   behind it. z-index sits above the notification toast (90) because the two can
   land in the same minute and this one expires; a notification does not.
   Pinned to the top rather than the corner for the same reason it is not a
   modal: the eye goes there first and nothing has to be moved to read it. */
/* ---- the name a guest plays under ----
   One line: a label, a box and the fine print under it. It sits above the Join
   button on the door and inside the lobby, and never appears for a signed-in
   player — their username is the name they play under. */
.gxl-namebox{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin-top:12px}
.gxl-namebox label{font:900 11px/1 var(--display);letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-soft);flex:none}
.gxl-namebox input{flex:0 1 220px;min-width:0;padding:9px 11px;
  border:1px solid var(--border-strong);border-radius:10px;
  background:var(--panel);color:var(--text);font:700 14px/1 var(--font)}
.gxl-namefine{font-size:12px;color:var(--text-soft)}
.gxl-namefine a{color:var(--accent);cursor:pointer;font-weight:700}
/* The refusal from the server, under the box it is about. flex-basis 100% so
   it takes its own line however the row happens to have wrapped. */
.gxl-nameerr{flex-basis:100%;font-size:12.5px;color:var(--rust,#D65745)}
.gxl-nameerr:empty{display:none}
.gxl-namerow{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap}
.gxl-namerow .gxl-namebox{flex:1;min-width:0}
/* Reading-only chat, for a guest. Same height as the input row it replaces so
   the panel does not change shape when somebody signs in. */
.gxl-chatlock{padding:9px 11px;border:1px dashed var(--border-strong);
  border-radius:10px;font-size:12.5px;color:var(--text-soft);text-align:center}
.gxl-chatlock a{color:var(--accent);cursor:pointer;font-weight:700}

.gxl-soon{position:fixed;z-index:95;top:12px;left:50%;transform:translateX(-50%);
  display:flex;align-items:center;gap:10px;max-width:calc(100vw - 24px);
  padding:9px 10px 9px 15px;border-radius:999px;
  background:var(--overlay);border:1px solid var(--border-strong);
  border-left:3px solid var(--gold);box-shadow:0 14px 34px rgba(0,0,0,.42);
  font-family:var(--font);animation:gxlsoondrop .3s ease-out}
.gxl-soon[hidden]{display:none}
@keyframes gxlsoondrop{from{opacity:0;transform:translate(-50%,-14px)}
  to{opacity:1;transform:translate(-50%,0)}}
.gxl-soontx{font-weight:800;font-size:13.5px;color:var(--text);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gxl-soongo{flex:none;border:0;border-radius:999px;padding:7px 15px;
  background:var(--gold);color:#1b1b1b;font-weight:800;font-size:12.5px;
  cursor:pointer;font-family:inherit}
.gxl-soongo:hover{filter:brightness(1.08)}
.gxl-soonx{flex:none;border:0;background:none;color:var(--text-muted);
  cursor:pointer;font-size:14px;line-height:1;padding:3px 5px;border-radius:8px}
.gxl-soonx:hover{color:var(--text);background:var(--sheet);transform:none}
/* On a phone the strip is the width of the screen and the wording is the part
   that gives, not the button — "Play now" is what the strip is for. */
@media(max-width:560px){
  .gxl-soon{left:8px;right:8px;transform:none;max-width:none;border-radius:14px;
    animation:none}
  .gxl-soontx{font-size:12.5px;flex:1;min-width:0}
}

.nt-toast{position:fixed;z-index:90;top:14px;right:14px;width:min(300px,calc(100vw - 28px));
  display:none;gap:10px;align-items:flex-start;text-align:left;
  background:var(--overlay);border:1px solid var(--border-strong);
  border-left:3px solid var(--gold);border-radius:14px;padding:12px 12px 12px 13px;
  box-shadow:0 16px 40px rgba(0,0,0,.5);cursor:pointer;
  font-family:var(--font)}
.nt-toast.show{display:flex;animation:ntslide .28s ease-out}
@keyframes ntslide{from{opacity:0;transform:translateX(18px)}
  to{opacity:1;transform:translateX(0)}}
.nt-toast .nt-tw{flex:1;min-width:0}
.nt-toast .nt-tl{font:700 9.5px/1 var(--mono);letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold)}
.nt-toast .nt-tn{font-weight:700;font-size:13.5px;color:var(--text);margin-top:5px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Two lines and then an ellipsis. The card is a nudge, not the message: reading
   it in full is what opening the panel is for. */
.nt-toast .nt-tb{font-size:12.5px;line-height:1.45;color:var(--text-soft);margin-top:3px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.nt-toast .nt-tx{flex:0 0 auto;border:0;background:none;color:var(--text-muted);
  cursor:pointer;font-size:15px;line-height:1;padding:2px 4px;border-radius:8px}
.nt-toast .nt-tx:hover{color:var(--text);background:var(--sheet);transform:none}

/* ---------- challenges ----------
   A round somebody else played, offered to you. Four surfaces: the card in the
   bell, the picker you send it from, the chip that rides the mode banner while
   you play it, and the head-to-head at the end. */

/* The card in the bell. A challenge is not a sentence, so it does not use
   .nt-text — it is a number to beat and a button, and it should read as a
   thing to DO rather than as something somebody said. */
.nt-ch{margin-top:7px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.nt-ch-score{font:900 15px/1 var(--display);color:var(--gold);
  font-variant-numeric:tabular-nums}
.nt-ch-lbl{font:700 9.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-muted)}
.nt-play{border:0;background:var(--gold);color:var(--ink-2);border-radius:10px;
  font:900 11px/1 var(--display);letter-spacing:.05em;text-transform:uppercase;
  padding:9px 15px;cursor:pointer;box-shadow:0 3px 0 var(--gold-sh);margin-left:auto}
.nt-play:active{transform:translateY(2px);box-shadow:0 1px 0 var(--gold-sh)}
.nt-play.ghost{background:var(--sheet-2);color:var(--text);box-shadow:0 3px 0 rgba(0,0,0,.3)}
/* Won / lost / tied, wherever an outcome is stated in one word. */
.nt-out{font:900 10px/1 var(--display);letter-spacing:.08em;text-transform:uppercase;
  padding:5px 9px;border-radius:999px}
.nt-out.win{background:var(--mint);color:#0B2119}
.nt-out.lose{background:var(--rust);color:var(--on-accent)}
.nt-out.tie{background:var(--sheet-2);color:var(--text-soft)}

/* ---- the picker ---- */
.ch-intro{font-size:13.5px;color:var(--text-soft);line-height:1.55;margin:0 0 14px}
.ch-intro b{color:var(--gold);font-family:var(--display);font-weight:900}
.ch-list{max-height:min(46vh,340px);overflow-y:auto;-webkit-overflow-scrolling:touch}
/* A whole row is the hit target, not a 16px box. This gets used on a phone,
   straight after a round, one-handed. */
.ch-row{display:flex;align-items:center;gap:11px;padding:10px 8px;border-radius:10px;
  cursor:pointer;user-select:none;border-bottom:1px solid var(--hair)}
.ch-row:last-child{border-bottom:0}
.ch-row:hover{background:var(--sheet)}
.ch-row.on{background:var(--sheet-2)}
.ch-row .nm{flex:1;font-weight:700;font-size:14px;color:var(--text);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.ch-when{font:700 9.5px/1 var(--mono);letter-spacing:.08em;color:var(--text-muted);
  white-space:nowrap}
/* Drawn rather than an <input type=checkbox>, which cannot be coloured
   consistently across browsers and ignores the sheet entirely. */
.ch-tick{flex:0 0 20px;width:20px;height:20px;border-radius:6px;
  border:2px solid var(--border-strong);display:flex;align-items:center;
  justify-content:center;font:900 12px/1 var(--display);color:transparent}
.ch-row.on .ch-tick{background:var(--gold);border-color:var(--gold);color:var(--ink-2)}
.ch-send{display:flex;gap:12px;align-items:center;margin-top:14px;padding-top:13px;
  border-top:1px solid var(--hair)}
.ch-send button{flex:0 0 auto;height:46px;padding:0 26px;font-size:13px;
  display:inline-flex;align-items:center}

/* ---- the chip on the mode banner while you play one ---- */
.mb-ch{display:inline-flex;align-items:center;gap:7px;background:var(--sheet-2);
  border-radius:999px;padding:4px 11px;margin-left:9px;font-size:12px;
  color:var(--text-soft);white-space:nowrap}
.mb-ch b{color:var(--gold);font-family:var(--display);font-weight:900;
  font-variant-numeric:tabular-nums}

/* ---- the head-to-head at the end ---- */
.hh{margin-top:22px;border-top:1px solid var(--border);padding-top:18px;text-align:left}
.hh-verdict{text-align:center;font:900 26px/1.1 var(--display);letter-spacing:-.02em;
  margin-bottom:4px}
.hh-verdict.win{color:var(--mint)}
.hh-verdict.lose{color:var(--rust-text)}
.hh-sub{text-align:center;font-size:13px;color:var(--text-muted);margin-bottom:16px}
/* Two totals either side of a dash. The winner's is the loud one — the whole
   screen exists to answer one question and it should be readable across a room. */
.hh-tot{display:flex;align-items:center;justify-content:center;gap:16px;margin-bottom:18px}
.hh-side{text-align:center;min-width:88px}
.hh-side .who{font:700 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-muted);margin-bottom:7px;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.hh-side .n{font:900 32px/1 var(--display);color:var(--text-soft);
  font-variant-numeric:tabular-nums}
.hh-side.won .n{color:var(--gold)}
.hh-dash{font:900 20px/1 var(--display);color:var(--text-muted)}
/* One row per question: the subject, then both scores. Three columns, and the
   middle one wins nothing — the point is which side is bigger, line by line. */
.hh-row{display:flex;align-items:center;gap:10px;padding:8px 0;
  border-bottom:1px solid var(--hair);font-size:13px}
.hh-row:last-child{border-bottom:0}
.hh-row .q{flex:1;color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.hh-row .p{width:52px;text-align:right;font-variant-numeric:tabular-nums;
  font-weight:700;color:var(--text-soft)}
.hh-row .p.up{color:var(--mint)}
.hh-row .p.down{color:var(--text-muted)}
.hh-head{display:flex;gap:10px;padding:0 0 7px;font:700 9.5px/1 var(--mono);
  letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted)}
.hh-head .q{flex:1}
.hh-head .p{width:52px;text-align:right;overflow:hidden;text-overflow:ellipsis}
.hh-gone{font-size:12.5px;color:var(--text-muted);line-height:1.6;padding:8px 0}

/* Global / Friends on the in-round daily board */
.lb-scope{display:inline-flex;border:0;border-radius:999px;overflow:hidden;
  background:var(--sheet-2);margin:8px 0 12px}
/* Comfortably over 24px tall already (12px text + 14px padding); the floor is
   stated anyway so a later font-size change cannot quietly take it under, and
   min-width covers the shortest label the scope row can hold. */
.lb-tab{padding:7px 16px;border:0;background:transparent;color:var(--text-soft);
  font-family:var(--font);font-size:12px;font-weight:700;cursor:pointer;
  min-height:24px;min-width:24px}
.lb-tab:hover{color:var(--text)}
.lb-tab.on{background:var(--gold);color:var(--ink-2)}
.lb-empty{font-size:13px;color:var(--text-muted);padding:9px 0}