main.ds-grid {
  min-height: 100dvh;
  padding: 16px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/*
 * Lobby: the DS room-selection menu. ds.css has no menu component, so it is composed
 * from ds primitives at their native sizes — never stretched. Each room is a real
 * button-lg (button_lg.svg fills its 216px content box exactly, so no tiling seam);
 * the folder icon and signal sit outside the button, so the menu is sized to the
 * button rather than the button to the menu.
 */
/* The two DS screens stacked: PICTOCHAT banner on top, room chooser below. */
.device {
  width: fit-content;
  max-width: 100%;
  margin: 24px auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.top-screen {
  display: flex;
  align-items: flex-end;
  min-height: 150px;
  padding: 8px;
  border: 2px solid var(--color-ds-slate);
  background: repeating-linear-gradient(
    var(--color-ds-pictochat-bg),
    var(--color-ds-pictochat-bg) 6px,
    var(--color-ds-pictochat-border) 6px,
    var(--color-ds-pictochat-border) 8px
  );
}

.pictochat-banner {
  width: 100%;
  height: auto;
  image-rendering: pixelated;
}

.chooser {
  --room-height: 44px;
  --room-width: 320px;
  width: 468px;
  display: flex;
  flex-direction: column;
  background: var(--color-ds-pictochat-bg);
  border: 2px solid var(--color-ds-slate);
  color: var(--color-ds-button-default);
}

.chooser-header,
.chooser-footer {
  padding: 5px 10px;
  color: var(--color-ds-darkgrey);
  text-align: center;
}

.chooser-header {
  border-bottom: 2px solid var(--color-ds-slate);
}

.chooser-footer {
  display: flex;
  justify-content: space-evenly;
  padding: 10px 12px;
  border-top: 2px solid var(--color-ds-slate);
}

.chooser-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: black;
}

.btn-glyph {
  width: 18px;
  height: 18px;
  image-rendering: pixelated;
}

.chooser-rooms {
  margin: 0;
  padding: 14px 0;
  border: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
}

.room-radio {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* full-width row: icon attached to a custom button of the same height */
.room-slot {
  position: relative;
  display: flex;
  align-items: center;
  width: fit-content;
}

/*
 * Custom room button. ds.css buttons are fixed-width and cannot stretch, so this
 * reproduces the ds button_lg surface as a CSS gradient (colors sampled from the
 * rendered sprite) — horizontally uniform, so it tiles at any width and matches the
 * height of the letter icon. Border uses the same darkgrey the ds sprite does.
 */
.room-row {
  flex: none;
  width: var(--room-width);
  height: var(--room-height);
  min-width: 0;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  padding-inline: 8px;
  color: var(--color-ds-darkgrey);
  cursor: pointer;
  border: 2px solid var(--color-ds-darkgrey);
  background: linear-gradient(
    180deg,
    #fbfbfb 0,
    #fbfbfb 2px,
    #b2b2b2 2px,
    #b2b2b2 4px,
    #c3c3c3 6px,
    #e3e3e3 55%,
    #f3f3f3 calc(100% - 8px),
    #fbfbfb calc(100% - 5px),
    #f3f3f3 100%
  );
}

/* the letter icon sets the row height and attaches to the button's left edge */
.room-icon {
  flex: none;
  position: relative;
  z-index: 1;
  width: var(--room-height);
  height: var(--room-height);
  margin-right: -2px;
  image-rendering: pixelated;
}

.room-name {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.room-count {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  flex: none;
  min-width: 64px;
  height: 22px;
  padding-right: 6px;
  color: var(--color-ds-darkgrey);
  font-size: 15px;
  background: url("pictochat/room-participants.bda7c68ba332.png") no-repeat;
  background-size: 100% 100%;
  image-rendering: pixelated;
}

.room-signal {
  flex: none;
  width: 20px;
  height: 20px;
  image-rendering: pixelated;
}

/* four cyan corner brackets hugging the row (icon + button) when selected */
.room-slot::after {
  content: "";
  position: absolute;
  inset: -3px;
  pointer-events: none;
  opacity: 0;
  background:
    linear-gradient(var(--color-ds-turquoise) 0 0) left top,
    linear-gradient(var(--color-ds-turquoise) 0 0) left top,
    linear-gradient(var(--color-ds-turquoise) 0 0) right top,
    linear-gradient(var(--color-ds-turquoise) 0 0) right top,
    linear-gradient(var(--color-ds-turquoise) 0 0) left bottom,
    linear-gradient(var(--color-ds-turquoise) 0 0) left bottom,
    linear-gradient(var(--color-ds-turquoise) 0 0) right bottom,
    linear-gradient(var(--color-ds-turquoise) 0 0) right bottom;
  background-repeat: no-repeat;
  background-position:
    left top, left top, right top, right top,
    left bottom, left bottom, right bottom, right bottom;
  background-size:
    18px 4px, 4px 18px, 18px 4px, 4px 18px,
    18px 4px, 4px 18px, 18px 4px, 4px 18px;
}

.room-radio:checked + .room-slot::after {
  opacity: 1;
}

.room-radio:focus-visible + .room-slot {
  outline: 2px solid var(--color-ds-turquoise);
  outline-offset: 3px;
}

.hinge {
  width: 45%;
  height: 12px;
  margin: 6px auto;
  border-radius: 0 0 8px 8px;
  background: #101010;
}

/*
 * Room: both DS screens recreated from the ripped sprites at 2x device pixels
 * (DS screen 256x192 -> 512x384). Outlines stand in for the bezel so the 512px
 * content box stays exactly on the sprite grid.
 */

/* Top screen: scroll rail on the left, striped message feed on the right. */
.feed-screen {
  display: flex;
  width: 512px;
  height: 384px;
  outline: 2px solid var(--color-ds-slate);
}

.feed-rail {
  flex: none;
  width: 38px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding-block: 4px;
  background: url("pictochat/feed-rail.6f3fce0e4fa6.png");
  background-size: 100% 100%;
  image-rendering: pixelated;
}

.rail-icon {
  width: 32px;
  height: 32px;
  image-rendering: pixelated;
}

/*
 * The feed: message panels float directly on the striped screen surface (no
 * window chrome), full width minus a 4px margin. The stack anchors to the
 * bottom like the device — the banner scrolls up as messages arrive.
 */
#board {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-block: 4px;
  overflow-y: auto;
  scrollbar-width: none;
  background: repeating-linear-gradient(
    var(--color-ds-pictochat-bg),
    var(--color-ds-pictochat-bg) 6px,
    var(--color-ds-pictochat-border) 6px,
    var(--color-ds-pictochat-border) 8px
  );
}

#board > * {
  flex: none;
}

#board > :first-child {
  margin-top: auto;
}

