/* ---------------------------------------------------------------------------
   Clean pixel, not 1999 web chrome. Hard edges, flat colour, one typeface.
   --------------------------------------------------------------------------- */

:root {
  --ink: #efe9ff;
  --dim: #8b82a8;
  --bg: #0d0b18;
  --glow: #ff5ea8;
  --cyan: #4fe3d0;
  --gold: #ffd447;
  --panel: #120e22;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

/* An author `display` rule beats the UA sheet's [hidden] rule, so panels that
   set display need this to actually stay hidden. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--mono);
  overflow: hidden;
  -webkit-font-smoothing: none;
}

button { font-family: inherit; cursor: pointer; }

/* ---------------------------------------------------------- the entry gate */

#gate {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  /* Translucent, because the live room is running behind it. */
  background: radial-gradient(circle at 50% 40%, rgba(29, 22, 56, .82) 0%, rgba(13, 11, 24, .93) 70%);
  backdrop-filter: blur(1px);
  z-index: 20;
  text-align: center;
  padding: 24px;
}

#gate.leaving { opacity: 0; transition: opacity .35s ease; pointer-events: none; }

.gate-inner { max-width: 34rem; }

#gate-hamster {
  width: 128px;
  height: 128px;
  margin: 0 auto 8px;
  image-rendering: pixelated;
  animation: bob .5s steps(2) infinite alternate;
}

@keyframes bob { from { transform: translateY(0); } to { transform: translateY(-6px); } }

#gate h1 {
  margin: 0 0 4px;
  font-size: clamp(1.4rem, 6vw, 2.4rem);
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 700;
}

#gate-count {
  margin: 0 0 2px;
  color: var(--cyan);
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: .8rem;
  min-height: 1.2em;
}

#gate-today {
  margin: 0 0 2px;
  color: var(--gold);
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: .72rem;
  min-height: 1.2em;
}

#gate-big {
  margin: 0 0 26px;
  color: var(--dim);
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: .72rem;
  min-height: 1.2em;
}

/* Only while it is actually happening — the rest of the time this is a note
   about later, and notes about later should not shout. */
#gate-big.now { color: var(--glow); }

#gate-wall {
  margin: 10px auto 20px;
  max-width: 30rem;
  color: var(--ink);
  font-size: .7rem;
  line-height: 1.6;
  letter-spacing: .04em;
  opacity: .85;
}

#enter {
  background: var(--glow);
  color: #180a12;
  border: 0;
  padding: 16px 28px;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .18em;
  box-shadow: 0 6px 0 #a8286a;
}

#enter:active { transform: translateY(4px); box-shadow: 0 2px 0 #a8286a; }

.fine {
  margin: 18px 0 0;
  color: var(--dim);
  font-size: .7rem;
  letter-spacing: .1em;
}

#gate-returning:not(:empty) { color: var(--cyan); }

/* -------------------------------------------------------------- the stage */

#stage { position: fixed; inset: 0; display: grid; place-items: center; }

#room {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  display: block;
  touch-action: none;
}

#hud {
  position: fixed;
  inset: 0;
  pointer-events: none;
  /* Bottom padding keeps the stats clear of the control row at every width. */
  padding: 14px 16px 60px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}

#hud-top { display: flex; justify-content: space-between; align-items: flex-start; }
.hud-left { display: flex; flex-direction: column; gap: 3px; }
#hud-bottom {
  display: flex;
  flex-direction: column;
  gap: 3px;
  /* Only as wide as its text. It used to span the whole row, so anything
     docked bottom-right sat inside its box and read as overlapping. */
  width: max-content;
  max-width: 60vw;
  transition: transform .18s ease;
}

/* The booth band spans the bottom of the screen, so the stats stack has to get
   out of its way rather than sit underneath it unreadable. */
body.driving #hud-bottom { transform: translateY(-88px); }

#count {
  font-weight: 700;
  font-size: .95rem;
  text-shadow: 0 2px 0 #000;
}

