/* ---------------------------------------------------------------------------
   The room kit — "In the room" (the owner's pick, 2026-09-24).

   Every screen stands in a room of the club: the room's pixel-art picture
   fills the background at a whole-number scale (every art pixel the same
   size), a strip under the menu is left clear so the room reads, then the
   picture steps down to night navy in a 16-bit dither (25%, 50%, 75%,
   solid). The screens float on it as solid retro windows: a 3px ink frame
   with cut pixel corners, a white inner ring, a navy body and a title bar in
   the club's colour with a bevel. A gold cursor marks what is selected.

   src/room.js draws the room and knows which room each screen is in
   (Room.set / Room.route). This file is the furniture every screen shares.
   The recipe for using it: scratchpad w5/kit.md.

   House rules still hold: solid saturated colour only (never a pale tint),
   no emoji, no left-edge stripes, Jersey 15 for display, Rubik 700+ for
   everything you read, and never text straight on a busy picture.
--------------------------------------------------------------------------- */
:root {
  color-scheme: dark;
  /* the art's own colours */
  --ink: #0d1b2a;          /* every outline */
  --night: #070d1c;        /* the floor of every room */
  --win: #0f1e38;          /* a window's body */
  --win-2: #172a4b;        /* a tile inside a window */
  --win-3: #1f3761;        /* a tile you point at */
  --zebra: #1a3056;        /* every other table row */
  --rule: #2a3f66;         /* lines inside a window, an empty bar */
  --ink-2: #1b2c47;        /* a dark button, a day still to come */
  --soft: #c5d2e3;         /* small labels on navy */
  /* a box inside a window (owner, 2026-09-26: "no navy on navy"): every
     card, row, tile and list item inside a navy window is solid white with
     ink words, like the Home messages; pointed at or chosen it goes gold.
     The navy is only the window's own body, the frame round the cards. */
  --card: #fff;            /* a card, a row, a tile inside a window */
  --card-hov: var(--gold); /* a card you point at, or the one chosen */
  --card-ink: #0d1b2a;     /* the words on a card */
  --card-line: #0d1b2a;    /* the lines inside a white table */
  --gold: #ffd34d; --gold-dk: #b88a00; --gold-hi: #ffe07a;
  --red: #e11d48; --red-dk: #8f0f2c;
  --green: #16a34a; --green-dk: #0b5e29;
  --orange: #f97316; --violet: #7c3aed; --sky: #2aa3ff;
  --steel: #b9c3cf;        /* the lip on a white button */
  /* the club's colour lifted and sunk, for bevels (game.js theme() sets the
     exact pair; these are the fallbacks) */
  --tm-hi: color-mix(in srgb, var(--tm, #1e63d6) 70%, #fff);
  --tm-dk: color-mix(in srgb, var(--tm, #1e63d6) 62%, #000);
  --tm-sh: var(--ink);     /* the shadow under words on the club colour */
  --tm-acc: var(--gold);   /* a second word on the club colour (the record) */

  --sans: 'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --disp: 'Jersey 15', 'Rubik', system-ui, sans-serif;

  /* a 3px ink line that stops short of every corner: the cut pixel corner */
  --frame: 0 -3px 0 0 var(--ink), 0 3px 0 0 var(--ink), -3px 0 0 0 var(--ink), 3px 0 0 0 var(--ink);
  --frame-2: 0 -2px 0 0 var(--ink), 0 2px 0 0 var(--ink), -2px 0 0 0 var(--ink), 2px 0 0 0 var(--ink);
  --drop: 6px 9px 0 0 rgba(1, 4, 12, .6);
  /* the same corner cut, for things drawn with a real border */
  --notch: polygon(3px 0, calc(100% - 3px) 0, calc(100% - 3px) 3px, 100% 3px, 100% calc(100% - 3px),
    calc(100% - 3px) calc(100% - 3px), calc(100% - 3px) 100%, 3px 100%, 3px calc(100% - 3px),
    0 calc(100% - 3px), 0 3px, 3px 3px);

  /* the gold cursor, drawn pixel by pixel (7 x 11 and 11 x 7) */
  --cur: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 7 11%27 shape-rendering=%27crispEdges%27%3E%3Cpath fill=%27%230d1b2a%27 d=%27M0 0h2v1h-2zM0 1h1v1h-1zM2 1h1v1h-1zM0 2h1v1h-1zM3 2h1v1h-1zM0 3h1v1h-1zM4 3h1v1h-1zM0 4h1v1h-1zM5 4h1v1h-1zM0 5h1v1h-1zM6 5h1v1h-1zM0 6h1v1h-1zM5 6h1v1h-1zM0 7h1v1h-1zM4 7h1v1h-1zM0 8h1v1h-1zM3 8h1v1h-1zM0 9h1v1h-1zM2 9h1v1h-1zM0 10h2v1h-2z%27/%3E%3Cpath fill=%27%23ffd34d%27 d=%27M1 1h1v1h-1zM1 2h2v1h-2zM1 3h3v1h-3zM1 4h4v1h-4zM1 5h5v1h-5zM1 6h4v1h-4zM1 7h3v1h-3zM1 8h2v1h-2zM1 9h1v1h-1z%27/%3E%3C/svg%3E");
  /* the cursor in solid ink, for when it sits on gold */
  --cur-ink: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 7 11%27 shape-rendering=%27crispEdges%27%3E%3Cpath fill=%27%230d1b2a%27 d=%27M0 0h2v1h-2zM0 1h3v1h-3zM0 2h4v1h-4zM0 3h5v1h-5zM0 4h6v1h-6zM0 5h7v1h-7zM0 6h6v1h-6zM0 7h5v1h-5zM0 8h4v1h-4zM0 9h3v1h-3zM0 10h2v1h-2z%27/%3E%3C/svg%3E");
  --cur-dn: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 11 7%27 shape-rendering=%27crispEdges%27%3E%3Cpath fill=%27%230d1b2a%27 d=%27M0 0h11v1h-11zM0 1h1v1h-1zM10 1h1v1h-1zM1 2h1v1h-1zM9 2h1v1h-1zM2 3h1v1h-1zM8 3h1v1h-1zM3 4h1v1h-1zM7 4h1v1h-1zM4 5h1v1h-1zM6 5h1v1h-1zM5 6h1v1h-1z%27/%3E%3Cpath fill=%27%23ffd34d%27 d=%27M1 1h9v1h-9zM2 2h7v1h-7zM3 3h5v1h-5zM4 4h3v1h-3zM5 5h1v1h-1z%27/%3E%3C/svg%3E");
}

/* --- the room ---------------------------------------------------------------
   #room is made by room.js as the first thing in <body>: fixed behind
   everything, never taking a click. The art is sized and placed in whole art
   pixels by room.js; until it arrives the room is plain night navy, and the
   layout never moves either way. */
#room {
  position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
  background: var(--night);
}
#room .rm-art {
  position: absolute; left: 0; top: 0; width: 1920px; height: 1080px;
  background: var(--night) center top / 100% 100% no-repeat; image-rendering: pixelated;
}
#room .rm-ceil { position: absolute; top: 0; image-rendering: pixelated; }
/* Game day's moving tunnel (Room.canvas), laid over the picture by room.js */
#room .rm-live { position: absolute; left: 0; top: 0; image-rendering: pixelated; }
#room .rm-dz { position: absolute; left: 0; right: 0; background-repeat: repeat; image-rendering: pixelated; }
#room .rm-dz.solid { background: var(--night); bottom: 0; }
#app { position: relative; z-index: 1; }

/* the strip under the menu, left clear so the room reads; room.js puts it at
   the top of <main>. The name of the room rides its bottom-left corner. */
.rm-stage { position: relative; height: 140px; max-width: 1320px; margin: 0 auto; pointer-events: none; }
.rm-stage.short { height: 76px; }
.rm-stage.none { height: 0; }
.rm-place {
  position: absolute; left: 3px; bottom: 16px; display: flex; align-items: center; gap: 8px;
  padding: 6px 11px 5px 9px; background: var(--ink); color: #fff; box-shadow: var(--frame);
  font: 400 20px/1 var(--disp); letter-spacing: .8px; text-transform: uppercase; white-space: nowrap;
}
.rm-place i { width: 10px; height: 10px; flex: none; background: var(--gold); box-shadow: 0 0 0 2px #000; }
.rm-stage.none .rm-place, .rm-place:empty { display: none; }

/* --- the window --------------------------------------------------------------
   <section class="rm-win">
     <div class="rm-tb"><h2>Next game</h2><div class="rm-end">…</div></div>
     <div class="rm-wb">…</div>
   </section> */
.rm-win {
  position: relative; min-width: 0; margin: 3px;
  background: var(--win); color: #fff;
  border: 2px solid #fff;
  box-shadow: var(--frame), var(--drop);
}
.rm-win.flat { box-shadow: var(--frame); }
.rm-wb { padding: 12px; }
.rm-wb > :first-child { margin-top: 0; }

/* the title bar: the club's colour with a 16-bit bevel (light top, dark foot) */
.rm-tb {
  display: flex; align-items: center; gap: 10px; min-height: 40px;
  padding: 6px 12px 4px; background: var(--tm); color: var(--on-tm);
  border-bottom: 3px solid var(--ink);
  /* the bevel follows whatever --tm this bar has (an opponent's, a slot's) */
  box-shadow: inset 0 3px 0 0 color-mix(in srgb, var(--tm) 70%, #fff), inset 0 -3px 0 0 color-mix(in srgb, var(--tm) 62%, #000);
}
.rm-tb h1, .rm-tb h2, .rm-tb h3 {
  margin: 0; font: 400 27px/1 var(--disp); letter-spacing: .6px; text-transform: uppercase;
  text-shadow: 2px 2px 0 var(--tm-sh); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.rm-tb a:not(.rm-btn) { color: inherit; text-decoration: none; }
.rm-tb .rm-end { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.rm-tb .rm-meta { font: 900 11.5px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
/* a bar that is not the club's: gold for a win or a must, ink for plain */
.rm-tb.gold { background: var(--gold); color: var(--ink); box-shadow: inset 0 3px 0 0 var(--gold-hi), inset 0 -3px 0 0 var(--gold-dk); }
.rm-tb.gold h2, .rm-tb.gold h3, .rm-tb.gold h1 { text-shadow: none; }
.rm-tb.ink { background: var(--ink-2); color: #fff; box-shadow: inset 0 3px 0 0 #2b4166, inset 0 -3px 0 0 #0a1424; }
.rm-tb.ink h1, .rm-tb.ink h2, .rm-tb.ink h3 { text-shadow: 2px 2px 0 var(--ink); }
.rm-tb.red { background: var(--red); color: #fff; box-shadow: inset 0 3px 0 0 #f25a7d, inset 0 -3px 0 0 var(--red-dk); }
.rm-tb.green { background: var(--green); color: #fff; box-shadow: inset 0 3px 0 0 #3fc46f, inset 0 -3px 0 0 var(--green-dk); }

/* a count on a title bar */
.rm-pip {
  display: inline-grid; place-items: center; min-width: 26px; height: 24px; padding: 0 6px; margin: 2px; flex: none;
  background: var(--gold); color: var(--ink); font: 400 20px/1 var(--disp); text-shadow: none;
  box-shadow: var(--frame-2);
}
.rm-pip.red { background: var(--red); color: #fff; }

/* --- the gold cursor -----------------------------------------------------------
   <i class="rm-cur"></i> anywhere, or give a row .rm-pt and it grows one on
   the left while it is pointed at, focused, .sel or .on. */
.rm-cur {
  display: inline-block; flex: none; width: 14px; height: 22px; vertical-align: middle;
  background: var(--cur) center / 100% 100% no-repeat; image-rendering: pixelated;
  animation: rm-bob .7s steps(2, jump-none) infinite;
}
.rm-cur.dn { width: 22px; height: 14px; background-image: var(--cur-dn); animation-name: rm-bobdn; }
@keyframes rm-bob { 0% { transform: translateX(-2px); } 100% { transform: translateX(2px); } }
@keyframes rm-bobdn { 0% { transform: translateY(-2px); } 100% { transform: translateY(2px); } }
.rm-pt { position: relative; padding-left: 30px; }
.rm-pt::before {
  content: ''; position: absolute; left: 8px; top: 50%; width: 14px; height: 22px; margin-top: -11px;
  background: var(--cur) center / 100% 100% no-repeat; image-rendering: pixelated; visibility: hidden;
}
.rm-pt:hover::before, .rm-pt:focus-visible::before, .rm-pt.sel::before, .rm-pt.on::before { visibility: visible; }
.rm-pt.sel::before, .rm-pt.on::before { animation: rm-bob .7s steps(2, jump-none) infinite; }
/* on gold (a gold row, a gold button) the cursor is solid ink */
.rm-cur.ink, .rm-btn.gold .rm-cur { background-image: var(--cur-ink); }
@media (prefers-reduced-motion: reduce) { .rm-cur, .rm-pt::before { animation: none !important; } }

/* --- buttons ---------------------------------------------------------------------
   White by default; .gold is the one thing to press, .tm your club, .ink the
   quiet one, .red a loss or a cut. Sizes: .sm .xs .big, .wide fills the row. */
.rm-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; position: relative;
  padding: 9px 16px 8px; margin: 3px 3px 6px; cursor: pointer; text-decoration: none; border: 0;
  font: 400 22px/1 var(--disp); letter-spacing: .6px; text-transform: uppercase; white-space: nowrap;
  background: #fff; color: var(--ink);
  box-shadow: var(--frame), 0 6px 0 0 var(--ink), inset 0 -4px 0 0 var(--steel);
}
.rm-btn:hover { background: var(--gold); box-shadow: var(--frame), 0 6px 0 0 var(--ink), inset 0 -4px 0 0 var(--gold-dk); }
.rm-btn:active { transform: translateY(3px); box-shadow: var(--frame), 0 3px 0 0 var(--ink), inset 0 -2px 0 0 var(--gold-dk); }
.rm-btn:focus-visible { outline: 3px solid var(--gold); outline-offset: 5px; }
.rm-btn.gold { background: var(--gold); box-shadow: var(--frame), 0 6px 0 0 var(--ink), inset 0 -4px 0 0 var(--gold-dk); }
.rm-btn.gold:hover { background: var(--gold-hi); }
.rm-btn.tm { background: var(--tm); color: var(--on-tm); text-shadow: 2px 2px 0 var(--tm-sh); box-shadow: var(--frame), 0 6px 0 0 var(--ink), inset 0 -4px 0 0 var(--tm-dk); }
.rm-btn.ink { background: var(--ink-2); color: #fff; box-shadow: var(--frame), 0 6px 0 0 var(--ink), inset 0 -4px 0 0 #0a1424; }
.rm-btn.red { background: var(--red); color: #fff; box-shadow: var(--frame), 0 6px 0 0 var(--ink), inset 0 -4px 0 0 var(--red-dk); }
.rm-btn.green { background: var(--green); color: #fff; box-shadow: var(--frame), 0 6px 0 0 var(--ink), inset 0 -4px 0 0 var(--green-dk); }
.rm-btn.tm:hover, .rm-btn.ink:hover, .rm-btn.red:hover, .rm-btn.green:hover {
  background: var(--gold); color: var(--ink); text-shadow: none;
  box-shadow: var(--frame), 0 6px 0 0 var(--ink), inset 0 -4px 0 0 var(--gold-dk);
}
.rm-btn:disabled, .rm-btn.off {
  cursor: default; transform: none; background: #6b7280; color: #fff; text-shadow: none;
  box-shadow: var(--frame), 0 6px 0 0 var(--ink), inset 0 -4px 0 0 #4b5563;
}
.rm-btn.sm { font-size: 18px; padding: 6px 11px 6px; }
.rm-btn.xs { font-size: 16px; padding: 5px 9px 5px; margin: 3px 3px 5px; }
.rm-btn.big { font-size: 28px; padding: 12px 20px 11px; }
.rm-btn.wide { display: flex; width: calc(100% - 6px); }
.rm-btn small { font: 900 10.5px/1 var(--sans); letter-spacing: .1em; }
.rm-btn.two { flex-direction: column; gap: 3px; }   /* a label with a small second line */

/* --- badges (solid only, never a tint) ----------------------------------------- */
.rm-bd {
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; flex: none;
  padding: 4px 7px 3px; margin: 2px; font: 900 10.5px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase;
  background: var(--ink); color: #fff; box-shadow: var(--frame-2);
}
.rm-bd.gold { background: var(--gold); color: var(--ink); }
.rm-bd.red { background: var(--red); }
.rm-bd.green { background: var(--green); }
.rm-bd.orange { background: var(--orange); color: var(--ink); }
.rm-bd.tm { background: var(--tm); color: var(--on-tm); }
.rm-bd.white { background: #fff; color: var(--ink); }
.rm-bd.violet { background: var(--violet); }     /* pending / missed: violet, never grey */
.rm-bd.big { font-size: 12px; padding: 6px 9px 5px; }
.rm-bd svg, .rm-bd img { display: block; }

/* --- inside a window ---------------------------------------------------------------- */
/* a tile: a row, a card, a choice. .hov lights on hover, .sel is chosen */
.rm-tile { position: relative; min-width: 0; margin: 3px; padding: 8px 10px; background: var(--card); color: var(--card-ink); box-shadow: var(--frame); --soft: var(--card-ink); --txt-2: var(--card-ink); --txt-3: var(--card-ink); }
a.rm-tile, button.rm-tile { display: block; text-decoration: none; text-align: left; font: inherit; border: 0; cursor: pointer; }
.rm-tile.hov:hover, a.rm-tile:hover, button.rm-tile:hover, .rm-tile.sel { background: var(--card-hov); color: var(--card-ink); }
.rm-tile.me { background: var(--tm); color: var(--on-tm); --soft: var(--on-tm); --txt-2: var(--on-tm); --txt-3: var(--on-tm); }
.rm-tile.ink { background: var(--ink); color: #fff; --soft: #fff; --txt-2: #fff; --txt-3: #fff; }
.rm-tile.paper { background: #fff; color: var(--ink); }
.rm-list { display: grid; gap: 6px; }

/* a choice: big words, the cursor when pointed at */
.rm-opt {
  position: relative; display: flex; align-items: center; gap: 10px; width: calc(100% - 6px);
  margin: 3px; padding: 10px 12px 9px 30px; cursor: pointer; text-decoration: none; text-align: left; border: 0;
  background: var(--card); color: var(--card-ink); box-shadow: var(--frame);
  font: 400 21px/1 var(--disp); letter-spacing: .5px; text-transform: uppercase;
  --soft: var(--card-ink); --txt-2: var(--card-ink); --txt-3: var(--card-ink);
}
.rm-opt::before {
  content: ''; position: absolute; left: 8px; top: 50%; width: 14px; height: 22px; margin-top: -11px;
  background: var(--cur) center / 100% 100% no-repeat; image-rendering: pixelated; visibility: hidden;
}
.rm-opt:hover, .rm-opt.sel, .rm-opt:focus-visible { background: var(--card-hov); color: var(--card-ink); }
/* on a white or gold choice the cursor is solid ink */
.rm-opt::before, .rm-pt.rm-tile::before { background-image: var(--cur-ink); }
.rm-opt:hover::before, .rm-opt.sel::before, .rm-opt:focus-visible::before { visibility: visible; }
.rm-opt .rm-bd { margin-left: auto; }

/* a label that starts a section inside a window, with a rule to the edge */
.rm-sec {
  display: flex; align-items: center; gap: 8px; margin: 14px 3px 6px;
  font: 400 20px/1 var(--disp); letter-spacing: .6px; text-transform: uppercase; color: var(--gold);
}
.rm-sec::after { content: ''; flex: 1; height: 3px; background: var(--rule); }
.rm-sec:first-child { margin-top: 0; }

/* small caps label + big value, as tiles */
.rm-kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 6px; }
.rm-kv > div { display: grid; gap: 4px; margin: 3px; padding: 8px 10px 9px; background: var(--card); color: var(--card-ink); box-shadow: var(--frame); min-width: 0;
  --soft: var(--card-ink); --txt-2: var(--card-ink); --txt-3: var(--card-ink); }
.rm-kv span { font: 900 10.5px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--card-ink); }
.rm-kv b { font: 400 30px/1 var(--disp); letter-spacing: .4px; color: var(--card-ink); }
.rm-kv i { font: 800 11.5px/1.3 var(--sans); font-style: normal; color: var(--card-ink); }

/* nothing here yet: one plain line, not an apology in a box */
.rm-empty { margin: 3px; padding: 12px; background: var(--card); box-shadow: var(--frame); font: 800 13px/1.4 var(--sans); color: var(--card-ink); }

/* a segmented pixel bar: <span class="rm-bar"><i style="--p:40%"></i></span> */
.rm-bar { display: block; flex: 1; height: 16px; min-width: 60px; padding: 3px; background: var(--ink); box-shadow: 0 0 0 2px #000; }
.rm-bar i {
  display: block; height: 100%;
  background:
    repeating-linear-gradient(90deg, transparent 0 calc(10% - 2px), var(--ink) calc(10% - 2px) 10%),
    linear-gradient(90deg, var(--bc, var(--gold)) 0 var(--p, 0%), var(--rule) var(--p, 0%) 100%);
}
.rm-bar.green i { --bc: #22c55e; } .rm-bar.red i { --bc: var(--red); } .rm-bar.sky i { --bc: var(--sky); }

/* a face: <i class="rm-fc s56"><img …></i> — Faces.img inside, never restyled */
.rm-fc {
  flex: none; display: block; width: 44px; height: 44px; margin: 2px; overflow: hidden;
  background: var(--ft, var(--tm)); box-shadow: var(--frame-2);
}
.rm-fc img, .rm-fc svg { width: 100%; height: 100%; display: block; image-rendering: pixelated; }
.rm-fc.s32 { width: 32px; height: 32px; } .rm-fc.s36 { width: 36px; height: 36px; }
.rm-fc.s56 { width: 56px; height: 56px; } .rm-fc.s64 { width: 64px; height: 64px; }
.rm-fc.s96 { width: 96px; height: 96px; margin: 3px; box-shadow: var(--frame); }
/* a club crest on white */
.rm-crest { flex: none; display: grid; place-items: center; width: 44px; height: 44px; margin: 3px; background: #fff; box-shadow: var(--frame); }
.rm-crest img { width: 32px; height: 32px; object-fit: contain; }   /* pixel logos: 32 or 64, a clean quarter or half */

/* --- tables: gold heads on ink, column lines, zebra rows, yours in the club colour --- */
.rm-tbl-wrap { margin: 3px; box-shadow: var(--frame); overflow-x: auto; }
.rm-tbl { width: 100%; border-collapse: separate; border-spacing: 0; }
.rm-tbl th {
  padding: 7px 8px 6px; background: var(--ink); color: var(--gold); text-align: left; white-space: nowrap;
  font: 900 10.5px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; border-right: 2px solid var(--rule);
}
.rm-tbl td { padding: 8px; background: var(--card); color: var(--card-ink); font: 800 14px/1.2 var(--sans); border-right: 2px solid var(--card-line); border-top: 2px solid var(--card-line);
  --soft: var(--card-ink); --txt-2: var(--card-ink); --txt-3: var(--card-ink); }
.rm-tbl tr > :last-child { border-right: 0; }
.rm-tbl tbody tr:nth-child(even) td { background: var(--card); }
.rm-tbl tr.me td, .rm-tbl tbody tr.me:nth-child(even) td { background: var(--tm); color: var(--on-tm); --soft: var(--on-tm); --txt-2: var(--on-tm); --txt-3: var(--on-tm); }
.rm-tbl tbody tr.hov:hover td { background: var(--card-hov); color: var(--card-ink); cursor: pointer; }
.rm-tbl .n { text-align: center; } .rm-tbl .r { text-align: right; }
.rm-tbl td.big { font: 400 22px/1 var(--disp); letter-spacing: .4px; }
/* the top rating was a white chip with gold words; the rows are white now, so
   it is an ink chip with gold words wherever it sits */
.t-enchanted { background: var(--ink); color: var(--gold); }

/* --- a picture of a room inside a window, with its name on a plate ----------------- */
.rm-shot { position: relative; margin: 3px 3px 12px; line-height: 0; background: var(--ink); box-shadow: var(--frame); overflow: hidden; }
.rm-shot > img, .rm-shot > .rm-pic { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; image-rendering: pixelated;
  background: var(--ink) center / cover no-repeat; }
.rm-shot.wide > img, .rm-shot.wide > .rm-pic { aspect-ratio: 2 / 1; object-position: center 70%; background-position: center 70%; }
.rm-cap {
  position: absolute; left: 0; bottom: 0; display: flex; gap: 8px; align-items: center; line-height: 1;
  padding: 6px 10px 4px; background: var(--ink); color: #fff; border-top: 3px solid var(--gold); border-right: 3px solid var(--gold);
  font: 400 20px/1 var(--disp); letter-spacing: .6px; text-transform: uppercase;
}
.rm-cap b { font: 900 10.5px/1 var(--sans); letter-spacing: .08em; color: var(--gold); }

/* --- the dialogue box: a portrait, a name plate, the line, the choices ---------------- */
.rm-dlg { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); margin: 3px; background: var(--card); color: var(--card-ink); box-shadow: var(--frame); border-top: 3px solid var(--gold);
  --soft: var(--card-ink); --txt-2: var(--card-ink); --txt-3: var(--card-ink); }
.rm-dlg .rm-por { display: grid; justify-items: center; align-content: start; gap: 6px; padding: 12px; background: var(--tm); color: var(--on-tm); border-right: 3px solid var(--ink); }
.rm-dlg .rm-body { min-width: 0; padding: 12px 14px 10px; display: flex; flex-direction: column; }
.rm-plate { display: flex; align-items: baseline; gap: 4px 10px; flex-wrap: wrap; }
.rm-plate .nm { font: 400 28px/.9 var(--disp); letter-spacing: .5px; text-transform: uppercase; color: var(--gold); }
.rm-dlg .rm-plate .nm { color: var(--card-ink); }
.rm-plate .rl { font: 900 11px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; }
.rm-plate .rm-bd { margin-left: auto; align-self: center; }
.rm-say { margin-top: 8px; font: 800 17px/1.4 var(--sans); }
.rm-choices { display: flex; flex-wrap: wrap; gap: 6px 26px; margin-top: auto; padding-top: 10px; }
.rm-ch {
  position: relative; padding: 4px 4px 2px 22px; background: none; border: 0; cursor: pointer; text-decoration: none;
  font: 400 24px/1 var(--disp); letter-spacing: .6px; text-transform: uppercase; color: #fff;
}
.rm-ch::before {
  content: ''; position: absolute; left: 0; top: 50%; width: 14px; height: 22px; margin-top: -12px;
  background: var(--cur) center / 100% 100% no-repeat; image-rendering: pixelated; visibility: hidden;
}
.rm-ch:hover, .rm-ch.sel, .rm-ch:focus-visible { color: var(--gold); }
/* in a white dialogue box the answers are ink, and the one pointed at goes gold */
.rm-dlg .rm-ch { color: var(--card-ink); }
.rm-dlg .rm-ch::before { background-image: var(--cur-ink); }
.rm-dlg .rm-ch:hover, .rm-dlg .rm-ch.sel, .rm-dlg .rm-ch:focus-visible { color: var(--card-ink); background: var(--gold); }
.rm-ch:hover::before, .rm-ch.sel::before, .rm-ch:focus-visible::before { visibility: visible; }
.rm-ch.sel::before { animation: rm-bob .7s steps(2, jump-none) infinite; }

/* --- filters and in-page tabs: a row of chunky tabs, the one you are on in gold ------- */
.rm-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 12px; }
.rm-tabi {
  position: relative; display: inline-flex; align-items: center; gap: 7px; margin: 3px; padding: 7px 12px 5px;
  cursor: pointer; border: 0; text-decoration: none; background: var(--card); color: var(--card-ink); box-shadow: var(--frame);
  font: 400 21px/1 var(--disp); letter-spacing: .5px; text-transform: uppercase; white-space: nowrap;
}
.rm-tabi b { font: 900 11px/1 var(--sans); padding: 3px 5px 2px; background: var(--ink); color: #fff; box-shadow: 0 0 0 2px #000; }
.rm-tabi:hover { background: var(--gold); color: var(--ink); }
.rm-tabi.on { background: var(--gold); color: var(--ink); }
.rm-tabi.on b { background: var(--ink); color: #fff; }

/* the white chips of a sub-menu (the same as the bar under the main menu) */
.rm-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.rm-chip {
  display: inline-flex; align-items: center; gap: 6px; margin: 3px; padding: 6px 12px 5px; cursor: pointer; border: 0;
  text-decoration: none; white-space: nowrap; background: #fff; color: var(--ink); box-shadow: var(--frame);
  font: 900 12.5px/1 var(--sans); letter-spacing: .04em; text-transform: uppercase;
}
.rm-chip:hover, .rm-chip.on { background: var(--gold); }

/* --- forms ------------------------------------------------------------------------------ */
.rm-input {
  width: 100%; max-width: 420px; margin: 3px; padding: 10px 12px; border: 0; border-radius: 0; outline: none;
  background: var(--night); color: #fff; box-shadow: var(--frame), inset 0 0 0 2px #fff;
  font: 900 18px/1.2 var(--sans); caret-color: var(--gold);
}
.rm-input::placeholder { color: #8fa3c4; font-weight: 800; }
.rm-input:focus { box-shadow: var(--frame), inset 0 0 0 2px var(--gold); }
.rm-field { display: grid; gap: 6px; }
.rm-field > span { font: 900 10.5px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--gold); }

/* a small list that drops from a button (Sim ahead, the dropdowns) */
.rm-menu { display: grid; gap: 4px; padding: 6px; background: var(--win); border: 2px solid #fff; box-shadow: var(--frame), var(--drop); }

/* a shade over the whole screen, and the window it holds */
.rm-shade { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 16px; background: rgba(7, 13, 28, .84); }

/* --- the floating page: many windows on the room instead of one board -------------------
   Wrap a screen in <div class="rm-page"> and the board steps aside (game.css). */
.rm-page { display: grid; gap: 22px; min-width: 0; }
.rm-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 22px; align-items: start; }
.rm-stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; min-width: 0; align-content: start; }
.rm-c3 { grid-column: span 3; } .rm-c4 { grid-column: span 4; } .rm-c5 { grid-column: span 5; } .rm-c6 { grid-column: span 6; }
.rm-c7 { grid-column: span 7; } .rm-c8 { grid-column: span 8; } .rm-c9 { grid-column: span 9; } .rm-c12 { grid-column: 1 / -1; }
.rm-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px; align-items: start; }
@media (max-width: 1100px) {
  .rm-grid { grid-template-columns: minmax(0, 1fr); }
  .rm-c3, .rm-c4, .rm-c5, .rm-c6, .rm-c7, .rm-c8, .rm-c9, .rm-c12 { grid-column: 1 / -1; }
  /* a stack opens up so its windows can take the phone order (.rm-o1 …) */
  .rm-grid > .rm-stack { display: contents; }
  .rm-o1 { order: 1; } .rm-o2 { order: 2; } .rm-o3 { order: 3; } .rm-o4 { order: 4; }
  .rm-o5 { order: 5; } .rm-o6 { order: 6; } .rm-o7 { order: 7; } .rm-o8 { order: 8; }
}
@media (max-width: 760px) {
  .rm-page, .rm-grid, .rm-stack, .rm-row { gap: 16px; }
  .rm-stage { height: 84px; }
  .rm-stage.short { height: 48px; }
  .rm-place { font-size: 17px; bottom: 10px; }
  .rm-tb { flex-wrap: wrap; row-gap: 4px; }
  .rm-tb h1, .rm-tb h2, .rm-tb h3 { font-size: 23px; }
  .rm-tb .rm-end { flex-wrap: wrap; justify-content: flex-end; }
  .rm-tb .rm-meta { font-size: 10px; white-space: normal; }
  .rm-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
  .rm-tabs::-webkit-scrollbar { display: none; }
  .rm-tabi { font-size: 18px; padding: 6px 9px 4px; }
  .rm-dlg .rm-por { padding: 10px 8px; }
  .rm-dlg .rm-body { padding: 10px 10px 8px; }
  .rm-plate .nm { font-size: 24px; }
  .rm-plate .rm-bd { margin-left: 0; }
  .rm-say { font-size: 15px; }
  .rm-ch { font-size: 21px; }
}

/* --- the owner's change (2026-09-25): the room inside the first window --------
   No clear strip under the menu and no picture behind the page: the page is
   night navy and the room is a band inside the page's first window, under its
   title bar (room.js ensureHero). Game day's moving tunnel plays in that band. */
.rm-stage { display: none !important; }
#room .rm-art, #room .rm-ceil, #room .rm-dz { display: none !important; }
#room { background: var(--night); }
.rm-hero {
  position: relative; overflow: hidden; height: clamp(120px, 17vw, 230px);
  background: var(--night) no-repeat; image-rendering: pixelated;
  border-bottom: 3px solid var(--ink);
}
.rm-hero canvas.rm-live { position: absolute; left: 0; top: 0; image-rendering: pixelated; }
.rm-hero-pl {
  position: absolute; left: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 10px 4px; background: var(--ink); color: #fff; box-shadow: var(--frame);
  font: 400 18px/1 var(--disp); letter-spacing: .8px; text-transform: uppercase; white-space: nowrap;
}
.rm-hero-pl::before { content: ''; width: 9px; height: 9px; background: var(--gold); box-shadow: 0 0 0 2px #000; }
.rm-hero-pl[hidden] { display: none; }
/* an old page: the board is the window, its .head the title bar */
#board > .rm-hero.on-board { margin: -16px -20px 16px; }
#board > .rm-hero.on-board:first-child { margin-top: -18px; }
@media (max-width: 720px) {
  .rm-hero { height: 112px; }
  .rm-hero-pl { font-size: 15px; left: 8px; bottom: 8px; }
  #board > .rm-hero.on-board { margin: -14px -12px 14px; }
  #board > .rm-hero.on-board:first-child { margin-top: -14px; }
}
#room .rm-live { display: none !important; }   /* until it moves into the page's hero band */

/* --- the owner's change (2026-09-26): the picture is the background again ----
   No band inside the windows (room.js BAND = false). The room is fixed behind
   the page, the windows sit straight under the menu (no clear strip), and
   below the picture the ground is the field — green stripes, not night navy. */
#room { background: repeating-linear-gradient(0deg, #1f7a3a 0 48px, #23863f 48px 96px); }
#room .rm-art, #room .rm-ceil, #room .rm-dz { display: block !important; }
#room .rm-dz.solid { background: repeating-linear-gradient(0deg, #1f7a3a 0 48px, #23863f 48px 96px); }
#room .rm-live { display: block !important; }
.rm-hero { display: none !important; }
/* the picture sits back behind the windows: a little darker, so the slivers
   between the windows read as the room and not as noise */
#room::after { content: ""; position: absolute; inset: 0; z-index: 9; background: rgba(4, 10, 22, .38); pointer-events: none; }