/* The community block under SEND IT, drawn as a console in the hero's own materials (design notes
   round one, note 2). Left: the poll and the billboard on a CRT over a deck that carries the
   OFFICE MORALE gauge, the claim plate and the HECKLE and CHEER rounds. Right: THE BREAK ROOM on
   the Break Room TV (its screen is the log), over the same deck. CORNER OFFICE wears the LIVE BUYS
   panel's frame (note 19). Every frame, plate and round is cut from the approved art
   (runtime/quit/community-art, sources.json); the glass behind each frame is drawn here so it is
   one even CRT glass at any size. One frame pixel (--qc-px) is the hero monitor's own scale
   (frames.css .q-hero --hero-s1), so the bezels are as thick as the stage's.
   This sheet loads after frames.css and overrides its .q-community layout rules. */

.q-community,
.q-hero__room,
.q-hero__aside {
  --qc-glass: #08100d;
  --qc-green: #25dc71;
  --qc-green-line: #1c6b3f;
  --qc-green-dim: #12502d;
  --qc-orange: #ff610b;
  --qc-cream: #f4e7cb;
  --qc-muted: #a9c2ae;
  --qc-ink: #120802;
  --qc-focus: #ffe36b;
  --qc-deck-h: calc(250 * var(--qc-px));
  --qc-screen:
    radial-gradient(130% 100% at 50% 40%, transparent 58%, rgb(0 0 0 / .55) 100%),
    repeating-linear-gradient(to bottom, rgb(255 255 255 / .028) 0 1px, transparent 1px 3px),
    radial-gradient(90% 70% at 50% 0%, rgb(37 220 113 / .07), transparent 70%),
    var(--qc-glass);
}

/* ---------------------------------------------------------------- the block */
.q-community {
  --qc-px: min(calc(70vh / 1060), calc((100vh - var(--t-header-desktop, 72px)) / 1376), calc((100vw - 300px) / 1890));
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  align-items: stretch;
  gap: calc(30 * var(--qc-px));
  max-width: none;
  margin: 0;
  min-height: clamp(470px, 60vh, 648px);
  height: auto;
  padding: calc(22 * var(--qc-px)) calc(30 * var(--qc-px)) calc(28 * var(--qc-px));
  background: #030805;
  color: var(--qc-cream);
}
.q-community[hidden] { display: none; }
/* While THE BREAK ROOM sits in the hero column (community.js placeBreakRoom, before the first buy) WHAT HAPPENS NEXT
   has the block to itself. */
.q-community[data-room-up] { grid-template-columns: minmax(0, 1fr); }
.q-community[data-room-up] > .q-community__room { display: none; }
/* Until the page is ready the block keeps its place (main.js mounts it before it sets
   data-quit-ready), so the lobby below never jumps when it appears; a block that never
   mounts gives the space back. Desktop only: the phone's height follows its content. */
:root:not([data-quit-ready]) .q-community[hidden] { display: block; visibility: hidden; }
:is(.q-community, .q-hero__room) *,
:is(.q-community, .q-hero__room) *::before,
:is(.q-community, .q-hero__room) *::after { box-sizing: border-box; }
.q-community__panel,
.q-community__room { display: flex; min-width: 0; min-height: 0; }
.q-community__room { contain: size; }
.q-community__panel > .c-community,
.q-community__room > .c-breakroom { flex: 1 1 auto; min-width: 0; }

/* ------------------------------------------------- shared parts: glass, tags, plates */
.q-community .c-tag,
.q-hero__room .c-tag,
.q-hero__aside .c-tag {
  position: static;
  display: inline-flex;
  align-items: center;
  padding: 4px 6px 3px;
  border: 2px solid #020504;
  border-radius: 2px;
  background: var(--qc-green);
  box-shadow: 2px 2px 0 #020504;
  color: #04140a;
  font: 700 12px/1 var(--t-font-display);
  letter-spacing: .02em;
  white-space: nowrap;
  transform: none;
}

/* The orange plate: the BUY $QUIT plate's ends and face, label on the face above its lip.
   (:where keeps these at the arcade skin's weight, so each plate's own size below applies.) */
:is(.q-community, .q-hero__room) .c-btn:where(.c-claim__cta, .c-breakroom__tools *, .c-breakroom__form *) {
  --qc-plate-h: 48px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: calc(var(--qc-plate-h) * 2.2);
  min-height: var(--qc-plate-h);
  height: auto;
  margin: 0;
  padding: 2px 4px calc(var(--qc-plate-h) * .2);
  border-style: solid;
  border-color: transparent;
  border-width: 0 calc(var(--qc-plate-h) * 74 / 206) 0 calc(var(--qc-plate-h) * 64 / 206);
  border-image: url("community-art/plate.webp") 0 74 0 64 fill / 0 calc(var(--qc-plate-h) * 74 / 206) 0 calc(var(--qc-plate-h) * 64 / 206) stretch;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--qc-ink);
  font: 700 16px/1.1 var(--t-font-display);
  letter-spacing: -.01em;
  text-align: center;
  text-shadow: none;
  -webkit-text-stroke: 0;
  white-space: normal;
  filter: none;
  opacity: 1;
  cursor: pointer;
  transition: transform .12s ease-out, filter .12s ease-out;
}
:is(.q-community, .q-hero__room) .c-btn:where(.c-claim__cta, .c-breakroom__tools *, .c-breakroom__form *):hover:not([aria-disabled="true"]):not([aria-busy="true"]) {
  transform: translateY(-2px);
  filter: brightness(1.1);
  box-shadow: none;
}
:is(.q-community, .q-hero__room) .c-btn:where(.c-claim__cta, .c-breakroom__tools *, .c-breakroom__form *):active:not([aria-disabled="true"]):not([aria-busy="true"]) {
  transform: translateY(2px);
  filter: brightness(.94);
  box-shadow: none;
}
/* Locked until launch: the plate keeps its colour and says so (design notes, notes 2 and 3). */
:is(.q-community, .q-hero__room) .c-btn:where(.c-claim__cta, .c-breakroom__tools *, .c-breakroom__form *)[aria-disabled="true"] {
  cursor: not-allowed;
  filter: none;
  opacity: 1;
  box-shadow: none;
}
.q-community .c-community[data-mode="demo"] .c-claim__cta[aria-disabled="true"]::after,
:is(.q-community, .q-hero__room) .c-breakroom[data-mode="demo"] .c-breakroom__tools .c-btn[aria-disabled="true"]::after {
  content: "AT LAUNCH";
  position: absolute;
  top: -17px;
  right: 12px;
  z-index: 1;
  padding: 3px 5px 2px;
  border: 2px solid #020504;
  border-radius: 2px;
  background: var(--qc-green);
  box-shadow: 2px 2px 0 #020504;
  color: #04140a;
  font: 700 12px/1 var(--t-font-display);
  letter-spacing: .02em;
  white-space: nowrap;
  animation: none;
}
:is(.q-community, .q-hero__room) .c-btn:focus-visible {
  outline: 3px solid var(--qc-focus);
  outline-offset: 3px;
}
/* The shared skin (CommunityStyle.js, injected after this sheet) sets small screens' buttons to
   2.75em; a plate keeps its own height. */
