/* The studio, in a browser.
 *
 * Nothing here is clever. That is rather the point: every rule in this file
 * replaces something that was hand-written in Rust — a layout that reflows, a
 * list that scrolls, text at a size you can read, a colour picker.
 */

:root {
  --ink: #e3e9ef;
  --soft: #94a1ae;
  --faint: #6b7987;
  --paper: #0b1017;
  --panel: #141c26;
  --edge: #22303c;
  --lit: #2e4257;
  --warn: #e0704a;
  --good: #6fcf97;
  color-scheme: dark;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  height: 100vh;
  overflow: hidden;
  background: var(--paper);
  color: var(--ink);
  font: 14px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

#app { display: flex; height: 100vh; }

/* ---- the list ---------------------------------------------------------- */

#tree {
  width: 340px;
  flex: 0 0 auto;
  background: var(--panel);
  border-right: 1px solid var(--edge);
  display: flex;
  flex-direction: column;
  /* The whole reason a browser: this is the scrolling. */
  overflow-y: auto;
}
#app.full #tree, #app.full #bar, #app.full #hint { display: none; }
/* Set from the address before the page is painted, so a link straight into a
   game never flashes the studio furniture on its way. */
.to-play #tree, .to-play #bar, .to-play #hint { display: none; }

#tree header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 10px 4px;
  color: var(--faint);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 11px;
}
#tree header button {
  width: 26px; height: 26px;
  font-size: 16px; line-height: 1;
}

.list { padding: 0 8px 6px; }

.line {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 6px;
  border-radius: 4px;
  cursor: pointer;
}
.line:hover { background: var(--edge); }
.line.chosen { background: var(--lit); }
.line.kid { margin-left: 18px; }

