/* ============================================================
   THE TENZINO: the 8-bit casino (2026-10-09). MOCKUP.

   A PAGE OF ITS OWN: no site stylesheet, navbar or footer (the user: "lose
   ALL of juqhub styling... a full page experience, full width"). This file
   is everything the page wears: the NES palette, two free pixel fonts
   (Press Start 2P for the arcade lettering, Pixelify Sans for reading, both
   SIL Open Font License, self-hosted), hard pixel borders, a CRT's
   scanlines over the screen. A casino in eight bits is the same casino in
   every skin, the way a red 7 is red.

   Sizes are multiples of the pixel fonts' own 8 px grid, kept as --tz-*
   values here so every size on the floor is one of them.
   ============================================================ */
@font-face { font-family: "Press Start 2P"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/press-start-2p-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* DIGITS THAT READ AS DIGITS (the user, 2026-10-10: in the small type "the 5 ... comes off as an S"):
   the arcade font's digits, a size smaller, standing in for the reading font's in the pop-ups */
@font-face { font-family: "Tz Digits"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/press-start-2p-latin.woff2") format("woff2"); unicode-range: U+0030-0039; size-adjust: 66%; }
@font-face { font-family: "Pixelify Sans"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("fonts/pixelify-sans-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

.tz, .tz-door {
  /* the NES palette, the casino's only colours */
  --tz-black: #000000; --tz-ink: #0f0f14; --tz-night: #0f0a1c; --tz-purple0: #2a0f3c; --tz-purple1: #58106c; --tz-magenta: #d800cc; --tz-lilac: #f878f8;
  --tz-white: #fcfcfc; --tz-gray0: #3c3c3c; --tz-gray: #7c7c7c; --tz-gray2: #bcbcbc;
  --tz-gold0: #503000; --tz-gold: #f8b800; --tz-gold1: #ac7c00; --tz-gold3: #f8d878; --tz-cream: #fce0a8;
  --tz-red: #d82800; --tz-red3: #f83800; --tz-rose: #f8a4c0; --tz-green: #00a800; --tz-green3: #58d854; --tz-mint: #b8f8b8; --tz-sky: #3cbcfc;
  /* the pixel grid, times --tz-s: a big screen draws the frame bigger (below) */
  --tz-s: 1;
  --tz-u: calc(4px * var(--tz-s)); --tz-f8: calc(8px * var(--tz-s)); --tz-f12: calc(12px * var(--tz-s)); --tz-f16: calc(16px * var(--tz-s));
  --tz-f20: calc(20px * var(--tz-s)); --tz-f24: calc(24px * var(--tz-s)); --tz-f40: calc(40px * var(--tz-s));
  --tz-arcade: "Press Start 2P", ui-monospace, monospace;
  --tz-read: "Pixelify Sans", ui-monospace, monospace;
}

/* ---------- THE PAGE ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { background: #0f0a1c; }
/* NO LIGATURES (2026-10-11): the reading face joins f and i into one glyph that
   reads as an A, so the gift's "first week" came out "Arst week" */
body.tz-body { margin: 0; min-height: 100vh; background: #0f0a1c; color: #fcfcfc; font-variant-ligatures: none; }
.tz {
  min-height: 100vh;
  color: var(--tz-white);
  background: var(--tz-night);
  padding-bottom: calc(var(--tz-u) * 12);
  font-family: var(--tz-read);
  -webkit-font-smoothing: none;
}
.tz-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
[data-own-look] .ap-wrap { display: none; }

/* ---------- THE HEADER: the sign on the roof ---------- */
.tz-top { position: relative; }
.tz-sign { display: grid; justify-items: center; }
.tz-sign-c { display: block; max-width: 100%; image-rendering: pixelated; image-rendering: crisp-edges; }

/* THE KNOBS, above EXIT (the user: "move and redesign the music and sound
   to sit above the exit button"): one box, a row each, an icon that mutes,
   the name, ten bars that rise; built of plain elements, never a browser
   control (tenzino-roulette.js, knob) */
.tz-vols { display: grid; gap: calc(var(--tz-u) * 3); padding: calc(var(--tz-u) * 3); background: var(--tz-black); box-shadow: 0 0 0 calc(var(--tz-u) / 2) var(--tz-gray), 0 0 0 var(--tz-u) var(--tz-black); }
.tz-vol { display: grid; grid-template-columns: calc(28px * var(--tz-s)) minmax(0, 1fr) auto; align-items: center; gap: calc(var(--tz-u) * 2); }
.tz-vol-ic { display: grid; place-items: center; width: calc(28px * var(--tz-s)); height: calc(28px * var(--tz-s)); padding: 0; background: var(--tz-purple0); border: 0; box-shadow: 0 0 0 calc(var(--tz-u) / 2) var(--tz-gray); cursor: pointer; }
.tz-vol-ic canvas { width: auto; height: calc(16px * var(--tz-s)); image-rendering: pixelated; }
.tz-vol-ic:hover { box-shadow: 0 0 0 calc(var(--tz-u) / 2) var(--tz-white); }
.tz-vol-k { font-family: var(--tz-arcade); font-size: var(--tz-f8); color: var(--tz-gray2); }
.tz-vol.is-off .tz-vol-ic canvas { opacity: 0.35; }
.tz-vol.is-off .tz-vol-k { color: var(--tz-gray); }
.tz-vol-bars { display: flex; align-items: flex-end; gap: calc(2px * var(--tz-s)); height: calc(22px * var(--tz-s)); padding: 0 1px; cursor: pointer; touch-action: none; outline: none; }
.tz-vol-bars i { display: block; width: calc(5px * var(--tz-s)); background: var(--tz-gray0); }
.tz-vol-bars i:nth-child(1) { height: calc(4px * var(--tz-s)); } .tz-vol-bars i:nth-child(2) { height: calc(6px * var(--tz-s)); } .tz-vol-bars i:nth-child(3) { height: calc(8px * var(--tz-s)); }
.tz-vol-bars i:nth-child(4) { height: calc(10px * var(--tz-s)); } .tz-vol-bars i:nth-child(5) { height: calc(12px * var(--tz-s)); } .tz-vol-bars i:nth-child(6) { height: calc(14px * var(--tz-s)); }
.tz-vol-bars i:nth-child(7) { height: calc(16px * var(--tz-s)); } .tz-vol-bars i:nth-child(8) { height: calc(18px * var(--tz-s)); } .tz-vol-bars i:nth-child(9) { height: calc(20px * var(--tz-s)); }
.tz-vol-bars i:nth-child(10) { height: calc(22px * var(--tz-s)); }
.tz-vol-bars i.on { background: var(--tz-gold); box-shadow: inset 0 calc(2px * var(--tz-s)) 0 var(--tz-gold3); }
.tz-vol-bars:focus-visible { outline: calc(var(--tz-u) / 2) solid var(--tz-gold); outline-offset: var(--tz-u); }

/* ---------- THE FLOOR ----------
   A roomy window (1280 by 600 and up): THE GAME IN THE MIDDLE OF THE PAGE
   (the user: "whatever game is live should always be centered in the whole
   page"): the dealer, the counts and your JuqBuqs over the table and your
   chips, the table as big as the window allows (tenzino-roulette.js, fit).
   The chat a set width just to its right ("a nice width"); the games on the
   far left with EXIT at their foot. The two sides are equal columns, so the
   game sits dead centre whenever there is room for both; a window too
   narrow for that lets it sit a little left. Nothing scrolls. Narrower: the
   games and EXIT in a strip, then one column. */
.tz-floor { display: flex; flex-direction: column; gap: calc(var(--tz-u) * 5); padding: calc(var(--tz-u) * 5) clamp(12px, 2vw, 24px) 0; }
.tz-pair { display: contents; }
.tz-play { display: flex; flex-direction: column; gap: calc(var(--tz-u) * 5); min-width: 0; }
.tz-stage { display: flex; flex-direction: column; align-items: center; gap: calc(var(--tz-u) * 4); min-width: 0; }
.tz-stage .tz-controls { align-self: stretch; }

/* THE GAMES, and the way out under them */
.tz-games { display: flex; align-items: center; flex-wrap: wrap; gap: calc(var(--tz-u) * 4); }
.tz-games-h { margin: 0; font-family: var(--tz-arcade); font-size: var(--tz-f8); font-weight: 400; color: var(--tz-gold); }
.tz-games-list { display: flex; gap: calc(var(--tz-u) * 3); margin: 0; padding: 0; list-style: none; }
/* the games by name alone, big (the user, 2026-10-10: "remove the food alarm, eric deals tags, just make the names of the games larger") */
.tz-game { display: flex; align-items: center; gap: calc(var(--tz-u) * 3); padding: calc(var(--tz-u) * 3); font-family: var(--tz-arcade); font-size: var(--tz-f12); line-height: 1.3; color: var(--tz-white); text-decoration: none; background: var(--tz-black); box-shadow: 0 0 0 calc(var(--tz-u) / 2) var(--tz-gray); }
.tz-game small { display: block; margin-top: var(--tz-u); font-size: var(--tz-f8); color: var(--tz-gray); }
.tz-game canvas { flex: none; width: calc(28px * var(--tz-s)); height: calc(28px * var(--tz-s)); image-rendering: pixelated; }
.tz-game.is-on { background: var(--tz-purple0); box-shadow: 0 0 0 calc(var(--tz-u) / 2) var(--tz-gold), 0 0 0 var(--tz-u) var(--tz-black); }
.tz-game.is-on small { color: var(--tz-gold3); }
.tz-game.is-soon { color: var(--tz-gray); box-shadow: 0 0 0 calc(var(--tz-u) / 2) var(--tz-gray0); }
.tz-game.is-soon canvas { opacity: 0.4; }
a.tz-game:focus-visible { outline: calc(var(--tz-u) / 2) solid var(--tz-gold); outline-offset: var(--tz-u); }

/* EXIT: a red exit sign (the user: "red just like an exit sign"), at the foot of the games */
.tz-exit { display: inline-flex; align-items: center; gap: calc(var(--tz-u) * 3); margin-left: auto; padding: calc(var(--tz-u) * 2) calc(var(--tz-u) * 4); color: var(--tz-white); background: var(--tz-red); text-decoration: none; font-family: var(--tz-arcade); font-size: var(--tz-f16); line-height: 1; letter-spacing: calc(var(--tz-u) / 2); box-shadow: 0 0 0 calc(var(--tz-u) / 2) var(--tz-black), 0 0 0 var(--tz-u) var(--tz-red3), 0 0 calc(var(--tz-u) * 5) rgba(248, 56, 0, 0.45); text-shadow: 2px 2px 0 var(--tz-black); }
.tz-exit small { display: block; margin-top: calc(var(--tz-u) * 1.5); font-size: var(--tz-f8); letter-spacing: 0; color: var(--tz-rose); }
.tz-exit canvas { width: calc(21px * var(--tz-s)); height: calc(21px * var(--tz-s)); image-rendering: pixelated; }
.tz-exit:hover { box-shadow: 0 0 0 calc(var(--tz-u) / 2) var(--tz-black), 0 0 0 var(--tz-u) var(--tz-rose), 0 0 calc(var(--tz-u) * 7) rgba(248, 56, 0, 0.7); }
.tz-exit:focus-visible { outline: calc(var(--tz-u) / 2) solid var(--tz-gold); outline-offset: calc(var(--tz-u) * 1.5); }

/* THE BAR over the table: the dealer on the left, the counts in the middle, your JuqBuqs on the right */
.tz-bar { display: flex; flex-wrap: wrap; align-items: stretch; gap: calc(var(--tz-u) * 4); padding: 0 calc(var(--tz-u) * 2); }
.tz-bar .tz-dealer { flex: 1 1 calc(300px * var(--tz-s)); min-width: calc(280px * var(--tz-s)); }
.tz-stat { flex: 0 0 auto; display: grid; align-content: center; gap: calc(var(--tz-u) * 2); min-width: 0; padding: calc(var(--tz-u) * 3); background: var(--tz-black); box-shadow: 0 0 0 var(--tz-u) var(--tz-white), 0 0 0 calc(var(--tz-u) * 2) var(--tz-black); }
.tz-stat-k { font-family: var(--tz-arcade); font-size: var(--tz-f8); color: var(--tz-gray2); }
.tz-stat-v { display: flex; align-items: center; gap: calc(var(--tz-u) * 3); min-height: calc(28px * var(--tz-s)); font-family: var(--tz-arcade); font-size: var(--tz-f20); font-weight: 400; color: var(--tz-gold); }
.tz-stat-v b { font-weight: 400; }
.tz-rail .tz-stat-v b { color: var(--tz-gold3); }
.tz-faces { display: flex; }
.tz-faces canvas { width: calc(28px * var(--tz-s)); height: calc(28px * var(--tz-s)); image-rendering: pixelated; box-shadow: 0 0 0 calc(2px * var(--tz-s)) var(--tz-black), 0 0 0 calc(4px * var(--tz-s)) var(--tz-gold1); }
.tz-faces canvas + canvas { margin-left: calc(-4px * var(--tz-s)); }
.tz-faces:empty { display: none; }

/* ---------- THE SCREEN ---------- */
.tz-cab { position: relative; justify-self: center; max-width: 100%; padding: calc(var(--tz-u) * 2); background: var(--tz-black); box-shadow: 0 0 0 var(--tz-u) var(--tz-gray), 0 0 0 calc(var(--tz-u) * 2) var(--tz-black); }
.tz-screen { display: block; width: 100%; height: auto; aspect-ratio: 384 / 240; image-rendering: pixelated; image-rendering: crisp-edges; outline: none; touch-action: manipulation; }
.tz-screen:focus-visible { box-shadow: 0 0 0 var(--tz-u) var(--tz-gold); }
/* the CRT: a scanline on every screen pixel's lower half */
.tz-cab::after { content: ""; position: absolute; inset: calc(var(--tz-u) * 2); pointer-events: none; background: repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--tz-k, 2px) / 2), rgba(0, 0, 0, 0.16) calc(var(--tz-k, 2px) / 2), rgba(0, 0, 0, 0.16) var(--tz-k, 2px)); }

/* ---------- THE DEALER'S BOX (an RPG text box) ---------- */
.tz-box { position: relative; padding: calc(var(--tz-u) * 4); background: var(--tz-black); box-shadow: 0 0 0 var(--tz-u) var(--tz-white), 0 0 0 calc(var(--tz-u) * 2) var(--tz-black); }
.tz-dealer { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: calc(var(--tz-u) * 4); align-items: center; }
.tz-dealer canvas { width: calc(80px * var(--tz-s)); height: calc(80px * var(--tz-s)); image-rendering: pixelated; background: var(--tz-purple0); box-shadow: 0 0 0 calc(var(--tz-u) / 2) var(--tz-gold1); }
.tz-dealer-name { display: block; margin-bottom: calc(var(--tz-u) * 2); font-family: var(--tz-arcade); font-size: var(--tz-f8); color: var(--tz-gold); }
/* HIS BOX NEVER CHANGES SIZE (the user, 2026-10-10: "if the lines get too
   long it pushes things around"): three lines of his type tall, whatever he
   says; a message that would take more gets smaller type (fitSay in
   tenzino-roulette.js), never a taller box. --tz-say-f is his type's size */
.tz-say { --tz-say-f: var(--tz-f12); margin: 0; height: calc(var(--tz-say-f) * 4.8); overflow: hidden; font-family: var(--tz-arcade); font-size: var(--tz-say-f); line-height: 1.6; color: var(--tz-white); }
.tz-say::after { content: "\25bc"; display: inline-block; margin-left: var(--tz-u); color: var(--tz-gold); animation: tz-blink 0.8s steps(1) infinite; }
@keyframes tz-blink { 50% { opacity: 0; } }
/* his words grow with his box (the user, 2026-10-10: "a lot of black space
   in the dealer text section, make the font bigger"), IN THE STACKED LAYOUT
   ONLY: a box across the page reads at 16px, a very wide one at 20px with a
   bigger Tenzin. There the table's size never depends on the bar. Side by
   side it does (the table is sized from the room under the bar), and type
   chosen by the box's width made a loop: bigger type, a taller bar, a
   smaller table, a narrower box, smaller type, a shorter bar, a bigger
   table... every frame, the game and the chat jumping (the user, 2026-10-10,
   "duplicating/glitching", at full width only). Side by side, the type is
   set by the window's size instead (the big-screen steps, below). */
@media not all and (min-width: 1280px) and (min-height: 600px) {
  .tz-dealer { container-type: inline-size; }
  @container (min-width: 520px) {
    .tz-say { --tz-say-f: var(--tz-f16); }
    .tz-dealer-name { font-size: var(--tz-f12); }
  }
  @container (min-width: 900px) {
    .tz-say { --tz-say-f: var(--tz-f20); }
    .tz-dealer canvas { width: calc(96px * var(--tz-s)); height: calc(96px * var(--tz-s)); }
  }
}

/* ---------- YOUR CHIPS AND BUTTONS ---------- */
.tz-controls { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--tz-u) * 4); flex-wrap: wrap; }
.tz-controls .tz-btn { padding: calc(var(--tz-u) * 2) calc(var(--tz-u) * 2.5); }
/* HOW IT PAYS: the same button, a gold edge, the table's own information */
.tz-btn.tz-pays-go { color: var(--tz-gold3); background: var(--tz-black); box-shadow: 0 0 0 calc(var(--tz-u) / 2) var(--tz-gold), var(--tz-u) var(--tz-u) 0 calc(var(--tz-u) / 2) var(--tz-black); }
.tz-btn.tz-pays-go:hover { color: var(--tz-black); background: var(--tz-gold); }
/* the real table, signed out: SIGN IN TO PLAY in the purse */
.tz-btn.tz-signin { margin-top: var(--tz-u); color: var(--tz-black); background: var(--tz-gold); }
.tz-btn.tz-signin:hover { background: var(--tz-gold3); }
.tz-btn[hidden] { display: none; }
.tz-chips { display: flex; gap: calc(var(--tz-u) * 2); }
.tz-chip { display: grid; justify-items: center; gap: var(--tz-u); min-width: calc(46px * var(--tz-s)); padding: calc(var(--tz-u) * 2); font-family: var(--tz-arcade); font-size: var(--tz-f8); color: var(--tz-white); background: var(--tz-black); border: 0; box-shadow: 0 0 0 calc(var(--tz-u) / 2) var(--tz-gray); cursor: pointer; }
.tz-chip canvas { width: calc(24px * var(--tz-s)); height: calc(24px * var(--tz-s)); image-rendering: pixelated; }
.tz-chip:hover { box-shadow: 0 0 0 calc(var(--tz-u) / 2) var(--tz-white); }
.tz-chip.on { color: var(--tz-black); background: var(--tz-gold); box-shadow: 0 0 0 calc(var(--tz-u) / 2) var(--tz-white); }
/* a chip bigger than what you have left: dimmed, and it puts down the rest */
.tz-chip.is-over:not(.on) { opacity: 0.45; }
/* BLACKJACK: a chip bets itself, so outside the betting it is dimmed and does nothing */
.tz-chip[hidden] { display: none; }
.tz-chip:disabled { opacity: 0.45; cursor: default; box-shadow: 0 0 0 calc(var(--tz-u) / 2) var(--tz-gray0); }
/* ALL IN: red, like the chip itself */
.tz-chip-all { color: var(--tz-rose); box-shadow: 0 0 0 calc(var(--tz-u) / 2) var(--tz-red); }
.tz-chip-all:hover { box-shadow: 0 0 0 calc(var(--tz-u) / 2) var(--tz-rose); }
.tz-chip-all.on { color: var(--tz-white); background: var(--tz-red); box-shadow: 0 0 0 calc(var(--tz-u) / 2) var(--tz-white); text-shadow: 1px 1px 0 var(--tz-black); }
.tz-mine { font-family: var(--tz-arcade); font-size: var(--tz-f8); color: var(--tz-gold3); }
/* what you have on this spin, under your JuqBuqs */
.tz-purse .tz-mine { color: var(--tz-gray2); }
.tz-purse .tz-mine.is-all { color: var(--tz-white); background: var(--tz-red); padding: calc(2px * var(--tz-s)) var(--tz-u); box-shadow: 0 0 0 calc(var(--tz-u) / 2) var(--tz-black); }
.tz-btns { display: flex; gap: calc(var(--tz-u) * 2); }
/* BLACKJACK (2026-10-10): HIT, STAND, DOUBLE and SPLIT take the chips' place
   while you play (you cannot bet then), in the same grid cell, so the row
   never changes size and the table above it never jumps */