#board > .pictochat-message,
#board > .pictochat-status {
  width: auto;
  margin-inline: 4px;
}

/* The nametag is a fixed one-line tab inside the message box, pinned top-left:
   it fills the whole left side of a single-line message and stays that height
   (never stretching) when the text wraps beneath it, as on the device. */
#board .pictochat-message {
  display: block;
}

/* Float it over the top/left borders to the box edge. Its height spans one text
   line plus the 8px top and bottom borders, so a single-line box is filled edge
   to edge; the -16px bottom margin keeps that overhang from growing the box, so
   taller messages leave the tab one line tall at the top. */
#board .pictochat-message > header {
  float: left;
  height: 42px;
  min-height: 0;
  translate: none;
  margin: -8px 8px -16px -12px;
  display: flex;
  align-items: center;
}

#board .pictochat-message > span {
  display: block;
  min-width: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.feed-banner {
  width: calc(100% - 8px);
  margin-inline: 4px;
  image-rendering: pixelated;
}

/* "Now entering [A]: name" — one space before the chip, colon flush after it. */
.status-letter {
  width: 18px;
  height: 18px;
  margin-left: 8px;
  image-rendering: pixelated;
}

.pictochat-status {
  display: flex;
  align-items: center;
  line-height: 28px;
}

.pictochat-enter-highlight .status-action {
  color: var(--color-ds-pictochat-enter);
}

.pictochat-exit-highlight .status-action {
  color: var(--color-ds-pictochat-exit);
}

/* Bottom screen: toolbar column, then top bar / name bar / canvas / keyboard. */
.compose {
  display: flex;
  width: 512px;
  outline: 2px solid var(--color-ds-slate);
}

