/* CMB's interface. The window skins are the art in assets/ui, cut by scripts/convert_habbo_ui.py,
   with slice sizes from the same skin files. Colours come from the matching window layouts. The
   client's own faces, Ubuntu and Volter, aren't in the art we have, so this is the closest stack
   that needs no font request. */
:root {
  --ink: #000;
  --paper: #e9e9e1;
  --mint: #d7ebd9;
  --danger: #a32a22;
  --muted: #666;
  --link: #0f557b;
  --sub: #52819a;
  --hilight: #63c5e9;
  --hilight-edge: #82d1ed;
  --slot: #a1a19b;
  --banner: #0e3f52;
  --banner-edge: #376275;
  --display: Ubuntu, "Trebuchet MS", "Lucida Grande", "Segoe UI", Verdana, sans-serif;
  --body: Ubuntu, "Trebuchet MS", "Lucida Grande", "Segoe UI", Verdana, sans-serif;
  --bar-h: 56px;
  color-scheme: light;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #1c2a33;
  color: var(--ink);
  font: 13px/1.35 var(--body);
}

#stage {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
  cursor: pointer;
}

h1, h2, h3 { font-family: var(--display); margin: 0; }
h2 { font-size: 14px; line-height: 1.2; }
h3 { font-size: 13px; }

button, input, select { font: inherit; color: inherit; }

