:root { --ink: #111; --foe: #e0262b; --paper: #fff; --ease-out: cubic-bezier(0.22, 1, 0.36, 1); }
html, body { margin: 0; height: 100%; background: var(--paper); color: var(--ink); overflow: hidden; }
body { font-family: "JetBrains Mono", "DejaVu Sans Mono", ui-monospace, monospace; }
#stage { position: fixed; inset: 0; width: 100%; height: 100%; display: block; animation: fade-in 900ms var(--ease-out) both; }
.title { position: fixed; inset: 0; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 4vh; box-sizing: border-box; pointer-events: none; }
/* The title sits on a paper card with an ink outline and a hard offset shadow,
   so the room lines never run through the letters. */
.title .card {
  background: var(--paper); border: 1.5px solid var(--ink); box-shadow: 7px 7px 0 var(--ink);
  padding: 26px 44px 24px; text-align: center;
  animation: card-in 700ms var(--ease-out) 250ms both;
}
.title h1 { margin: 0; font-size: clamp(36px, 5vw, 76px); font-weight: 700; letter-spacing: 0.18em; margin-right: -0.18em; line-height: 1; }
.title h1::after { content: ""; display: block; height: 3px; margin: 16px auto 0; width: 34%; background: var(--foe); transform-origin: left; animation: rule-in 520ms var(--ease-out) 750ms both; }
.title p { margin: 14px 0 0; font-size: clamp(12px, 1vw, 15px); font-weight: 700; letter-spacing: 0.22em; margin-right: -0.22em; text-transform: uppercase; color: #333; }
/* T7b1: Create room, inside the card under the subtitle. Hover lifts it off a hard shadow. */
.title .create {
  display: block; margin: 20px auto 0; height: 44px; padding: 0 28px; pointer-events: auto; cursor: pointer;
  font: 700 14px/1 "JetBrains Mono", "DejaVu Sans Mono", ui-monospace, monospace;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--paper); background: var(--ink);
  border: 1.5px solid var(--ink); border-radius: 0; box-shadow: 0 0 0 var(--ink);
  transition: transform 80ms ease-out, box-shadow 80ms ease-out;
}
.title .create:hover, .title .create:focus-visible { transform: translate(-2px, -2px); box-shadow: 3px 3px 0 var(--ink); outline: 0; }
.title .create:focus-visible { background: #2a2a2a; }
.title .create:active { transform: none; box-shadow: 0 0 0 var(--ink); }
.title .create:disabled { cursor: progress; opacity: 0.7; }
/* Copy-link pill, top centre of the viewport. Hidden until a room is open. It sits on the
   lid bezel, above the screen top (6 % of the height), so it never covers a chat line. */
.pill {
  position: fixed; top: 10px; left: 50%; transform: translate(-50%, -8px); z-index: 10;
  padding: 5px 14px; background: var(--paper); color: var(--ink); border: 1.5px solid var(--ink); border-radius: 999px;
  font: 700 12px/1.2 "JetBrains Mono", "DejaVu Sans Mono", ui-monospace, monospace; letter-spacing: 0.08em;
  white-space: pre; cursor: pointer; box-shadow: 3px 3px 0 var(--ink);
  opacity: 0; visibility: hidden; transition: opacity 200ms ease-out, transform 200ms var(--ease-out), visibility 0s linear 200ms;
}
.pill.on { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity 200ms ease-out, transform 200ms var(--ease-out), visibility 0s; }
.pill:hover { background: #f2f2f2; }
.pill.done { background: var(--ink); color: var(--paper); }
@keyframes fade-in { from { opacity: 0; } }
@keyframes card-in { from { opacity: 0; transform: translateY(10px); } }
@keyframes rule-in { from { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) { #stage, .title .card, .title h1::after { animation: none; } }