.toolbar {
  flex: none;
  width: 42px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding-top: 4px;
  background: #fbfbfb;
  border-right: 2px dotted var(--color-ds-darkgrey);
}

.tool-button {
  width: auto;
  height: auto;
  min-width: 0;
  padding: 0;
  border: 0;
  clip-path: none;
  background: none;
  cursor: pointer;
}

.tool-button:active {
  background: none;
  filter: brightness(0.85);
}

.tool-button img,
.tool-icon {
  display: block;
  width: 28px;
  image-rendering: pixelated;
}

/* kb page toggles carry their resting/active sprite pair as custom props */
.tool-kb {
  width: 28px;
  height: 28px;
  background-image: var(--kb-icon);
  background-size: 100% 100%;
  image-rendering: pixelated;
}

.tool-kb[aria-pressed='true'] {
  background-image: var(--kb-icon-active);
}

.tool-gap {
  margin-top: 10px;
}

.tool-rule {
  width: 28px;
  margin: 6px 0;
  border: 0;
  border-top: 2px dotted var(--color-ds-darkgrey);
}

.compose-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding-bottom: 8px;
}

.compose-topbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 30px;
  padding-right: 2px;
  background: #fbfbfb;
  border-bottom: 2px solid var(--color-ds-darkgrey);
}

.compose-close img {
  display: block;
  width: 20px;
  height: 20px;
  image-rendering: pixelated;
}

/*
 * The nametag sits inside the canvas top-left; the textarea spans the whole
 * canvas with its first line indented past the tag, so wrapped lines run full
 * width under it. Line height matches the sprite ruling (rules every 32px,
 * first rule at y=36).
 */
.canvas {
  position: relative;
  width: 468px;
  height: 170px;
  margin-top: 8px;
  background: url("pictochat/canvas.50a265d3e6fb.png");
  background-size: 100% 100%;
  image-rendering: pixelated;
}

.name-tab {
  position: absolute;
  top: 4px;
  left: 10px;
  height: 32px;
  min-width: 132px;
  padding: 2px 12px;
  border: 2px solid black;
  align-content: center;
}

.name-tab:empty {
  visibility: hidden;
}

.canvas-line {
  width: 100%;
  height: 100%;
}

.canvas textarea {
  width: 100%;
  height: 100%;
  padding: 4px 10px 0;
  border: 0;
  background: none;
  outline: none;
  resize: none;
  overflow: hidden;
  color: black;
  font-size: 22px;
  line-height: 32px;
  text-indent: 144px;
}

.compose-row {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  margin-top: 8px;
}

/*
 * Keyboard: each page is its BIOS panel sprite at 2x with transparent hit
 * targets over the drawn keys. Shift/caps swap in the uppercase panel.
 */
.kb-panel {
  flex: none;
  width: 400px;
}

.keyboard {
  position: relative;
  width: 400px;
  height: 162px;
  background-image: var(--kb-panel);
  background-size: 400px 162px;
  image-rendering: pixelated;
}

.keyboard[hidden] {
  display: none;
}

.keyboard.shifted,
.keyboard.capsed {
  background-image: var(--kb-panel-shift, var(--kb-panel));
}

.kb-key {
  position: absolute;
  min-width: 0;
  padding: 0;
  border: 0;
  clip-path: none;
  background: none;
  cursor: pointer;
}

.kb-key:active {
  background: rgb(73 73 73 / 25%);
}

/* Send / save / clear stack: sprites share divider rows, so overlap them 2px. */
.compose-actions {
  flex: none;
  width: 64px;
  display: flex;
  flex-direction: column;
}

.action-button {
  width: 64px;
  min-width: 0;
  padding: 0;
  border: 0;
  clip-path: none;
  background-color: transparent;
  background-size: 100% 100%;
  image-rendering: pixelated;
  cursor: pointer;
}

.action-button:active {
  filter: brightness(0.85);
}

.action-send {
  height: 64px;
  background-image: url("pictochat/button-send.5224e1a0ec4b.png");
}

.action-unsend {
  height: 50px;
  margin-top: -2px;
  background-image: url("pictochat/button-save.e3aef2f6f68a.png");
}

.action-clear {
  height: 52px;
  margin-top: -2px;
  background-image: url("pictochat/button-clear.02b5082486b6.png");
}