.tz-btn-set { display: flex; gap: calc(var(--tz-u) * 2); }
/* MOMO MANIA (2026-10-10): SPIN, big and gold, beside HOW IT PAYS */
.tz-btn.tz-spin { padding: calc(var(--tz-u) * 3) calc(var(--tz-u) * 8); font-size: var(--tz-f16); color: var(--tz-black); background: var(--tz-gold); }
.tz-btn.tz-spin:hover:not(:disabled) { background: var(--tz-gold3); }
/* POKER's TRIPS (2026-10-11): a switch, lit while it is on */
.tz-btn.tz-trips[aria-pressed="true"] { color: var(--tz-black); background: var(--tz-gold); }
/* an emote in a dealer's line (Divvity's b, 2026-10-11): a little over two letters tall, on the line */
.tz-say-emote { display: inline-block; height: 2.2em; width: auto; margin: -0.5em 0.1em; vertical-align: middle; }
.tz-say-emote[hidden] { display: none; }
.tz-slot-pays .tz-pays-0 { margin: 0 0 calc(var(--tz-u) * 4); }
.tz-btn-set[hidden] { display: none; }
.tz-swap { display: grid; }
.tz-swap > * { grid-area: 1 / 1; }
.tz-swap > .tz-chips.is-away { visibility: hidden; }
.tz-swap > .tz-moves { align-items: stretch; }
.tz-swap > .tz-moves[hidden] { display: flex; visibility: hidden; }
.tz-controls .tz-moves .tz-btn.tz-move { flex: 1 1 0; padding: 0 calc(var(--tz-u) * 2); font-size: var(--tz-f12); }
.tz-btn.tz-move { color: var(--tz-black); background: var(--tz-gold); box-shadow: 0 0 0 calc(var(--tz-u) / 2) var(--tz-white), var(--tz-u) var(--tz-u) 0 calc(var(--tz-u) / 2) var(--tz-black); }
.tz-btn.tz-move:hover:not(:disabled) { background: var(--tz-gold3); }
.tz-btn.tz-move:disabled { color: var(--tz-gray); background: var(--tz-black); box-shadow: 0 0 0 calc(var(--tz-u) / 2) var(--tz-gray0); cursor: default; }
.tz-btn { display: inline-block; padding: calc(var(--tz-u) * 2) calc(var(--tz-u) * 3); font-family: var(--tz-arcade); font-size: var(--tz-f8); line-height: 1.2; color: var(--tz-white); background: var(--tz-purple1); border: 0; text-decoration: none; box-shadow: 0 0 0 calc(var(--tz-u) / 2) var(--tz-white), var(--tz-u) var(--tz-u) 0 calc(var(--tz-u) / 2) var(--tz-black); cursor: pointer; }
.tz-btn:hover { background: var(--tz-magenta); }
.tz-btn:active { transform: translate(var(--tz-u), var(--tz-u)); box-shadow: 0 0 0 calc(var(--tz-u) / 2) var(--tz-white); }
.tz-btn:disabled { color: var(--tz-gray); background: var(--tz-black); box-shadow: 0 0 0 calc(var(--tz-u) / 2) var(--tz-gray); cursor: default; transform: none; }
.tz-btn:focus-visible, .tz-chip:focus-visible, .tz-vol-ic:focus-visible { outline: calc(var(--tz-u) / 2) solid var(--tz-gold); outline-offset: var(--tz-u); }