.swatch { width: 14px; height: 18px; border-radius: 2px; flex: 0 0 auto; }
.fold { width: 16px; color: #e0a44a; flex: 0 0 auto; }
.count { color: var(--faint); }

/* A row of the script: a real text input, with a real caret. */
.row { display: flex; align-items: center; gap: 8px; padding: 3px 6px; }
.row input[type=text] {
  flex: 1 1 auto;
  min-width: 0;
  background: var(--edge);
  border: 1px solid transparent;
  border-radius: 4px;
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  padding: 6px 8px;
}
.row input[type=text]:focus { outline: none; border-color: var(--lit); background: #1b2530; }
.row.off input[type=text] { color: var(--faint); }
.row.wrong input[type=text] { border-color: var(--warn); }
.row .why { color: var(--warn); font-size: 11px; padding: 0 6px 4px 34px; }
.row input[type=checkbox] { accent-color: var(--good); width: 16px; height: 16px; }

.dial { display: flex; align-items: center; gap: 8px; padding: 0 6px 6px 34px; }
.dial input[type=range] { flex: 1 1 auto; accent-color: #e0a44a; }
.dial .as { color: var(--faint); font-size: 11px; min-width: 84px; }

#says { margin-top: auto; padding: 10px; color: var(--good); font-size: 12px; min-height: 1.4em; }

/* ---- the tools --------------------------------------------------------- */

main { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }

#bar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  padding: 8px 10px;
  background: var(--panel);
  border-bottom: 1px solid var(--edge);
}
.set { display: flex; gap: 4px; }

button {
  background: var(--edge);
  color: var(--soft);
  border: 0;
  border-radius: 5px;
  padding: 9px 12px;
  font: inherit;
  cursor: pointer;
  /* Big enough to hit with a pen or a finger. */
  min-height: 38px;
  min-width: 38px;
}
button:hover { background: var(--lit); color: var(--ink); }
button.on { background: var(--lit); color: #fff; }

input[type=color] {
  width: 44px; height: 38px;
  background: none; border: 1px solid var(--edge); border-radius: 5px;
  padding: 2px; cursor: pointer;
}

/* ---- the paper --------------------------------------------------------- */

#paper { flex: 1 1 auto; display: block; width: 100%; touch-action: none; cursor: crosshair; }
#hint { padding: 6px 10px; color: #46525e; font-size: 11px; border-top: 1px solid var(--edge); }

/* ---- which drawing this is --------------------------------------------- */

#which {
  border-bottom: 1px solid var(--edge);
  gap: 8px;
  color: var(--ink);
  text-transform: none;
  letter-spacing: 0;
  font-size: 13px;
}
#which a { color: var(--soft); text-decoration: none; font-size: 18px; }
#which a:hover { color: var(--ink); }
#shown-file { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

a.asbutton {
  background: var(--edge); color: var(--soft); border-radius: 5px;
  padding: 9px 12px; min-height: 38px; text-decoration: none;
  display: inline-flex; align-items: center;
}
a.asbutton:hover { background: var(--lit); color: var(--ink); }

/* ---- the front page ----------------------------------------------------- */

#home { max-width: 860px; margin: 0 auto; padding: 48px 24px 80px; overflow-y: auto; height: 100vh; }
#home h1 { font-size: 28px; font-weight: 500; margin: 0 0 6px; }
#home .lead { color: var(--soft); margin: 0 0 36px; max-width: 60ch; }
#home h2 {
  font-size: 11px; text-transform: uppercase; letter-spacing: .1em;
  color: var(--faint); font-weight: 500; margin: 28px 0 10px;
}
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.card {
  background: var(--panel); border: 1px solid var(--edge); border-radius: 8px;
  padding: 14px 16px; display: flex; flex-direction: column; gap: 4px;
}
.card.new { text-decoration: none; color: inherit; }
.card.new:hover { border-color: var(--lit); }
.card .what { font-size: 15px; }
.card .why { color: var(--faint); font-size: 12px; min-height: 2.4em; }
.card .go { display: flex; gap: 8px; margin-top: 6px; }
.card .go a {
  background: var(--edge); color: var(--soft); border-radius: 5px;
  padding: 7px 14px; text-decoration: none; font-size: 13px;
}
.card .go a:hover { background: var(--lit); color: #fff; }
#home footer { margin-top: 48px; color: var(--faint); font-size: 12px; max-width: 70ch; }
#home code { color: var(--soft); }
.none { color: var(--faint); }

/* ---- the setup screen ---------------------------------------------------
   Over the drawing, not instead of it: you can see the board you are about to
   play on while you decide how to play on it. */
/* An ID selector beats the browser's own `[hidden] { display: none }`, so
   without this the start button set `hidden` and nothing happened. */
#setup[hidden] { display: none; }
#setup {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(11, 16, 23, 0.82);
  z-index: 20;
}
#setup .sheet {
  width: min(30rem, calc(100% - 3rem));
  max-height: calc(100% - 3rem);
  overflow-y: auto;
  padding: 1.4rem 1.6rem 1.6rem;
  border: 1px solid #22303c;
  border-radius: 0.7rem;
  background: #121821;
  box-shadow: 0 1.2rem 3rem rgba(0, 0, 0, 0.5);
}
#setup h2 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  color: #e3e9ef;
}
#setup p {
  margin: 0.3rem 0 1.1rem;
  font-size: 0.82rem;
  color: #6b7987;
}
#setup label {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.42rem 0;
  font-size: 0.9rem;
  color: #b9c4d0;
  cursor: pointer;
}
#setup label:hover { color: #e3e9ef; }
#setup label span { flex: 1; }
#setup input[type='checkbox'] {
  width: 1.05rem;
  height: 1.05rem;
  accent-color: #4fbcd4;
  cursor: pointer;
}
#setup input[type='number'] {
  width: 4rem;
  padding: 0.2rem 0.4rem;
  border: 1px solid #22303c;
  border-radius: 0.3rem;
  background: #0b1017;
  color: #e3e9ef;
  font: inherit;
  font-size: 0.85rem;
}
#begin {
  width: 100%;
  margin-top: 1.2rem;
  padding: 0.6rem;
  border: 0;
  border-radius: 0.4rem;
  background: #4fbcd4;
  color: #08121a;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
#begin:hover { background: #6fd0e4; }

/* The microphone. On is a colour rather than a shape, so it reads at a glance
   from across the room -- which is where the other three people are. */
#mic.on {
  background: #6fcf97;
  border-color: #6fcf97;
  color: #08121a;
}
/* Muted is not "off": the connections are up and the others are still
   audible. Amber rather than grey, so it reads as a state rather than as a
   thing that has stopped. */
#mic.muted, #lobby-mic.muted {
  background: #e0a44a;
  border-color: #e0a44a;
  color: #08121a;
}
/* No microphone to be had -- plain http over a network. Says why on hover
   rather than looking broken. */