.q-community .q-community__panel .c-btn:where(.c-claim__cta),
:is(.q-community .q-community__room, .q-hero__room) .c-btn:where(.c-breakroom__tools *, .c-breakroom__form *) { min-height: var(--qc-plate-h); }
.q-community .c-billboard__head .c-tag { font-size: 12px; }

/* ------------------------------------------------------------- the left console */
.q-community .c-community[data-layout="console"] {
  position: relative;
  display: grid;
  grid-template-rows: minmax(min-content, 1fr) auto;
  gap: 0;
  min-height: 0;
  color: var(--qc-cream);
  font: 400 20px/1.15 var(--t-font-body);
}
.q-community .c-community[data-state="unknown"] { opacity: 1; }

/* The CRT: the hero monitor's bezel; the glass is drawn behind its window. */
.q-community .c-community__screen {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
  min-height: 0;
  /* Never hide anything under the deck: a screen that runs out of room scrolls. */
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--qc-green-line) transparent;
  padding: 8px 16px 10px;
  border-style: solid;
  border-color: transparent;
  border-width: calc(54 * var(--qc-px)) calc(52 * var(--qc-px));
  border-image: url("community-art/crt.webp") 134 / calc(134 * var(--qc-px)) stretch;
  border-radius: calc(10 * var(--qc-px));
  background: var(--qc-screen);
}
/* The WARM-UP state: one green tag on the bezel (placed from the console, so the screen's
   scrolling never clips it). */
.q-community .c-community__screen > .c-community__demo {
  position: absolute;
  top: calc(54 * var(--qc-px) / 2 - 11px);
  left: calc(52 * var(--qc-px) + 14px);
  z-index: 2;
}