/* ---------- THE PAY TABLE: each bet's name on the line with its pay ---------- */
.tz-pays-h { margin: 0 0 calc(var(--tz-u) * 3); font-family: var(--tz-arcade); font-size: var(--tz-f8); color: var(--tz-gold); }
.tz-pays { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: calc(var(--tz-u) * 3) calc(var(--tz-u) * 8); margin: 0; }
.tz-pays > div { display: flex; justify-content: space-between; align-items: flex-start; gap: calc(var(--tz-u) * 3); }
.tz-pays dt { color: var(--tz-gray2); }
.tz-pay-n { display: flex; flex-wrap: wrap; align-items: center; gap: var(--tz-u) calc(var(--tz-u) * 3); min-height: 24px; font-size: var(--tz-f16); color: var(--tz-white); }
.tz-pay-n i { display: inline-flex; align-items: center; gap: calc(var(--tz-u) * 1.5); font-style: normal; }
.tz-pay-n canvas { width: 24px; height: 24px; image-rendering: pixelated; }
.tz-pays dt small { display: block; margin-top: var(--tz-u); font-size: var(--tz-f12); color: var(--tz-gray); }
.tz-pays dd { margin: 0; font-family: var(--tz-arcade); font-size: var(--tz-f8); line-height: 24px; color: var(--tz-white); white-space: nowrap; }
.tz-pays .hot dd { color: var(--tz-red3); }
/* A PAY TABLE AS A LIST (poker, 2026-10-11, the user: "a list format for
   them would work better"): one hand a line, what it pays on the right */