#mic.cannot {
  opacity: 0.55;
  cursor: help;
}
/* Always there, in every view -- it lives outside the toolbar for exactly
   this reason. The whole point is talking WHILE playing, and the game view
   hides the toolbar. */
#mic {
  padding: 0.4rem 0.7rem;
  border: 1px solid #22303c;
  border-radius: 0.4rem;
  background: #121821;
  color: #b9c4d0;
  font: inherit;
  font-size: 0.8rem;
  cursor: pointer;
}
#mic:hover {
  border-color: #46525e;
  color: #e3e9ef;
}

/* ---- who is talking ------------------------------------------------------ */
#voices {
  position: absolute;
  top: 3.2rem;
  right: 0.7rem;
  z-index: 30;
  display: grid;
  gap: 0.25rem;
  padding: 0.5rem 0.6rem;
  border: 1px solid #22303c;
  border-radius: 0.45rem;
  background: rgba(11, 16, 23, 0.86);
  font-size: 0.72rem;
  color: #94a1ae;
}
#voices > div {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}
#voices .who {
  width: 2.2rem;
  font-family: ui-monospace, monospace;
}
#voices .bar {
  display: block;
  width: 4.5rem;
  height: 0.35rem;
  border-radius: 0.2rem;
  background: #1b2530;
  overflow: hidden;
}
#voices .bar > i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 0.2rem;
  background: #6fcf97;
  /* Fast up, slow down -- an ear does the same, and a bar that falls as fast
     as it rises reads as flicker rather than as a voice. */
  transition: width 0.06s linear;
}
#voices .none {
  color: #6b7987;
}

/* ---- who is playing which colour ---------------------------------------- */
#seats {
  display: flex;
  gap: 0.3rem;
}
#seats button {
  padding: 0.35rem 0.6rem;
  border: 1px solid #22303c;
  border-radius: 0.35rem;
  background: #121821;
  color: #b9c4d0;
  font: inherit;
  font-size: 0.75rem;
  cursor: pointer;
}
#seats button.taken {
  opacity: 0.4;
  cursor: not-allowed;
}
/* Whose turn it is, so nobody has to work it out from the board. */
#seats button.turn {
  box-shadow: 0 0 0 2px #e3e9ef;
}

/* ---- which game this is -------------------------------------------------- */
#room {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.5rem;
  border: 1px solid #22303c;
  border-radius: 0.4rem;
  background: rgba(11, 16, 23, 0.86);
  font-size: 0.78rem;
  color: #94a1ae;
}
#room-code {
  font-family: ui-monospace, monospace;
  font-size: 1rem;
  letter-spacing: 0.12em;
  color: #e3e9ef;
}
#room-copy {
  padding: 0.2rem 0.45rem;
  border: 1px solid #22303c;
  border-radius: 0.3rem;
  background: #121821;
  color: #b9c4d0;
  font: inherit;
  font-size: 0.7rem;
  cursor: pointer;
}
#room-copy:hover { color: #e3e9ef; }

/* The one link on the front page that starts a room. */
.go .together { color: #6fcf97; }

/* ---- on a telephone ------------------------------------------------------
   Everything above pins controls to the corners, which is right on a desk and
   wrong in a hand: the corners are where the notch, the home bar and the
   thumbs are. Below a certain width the controls become one row along the top
   that cannot be reached round, and every tap target grows to something a
   thumb can actually hit.

   44 pixels is Apple's figure and 48 is Google's; the larger is used because
   a missed tap on the die is a turn nobody takes. */
#mic,
#seats,
#room {
  padding-top: env(safe-area-inset-top, 0);
}

@media (max-width: 720px), (pointer: coarse) {
  #mic,
  #seats button,
  #room-copy {
    min-height: 48px;
    font-size: 0.95rem;
  }

  /* One row across the top, in reading order: who I am, then talking. Nothing
     in a corner, because a corner on a phone belongs to the operating
     system. */
  #seats {
    top: calc(0.5rem + env(safe-area-inset-top, 0px));
    left: 0.5rem;
    right: 0.5rem;
    flex-wrap: wrap;
    gap: 0.4rem;
  }
  #seats button {
    flex: 1 1 auto;
    min-width: 4.5rem;
  }

  /* Under the seats rather than over them -- on a narrow screen the two
     overlapped, and the thing that was hidden was the one you press. */
  #mic {
    top: auto;
    bottom: calc(0.5rem + env(safe-area-inset-bottom, 0px));
    right: 0.5rem;
  }

  #room {
    bottom: calc(0.5rem + env(safe-area-inset-bottom, 0px));
    left: 0.5rem;
    right: auto;
  }

  #voices {
    top: auto;
    bottom: calc(4rem + env(safe-area-inset-bottom, 0px));
    right: 0.5rem;
  }

  /* The setup sheet has to scroll on a short screen, and its button has to be
     reachable without a keyboard appearing over it. */
  #setup .sheet {
    width: calc(100% - 1.5rem);
    max-height: calc(100% - 2rem);
  }
  #setup label {
    padding: 0.6rem 0;
  }
}