#today { color: var(--gold); }
#goal { color: var(--cyan); }
#aura { color: var(--gold); text-shadow: 0 2px 0 #000; }
#next { color: var(--cyan); }
#lifetime { color: var(--ink); }
#records { color: var(--dim); }

/* The balance is a button, because "where did my seeds go" is the first
   question any currency provokes. */
#seedsBtn {
  pointer-events: auto;
  align-self: flex-start;
  margin-top: 2px;
  background: none;
  border: 1px solid var(--gold);
  color: var(--gold);
  font: inherit;
  font-size: .58rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 3px 8px;
}

#mute {
  pointer-events: auto;
  background: none;
  border: 2px solid var(--dim);
  color: var(--dim);
  width: 30px;
  height: 30px;
  font-size: .85rem;
  line-height: 1;
}

#mute.off { color: #4a4458; border-color: #4a4458; }

#idleBadge {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #000;
  border: 2px solid var(--dim);
  color: var(--dim);
  padding: 10px 16px;
  font-size: .72rem;
  letter-spacing: .16em;
  pointer-events: none;
}

/* ------------------------------------------------------------- the toasts */

#toasts {
  position: fixed;
  top: 54%; /* below the game banner, which owns the middle */
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
  z-index: 5;
}

.toast {
  background: #000;
  border: 2px solid var(--gold);
  color: var(--gold);
  padding: 10px 18px;
  font-size: .78rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  animation: toastIn .2s steps(3), toastOut .4s ease 3.4s forwards;
}

.toast.cyan { border-color: var(--cyan); color: var(--cyan); }
.toast.pink { border-color: var(--glow); color: var(--glow); }

@keyframes toastIn { from { transform: scale(.7); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes toastOut { to { opacity: 0; transform: translateY(-14px); } }

/* -------------------------------------------------------------- the panels */

.panel {
  position: fixed;
  bottom: 64px;
  right: 16px;
  background: var(--panel);
  border: 2px solid var(--dim);
  padding: 12px;
  z-index: 8;
  display: grid;
  grid-template-columns: repeat(4, 40px);
  gap: 8px;
}

.panel.wide {
  display: block;
  width: min(24rem, calc(100vw - 32px));
  max-height: 60vh;
  overflow-y: auto;
}

.panel.left { right: auto; left: 16px; border-color: var(--cyan); }
.panel.left h2 { color: var(--cyan); }

#peekClose {
  float: right;
  background: none;
  border: 0;
  color: var(--dim);
  font-size: 1.1rem;
  line-height: 1;
  padding: 0 4px;
}

.peek-portrait {
  width: 64px;
  height: 64px;
  image-rendering: pixelated;
  float: left;
  margin: 0 12px 8px 0;
  background: #1d1733;
  border: 2px solid #2f2850;
}

.peek-row {
  margin: 0 0 5px;
  font-size: .66rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dim);
}

.peek-row b { color: var(--ink); font-weight: 400; }
.peek-row.gold b, .peek-row.gold { color: var(--gold); }
.peek-clear { clear: both; }

/* Chat stays put and can be moved. The title bar is the grip, so dragging it
   never fights with selecting text in the log. */
#chatGrip {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: grab;
  touch-action: none;
  user-select: none;
}
#chatGrip:active { cursor: grabbing; }

#chatUnread {
  background: var(--glow);
  color: #180a12;
  font-size: .58rem;
  padding: 1px 6px;
  letter-spacing: .06em;
}

#chatFold {
  margin-left: auto;
  background: none;
  border: 1px solid #2f2850;
  color: var(--dim);
  width: 22px;
  height: 18px;
  line-height: 1;
  padding: 0;
  font: inherit;
  cursor: pointer;
}

/* Folded: the bar and its badge only, so it costs almost no screen. */
#chat.folded #chatLog,
#chat.folded #chatForm,
#chat.folded #chatNote { display: none; }
#chat.folded { max-height: none; }