.tz-pays > .tz-pays-table dt { flex: 1 1 auto; }
.tz-pay-list { display: grid; gap: var(--tz-u); margin: calc(var(--tz-u) * 2) 0 0; padding: 0; list-style: none; font-size: var(--tz-f12); color: var(--tz-gray2); }
.tz-pay-list li { display: flex; justify-content: space-between; align-items: baseline; gap: calc(var(--tz-u) * 4); }
.tz-pay-list b { font-family: var(--tz-arcade); font-size: var(--tz-f8); font-weight: 400; color: var(--tz-white); white-space: nowrap; }
.tz-pays .hot .tz-pay-list b { color: var(--tz-red3); }
.tz-pays-0 { margin: calc(var(--tz-u) * 4) 0 0; font-size: var(--tz-f12); color: var(--tz-gray2); }
.tz-pop { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: calc(var(--tz-u) * 4); background: rgba(15, 10, 28, 0.82); }
.tz-pop[hidden] { display: none; }
.tz-pop-box { width: min(780px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; }
.tz-pop-h { display: flex; justify-content: space-between; align-items: center; gap: calc(var(--tz-u) * 4); margin-bottom: calc(var(--tz-u) * 4); }
.tz-pop-h .tz-pays-h { margin: 0; }
/* LEAVE THE TENZINO? (the user: "a confirm exit in case someone clicks it by accident in the middle of a bet") */
.tz-leave-box { display: grid; justify-items: center; gap: calc(var(--tz-u) * 4); width: min(440px, 100%); padding: calc(var(--tz-u) * 6); text-align: center; }
.tz-leave-h { margin: 0; font-family: var(--tz-arcade); font-size: var(--tz-f16); font-weight: 400; line-height: 1.4; color: var(--tz-white); }
.tz-leave-p { margin: 0; font-size: var(--tz-f16); color: var(--tz-gray2); }
.tz-leave-p b { color: var(--tz-gold); }
.tz-leave-go { display: flex; gap: calc(var(--tz-u) * 4); }
.tz-leave-go .tz-btn { padding: calc(var(--tz-u) * 3) calc(var(--tz-u) * 5); font-size: var(--tz-f12); }
.tz-leave-yes { background: var(--tz-red); }
.tz-leave-yes:hover { background: var(--tz-red3); }
/* THE GRAND OPENING GIFT (2026-10-11): over the game, never over Tenzin's
   stream (a Twitch player with anything on it does not start by itself), so
   no backdrop, and under the billboard should the two ever meet */
.tz-gift { position: fixed; z-index: 2; display: grid; justify-items: center; gap: calc(var(--tz-u) * 4); width: min(440px, calc(100vw - 32px)); padding: calc(var(--tz-u) * 6); text-align: center; transform: translateX(-50%); box-shadow: 0 0 0 calc(var(--tz-u) * 1) var(--tz-gold), 0 calc(var(--tz-u) * 4) calc(var(--tz-u) * 12) rgba(0, 0, 0, 0.6); animation: tz-gift-in 0.3s ease-out; }
.tz-gift[hidden] { display: none; }
.tz-gift-amt { margin: 0; font-family: var(--tz-arcade); font-size: var(--tz-f40); line-height: 1.1; color: var(--tz-gold); text-shadow: calc(var(--tz-u) * 1) calc(var(--tz-u) * 1) 0 var(--tz-gold1); }
.tz-gift .tz-btn { padding: calc(var(--tz-u) * 3) calc(var(--tz-u) * 5); font-size: var(--tz-f12); }
@keyframes tz-gift-in { from { opacity: 0; transform: translateX(-50%) scale(0.9); } }
@media (prefers-reduced-motion: reduce) { .tz-gift { animation: none; } }

/* ---------- THE CHAT: read here, typed here with a permission the visitor chooses (tenzino-chat.js) ---------- */
.tz-chat { display: flex; flex-direction: column; min-height: 0; padding: 0; }
.tz-chat-h { display: flex; justify-content: space-between; align-items: center; padding: calc(var(--tz-u) * 3) calc(var(--tz-u) * 4); font-family: var(--tz-arcade); font-size: var(--tz-f8); color: var(--tz-gold); border-bottom: calc(var(--tz-u) / 2) solid var(--tz-gray); }
.tz-chat-state { color: var(--tz-gray); }
.tz-chat-state[data-state="ws-on"] { color: var(--tz-green3); }
.tz-chat-state[data-state="ws-on"]::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 6px; background: var(--tz-green3); animation: tz-blink 1.2s steps(1) infinite; }
.tz-chat-log { height: 420px; overflow-y: auto; margin: 0; padding: calc(var(--tz-u) * 2) calc(var(--tz-u) * 3); list-style: none; font-size: var(--tz-f16); line-height: 1.35; scrollbar-width: thin; scrollbar-color: var(--tz-gray) var(--tz-black); }
.tz-msg { display: grid; grid-template-columns: calc(20px * var(--tz-s)) minmax(0, 1fr); gap: calc(var(--tz-u) * 2); padding: calc(3px * var(--tz-s)) 0; overflow-wrap: anywhere; }
.tz-msg b { font-weight: 700; }
.tz-msg-body { color: var(--tz-white); }
.tz-msg.is-me .tz-msg-body { font-style: italic; }
.tz-chat-face { display: grid; place-items: center; width: calc(20px * var(--tz-s)); height: calc(20px * var(--tz-s)); margin-top: 1px; overflow: hidden; font-family: var(--tz-arcade); font-size: var(--tz-f8); color: var(--tz-white); background: var(--tz-gray0); box-shadow: 0 0 0 1px var(--tz-black); }
.tz-chat-face img { display: block; width: calc(20px * var(--tz-s)); height: calc(20px * var(--tz-s)); image-rendering: pixelated; }
.tz-chat .ch-emote { height: calc(22px * var(--tz-s)); vertical-align: calc(-6px * var(--tz-s)); }
.tz-chat-empty { padding: calc(var(--tz-u) * 4) 0; color: var(--tz-gray); }
.tz-chat-say { display: grid; gap: calc(var(--tz-u) * 2); padding: calc(var(--tz-u) * 3) calc(var(--tz-u) * 4) calc(var(--tz-u) * 4); border-top: calc(var(--tz-u) / 2) solid var(--tz-gray0); }
.tz-chat-note { margin: 0; font-size: var(--tz-f12); color: var(--tz-gray2); }
.tz-chat-go { text-align: center; }
.tz-chat-as { display: flex; justify-content: space-between; align-items: center; gap: calc(var(--tz-u) * 2); font-family: var(--tz-arcade); font-size: var(--tz-f8); color: var(--tz-gray2); }
.tz-chat-as > span { display: inline-flex; align-items: center; gap: calc(var(--tz-u) * 1.5); min-width: 0; }
.tz-chat-as b { font-weight: 400; color: var(--tz-gold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tz-chat-off { padding: 0; border: 0; background: none; font: inherit; color: var(--tz-gray); text-decoration: underline; cursor: pointer; }
.tz-chat-off:hover { color: var(--tz-white); }
.tz-chat-off:focus-visible { outline: calc(var(--tz-u) / 2) solid var(--tz-gold); outline-offset: var(--tz-u); }
.tz-chat-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: calc(var(--tz-u) * 2); }
.tz-chat-in { min-width: 0; padding: calc(var(--tz-u) * 2) calc(var(--tz-u) * 2.5); font-family: var(--tz-read); font-size: var(--tz-f16); color: var(--tz-white); background: var(--tz-ink); border: 0; border-radius: 0; box-shadow: inset 0 0 0 2px var(--tz-gray); outline: none; }
.tz-chat-in:focus-visible { box-shadow: inset 0 0 0 2px var(--tz-gold); }
.tz-chat-in::placeholder { color: var(--tz-gray); }
.tz-chat-err { margin: 0; font-size: var(--tz-f12); color: var(--tz-red3); }
.tz-chat-err:empty { display: none; }
.tz-msg-re { display: block; margin-bottom: 1px; font-size: var(--tz-f12); color: var(--tz-gray); }
.tz-msg.is-hl { margin: calc(2px * var(--tz-s)) 0; padding: calc(4px * var(--tz-s)) calc(6px * var(--tz-s)); background: var(--tz-purple0); box-shadow: inset calc(3px * var(--tz-s)) 0 0 var(--tz-magenta); }
.tz-msg.is-bits { padding: var(--tz-u) calc(var(--tz-u) * 1.5); background: rgba(88, 16, 108, 0.45); }
.tz-chat .ch-bdg { display: inline-block; margin-right: calc(4px * var(--tz-s)); padding: calc(2px * var(--tz-s)) calc(3px * var(--tz-s)); font-family: var(--tz-arcade); font-size: var(--tz-f8); line-height: 1; vertical-align: calc(2px * var(--tz-s)); color: var(--tz-black); background: var(--tz-gray2); }
.tz-chat .ch-b-brd { color: var(--tz-white); background: var(--tz-red3); }
.tz-chat .ch-b-mod { background: var(--tz-green3); }
.tz-chat .ch-b-vip { color: var(--tz-white); background: var(--tz-magenta); }
.tz-chat .ch-b-sub { background: var(--tz-gold); }
.tz-bits { display: inline-block; margin-right: var(--tz-u); padding: calc(var(--tz-u) / 2) var(--tz-u); font-family: var(--tz-arcade); font-size: var(--tz-f8); line-height: 1; vertical-align: 2px; color: var(--tz-white); background: var(--tz-purple1); box-shadow: inset 0 0 0 1px var(--tz-magenta); }
.tz-chat-sure-h { margin: 0; font-family: var(--tz-arcade); font-size: var(--tz-f8); color: var(--tz-gold); }
.tz-chat-sure { display: grid; gap: var(--tz-u); margin: 0; padding-left: calc(var(--tz-u) * 4); font-size: var(--tz-f12); line-height: 1.35; color: var(--tz-gray2); }
.tz-chat-sure-go { display: flex; align-items: center; gap: calc(var(--tz-u) * 4); flex-wrap: wrap; }
/* links in what people say */
.tz-link { color: var(--tz-sky); text-decoration: underline; overflow-wrap: anywhere; }
.tz-link:hover { color: var(--tz-white); }
/* THE EMOTE MENU over the message box: search, a tab a provider, the sets */
.tz-chat-form { grid-template-columns: minmax(0, 1fr) auto auto; }
.tz-emo-go { display: grid; place-items: center; width: calc(36px * var(--tz-s)); padding: 0; background: var(--tz-purple0); border: 0; box-shadow: 0 0 0 calc(var(--tz-u) / 2) var(--tz-gray); cursor: pointer; }
.tz-emo-go canvas { width: calc(20px * var(--tz-s)); height: calc(20px * var(--tz-s)); image-rendering: pixelated; }
.tz-emo-go:hover, .tz-emo-go[aria-expanded="true"] { box-shadow: 0 0 0 calc(var(--tz-u) / 2) var(--tz-gold); }
.tz-emo-go:focus-visible { outline: calc(var(--tz-u) / 2) solid var(--tz-gold); outline-offset: var(--tz-u); }
.tz-emo { display: grid; gap: calc(var(--tz-u) * 2); padding: calc(var(--tz-u) * 2); background: var(--tz-ink); box-shadow: inset 0 0 0 calc(var(--tz-u) / 2) var(--tz-gray0); }
.tz-emo-q { width: 100%; }
.tz-emo-tabs { display: flex; gap: var(--tz-u); }
.tz-emo-tab { flex: 1 1 0; padding: calc(var(--tz-u) * 1.5) var(--tz-u); font-family: var(--tz-arcade); font-size: var(--tz-f8); color: var(--tz-gray2); background: var(--tz-black); border: 0; box-shadow: 0 0 0 1px var(--tz-gray0); cursor: pointer; }
.tz-emo-tab:hover { color: var(--tz-white); }
.tz-emo-tab.is-on { color: var(--tz-black); background: var(--tz-gold); }
.tz-emo-tab:focus-visible { outline: calc(var(--tz-u) / 2) solid var(--tz-gold); outline-offset: 1px; }
.tz-emo-grid { height: calc(220px * var(--tz-s)); overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--tz-gray) var(--tz-black); }
.tz-emo-h { margin: calc(var(--tz-u) * 1.5) 0 var(--tz-u); font-family: var(--tz-arcade); font-size: var(--tz-f8); color: var(--tz-gold); }
.tz-emo-set { display: grid; grid-template-columns: repeat(auto-fill, calc(36px * var(--tz-s))); gap: var(--tz-u); }
.tz-emo-e { display: grid; place-items: center; width: calc(36px * var(--tz-s)); height: calc(36px * var(--tz-s)); padding: calc(var(--tz-u) / 2); background: transparent; border: 0; cursor: pointer; }
.tz-emo-e img { display: block; max-width: calc(32px * var(--tz-s)); max-height: calc(32px * var(--tz-s)); }
.tz-emo-e:hover, .tz-emo-e:focus-visible { background: var(--tz-purple0); outline: none; box-shadow: 0 0 0 1px var(--tz-gold); }
.tz-emo-name { margin: 0; min-height: 1.3em; font-size: var(--tz-f12); color: var(--tz-gray2); }
.tz-emo-none { margin: calc(var(--tz-u) * 2) 0; font-size: var(--tz-f12); color: var(--tz-gray); }
/* AUTOCOMPLETE over the box: :smh and its emotes, the chosen one in gold */
.tz-ac { display: grid; margin: 0; padding: var(--tz-u); list-style: none; background: var(--tz-ink); box-shadow: inset 0 0 0 calc(var(--tz-u) / 2) var(--tz-gray0); }
.tz-ac-i { display: flex; align-items: center; gap: calc(var(--tz-u) * 2); padding: var(--tz-u) calc(var(--tz-u) * 1.5); font-size: var(--tz-f16); color: var(--tz-white); cursor: pointer; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.tz-ac-i img { flex: none; width: auto; max-width: calc(48px * var(--tz-s)); height: calc(24px * var(--tz-s)); object-fit: contain; }
.tz-ac-i:hover { background: var(--tz-purple0); }
.tz-ac-i.is-on { color: var(--tz-black); background: var(--tz-gold); }

/* ---------- THE ENTRANCE (tenzino-entrance.js) ----------
   A night-coloured cover from the head script until the entrance is up,
   so the floor is never seen before the street. */
html.tz-cover body::after { content: ""; position: fixed; inset: 0; z-index: 2147482000; background: #0f0f14; }
html.tz-door-up { overflow: hidden; }
.tz-door { position: fixed; inset: 0; z-index: 2147483000; overflow: hidden; background: #0f0f14; cursor: pointer; }
.tz-door.is-open { background: transparent; }
.tz-door-c { position: absolute; image-rendering: pixelated; image-rendering: crisp-edges; }
.tz-door-go { position: absolute; left: 50%; bottom: max(calc(var(--tz-u) * 6), 7vh); transform: translateX(-50%); padding: calc(var(--tz-u) * 3) calc(var(--tz-u) * 6); font-family: var(--tz-arcade); font-size: var(--tz-f24); letter-spacing: var(--tz-u); color: var(--tz-gold); background: var(--tz-black); border: 0; box-shadow: 0 0 0 var(--tz-u) var(--tz-gold), 0 0 0 calc(var(--tz-u) * 2) var(--tz-black); text-shadow: calc(var(--tz-u) / 2) calc(var(--tz-u) / 2) 0 var(--tz-red); cursor: pointer; white-space: nowrap; animation: tz-blink 1.1s steps(1) infinite; }
.tz-door-go[hidden] { display: none; }
.tz-door-go:focus-visible { outline: calc(var(--tz-u) / 2) solid var(--tz-white); outline-offset: calc(var(--tz-u) * 3); }
@media (prefers-reduced-motion: reduce) { .tz-door-go { animation: none; } }

/* ---------- A ROOMY WINDOW: the whole game in it, nothing to scroll ---------- */
@media (min-width: 1280px) and (min-height: 600px) {
  body.tz-body { overflow: hidden; }
  .tz { display: flex; flex-direction: column; height: 100vh; height: 100dvh; min-height: 0; padding-bottom: 0; }
  .tz-top { flex: none; }
  /* THE GAME AND THE CHAT ARE ONE PAIR (the user, 2026-10-10: "treat the
     game and chat as one thing and center them in the space they use"): the
     games on the left, and the pair in the middle of the room right of them.
     The chat is as wide as the window allows once the game has its 700px,
     280 to 400 (times the big-screen step) */
  .tz-floor { flex: 1 1 auto; min-height: 0; display: grid; --tz-chat: clamp(calc(280px * var(--tz-s)), calc(100vw - 700px - var(--tz-u) * 77), calc(400px * var(--tz-s))); grid-template-columns: auto minmax(0, 1fr); gap: calc(var(--tz-u) * 5); padding: calc(var(--tz-u) * 4) calc(var(--tz-u) * 5) calc(var(--tz-u) * 5); }
  .tz-pair { display: flex; justify-content: safe center; align-items: stretch; gap: calc(var(--tz-u) * 5); min-width: 0; min-height: 0; }
  .tz-games { flex-direction: column; align-items: stretch; flex-wrap: nowrap; justify-self: start; width: calc(220px * var(--tz-s)); min-height: 0; padding: calc(var(--tz-u) * 2); }
  .tz-games-list { flex-direction: column; gap: calc(var(--tz-u) * 4); }
  .tz-vols { margin-top: auto; }
  .tz-exit { justify-content: center; margin-left: 0; }
  .tz-play { flex: none; min-height: 0; padding-top: calc(var(--tz-u) * 2); }
  .tz-bar { flex-wrap: nowrap; }
  /* the table and the chips under it, one group in the middle of the stage */
  .tz-stage { flex: 1 1 auto; min-height: 0; overflow: hidden; justify-content: center; }
  .tz-stage .tz-controls { align-self: center; flex: none; }
  .tz-chat { flex: none; width: var(--tz-chat); min-height: 0; margin: calc(var(--tz-u) * 2) 0 0; }
  .tz-chat-log { flex: 1 1 auto; height: 0; min-height: 0; }
}
/* NORA'S NOOK HAS NO CHAT (the user: "honestly i think we can drop the chat when in the shop"): its column goes to the
   mirror and the wall */
html[data-tz-place="shop"] .tz-chat { display: none; }
/* ...and its column with it, unless Tenzin's stream is up in it (the user, on 4K: "theres a lot of empty space") */
html[data-tz-place="shop"] .tz-side:not(:has(.tz-bb:not([hidden]))) { display: none; }
.tz-wchip[hidden] { display: none; }
/* NORA'S NOOK, A ROOMY WINDOW: the mirror and its tag on the left, the wall beside it as tall as the mirror's frame,
   its grid taking whatever height is left (makeScreen sets .is-beside and the wall's size) */
@media (min-width: 1280px) and (min-height: 600px) {
  .tz-stage.is-beside { flex-direction: row; align-items: center; justify-content: center; gap: calc(var(--tz-u) * 4); }
  .tz-stage.is-beside .tz-controls.tz-shop { align-self: center; flex: none; min-height: 0; }
  .tz-stage.is-beside .tz-rack-wrap { flex: 1 1 auto; display: flex; }
  .tz-stage.is-beside .tz-rack { flex: 1 1 auto; height: auto; }
}
/* ...a short one (a 768-tall laptop): smaller cards, a name on one line, so the grid keeps a few rows */
@media (min-width: 1280px) and (min-height: 600px) and (max-height: 860px) {
  .tz-stage.is-beside .tz-item canvas { width: calc(36px * var(--tz-s)); height: calc(36px * var(--tz-s)); }
  .tz-stage.is-beside .tz-item-n { height: 1.1em; -webkit-line-clamp: 1; }
  .tz-stage.is-beside .tz-item-p { height: calc(15px * var(--tz-s)); }
  .tz-stage.is-beside .tz-pick-l { -webkit-line-clamp: 2; }
}
/* A BIG SCREEN DRAWS THE FRAME BIGGER (the user, 2026-10-10, on a big
   monitor: the games and EXIT "feel rather small compared to everything now",
   "the twitch chat font can be bigger", the counts looked shrunk). The table
   grows with the window; the games, knobs, EXIT, the dealer, the counts, the
   chips and the chat grow with it a step at a time (--tz-s scales the grid,
   the type and the frame's fixed sizes), and the counts take more room */
@media (min-width: 2200px) and (min-height: 1100px) {
  .tz, .tz-door { --tz-s: 1.25; }
  /* his type a step up from the rest, the box holding three lines of it */
  .tz-say { --tz-say-f: calc(14px * var(--tz-s)); }
}
@media (min-width: 2700px) and (min-height: 1300px) {
  .tz, .tz-door { --tz-s: 1.5; }
  .tz-bar .tz-stat { flex: 0 1 auto; min-width: calc(var(--tz-u) * 30); }
}
/* a 4K screen at 100% (the user's: about 3840 x 2000 full screen) */
@media (min-width: 3400px) and (min-height: 1800px) {
  .tz, .tz-door { --tz-s: 2; }
}
/* a short window (a 768-tall laptop): a slimmer bar, so the table keeps the room */
@media (min-width: 1280px) and (min-height: 600px) and (max-height: 860px) {
  .tz-dealer { padding: calc(var(--tz-u) * 3); gap: calc(var(--tz-u) * 3); }
  .tz-dealer canvas { width: 56px; height: 56px; }
  .tz-stat { padding: calc(var(--tz-u) * 2) calc(var(--tz-u) * 3); }
}
@media (max-width: 1000px) {
  .tz-top { padding: calc(var(--tz-u) * 4) calc(var(--tz-u) * 4) 0; }
}

/* ---------- PHONES ---------- */
@media (max-width: 640px) {
  .tz-door-go { font-size: var(--tz-f16); }
  .tz-vols { flex: 1 1 100%; order: 3; }
  .tz-games-h, .tz-game small, .tz-exit small { display: none; }
  /* the bigger names are for wider screens: three of them fit a phone at 8 */
  .tz-game { gap: calc(var(--tz-u) * 2); font-size: var(--tz-f8); padding: calc(var(--tz-u) * 2); }
  .tz-game canvas { width: calc(16px * var(--tz-s)); height: calc(16px * var(--tz-s)); }
  .tz-exit { font-size: var(--tz-f12); padding: calc(var(--tz-u) * 2) calc(var(--tz-u) * 3); }
  /* the dealer across the top, the three counts under him */
  .tz-bar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(var(--tz-u) * 3); padding: 0; }
  .tz-bar .tz-dealer { grid-column: 1 / -1; }
  .tz-stat { min-width: 0; padding: calc(var(--tz-u) * 2); box-shadow: 0 0 0 calc(var(--tz-u) / 2) var(--tz-white), 0 0 0 var(--tz-u) var(--tz-black); }
  .tz-stat-k { line-height: 1.5; }
  .tz-stat-v { gap: calc(var(--tz-u) * 1.5); min-height: 0; font-size: var(--tz-f12); }
  .tz-faces { display: none; }
  .tz-dealer canvas { width: 48px; height: 48px; }
  .tz-say { --tz-say-f: var(--tz-f8); }
  .tz-controls { flex-direction: column; align-items: stretch; }
  .tz-chips { justify-content: space-between; }
  /* four in the list (THE FLOOR came in) do not fit a phone: the one you cannot click goes, the floor shows it anyway */
  .tz-games-list li:has(> .is-soon) { display: none; }
  /* and however many games there are, they wrap two to a row rather than run off the side */
  .tz-games-list { flex-wrap: wrap; }
  .tz-games-list > li { flex: 1 1 calc(50% - var(--tz-u) * 3); min-width: 0; }
  .tz-games-list .tz-game { width: 100%; }
  .tz-controls .tz-moves .tz-btn.tz-move { font-size: var(--tz-f8); }
  .tz-chip { min-width: 0; flex: 1; }
  .tz-btns { flex-wrap: wrap; }
  .tz-pays { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- TENZIN'S STREAM ON A BILLBOARD (tenzino-stream.js, 2026-10-10) ----------
   Over the chat, its top up in the sign's sky, never under Twitch's 400 x
   300. Its bulbs are its own background, painted under the player: anything
   drawn over a Twitch player stops it starting by itself */
.tz-side { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.tz-bb { --tz-bb-f: calc(6px * var(--tz-s)); --tz-bb-b: calc(3px * var(--tz-s)); position: relative; z-index: 3; align-self: flex-end; display: flex; flex-direction: column; gap: var(--tz-bb-f); width: calc(var(--tz-bb-w, 400px) + var(--tz-bb-f) * 2); margin-bottom: calc(var(--tz-u) * 4); padding: var(--tz-bb-f);
  background:
    repeating-linear-gradient(90deg, var(--tz-gold3) 0 var(--tz-bb-b), transparent var(--tz-bb-b) calc(var(--tz-bb-b) * 3)) left top / 100% var(--tz-bb-b) no-repeat,
    repeating-linear-gradient(90deg, var(--tz-gold3) 0 var(--tz-bb-b), transparent var(--tz-bb-b) calc(var(--tz-bb-b) * 3)) left bottom / 100% var(--tz-bb-b) no-repeat,
    repeating-linear-gradient(180deg, var(--tz-gold3) 0 var(--tz-bb-b), transparent var(--tz-bb-b) calc(var(--tz-bb-b) * 3)) left top / var(--tz-bb-b) 100% no-repeat,
    repeating-linear-gradient(180deg, var(--tz-gold3) 0 var(--tz-bb-b), transparent var(--tz-bb-b) calc(var(--tz-bb-b) * 3)) right top / var(--tz-bb-b) 100% no-repeat,
    var(--tz-red);
  box-shadow: 0 0 0 calc(var(--tz-u) / 2) var(--tz-black), 0 0 0 var(--tz-u) var(--tz-gold1), 0 0 calc(var(--tz-u) * 8) rgba(248, 184, 0, 0.3);
  animation: tz-bb-bulbs 0.8s steps(1) infinite; }
@keyframes tz-bb-bulbs { 50% { background-position: calc(var(--tz-bb-b) * 2) 0, calc(var(--tz-bb-b) * -2) 100%, 0 calc(var(--tz-bb-b) * -2), 100% calc(var(--tz-bb-b) * 2), 0 0; } }
.tz-bb[hidden], .tz-bb-hold[hidden], .tz-bb-chip[hidden], .tz-bb-back[hidden] { display: none; }
.tz-bb-hold { flex: none; }
.tz-bb-plate { display: flex; align-items: center; gap: calc(var(--tz-u) * 2); padding: calc(var(--tz-u) * 1.5) calc(var(--tz-u) * 2); font-family: var(--tz-arcade); font-size: var(--tz-f8); line-height: 1; color: var(--tz-white); background: var(--tz-black); }
.tz-bb-live { display: inline-flex; align-items: center; gap: calc(var(--tz-u) * 1.5); color: var(--tz-gray); white-space: nowrap; }
.tz-bb-live i, .tz-bb-chip i { display: block; width: calc(6px * var(--tz-s)); height: calc(6px * var(--tz-s)); background: var(--tz-gray0); }
.tz-bb[data-state="live"] .tz-bb-live { color: var(--tz-red3); }
.tz-bb[data-state="live"] .tz-bb-live i, .tz-bb-chip i { background: var(--tz-red3); animation: tz-blink 1.2s steps(1) infinite; }
.tz-bb-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--tz-gold); }
.tz-bb-btn { padding: var(--tz-u) calc(var(--tz-u) * 2); font: inherit; color: var(--tz-white); background: var(--tz-purple0); border: 0; border-radius: 0; box-shadow: 0 0 0 calc(var(--tz-u) / 2) var(--tz-gray); cursor: pointer; }
.tz-bb-btn:hover { box-shadow: 0 0 0 calc(var(--tz-u) / 2) var(--tz-gold); }
.tz-bb-btn:focus-visible { outline: calc(var(--tz-u) / 2) solid var(--tz-gold); outline-offset: calc(var(--tz-u) / 2); }
.tz-bb-screen { width: var(--tz-bb-w, 400px); height: var(--tz-bb-h, 300px); background: #000000; }
.tz-bb-screen > div, .tz-bb-screen iframe { display: block; width: 100%; height: 100%; border: 0; }
.tz-bb-fail { display: grid; place-items: center; height: 100%; font-family: var(--tz-arcade); font-size: var(--tz-f12); color: var(--tz-gold); }
/* BIG: over the room, the dark behind it closes it */
.tz-bb.is-big { position: fixed; z-index: 61; top: 50%; left: 50%; margin: 0; transform: translate(-50%, -50%); }
.tz-bb-back { position: fixed; inset: 0; z-index: 60; background: rgba(15, 10, 28, 0.9); }
/* the chip in the sign's corner, when the billboard is folded away or the window is too small for it */
.tz-bb-chip { position: absolute; z-index: 3; top: calc(var(--tz-u) * 3); right: calc(var(--tz-u) * 4); display: inline-flex; align-items: center; gap: calc(var(--tz-u) * 2); padding: calc(var(--tz-u) * 2) calc(var(--tz-u) * 3); font-family: var(--tz-arcade); font-size: var(--tz-f8); line-height: 1; color: var(--tz-white); text-decoration: none; background: var(--tz-black); box-shadow: 0 0 0 calc(var(--tz-u) / 2) var(--tz-gold), 0 0 0 var(--tz-u) var(--tz-black); }
.tz-bb-chip:hover { color: var(--tz-gold); }
/* offline: the chip waits, grey and still */
.tz-bb-chip[data-state="off"] { color: var(--tz-gray2); box-shadow: 0 0 0 calc(var(--tz-u) / 2) var(--tz-gray), 0 0 0 var(--tz-u) var(--tz-black); }
.tz-bb-chip[data-state="off"] i { background: var(--tz-gray); animation: none; }
.tz-bb-chip:focus-visible { outline: calc(var(--tz-u) / 2) solid var(--tz-gold); outline-offset: var(--tz-u); }
/* BIG over the room (a small window) pops up; the chip drops in */
@keyframes tz-bb-pop { from { opacity: 0; transform: translate(-50%, -50%) scale(0.86); } }
.tz-bb.is-big { animation: tz-bb-pop 0.26s cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes tz-bb-chip-in { from { opacity: 0; transform: translateY(calc(var(--tz-u) * -2)) scale(0.9); } }
.tz-bb-chip.is-in { animation: tz-bb-chip-in 0.24s ease-out; }
@media (prefers-reduced-motion: reduce) { .tz-bb, .tz-bb.is-big, .tz-bb-chip.is-in { animation: none; } }
@media (min-width: 1280px) and (min-height: 600px) {
  /* the side column takes the chat's width and place; the chat fills what the billboard leaves */
  .tz-side { flex: none; width: var(--tz-chat); margin: calc(var(--tz-u) * 2) 0 0; }
  .tz-side > .tz-chat { flex: 1 1 auto; width: auto; margin: 0; }
  /* BIG, THE THEATER (the user: not covering the game): the stream's column
     grows to about half the room (tenzino-stream.js sets its width) and the
     game moves over and gets smaller. Its bar stays on one row, the counts
     where they were (the user did not like them "pushed down"): the
     dealer's box gives way instead, its words set smaller to fit */
  .tz-theater .tz-bar .tz-dealer { min-width: 0; }
}

/* ---------- MOMO MANIA'S PAY TABLE (2026-10-10, the user: "more readable", no
   wall of words, the 3, 4 and 5 not wrapping): the specials as cards of a line
   each, the foods as a table with 3, 4 and 5 in columns ---------- */
.tz-sp-bet { margin: 0 0 calc(var(--tz-u) * 2); font-size: var(--tz-f12); color: var(--tz-gray2); }
.tz-sp-bet b { font-weight: 400; color: var(--tz-white); }
.tz-sp-h { margin: calc(var(--tz-u) * 5) 0 calc(var(--tz-u) * 3); font-family: var(--tz-arcade); font-size: var(--tz-f8); color: var(--tz-gold); }
.tz-sp-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(var(--tz-u) * 3); }
.tz-sp-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: calc(var(--tz-u) * 3); padding: calc(var(--tz-u) * 3); background: var(--tz-ink); box-shadow: 0 0 0 calc(var(--tz-u) / 2) var(--tz-gray0); }
.tz-sp-card.is-wide { grid-column: 1 / -1; }
.tz-sp-ics { display: flex; gap: var(--tz-u); }
.tz-sp-card i, .tz-sp-foods i { display: inline-flex; font-style: normal; }
.tz-sp-card canvas, .tz-sp-foods canvas { width: calc(24px * var(--tz-s)); height: calc(24px * var(--tz-s)); image-rendering: pixelated; }
.tz-sp-t { display: grid; gap: var(--tz-u); min-width: 0; }
.tz-sp-t b { font-weight: 400; font-size: var(--tz-f16); color: var(--tz-white); }
.tz-sp-t small { font-size: var(--tz-f12); line-height: 1.35; color: var(--tz-gray2); }
.tz-sp-card em { font-style: normal; font-family: var(--tz-arcade); font-size: var(--tz-f8); color: var(--tz-red3); white-space: nowrap; }
.tz-sp-dishes { display: flex; flex-wrap: wrap; gap: calc(var(--tz-u) * 2) calc(var(--tz-u) * 5); margin: var(--tz-u) 0; }
.tz-sp-dishes > span { display: inline-flex; align-items: center; gap: calc(var(--tz-u) * 1.5); font-family: var(--tz-arcade); font-size: var(--tz-f8); color: var(--tz-gold3); }
.tz-sp-foods { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.tz-sp-foods th, .tz-sp-foods td { padding: calc(var(--tz-u) * 1.5) calc(var(--tz-u) * 3); font-weight: 400; text-align: right; white-space: nowrap; }
.tz-sp-foods thead th { font-family: var(--tz-arcade); font-size: var(--tz-f8); color: var(--tz-gray); border-bottom: calc(var(--tz-u) / 2) solid var(--tz-gray0); }
.tz-sp-foods thead th:first-child, .tz-sp-foods tbody th { text-align: left; }
.tz-sp-foods tbody th { display: flex; align-items: center; gap: calc(var(--tz-u) * 3); font-size: var(--tz-f16); color: var(--tz-white); }
.tz-sp-foods td { width: 18%; font-family: var(--tz-arcade); font-size: var(--tz-f8); color: var(--tz-white); }
.tz-sp-foods tbody tr:nth-child(odd) { background: var(--tz-ink); }
.tz-sp-foods tr.is-wild th, .tz-sp-foods tr.is-wild td { color: var(--tz-gold); }
@media (max-width: 640px) { .tz-sp-cards { grid-template-columns: minmax(0, 1fr); } .tz-sp-foods th, .tz-sp-foods td { padding: var(--tz-u) calc(var(--tz-u) * 1.5); } }
.tz-pop-box { font-family: "Tz Digits", var(--tz-read); }
/* THE CHAT'S WAY BACK DOWN (tenzino-chat.js): over the foot of the messages while you are scrolled up */
.tz-chat-jumpwrap { position: relative; height: 0; }
.tz-chat-jump { position: absolute; left: 50%; bottom: calc(var(--tz-u) * 2); z-index: 1; transform: translateX(-50%); padding: calc(var(--tz-u) * 1.5) calc(var(--tz-u) * 3); font-family: var(--tz-arcade); font-size: var(--tz-f8); line-height: 1; color: var(--tz-black); white-space: nowrap; background: var(--tz-gold); border: 0; border-radius: 0; box-shadow: 0 0 0 calc(var(--tz-u) / 2) var(--tz-black), 0 calc(var(--tz-u) / 2) 0 calc(var(--tz-u) / 2) var(--tz-black); cursor: pointer; }
.tz-chat-jump:hover { background: var(--tz-gold3); }
.tz-chat-jump:focus-visible { outline: calc(var(--tz-u) / 2) solid var(--tz-white); outline-offset: calc(var(--tz-u) / 2); }
.tz-chat-jump[hidden] { display: none; }
/* CHAT BUBBLES over the people on the screen (tenzino-bubbles.js; the user: "if the players are chatting in the chat,
   they get a chat bubble on their players"): white paper, a black pixel edge, a tail to the head, the chat's own emotes;
   three lines at most; the tail points down, or up when the bubble hangs under the head (is-under) */
.tz-bubbles { position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 2; pointer-events: none; }
.tz-bubble { --tz-tail: 50%; position: absolute; left: 0; top: 0; width: max-content; max-width: calc(168px * var(--tz-s)); padding: calc(var(--tz-u) * 0.75) calc(var(--tz-u) * 1.5); font-family: var(--tz-read); font-size: var(--tz-f12); line-height: 1.3; color: var(--tz-black); background: var(--tz-white); box-shadow: 0 0 0 calc(2px * var(--tz-s)) var(--tz-black); overflow-wrap: anywhere; transform-origin: var(--tz-tail) 100%; }
.tz-bubble-t { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.tz-bubble.is-me .tz-bubble-t { font-style: italic; }
.tz-bubble .ch-emote { height: calc(18px * var(--tz-s)); vertical-align: calc(-5px * var(--tz-s)); }
.tz-bubble::before, .tz-bubble::after { content: ""; position: absolute; left: var(--tz-tail); top: 100%; width: 0; height: 0; border-style: solid; border-color: transparent; }
.tz-bubble::before { margin-left: calc(-7px * var(--tz-s)); border-width: calc(8px * var(--tz-s)) calc(7px * var(--tz-s)) 0; border-top-color: var(--tz-black); }
.tz-bubble::after { margin-left: calc(-4px * var(--tz-s)); border-width: calc(5px * var(--tz-s)) calc(4px * var(--tz-s)) 0; border-top-color: var(--tz-white); }
.tz-bubble.is-under { transform-origin: var(--tz-tail) 0; }
.tz-bubble.is-under::before, .tz-bubble.is-under::after { top: auto; bottom: 100%; border-top-color: transparent; }
.tz-bubble.is-under::before { border-width: 0 calc(7px * var(--tz-s)) calc(8px * var(--tz-s)); border-bottom-color: var(--tz-black); }
.tz-bubble.is-under::after { border-width: 0 calc(4px * var(--tz-s)) calc(5px * var(--tz-s)); border-bottom-color: var(--tz-white); }
.tz-bubble.is-pop { animation: tz-bubble-pop 0.24s steps(4, end); }
.tz-bubble.is-out { opacity: 0; transition: opacity 0.2s steps(2, end); }
@keyframes tz-bubble-pop { from { opacity: 0; scale: 0.4; } to { opacity: 1; scale: 1; } }
@media (prefers-reduced-motion: reduce) { .tz-bubble.is-pop { animation: none; } .tz-bubble.is-out { transition: none; } }
/* ONE PAGE (2026-10-11, tenzino-shell.js): a game's part of the page lays out as if it were the middle
   column's own children; a game put in comes up out of the dark (the floor's walk ends in it) */
.tz-view { display: contents; }
.tz-view.is-in > * { animation: tz-view-in 0.3s steps(5, end) both; }
@keyframes tz-view-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .tz-view.is-in > * { animation: none; } }
/* EVERY SCREEN THE SAME SIZE (the user, 2026-10-11: "the width of the floor is bigger than the games"): the games
   have their chips under the screen and the floor has none, so on a wide window it took that height and came out
   bigger, and the room jumped as you went from one to the other. The floor keeps the same room, a row the chips'
   height that nobody sees, so every game fits the window the same and the screen never moves. A narrow window
   (one column) sizes by its width, the same for all, and has no need of it. */
.tz-controls-ghost { visibility: hidden; pointer-events: none; }
@media (max-width: 1279px), (max-height: 599px) { .tz-controls-ghost { display: none; } }

/* ---------- THE SHOP (tenzino-shop.js, 2026-10-12, a mockup) ----------
   Under Nora's screen: the racks' tabs, a rack of cards that scrolls
   sideways (a card is a piece on a mannequin, its name and price, its
   border its rarity's color), and the strip for the piece you picked with
   its own BUY beside BUY OUTFIT, WEAR THIS and RESET */
/* NORA'S NOOK'S WALL (the user picked "mirror + shop wall"): the filters on top, the grid scrolling inside its own box,
   the piece you picked and the buttons at its foot. Under the mirror its grid is a fixed height, so a click never
   changes the room's size; beside it (a roomy window, .is-beside below) it is as tall as the stage */
.tz-controls.tz-shop { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; justify-content: flex-start; gap: calc(var(--tz-u) * 2); min-width: 0; }
.tz-wall-top { display: grid; gap: calc(var(--tz-u) * 2); }
/* the collections and the rarities share a line when the wall is wide enough, the order at its far end */
.tz-wall-filters { display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--tz-u) * 2) calc(var(--tz-u) * 4); }
.tz-shop-chips { display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--tz-u) * 1.5); }
#tzRarityTabs { flex: 1 1 auto; }
.tz-wchip { padding: var(--tz-u) calc(var(--tz-u) * 1.75); font-family: var(--tz-arcade); font-size: calc(7px * var(--tz-s)); line-height: 1.3; color: var(--tz-gray2); background: var(--tz-black); border: 0; box-shadow: 0 0 0 calc(var(--tz-u) / 2) var(--tz-gray0); cursor: pointer; }
.tz-wchip:hover { color: var(--tz-white); }
.tz-wchip:focus-visible { outline: calc(var(--tz-u) / 2) solid var(--tz-gold); outline-offset: calc(var(--tz-u) / 2); }
.tz-wchip[aria-pressed="true"] { color: var(--tz-black); background: var(--tz-gold3); box-shadow: 0 0 0 calc(var(--tz-u) / 2) var(--tz-white); }
/* a rarity's chip edged in its own color, filled with it when ticked */
.tz-wchip.is-rar { --tz-rar: var(--tz-gray); box-shadow: 0 0 0 calc(var(--tz-u) / 2) var(--tz-rar); }
.tz-wchip.is-rar[data-rarity="rare"] { --tz-rar: var(--tz-sky); }
.tz-wchip.is-rar[data-rarity="epic"] { --tz-rar: var(--tz-lilac); }
.tz-wchip.is-rar[data-rarity="legendary"] { --tz-rar: var(--tz-gold); }
.tz-wchip.is-rar[aria-pressed="true"] { color: var(--tz-black); background: var(--tz-rar); box-shadow: 0 0 0 calc(var(--tz-u) / 2) var(--tz-white); }
.tz-wchip.tz-wsort { margin-left: auto; color: var(--tz-gold3); }
.tz-rack-head { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--tz-u) * 2); }
.tz-rack-h { margin: 0; overflow: hidden; font-family: var(--tz-arcade); font-size: calc(7px * var(--tz-s)); line-height: 1.5; color: var(--tz-gold); white-space: nowrap; text-overflow: ellipsis; }
.tz-wchip.tz-shop-reset { flex: none; color: var(--tz-gray); }
.tz-rack-none { grid-column: 1 / -1; margin: calc(var(--tz-u) * 4) 0; font-family: var(--tz-arcade); font-size: var(--tz-f8); color: var(--tz-gray); text-align: center; }
.tz-shop-tabs { display: flex; flex-wrap: wrap; gap: calc(var(--tz-u) * 2); }
.tz-shop-tab { padding: calc(var(--tz-u) * 1.5) calc(var(--tz-u) * 2.5); font-family: var(--tz-arcade); font-size: var(--tz-f8); line-height: 1.2; color: var(--tz-gray2); background: var(--tz-black); border: 0; box-shadow: 0 0 0 calc(var(--tz-u) / 2) var(--tz-gray0); cursor: pointer; }
.tz-shop-tab:hover { color: var(--tz-white); box-shadow: 0 0 0 calc(var(--tz-u) / 2) var(--tz-gray); }
.tz-shop-tab[aria-pressed="true"] { color: var(--tz-black); background: var(--tz-gold); box-shadow: 0 0 0 calc(var(--tz-u) / 2) var(--tz-white); }
.tz-shop-tab:focus-visible, .tz-item:focus-visible, .tz-broke:focus-visible { outline: calc(var(--tz-u) / 2) solid var(--tz-gold); outline-offset: var(--tz-u); }
.tz-rack { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(84px * var(--tz-s)), 1fr)); align-content: start; gap: calc(var(--tz-u) * 2.5); height: calc(300px * var(--tz-s)); overflow-x: hidden; overflow-y: auto; padding: calc(var(--tz-u) * 2) var(--tz-u); scrollbar-width: thin; scrollbar-color: var(--tz-gold1) var(--tz-black); }
.tz-item { --tz-rar: var(--tz-gray); position: relative; display: grid; justify-items: center; align-content: start; gap: calc(var(--tz-u) / 2); min-width: 0; padding: var(--tz-u) var(--tz-u) calc(var(--tz-u) * 1.5); font-family: var(--tz-read); color: var(--tz-white); text-align: center; background: var(--tz-black); border: 0; box-shadow: 0 0 0 calc(var(--tz-u) / 2) var(--tz-rar); cursor: pointer; }
.tz-item[data-rarity="rare"] { --tz-rar: var(--tz-sky); }
.tz-item[data-rarity="epic"] { --tz-rar: var(--tz-lilac); }
.tz-item[data-rarity="legendary"] { --tz-rar: var(--tz-gold); }
.tz-item[data-rarity="limited"] { --tz-rar: var(--tz-red3); }
.tz-item[data-rarity="earned"] { --tz-rar: var(--tz-green3); }
.tz-item:hover { background: var(--tz-purple0); }
.tz-item[aria-pressed="true"] { background: var(--tz-purple1); box-shadow: 0 0 0 calc(var(--tz-u) / 2) var(--tz-white), 0 0 0 var(--tz-u) var(--tz-rar); }
.tz-item canvas { width: calc(48px * var(--tz-s)); height: calc(48px * var(--tz-s)); image-rendering: pixelated; background: var(--tz-purple0); }
.tz-item-n { display: -webkit-box; height: 2.1em; overflow: hidden; font-size: var(--tz-f12); line-height: 1.05; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.tz-item-p { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; height: calc(23px * var(--tz-s)); overflow: hidden; font-family: "Tz Digits", var(--tz-read); font-size: var(--tz-f12); line-height: 1.1; color: var(--tz-gold3); }
.tz-item-p s { margin-right: var(--tz-u); color: var(--tz-gray); }
.tz-item-p.is-state { font-family: var(--tz-arcade); font-size: calc(7px * var(--tz-s)); line-height: 1.6; color: var(--tz-green3); }
.tz-item-tag { position: absolute; top: calc(var(--tz-u) * -1.5); right: calc(var(--tz-u) * -1); padding: calc(2px * var(--tz-s)) var(--tz-u); font-family: var(--tz-arcade); font-size: calc(6px * var(--tz-s)); font-style: normal; line-height: 1.2; color: var(--tz-white); background: var(--tz-red); box-shadow: 0 0 0 calc(var(--tz-u) / 2) var(--tz-black); }
.tz-item-tag.is-season { background: var(--tz-purple1); }
/* each holiday's own tag: Halloween's orange, Thanksgiving's harvest gold, Christmas's green */
.tz-item-tag.is-season[data-season="halloween"] { background: var(--tz-red3); }
.tz-item-tag.is-season[data-season="thanksgiving"] { color: var(--tz-black); background: var(--tz-gold); }
.tz-item-tag.is-season[data-season="christmas"] { background: var(--tz-green); }
/* the strip keeps one height whatever you pick (the room above it never moves): the line across the whole width, three lines at most */
.tz-shop-foot { display: grid; grid-template-columns: minmax(0, 1fr); gap: calc(var(--tz-u) * 2); }
.tz-pick { min-width: 0; height: calc(var(--tz-f8) * 1.5 + var(--tz-f12) * 3.75 + var(--tz-u) * 3); display: flex; align-items: center; gap: calc(var(--tz-u) * 3); overflow: hidden; }
.tz-pick canvas { flex: none; width: calc(48px * var(--tz-s)); height: calc(48px * var(--tz-s)); image-rendering: pixelated; background: var(--tz-purple0); box-shadow: 0 0 0 calc(var(--tz-u) / 2) var(--tz-gray0); }
.tz-pick.is-empty canvas { visibility: hidden; }
.tz-pick-t { flex: 1 1 auto; min-width: 0; }
.tz-pick-n { margin: 0; font-family: var(--tz-arcade); font-size: var(--tz-f8); line-height: 1.5; color: var(--tz-gold); }
.tz-pick-n b { font-weight: 400; }
.tz-pick-l { display: -webkit-box; margin: var(--tz-u) 0 0; overflow: hidden; font-size: var(--tz-f12); line-height: 1.25; color: var(--tz-gray2); -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.tz-rarity { display: inline-block; margin-left: var(--tz-u); padding: 0 var(--tz-u); font-size: calc(7px * var(--tz-s)); color: var(--tz-black); background: var(--tz-gray2); vertical-align: middle; }
.tz-rarity[data-rarity="rare"] { background: var(--tz-sky); }
.tz-rarity[data-rarity="epic"] { background: var(--tz-lilac); }
.tz-rarity[data-rarity="legendary"] { background: var(--tz-gold); }
.tz-rarity[data-rarity="limited"] { color: var(--tz-white); background: var(--tz-red3); }
.tz-rarity[data-rarity="earned"] { background: var(--tz-green3); }
.tz-rarity[hidden] { display: none; }
.tz-shop-btns { display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--tz-u) * 2); }
/* the outfit's buttons always on a line of their own under the piece's (BUY is always there, if only greyed), so the foot is
   one height whatever is picked: a pricier piece's longer labels never wrap it onto a third line (a phone, 2026-10-12) */