/* Whose turn it is, said in words. Reading a colour off a board across a
   table is fine; doing it from a name is what somebody on a telephone in
   another city needs. */
#seats button .name {
  display: block;
  font-size: 0.62rem;
  opacity: 0.75;
  line-height: 1.1;
}
#seats button.mine {
  font-weight: 600;
}

/* ---- the players' bar ----------------------------------------------------
   In normal flow above the canvas rather than floating over it. It used to
   float, and on a small window it sat on the board -- and the canvas is
   fitted to its own size, so giving the bar its own row simply makes the
   board smaller, which is right. */
#hud {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  padding: 0.5rem 0.7rem;
  padding-top: calc(0.5rem + env(safe-area-inset-top, 0px));
  background: var(--panel);
  border-bottom: 1px solid var(--edge);
}
#hud-gap { flex: 1 1 auto; }
#who {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
  color: #6b7987;
}
#myname {
  width: 8rem;
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--edge);
  border-radius: 0.35rem;
  background: #0b1017;
  color: #e3e9ef;
  font: inherit;
  font-size: 0.8rem;
}
#myname:focus { outline: none; border-color: #4fbcd4; }

/* A seat a bot is sitting in. Plainly not a person, and plainly not free. */
#seats button.bot {
  opacity: 0.75;
  border-style: dashed;
}

/* Waiting for somebody else to start. No button, because a button that does
   nothing is worse than no button. */
#setup .waiting {
  margin-top: 1.1rem;
  padding: 0.7rem;
  border: 1px dashed var(--edge);
  border-radius: 0.4rem;
  text-align: center;
  font-size: 0.85rem;
  color: #94a1ae;
}

/* ---- the lobby ----------------------------------------------------------- */
#setup h3 {
  margin: 1.2rem 0 0.4rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6b7987;
}
.lobby-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}
#lobby-who {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.78rem;
  color: #6b7987;
}
#lobby-name {
  width: 9rem;
  padding: 0.45rem 0.55rem;
  border: 1px solid var(--edge);
  border-radius: 0.35rem;
  background: #0b1017;
  color: #e3e9ef;
  font: inherit;
  font-size: 0.85rem;
}
#lobby-name:focus { outline: none; border-color: #4fbcd4; }
#lobby-mic {
  padding: 0.45rem 0.7rem;
  border: 1px solid var(--edge);
  border-radius: 0.35rem;
  background: #121821;
  color: #b9c4d0;
  font: inherit;
  font-size: 0.8rem;
  cursor: pointer;
}
#lobby-mic.on { background: #6fcf97; border-color: #6fcf97; color: #08121a; }

/* One line per person. The colour dot is their seat, the bar is their voice --
   so somebody can see their microphone working before the game starts, which
   is the one moment there is time to fix it. */
#lobby-list > div {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.4rem 0;
  border-bottom: 1px solid #1b2530;
  font-size: 0.85rem;
  color: #b9c4d0;
}
#lobby-list > div:last-child { border-bottom: 0; }
#lobby-list .dot {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  border: 1px solid #46525e;
  flex: 0 0 auto;
}
#lobby-list .nm { flex: 1 1 auto; }
#lobby-list .tag {
  font-size: 0.66rem;
  padding: 0.1rem 0.35rem;
  border-radius: 0.25rem;
  background: #1b2530;
  color: #94a1ae;
}
#lobby-list .lvl {
  width: 3rem;
  height: 0.3rem;
  border-radius: 0.15rem;
  background: #1b2530;
  overflow: hidden;
  flex: 0 0 auto;
}
#lobby-list .lvl > i {
  display: block;
  height: 100%;
  width: 0;
  background: #6fcf97;
  transition: width 0.06s linear;
}
#begin:disabled {
  background: #1b2530;
  color: #6b7987;
  cursor: default;
}