/* The record board. A label, the number, and what the number means — three
   columns so the figures line up and can be read down. */
.board-row {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 12px;
  margin: 0 0 7px;
  font-size: .66rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dim);
}

.board-row b {
  color: var(--gold);
  font-weight: 700;
  text-align: right;
  white-space: nowrap;
}

.board-row em {
  grid-column: 1 / -1;
  font-style: normal;
  font-size: .56rem;
  letter-spacing: .08em;
  color: var(--dim);
  opacity: .75;
}

.panel h2 {
  margin: 0 0 10px;
  font-size: .78rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold);
}

.emote {
  width: 40px;
  height: 40px;
  background-color: #1d1733;
  background-size: 32px 32px;
  background-position: center;
  background-repeat: no-repeat;
  border: 2px solid #2f2850;
  image-rendering: pixelated;
}

.emote:hover { border-color: var(--glow); }

.bag-stat {
  margin: 0 0 8px;
  font-size: .66rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dim);
}

.bag-stat.trace { color: var(--gold); }
.bag-stat.dim { text-transform: none; letter-spacing: .04em; line-height: 1.5; }

/* The scrapbook. Deliberately reads like a list of receipts rather than a
   trophy case — the numbers are the reward, so they get the accent colour. */
.scrap-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 0 14px;
}

.scrap {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 4px 10px;
  align-items: baseline;
  padding: 6px 8px;
  border: 1px solid var(--line, #3a3348);
  background: rgba(0, 0, 0, .22);
}

.scrap.rare { border-color: var(--gold); }

.scrap-title {
  font-size: .7rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gold);
}

.scrap-rank {
  font-size: .66rem;
  letter-spacing: .06em;
  color: var(--glow, #7fe7d5);
  white-space: nowrap;
}

.scrap-when {
  font-size: .6rem;
  letter-spacing: .06em;
  color: var(--dim);
  white-space: nowrap;
}

.scrap-blurb {
  grid-column: 1 / -1;
  font-size: .62rem;
  line-height: 1.45;
  color: var(--dim);
}

.bag-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: 6px;
  margin-bottom: 10px;
}

.bag-item {
  background: #1d1733;
  border: 2px solid #2f2850;
  color: var(--ink);
  padding: 8px 4px;
  font-size: .62rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.bag-item.on { border-color: var(--gold); color: var(--gold); }
.bag-item.wide-item { display: block; width: 100%; margin-bottom: 10px; padding: 10px; }
.bag-item.locked { color: #4a4458; border-style: dashed; cursor: not-allowed; }

/* Shown when another tab has taken this hamster. Covers everything, because
   whatever is behind it is a frozen room that is no longer yours. */
#taken {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  background: rgba(10, 7, 20, .92);
}

#taken[hidden] { display: none; }

#taken p {
  margin: 0;
  color: var(--gold);
  font-size: .9rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}

#taken small {
  color: var(--dim);
  font-size: .66rem;
  line-height: 1.6;
  max-width: 26rem;
}

#takenBack {
  background: var(--glow);
  color: #180a12;
  border: 0;
  padding: 12px 20px;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* The wall reads as writing, not as chat: the name is small and above, the
   line itself gets the room. */
.wall-line {
  margin: 0 0 10px;
  font-size: .66rem;
  line-height: 1.5;
}

.wall-line b {
  display: block;
  color: var(--gold);
  font-size: .56rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 400;
}

.wall-line span { color: var(--ink); }

.wall-line em {
  display: block;
  color: var(--dim);
  font-size: .54rem;
  font-style: normal;
  letter-spacing: .08em;
}

#wallForm { display: flex; gap: 6px; margin-top: 10px; }
#wallInput { flex: 1; min-width: 0; }
#wallInput:disabled { opacity: .5; }

/* The beat grid. Sixteen cells a row, downbeats marked, so a rhythm can be
   tapped in and read back at a glance. */
.beat-row {
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 0 0 5px;
}