.tz-shop-gap { flex: 1 0 100%; height: 0; }
.tz-btn.tz-buy, .tz-btn.tz-buy-all { color: var(--tz-black); background: var(--tz-gold); }
.tz-btn.tz-buy:hover:not(:disabled), .tz-btn.tz-buy-all:hover:not(:disabled) { background: var(--tz-gold3); }
.tz-btn.tz-buy:disabled, .tz-btn.tz-buy-all:disabled { color: var(--tz-gray); background: var(--tz-black); }
.tz-btn.tz-buy.is-short:not(:disabled) { color: var(--tz-white); background: var(--tz-red); }
.tz-btn.is-short:disabled { color: var(--tz-rose); }
.tz-btn.tz-buy[hidden] { display: none; }
.tz-closet-of { font-size: var(--tz-f8); color: var(--tz-gray2); }
/* SETTING A PIECE (the shop's strip): a number, a letter or a color, only ever inside the piece's range */
.tz-rack-wrap { position: relative; min-height: 0; }
.tz-opt-pop { position: absolute; inset: 0 0 auto 0; max-height: 100%; z-index: 2; display: grid; align-content: start; gap: calc(var(--tz-u) * 2); padding: calc(var(--tz-u) * 2) calc(var(--tz-u) * 3); overflow: auto; background: var(--tz-black); box-shadow: 0 0 0 calc(var(--tz-u) / 2) var(--tz-gold), 0 0 0 var(--tz-u) var(--tz-black); }
.tz-opt-pop[hidden] { display: none; }
.tz-opt-top { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--tz-u) * 2); }
.tz-opt-h { margin: 0; font-family: var(--tz-arcade); font-size: var(--tz-f8); line-height: 1.5; color: var(--tz-gold); }
.tz-opt { display: flex; flex-wrap: wrap; align-items: center; gap: var(--tz-u); }
.tz-btn.tz-set { color: var(--tz-black); background: var(--tz-lilac); }
.tz-btn.tz-set:hover { background: var(--tz-rose); }
.tz-btn.tz-set[hidden] { display: none; }
.tz-opt-b { min-width: calc(18px * var(--tz-s)); height: calc(18px * var(--tz-s)); padding: 0 var(--tz-u); font-family: var(--tz-arcade); font-size: calc(7px * var(--tz-s)); line-height: 1; color: var(--tz-white); background: var(--tz-black); border: 0; box-shadow: 0 0 0 calc(var(--tz-u) / 2) var(--tz-gray0); cursor: pointer; }
.tz-opt-b:hover { box-shadow: 0 0 0 calc(var(--tz-u) / 2) var(--tz-gray2); }
.tz-opt-b:focus-visible { outline: calc(var(--tz-u) / 2) solid var(--tz-gold); outline-offset: calc(var(--tz-u) / 2); }
.tz-opt-b[aria-pressed="true"] { color: var(--tz-black); background: var(--tz-gold); box-shadow: 0 0 0 calc(var(--tz-u) / 2) var(--tz-white); }
.tz-opt-b.is-red { background: var(--tz-red); }
.tz-opt-b.is-black { background: var(--tz-ink); }
.tz-opt-b.is-green { background: var(--tz-green); }
.tz-opt-b.is-red[aria-pressed="true"], .tz-opt-b.is-black[aria-pressed="true"], .tz-opt-b.is-green[aria-pressed="true"] { color: var(--tz-black); background: var(--tz-gold); }
.tz-opt-board { display: grid; grid-template-columns: repeat(13, minmax(0, 1fr)); grid-auto-rows: calc(16px * var(--tz-s)); gap: calc(var(--tz-u) / 2); width: min(100%, calc(270px * var(--tz-s))); }
.tz-opt-board .tz-opt-b { min-width: 0; width: 100%; height: 100%; padding: 0; }
.tz-opt-board .tz-opt-zero { grid-row: 1 / span 3; }
.tz-opt-b.is-letter { min-width: calc(16px * var(--tz-s)); padding: 0; }
.tz-opt-b.is-swatch { --sw: var(--tz-gray); --sw-hi: var(--tz-white); width: calc(18px * var(--tz-s)); background: linear-gradient(var(--sw-hi) 0 25%, var(--sw) 25%); }
.tz-opt-b.is-swatch[aria-pressed="true"] { background: linear-gradient(var(--sw-hi) 0 25%, var(--sw) 25%); box-shadow: 0 0 0 calc(var(--tz-u) / 2) var(--tz-black), 0 0 0 var(--tz-u) var(--tz-gold); }
.tz-opt-n { min-width: 2.4em; font-family: var(--tz-arcade); font-size: var(--tz-f12); font-weight: 400; color: var(--tz-gold); text-align: center; }
.tz-opt-range { margin-left: var(--tz-u); font-family: var(--tz-arcade); font-size: calc(7px * var(--tz-s)); color: var(--tz-gray); }
.tz-item-tag.is-set { background: var(--tz-purple1); }