/* ---- the one true sentence ---------------------------------------------- */
#state {
  padding: 0.3rem 0.6rem;
  border-radius: 0.35rem;
  background: #1b2530;
  font-size: 0.8rem;
  color: #b9c4d0;
}
#state.my-turn { background: #6fcf97; color: #08121a; font-weight: 600; }
#state.waiting-state { color: #94a1ae; }

/* Who holds the controls, and giving them away. */
#lobby-list .tag.host { background: #4fbcd4; color: #08121a; }
#lobby-list .give {
  padding: 0.2rem 0.45rem;
  border: 1px solid var(--edge);
  border-radius: 0.3rem;
  background: #121821;
  color: #94a1ae;
  font: inherit;
  font-size: 0.66rem;
  cursor: pointer;
}
#lobby-list .give:hover { color: #e3e9ef; border-color: #46525e; }

/* ---- hearing the others ---------------------------------------------------
   A telephone earpiece is the default route for a call, and a browser treats
   WebRTC audio as a call. On a handset that means the sound comes out of the
   little speaker you hold to your ear, which is useless with the thing lying
   on a table between four people. */
#vol { display: flex; align-items: center; gap: 0.4rem; font-size: 0.72rem; color: #6b7987; }
#volume { width: 5.5rem; }
#speaker {
  padding: 0.35rem 0.55rem;
  border: 1px solid var(--edge);
  border-radius: 0.35rem;
  background: #121821;
  color: #b9c4d0;
  font: inherit;
  cursor: pointer;
}
#speaker.on { background: #6fcf97; border-color: #6fcf97; color: #08121a; }

/* ---- starting and joining a room ----------------------------------------- */
.together-box {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}
.together-half {
  flex: 1 1 16rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--edge);
  border-radius: 0.6rem;
  background: var(--panel);
}
.together-half h3 {
  margin: 0 0 0.35rem;
  font-size: 0.95rem;
  color: #e3e9ef;
}
.together-half p {
  margin: 0 0 0.8rem;
  font-size: 0.82rem;
  line-height: 1.45;
  color: #94a1ae;
}
.together-half button {
  padding: 0.55rem 0.9rem;
  border: 0;
  border-radius: 0.4rem;
  background: #4fbcd4;
  color: #08121a;
  font: inherit;
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
}
.together-half button:hover { background: #6fd0e4; }
.together-half button:disabled { background: #1b2530; color: #6b7987; cursor: default; }
#join-room { display: flex; gap: 0.5rem; }
#room-code {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--edge);
  border-radius: 0.4rem;
  background: #0b1017;
  color: #e3e9ef;
  font: inherit;
  font-family: ui-monospace, monospace;
  font-size: 1rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
#room-code:focus { outline: none; border-color: #4fbcd4; }
.wrong { color: #e0704a !important; margin-top: 0.5rem !important; }

/* ---- what each voice is doing ------------------------------------------- */
#lobby-list .sound { font-size: 0.62rem; }
#lobby-list .sound.talking { background: #6fcf97; color: #08121a; }
#lobby-list .sound.muted { background: #e0a44a; color: #08121a; }
#lobby-list .sound.listening-only { background: #2a3644; color: #94a1ae; }
#lobby-list .sound.connecting { background: #2a3644; color: #6b7987; }
#lobby-list .sound.no-connection { background: #e0704a; color: #08121a; }
#lobby-list .sound.your-microphone-is-off { background: #e0704a; color: #08121a; }

.sound-note {
  margin: 0.7rem 0 0 !important;
  padding: 0.55rem 0.7rem;
  border-radius: 0.4rem;
  background: #1b2530;
  font-size: 0.8rem !important;
  color: #b9c4d0 !important;
}

/* ==========================================================================
   THE FRONT DOOR

   Calm on purpose. One column, generous spacing, few colours, nothing that
   moves unless it was asked to. Somebody arriving should be able to take the
   whole page in without reading it -- two questions, in the order they have
   them: what to play, and where.
   ========================================================================== */
#front {
  max-width: 34rem;
  margin: 0 auto;
  padding: 3.5rem 1.25rem 5rem;
  padding-top: calc(3.5rem + env(safe-area-inset-top, 0px));
}
#front header { margin-bottom: 3rem; }
#front h1 {
  margin: 0 0 0.4rem;
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #e3e9ef;
}
#front header p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.6;
  color: #94a1ae;
}
.pick { margin-bottom: 2.75rem; }
.pick h2 {
  margin: 0 0 0.9rem;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #6b7987;
}

