/* augh yahh! -- house style: dark ground, neon glow, phone first.
   Tokens copied from businesses/mndz-automation/artifacts/house-style.css
   Single theme on purpose. Every colour painted explicitly. */

:root {
  --void:    #05070C;
  --panel:   #0A0F17;
  --panel-2: #0D1420;
  --line:    #1B2637;

  /* Round nine, the re-skin (2026-08-19). The brand is the logo's pink; the
     two hex values were sampled off businesses/chat-app/artifacts/logo/
     augh-yahh-logo.png. Martin picked palette A (pink into magenta into
     violet) and red 1 that day. Every value below was checked for contrast
     on the dark ground: brand 5.08, magenta 5.21, red 5.44, all over the
     4.5 a small line needs. The logo violet is 3.12, under it, so violet is
     never text: it only ever appears inside a fade, a border or a glow. */
  --brand:     #F80878;   /* the brand: the mark, the lit tab, what you press, you */
  --brand-lit: #FF4D9E;   /* the light end of a button's fade */
  --brand-mid: #E81CC8;   /* the magenta step between pink and violet */
  --brand-2:   #9400D8;   /* the logo's violet: fades, borders and glows only */
  --red:       #FF2D2D;   /* a mistake or a report. NOT delete: deleting your
                            account is irreversible, and irreversible is amber
                            (.gone in profile.css). Round nine's plan said red
                            for delete; it was written off two .danger rules
                            that nothing on the site has ever used. Removed. */

  --cyan:   #21E6FF;   /* demoted round nine: links, back arrows, plain numbers */
  --violet: #9D6BFF;   /* somebody up on the stage */
  --amber:  #FF9A3C;   /* a gate, anything irreversible, warnings */
  --green:  #3BFF9E;   /* done, proven, online right now */
  --pink:   #FF3DA6;   /* the old brand pink. Nothing uses it since round nine;
                          the game's 50 chip writes its own hex in game.css. */
  --lime:   #C6FF3D;   /* friends, and open to anyone */

  --text:   #DCE8F5;
  --text-2: #8C9FB8;
  --text-3: #5A6B82;

  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  /* the logo's lettering: rounded and heavy. Extra 2 of round nine. */
  --round: ui-rounded, "SF Pro Rounded", "Hiragino Maru Gothic ProN", "Arial Rounded MT Bold", var(--sans);
}

* { box-sizing: border-box; }

html, body { height: 100%; }

/* Hold the page still: no double-tap zoom, no rubber-banding past the edges,
   and no sideways drift. Pinching is turned away in fixed.js, because Safari
   ignores the viewport tag that asks it not to. */
html {
  touch-action: manipulation;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overscroll-behavior: none;
}

html { background: var(--void); }