/* ---------- TENZIN GOES BANKRUPT (tenzino-bailout.js, 2026-10-12, a mockup) ----------
   THE BOARD, the floor's row under its screen: a factory safety sign in
   yellow and black, the days since in a flip card, the count; it opens THE
   BANKRUPTCY RECORD. THE MOMENT is a canvas over the table's screen. */
.tz-controls.tz-controls-board { justify-content: center; }
.tz-broke { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: calc(var(--tz-u) * 2) calc(var(--tz-u) * 4); width: 100%; padding: calc(var(--tz-u) * 2) calc(var(--tz-u) * 4); font-family: var(--tz-arcade); font-size: var(--tz-f8); line-height: 1.5; color: var(--tz-gray2); background: var(--tz-black); border: 0; box-shadow: 0 0 0 var(--tz-u) var(--tz-white), 0 0 0 calc(var(--tz-u) * 2) var(--tz-black); cursor: pointer; }
.tz-broke:hover { box-shadow: 0 0 0 var(--tz-u) var(--tz-gold), 0 0 0 calc(var(--tz-u) * 2) var(--tz-black); }
.tz-broke[hidden] { display: none; }
.tz-broke canvas { width: calc(24px * var(--tz-s)); height: calc(24px * var(--tz-s)); image-rendering: pixelated; }
.tz-broke-k { max-width: 18em; color: var(--tz-gold); text-align: left; }
/* the days on a red flip card */
.tz-broke-n { position: relative; min-width: 2.2em; padding: var(--tz-u) calc(var(--tz-u) * 2); font-size: var(--tz-f24); font-weight: 400; line-height: 1; color: var(--tz-white); text-align: center; background: var(--tz-red); box-shadow: 0 0 0 calc(var(--tz-u) / 2) var(--tz-black), 0 0 0 var(--tz-u) var(--tz-gold1); }
.tz-broke-n::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: calc(var(--tz-u) / 2); background: rgba(0, 0, 0, 0.45); }
.tz-broke-c b { font-weight: 400; color: var(--tz-red3); }
.tz-broke-moment { position: absolute; top: calc(var(--tz-u) * 2); left: calc(var(--tz-u) * 2); z-index: 2; width: calc(100% - var(--tz-u) * 4); height: calc(100% - var(--tz-u) * 4); image-rendering: pixelated; pointer-events: none; }
.tz-broke-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(calc(150px * var(--tz-s)), 1fr)); gap: calc(var(--tz-u) * 3) calc(var(--tz-u) * 5); margin: 0 0 calc(var(--tz-u) * 6); }
.tz-broke-facts dt { font-family: var(--tz-arcade); font-size: var(--tz-f8); color: var(--tz-gray2); }
.tz-broke-facts dd { margin: var(--tz-u) 0 0; font-family: var(--tz-arcade); font-size: var(--tz-f12); line-height: 1.4; color: var(--tz-gold); }
.tz-broke-facts dd small { display: block; margin-top: var(--tz-u); font-size: var(--tz-f8); color: var(--tz-gray); }
.tz-broke-h { margin: 0 0 calc(var(--tz-u) * 3); font-family: var(--tz-arcade); font-size: var(--tz-f8); font-weight: 400; color: var(--tz-gold); }
/* ---------- TENZIN'S PORTRAIT, INSPECTED (tenzino-portrait.js; 2026-10-12) ----------
   the grand frame is a canvas in the floor's own pixels, scaled whole by the script (fit), and his
   picture sits over its window; under it a brass plaque, engraved: the chat's memorial (its fancy
   script letters need a font with mathematical letters), his emotes, and the remembrance */