/* Buttons: the shiny button, 5px caps around a 12px middle. */
button {
  min-height: 22px;
  padding: 0 4px;
  color: #000;
  font-weight: bold;
  font-size: 12px;
  line-height: 12px;
  background: none;
  border: 5px solid transparent;
  border-image: url(assets/ui/btn.png) 5 fill / 5px / 0 stretch;
  image-rendering: pixelated;
  cursor: pointer;
}
button:hover { border-image-source: url(assets/ui/btn_hover.png); }
button:active, button[aria-pressed=true] { border-image-source: url(assets/ui/btn_pressed.png); }
button:disabled { border-image-source: url(assets/ui/btn_disabled.png); color: #777; cursor: default; }
button.primary { border-image-source: url(assets/ui/btn_green.png); }
button.primary:hover { border-image-source: url(assets/ui/btn_green_hover.png); }
button.primary:active { border-image-source: url(assets/ui/btn_green_pressed.png); }
button.primary:disabled { border-image-source: url(assets/ui/btn_green_disabled.png); }
button.danger { border-image-source: url(assets/ui/btn_red.png); color: #fff; }
button.danger:hover { border-image-source: url(assets/ui/btn_red_hover.png); }
button.danger:active { border-image-source: url(assets/ui/btn_red_pressed.png); }

/* Everything that's a row, a slot or an icon rather than a button in the window sense. */
.tool, .room-list button, .catalog-grid button, .tree button, .win-close, .step, .swatches button,
.picture-thumb, .zoom button, #chat-picture, .stepper button, .people .open {
  min-height: 0;
  padding: 0;
  border: 0;
  border-image: none;
  background: none;
  font-weight: normal;
}

input:not([type=checkbox], [type=file]) {
  width: 100%;
  height: 26px;
  padding: 0 2px;
  background: none;
  border: 6px solid transparent;
  border-image: url(assets/ui/input.png) 6 fill / 6px / 0 stretch;
  image-rendering: pixelated;
  font-size: 13px;
  color: #333;
}
input::placeholder { color: #888; }
input:disabled { opacity: .7; }
input[type=search]::-webkit-search-decoration { display: none; }

select {
  appearance: none;
  width: 100%;
  height: 26px;
  padding: 0 22px 0 2px;
  border: 6px solid transparent;
  border-image: url(assets/ui/select.png) 6 / 6px / 0 stretch;
  background: #fff url(assets/ui/select_arrow.png) no-repeat right -2px center;
  background-clip: padding-box;
  image-rendering: pixelated;
  font-size: 12px;
  cursor: pointer;
}

input[type=checkbox] {
  appearance: none;
  flex: none;
  width: 15px;
  height: 15px;
  margin: 1px 6px 0 0;
  background: url(assets/ui/check.png);
  cursor: pointer;
}
input[type=checkbox]:checked { background: url(assets/ui/check_on.png); }

:focus-visible { outline: 2px solid var(--hilight); outline-offset: 1px; }
input:focus-visible, select:focus-visible { outline-offset: -2px; }

label { display: block; font-weight: bold; font-size: 12px; }
label input, label select { margin-top: 2px; font-weight: normal; }
label.check { display: flex; align-items: flex-start; font-weight: normal; }

/* Scrollbars, from the same skin. */
::-webkit-scrollbar { width: 17px; height: 17px; }
::-webkit-scrollbar-track { background: url(assets/ui/sb_track.png) repeat-y; image-rendering: pixelated; }
::-webkit-scrollbar-thumb {
  border: 5px solid transparent;
  border-image: url(assets/ui/sb_thumb.png) 5 fill / 5px / 0 stretch;
  image-rendering: pixelated;
}
::-webkit-scrollbar-thumb:hover { border-image-source: url(assets/ui/sb_thumb_hover.png); }
::-webkit-scrollbar-button:vertical:start:increment, ::-webkit-scrollbar-button:vertical:end:decrement { display: none; }
::-webkit-scrollbar-button:vertical:start:decrement { display: block; height: 16px; background: url(assets/ui/sb_up.png); }
::-webkit-scrollbar-button:vertical:end:increment { display: block; height: 16px; background: url(assets/ui/sb_down.png); }
::-webkit-scrollbar-button:vertical:start:decrement:active { background: url(assets/ui/sb_up_pressed.png); }
::-webkit-scrollbar-button:vertical:end:increment:active { background: url(assets/ui/sb_down_pressed.png); }
@supports not selector(::-webkit-scrollbar) {
  * { scrollbar-color: #a1a19b #e9e9e1; }
}

/* Windows. The art's edge is 33/10/10/10, and the client lays content over it: the title bar 6px
   in, the content 3px from the sides and 36px down. So the drawn edge is wider than the layout's. */
.win {
  position: fixed;
  z-index: 10;
  display: flex;
  flex-direction: column;
  border: solid transparent;
  border-width: 36px 3px 3px;
  border-image: url(assets/ui/frame.png) 33 10 10 10 fill / 33px 10px 10px 10px / 0 stretch;
  image-rendering: pixelated;
  background: none;
  color: #000;
  filter: drop-shadow(2px 3px 2px rgba(0, 0, 0, .35));
}
dialog.win:not([open]) { display: none; }
.win-head {
  position: absolute;
  top: -30px;
  left: 3px;
  right: 3px;
  height: 27px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 26px;
  color: #fff;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .45);
  user-select: none;
  touch-action: none;
}
.win-head h2, .win-head strong {
  font: bold 14px/1.2 var(--display);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.drawer .win-head, .selection .win-head { cursor: move; }
.win-close {
  position: absolute;
  top: 4px;
  right: 3px;
  width: 19px;
  height: 20px;
  background: url(assets/ui/close.png) no-repeat;
}
.win-close:hover { background-image: url(assets/ui/close_hover.png); }
.win-close:active { background-image: url(assets/ui/close_pressed.png); }
.win-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 6px 7px 8px;
}
.win-foot { flex: none; padding: 6px 7px 8px; border-top: 1px solid #b4b4ae; }

/* A skinned well for lists. */
.well {
  border: 2px solid transparent;
  border-image: url(assets/ui/well.png) 5 fill / 5px / 0 stretch;
  image-rendering: pixelated;
}

.tabs { display: flex; align-items: flex-end; gap: 2px; }
.tabs button {
  flex: 1 1 0;
  height: 28px;
  min-height: 0;
  padding: 0;
  border: solid transparent;
  border-width: 0 9px;
  border-image: url(assets/ui/tab.png) 0 9 fill / 0 9px / 0 stretch;
  color: #444;
  font-size: 12px;
  white-space: nowrap;
}
.tabs button:hover { border-image-source: url(assets/ui/tab_hover.png); }
.tabs button[aria-selected=true] { border-image-source: url(assets/ui/tab_selected.png); color: #222; }
.win-tabs { flex: none; padding: 2px 7px 0; border-bottom: 1px solid #b4b4ae; }

.row { display: flex; flex-wrap: wrap; gap: 4px; }
.row.nowrap { flex-wrap: nowrap; }
.row.nowrap input { flex: 1; min-width: 0; }
.stack > * + * { margin-top: 8px; }
.hint { color: var(--muted); margin: 4px 0; font-size: 12px; }
.error { color: var(--danger); font-weight: bold; margin: 6px 0; }

/* Sign-in: low left, so the room stays the first thing you see. */
.auth {
  left: max(24px, 5vw);
  bottom: max(24px, 6vh);
  width: min(300px, calc(100vw - 16px));
  max-height: calc(100dvh - 16px);
}
/* The logo is 132 by 48 pixels of art, drawn at a whole-number scale so no pixel blurs. */
.wordmark { position: relative; width: 264px; max-width: 100%; margin: 0 auto; }
.wordmark img { display: block; width: 264px; height: 96px; image-rendering: pixelated; }
.lede { margin: 2px 0 8px; text-align: center; color: #333; }
.auth.creating .lede { display: none; }
.auth.creating .wordmark { margin-bottom: 6px; }
.auth .tabs { margin-bottom: 8px; border-bottom: 1px solid #b4b4ae; }
#auth-form > * + * { margin-top: 6px; }
#auth-submit { width: 100%; margin-top: 10px; min-height: 26px; font-size: 13px; }
#create-fields > * + * { margin-top: 6px; }
#create-fields .hint { line-height: 1.3; margin-bottom: 0; }
.auth label.check { line-height: 1.3; font-size: 12px; }
.rules { margin: 4px 0 0; padding-left: 16px; color: var(--muted); font-size: 11px; line-height: 1.3; }

@media (prefers-reduced-motion: no-preference) {
  /* Each glint is a 9-pixel frame on a six-frame strip, empty at both ends. */
  .wordmark::before, .wordmark::after {
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
    background: url(assets/logo-sparkle.png) 0 0 / 108px 18px no-repeat;
    image-rendering: pixelated;
    pointer-events: none;
    animation: sparkle .6s steps(6) 1 both;
  }
  .wordmark::before { left: 22px; top: 2px; animation-delay: .35s; }
  .wordmark::after { right: 34px; top: 8px; animation-delay: .8s; }
}
@keyframes sparkle { to { background-position-x: -108px; } }

/* Dark translucent plates over the room, from the purse's skin. */
.room-title, .coins, .chatlog {
  border: 3px solid transparent;
  border-image: url(assets/ui/purse.png) 7 7 8 7 fill / 7px 7px 8px 7px / 0 stretch;
  image-rendering: pixelated;
  color: #fff;
}

.room-title {
  position: fixed;
  z-index: 6;
  top: 8px;
  left: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: calc(100vw - 112px);
  padding: 2px 3px 2px 5px;
}
.room-icon { flex: none; width: 18px; height: 19px; background: url(assets/ui/room_info.png); }
.room-title strong {
  flex: 1 1 auto;
  min-width: 90px;
  font: bold 14px var(--display);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.room-title button { flex: none; }

.zoom { position: fixed; z-index: 6; top: 50px; left: 10px; display: flex; gap: 2px; }
.zoom button { width: 22px; height: 22px; }
#zoom-in { background: url(assets/ui/plus.png); }
#zoom-in:hover { background: url(assets/ui/plus_hover.png); }
#zoom-in:active { background: url(assets/ui/plus_pressed.png); }
#zoom-in:disabled { background: url(assets/ui/plus_disabled.png); }
#zoom-out { background: url(assets/ui/minus.png); }
#zoom-out:hover { background: url(assets/ui/minus_hover.png); }
#zoom-out:active { background: url(assets/ui/minus_pressed.png); }
#zoom-out:disabled { background: url(assets/ui/minus_disabled.png); }

.coins {
  position: fixed;
  z-index: 6;
  top: 8px;
  right: 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 2px 6px;
  font-weight: bold;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.coin { display: block; flex: none; width: 16px; height: 16px; image-rendering: pixelated; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.edit-hint, .toast {
  position: fixed;
  z-index: 30;
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100vw - 16px);
  border: 3px solid transparent;
  border-image: url(assets/ui/bubble.png) 10 fill / 10px / 0 stretch;
  image-rendering: pixelated;
}
.edit-hint {
  top: 8px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  padding: 3px 8px;
  font-weight: bold;
}
.toast { top: 56px; padding: 5px 10px; font-weight: bold; }

/* Windows that open over the room, along the right, under the coins. */
.drawer {
  top: 44px;
  right: 10px;
  width: min(320px, calc(100vw - 16px));
  max-height: calc(100dvh - var(--bar-h) - 52px);
}

.selection {
  left: 10px;
  bottom: calc(var(--bar-h) + 8px);
  width: min(280px, calc(100vw - 16px));
  z-index: 11;
}
#report-form { margin-top: 6px; }
#report-form button { margin-top: 6px; }
.selection #furni-actions:not([hidden]) + #avatar-actions { margin-top: 6px; }

/* Room list. */
.navigator { width: min(420px, calc(100vw - 16px)); height: min(628px, calc(100dvh - var(--bar-h) - 52px)); }
.navigator .win-body { padding: 0; background: #fff; }
.room-list { list-style: none; margin: 0; padding: 0; }
.room-list.only-official li:not(.official) { display: none; }
.room-list li:first-child::before,
.room-list li.official + li:not(.official)::before {
  content: "All rooms";
  display: block;
  padding: 5px 7px 4px;
  color: var(--link);
  font-weight: bold;
  background: #fff;
}
.room-list li.official:first-child::before { content: "Official rooms"; }
.room-list button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 24px;
  padding: 3px 7px;
  text-align: left;
  font-size: 12px;
}
.room-list li:nth-child(odd) button { background: #f1f0e8; }
.room-list button:hover { background: var(--hilight-edge) !important; }
.room-list .room-text { flex: 1; min-width: 0; }
.room-list .name { display: block; font-weight: bold; color: #333; overflow-wrap: anywhere; }
.room-list .who { display: block; color: var(--muted); font-size: 11px; }
.room-list .count {
  flex: none;
  order: -1;
  width: 34px;
  height: 13px;
  padding-right: 4px;
  color: #fff;
  background: url(assets/ui/usercount_none.png) no-repeat;
  font: bold 10px/13px var(--body);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.room-list .count.low { background-image: url(assets/ui/usercount_low.png); }
.room-list .count.mid { background-image: url(assets/ui/usercount_mid.png); }
.room-list .count.high { background-image: url(assets/ui/usercount_high.png); }
.room-list .count.full { background-image: url(assets/ui/usercount_full.png); }
.room-list .official-icon { flex: none; width: 32px; height: 32px; background: url(assets/ui/room_official.png); }
.official-badge { display: block; color: var(--sub); font-size: 11px; font-weight: bold; }
.navigator h3 { display: flex; align-items: center; gap: 6px; color: var(--link); }
.key-icon { flex: none; width: 23px; height: 23px; background: url(assets/ui/room_create.png); }
.create-fields { display: grid; grid-template-columns: 3fr 2fr; gap: 6px; }
#create-room > .primary { width: 100%; }

/* Catalog: 570 wide as in the client, a 184 column of categories beside the pieces. */
.catalog { width: min(570px, calc(100vw - 16px)); height: min(635px, calc(100dvh - var(--bar-h) - 52px)); }
.catalog-banner {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 56px;
  margin: 0 2px;
  padding: 0 10px;
  color: #fff;
  background: var(--banner);
  border: 2px solid var(--banner-edge);
}
.catalog-banner p { margin: 0; font-size: 12px; }
.catalog-banner strong { font: bold 15px var(--display); }
.catalog-banner-icon { flex: none; width: 51px; height: 48px; background: url(assets/ui/tool_catalog.png); }
.catalog-columns { flex: 1 1 auto; min-height: 0; display: flex; gap: 8px; padding: 6px 7px 8px; }
.catalog-nav { flex: none; width: 176px; display: flex; flex-direction: column; min-height: 0; }
.catalog-nav .hint { margin: 2px 0 4px; font-size: 11px; }
.catalog-main { flex: 1 1 auto; min-width: 0; min-height: 0; display: flex; flex-direction: column; }

.tree {
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
  padding: 2px;
  list-style: none;
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--slot);
  border-radius: 3px;
}
.tree ul { list-style: none; margin: 0; padding: 0; }
.tree button {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  height: 21px;
  padding: 0 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: bold;
  text-align: left;
}
.tree button > span { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.tree .sub button { height: 20px; padding-left: 15px; color: var(--sub); font-weight: normal; }
.tree button:hover { background: #e4f4fb; }
.tree button[aria-current=true] {
  color: #fff;
  background: linear-gradient(var(--hilight-edge) 2px, var(--hilight) 2px, var(--hilight) calc(100% - 2px), var(--hilight-edge) calc(100% - 2px));
}
.tree img { flex: none; width: 18px; height: 18px; object-fit: contain; }
.tree .fold { flex: none; width: 9px; height: 9px; margin-left: auto; background: url(assets/ui/tree_closed.png) no-repeat center; }
.tree [aria-expanded=true] .fold { background-image: url(assets/ui/tree_open.png); }

.catalog-list { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 6px; }
.catalog-grid {
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
  padding: 3px;
  list-style: none;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(53px, 1fr));
  align-content: start;
  gap: 3px;
  background: #fff;
  border: 1px solid var(--slot);
  border-radius: 3px;
}
.catalog-grid button {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 54px;
  background: #f4f3ec;
  border: 1px solid var(--slot);
  border-radius: 3px;
}
.catalog-grid .priced button { height: 68px; }
.catalog-grid button:hover { background: #fff; border-color: var(--hilight); }
.catalog-grid li.selected button { background: #e4f4fb; border: 2px solid var(--hilight); }
.catalog-grid img { display: block; max-width: 44px; max-height: 44px; object-fit: contain; }
.catalog-grid .price { display: flex; align-items: center; gap: 2px; color: #000; font-size: 11px; font-weight: bold; }
.catalog-grid .price .coin { width: 12px; height: 12px; }
.catalog-grid li.too-dear button { background: #eee; }
.catalog-grid li.too-dear img { opacity: .55; }
.catalog-grid li.too-dear .price { color: var(--danger); }

.catalog-preview {
  order: -1;
  flex: none;
  display: flex;
  gap: 8px;
  height: 178px;
  padding: 5px;
  background: #fff;
  border: 1px solid var(--slot);
  border-radius: 3px;
}
.catalog-preview.empty { align-items: center; justify-content: center; color: var(--muted); text-align: center; }
.piece-stage { position: relative; flex: 0 0 176px; overflow: hidden; background: #d9d8ce; border-radius: 2px; }
.piece-stage canvas { display: block; width: 100%; height: 100%; }
.piece-stage img { position: absolute; inset: 0; margin: auto; max-width: 100%; max-height: 100%; }
.piece-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.piece-name { font-weight: bold; font-size: 13px; overflow-wrap: anywhere; }
.piece-desc { color: var(--muted); font-size: 11px; }
.piece-price { display: flex; align-items: center; gap: 3px; font-weight: bold; }
.piece-price.too-dear { color: var(--danger); }
.piece-actions { display: flex; gap: 4px; margin-top: auto; }
.piece-actions .primary { flex: 1; }
.piece-rotate { flex: none; display: flex; align-items: center; }
.piece-rotate::before { content: ""; display: block; width: 18px; height: 12px; background: url(assets/ui/rotate.png); }

.swatches { display: flex; flex-wrap: wrap; gap: 2px; max-height: 58px; overflow-y: auto; }
.swatches button { width: 18px; height: 18px; border: 1px solid #555; border-radius: 2px; }
.swatches button:hover { border-color: #000; }
.swatches button[aria-pressed=true] { outline: 2px solid var(--hilight); outline-offset: 0; border-color: #000; }
/* The base colouring has no colour of its own in the data, so it gets a neutral split. */
.swatches .plain { background: linear-gradient(135deg, #fff 50%, #888 50%); }

.pager { flex: none; display: flex; align-items: center; justify-content: center; gap: 8px; padding-top: 5px; font-size: 12px; font-variant-numeric: tabular-nums; }
.step { width: 16px; height: 17px; }
.step-left { background: url(assets/ui/step_left.png); }
.step-left:hover { background: url(assets/ui/step_left_hover.png); }
.step-left:active { background: url(assets/ui/step_left_pressed.png); }
.step-left:disabled { background: url(assets/ui/step_left_disabled.png); }
.step-right { background: url(assets/ui/step_right.png); }
.step-right:hover { background: url(assets/ui/step_right_hover.png); }
.step-right:active { background: url(assets/ui/step_right_pressed.png); }
.step-right:disabled { background: url(assets/ui/step_right_disabled.png); }

/* While placing, the catalog folds to a picker beside the room, so the floor stays reachable. */
@media (min-width: 641px) {
  .catalog.placing { width: 340px; height: auto; }
  .catalog.placing .catalog-grid { max-height: 300px; }
  .catalog.placing .catalog-banner, .catalog.placing .tree,
  .catalog.placing .piece-stage, .catalog.placing .piece-name, .catalog.placing .piece-desc,
  .catalog.placing .piece-price, .catalog.placing .piece-actions { display: none; }
  .catalog.placing .catalog-columns { flex-direction: column; gap: 2px; }
  .catalog.placing .catalog-nav { width: auto; }
  .catalog.placing .catalog-preview { height: auto; }
  .catalog.placing .catalog-preview:not(:has(.swatches)) { display: none; }
}

.look-preview { display: block; width: 100%; height: 130px; border: 1px solid var(--slot); border-radius: 3px; margin-bottom: 8px; }
.look .win-body > * + * { margin-top: 6px; }
.look h3 { margin-top: 12px; color: var(--link); }
.look-group { margin: 0 0 8px; border: 0; padding: 0; }
.look-group legend { font-weight: bold; padding: 0; margin-bottom: 2px; }
.look-group button { min-width: 30px; }
#look-save, #figure-save { margin-top: 6px; }
#wardrobe > * + * { margin-top: 6px; }
.wardrobe { list-style: none; margin: 6px 0; padding: 0; display: grid; gap: 3px; }
.wardrobe li { display: grid; grid-template-columns: 1fr auto; gap: 2px 6px; align-items: center; font-size: 12px; }
.wardrobe .hint { margin: 0; }
.wardrobe .stepper { display: flex; align-items: center; gap: 4px; justify-content: flex-end; }
.stepper button { width: 16px; height: 17px; font-size: 0; color: transparent; }
.stepper button:first-child { background: url(assets/ui/step_left.png); }
.stepper button:first-child:hover { background: url(assets/ui/step_left_hover.png); }
.stepper button:first-child:active { background: url(assets/ui/step_left_pressed.png); }
.stepper button:last-child { background: url(assets/ui/step_right.png); }
.stepper button:last-child:hover { background: url(assets/ui/step_right_hover.png); }
.stepper button:last-child:active { background: url(assets/ui/step_right_pressed.png); }
.wardrobe .value { min-width: 66px; text-align: center; font-size: 12px; font-variant-numeric: tabular-nums; }
.wardrobe .swatch { display: inline-block; width: 66px; height: 16px; border: 1px solid #555; border-radius: 2px; }

/* The bottom toolbar, in the toolbar's colour, with the chat box in the middle. */
.bar {
  position: fixed;
  z-index: 8;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--bar-h);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 8px;
  border: 1px solid transparent;
  border-image: url(assets/ui/toolbar.png) 8 fill / 8px / 0 stretch;
  image-rendering: pixelated;
}
.tools { flex: none; display: flex; align-items: center; gap: 2px; }
.tool { position: relative; width: 58px; height: 50px; flex: none; }
.tool-icon { display: block; width: 100%; height: 100%; background: no-repeat center; image-rendering: pixelated; }
.tool:hover .tool-icon { transform: translateY(-1px); }
.tool:active .tool-icon { transform: translateY(1px); }
.tool-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.tool-rooms .tool-icon { background-image: url(assets/ui/tool_rooms.png); }
.tool-rooms:hover .tool-icon { background-image: url(assets/ui/tool_rooms_hover.png); }
.tool-catalog .tool-icon { background-image: url(assets/ui/tool_catalog.png); }
.tool-catalog:hover .tool-icon { background-image: url(assets/ui/tool_catalog_hover.png); }
.tool-friends .tool-icon { background-image: url(assets/ui/tool_friends.png); }
.tool-look .tool-icon { background-image: url(assets/ui/tool_look.png); }
.tool-signout { width: 36px; }
.tool-signout .tool-icon { background-image: url(assets/ui/tool_signout.png); }
.badge { display: inline-block; min-width: 16px; padding: 0 4px; border-radius: 8px; background: #d9301f; color: #fff; font-size: 11px; font-weight: bold; line-height: 16px; text-align: center; }
.tool .badge { position: absolute; top: 2px; right: 2px; }

/* The chat box is the client's: a 38px white border with 17px text, and the clip on a note. */
.chat-dock { position: relative; flex: 0 1 471px; min-width: 0; margin-inline: auto; }
.chat-form { display: flex; align-items: center; gap: 6px; }
.chat-box {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  height: 38px;
  padding: 0 4px 0 8px;
  border: 2px solid transparent;
  border-image: url(assets/ui/bubble.png) 10 fill / 10px / 0 stretch;
  image-rendering: pixelated;
}
.chat-box input:not([type=checkbox], [type=file]) {
  flex: 1;
  min-width: 0;
  height: 30px;
  padding: 0;
  border: 0;
  border-image: none;
  background: none;
  font-size: 16px;
  color: #444;
  outline: none;
}
.chat-box button { flex: none; }
#chat-picture { position: relative; flex: none; width: 41px; height: 38px; background: url(assets/ui/chat_note.png) no-repeat; }
#chat-picture::before { content: ""; position: absolute; left: 23px; top: 2px; width: 18px; height: 15px; background: url(assets/ui/chat_clip.png); }
#chat-picture::after { content: ""; position: absolute; left: 24px; top: 26px; width: 12px; height: 12px; background: url(assets/ui/chat_note_corner.png); }
#chat-picture:hover { transform: translateY(-1px); }
#chat-picture:disabled { opacity: .55; cursor: default; transform: none; }
.bar.dropping { outline: 3px dashed #fff; outline-offset: -5px; }
.conversation.dropping .conversation-log { border-style: dashed; background: var(--mint); }

.attachment { display: flex; align-items: center; gap: 8px; padding: 2px 4px; border: 3px solid transparent; border-image: url(assets/ui/bubble.png) 10 fill / 10px / 0 stretch; image-rendering: pixelated; }
.bar .attachment { position: absolute; left: 0; bottom: calc(100% + 12px); max-width: calc(100vw - 24px); }
.attachment img { width: 36px; height: 36px; object-fit: cover; border-radius: 3px; flex: none; image-rendering: auto; }
.attachment span { flex: 1; min-width: 0; }
.attachment button { flex: none; }

.picture-thumb { display: block; margin: 3px 0; border-radius: 4px; overflow: hidden; line-height: 0; }
.picture-thumb img { display: block; image-rendering: auto; }
.conversation-log .mine .picture-thumb { margin-left: auto; }
.picture-gone { display: block; font-style: italic; opacity: .8; }

.lightbox { padding: 0; margin: auto; inset: 0; overflow: visible; max-width: calc(100vw - 24px); max-height: calc(100dvh - 24px); }
.lightbox::backdrop { background: rgba(0, 0, 0, .6); }
.lightbox-body { display: flex; flex-direction: column; gap: 8px; padding: 6px 7px 8px; min-height: 0; }
.lightbox img { display: block; max-width: 100%; max-height: calc(100dvh - 120px); object-fit: contain; margin: 0 auto; image-rendering: auto; }
.lightbox p { margin: 20px 40px; font-weight: bold; text-align: center; }
.lightbox .row { justify-content: flex-end; }

.chatlog {
  position: fixed;
  z-index: 5;
  left: 8px;
  bottom: calc(var(--bar-h) + 8px);
  width: min(320px, calc(100vw - 16px));
  max-height: 25vh;
  overflow-y: auto;
  padding: 3px 5px;
  font-size: 12px;
  overflow-wrap: anywhere;
}
.chatlog:empty { display: none; }
.chatlog p { margin: 0 0 2px; }
.chatlog b { color: #ffe27a; }
.chatlog .notice { color: #c9ecff; font-style: italic; }
.selection:not([hidden]) ~ .chatlog { visibility: hidden; }

.friends .win-body { padding-top: 8px; }
.toolbar-row label { margin-bottom: 2px; }
.toolbar-row .row { margin-top: 4px; }
.friend-group { margin-top: 10px; }
.friend-group h3 { padding: 2px 6px; color: #fff; background: #52819a; border-radius: 2px; font-size: 12px; }
.people { list-style: none; margin: 0; padding: 0; }
.people li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 3px 4px; border-bottom: 1px solid #d3d2c9; }
.people .who { flex: 1 1 110px; min-width: 110px; overflow-wrap: anywhere; font-weight: bold; }
.people .who small { display: block; font-weight: normal; color: var(--muted); }
.people .open { flex: 1; min-width: 0; text-align: left; overflow-wrap: anywhere; font-weight: bold; font-size: 13px; line-height: 1.3; }
.people .open:hover { color: var(--link); }
.people .open small { display: block; color: var(--muted); font-weight: normal; }
.people .online small { color: #1d6b5e; font-weight: bold; }

.conversation { height: min(600px, calc(100dvh - var(--bar-h) - 52px)); }
.conversation .win-body { display: flex; flex-direction: column; gap: 6px; }
.conversation .hint { margin: 0; }
#conversation-back, #conversation-older { flex: none; align-self: flex-start; }
.conversation-log { flex: 1 1 auto; min-height: 90px; overflow-y: auto; padding: 6px; background: #fff; border: 1px solid var(--slot); border-radius: 3px; overflow-wrap: anywhere; }
.conversation-log p { margin: 0 0 6px; }
.conversation-log b { display: block; font-size: 11px; color: var(--muted); }
.conversation-log .mine { text-align: right; }
#dm-form, #dm-report-form { flex: none; }

@media (max-width: 640px) {
  :root { --bar-h: 106px; }
  .bar { flex-wrap: wrap; align-content: center; gap: 2px 4px; padding: 0 6px; }
  .chat-dock { order: -1; flex: 1 1 100%; margin: 0; }
  .tools { flex: 1 1 100%; justify-content: space-around; }
  .drawer {
    left: 8px;
    right: 8px;
    top: auto;
    bottom: calc(var(--bar-h) + 6px);
    width: auto;
    max-height: calc(100dvh - var(--bar-h) - 48px);
  }
  .navigator, .catalog { height: calc(100dvh - var(--bar-h) - 48px); }
  .drawer:not([hidden]) ~ .chatlog { visibility: hidden; }
  .auth { left: 0; right: 0; margin-inline: auto; bottom: 8px; }
  .room-title { flex-wrap: wrap; gap: 3px 6px; }
  .zoom { top: 70px; }
  .edit-hint { top: 70px; }
  .toast { top: 110px; }
  .catalog-banner { display: none; }
  .catalog-columns { flex-direction: column; gap: 4px; padding-top: 4px; }
  .catalog-nav { width: auto; flex: none; }
  .tree { flex: none; height: 92px; }
  .catalog-preview { height: 136px; }
  .piece-stage { flex-basis: 120px; }
  .swatches { max-height: 40px; }
}

/* A short laptop: the sign-up form still has to fit without scrolling far. */
@media (max-height: 700px) {
  .auth { bottom: 8px; }
  .auth.creating .wordmark, .auth.creating .wordmark img { width: 132px; height: 48px; }
  .auth.creating .wordmark::before, .auth.creating .wordmark::after { display: none; }
}
/* Too narrow for the logo at double size, and it only comes in whole-number sizes. */
@media (max-width: 339px) {
  .wordmark, .wordmark img { width: 132px; height: 48px; }
  .wordmark::before, .wordmark::after { display: none; }
}

/* The moderation page keeps its plain cards. */
.panel { background: #fff; border: 1px solid var(--slot); border-radius: 4px; padding: 16px; }

/* Moderation page. */
.admin-page, .admin-page body { overflow: auto; height: auto; min-height: 100%; background: var(--mint); }
.admin-page body { padding: 16px; }
.admin { max-width: 1100px; margin: 0 auto; }
.admin h1 { font-size: 26px; margin-bottom: 12px; }
.admin nav { margin-bottom: 12px; }
.admin nav button[aria-selected=true] { background: var(--ink); color: var(--paper); }
.admin .stats { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 0 0 18px; }
.admin .stats div { display: flex; flex-direction: column-reverse; }
.admin .stats dt { color: var(--muted); }
.admin .stats dd { margin: 0; font: bold 30px/1.1 var(--display); }
.admin .table-wrap { overflow-x: auto; }
.admin table { width: 100%; border-collapse: collapse; }
.admin th { text-align: left; border-bottom: 3px solid var(--ink); padding: 4px 8px; white-space: nowrap; }
.admin td { border-bottom: 1px solid #d8d2e6; padding: 6px 8px; vertical-align: top; overflow-wrap: anywhere; }
.admin td.when { white-space: nowrap; color: var(--muted); }
.admin .toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; margin-bottom: 12px; }
.admin .toolbar label { flex: 1 1 200px; }
.admin .terms { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.admin .pill { color: var(--danger); font-weight: bold; }
.admin-picture { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; margin-top: 6px; }
.admin-picture img { display: block; max-width: 120px; max-height: 120px; border: 2px solid var(--ink); border-radius: 4px; }
.admin dialog { border: 3px solid var(--ink); border-radius: 10px; box-shadow: 5px 5px 0 var(--ink); background: var(--paper); width: min(420px, 90vw); }
.admin dialog::backdrop { background: rgba(27, 20, 48, .5); }
.admin dialog .row { margin-top: 12px; justify-content: flex-end; }