body {
  margin: 0;
  overscroll-behavior: none;
  overflow-x: hidden;
  background:
    radial-gradient(120% 55% at 50% -8%, rgba(248,8,120,.13), transparent 60%),
    radial-gradient(90% 45% at 95% 40%, rgba(148,0,216,.09), transparent 65%),
    var(--void);
  background-attachment: fixed;
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* ---- the mark ---- */
.mark {
  font-family: var(--round);
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1;
  margin: 0;
  color: #FFFFFF;
  /* The logo's look: white letters, a thin pink outline, a soft pink glow.
     The glow is in em, not px, so it shrinks with the mark: the same three
     shadows at 32 px looked like a pink smear at the 15 px the privacy and
     rules pages use (my own look on the preview, 2026-08-19). */
  text-shadow: 0 0 .06em rgba(248,8,120,.95), 0 0 .3em rgba(248,8,120,.8), 0 0 .8em rgba(248,8,120,.45);
}
.mark i { font-style: normal; color: inherit; text-shadow: inherit; }
/* .page p paints every paragraph grey, and the mark is a paragraph. Before
   round nine that left "augh" grey and "yahh!" cyan on the privacy and rules
   pages; the whole word is white now, so it has to win here too. */
.page .mark, .page .mark i { color: #FFFFFF; }

/* ---- a middle-of-the-screen card ---- */
.stage {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.5rem 1.05rem 2rem;
}

.card {
  width: 100%;
  max-width: 26rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  text-align: center;
}

.kick {
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--text-3);
  margin: 0;
}

h1.big {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.025em;
  color: #F2FAFF;
  margin: 0;
  text-wrap: balance;
}

p.sub { margin: 0; font-size: .92rem; color: var(--text-2); }

/* ---- buttons ---- */
.btn {
  display: block;
  width: 100%;
  padding: .85rem 1rem;
  border-radius: 6px;
  text-align: center;
  font-family: var(--mono);
  font-size: .8rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid rgba(248,8,120,.6);
  /* dark words on the pink fade: 6.47 at the light end, 5.04 at the hot end.
     White would be 3.96 and too faint. The violet stays out from under the
     words (3.09) and shows in the glow instead. */
  color: #1A0010;
  background: linear-gradient(180deg, var(--brand-lit), var(--brand));
  box-shadow: 0 0 20px -4px rgba(248,8,120,.8), 0 0 34px -10px rgba(148,0,216,.7);
  text-decoration: none;
}
.btn:hover { filter: brightness(1.08); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: default; filter: none; }

.btn.ghost {
  background: transparent;
  color: var(--brand);
  border-color: rgba(248,8,120,.45);
  box-shadow: none;
  font-weight: 500;
}
.btn.ghost:hover { background: rgba(248,8,120,.07); filter: none; }

.btn.done {
  background: linear-gradient(180deg, #6BFFC0, #23D98A);
  border-color: rgba(59,255,158,.6);
  box-shadow: 0 0 20px -4px rgba(59,255,158,.75);
}

/* ---- the link box ---- */
.linkbox {
  width: 100%;
  border: 1px solid rgba(59,255,158,.4);
  border-radius: 6px;
  background: rgba(59,255,158,.05);
  box-shadow: 0 0 18px -6px rgba(59,255,158,.5);
  padding: .75rem .8rem;
  font-family: var(--mono);
  font-size: .82rem;
  color: var(--green);
  text-shadow: 0 0 10px rgba(59,255,158,.4);
  word-break: break-all;
  text-align: left;
}

/* ---- name field ---- */
.field {
  width: 100%;
  border: 1px solid rgba(248,8,120,.38);
  border-radius: 6px;
  background: rgba(248,8,120,.04);
  padding: .75rem .8rem;
  font-family: var(--mono);
  /* Never below 16px. Safari on the iPhone zooms the whole page in the moment
     you tap a smaller box, and does not zoom back out afterwards. That was
     the "zooming on the phone" Martin saw, 2026-08-18. */
  font-size: 16px;
  color: var(--text);
  text-align: left;
}
.field::placeholder { color: var(--text-3); }
.field:focus { outline: 2px solid rgba(248,8,120,.55); outline-offset: 1px; }

/* ---- your own camera, before you go in ---- */
.preview {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: linear-gradient(150deg, #132030, #0A121C);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.preview video { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
.preview .placeholder { font-family: var(--mono); font-size: .72rem; color: var(--text-3); padding: 1rem; }

.note {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .04em;
  color: var(--text-3);
  margin: 0;
}
.note a { color: var(--text-3); }

/* an amber line: something you should read before you press on */
.warn {
  font-family: var(--mono);
  font-size: .72rem;
  line-height: 1.6;
  color: var(--amber);
  text-shadow: 0 0 12px rgba(255,154,60,.35);
  margin: 0;
  text-align: left;
  border: 1px solid rgba(255,154,60,.35);
  border-radius: 6px;
  background: rgba(255,154,60,.05);
  padding: .6rem .7rem;
}

.bad {
  font-family: var(--mono);
  font-size: .72rem;
  line-height: 1.6;
  color: var(--red);
  text-shadow: 0 0 12px rgba(255,45,45,.4);
  margin: 0;
  text-align: left;
  border: 1px solid rgba(255,45,45,.4);
  border-radius: 6px;
  background: rgba(255,45,45,.05);
  padding: .6rem .7rem;
}

.hidden { display: none !important; }

/* ============================ in the room ============================ */

.room {
  height: 100dvh;
  height: calc(100dvh - 3.1rem - env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  padding: .7rem;
  gap: .55rem;
}

.roomtop {
  flex: 0 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .75rem;
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-3);
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--line);
}
.roomtop .cnt { color: var(--cyan); text-shadow: 0 0 10px rgba(33,230,255,.5); }
.roomtop button, .roomtop a.out, .roomtop a.lnk {
  font: inherit;
  text-decoration: none;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--green);
  text-shadow: 0 0 10px rgba(59,255,158,.5);
  background: none;
  border: 1px solid rgba(59,255,158,.35);
  border-radius: 5px;
  padding: .3rem .55rem;
  cursor: pointer;
}
.roomtop button:hover, .roomtop a.out:hover, .roomtop a.lnk:hover { background: rgba(59,255,158,.08); }

.grid {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  gap: .4rem;
  grid-template-columns: 1fr;
}
.grid[data-n="2"], .grid[data-n="3"], .grid[data-n="4"] { grid-template-columns: 1fr 1fr; }
.grid[data-n="5"], .grid[data-n="6"] { grid-template-columns: 1fr 1fr; }

@media (min-width: 700px) {
  .grid[data-n="3"], .grid[data-n="4"] { grid-template-columns: 1fr 1fr; }
  .grid[data-n="5"], .grid[data-n="6"] { grid-template-columns: 1fr 1fr 1fr; }
}

.tile {
  position: relative;
  min-height: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: linear-gradient(150deg, #132030, #0A121C);
  display: flex;
  align-items: center;
  justify-content: center;
}
.tile.me { border-color: rgba(248,8,120,.55); box-shadow: 0 0 16px -6px rgba(248,8,120,.65); }
.tile video { width: 100%; height: 100%; object-fit: cover; display: block; }
.tile.me video { transform: scaleX(-1); }
.tile.camoff video { display: none; }

/* The first letter of a name, shown in place of the video when the camera
   is off. Hidden the rest of the time. */
.tile .initial {
  display: none;
  font-family: var(--mono);
  font-size: 1.6rem;
  color: var(--text-3);
}
.tile.camoff .initial { display: block; }

.tile .nm {
  position: absolute;
  left: .35rem;
  bottom: .3rem;
  font-family: var(--mono);
  font-size: .62rem;
  color: var(--text-2);
  background: rgba(5,7,12,.72);
  padding: .1rem .32rem;
  border-radius: 3px;
  max-width: calc(100% - 4.5rem);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tile .mic {
  position: absolute;
  right: .35rem;
  bottom: .3rem;
  font-family: var(--mono);
  font-size: .62rem;
  color: var(--text-2);
  text-shadow: none;
  background: rgba(5,7,12,.72);
  padding: .1rem .32rem;
  border-radius: 3px;
}
.tile .connecting {
  position: absolute;
  font-family: var(--mono);
  font-size: .62rem;
  color: var(--text-3);
}

.ctrls { flex: 0 0 auto; display: flex; gap: .4rem; }
.ctrl {
  flex: 1;
  padding: .7rem .3rem;
  border-radius: 6px;
  border: 1px solid var(--line);
  font-family: var(--mono);
  font-size: .64rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-2);
  text-align: center;
  background: rgba(255,255,255,.02);
  cursor: pointer;
}
.ctrl:hover { background: rgba(255,255,255,.05); }
.ctrl[aria-pressed="true"] {
  border-color: rgba(248,8,120,.55);
  color: var(--brand);
  text-shadow: 0 0 10px rgba(248,8,120,.5);
}
.ctrl.leave {
  border-color: rgba(255,154,60,.5);
  color: var(--amber);
  text-shadow: 0 0 10px rgba(255,154,60,.5);
}
.ctrl.leave:hover { background: rgba(255,154,60,.08); }

/* a line that slides in over the room: copied, someone left, connection lost */
.toast {
  position: fixed;
  left: 50%;
  bottom: 5.2rem;
  /* Above the card overlay (40) and the gold notes (45): a toast answering a
     tap on the card was drawn under it and nobody saw it (tester 2026-08-19). */
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .06em;
  color: var(--green);
  text-shadow: 0 0 10px rgba(59,255,158,.5);
  background: rgba(5,7,12,.94);
  border: 1px solid rgba(59,255,158,.4);
  border-radius: 6px;
  padding: .5rem .8rem;
  z-index: 60;
  max-width: calc(100vw - 2rem);
  text-align: center;
}
.toast.warnish { color: var(--amber); border-color: rgba(255,154,60,.45); text-shadow: 0 0 10px rgba(255,154,60,.5); }

/* ---- a plain page of words (privacy) ---- */
.page { max-width: 34rem; margin: 0 auto; padding: 2rem 1.05rem 4rem; }
.page h1 { font-size: 1.6rem; letter-spacing: -.025em; color: #F2FAFF; margin: .4rem 0 1rem; }
.page h2 {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--text-3);
  margin: 2rem 0 .6rem; padding-bottom: .5rem; border-bottom: 1px solid var(--line);
}
.page p { color: var(--text-2); font-size: .92rem; }
.page a { color: var(--cyan); }
.page footer {
  margin-top: 2.5rem; border-top: 1px solid var(--line); padding-top: 1rem;
  font-family: var(--mono); font-size: .68rem; line-height: 1.75; color: var(--text-3);
}

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ======================= home: the two choices ======================= */

.choice {
  border: 1px solid rgba(248,8,120,.3);
  border-radius: 8px;
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  box-shadow: 0 0 22px -8px rgba(248,8,120,.5);
  padding: .95rem 1rem 1rem;
  display: flex;
  flex-direction: column;
  gap: .55rem;
  text-align: left;
}
/* The lobby is the public one, so it does not share the colour of the
   private room. Lime means "this one is open to anyone". */
.choice.lobbyish {
  border-color: rgba(198,255,61,.3);
  box-shadow: 0 0 22px -8px rgba(198,255,61,.45);
}
.choice-kick {
  margin: 0;
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--brand);
  text-shadow: 0 0 12px rgba(248,8,120,.5);
}
.choice.lobbyish .choice-kick { color: var(--lime); text-shadow: 0 0 12px rgba(198,255,61,.5); }
.choice-sub { margin: 0; font-size: .82rem; color: var(--text-2); }

.btn.lime {
  color: var(--lime);
  border-color: rgba(198,255,61,.4);
}
.btn.lime:hover { background: rgba(198,255,61,.08); }
.btn.lime span { color: var(--text-3); letter-spacing: .04em; text-transform: none; }

/* The private video room is the quiet one on Home now: no glow. */
.choice.quiet { border-color: var(--line); box-shadow: none; }
.choice.quiet .choice-kick { color: var(--text-2); text-shadow: none; }

/* ============================ bottom tabs ============================ */

.tabs {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  display: flex;
  border-top: 1px solid var(--line);
  background: rgba(5,7,12,.94);
  backdrop-filter: blur(8px);
  z-index: 30;
  padding-bottom: env(safe-area-inset-bottom);
}
.tab {
  flex: 1;
  padding: .85rem .5rem;
  text-align: center;
  text-decoration: none;
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-3);
}
.tab.on { color: var(--brand); text-shadow: 0 0 12px rgba(248,8,120,.7); }
/* Four tabs since 2026-08-18: a touch smaller so Profile fits at 390 px. */
.tab { font-size: .64rem; letter-spacing: .1em; padding: .85rem .25rem; }
.tab .tab-n { color: var(--lime); letter-spacing: 0; text-transform: none; }
.tab.on .tab-n { color: var(--lime); }

/* Room the tabs need at the bottom of the page. */
body.has-nav .stage { padding-bottom: 5.5rem; }

/* ============================== the lobby ============================== */

.lobby {
  position: fixed;
  inset: 0;
  height: auto;
  max-height: 100dvh;
  bottom: calc(3.1rem + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  padding: .7rem .7rem .4rem;
  gap: .5rem;
}

.who {
  flex: 0 0 auto;
  max-height: 8rem;
  overflow-y: auto;
  border: 1px solid rgba(198,255,61,.28);
  border-radius: 6px;
  background: rgba(198,255,61,.04);
  padding: .5rem .6rem;
}
.who ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.who li {
  font-family: var(--mono);
  font-size: .66rem;
  color: var(--lime);
  border: 1px solid rgba(198,255,61,.3);
  border-radius: 999px;
  padding: .12rem .5rem;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lines {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  list-style: none;
  margin: 0;
  padding: .2rem .1rem;
  display: flex;
  flex-direction: column;
  gap: .6rem;
}
/* The lines sit at the bottom and grow upward: a new one lands at the
   bottom and pushes the older ones up, like the live-stream apps. Done with
   margin-top:auto on the first line rather than justify-content, which
   would clip the older lines from scrolling. Martin's ask 2026-08-18 from his
   phone, for the chat under the stage; the Chat tab is the same piece. */
.lines > li:first-child { margin-top: auto; }

.line { max-width: 100%; }
.line-head { display: flex; align-items: center; gap: .45rem; }
/* The badge is a box now (round four), and a photo inside it has no text
   baseline, so baseline alignment sat it a line above the name (Martin's
   phone 2026-08-18: "my profile by my chat is crooked"). Centre it. */
.line-head .badge { align-self: center; vertical-align: middle; }
.line-who {
  font-family: var(--mono);
  font-size: .68rem;
  color: var(--cyan);
  text-shadow: 0 0 10px rgba(33,230,255,.45);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 60%;
}
.line.mine .line-who { color: var(--green); text-shadow: 0 0 10px rgba(59,255,158,.45); }
.line-when { font-family: var(--mono); font-size: .6rem; color: var(--text-3); }
.line-text {
  margin: .1rem 0 0;
  font-size: .9rem;
  color: var(--text);
  overflow-wrap: anywhere;   /* a 500-character word must not widen the page */
  white-space: pre-wrap;
}

.line.note-line {
  font-family: var(--mono);
  font-size: .66rem;
  color: var(--text-3);
  text-align: center;
  padding: .1rem 0;
}

.say { flex: 0 0 auto; display: flex; gap: .4rem; }
.say .field { flex: 1; min-width: 0; }
/* Send is narrower since 2026-08-19 (Martin: "make send message smaller"),
   but no shorter: 44 px is what a thumb needs. The room it gives up goes to
   the Dragon Tiger coin, which now sits at the end of this row instead of
   floating over the last thing anyone said. */
.say .btn { width: auto; flex: 0 0 auto; padding: .75rem .7rem; font-size: .72rem; letter-spacing: .06em; }

.lobby-note { text-align: center; margin: .1rem 0 0; font-size: .62rem; }
.lobby-note a { color: var(--text-3); }

/* Built for a phone, but on a laptop a full-width column of chat is a lot of
   empty space with a few words floating in it. Keep it a readable column. */
@media (min-width: 46rem) {
  .lobby { max-width: 42rem; margin: 0 auto; }
  .room  { max-width: 60rem; margin: 0 auto; }
}

/* Who you are, and how long the name is yours for. */
.me-chip {
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .04em;
  text-transform: none;
  color: var(--green);
  text-shadow: 0 0 10px rgba(59,255,158,.45);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1 1 auto;
  min-width: 0;
  text-align: center;
}
.me-chip .fading { color: var(--amber); text-shadow: 0 0 10px rgba(255,154,60,.5); }

/* Logging out gives the name up, so it is amber like everything you cannot
   take back. */
.roomtop button.out, .roomtop a.out {
  color: var(--amber);
  border-color: rgba(255,154,60,.4);
  text-shadow: 0 0 10px rgba(255,154,60,.5);
}
.roomtop button.out:hover, .roomtop a.out:hover { background: rgba(255,154,60,.08); }
.roomtop { gap: .4rem; }
.roomtop button, .roomtop a.out, .roomtop a.lnk { flex: 0 0 auto; }

/* ============================ live, holding ============================ */
.soonbox {
  width: 100%;
  border: 1px dashed rgba(157,107,255,.45);
  border-radius: 8px;
  padding: 1rem .8rem;
  font-family: var(--mono); font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--violet); text-shadow: 0 0 12px rgba(157,107,255,.5);
}
.soonbox small {
  display: block; margin-top: .45rem;
  font-family: var(--sans); font-size: .85rem; letter-spacing: 0; text-transform: none;
  color: var(--text-2); text-shadow: none; line-height: 1.5;
}
.spots { width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; }
.spot {
  aspect-ratio: 1; border: 1px dashed rgba(157,107,255,.3); border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3);
}

/* ============================== profile ============================== */
.profile { width: 100%; display: flex; flex-direction: column; gap: .6rem; align-items: center; }
.profile-name {
  margin: 0; font-size: 1.6rem; font-weight: 700; letter-spacing: -.02em; color: #F2FAFF;
  text-shadow: 0 0 18px rgba(198,255,61,.45); overflow-wrap: anywhere;
}
.profile-left { margin: 0; font-family: var(--mono); font-size: .8rem; color: var(--lime); }

/* ============================ chat, extras ============================ */
/* Not logged in: the box says so and takes you to Profile. */
.login-bar {
  display: block; text-align: center; text-decoration: none;
  border: 1px solid rgba(198,255,61,.35); border-radius: 6px;
  padding: .55rem .7rem; font-family: var(--mono); font-size: .68rem; letter-spacing: .06em;
  color: var(--lime); text-shadow: 0 0 10px rgba(198,255,61,.45); background: rgba(198,255,61,.04);
}
.say .field.locked { color: var(--text-3); border-color: var(--line); background: rgba(255,255,255,.02); cursor: pointer; }

/* ============================ live, holding ============================ */
.live-page {
  position: fixed; inset: 0;
  bottom: calc(3.1rem + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: .5rem;
  padding: .7rem .7rem .4rem;
}
.stage-box {
  flex: 0 0 auto; display: flex; flex-direction: column; gap: .55rem; align-items: center; text-align: center;
  border: 1px solid var(--line); border-radius: 8px; padding: .8rem .8rem .9rem;
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
}
.stage-box .kick { margin: 0; }
.chatbox {
  flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: .45rem;
  border: 1px solid rgba(198,255,61,.25); border-radius: 8px; padding: .55rem .6rem .5rem;
  box-shadow: 0 0 20px -10px rgba(198,255,61,.5);
}
.chatbox .lines { flex: 1 1 auto; min-height: 0; }
@media (min-width: 700px) { .live-page { max-width: 42rem; margin: 0 auto; } }

/* ============================== profile ============================== */
.profile { width: 100%; display: flex; flex-direction: column; gap: .6rem; align-items: center; }
.profile-name {
  margin: 0; font-size: 1.6rem; font-weight: 700; letter-spacing: -.02em; color: #F2FAFF;
  text-shadow: 0 0 18px rgba(198,255,61,.45); overflow-wrap: anywhere;
}
.switch { width: 100%; display: flex; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.sw {
  flex: 1; font: inherit; font-family: var(--mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
  padding: .6rem; background: none; border: 0; color: var(--text-3); cursor: pointer;
}
.sw.on { color: var(--brand); text-shadow: 0 0 10px rgba(248,8,120,.5); background: rgba(248,8,120,.07); }
.pform { width: 100%; display: flex; flex-direction: column; gap: .55rem; }
.pform .field { width: 100%; }
.pform .btn { width: 100%; }
.lbl { margin: .2rem 0 0; font-size: .8rem; color: var(--text-2); text-align: left; }
select.field {
  appearance: none; -webkit-appearance: none; padding-right: 2.2rem;
  background-image: linear-gradient(45deg, transparent 50%, var(--brand) 50%), linear-gradient(135deg, var(--brand) 50%, transparent 50%);
  background-position: calc(100% - 1.1rem) 50%, calc(100% - .75rem) 50%;
  background-size: .35rem .35rem, .35rem .35rem; background-repeat: no-repeat;
}
.fg-q { margin: 0; font-size: .95rem; color: var(--text); text-align: left; }

/* ============================ profile: the photo slot ============================ */
/* Martin's call 2026-08-18: a photo behind the log in, fading to dark, the form
   in a glass card at the bottom. Until a photo he has the rights to lands in
   public/icons/login-bg.jpg, an abstract neon wash stands in. Swap the picture
   by replacing that file; nothing else changes. */
body.login-page {
  background:
    linear-gradient(180deg, rgba(5,7,12,.25) 0%, rgba(5,7,12,.55) 45%, rgba(5,7,12,.94) 78%, var(--void) 100%),
    url('/icons/login-bg.jpg') center 20% / cover no-repeat,
    radial-gradient(70% 45% at 50% 22%, rgba(248,8,120,.30), transparent 70%),
    radial-gradient(45% 35% at 20% 55%, rgba(148,0,216,.26), transparent 70%),
    radial-gradient(50% 35% at 80% 65%, rgba(198,255,61,.14), transparent 70%),
    var(--void);
  background-attachment: fixed;
}
.login-stage { justify-content: flex-end; }
.card.glass {
  background: rgba(5,7,12,.72);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.08); border-radius: 14px;
  padding: 1.1rem 1rem 1rem;
}

/* ============================ profile, step three ============================ */
.p-face { margin: .2rem 0 0; }
.swatches { display: flex; gap: .45rem; justify-content: center; flex-wrap: wrap; }
.swatch { width: 1.7rem; height: 1.7rem; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0; box-shadow: 0 0 10px -2px currentColor; }
.swatch.on { border-color: #fff; box-shadow: 0 0 0 2px rgba(255,255,255,.35); }
.p-about { width: 100%; display: flex; gap: .4rem; }
.p-about .field { flex: 1; min-width: 0; }
.p-about .btn { width: auto; flex: 0 0 auto; padding: .75rem .9rem; }
.p-photo-row { width: 100%; display: flex; gap: .4rem; }
.p-photo-row .btn { flex: 1; text-align: center; cursor: pointer; }
.p-more { width: 100%; border: 1px solid var(--line); border-radius: 8px; padding: 0 .8rem; text-align: left; }
.p-more summary { cursor: pointer; padding: .7rem 0; font-family: var(--mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-2); list-style: none; display: flex; justify-content: space-between; }
.p-more summary::after { content: '›'; color: var(--text-3); }
.p-more[open] summary::after { content: '⌄'; }
.p-more .pform { padding: .2rem 0 .8rem; }
.p-count { color: var(--lime); letter-spacing: 0; }
.p-list { list-style: none; margin: 0; padding: .2rem 0 .7rem; display: flex; flex-direction: column; gap: .5rem; }
.p-list li { display: flex; align-items: center; gap: .5rem; font-size: .92rem; color: var(--text); }
.p-list li.note { font-size: .8rem; }
.p-where { margin-left: auto; font-family: var(--mono); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.lnk-btn { margin-left: auto; font: inherit; font-family: var(--mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--lime); background: none; border: 1px solid rgba(198,255,61,.4); border-radius: 5px; padding: .3rem .5rem; cursor: pointer; }
.note.ok { color: var(--green); }


/* ---- round four: level box, stats, shop, leaderboard (profile) ---- */
.lvbox { width: 100%; display: flex; align-items: center; gap: .7rem; border: 1px solid rgba(255,228,92,.35); border-radius: 10px; padding: .6rem .75rem; background: #0D1420; box-shadow: 0 0 22px -8px rgba(255,228,92,.5); text-align: left; }
.lvbox .lv-n b { display: block; font-family: var(--mono); font-size: 1.6rem; font-weight: 800; color: var(--gold, #FFE45C); text-shadow: 0 0 14px rgba(255,228,92,.7); line-height: 1; }
.lvbox .lv-n small { display: block; font-family: var(--mono); font-size: .5rem; letter-spacing: .2em; color: var(--text-3); margin-bottom: .15rem; }
.lvbox .lv-r { flex: 1; display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.lvbox .bar { height: 7px; border-radius: 99px; background: rgba(255,255,255,.06); overflow: hidden; }
.lvbox .bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #FFE45C, #FF9A3C); box-shadow: 0 0 8px rgba(255,228,92,.8); transition: width .5s ease; }
.lvbox .lv-r small { font-family: var(--mono); font-size: .62rem; color: var(--text-2); }
.stat3 { width: 100%; display: flex; gap: .4rem; }
.stat3 > div { flex: 1; border: 1px solid var(--line); border-radius: 8px; padding: .5rem .3rem; text-align: center; background: #0A0F17; }
.stat3 b { display: block; font-family: var(--mono); font-size: 1.05rem; font-weight: 700; }
.stat3 span { font-family: var(--mono); font-size: .5rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }
.stat3 .coin b { color: #FFE45C; text-shadow: 0 0 8px rgba(255,228,92,.6); }
.stat3 .strk b { color: #FF9A3C; text-shadow: 0 0 8px rgba(255,154,60,.6); }
.stat3 .rank b { color: #21E6FF; text-shadow: 0 0 8px rgba(33,230,255,.6); }
.p-list.shop li { justify-content: space-between; border: 1px solid var(--line); border-radius: 8px; padding: .5rem .6rem; background: #0A0F17; }
.p-list.shop .sample { font-weight: 700; font-size: 1rem; }
.p-list.shop .lab { font-family: var(--mono); font-size: .6rem; color: var(--text-3); margin-left: .4rem; }
.p-list.shop .pr { font: inherit; font-family: var(--mono); font-size: .66rem; color: #FFE45C; border: 1px solid rgba(255,228,92,.45); border-radius: 99px; padding: .2rem .6rem; background: none; cursor: pointer; }
.p-list.shop .pr.own { color: var(--green); border-color: rgba(59,255,158,.45); }
.p-list.shop .pr.on { color: #05070C; background: var(--green); border-color: var(--green); }
.p-list.shop .pr.poor { color: var(--text-3); border-color: var(--line); }
.p-list.board li { border-bottom: 1px solid var(--line); padding: .35rem .2rem; }
.p-list.board .pos { font-family: var(--mono); font-size: .62rem; color: var(--text-3); width: 1.2rem; }
.p-list.board .pts { margin-left: auto; font-family: var(--mono); font-size: .66rem; color: var(--cyan); }
.p-list.board li.me { background: rgba(198,255,61,.06); border-radius: 5px; }
.p-list.rules li { justify-content: space-between; font-size: .84rem; }
.p-list.rules b { font-family: var(--mono); color: var(--lime); font-weight: 600; white-space: nowrap; margin-left: auto; padding-left: .5rem; }
.p-list.rules .p-where { margin-left: .5rem; }
.profile-name { display: inline-flex; align-items: center; }
.board-box .p-list.board { padding: .2rem 0 .4rem; }
.board-box .p-list.board li { font-size: .9rem; }
.choice-sub-inline { font-family: var(--mono); font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); margin-left: .5rem; }

/* Keyboard up on a phone (fixed.js sets html.kb and the two measures): the
   Chat and Live pages fit the visible part exactly, the tab bar steps aside. */
html.kb .lobby, html.kb .live-page { top: var(--vvt, 0px); height: var(--vvh, 100dvh); max-height: none; bottom: auto; }
html.kb .tabs { display: none; }

/* ============ round eight (2026-08-19): Home's top row, the coin's lane,
   the video door and the rules page ============ */

/* Four chips beside the mark (CHAT, LIVE, FRIENDS, VIDEO) on one row at
   390 px: the mark a touch smaller and the chips a touch tighter, so the mark
   is never cut. The chips' colours keep their meaning; VIDEO is cyan. */
/* content from the top, even when a list fails to load. The room at the end is
   for the Dragon Tiger coin: it floats over the bottom right corner, so
   without it the coin sits on the last row of member cards for good and their
   name and level cannot be read (the tester, 2026-08-19). Scrolled to the
   end, the coin now sits over empty ground instead of somebody's card. */
.home-members { justify-content: flex-start; padding-bottom: 4.6rem; }
.home-members .hrow { gap: .25rem; flex-wrap: wrap; row-gap: .35rem; } /* narrower than about 385 px (small Androids): the last chips drop under the mark instead of sitting on it */
.home-members .hrow .mark { font-size: 1.1rem; margin-right: .15rem; overflow: visible; white-space: nowrap; flex: 0 1 auto; }
.home-members .hrow .chip2 { font-size: .58rem; letter-spacing: .06em; padding: .32rem .45rem; flex: 0 0 auto; }
.chip2.cyan { color: var(--cyan); border-color: rgba(33,230,255,.5); text-shadow: 0 0 8px rgba(33,230,255,.5); }

/* Home's footer row: Privacy · Rules · Contact, the same line as Profile's. */
.home-foot { text-align: center; margin: .2rem 0 0; }
.home-foot a { color: var(--text-2); text-decoration: none; border-bottom: 1px solid rgba(140,159,184,.35); padding-bottom: 1px; }

/* The gold coin (game.css: 3.4rem wide, .85rem from the right edge, a 5 px ring)
   sits over the right end of Home's lines on a phone. Below 700 px, where it
   hugs the edge, the top 10 rows, the biggest-win line and the footer stop
   short of it, so no number or word is ever under it at any scroll position.
   From 700 px up the coin sits outside the card and nothing needs to move. */
@media (max-width: 699px) {
  .home-members .p-list.board li { margin-right: 3.8rem; }
  .home-members .big-win { width: auto; margin-right: 3.8rem; }
  .home-members .home-foot { margin-right: 3.8rem; }
}

/* The video door and the rules page: content from the top, a way back as the
   first line, the tab bar under it. */
.door { min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: 1rem 1.05rem 2rem; }
body.has-nav .door { padding-bottom: 5.5rem; }
.door .card { gap: .9rem; }
/* The same back link as the Profile screens (profile.css .back). */
.door .back, .page .back { align-self: flex-start; font-family: var(--mono); font-size: .8rem; letter-spacing: .06em; color: var(--cyan); text-decoration: none; padding: .2rem 0; }
.door .back small { font-size: inherit; color: var(--text-3); }
.door .mark { margin-top: .3rem; }
.door .door-foot { text-align: center; margin: .6rem 0 0; }
.door .door-foot a { color: var(--text-2); text-decoration: none; border-bottom: 1px solid rgba(140,159,184,.35); padding-bottom: 1px; }
.page .back { display: inline-block; margin: 0 0 .6rem; }
.page ol.rules-list { margin: 0; padding: 0 0 0 1.6rem; display: flex; flex-direction: column; gap: .7rem; color: var(--text-2); font-size: .95rem; line-height: 1.55; }
.page ol.rules-list li::marker { font-family: var(--mono); color: var(--green); }
.page ol.rules-list b { color: var(--text); font-weight: 600; }

/* Round eight build B: what is waiting behind Friends. A pink bubble on Home's
   FRIENDS chip (unread messages plus waiting requests, hidden at 0) and a
   small pink dot on the Profile tab in the bottom bar. Pink = the badge. */
.home-members .hrow .chip2 { position: relative; }
.chip-badge {
  position: absolute; top: -.45rem; right: -.35rem; min-width: 1.05rem; height: 1.05rem; padding: 0 .28rem;
  display: inline-flex; align-items: center; justify-content: center; border-radius: 999px;
  background: var(--brand); color: #1A0010; font-family: var(--mono); font-size: .58rem; font-weight: 800; letter-spacing: 0; line-height: 1;
  text-shadow: none; box-shadow: 0 0 10px rgba(248,8,120,.8); pointer-events: none;
}
.tab { position: relative; }
.tab .tab-dot {
  position: absolute; top: .55rem; right: calc(50% - 1.9rem); width: .42rem; height: .42rem; border-radius: 50%;
  background: var(--brand); box-shadow: 0 0 8px rgba(248,8,120,.9), 0 0 3px var(--brand); pointer-events: none;
}

/* ==================== the app is always a phone ====================
   Martin, 2026-08-19: on his Mac the site stretched the whole window.
   Past a phone's width the whole app sits in one phone-wide column in
   the middle, with the dark ground and a hairline either side. Turning
   a phone sideways then changes nothing but the space around it, which
   is the other half of what he asked for: a website cannot stop Safari
   rotating, but it can make rotating look like nothing happened.

   Everything pinned to the screen (the tab bar, the chat, the game, the
   toasts, the sheets) is positioned against the window, not the page, so
   each one has to be brought into the column by hand. Anything with both
   a left and a right set is centred with margin; anything held to one
   side is measured from the middle instead. Selectors are written with
   body in front so they beat the same class in a stylesheet that loads
   after this one. */
@media (min-width: 520px) {
  :root { --col: 27rem; }        /* 432 px, about a big phone */

  /* the page itself */
  body .stage,
  body .door,
  body .page,
  body .room { max-width: var(--col); margin-inline: auto; }

  /* pinned, and spanning both sides: centre them in the column */
  body .tabs,
  body .lobby,
  body .live-page,
  body .report-wrap,
  body .menu,
  body .dm,
  body .gpanel,
  body .gmini,
  body .g-banner,
  body .level-toast { max-width: var(--col); margin-inline: auto; }

  /* pinned to one side: measure from the middle, keeping the same gap */
  body .gcoin     { right: calc(50% - var(--col) / 2 + .85rem); }
  body .pts-float { right: calc(50% - var(--col) / 2 + 1.1rem); }
  /* on Chat and Live the coin sits in the send row, whose edge is .7rem in
     (game.css). Two classes there, so it needs two here to be brought into
     the column as well. */
  body .lobby ~ .gcoin,
  body .live-page ~ .gcoin { right: calc(50% - var(--col) / 2 + .7rem); }

  /* The toast centres itself on the window, which is the column's middle too,
     so a short one looked right and this was nearly missed. Its width is set
     from the WINDOW though, so a long one (a refused link, a report that is
     too old) stretched right past the column and its hairlines. Caught by the
     code reviewer, 2026-08-19. */
  body .toast { max-width: min(calc(100vw - 2rem), calc(var(--col) - 1.6rem)); }

  /* the two edges, so it reads as a phone and not as a page that failed
     to stretch. Fixed, thin, and never in the way of a tap. */
  body::before,
  body::after {
    content: '';
    position: fixed;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--line);
    z-index: 1;
    pointer-events: none;
  }
  body::before { left: calc(50% - var(--col) / 2 - 1px); }
  body::after  { right: calc(50% - var(--col) / 2 - 1px); }

  /* Everything below used to spread out once the window was wide, back when a
     wide window meant a wide app. In a phone-wide column it would spread past
     the edges or crowd, so each one is put back to what a phone shows. */

  /* the game's own wide-screen places, all wider than the column */
  body .gmini,
  body .gpanel,
  body .g-banner { left: 0; right: 0; }

  /* Home's members: two across, the way a phone shows them, not three */
  body .mgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* video room tiles: the phone's layout, or three across in 432 px is a strip */
  body .grid[data-n="3"], body .grid[data-n="4"] { grid-template-columns: 1fr; }
  body .grid[data-n="5"], body .grid[data-n="6"] { grid-template-columns: 1fr 1fr; }

  /* The Dragon Tiger coin used to sit outside the card past 700 px, so the room
     it needs was only made below that. It is inside the column at every width
     now, so the top ten, the big win and the footer keep their room here too,
     or the coin sits on top of them. */
  body .home-members .p-list.board li,
  body .home-members .big-win,
  body .home-members .home-foot { margin-right: 3.8rem; }
}