.tz-shrine { background: rgba(8, 4, 14, 0.92); }
.tz-shrine-box { display: grid; justify-items: center; gap: calc(var(--tz-u) * 4); max-height: calc(100vh - 32px); overflow-y: auto; padding: calc(var(--tz-u) * 2); }
/* a wide screen: the plaque beside the frame (the script sets is-wide as it sizes the frame) */
.tz-shrine-box.is-wide { grid-template-columns: auto minmax(0, calc(440px * var(--tz-s))); align-items: center; column-gap: calc(var(--tz-u) * 10); }
.tz-shrine-box.is-wide .tz-shrine-plaque { width: 100%; }
.tz-shrine-box.is-wide .tz-shrine-x { grid-column: 1 / -1; }
.tz-shrine-art { position: relative; }
.tz-shrine-frame { display: block; width: 100%; height: 100%; image-rendering: pixelated; }
.tz-shrine-photo { position: absolute; display: block; object-fit: cover; object-position: 50% 35%; }
.tz-shrine-photo[hidden] { display: none; }
.tz-shrine-plaque { position: relative; width: min(100%, calc(560px * var(--tz-s))); padding: calc(var(--tz-u) * 4) calc(var(--tz-u) * 8); text-align: center; background: var(--tz-gold3);
  box-shadow: inset 0 var(--tz-u) 0 var(--tz-cream), inset 0 calc(var(--tz-u) * -1) 0 var(--tz-gold1), 0 0 0 var(--tz-u) var(--tz-gold1), 0 0 0 calc(var(--tz-u) * 2) var(--tz-black); }