/* The poll: WHAT HAPPENS NEXT as three ballot rows, each with its share drawn inside. */
.q-community .c-poll {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "head result" "chips chips";
  align-items: baseline;
  column-gap: 14px;
  row-gap: clamp(8px, calc(16 * var(--qc-px)), 14px);
}
.q-community .c-poll__head { grid-area: head; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.q-community .c-poll__title,
:is(.q-community, .q-hero__room) .c-breakroom__title {
  margin: 0;
  color: var(--qc-orange);
  font: 700 26px/1 var(--t-font-display);
  letter-spacing: -.03em;
  text-shadow: 2px 2px 0 #020504;
}
.q-community .c-poll__time { color: var(--qc-green); font: 400 20px/1 var(--t-font-body); white-space: nowrap; }
.q-community .c-poll__chips { grid-area: chips; display: grid; gap: clamp(6px, calc(12 * var(--qc-px)), 10px); }
.q-community .c-poll__chips .c-btn {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: clamp(42px, calc(74 * var(--qc-px)), 54px);
  margin: 0;
  padding: 4px 14px 3px;
  overflow: hidden;
  isolation: isolate;
  border: 2px solid var(--qc-green-line);
  border-radius: 3px;
  background: #050c09;
  box-shadow: inset 0 0 0 1px #020504, 0 2px 0 #020504;
  color: var(--qc-cream);
  font: 400 20px/1.05 var(--t-font-body);
  letter-spacing: .02em;
  text-align: left;
  text-shadow: none;
  filter: none;
  opacity: 1;
  transform: none;
  transition: border-color .12s ease-out, background-color .12s ease-out;
}
.q-community .c-poll__chips .c-btn__label { min-width: 0; overflow-wrap: anywhere; }
.q-community .c-poll__votes { display: none; }
.q-community .c-poll__pct {
  display: block;
  color: var(--qc-green);
  font: 400 22px/1 var(--t-font-body);
  font-variant-numeric: tabular-nums;
  text-shadow: 1px 1px 0 #020504;
}
.q-community .c-poll__bar {
  display: block;
  position: absolute;
  z-index: -1;
  top: 3px;
  bottom: 3px;
  left: 3px;
  width: calc((100% - 6px) * var(--c-share, 0));
  background: linear-gradient(var(--qc-green-dim), #0e4326);
  box-shadow: inset 0 1px 0 #2a9d5c, inset -2px 0 0 #2a9d5c;
  transition: width .5s ease-out;
}
.q-community .c-poll__chips .c-btn:hover:not([aria-disabled="true"]):not([aria-busy="true"]) {
  border-color: var(--qc-green);
  background: #071510;
  box-shadow: inset 0 0 0 1px #020504, 0 2px 0 #020504;
  transform: none;
}
.q-community .c-poll__chips .c-btn:active:not([aria-disabled="true"]):not([aria-busy="true"]) { background: #0a1d14; transform: translateY(1px); }
.q-community .c-poll__chips .c-btn[aria-pressed="true"],
.q-community .c-poll__chips .c-btn[aria-pressed="true"]:hover:not([aria-disabled="true"]):not([aria-busy="true"]) { border-color: var(--qc-orange); --c-fill: transparent; }
.q-community .c-poll__chips .c-btn[aria-pressed="true"] .c-poll__pct { color: var(--qc-orange); }
.q-community .c-poll__chips .c-btn[aria-disabled="true"] { cursor: default; filter: none; opacity: 1; }
.q-community .c-poll__chips .c-btn[aria-disabled="true"]:not([aria-pressed="true"]):not([data-winner]) { border-color: #173f29; }
.q-community .c-poll__chips .c-btn[data-winner] { border-color: var(--qc-orange); --c-fill: transparent; --c-text: var(--qc-cream); }
.q-community .c-poll__chips .c-btn[data-winner] .c-poll__bar { background: linear-gradient(#7a3510, #5c2508); box-shadow: inset 0 1px 0 #ff8a3d; }
.q-community .c-poll__result { grid-area: result; max-width: 24ch; min-height: 0; color: var(--qc-green); font: 400 18px/1.05 var(--t-font-body); text-align: right; }
.q-community .c-poll__result:empty { display: none; }

/* The billboard: one marquee strip, then its rules line. */
.q-community .c-billboard {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 6px 12px;
}
.q-community .c-billboard__head { display: flex; align-items: center; gap: 8px; }
.q-community .c-billboard__title { color: var(--qc-orange); font: 700 18px/1 var(--t-font-display); letter-spacing: -.02em; text-shadow: 2px 2px 0 #020504; white-space: nowrap; }
/* The console's own WARM-UP tag already labels the billboard while the demo runs. */
.q-community .c-community[data-mode="demo"] .c-billboard__head .c-tag { display: none; }
.q-community .c-billboard__strip {
  container-type: inline-size;
  position: relative;
  min-width: 0;
  height: clamp(40px, calc(70 * var(--qc-px)), 50px);
  overflow: hidden;
  border: 2px solid var(--qc-green-line);
  border-radius: 3px;
  background: #030a06;
  box-shadow: inset 0 2px 6px #000, 0 2px 0 #020504;
}
.q-community .c-billboard__track {
  display: flex;
  width: max-content;
  height: 100%;
  animation: qc-marquee 26s linear infinite;
}
.q-community .c-billboard__strip:hover .c-billboard__track,
.q-community .c-billboard__strip:focus-within .c-billboard__track { animation-play-state: paused; }
.q-community .c-billboard__list {
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 0;
  min-width: 100cqw;
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}
.q-community .c-billboard__echo { display: flex; }
.q-community .c-billboard__entry {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 22px;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--qc-cream);
  font: 400 21px/1 var(--t-font-body);
  letter-spacing: .03em;
  white-space: nowrap;
}
.q-community .c-billboard__entry::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  margin-right: 8px;
  background: var(--qc-green);
  box-shadow: 0 0 6px rgb(37 220 113 / .7);
}
.q-community .c-billboard__who { color: var(--qc-cream); font-weight: 400; }
.q-community .c-billboard__slogan { color: var(--qc-orange); font-weight: 400; }
.q-community .c-billboard__entry[data-free] { color: var(--qc-muted); border: 0; }
.q-community .c-billboard__report {
  min-height: 26px;
  padding: 2px 8px;
  border: 2px solid var(--qc-green-line);
  border-radius: 2px;
  background: #050c09;
  box-shadow: none;
  color: var(--qc-green);
  font: 400 16px/1 var(--t-font-body);
}
.q-community .c-billboard :is(.c-claim__note, .c-billboard__rules) {
  grid-column: 1 / -1;
  grid-row: 2;
  margin: 0;
  color: var(--qc-muted);
  font: 400 16px/1.2 var(--t-font-body);
}
.q-community .c-billboard .c-claim__note:empty { display: none; }
.q-community .c-billboard .c-claim__note:not(:empty) { grid-column: 1; color: var(--qc-green); }
.q-community .c-billboard .c-claim__note:not(:empty) ~ .c-billboard__rules { grid-column: 2; }
@keyframes qc-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* The deck: the hero deck's steel and screws. */
.q-community .c-community__deck {
  border-style: solid;
  border-color: transparent;
  border-image: url("community-art/deck.webp") 66 76 72 76 fill / calc(66 * var(--qc-px)) calc(76 * var(--qc-px)) calc(72 * var(--qc-px)) round;
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  height: var(--qc-deck-h);
  margin-top: calc(-4 * var(--qc-px));
  padding: 0 4px;
  border-width: calc(40 * var(--qc-px)) calc(60 * var(--qc-px)) calc(44 * var(--qc-px));
}

/* OFFICE MORALE: a lit gauge in the deck's status window, the CHEER and HECKLE result under it. */
.q-community .c-community__gauge {
  flex: 1 1 0;
  max-width: calc(520 * var(--qc-px));
  display: grid;
  align-content: center;
  gap: 6px;
  min-width: 0;
  min-height: calc(176 * var(--qc-px));
  padding: 0 10px;
  border-style: solid;
  border-color: transparent;
  border-width: calc(32 * var(--qc-px)) calc(34 * var(--qc-px));
  border-image: url("community-art/glass.webp") 64 / calc(64 * var(--qc-px)) stretch;
  border-radius: calc(24 * var(--qc-px));
  background: var(--qc-screen);
}
.q-community .c-crowd {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "title" "bar";
  align-items: center;
  gap: 5px;
  color: var(--qc-green);
  font: 400 20px/1 var(--t-font-body);
}
.q-community .c-crowd__title { grid-area: title; white-space: nowrap; letter-spacing: .03em; }
/* AFTERBURNER: while the crowd boils over the word takes the title's place and the lamps turn orange. */
.q-community .c-crowd__surge { grid-area: title; color: var(--qc-orange); font: 400 20px/1 var(--t-font-body); letter-spacing: .08em; }
.q-community .c-crowd__surge:empty { display: none; }
.q-community .c-crowd[data-surge="true"] .c-crowd__title { display: none; }
.q-community .c-crowd__bar {
  grid-area: bar;
  position: relative;
  height: 18px;
  overflow: hidden;
  border: 2px solid #020504;
  border-radius: 2px;
  background: #06180d;
  box-shadow: inset 0 0 0 1px #0f3a22;
}
.q-community .c-crowd__fill {
  display: block;
  height: 100%;
  width: calc(var(--c-level, 0) * 100%);
  background: linear-gradient(#5cf59d, #1fb35d 60%, #168a47);
  box-shadow: 0 0 8px rgb(37 220 113 / .6);
  transition: width .4s ease-out;
}
.q-community .c-crowd[data-surge="true"] .c-crowd__fill { background: linear-gradient(#ffb070, var(--qc-orange) 60%, #c44608); }
/* Twelve lamps: the gaps are drawn over the lit fill. */
.q-community .c-crowd__bar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg, transparent 0 calc(100% / 12 - 3px), #020504 calc(100% / 12 - 3px) calc(100% / 12));
  pointer-events: none;
}
.q-community .c-community__status { min-height: 1em; color: var(--qc-green); font: 400 18px/1 var(--t-font-body); letter-spacing: .02em; }

.q-community .c-claim__cta { --qc-plate-h: 74px; flex: none; }
.q-community .c-claim__cta .c-btn__label { max-width: 10.6em; }
.q-community .c-community__rounds { flex: none; display: flex; align-items: center; gap: 10px; }

/* HECKLE and CHEER: the stage's red and green rounds, the word set on the dome. */
.q-community .c-community__rounds .c-btn[data-engage] {
  --qc-round: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--qc-round);
  height: calc(var(--qc-round) * 242 / 246);
  min-height: 0;
  margin: 0;
  padding: 0 0 calc(var(--qc-round) * .22);
  border: 0;
  border-radius: 50%;
  background: url("community-art/cheer.webp") center / 100% 100% no-repeat;
  box-shadow: none;
  color: #03140a;
  font: 400 17px/1 QuitPixel, var(--t-font-display);
  letter-spacing: 0;
  text-shadow: 0 1px 0 rgb(255 255 255 / .3);
  -webkit-text-stroke: 0;
  filter: none;
  transition: transform .12s ease-out, filter .12s ease-out;
}
.q-community .c-community__rounds .c-btn[data-engage="heckle"] { background-image: url("community-art/heckle.webp"); color: #200403; }
.q-community .c-community__rounds .c-btn[data-engage]:hover { transform: translateY(-2px); filter: brightness(1.12); box-shadow: none; }
.q-community .c-community__rounds .c-btn[data-engage]:active { transform: translateY(3px); filter: brightness(.94); box-shadow: none; }
.q-community .c-community__rounds .c-btn[data-engage]:focus-visible { outline: 3px solid var(--qc-focus); outline-offset: 0; }

/* -------------------------------------------- CORNER OFFICE in the LIVE BUYS panel's frame */
/* THE BREAK ROOM in the hero column before the first buy (community.js placeBreakRoom) is drawn at the column's scale. */
.q-hero__aside, .q-hero__room { --qc-px: var(--hero-s2, .375px); }
.q-hero__aside .c-king,
.q-community .c-king {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "title title title" "crown name meta" "crown sol meta";
  align-items: center;
  gap: 3px 10px;
  width: 100%;
  margin: 0;
  padding: 6px 12px 8px;
  border-style: solid;
  border-color: transparent;
  border-width: calc(32 * var(--qc-px)) calc(28 * var(--qc-px));
  border-image: url("community-art/panel.webp") 60 / calc(60 * var(--qc-px)) stretch;
  border-radius: calc(16 * var(--qc-px));
  background: var(--qc-screen);
  box-shadow: none;
  color: var(--qc-cream);
  font: 400 20px/1.1 var(--t-font-body);
  text-align: left;
}
.q-hero__aside .c-king__title,
.q-community .c-king__title {
  grid-area: title;
  margin: 0 0 4px;
  padding-bottom: 6px;
  border-bottom: 2px solid #26332b;
  color: var(--qc-orange);
  font: 700 21px/1 var(--t-font-display);
  letter-spacing: -.03em;
  text-shadow: 2px 2px 0 #020504;
}
.q-hero__aside .c-king__crown,
.q-community .c-king__crown { grid-area: crown; grid-row: 2 / span 2; width: 38px; height: 38px; object-fit: contain; image-rendering: pixelated; }
.q-hero__aside .c-king__name,
.q-community .c-king__name { grid-area: name; min-width: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; color: var(--qc-cream); font: 400 21px/1 var(--t-font-body); letter-spacing: .02em; overflow-wrap: normal; word-break: normal; }
.q-hero__aside .c-king__sol,
.q-community .c-king__sol { grid-area: sol; color: var(--qc-green); font: 400 21px/1 var(--t-font-body); text-align: left; }
.q-hero__aside .c-king__meta,
.q-community .c-king__meta { grid-area: meta; grid-row: 2 / span 2; display: grid; justify-items: end; gap: 5px; color: var(--qc-cream); font: 400 17px/1 var(--t-font-body); white-space: nowrap; }
.q-hero__aside .c-king[data-state="empty"] .c-king__name,
.q-hero__aside .c-king[data-state="unknown"] .c-king__name,
.q-community .c-king[data-state="empty"] .c-king__name,
.q-community .c-king[data-state="unknown"] .c-king__name { grid-column: 2 / 4; font-size: 18px; color: var(--qc-muted); }
/* The card's WARM-UP tag in the body face, like the LIVE BUYS rows' labels, so the name keeps its line. */
.q-hero__aside .c-king__meta .c-tag,
.q-community .c-king__meta .c-tag { padding: 3px 6px 2px; font: 400 18px/1 var(--t-font-body); letter-spacing: .04em; }
.q-hero__aside .c-king__stamp,
.q-community .c-king__stamp { position: absolute; right: 10px; bottom: 6px; background: transparent; color: var(--qc-orange); border: 3px double var(--qc-orange); box-shadow: none; transform: rotate(-5deg); }
.q-community .c-community__screen > .c-king { flex: none; width: auto; margin: 0 -4px; }
/* On the desktop the card heads the screen as one LIVE BUYS row when the page gives it no
   place of its own (the hero's aside normally holds it). */
@media (min-width: 768px) and (min-aspect-ratio: 3/4), (min-width: 1200px) {
  .q-community .c-community__screen > .c-king {
    grid-template-columns: auto auto minmax(0, 1fr) auto auto;
    grid-template-areas: "crown title name sol meta";
    gap: 0 12px;
    padding: 2px 10px;
  }
  .q-community .c-community__screen > .c-king .c-king__title { margin: 0; padding: 0; border: 0; font-size: 18px; }
  .q-community .c-community__screen > .c-king .c-king__crown { grid-row: auto; width: 30px; height: 30px; }
  .q-community .c-community__screen > .c-king .c-king__meta { grid-row: auto; display: flex; align-items: center; gap: 10px; }
  .q-community .c-community__screen:has(> .c-king) { gap: 6px; }
  .q-community .c-community__screen:has(> .c-king) .c-poll { row-gap: 8px; }
  .q-community .c-community__screen:has(> .c-king) .c-poll__chips { gap: 5px; }
  .q-community .c-community__screen:has(> .c-king) .c-poll__chips .c-btn { min-height: 38px; }
}

/* ---------------------------------------------------------- THE BREAK ROOM: the TV */
:is(.q-community, .q-hero__room) .c-breakroom {
  --qc-tv-side: calc(72 * var(--qc-px) + 12px);
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: var(--qc-tv-side) minmax(0, 1fr) var(--qc-tv-side);
  grid-template-rows:
    [tv-top] calc(55 * var(--qc-px) + 10px)
    [title] auto
    [log] minmax(0, 1fr)
    [empty] auto
    [status] auto
    [form] auto
    [slot] calc(120 * var(--qc-px))
    [deck] minmax(var(--qc-deck-h), auto);
  gap: 0;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--qc-cream);
  font: 400 20px/1.2 var(--t-font-body);
}
/* The set: the Break Room TV's case, screen ring and control slot; its glass drawn behind. */
:is(.q-community, .q-hero__room) .c-breakroom::before {
  content: "";
  grid-column: 1 / -1;
  grid-row: tv-top / deck;
  z-index: -1;
  border-style: solid;
  border-color: transparent;
  border-width: calc(130 * var(--qc-px)) calc(150 * var(--qc-px)) calc(184 * var(--qc-px));
  border-image: url("community-art/tv.webp") 130 150 184 / calc(130 * var(--qc-px)) calc(150 * var(--qc-px)) calc(184 * var(--qc-px)) stretch;
  border-radius: calc(26 * var(--qc-px));
  background: var(--qc-screen);
}
:is(.q-community, .q-hero__room) .c-breakroom > * { grid-column: 2; min-width: 0; }
:is(.q-community, .q-hero__room) .c-breakroom__title { grid-row: title; position: relative; z-index: 1; padding: 4px 6px 8px; }
/* Older lines fade out under the title as the log scrolls (drawn over the log, so its focus ring stays whole). */
:is(.q-community, .q-hero__room) .c-breakroom__title::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 30px;
  background: linear-gradient(var(--qc-glass) 20%, rgb(8 16 13 / 0));
  pointer-events: none;
}
:is(.q-community, .q-hero__room) .c-breakroom__log {
  grid-row: log;
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: 0;
  max-height: none;
  margin: 0;
  padding: 0 8px 0 6px;
  overflow: auto;
  overscroll-behavior: contain;
  list-style: none;
  scrollbar-width: thin;
  scrollbar-color: var(--qc-green-line) transparent;
}
:is(.q-community, .q-hero__room) .c-breakroom__log:focus-visible { outline: 3px solid var(--qc-focus); outline-offset: 2px; }
:is(.q-community, .q-hero__room) .c-breakroom__message {
  position: relative;
  flex-shrink: 0;
  padding: 9px 4px 9px 0;
  border: 0;
  border-bottom: 1px solid rgb(37 220 113 / .3);
  overflow-wrap: anywhere;
}
:is(.q-community, .q-hero__room) .c-breakroom__message:has(.c-breakroom__portrait) { min-height: 64px; padding-left: 58px; }
:is(.q-community, .q-hero__room) .c-breakroom__who { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 16px; }
:is(.q-community, .q-hero__room) .c-breakroom__who strong { color: var(--qc-orange); font: 700 15px/1.1 var(--t-font-display); letter-spacing: -.02em; }
/* A speaker's name never splits a word (the shared skin breaks a message anywhere): where its longest word does not fit
   the line it shrinks until it does (community.js sets --name-word; Silkscreen Bold at this tracking is under .8 em a
   letter), which happens only where the set is narrow (the hero column before the first buy, small phones). */
:is(.q-community, .q-hero__room) .c-breakroom__who { container-type: inline-size; }
:is(.q-community, .q-hero__room) .c-breakroom__who strong { font-size: min(15px, calc(100cqw / (var(--name-word, 17) * .8))); overflow-wrap: normal; }
:is(.q-community, .q-hero__room) .c-breakroom__portrait {
  position: absolute;
  left: 0;
  top: 9px;
  width: 46px;
  height: 46px;
  border: 2px solid #2f3b33;
  border-radius: 2px;
  background: #0c1611;
  object-fit: cover;
  image-rendering: pixelated;
}
:is(.q-community, .q-hero__room) .c-breakroom__rank { color: var(--qc-cream); font: 700 12px/1.2 var(--t-font-display); }
:is(.q-community, .q-hero__room) .c-breakroom__x { color: var(--qc-muted); }
:is(.q-community, .q-hero__room) .c-breakroom__text { margin: 3px 0 0; color: var(--qc-green); font: 400 20px/1.15 var(--t-font-body); letter-spacing: .02em; white-space: pre-wrap; }
:is(.q-community, .q-hero__room) .c-breakroom__meme { border: 2px solid #2f3b33; }
:is(.q-community, .q-hero__room) .c-breakroom__report {
  min-height: 28px;
  margin-top: 6px;
  padding: 2px 8px;
  border: 2px solid var(--qc-green-line);
  border-radius: 2px;
  background: #050c09;
  box-shadow: none;
  color: var(--qc-green);
  font: 400 16px/1 var(--t-font-body);
}
:is(.q-community, .q-hero__room) .c-breakroom__empty { grid-row: empty; margin: 0; padding: 4px 6px; color: var(--qc-muted); font-size: 18px; }
:is(.q-community, .q-hero__room) .c-breakroom__controls { display: contents; }
:is(.q-community, .q-hero__room) .c-breakroom__status { grid-row: status; grid-column: 2; margin: 0; padding: 4px 6px 0; min-height: 0; color: var(--qc-green); font: 400 18px/1.15 var(--t-font-body); }
:is(.q-community, .q-hero__room) .c-breakroom__status:empty { display: none; }
:is(.q-community, .q-hero__room) .c-breakroom__status[data-tone="refused"] { color: #ff9b6a; }
:is(.q-community, .q-hero__room) .c-breakroom__form {
  grid-row: form;
  grid-column: 2;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 3px 10px;
  margin: 0;
  padding: 8px 4px 2px;
  border-top: 1px solid rgb(37 220 113 / .3);
}
/* The field's label stays for assistive technology; the field shows it as its prompt. */
:is(.q-community, .q-hero__room) .c-breakroom__form label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
:is(.q-community, .q-hero__room) .c-breakroom__form textarea {
  grid-column: 1;
  grid-row: 1;
  height: 46px;
  min-height: 46px;
  max-height: 46px;
  resize: none;
  padding: 10px 8px 6px;
  border: 2px solid var(--qc-green-line);
  border-radius: 3px;
  background: #030a06;
  color: var(--qc-cream);
  font: 400 20px/1.1 var(--t-font-body);
}
:is(.q-community, .q-hero__room) .c-breakroom__form .c-btn { --qc-plate-h: 46px; grid-column: 2; grid-row: 1; }
:is(.q-community, .q-hero__room) .c-breakroom__count { grid-column: 1 / -1; grid-row: 2; justify-self: start; color: var(--qc-muted); font: 400 15px/1 var(--t-font-body); }
/* The control slot: the WARM-UP tag rides the set. */
:is(.q-community, .q-hero__room) .c-breakroom__stamp {
  grid-row: slot;
  align-self: start;
  justify-self: start;
  margin: calc(32 * var(--qc-px) + (67 * var(--qc-px) - 24px) / 2) 0 0 6px;
  padding: 5px 7px 4px;
  border: 2px solid #020504;
  border-radius: 2px;
  background: var(--qc-green);
  box-shadow: 2px 2px 0 #020504;
  color: #04140a;
  font: 700 12px/1 var(--t-font-display);
  letter-spacing: .02em;
  white-space: nowrap;
}
:is(.q-community, .q-hero__room) .c-breakroom__stamp[hidden] { display: none; }
/* QA8 F2 (owner: no word cut): on a narrow set the floor's WARM-UP tag takes two lines in the screen's column, its
   words whole, rather than running off the screen (the slot row holds two lines). */
.q-community .c-breakroom__stamp { max-width: calc(100% - 6px); white-space: normal; }
/* In the hero column the set is narrow: the WARM-UP tag takes two lines in its slot rather than leaving the set. */
.q-hero__room .c-breakroom { grid-template-rows: [tv-top] calc(55 * var(--qc-px) + 10px) [title] auto [log] minmax(0, 1fr) [empty] auto [status] auto [form] auto [slot] minmax(calc(120 * var(--qc-px)), auto) [deck] minmax(var(--qc-deck-h), auto); }
.q-hero__room .c-breakroom__stamp { max-width: 100%; margin-top: calc(32 * var(--qc-px)); margin-bottom: 4px; font-size: 11px; line-height: 1.15; white-space: normal; }
/* Its short form under CORNER OFFICE while the WARM-UP's rows fill LIVE BUYS (community.js placeBreakRoom): the title
   on one line, the newest lines, the WARM-UP tag on the set, no deck (before the mint its sign-in is only locked AT
   LAUNCH; after launch the room keeps its deck below once LIVE BUYS is open). */
/* The short form wears the column's panel frame (LIVE BUYS, CORNER OFFICE) instead of the TV's heavy bezel, so the
   newest lines get the room. */
.q-hero__room[data-short] .c-breakroom { --qc-tv-side: calc(28 * var(--qc-px) + 10px); grid-template-rows: [tv-top] calc(32 * var(--qc-px) + 4px) [title] auto [log] minmax(0, 1fr) [empty] auto [status] auto [form] auto [slot] auto [deck] 0; }
.q-hero__room[data-short] .c-breakroom::before { border-width: calc(32 * var(--qc-px)) calc(28 * var(--qc-px)); border-image: url("community-art/panel.webp") 60 / calc(60 * var(--qc-px)) stretch; border-radius: calc(16 * var(--qc-px)); }
.q-hero__room[data-short] .c-breakroom__title { padding-bottom: 6px; font-size: 17px; }
.q-hero__room[data-short] .c-breakroom__stamp { margin: 4px 0 calc(32 * var(--qc-px) + 6px); }
.q-hero__room[data-short] .c-breakroom__deck,
.q-hero__room[data-short] .c-breakroom::after { display: none; }
/* The deck under the set: sign in, then the room's rules. */
:is(.q-community, .q-hero__room) .c-breakroom::after {
  content: "";
  grid-column: 1 / -1;
  grid-row: deck;
  z-index: -1;
  margin-top: calc(-4 * var(--qc-px));
  border-style: solid;
  border-color: transparent;
  border-width: calc(66 * var(--qc-px)) calc(76 * var(--qc-px)) calc(72 * var(--qc-px));
  border-image: url("community-art/deck.webp") 66 76 72 76 fill / calc(66 * var(--qc-px)) calc(76 * var(--qc-px)) calc(72 * var(--qc-px)) round;
}
:is(.q-community, .q-hero__room) .c-breakroom__deck {
  grid-row: deck;
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  min-height: var(--qc-deck-h);
  padding: calc(40 * var(--qc-px) + 2px) calc(60 * var(--qc-px) + 4px) calc(44 * var(--qc-px) + 2px);
  border: 0;
  border-image: none;
}
:is(.q-community, .q-hero__room) .c-breakroom__tools { order: 1; display: flex; flex-wrap: wrap; gap: 10px; flex: none; }
:is(.q-community, .q-hero__room) .c-breakroom__tools .c-btn { --qc-plate-h: 52px; }
:is(.q-community, .q-hero__room) .c-breakroom__tools .c-btn:not(:first-child) { --qc-plate-h: 42px; font-size: 13px; }
/* SIGN OUT, YOUR CHAT HANDLE and POST A MEME are ghost buttons. The arcade skin's ghost rule outranks the orange plate
   above and kept only its outline, so the plate's dark ink sat on the dark deck at about 1:1 (measured 18 Oct). They take
   the room's readable ghost style, the REPORT button's: green text and edge on the deck's dark (about 10.8:1). */
:is(.q-community, .q-hero__room) .c-breakroom__tools .c-btn[data-variant="ghost"] {
  min-width: 0;
  padding: 2px 12px;
  border: 2px solid var(--qc-green);
  border-image: none;
  border-radius: 2px;
  background: #050c09;
  color: var(--qc-green);
}
:is(.q-community, .q-hero__room) .c-breakroom__rules { order: 2; flex: 1 1 14em; margin: 0; color: var(--qc-muted); font: 400 16px/1.2 var(--t-font-body); }
:is(.q-community, .q-hero__room) .c-breakroom__identity {
  grid-row: slot;
  grid-column: 2;
  align-self: start;
  justify-self: end;
  max-width: 100%;
  margin: calc(32 * var(--qc-px)) 12px 0 0;
  height: calc(67 * var(--qc-px));
  display: flex;
  align-items: center;
  overflow: hidden;
  color: var(--qc-green);
  font: 400 18px/1 var(--t-font-body);
  letter-spacing: .03em;
  white-space: nowrap;
  text-overflow: ellipsis;
}
:is(.q-community, .q-hero__room) .c-breakroom__identity:empty { display: none; }

/* -------------------------------------------------------------- motion */
/* Without motion the strip stands still and shows every entry, wrapping when it must. */
@media (prefers-reduced-motion: reduce) {
  .q-community .c-billboard__strip { height: auto; min-height: clamp(40px, calc(70 * var(--qc-px)), 50px); }
  .q-community .c-billboard__track { animation: none; width: auto; }
  .q-community .c-billboard__list { flex-wrap: wrap; min-width: 0; width: 100%; row-gap: 4px; padding: 5px 0; }
  .q-community .c-billboard__echo { display: none; }
}
:root[data-reduced-motion="true"] .q-community .c-billboard__strip { height: auto; min-height: clamp(40px, calc(70 * var(--qc-px)), 50px); }
:root[data-reduced-motion="true"] .q-community .c-billboard__track { animation: none; width: auto; }
:root[data-reduced-motion="true"] .q-community .c-billboard__list { flex-wrap: wrap; min-width: 0; width: 100%; row-gap: 4px; padding: 5px 0; }
:root[data-reduced-motion="true"] .q-community .c-billboard__echo { display: none; }

/* -------------------------------------------- phone and narrow tablets: the bezels stack */
@media (max-width: 767px), (max-width: 1199px) and (max-aspect-ratio: 3/4) {
  .q-community {
    --qc-px: .3px;
    --qc-deck-h: auto;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    height: auto;
    padding: 16px 10px 18px;
  }
  :root:not([data-quit-ready]) .q-community[hidden] { display: none; }
  .q-community .c-community__screen { gap: 12px; padding: 6px 10px 10px; }
  .q-community .c-community__screen > .c-community__demo { top: -8px; left: 22px; }
  .q-community .c-poll__title,
  :is(.q-community, .q-hero__room) .c-breakroom__title { font-size: 23px; letter-spacing: -.06em; }
  .q-community .c-poll__head { flex-wrap: wrap; }
  .q-community .c-poll__chips .c-btn { min-height: 46px; font-size: 19px; }
  .q-community .c-billboard { grid-template-columns: minmax(0, 1fr); }
  .q-community .c-billboard :is(.c-claim__note, .c-billboard__rules),
  .q-community .c-billboard .c-claim__note:not(:empty) ~ .c-billboard__rules { grid-row: auto; grid-column: 1; }
  .q-community .c-community__deck { flex-wrap: wrap; gap: 10px; height: auto; padding: 6px 2px; }
  /* Phone deck: the gauge beside the rounds, the claim plate across the deck under them. */
  .q-community .c-community__gauge { order: 1; flex: 1 1 0; max-width: none; min-height: 0; padding: 4px 10px; }
  .q-community .c-community__rounds { order: 2; gap: 4px; }
  .q-community .c-community__rounds .c-btn[data-engage] { --qc-round: 72px; font-size: 14px; }
  .q-community .c-claim__cta { --qc-plate-h: 56px; order: 3; flex: 1 1 100%; min-width: 0; font-size: 12px; }
  .q-community .c-claim__cta .c-btn__label { max-width: none; }
  :is(.q-community, .q-hero__room) .c-breakroom {
    grid-template-rows: [tv-top] calc(55 * var(--qc-px) + 10px) [title] auto [log] minmax(0, 1fr) [empty] auto [status] auto [form] auto [slot] calc(120 * var(--qc-px) + 8px) [deck] auto;
    height: min(760px, calc(100svh - var(--t-header-phone, 62px) - 32px));
  }
  :is(.q-community, .q-hero__room) .c-breakroom__stamp { margin-top: calc(32 * var(--qc-px) + 2px); }
  :is(.q-community, .q-hero__room) .c-breakroom__deck { min-height: 0; padding: calc(40 * var(--qc-px) + 8px) calc(60 * var(--qc-px) + 8px) calc(44 * var(--qc-px) + 8px); }
  :is(.q-community, .q-hero__room) .c-breakroom__tools { flex: 1 1 100%; gap: 8px; }
  :is(.q-community, .q-hero__room) .c-breakroom__tools .c-btn:first-child { flex: 1 1 100%; }
  :is(.q-community, .q-hero__room) .c-breakroom__tools .c-btn:not(:first-child) { --qc-plate-h: 40px; flex: 0 1 auto; font-size: 12px; }
  .q-community .c-king__title { font-size: 19px; }
  .q-community .c-billboard__track { animation-duration: 20s; }
}

/* ------------------------------- phone held sideways (short and wide): two bezels, compact */
@media (min-width: 768px) and (max-height: 500px) and (min-aspect-ratio: 4/3) {
  .q-community { --qc-deck-h: 104px; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); height: auto; gap: 12px; padding: 10px 12px 12px; }
  /* The TV takes the console's height rather than its whole log's. */
  .q-community__room { contain: size; }
  .q-community .c-poll__title,
  :is(.q-community, .q-hero__room) .c-breakroom__title { font-size: 20px; letter-spacing: -.05em; }
  .q-community .c-poll__chips .c-btn { min-height: 36px; font-size: 18px; }
  .q-community .c-billboard__title { font-size: 15px; }
  .q-community .c-billboard__strip { height: 36px; }
  .q-community .c-community__screen { padding: 6px 12px 8px; }
  .q-community .c-community__deck { gap: 8px; padding-top: 12px; }
  .q-community .c-community__gauge { min-width: 112px; padding: 0 6px; }
  .q-community .c-crowd { font-size: 17px; }
  .q-community .c-community__rounds { gap: 4px; }
  .q-community .c-community__rounds .c-btn[data-engage] { --qc-round: 62px; font-size: 12px; }
  .q-community .c-claim__cta { --qc-plate-h: 66px; flex: 0 1 auto; min-width: 0; font-size: 12px; }
  .q-community .c-claim__cta .c-btn__label { max-width: 9em; }
  :is(.q-community, .q-hero__room) .c-breakroom__deck { padding-top: 22px; }
  :is(.q-community, .q-hero__room) .c-breakroom__tools .c-btn { --qc-plate-h: 46px; font-size: 14px; }
  .q-community .c-community__screen > .c-community__demo { top: -6px; }
  :root:not([data-quit-ready]) .q-community[hidden] { display: none; }
}

/* The selected phone composition stacks the consoles even when held sideways.
   A size-contained TV contributed no row height and spilled into the lobby. */
html[data-device="phone"] .q-community__room { contain: none; }
html[data-device="phone"] :is(.q-community, .q-hero__room) .c-breakroom {
  height: clamp(540px, calc(100svh - var(--t-header-phone, 62px) - 32px), 760px);
}
/* A stationary billboard wraps all its entries, including in landscape. */
@media (prefers-reduced-motion: reduce) {
  .q-community .c-billboard__strip { height: auto; }
}
:root[data-reduced-motion="true"] .q-community .c-billboard__strip { height: auto; }

.q-community[data-community-state="unavailable"]{display:block;min-height:0;height:auto;padding:24px}.q-community[data-community-state="unavailable"] .q-community-soon{max-width:70ch;margin:0 auto}.q-community-soon__title{margin:0 0 12px}.q-community-soon__line{margin:0}