.beat-row > span {
  width: 3.4em;
  font-size: .56rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--dim);
  flex: none;
}

.beat-cell {
  flex: 1;
  min-width: 0;
  height: 20px;
  background: #1d1733;
  border: 1px solid #2f2850;
  padding: 0;
  cursor: pointer;
}

.beat-cell.downbeat { border-color: #4a4272; }
.beat-cell.on { background: var(--gold); border-color: var(--gold); }
.beat-cell.on.downbeat { background: #fff0b8; }

.zone-blurb {
  margin: -2px 0 8px;
  padding-left: 2px;
  font-size: .58rem;
  line-height: 1.5;
  color: var(--dim);
}

/* --------------------------------------------------------------- the booth */

#boothBar {
  position: fixed;
  top: 84px; /* clears the three HUD lines in the top-left */
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 6;
}

#boothInfo {
  color: var(--gold);
  font-size: .66rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-shadow: 0 2px 0 #000;
}

#queueBtn {
  background: none;
  border: 2px solid var(--gold);
  color: var(--gold);
  padding: 7px 12px;
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .14em;
}

#queueBtn.queued { border-color: var(--cyan); color: var(--cyan); }

/* The booth's whole job is reacting to the room, so a tall opaque panel parked
   in the middle of the dance floor hid the one thing the operator needs to
   watch. It is a thin band along the bottom instead — everything on one
   wrapping row — and slightly translucent, so the crowd still reads through it. */
#boothControls {
  position: fixed;
  bottom: 64px;
  left: 50%;
  transform: translateX(-50%);
  width: min(96vw, 62rem);
  box-sizing: border-box;
  background: rgba(18, 14, 34, .82);
  backdrop-filter: blur(3px);
  border: 2px solid var(--gold);
  padding: 8px 10px;
  z-index: 8;
  display: flex;
  flex-flow: row wrap;
  gap: 6px 12px;
  align-items: center;
  justify-content: center;
}

.booth-label {
  color: var(--gold);
  font-size: .66rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}

#patternRow, #gameRow {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
}

/* Keeps the two groups readable now that they share a line. */
#gameRow { border-left: 2px solid #2f2850; padding-left: 12px; }

#patternRow button,
#gameRow button,
#burstBtn {
  background: #1d1733;
  border: 2px solid #2f2850;
  color: var(--ink);
  padding: 7px 10px;
  font-size: .62rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}

#patternRow button.on { border-color: var(--gold); color: var(--gold); }
#gameRow button { border-color: var(--glow); color: var(--glow); }

#gameBanner {
  position: fixed;
  top: 32%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #000;
  border: 3px solid var(--cyan);
  color: var(--cyan);
  padding: 14px 24px;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  z-index: 9;
  pointer-events: none;
  text-align: center;
}

#gameBanner.freeze { border-color: var(--glow); color: var(--glow); }
#gameBanner.out { border-color: var(--dim); color: var(--dim); }

/* ------------------------------------------------------------ the controls */

/* Ten buttons now, which is more than a phone is wide. Left-anchored and
   wrapping rather than right-anchored and overflowing — a control that is one
   pixel off the edge of the screen is a control that does not exist. */
#controls {
  position: fixed;
  bottom: 14px;
  left: 16px;
  right: 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  z-index: 6;
}

/* Superseded by the first-minutes coach, which teaches the same things
   without permanently occupying the corner the stats live in. */
.hint { display: none; }

#controls button {
  background: none;
  border: 2px solid var(--glow);
  color: var(--glow);
  padding: 9px 12px;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .14em;
}

#emoteBtn, #bagBtn { border-color: var(--dim); color: var(--dim); }
#danceBtn.on { background: var(--glow); color: #180a12; }

@media (max-width: 720px) {
  .hint { display: none; }
  #hud { font-size: .64rem; }
  .panel { bottom: 60px; right: 8px; }
}

/* ------------------------------------------------------------- the room map */

.map-row { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }

.map-room {
  flex: 1;
  border: 2px solid #2f2850;
  background: #1d1733;
  padding: 8px 10px;
  font-size: .64rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--dim);
  display: flex;
  justify-content: space-between;
  gap: 8px;
  text-align: left;
}

.map-room.you { border-color: var(--cyan); color: var(--cyan); }
.map-room.full { border-style: dashed; }
.map-room b { color: var(--ink); font-weight: 400; }
.map-room.you b { color: var(--cyan); }
.map-tube { color: var(--cyan); font-size: .7rem; padding-left: 14px; letter-spacing: .2em; }

.map-canvas-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 12px;
  overflow-x: auto;
}

.map-canvas {
  image-rendering: pixelated;
  background: #0e0b1c;
  border: 2px solid #2f2850;
}

.map-legend { display: flex; flex-direction: column; gap: 5px; margin-bottom: 10px; }

.coat-row { display: flex; gap: 8px; margin-bottom: 12px; }

.coat-swatch {
  width: 34px;
  height: 34px;
  border: 2px solid #2f2850;
  padding: 0;
}

.coat-swatch.on { border-color: var(--gold); box-shadow: inset 0 0 0 2px #120e22; }

/* ---------------------------------------------------------------- the chat */

#chatLog {
  max-height: 30vh;
  overflow-y: auto;
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.chat-line {
  font-size: .68rem;
  letter-spacing: .04em;
  color: var(--ink);
  word-break: break-word;
}

.chat-line b { color: var(--cyan); font-weight: 400; }
.chat-line.mine b { color: var(--gold); }

#chatForm { display: flex; gap: 6px; }

#chatInput {
  flex: 1;
  background: #1d1733;
  border: 2px solid #2f2850;
  color: var(--ink);
  font-family: var(--mono);
  font-size: .7rem;
  padding: 8px;
}

#chatInput:focus { outline: none; border-color: var(--cyan); }

#chatForm button {
  background: none;
  border: 2px solid var(--cyan);
  color: var(--cyan);
  font-size: .64rem;
  letter-spacing: .12em;
  padding: 0 12px;
}

#chatNote { margin-top: 8px; margin-bottom: 0; }

/* ------------------------------------------------------------- hover tips */

#hoverTip {
  position: fixed;
  background: #000;
  border: 2px solid var(--cyan);
  color: var(--ink);
  padding: 6px 9px;
  font-size: .64rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  pointer-events: none;
  z-index: 12;
  white-space: nowrap;
}

#hoverTip em { color: var(--gold); font-style: normal; display: block; }

.status-select {
  width: 100%;
  margin-bottom: 12px;
  background: #1d1733;
  border: 2px solid #2f2850;
  color: var(--ink);
  font-family: var(--mono);
  font-size: .66rem;
  padding: 8px;
  text-transform: uppercase;
}

.status-select:focus { outline: none; border-color: var(--cyan); }

.peek-actions { display: flex; gap: 6px; margin: 10px 0; }
.peek-actions .bag-item { flex: 1; }

.fine a { color: var(--dim); }
.fine a:hover { color: var(--cyan); }

/* The gate preview: the room runs, the interface does not. */
#stage.watching #hud,
#stage.watching #controls,
#stage.watching #boothBar,
#stage.watching #idleBadge,
#stage.watching #toasts { display: none !important; }

/* ---------------------------------------------------------------- mobile
   The room is fixed at 320x200, so on a tall phone the width binds and the
   interface has to get out of the way rather than compete for space. */