/* two brass screws */
.tz-shrine-plaque::before, .tz-shrine-plaque::after { content: ""; position: absolute; top: calc(50% - var(--tz-u)); width: calc(var(--tz-u) * 2); height: calc(var(--tz-u) * 2); background: var(--tz-gold1); box-shadow: inset calc(var(--tz-u) * 0.5) calc(var(--tz-u) * 0.5) 0 var(--tz-cream), inset calc(var(--tz-u) * -0.5) calc(var(--tz-u) * -0.5) 0 var(--tz-gold0); }
.tz-shrine-plaque::before { left: calc(var(--tz-u) * 3); }
.tz-shrine-plaque::after { right: calc(var(--tz-u) * 3); }
.tz-shrine-words { margin: 0; font-family: var(--tz-read); font-size: var(--tz-f16); line-height: 1.8; color: var(--tz-gold0); text-wrap: balance; }
.tz-shrine-script { font-family: "Cambria Math", "STIX Two Math", "Segoe UI Symbol", "Noto Sans Math", serif; font-size: 1.15em; }
.tz-shrine-emoji { font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif; }
.tz-shrine-emote { height: 1.7em; width: auto; vertical-align: middle; }
.tz-shrine-epitaph { margin: calc(var(--tz-u) * 3) 0 0; padding-top: calc(var(--tz-u) * 3); box-shadow: 0 calc(var(--tz-u) * -0.5) 0 var(--tz-gold1); font-family: var(--tz-arcade); font-size: var(--tz-f8); line-height: 1.9; color: var(--tz-gold0); }
.tz-shrine-epitaph:empty { display: none; }
/* the real record before his first bankruptcy */
.tz-broke-none { margin: calc(var(--tz-u) * 4) 0; font-family: var(--tz-arcade); font-size: var(--tz-f8); line-height: 1.8; color: var(--tz-gray2); }
.tz-broke-who { display: grid; grid-template-columns: repeat(auto-fit, minmax(calc(170px * var(--tz-s)), 1fr)); gap: calc(var(--tz-u) * 3); margin: 0 0 calc(var(--tz-u) * 6); padding: 0; list-style: none; }
.tz-broke-who li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: calc(var(--tz-u) * 3); padding: calc(var(--tz-u) * 2); background: var(--tz-purple0); }
.tz-broke-who canvas { width: auto; height: calc(36px * var(--tz-s)); image-rendering: pixelated; }
.tz-broke-who span { font-family: var(--tz-arcade); font-size: var(--tz-f8); color: var(--tz-white); }
.tz-broke-who small { display: block; margin-top: var(--tz-u); font-family: var(--tz-read); font-size: var(--tz-f12); color: var(--tz-gray2); }
.tz-broke-who b { font-family: var(--tz-arcade); font-size: var(--tz-f16); font-weight: 400; color: var(--tz-red3); }
.tz-broke-all { display: grid; gap: calc(var(--tz-u) * 1.5); margin: 0; padding: 0; list-style: none; }
.tz-broke-all li { display: grid; grid-template-columns: 3.5em minmax(0, 1fr) auto; align-items: baseline; gap: var(--tz-u) calc(var(--tz-u) * 3); padding-bottom: calc(var(--tz-u) * 1.5); box-shadow: 0 1px 0 var(--tz-gray0); }
.tz-broke-all b { font-family: var(--tz-arcade); font-size: var(--tz-f8); font-weight: 400; color: var(--tz-red3); }
.tz-broke-all span { font-size: var(--tz-f12); color: var(--tz-white); }
.tz-broke-all small { grid-column: 2 / -1; font-size: var(--tz-f12); color: var(--tz-gray); }
@media (max-width: 640px) {
  .tz-broke { padding: calc(var(--tz-u) * 2) calc(var(--tz-u) * 8); }
  .tz-broke-k { text-align: center; }
  .tz-item { width: calc(80px * var(--tz-s)); }
  .tz-shop-btns { width: 100%; }
  .tz-shop-btns .tz-btn { flex: 1 1 auto; }
}