/* עיר הקרטון — everything is cut from cardboard, written in marker and held with masking tape. */
:root {
  --board: #c9a274;
  --board-hi: #dbb98a;
  --board-lo: #a9804f;
  --edge: #7d5730;
  --ink: #2a1c10;
  --ink-soft: #5a4128;
  --paper: #f1e5ca;
  --tape: rgba(236, 226, 190, 0.88);
  --red: #b5392c;
  --purple: #6c4a96;
  --green: #3e7a4c;
  --night: #0b1430;
  --shadow: 3px 4px 0 rgba(30, 18, 6, 0.32);
  --marker: "Gveret Levin", "Rubik", sans-serif;
  --body: "Rubik", system-ui, sans-serif;
  --fh: clamp(100px, 31vh, 280px);
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--body);
  color: var(--ink);
  background: #6b4a2b;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; }
img { user-select: none; -webkit-user-drag: none; }
.marker { font-family: var(--marker); font-weight: 400; letter-spacing: 0.2px; }
[hidden] { display: none !important; }

/* ---------- cardboard pieces ---------- */
.sheet {
  position: relative;
  background:
    repeating-linear-gradient(90deg, rgba(60, 35, 10, 0.045) 0 2px, transparent 2px 9px),
    radial-gradient(120% 90% at 20% 10%, var(--board-hi), var(--board) 55%, var(--board-lo));
  border-radius: 3px 7px 4px 6px / 6px 3px 7px 4px;
  box-shadow: inset 0 0 0 2px rgba(80, 50, 20, 0.18), var(--shadow);
  padding: 18px 18px 16px;
}
.sheet::before {           /* a strip of masking tape */
  content: "";
  position: absolute;
  top: -10px;
  inset-inline-start: 50%;
  width: 92px;
  height: 22px;
  translate: 50% 0;
  rotate: -3deg;
  background: var(--tape);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
  clip-path: polygon(3% 0, 97% 6%, 100% 50%, 96% 100%, 2% 94%, 0 45%);
}
.tape {
  background: var(--tape);
  padding: 6px 14px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  clip-path: polygon(1% 4%, 99% 0, 100% 52%, 98% 100%, 0 96%, 1.5% 50%);
}