@media (max-width: 560px) {
  /* Two wrapped rows of controls, so the stats need more room beneath them. */
  #controls { gap: 6px; justify-content: center; }
  #controls button { padding: 8px 9px; font-size: .58rem; }
  /* The beat grid is sixteen cells wide — the one thing here guaranteed to be
     unusable at phone width without its own rule. */
  /* Wide enough for "snare", which was clipping to "snar". Sixteen cells still
     fit either side of it at 375px. */
  .beat-row > span { width: 3.3em; font-size: .48rem; }
  .beat-cell { height: 26px; }   /* taller, because fingers are not cursors */
  .panel.wide { width: calc(100vw - 16px); max-height: 52vh; }

  #hud {
    padding: 10px 12px 118px;   /* keep the stats clear of the wrapped control rows */
    font-size: .58rem;
    letter-spacing: .06em;
  }

  #count { font-size: .72rem; }
  #hud-top { gap: 8px; }

  /* The least useful line on a small screen. */
  #records { display: none; }

  /* Stacks upward from the control row: buttons, then stats, then the booth.
     The booth bar sat at 172px and the stats stack grew past it once the
     control row started wrapping to two lines, so the two overlapped. Anchored
     to the top instead, under the three HUD lines, where there is nothing else
     and nothing that changes height. */
  #boothBar {
    top: 74px;
    bottom: auto;
    gap: 6px;
    max-width: calc(100vw - 16px);
    flex-wrap: wrap;
    justify-content: center;
  }

  #boothInfo { font-size: .56rem; max-width: 45vw; }
  #queueBtn { font-size: .56rem; padding: 6px 8px; }

  #controls {
    left: 8px;
    right: 8px;
    bottom: 8px;
    gap: 5px;
    justify-content: space-between;
    /* A backdrop so buttons never sit illegibly on top of the room. */
    background: linear-gradient(to top, rgba(13, 11, 24, .92), rgba(13, 11, 24, 0));
    padding: 12px 4px 4px;
  }

  #controls button {
    flex: 1;
    padding: 10px 2px;
    font-size: .56rem;
    letter-spacing: .06em;
  }

  #boothControls { bottom: 76px; padding: 6px 8px; width: 96vw; gap: 4px 8px; }
  #patternRow button, #gameRow button, #burstBtn { padding: 6px 8px; font-size: .56rem; }
  /* Too narrow for a divider to help; the wrap does the separating. */
  #gameRow { border-left: 0; padding-left: 0; }

  .panel { bottom: 74px; right: 8px; left: 8px; }
  .panel.left { left: 8px; right: 8px; }
  .panel.wide { width: auto; max-height: 54vh; }
  .panel:not(.wide) { grid-template-columns: repeat(6, 1fr); }
  .emote { width: 100%; height: 44px; background-size: 28px 28px; }

  #gameBanner { font-size: .78rem; padding: 10px 14px; width: 88vw; }
  #hoverTip { display: none; }   /* no hover on touch; tap opens the panel */
}

/* ------------------------------------------------------------- first minutes */

#coach {
  position: fixed;
  left: 50%;
  bottom: 92px;
  transform: translateX(-50%);
  background: #000;
  border: 2px solid var(--cyan);
  color: var(--cyan);
  padding: 9px 14px;
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  z-index: 7;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: calc(100vw - 24px);
}

#coachSkip {
  background: none;
  border: 0;
  color: var(--dim);
  font: inherit;
  text-transform: uppercase;
  letter-spacing: .1em;
  padding: 0;
}

#coachSkip:hover { color: var(--ink); }

@media (max-width: 560px) {
  #coach { bottom: 208px; font-size: .58rem; padding: 7px 10px; gap: 8px; }
}

.fb-form { display: flex; gap: 6px; margin-bottom: 12px; }

.fb-form input {
  flex: 1;
  background: #1d1733;
  border: 2px solid #2f2850;
  color: var(--ink);
  font-family: var(--mono);
  font-size: .66rem;
  padding: 8px;
}

.fb-form input:focus { outline: none; border-color: var(--gold); }

.fb-form button {
  background: none;
  border: 2px solid var(--gold);
  color: var(--gold);
  font-size: .6rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 0 10px;
}

/* ---------------------------------------------------------- the empty room */

/* Sat at top: 30%, which is exactly where the booth and the neon sign are — so
   the one prompt asking you to fill the room covered the thing worth filling it
   for. Docked below the floor instead, in the dead space above the controls. */