/* A game is a wide, quiet card. Chosen is a left edge and a lighter ground --
   no glow, no shadow, nothing that pulses. */
.games { display: grid; gap: 0.55rem; }
.game {
  display: block;
  width: 100%;
  padding: 0.9rem 1rem;
  border: 1px solid var(--edge);
  border-left: 3px solid transparent;
  border-radius: 0.5rem;
  background: var(--panel);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.game:hover { border-color: #46525e; }
.game.on {
  border-left-color: #6fcf97;
  background: #141c24;
}
.game .nm {
  display: block;
  font-size: 0.95rem;
  color: #e3e9ef;
  margin-bottom: 0.2rem;
}
.game .bl {
  display: block;
  font-size: 0.82rem;
  line-height: 1.5;
  color: #94a1ae;
}
.game.later { opacity: 0.45; cursor: default; }
.game.later:hover { border-color: var(--edge); }

#go label {
  display: block;
  margin-bottom: 0.45rem;
  font-size: 0.82rem;
  color: #94a1ae;
}
#go .row { display: flex; gap: 0.5rem; }
#room-code {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--edge);
  border-radius: 0.45rem;
  background: #0b1017;
  color: #e3e9ef;
  font: inherit;
  font-size: 1rem;
  letter-spacing: 0.06em;
}
#room-code::placeholder { color: #46525e; letter-spacing: 0; }
#room-code:focus { outline: none; border-color: #6fcf97; }
#enter {
  padding: 0.7rem 1.3rem;
  border: 0;
  border-radius: 0.45rem;
  background: #6fcf97;
  color: #08121a;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
#enter:hover { background: #86dcaa; }

.hint {
  margin: 0.6rem 0 0;
  font-size: 0.8rem;
  line-height: 1.55;
  color: #6b7987;
}
.hint.quiet { margin-top: 0.35rem; }
.asLink {
  padding: 0;
  border: 0;
  background: none;
  color: #4fbcd4;
  font: inherit;
  font-size: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.asLink:disabled { color: #46525e; cursor: default; }

/* Said once and quietly. A wall of rules is a wall nobody reads. */
.plain {
  margin: 1.5rem 0 0;
  padding: 0.85rem 1rem;
  border-radius: 0.45rem;
  background: #141c24;
  font-size: 0.8rem;
  line-height: 1.6;
  color: #94a1ae;
}

/* Folded away: this is for whoever wants to look inside, not for whoever came
   to play. */
.workshop {
  margin-top: 3.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--edge);
}
.workshop summary {
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #6b7987;
  cursor: pointer;
}
.workshop summary:hover { color: #94a1ae; }
.workshop .cards { margin-top: 1rem; }

/* ---- choosing, in the lobby ---------------------------------------------- */
#lobby-games { display: grid; gap: 0.4rem; }
#lobby-games button {
  display: block;
  width: 100%;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--edge);
  border-left: 3px solid transparent;
  border-radius: 0.4rem;
  background: #0f151d;
  color: #b9c4d0;
  font: inherit;
  font-size: 0.85rem;
  text-align: left;
  cursor: pointer;
}
#lobby-games button.on { border-left-color: #6fcf97; background: #141c24; color: #e3e9ef; }
#lobby-games button:disabled { opacity: 0.45; cursor: default; }

.opt { display: flex; align-items: flex-start; gap: 0.6rem; cursor: pointer; }
.opt input { margin-top: 0.2rem; width: 1.05rem; height: 1.05rem; accent-color: #6fcf97; }
.opt span { font-size: 0.85rem; color: #b9c4d0; }
.opt em {
  display: block;
  font-style: normal;
  font-size: 0.75rem;
  color: #6b7987;
  margin-top: 0.1rem;
}

/* One volume per person, because one loud friend and one quiet one is the
   normal case and a single master control cannot fix it. */
#lobby-list .vol {
  width: 3.5rem;
  accent-color: #4fbcd4;
  flex: 0 0 auto;
}