.btn {
  font-family: var(--marker);
  font-size: 1.35rem;
  line-height: 1.1;
  padding: 10px 20px 8px;
  border: 0;
  background:
    repeating-linear-gradient(90deg, rgba(60, 35, 10, 0.05) 0 2px, transparent 2px 8px),
    linear-gradient(var(--board-hi), var(--board));
  border-radius: 3px 5px 3px 6px;
  box-shadow: inset 0 0 0 2px rgba(80, 50, 20, 0.25), var(--shadow);
  rotate: -0.6deg;
  transition: translate 0.08s, box-shadow 0.08s, filter 0.15s;
}
.btn:hover:not(:disabled) { filter: brightness(1.06); translate: 0 -1px; }
.btn:active:not(:disabled) { translate: 2px 3px; box-shadow: inset 0 0 0 2px rgba(80, 50, 20, 0.25), 1px 1px 0 rgba(30, 18, 6, 0.3); }
.btn:disabled { opacity: 0.55; }
.btn.big { font-size: 1.7rem; padding: 12px 28px 10px; }
.btn.small { font-size: 1.1rem; padding: 7px 14px 5px; }
.btn.red { background: linear-gradient(#cf5446, var(--red)); color: #fff6e6; }
.btn.purple { background: linear-gradient(#8664b3, var(--purple)); color: #fff6e6; }
.btn.on { box-shadow: inset 0 0 0 3px var(--ink), var(--shadow); }

.chip {
  border: 0;
  font-size: 0.86rem;
  font-weight: 500;
  padding: 6px 10px;
  background: var(--paper);
  border-radius: 2px;
  box-shadow: inset 0 0 0 1.5px rgba(80, 50, 20, 0.3), 2px 2px 0 rgba(30, 18, 6, 0.3);
  white-space: nowrap;
}
.chip.off { background: #d8c9a8; color: var(--ink-soft); }
.chip:active { translate: 1px 1px; }

.tape-input {
  width: 100%;
  font-family: var(--marker);
  font-size: 1.5rem;
  padding: 8px 14px 6px;
  border: 0;
  background: var(--paper);
  box-shadow: inset 0 -3px 0 rgba(80, 50, 20, 0.25), 2px 2px 0 rgba(30, 18, 6, 0.25);
  border-radius: 2px;
  outline: none;
}
.tape-input:focus { box-shadow: inset 0 -3px 0 var(--red), 2px 2px 0 rgba(30, 18, 6, 0.25); }
.tape-input.code { width: 6.2em; text-align: center; letter-spacing: 4px; direction: ltr; }

.seg { display: flex; flex-wrap: wrap; gap: 4px; }
.seg button {
  border: 0;
  padding: 5px 10px;
  font-size: 0.88rem;
  background: rgba(241, 229, 202, 0.55);
  border-radius: 2px;
  box-shadow: inset 0 0 0 1.5px rgba(80, 50, 20, 0.25);
}
.seg button.on { background: var(--ink); color: var(--paper); }
.seg button:disabled:not(.on) { opacity: 0.6; }

/* ---------- toasts, connection ---------- */
#toasts {
  position: fixed; top: 64px; inset-inline-start: 14px; z-index: 50; width: min(320px, calc(100vw - 28px));
  display: flex; flex-direction: column; gap: 8px; align-items: flex-start; pointer-events: none;
}
.toast {
  background: var(--tape); padding: 8px 18px; font-weight: 500;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25); rotate: -1deg;
  clip-path: polygon(1% 4%, 99% 0, 100% 52%, 98% 100%, 0 96%, 1.5% 50%);
  animation: drop 0.25s ease-out; transition: opacity 0.3s, translate 0.3s;
}
.toast.bad { background: #f0c9b8; }
.toast.warn { background: #f3dfa4; }
.toast.out { opacity: 0; translate: 0 -10px; }
.conn { position: fixed; bottom: 10px; left: 50%; translate: -50% 0; z-index: 60; background: var(--red); color: #fff; padding: 6px 14px; }
@keyframes drop { from { translate: 0 -14px; opacity: 0; } }

/* ---------- home ---------- */
.home {
  min-height: 100vh;
  padding: 26px 16px 40px;
  display: flex; flex-direction: column; align-items: center; gap: 26px;
  background: url(../assets/art/table.webp) center / cover fixed, #9b7647;
}
.home > * { width: min(980px, 100%); }
.home-sign { text-align: center; }
.home-sign h1 {
  display: inline-block; margin: 0; padding: 10px 34px 4px;
  font-size: clamp(3rem, 9vw, 5.6rem); line-height: 1;
  background: var(--paper); rotate: -2deg; box-shadow: var(--shadow);
  clip-path: polygon(0 6%, 4% 0, 97% 3%, 100% 90%, 95% 100%, 2% 96%);
}
.home-sign p { margin: 12px 0 0; font-weight: 500; color: var(--paper); text-shadow: 0 1px 2px #000a; font-size: 1.1rem; }
.home-step h2, .lobby-side h2 { margin: 0 0 12px; font-size: 1.8rem; }
.modes { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.mode-card {
  display: flex; gap: 14px; align-items: center; text-align: start;
  border: 0; padding: 12px; background: rgba(241, 229, 202, 0.45);
  border-radius: 2px; box-shadow: inset 0 0 0 2px rgba(80, 50, 20, 0.2);
  transition: background 0.15s, rotate 0.15s;
}
.mode-card img { width: 92px; flex: none; rotate: -4deg; filter: drop-shadow(2px 3px 0 rgba(30, 18, 6, 0.3)); transition: rotate 0.2s; }
.mode-card:hover img { rotate: 2deg; }
.mode-text { display: flex; flex-direction: column; gap: 4px; }
.mode-text strong { font-size: 2.2rem; line-height: 1; }
.mode-text small { color: var(--ink-soft); font-weight: 500; }
.mode-card.on { background: var(--paper); box-shadow: inset 0 0 0 3px var(--ink), var(--shadow); rotate: -0.8deg; }
.fig-strip { display: flex; gap: 6px; overflow-x: auto; padding: 12px 4px 8px; scrollbar-width: thin; }
.pick-fig {
  flex: none; border: 0; background: none; padding: 4px 2px 0; height: 150px;
  border-radius: 2px; transition: translate 0.15s, background 0.15s;
}
.pick-fig img { height: 100%; filter: drop-shadow(2px 3px 0 rgba(30, 18, 6, 0.25)); }
.pick-fig:hover:not(:disabled) { translate: 0 -4px; }
.pick-fig.on { background: rgba(241, 229, 202, 0.65); box-shadow: inset 0 -4px 0 var(--red); }
.pick-fig:disabled { opacity: 0.3; }
.home-step .tape-input { max-width: 360px; }
.home-go { display: flex; gap: 16px; flex-wrap: wrap; }
.go-box { display: flex; align-items: center; gap: 12px; flex: 1 1 300px; justify-content: center; }
.go-box.join span { font-weight: 500; }

/* ---------- scenes ---------- */
.scene {
  position: fixed; inset: 0; overflow: hidden;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  grid-template-areas: "bar" "sign" "stage" "panel";
  background: #3b2a1a;
}
.backdrop {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover; object-position: center 70%; pointer-events: none;
  transition: opacity 1.6s ease, filter 1.6s ease;
}
.backdrop.night { opacity: 0; }
.is-night .backdrop.night { opacity: 1; }
.ghost .backdrop { filter: saturate(0.35) brightness(0.9); }
.topbar {
  grid-area: bar; z-index: 3; position: relative;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 12px; background: linear-gradient(rgba(20, 12, 4, 0.55), transparent);
}
.tb-title { font-size: 1.7rem; color: var(--paper); text-shadow: 0 2px 2px #000a; }
.tb-right { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.code-chip { font-weight: 700; letter-spacing: 1px; }

/* the narrator's sign hangs from two strings */
.sign {
  grid-area: sign; z-index: 3; justify-self: center; position: relative;
  display: flex; align-items: center; gap: 14px;
  margin-top: 18px; padding: 10px 22px 10px 16px; max-width: min(760px, 94vw);
  background: var(--paper); rotate: -0.8deg; box-shadow: var(--shadow);
  clip-path: polygon(0 4%, 3% 0, 98% 2%, 100% 92%, 96% 100%, 1% 97%);
}
.sign::before, .sign::after { content: none; }
.sign.pop { animation: swing 0.7s ease-out; }
@keyframes swing { 0% { rotate: 4deg; translate: 0 -10px; } 45% { rotate: -3deg; } 75% { rotate: 1deg; } 100% { rotate: -0.8deg; } }
.sign-title { font-size: clamp(1.6rem, 4.2vw, 2.5rem); line-height: 1.05; }
.sign-line { color: var(--ink-soft); font-size: 0.98rem; margin-top: 2px; }
.clock {
  flex: none; width: 58px; height: 58px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--marker); font-size: 1.5rem; line-height: 1;
  background: radial-gradient(circle at 35% 30%, var(--board-hi), var(--board) 70%);
  box-shadow: inset 0 0 0 3px var(--edge);
}
.clock.hurry { background: radial-gradient(circle at 35% 30%, #e07a6c, var(--red) 70%); color: #fff; animation: pulse 1s infinite; }
@keyframes pulse { 50% { scale: 1.08; } }

/* ---------- figures ---------- */
.floor {
  grid-area: stage; z-index: 2; position: relative;
  display: flex; align-items: flex-end; justify-content: center; flex-wrap: nowrap;
  gap: 0; padding: 0 10px 6px;
  perspective: 900px;
  --fh-n: min(var(--fh), calc(94vw / max(var(--n, 1), 4) * 1.75));
}
.fig {
  --d: max(calc(var(--i) - (var(--n) - 1) / 2), calc((var(--n) - 1) / 2 - var(--i)));
  position: relative; border: 0; background: none; padding: 0 2px;
  display: flex; flex-direction: column; align-items: center;
  margin-inline: calc(var(--fh-n) * 0.015);
  translate: 0 calc(var(--d) * var(--d) * -1.4px);
  z-index: calc(20 - var(--d));
  transition: filter 0.4s, opacity 0.4s;
}
.fig-body { position: relative; transform-origin: 50% 100%; animation: sway 3.4s ease-in-out infinite; animation-delay: calc(var(--sway) * -1); transition: transform 0.9s cubic-bezier(0.6, -0.2, 0.7, 1.1); }
.fig-img { height: var(--fh-n); width: auto; display: block; filter: drop-shadow(3px 5px 0 rgba(20, 12, 4, 0.35)); }
@keyframes sway { 0%, 100% { rotate: -1.4deg; } 50% { rotate: 1.4deg; } }
.fig.speaking .fig-body { animation: talk 0.28s ease-in-out infinite alternate; }
@keyframes talk { from { translate: 0 0; rotate: -1deg; } to { translate: 0 calc(-3px - var(--lvl, 0.5) * 6px); rotate: 1.5deg; } }
.fig-waves { position: absolute; top: 4%; inset-inline-end: -14%; display: flex; flex-direction: column; gap: 3px; opacity: 0; transition: opacity 0.15s; }
.fig-waves i { display: block; width: 16px; height: 4px; background: var(--ink); border-radius: 1px; rotate: -20deg; }
.fig-waves i:nth-child(2) { width: 22px; rotate: 0deg; }
.fig-waves i:nth-child(3) { rotate: 20deg; }
.fig.speaking .fig-waves { opacity: 0.85; }
.fig-name {
  position: absolute; bottom: -12px; left: 50%; translate: -50% 0; z-index: 2;
  font-family: var(--marker); font-size: clamp(0.95rem, calc(var(--fh-n) * 0.09), 1.3rem); line-height: 1;
  background: var(--tape); padding: 4px 10px 3px; white-space: nowrap; max-width: 140%;
  box-shadow: inset 0 -3px 0 var(--c, transparent), 0 1px 2px rgba(0, 0, 0, 0.25);
  clip-path: polygon(1% 4%, 99% 0, 100% 52%, 98% 100%, 0 96%, 1.5% 50%);
}
.fig.me .fig-name { font-weight: 700; }
.fig-badge {
  position: absolute; top: -4px; z-index: 3; font-size: 0.75rem; font-weight: 700;
  background: var(--paper); padding: 2px 6px; box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3); rotate: 3deg;
}
.fig-votes {
  position: absolute; top: -18px; z-index: 4; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; font-family: var(--marker); font-size: 1.6rem;
  background: var(--red); color: #fff; box-shadow: var(--shadow); animation: drop 0.2s;
}
.fig-mark { position: absolute; bottom: -38px; left: 50%; translate: -50% 0; z-index: 2; font-family: var(--marker); color: var(--red); font-size: 1.05rem; text-shadow: 0 0 4px var(--paper), 0 0 2px var(--paper); white-space: nowrap; }
.fig-role { position: absolute; bottom: 8%; inset-inline-start: -10%; width: 34%; rotate: -8deg; filter: drop-shadow(1px 2px 0 rgba(0, 0, 0, 0.35)); }
.fig.selectable { cursor: pointer; }
.fig.selectable:hover .fig-img { filter: drop-shadow(3px 5px 0 rgba(20, 12, 4, 0.35)) brightness(1.08); }
.fig.selectable:hover .fig-body { translate: 0 -6px; }
.fig.selected::after {
  content: ""; position: absolute; bottom: -10px; left: 50%; translate: -50% 0; width: 110%; height: 26px; z-index: -1;
  border: 3px dashed var(--red); border-radius: 50%;
}
.fig.dim { filter: brightness(0.5) saturate(0.6); }
.fig.lit .fig-img { filter: drop-shadow(0 0 14px rgba(255, 236, 170, 0.9)) drop-shadow(3px 5px 0 rgba(20, 12, 4, 0.35)); }
.fig.away { opacity: 0.55; }
.fig.dead .fig-body { transform: rotateX(64deg); animation: none; }
.fig.dead { filter: grayscale(0.85) brightness(0.85); }
.fig.dead::before { content: "✕"; position: absolute; bottom: 24%; left: 50%; translate: -50% 0; z-index: 3; font: 400 calc(var(--fh-n) * 0.32)/1 var(--marker); color: var(--red); }
.fig.dead .fig-name { text-decoration: line-through 2px; }
.is-night .fig:not(.lit) { filter: brightness(0.55) saturate(0.7) hue-rotate(-10deg); }
.is-night .fig.dead { filter: grayscale(0.9) brightness(0.45); }

/* ---------- panel + role card ---------- */
.panel {
  grid-area: panel; z-index: 4; justify-self: center;
  width: min(620px, calc(100vw - 24px)); margin: 4px 0 12px;
  display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center;
  padding: 14px 16px 12px;
}
.panel:empty { display: none; }
.panel-text { margin: 0; font-size: 1.05rem; font-weight: 500; }
.small { margin: 0; font-size: 0.85rem; color: var(--ink-soft); }
.row2 { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.role-card {
  position: fixed; bottom: 14px; inset-inline-start: 14px; z-index: 5;
  width: clamp(78px, 10vw, 120px); border: 0; background: none; padding: 0; rotate: 5deg;
  transition: rotate 0.3s, translate 0.3s;
}
.role-card img { width: 100%; display: block; filter: drop-shadow(3px 4px 0 rgba(0, 0, 0, 0.35)); }
.rc-name { position: absolute; bottom: -6px; left: 50%; translate: -50% 0; background: var(--tape); padding: 2px 10px; font-size: 1.15rem; white-space: nowrap; }
.rc-hint { position: absolute; top: -20px; left: 50%; translate: -50% 0; font-size: 0.75rem; white-space: nowrap; color: var(--paper); text-shadow: 0 1px 2px #000; }
.role-card.hidden-card { translate: -60% 60%; rotate: -10deg; }
.role-card.hidden-card .rc-name { visibility: hidden; }

/* ---------- role reveal / round result ---------- */
.reveal { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; background: rgba(10, 6, 2, 0.55); }
.reveal-card {
  width: min(360px, 88vw); text-align: center; padding: 22px 22px 18px;
  background: var(--paper); box-shadow: var(--shadow);
  clip-path: polygon(0 3%, 4% 0, 97% 2%, 100% 95%, 95% 100%, 2% 98%);
}
.reveal.in .reveal-card { animation: flip 0.8s cubic-bezier(0.3, 1.4, 0.5, 1); }
@keyframes flip { from { transform: perspective(600px) rotateY(160deg) scale(0.6); opacity: 0; } }
.reveal-card img { width: 46%; rotate: -4deg; filter: drop-shadow(2px 3px 0 rgba(0, 0, 0, 0.3)); }
.marker.big { font-size: 2.3rem; line-height: 1.1; margin: 8px 0 4px; }
.reveal-card p { margin: 6px 0 0; }

/* ---------- lobby ---------- */
.scene.lobby {
  position: relative; inset: auto; min-height: 100vh; overflow: visible;
  grid-template-columns: 1fr minmax(300px, 390px);
  grid-template-rows: auto auto 1fr;
  grid-template-areas: "bar bar" "hint side" "stage side";
}
.lobby .backdrop { position: fixed; }
.lobby .topbar { grid-area: bar; }
.lobby-hint { grid-area: hint; z-index: 2; justify-self: center; align-self: start; margin-top: 18px; font-weight: 500; font-size: 0.95rem; text-align: center; max-width: 90%; }
.lobby-floor { grid-area: stage; flex-wrap: wrap; row-gap: 26px; align-content: flex-end; padding-bottom: 30px; --fh-n: min(var(--fh), 200px); }
.lobby-floor .fig { translate: none; margin-inline: 2px; }
.lobby-side { grid-area: side; z-index: 3; margin: 26px 16px 20px 0; align-self: start; max-height: calc(100vh - 110px); overflow: auto; }
.howto { margin: 0 0 18px; padding-inline-start: 20px; display: flex; flex-direction: column; gap: 6px; font-size: 0.93rem; line-height: 1.4; }
.settings { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.set-row { display: flex; flex-direction: column; gap: 4px; }
.set-label { font-size: 0.88rem; font-weight: 700; }
.lobby-actions { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.count { font-size: 1.4rem; }
.waiting { margin: 0; font-weight: 500; }
.picker { position: fixed; z-index: 10; left: 50%; bottom: 24px; translate: -50% 0; width: min(820px, 94vw); }

/* ---------- spy ---------- */
.spot-dark { position: absolute; inset: 0; z-index: 1; background: radial-gradient(ellipse at 50% 85%, transparent 30%, rgba(5, 3, 1, 0.5)); opacity: 0; transition: opacity 0.6s; pointer-events: none; }
.spy[data-phase="ask"] .spot-dark, .spy[data-phase="spy_last"] .spot-dark { opacity: 1; }
.wall {
  grid-area: stage; z-index: 1; justify-self: center; align-self: start;
  margin-top: 0.5vh; width: clamp(120px, 17vw, 230px); text-align: center; rotate: -1.5deg;
  transition: width 0.6s cubic-bezier(0.3, 1.3, 0.5, 1), translate 0.6s;
}
.wall.big { width: clamp(240px, 46vw, 520px); z-index: 6; translate: 0 2vh; }
.wall-card { width: 100%; display: block; filter: drop-shadow(3px 5px 0 rgba(0, 0, 0, 0.35)); }
.wall-q {
  aspect-ratio: 4 / 3; display: grid; place-items: center; font-size: 7rem; line-height: 1;
  background: linear-gradient(var(--purple), #4d3370); color: #f3e7ff; box-shadow: var(--shadow);
  clip-path: polygon(0 3%, 4% 0, 97% 2%, 100% 95%, 95% 100%, 2% 98%);
}
.wall-name { display: inline-block; margin-top: -8px; position: relative; background: var(--tape); padding: 3px 14px 1px; font-size: 1.5rem; }
.stage-floor { padding-bottom: 2vh; }
.places-btn { position: fixed; bottom: 14px; inset-inline-end: 14px; z-index: 5; }
.qa-clock { position: fixed; top: 64px; inset-inline-end: 14px; z-index: 5; background: var(--paper); padding: 4px 10px; font-weight: 700; box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.3); }
.modal { position: fixed; inset: 0; z-index: 30; background: rgba(10, 6, 2, 0.6); display: grid; place-items: center; padding: 16px; }
.places-sheet { width: min(900px, 96vw); max-height: 92vh; overflow: auto; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.places-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; width: 100%; }
.place-tile { border: 0; background: none; padding: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; transition: translate 0.12s; }
.place-tile img { width: 100%; filter: drop-shadow(2px 3px 0 rgba(0, 0, 0, 0.3)); }
.place-tile span { font-family: var(--marker); font-size: 1.2rem; margin-top: -10px; position: relative; background: var(--tape); padding: 1px 8px; }
.place-tile:not(:disabled):hover { translate: 0 -4px; }
.place-tile:disabled { cursor: default; }
.scores { margin: 0; padding: 0; list-style: none; width: 100%; max-width: 320px; }
.scores li { display: flex; justify-content: space-between; padding: 4px 6px; border-bottom: 2px dashed rgba(80, 50, 20, 0.3); font-weight: 500; }
.scores li:first-child { font-size: 1.2rem; }

/* ---------- small screens ---------- */
@media (max-width: 760px) {
  :root { --fh: clamp(80px, 19vh, 170px); }
  .modes { grid-template-columns: 1fr; }
  .mode-card img { width: 70px; }
  .tb-title { font-size: 1.3rem; }
  .chip { font-size: 0.75rem; padding: 5px 7px; }
  .sign { margin-top: 10px; padding: 8px 12px; }
  .clock { width: 46px; height: 46px; font-size: 1.2rem; }
  .scene.lobby { grid-template-columns: 1fr; grid-template-areas: "bar" "hint" "stage" "side"; }
  .lobby-side { margin: 0 12px 20px; max-height: none; }
  .lobby-floor { min-height: 46vh; }
  .places-grid { grid-template-columns: repeat(2, 1fr); }
  .role-card { width: 64px; bottom: 10px; }
  .panel { margin-bottom: 70px; }
}

/* ---------- streamer: secret window ---------- */
.secret-page { background: #4a3420 url(../assets/art/table.webp) center / cover; min-height: 100vh; }
.secret { padding: 14px; display: flex; flex-direction: column; gap: 16px; max-width: 560px; margin: 0 auto; }
.secret-head { align-self: center; font-weight: 700; }
.secret .sheet { display: flex; flex-direction: column; gap: 14px; }
.secret-role { display: flex; gap: 14px; align-items: center; }
.secret-role img { width: 96px; rotate: -4deg; }
.secret-role p { margin: 4px 0 0; }
.secret-box { background: rgba(241, 229, 202, 0.55); padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.secret-box ul { margin: 0; padding-inline-start: 18px; }
.secret-list { display: flex; flex-wrap: wrap; gap: 8px; }
.secret-place { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.secret-place img { width: 100%; }
.places-grid.small-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
.small-grid .place-tile span { font-size: 0.95rem; }
.streamer-note { position: fixed; bottom: 14px; inset-inline-start: 14px; z-index: 5; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }

.stream-toggle { align-self: center; width: auto !important; font-size: 0.95rem; padding: 8px 14px; }

/* streamer mode: the secret window is not open yet */
.secret-prompt {
  position: fixed; z-index: 40; left: 50%; top: 50%; translate: -50% -50%;
  width: min(440px, 92vw); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px;
  animation: drop 0.3s ease-out;
}
.secret-prompt p { margin: 0; font-weight: 500; line-height: 1.4; }
.sp-title { font-size: 2rem; }
button.wall-q { border: 0; width: 100%; cursor: pointer; font-family: var(--marker); }

/* ---------- figures stand ON the backdrop's floor ----------
   The backdrop is an object-fit: cover image (1920x1086, object-position y 70%). --H is its rendered height, so a
   fraction of the picture (--feet: where the floor's front row is, --figk: figure height) maps to the screen. */
.scene { --H: max(100vh, calc(100vw * 0.5656)); --oy: 0.7; --feet: 0.865; --figk: 0.3; }
.scene.spy, .lobby[data-mode="spy"] { --feet: 0.8; --figk: 0.29; }
@media (min-width: 761px) {
  .scene .floor {
    position: absolute; left: 0; right: 0; padding: 0 12px;
    bottom: calc(100vh - (100vh - var(--H)) * var(--oy) - var(--H) * var(--feet));
    --fh: calc(var(--H) * var(--figk));
  }
  .spy .wall:not(.big) {
    position: absolute; left: 50%; translate: -50% 0; margin: 0;
    top: calc((100vh - var(--H)) * var(--oy) + var(--H) * 0.33); width: calc(var(--H) * 0.21);
  }
  .scene.lobby { position: fixed; inset: 0; min-height: 0; overflow: hidden; }
  .lobby-side { max-height: calc(100vh - 90px); }
  .scene.lobby .lobby-floor {
    flex-wrap: nowrap; padding-inline-end: 420px; align-content: normal;
    --fh-n: min(var(--fh), calc((94vw - 420px) / max(var(--n, 1), 4) * 1.75));
  }
  .scene.lobby .lobby-floor .fig { translate: 0 calc(var(--d) * var(--d) * -1.4px); margin-inline: calc(var(--fh-n) * 0.015); }
}

/* lobby invite card */
.invite { grid-area: hint; z-index: 3; justify-self: center; align-self: start; margin-top: 22px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 22px 12px; max-width: 92vw; }
.invite-title { font-size: 1.9rem; line-height: 1; }
.invite-code { display: flex; gap: 6px; direction: ltr; }
.invite-code span { width: 46px; height: 54px; display: grid; place-items: center; font-family: var(--marker); font-size: 2.2rem;
  background: var(--paper); box-shadow: inset 0 -3px 0 rgba(80, 50, 20, 0.25), 2px 2px 0 rgba(30, 18, 6, 0.3); rotate: -2deg; }
.invite-code span:nth-child(2n) { rotate: 2deg; }
.invite .row2 { gap: 8px; }

/* who asks, who answers */
.fig-tag {
  position: absolute; top: -54px; z-index: 6; padding: 4px 14px 2px; font-size: 1.6rem; line-height: 1;
  background: #f2c94c; box-shadow: var(--shadow); rotate: -4deg; white-space: nowrap;
  clip-path: polygon(0 6%, 5% 0, 96% 3%, 100% 92%, 94% 100%, 3% 96%);
  animation: tagbob 1.4s ease-in-out infinite;
}
.fig-tag[data-kind="answer"] { background: #8fc3ea; rotate: 4deg; }
.fig-tag[data-kind="accused"] { background: #e88a7c; }
@keyframes tagbob { 50% { translate: 0 -5px; } }
.qa-arrow { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.qa-path { fill: none; stroke: #2a1c10; stroke-width: 5; stroke-linecap: round; stroke-dasharray: 2 12; animation: march 0.8s linear infinite; }
@keyframes march { to { stroke-dashoffset: -28; } }
.turn-steps { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; font-size: 0.85rem; }
.turn-steps li { display: flex; align-items: center; gap: 6px; padding: 4px 10px 4px 8px; background: rgba(241, 229, 202, 0.5); opacity: 0.7; }
.turn-steps li b { width: 20px; height: 20px; display: grid; place-items: center; background: var(--ink); color: var(--paper); font-size: 0.75rem; }
.turn-steps li.now { opacity: 1; background: var(--paper); box-shadow: inset 0 -3px 0 #f2c94c; font-weight: 700; }
.panel.my-turn { box-shadow: inset 0 0 0 4px var(--red), var(--shadow); animation: nudge 1.6s ease-in-out infinite; }
@keyframes nudge { 50% { translate: 0 -3px; } }

/* ---------- mic status, speaking, speech bubbles ---------- */
.fig-mic { position: absolute; bottom: 10%; inset-inline-end: -6%; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: #4f8f5c; box-shadow: 1px 2px 0 rgba(0, 0, 0, 0.35); z-index: 3; }
.fig-mic svg, .pl-mic svg { width: 16px; height: 16px; fill: #fff; stroke: #fff; }
.fig-mic .slash, .pl-mic .slash { display: none; }
.fig-mic:not([data-s="ok"]) .slash, .pl-mic:not([data-s="ok"]) .slash { display: block; }
.fig-mic[data-s="muted"], .pl-mic[data-s="muted"] { background: #c99a2e; }
.fig-mic[data-s="blocked"], .fig-mic[data-s="hmuted"], .pl-mic[data-s="blocked"], .pl-mic[data-s="hmuted"] { background: var(--red); }
.fig-mic[data-s="pending"], .pl-mic[data-s="pending"] { background: #8a7a66; }
.fig.speaking .fig-mic { animation: pulse 0.5s infinite; background: #e8b923; }
.fig-glow { position: absolute; bottom: -8px; left: 50%; translate: -50% 0; width: 120%; height: 30px; border-radius: 50%; z-index: -1;
  background: radial-gradient(ellipse, rgba(255, 214, 90, 0.9), transparent 70%); opacity: 0; transition: opacity 0.12s; }
.fig.speaking .fig-glow { opacity: calc(0.5 + var(--lvl, 0.5) * 0.5); }
.fig.speaking .fig-img { filter: drop-shadow(0 0 10px rgba(255, 220, 120, 0.85)) drop-shadow(3px 5px 0 rgba(20, 12, 4, 0.35)); }
.fig-say { position: absolute; top: -70px; z-index: 7; max-width: 200px; padding: 6px 10px; background: #fffaf0; font-size: 0.9rem; font-weight: 500;
  box-shadow: var(--shadow); border-radius: 3px; opacity: 0; translate: 0 8px; transition: opacity 0.2s, translate 0.2s; pointer-events: none; }
.fig-say::after { content: ""; position: absolute; bottom: -9px; inset-inline-start: 20px; border: 5px solid transparent; border-top: 6px solid #fffaf0; }
.fig-say.on { opacity: 1; translate: 0 0; }

/* ---------- chat ---------- */
.chat { position: fixed; z-index: 8; bottom: 14px; inset-inline-end: 14px; width: min(320px, 80vw); display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.chat.in-lobby { inset-inline-end: auto; inset-inline-start: 14px; align-items: flex-start; }
.chat-body { display: none; width: 100%; background: rgba(241, 229, 202, 0.95); box-shadow: var(--shadow); padding: 8px; }
.chat.open .chat-body { display: block; }
.chat-log { max-height: 30vh; overflow-y: auto; display: flex; flex-direction: column; gap: 3px; margin-bottom: 6px; font-size: 0.9rem; scrollbar-width: thin; }
.chat-line.secret b { color: var(--red) !important; }
.chat-line.ghost { opacity: 0.7; font-style: italic; }
.chat-form { display: flex; gap: 6px; }
.chat-input { flex: 1; min-width: 0; border: 0; padding: 6px 8px; background: #fff; box-shadow: inset 0 0 0 1.5px rgba(80, 50, 20, 0.3); border-radius: 2px; }
.chat-unread:not(:empty) { margin-inline-start: 6px; background: var(--red); color: #fff; padding: 0 6px; }
.chat-toggle { font-size: 0.95rem; }

/* ---------- players list (host tools) ---------- */
.players-list { display: flex; flex-direction: column; gap: 4px; margin-bottom: 16px; }
.pl-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 4px 6px; background: rgba(241, 229, 202, 0.45); }
.pl-row img { height: 34px; }
.pl-name { font-weight: 700; font-size: 0.9rem; }
.pl-state { font-size: 0.75rem; color: var(--ink-soft); margin-inline-end: auto; }
.pl-mic { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: #4f8f5c; }
.pl-row.pending { background: #f3dfa4; }
.chip.danger { color: var(--red); }
.chip.alert { background: #f3dfa4; animation: pulse 1s infinite; }
.players-sheet { width: min(560px, 94vw); max-height: 90vh; overflow: auto; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.players-sheet .players-list { width: 100%; }
.pending-box { margin-top: 12vh; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; }

/* ---------- spy clue modes ---------- */
.clue { display: flex; flex-direction: column; align-items: center; }
.zoom-box { width: 100%; aspect-ratio: 4 / 3; background-size: 520%; background-repeat: no-repeat; box-shadow: var(--shadow), inset 0 0 0 4px var(--board-lo);
  clip-path: polygon(0 3%, 4% 0, 97% 2%, 100% 95%, 95% 100%, 2% 98%); }
.clue-sound .wall-q { font-size: 6rem; }
.chip.replay { margin-top: 6px; }
.secret-place .clue { width: 100%; }

/* ---------- home: three steps ---------- */
.home { gap: 18px; padding-top: 18px; }
.home-sign h1 { font-size: clamp(2.6rem, 7vw, 4.4rem); }
.step-tabs { display: flex; justify-content: center; gap: 8px; width: auto !important; }
.step-tab {
  display: flex; align-items: center; gap: 8px; border: 0; padding: 6px 14px 6px 10px;
  background: rgba(241, 229, 202, 0.75); box-shadow: 2px 2px 0 rgba(30, 18, 6, 0.3); font-weight: 700; rotate: -1deg;
  transition: translate 0.15s, background 0.15s;
}
.step-tab:nth-child(2) { rotate: 1deg; }
.step-tab b { width: 24px; height: 24px; display: grid; place-items: center; background: var(--ink); color: var(--paper); font-size: 0.85rem; }
.step-tab.on { background: var(--paper); box-shadow: inset 0 -4px 0 var(--red), 3px 3px 0 rgba(30, 18, 6, 0.35); translate: 0 -3px; }
.step-tab.done b { background: var(--green); }
.step-tab:disabled { opacity: 0.45; }
.steps { width: min(940px, 100%); }
.step { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.step.in { animation: stepIn 0.4s cubic-bezier(0.3, 1.2, 0.5, 1); }
.step.in.back { animation-name: stepBack; }
@keyframes stepIn { from { opacity: 0; translate: -50px 0; } }
@keyframes stepBack { from { opacity: 0; translate: 50px 0; } }
.step-q { margin: 0; font-size: clamp(2rem, 5vw, 2.8rem); background: var(--tape); padding: 6px 22px 2px; rotate: -1.5deg;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.25); clip-path: polygon(1% 4%, 99% 0, 100% 52%, 98% 100%, 0 96%, 1.5% 50%); }

.mode-row { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; width: 100%; }
.mode-box {
  position: relative; border: 0; padding: 22px 18px 18px; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
  background: repeating-linear-gradient(90deg, rgba(60, 35, 10, 0.045) 0 2px, transparent 2px 9px), radial-gradient(120% 90% at 20% 10%, var(--board-hi), var(--board) 55%, var(--board-lo));
  border-radius: 3px 7px 4px 6px / 6px 3px 7px 4px; box-shadow: inset 0 0 0 2px rgba(80, 50, 20, 0.18), var(--shadow);
  transition: translate 0.2s cubic-bezier(0.3, 1.5, 0.5, 1), rotate 0.2s, box-shadow 0.2s;
}
.mode-box:nth-child(1) { rotate: -1.2deg; }
.mode-box:nth-child(2) { rotate: 1.2deg; }
.mode-box:hover { translate: 0 -8px; rotate: 0deg; box-shadow: inset 0 0 0 2px rgba(80, 50, 20, 0.18), 6px 10px 0 rgba(30, 18, 6, 0.3); }
.mode-box:active { translate: 0 -2px; }
.mode-art { width: min(46%, 190px); rotate: -5deg; filter: drop-shadow(3px 5px 0 rgba(30, 18, 6, 0.3)); transition: rotate 0.3s cubic-bezier(0.3, 1.6, 0.5, 1), scale 0.3s; }
.mode-box:hover .mode-art { rotate: 4deg; scale: 1.06; }
.mode-box strong { font-size: 3rem; line-height: 1; }
.mode-blurb { font-weight: 500; max-width: 300px; }
.mode-box small { color: var(--ink-soft); font-weight: 700; }
.mode-box.on { box-shadow: inset 0 0 0 4px var(--ink), var(--shadow); }

.carousel { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; width: 100%; outline: none; }
.car-stage {
  position: relative; height: clamp(230px, 44vh, 400px); overflow: hidden; touch-action: pan-y;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
}
.car-base { position: absolute; bottom: 4px; left: 50%; translate: -50% 0; width: 46%; height: 36px; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(30, 18, 6, 0.45), transparent 70%); }
.car-item {
  position: absolute; bottom: 14px; left: 50%; height: 92%; border: 0; background: none; padding: 0;
  transform-origin: 50% 100%;
  transform: translateX(calc(-50% + var(--d) * -64%)) scale(calc(1 - var(--a) * 0.3));
  opacity: calc(1 - var(--a) * 0.32); filter: brightness(calc(1 - var(--a) * 0.12));
  z-index: calc(10 - var(--a));
  transition: transform 0.4s cubic-bezier(0.3, 1.25, 0.5, 1), opacity 0.3s, filter 0.3s;
}
.car-item.far { opacity: 0; pointer-events: none; }
.car-item img { height: 100%; display: block; filter: drop-shadow(3px 5px 0 rgba(30, 18, 6, 0.35)); }
.car-item.center img { animation: sway 3.4s ease-in-out infinite; transform-origin: 50% 100%; }
.car-item.center img.pop { animation: popIn 0.45s cubic-bezier(0.3, 1.6, 0.5, 1), sway 3.4s ease-in-out 0.45s infinite; }
@keyframes popIn { from { scale: 0.82; translate: 0 10px; } }
.car-item:not(.center):hover { filter: brightness(1.05); }
.car-taken { display: none; position: absolute; top: 30%; left: 50%; translate: -50% 0; background: var(--red); color: #fff; padding: 2px 10px; font-weight: 700; rotate: -8deg; }
.car-item.taken img { filter: grayscale(1) brightness(0.8); }
.car-item.taken .car-taken { display: block; }
.car-arrow {
  width: 58px; height: 58px; border: 0; font-family: var(--marker); font-size: 3rem; line-height: 1; padding-bottom: 6px;
  background: linear-gradient(var(--board-hi), var(--board)); border-radius: 4px; box-shadow: inset 0 0 0 2px rgba(80, 50, 20, 0.25), var(--shadow);
  transition: translate 0.1s, rotate 0.2s;
}
.car-arrow:hover { rotate: -6deg; }
.car-arrow:active { translate: 2px 3px; }
.name-row { width: 100%; display: flex; justify-content: center; }
.name-tape {
  width: min(380px, 86%); text-align: center; font-size: 2.1rem; padding: 8px 16px 4px; border: 0; outline: none;
  background: var(--tape); box-shadow: 0 2px 3px rgba(0, 0, 0, 0.25); rotate: -1deg;
  clip-path: polygon(1% 4%, 99% 0, 100% 52%, 98% 100%, 0 96%, 1.5% 50%);
}
.name-tape:focus { box-shadow: inset 0 -4px 0 var(--red); }

.summary { display: flex; align-items: flex-end; justify-content: center; gap: 18px; }
.summary-mode { width: 92px; rotate: -8deg; filter: drop-shadow(3px 4px 0 rgba(0, 0, 0, 0.3)); }
.summary-me { display: flex; flex-direction: column; align-items: center; }
.summary-fig { height: 170px; filter: drop-shadow(3px 5px 0 rgba(30, 18, 6, 0.35)); animation: sway 3.4s ease-in-out infinite; transform-origin: 50% 100%; }
.summary-name { margin-top: -10px; background: var(--tape); padding: 4px 14px 1px; font-size: 1.5rem; position: relative; }
.doors { display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: center; width: 100%; }
.doors:has(> :only-child) { grid-template-columns: minmax(0, 420px); justify-content: center; }
.door { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; min-height: 200px; justify-content: center; }
.door-title { font-size: 1.8rem; line-height: 1.1; }
.or { font-size: 2rem; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: var(--paper); box-shadow: var(--shadow); }
.code-row { display: flex; gap: 8px; }
.code-tile {
  width: 54px; height: 64px; text-align: center; font-size: 2.4rem; border: 0; outline: none; text-transform: uppercase;
  background: var(--paper); box-shadow: inset 0 -4px 0 rgba(80, 50, 20, 0.25), 2px 3px 0 rgba(30, 18, 6, 0.3); rotate: -2deg; caret-color: var(--red);
}
.code-tile:nth-child(2n) { rotate: 2deg; }
.code-tile:focus { box-shadow: inset 0 -4px 0 var(--red), 2px 3px 0 rgba(30, 18, 6, 0.3); translate: 0 -3px; }

@media (max-width: 760px) {
  .mode-row { grid-template-columns: 1fr; }
  .mode-box { flex-direction: row; text-align: start; }
  .mode-art { width: 90px; }
  .mode-box strong { font-size: 2.2rem; }
  .doors { grid-template-columns: 1fr; }
  .car-arrow { width: 44px; height: 44px; font-size: 2.2rem; }
}

.invite-code span, .code-tile { font-family: var(--body); font-weight: 700; font-size: 1.9rem; }

/* room for everyone: each figure gets a slot wide enough for its name tag */
.floor { --fh-n: min(var(--fh), calc(94vw / max(var(--n, 1), 4) * 1.15)); gap: 0; }
.fig { min-width: calc(var(--fh-n) * 0.74); margin-inline: calc(var(--fh-n) * 0.05) !important; }
.fig-name { max-width: calc(var(--fh-n) * 0.82); overflow: hidden; text-overflow: ellipsis; font-size: clamp(0.85rem, calc(var(--fh-n) * 0.075), 1.2rem); }
@media (min-width: 761px) {
  .scene.lobby .lobby-floor { --fh-n: min(var(--fh), calc((94vw - 420px) / max(var(--n, 1), 4) * 1.15)); }
}
.lobby-floor { row-gap: 40px; }

/* ---------- illustrated rule book ---------- */
.mode-col { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.mode-col .mode-box { width: 100%; }
.rules-btn { font-size: 0.95rem; padding: 7px 14px; }
.lobby-side .rules-btn { margin: -8px 0 18px; }
.rb-overlay { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 14px; background: rgba(12, 7, 2, 0.6); animation: fadeIn 0.25s; }
.rb-overlay.out { animation: fadeOut 0.3s forwards; }
@keyframes fadeIn { from { opacity: 0; } }
@keyframes fadeOut { to { opacity: 0; } }
.rb-book { width: min(860px, 100%); max-height: 94vh; overflow: auto; display: flex; flex-direction: column; align-items: center; gap: 10px;
  transform-origin: 50% 100%; animation: unfold 0.6s cubic-bezier(0.3, 1.3, 0.5, 1); }
@keyframes unfold { from { transform: perspective(900px) rotateX(70deg) scale(0.7); opacity: 0; } }
.rb-head { font-size: 1.9rem; }
.rb-close { position: absolute; top: 12px; inset-inline-end: 12px; }
.rb-body { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; width: 100%; }
.rb-page { background: var(--paper); padding: 16px; display: flex; flex-direction: column; align-items: center; gap: 8px; min-height: 420px; text-align: center;
  box-shadow: inset 0 0 0 2px rgba(80, 50, 20, 0.15), 3px 4px 0 rgba(30, 18, 6, 0.25); transform-origin: 100% 50%; touch-action: pan-y; }
.rb-page.turn { animation: pageTurn 0.5s cubic-bezier(0.3, 1.1, 0.5, 1); }
.rb-page.turn-back { animation: pageBack 0.5s cubic-bezier(0.3, 1.1, 0.5, 1); transform-origin: 0 50%; }
@keyframes pageTurn { from { transform: perspective(1200px) rotateY(-75deg); opacity: 0.2; } }
@keyframes pageBack { from { transform: perspective(1200px) rotateY(75deg); opacity: 0.2; } }
.rb-title { margin: 4px 0 0; font-size: 2rem; line-height: 1.1; }
.rb-text { margin: 0; max-width: 560px; font-size: 1.05rem; font-weight: 500; line-height: 1.45; }
.rb-art { width: 100%; height: 250px; display: grid; place-items: center; }
.rb-dots { display: flex; gap: 6px; }
.rb-dots button { width: 14px; height: 14px; border: 0; background: rgba(80, 50, 20, 0.3); rotate: 45deg; }
.rb-dots button.on { background: var(--red); }
.rb-scene { position: relative; width: 100%; height: 100%; overflow: hidden; box-shadow: 2px 3px 0 rgba(0, 0, 0, 0.25); }
.rb-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 70%; }
.rb-row { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center; gap: 16px; padding-bottom: 14px; }
.rb-fig { position: relative; display: flex; flex-direction: column; align-items: center; animation: popUp 0.5s cubic-bezier(0.3, 1.6, 0.5, 1) backwards; animation-delay: calc(0.15s + var(--k) * 0.12s); }
.rb-fig img { height: 170px; filter: drop-shadow(2px 4px 0 rgba(0, 0, 0, 0.35)); }
.rb-fig.dark img { filter: brightness(0.45); }
.rb-fig.dim img { filter: brightness(0.55) saturate(0.6); }
.rb-fig.lit img { filter: drop-shadow(0 0 12px rgba(255, 230, 150, 0.9)); }
.rb-fig.fallen img { transform: perspective(500px) rotateX(64deg); transform-origin: 50% 100%; filter: grayscale(0.8); }
.rb-tag { position: absolute; top: -34px; background: #f2c94c; padding: 2px 10px; font-size: 1.2rem; rotate: -4deg; box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.3); z-index: 2; }
.rb-tag[data-kind="answer"] { background: #8fc3ea; rotate: 4deg; }
.rb-tag[data-kind="accused"] { background: #e88a7c; }
.rb-votes { position: absolute; top: -14px; z-index: 2; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--red); color: #fff; font-size: 1.4rem; }
.rb-arrow { align-self: center; font-family: var(--marker); font-size: 2.6rem; color: var(--paper); text-shadow: 0 2px 2px #000; animation: march2 0.9s infinite; }
@keyframes march2 { 50% { translate: -8px 0; } }
.rb-fan { display: flex; justify-content: center; align-items: flex-end; gap: 14px; flex-wrap: wrap; }
.rb-card, .rb-place { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 130px; animation: dealIn 0.55s cubic-bezier(0.3, 1.5, 0.5, 1) backwards;
  animation-delay: calc(0.1s + var(--k) * 0.12s); rotate: calc((var(--k) - 1.5) * 4deg); }
.rb-card img { width: 100%; filter: drop-shadow(2px 4px 0 rgba(0, 0, 0, 0.3)); }
.rb-card b, .rb-place b { font-size: 1.4rem; line-height: 1; }
.rb-card small { font-size: 0.78rem; color: var(--ink-soft); }
.rb-place { width: 170px; }
.rb-place img { width: 100%; }
.rb-sound > div { width: 100%; aspect-ratio: 4 / 3; display: grid; place-items: center; font-size: 4rem; background: linear-gradient(var(--purple), #4d3370); color: #fff; }
.rb-zoom { width: 100%; aspect-ratio: 4 / 3; background-size: 480%; background-position: 30% 40%; box-shadow: inset 0 0 0 3px var(--board-lo); }
.rb-card.minus { justify-content: center; height: 180px; background: #f0c9b8; box-shadow: 2px 3px 0 rgba(0, 0, 0, 0.3); }
.rb-big { font-size: 4rem; color: var(--red); }
.rb-grid { display: grid; grid-template-columns: repeat(3, 120px); gap: 10px; }
.rb-mini { animation: dealIn 0.4s backwards; animation-delay: calc(var(--k) * 0.08s); }
.rb-mini img { width: 100%; }
.rb-mini.pick { animation: dealIn 0.4s backwards, pickPulse 1.2s 0.8s infinite; animation-delay: calc(var(--k) * 0.08s), 0.8s; }
@keyframes pickPulse { 50% { scale: 1.12; filter: drop-shadow(0 0 10px #f2c94c); } }
@keyframes popUp { from { opacity: 0; translate: 0 40px; scale: 0.8; } }
@keyframes dealIn { from { opacity: 0; translate: 0 -60px; rotate: 20deg; } }
@media (max-width: 760px) {
  .rb-art { height: 190px; }
  .rb-fig img { height: 110px; }
  .rb-card { width: 80px; }
  .rb-place { width: 110px; }
  .rb-grid { grid-template-columns: repeat(3, 80px); }
  .rb-page { min-height: 360px; }
  .rb-body .car-arrow { width: 36px; height: 36px; font-size: 1.8rem; }
}

/* the arrow glyphs must not be mirrored by RTL text: the right button points right (back), the left one left (next) */
.car-arrow, .rb-arrow { direction: ltr; unicode-bidi: isolate; }

/* rule book: the picture lives in a fixed frame; cards are sized by height so nothing runs into the title */
.rb-page { display: grid; grid-template-rows: auto auto 1fr; justify-items: center; min-height: 0; }
.rb-art { height: 270px; padding-top: 34px; overflow: hidden; }
.rb-art > * { max-height: 100%; }
.rb-fan { height: 100%; align-items: center; flex-wrap: nowrap; }
.rb-card { width: auto; max-width: 150px; }
.rb-card img { height: 165px; width: auto; }
.rb-place { width: auto; }
.rb-place img, .rb-place > div, .rb-zoom { width: 190px; height: 142px; aspect-ratio: auto; object-fit: cover; }
.rb-card b, .rb-place b { margin-top: 4px; font-size: 1.25rem; background: var(--tape); padding: 1px 8px; }
.rb-card small { max-width: 130px; line-height: 1.2; }
.rb-card.minus { height: 165px; width: 120px; }
.rb-scene { height: 100%; }
.rb-fig img { height: 160px; }
.rb-grid { grid-template-columns: repeat(3, 110px); gap: 8px; }
.rb-title { margin: 12px 0 2px; font-size: 1.9rem; }
@media (max-width: 760px) {
  .rb-art { height: 210px; padding-top: 30px; }
  .rb-card img { height: 115px; }
  .rb-place img, .rb-place > div, .rb-zoom { width: 120px; height: 90px; }
  .rb-fig img { height: 110px; }
  .rb-grid { grid-template-columns: repeat(3, 76px); }
  .rb-fan { gap: 8px; flex-wrap: wrap; }
}

@media (max-width: 760px) {
  .rb-fan { flex-wrap: nowrap; gap: 6px; }
  .rb-place img, .rb-place > div, .rb-zoom { width: 74px; height: 56px; }
  .rb-place b, .rb-card b { font-size: 0.95rem; }
  .rb-card img { height: 100px; }
  .rb-sound > div { font-size: 2rem; }
}

/* streamer mode on the home page */
.home-sign .stream-toggle { display: inline-block; margin-top: 10px; }
.code-tile.masked { -webkit-text-security: disc; text-security: disc; }