/* In the HUD's flow, as one more line in the bottom-left stack. Floated, it
   had to be threaded between the canvas, the HUD text and the control bar, and
   on a narrow window no gap that size exists — every position I tried covered
   something. In flow it cannot overlap anything by construction. */
#alone {
  /* The HUD is pointer-events: none so it never eats clicks meant for the
     floor. This lives inside it and has buttons, so it has to opt back in. */
  pointer-events: auto;
  margin-top: 6px;
  max-width: min(46ch, 70vw);
  background: #000;
  border: 2px solid var(--gold);
  color: var(--gold);
  padding: 8px 10px;
  font-size: .62rem;
  letter-spacing: .1em;
  line-height: 1.4;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
}

#alone[hidden] { display: none; }

/* Asked only when leaving would actually cost you something. */
#leaveBar {
  position: fixed;
  left: 50%;
  top: 132px;
  transform: translateX(-50%);
  max-width: 92vw;
  display: flex;
  align-items: center;
  gap: 10px;
  background: #000;
  border: 2px solid var(--gold);
  color: var(--gold);
  padding: 8px 12px;
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  z-index: 9;
}

#leaveBar[hidden] { display: none; }

#leaveGo, #leaveStay {
  font: inherit;
  font-weight: 700;
  text-transform: uppercase;
  padding: 5px 10px;
  white-space: nowrap;
  cursor: pointer;
}

#leaveGo { background: none; border: 1px solid var(--gold); color: var(--gold); }
#leaveStay { background: var(--gold); border: 0; color: #1a1200; }

/* The call bar. Sits under the HUD rather than over the floor, because the
   thing it is asking you to look at is the floor. */
#callBar {
  position: fixed;
  left: 50%;
  top: 132px;
  transform: translateX(-50%);
  max-width: 92vw;
  display: flex;
  align-items: center;
  gap: 12px;
  background: #000;
  border: 2px solid var(--cyan);
  color: var(--cyan);
  padding: 8px 12px;
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  z-index: 7;
}

#callBar[hidden] { display: none; }

#callDo {
  background: var(--cyan);
  border: 0;
  color: #04201c;
  font: inherit;
  font-weight: 700;
  text-transform: uppercase;
  padding: 5px 12px;
  white-space: nowrap;
  cursor: pointer;
}

@media (max-width: 560px) {
  #callBar { top: 118px; font-size: .58rem; padding: 6px 10px; }
}

/* Asleep: you are watching, not present. Says so, and offers the way back —
   tucking in used to be a one-way door with no handle on the inside. */
#asleep {
  position: fixed;
  left: 50%;
  bottom: 96px;
  transform: translateX(-50%);
  max-width: 92vw;
  display: flex;
  align-items: center;
  gap: 12px;
  background: #000;
  border: 2px solid var(--cyan);
  color: var(--cyan);
  padding: 11px 16px;
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  z-index: 7;
}

#asleep[hidden] { display: none; }

#wakeBtn {
  background: var(--cyan);
  border: 0;
  color: #04201c;
  font: inherit;
  font-weight: 700;
  text-transform: uppercase;
  padding: 6px 10px;
  white-space: nowrap;
}

#aloneInvite {
  background: var(--gold);
  border: 0;
  color: #1a1200;
  font: inherit;
  font-weight: 700;
  text-transform: uppercase;
  padding: 6px 10px;
  white-space: nowrap;
}

/* A prompt you cannot dismiss is nagging. Once you have said no, it stays
   gone for the session. */
#aloneClose {
  background: none;
  border: 1px solid var(--gold);
  color: var(--gold);
  font: inherit;
  line-height: 1;
  padding: 4px 8px;
  cursor: pointer;
}

@media (max-width: 560px) {
  #alone {
    font-size: .58rem; padding: 8px 10px; gap: 8px; top: auto; bottom: 112px;
    right: 8px; left: 8px; max-width: none; flex-wrap: wrap;
  }
}