:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #07101b;
  color: #f5fbff;
}

* { box-sizing: border-box; }
html, body, .room-shell { width: 100%; height: 100%; margin: 0; overflow: hidden; }
button, a { font: inherit; }

#roomCanvas {
  display: block;
  width: 100%;
  height: 100%;
  outline: 0;
}

.room-header {
  position: fixed;
  z-index: 4;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 22px clamp(18px, 4vw, 54px);
  pointer-events: none;
  background: linear-gradient(180deg, rgba(3, 9, 17, .88), transparent);
}

.room-header > * { pointer-events: auto; }
.room-header h1 { margin: 2px 0 0; font: 900 clamp(23px, 3vw, 42px)/1 "Arial Black", sans-serif; letter-spacing: -.05em; text-transform: uppercase; }
.eyebrow { color: #8fd7ff; font: 800 10px/1.2 ui-monospace, monospace; letter-spacing: .18em; }
.back-link { color: #f5fbff; text-decoration: none; border: 1px solid rgba(143, 215, 255, .35); border-radius: 999px; padding: 10px 15px; background: rgba(5, 14, 25, .72); backdrop-filter: blur(10px); }
.back-link:hover { border-color: #8fd7ff; background: rgba(20, 54, 78, .84); }
.room-header__actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.edit-arcade {
  border: 1px solid rgba(255, 211, 61, .72);
  border-radius: 999px;
  padding: 11px 17px;
  background: rgba(7, 18, 31, .86);
  color: #fff6cf;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
.edit-arcade:hover,
.edit-arcade[aria-pressed="true"] { background: #ffd33d; color: #132336; }
.edit-arcade[hidden] { display: none; }
/* The room's own fullscreen: the whole page goes up, so the browser chrome leaves and the
   header/hint overlays stay exactly where they are. Hidden where the API is missing (iPhone). */
.room-fullscreen { border-color: rgba(143, 215, 255, .55); color: #e8f6ff; }
.room-fullscreen:hover,
.room-fullscreen[aria-pressed="true"] { background: #8fd7ff; color: #132336; }
.room-fullscreen[hidden] { display: none; }
.room-owner-link { margin-left: auto; }
.room-owner-link[hidden] { display: none; }
.is-visiting .control-hint__build { display: none; }

.start-gate {
  position: fixed;
  z-index: 3;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background: radial-gradient(circle at 50% 45%, rgba(11, 39, 61, .23), rgba(3, 8, 15, .72));
  transition: opacity .2s ease;
}
.start-gate.is-hidden { opacity: 0; pointer-events: none; }
.start-card { width: min(480px, 100%); padding: 30px; text-align: center; border: 1px solid rgba(143, 215, 255, .45); border-radius: 22px; background: rgba(7, 18, 31, .9); box-shadow: 0 30px 90px rgba(0, 0, 0, .5), inset 0 1px rgba(255,255,255,.08); backdrop-filter: blur(16px); }
.start-card__tag { color: #ffd33d; font: 800 10px ui-monospace, monospace; letter-spacing: .18em; }
.start-card h2 { margin: 10px 0 8px; font: 900 clamp(30px, 6vw, 48px)/.98 "Arial Black", sans-serif; letter-spacing: -.06em; }
.start-card p { margin: 0 auto 22px; max-width: 35ch; color: #b8cada; line-height: 1.55; }
.start-card button { border: 0; border-radius: 10px; padding: 13px 22px; background: #ffd33d; color: #132336; font-weight: 900; text-transform: uppercase; cursor: pointer; box-shadow: 0 7px 0 #9c7911; }
.start-card button:active { transform: translateY(4px); box-shadow: 0 3px 0 #9c7911; }
.start-card small { display: block; margin-top: 18px; color: #8fd7ff; }

.cabinet-prompt {
  position: fixed;
  z-index: 5;
  left: 50%;
  bottom: 94px;
  translate: -50% 12px;
  padding: 13px 19px;
  border: 1px solid rgba(255, 211, 61, .8);
  border-radius: 10px;
  background: rgba(7, 16, 27, .92);
  color: #fff6cf;
  font-weight: 850;
  opacity: 0;
  transition: opacity .16s ease, translate .16s ease;
  pointer-events: none;
  box-shadow: 0 15px 45px rgba(0,0,0,.4);
}
.cabinet-prompt.is-visible { opacity: 1; translate: -50% 0; }
.cabinet-prompt::first-letter { color: #ffd33d; }

/* What the jukebox is playing, pinned to the bottom-left while a record is on. */
.jukebox-chip {
  position: fixed;
  z-index: 5;
  left: 18px;
  bottom: 18px;
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
  column-gap: 10px;
  align-items: center;
  padding: 9px 14px 9px 10px;
  border: 1px solid rgba(255, 170, 90, .55);
  border-radius: 10px;
  background: rgba(7, 16, 27, .9);
  color: #fff1d6;
  pointer-events: none;
  box-shadow: 0 15px 45px rgba(0,0,0,.4);
}
.jukebox-chip[hidden] { display: none; }
.jukebox-chip__disc {
  grid-row: 1 / span 2;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: repeating-radial-gradient(circle, #101010 0 2px, #1e1e1e 2px 3px);
  box-shadow: inset 0 0 0 4px #ff7a1a, inset 0 0 0 6px #101010;
  animation: jukebox-chip-spin 2.4s linear infinite;
}
@keyframes jukebox-chip-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .jukebox-chip__disc { animation: none; } }
.jukebox-chip__label { font-size: 10px; letter-spacing: .18em; font-weight: 800; color: #ffb070; }
.jukebox-chip__title { font-size: 13px; font-weight: 700; max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.is-playing .jukebox-chip, .is-editing .jukebox-chip { display: none; }

/* Who else is in the arcade, pinned top-right under the header while anyone is. */
.visitors-chip {
  position: fixed;
  z-index: 5;
  right: 18px;
  top: 96px;
  display: grid;
  row-gap: 3px;
  max-width: min(360px, calc(100vw - 36px));
  padding: 9px 14px;
  border: 1px solid rgba(103, 220, 255, .5);
  border-radius: 10px;
  background: rgba(7, 16, 27, .9);
  color: #e6f6ff;
  pointer-events: none;
  box-shadow: 0 15px 45px rgba(0,0,0,.4);
}
.visitors-chip[hidden] { display: none; }
.visitors-chip__label { font-size: 10px; letter-spacing: .18em; font-weight: 800; color: #67dcff; }
.visitors-chip__names { font-size: 13px; font-weight: 700; line-height: 1.35; }
.is-playing .visitors-chip, .is-editing .visitors-chip { display: none; }

/* Arcade chat, bottom-left like an in-match chat: a fading log while closed, a box while open. */
.room-chat {
  position: fixed;
  z-index: 5;
  left: 18px;
  bottom: 20px;
  width: min(420px, calc(100vw - 36px));
  display: grid;
  row-gap: 6px;
  pointer-events: none;
}
.room-chat[hidden] { display: none; }
.room-chat__log {
  list-style: none;
  margin: 0;
  padding: 8px 12px;
  max-height: 34vh;
  overflow-y: auto;
  display: grid;
  row-gap: 3px;
  border-radius: 10px;
  color: #e6f6ff;
  font-size: 13px;
  line-height: 1.35;
  text-shadow: 0 1px 2px rgba(0,0,0,.9), 0 0 6px rgba(0,0,0,.7);
  scrollbar-width: thin;
}
.room-chat[data-open="true"] .room-chat__log {
  background: rgba(7, 16, 27, .88);
  border: 1px solid rgba(103, 220, 255, .35);
  pointer-events: auto;
}
.room-chat__line { overflow-wrap: anywhere; }
.room-chat__name { color: #67dcff; font-weight: 800; }
.room-chat__line--self .room-chat__name { color: #ffd33d; }
.room-chat__line--system { color: #9db0c0; font-style: italic; }
.room-chat__input {
  display: none;
  width: 100%;
  box-sizing: border-box;
  padding: 10px 14px;
  border: 1px solid rgba(255, 211, 61, .6);
  border-radius: 10px;
  background: rgba(7, 16, 27, .94);
  color: #fff;
  font: inherit;
  font-size: 14px;
  outline: none;
  box-shadow: 0 15px 45px rgba(0,0,0,.4);
}
.room-chat__input::placeholder { color: #7f93a6; }
.room-chat[data-open="true"] .room-chat__input { display: block; pointer-events: auto; }
.room-chat[data-open="true"] .room-chat__input:focus { border-color: #ffd33d; box-shadow: 0 0 0 3px rgba(255, 211, 61, .18), 0 15px 45px rgba(0,0,0,.4); }
.is-playing .room-chat, .is-editing .room-chat { display: none; }
/* The music chip shares the bottom-left corner: while a record is on, the chat sits above it. */
.room-shell:has(.jukebox-chip:not([hidden])) .room-chat { bottom: 86px; }

/* The emote wheel: Q opens it, the mouse steers (or hovers a slot when it is not captured), a click sends. */
.emote-wheel {
  position: fixed;
  z-index: 6;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  pointer-events: none;
}
.emote-wheel[hidden] { display: none; }
.emote-wheel__ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 250px;
  height: 250px;
  border: 1px solid rgba(103, 220, 255, .35);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(7, 16, 27, .82) 0 58%, rgba(7, 16, 27, .35) 74%, transparent 76%);
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
  transform: translate(-50%, -50%);
}
.emote-wheel__hint {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 96px;
  transform: translate(-50%, -50%);
  color: #9db0c0;
  font-size: 10px;
  letter-spacing: .14em;
  font-weight: 800;
  text-align: center;
  line-height: 1.5;
}
.emote-wheel__hint b { display: block; color: #ffd33d; font-size: 12px; }
.emote-wheel__slot {
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  justify-items: center;
  row-gap: 4px;
  width: 92px;
  transform: translate(calc(-50% + var(--dx) * 88px), calc(-50% + var(--dy) * 88px)) scale(.92);
  transition: transform .12s ease, filter .12s ease;
  filter: saturate(.7) brightness(.85);
  pointer-events: auto;
  cursor: pointer;
}
.emote-wheel__slot img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.7));
}
.emote-wheel__slot small {
  padding: 2px 6px;
  border-radius: 5px;
  background: rgba(7, 16, 27, .9);
  color: #e6f6ff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .1em;
  white-space: nowrap;
}
.emote-wheel__slot[aria-selected="true"] {
  transform: translate(calc(-50% + var(--dx) * 88px), calc(-50% + var(--dy) * 88px)) scale(1.22);
  filter: none;
}
.emote-wheel__slot[aria-selected="true"] small { background: #ffd33d; color: #1a1400; }
.emote-wheel[data-cooling="true"] .emote-wheel__hint b { color: #7f93a6; }

/* The sender has no body to see it on: their own emote pops in the lower middle for a moment. */
.emote-self {
  position: fixed;
  z-index: 5;
  left: 50%;
  bottom: 150px;
  width: 72px;
  height: 72px;
  pointer-events: none;
  translate: -50% 0;
}
.emote-self[hidden] { display: none; }
.emote-self img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 6px 14px rgba(0,0,0,.8)); animation: emote-self-pop 3s ease-out forwards; }
@keyframes emote-self-pop {
  0% { transform: scale(.4) translateY(20px); opacity: 0; }
  12% { transform: scale(1.15) translateY(-6px); opacity: 1; }
  22% { transform: scale(1) translateY(0); opacity: 1; }
  80% { transform: scale(1) translateY(-10px); opacity: 1; }
  100% { transform: scale(.9) translateY(-40px); opacity: 0; }
}
.is-playing .emote-wheel, .is-editing .emote-wheel, .is-playing .emote-self, .is-editing .emote-self { display: none; }

.control-hint { position: fixed; z-index: 2; right: 24px; bottom: 20px; display: flex; gap: 8px; color: #9db0c0; font-size: 11px; }
.control-hint span { padding: 7px 9px; background: rgba(4, 10, 18, .68); border: 1px solid rgba(255,255,255,.1); border-radius: 7px; }
.control-hint b { color: #fff; margin-right: 5px; }

.edit-arcade kbd { margin-left: 7px; padding: 2px 6px; border: 1px solid currentColor; border-radius: 5px; font: 800 10px ui-monospace, monospace; opacity: .85; }
.cabinet-list { display: grid; gap: 8px; }
.cabinet-list__item { display: grid; grid-template-columns: 56px 1fr; gap: 12px; align-items: center; padding: 7px; border: 1px solid rgba(112, 232, 255, .22); border-radius: 12px; background: rgba(19, 48, 68, .42); color: inherit; text-align: left; cursor: pointer; }
.cabinet-list__item:hover { border-color: rgba(112, 232, 255, .6); background: rgba(19, 48, 68, .62); }
.cabinet-list__item[aria-pressed="true"] { border-color: #70e8ff; background: rgba(19, 48, 68, .82); box-shadow: 0 0 0 1px #70e8ff, 0 0 18px rgba(112, 232, 255, .35); }
.cabinet-list__item img { width: 56px; height: 56px; object-fit: cover; border-radius: 7px; background: #06101b; }
.cabinet-list__item div { min-width: 0; display: grid; gap: 3px; }
.cabinet-list__item span { color: #70e8ff; font: 800 9px/1 ui-monospace, monospace; letter-spacing: .12em; }
.cabinet-list__item strong { font-size: 15px; }
.cabinet-list__item small { color: #9fb2c2; font: 700 10px/1.3 ui-monospace, monospace; }
.cabinet-list__row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: 7px; align-items: stretch; }
.cabinet-list__row[data-hidden="true"] .cabinet-list__item { opacity: .55; }
.cabinet-list__row[data-hidden="true"] .cabinet-list__item img { filter: grayscale(1); }
.cabinet-list__row[data-hidden="true"] .cabinet-list__item small { color: #ff9ac9; }
.cabinet-list__toggle { min-width: 58px; border: 1px solid rgba(255,255,255,.15); border-radius: 12px; background: rgba(255,255,255,.06); color: #b8cada; font: 800 10px/1 ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.cabinet-list__toggle:hover { border-color: #70e8ff; background: rgba(112, 232, 255, .12); color: #fff; }
.cabinet-list__toggle[aria-pressed="false"] { border-color: rgba(255, 154, 201, .5); color: #ff9ac9; }
.is-editing .control-hint,
.is-editing .cabinet-prompt { opacity: 0; pointer-events: none; }

.play-layer { position: fixed; z-index: 20; inset: 0; pointer-events: none; }
.play-layer[hidden] { display: none; }
.play-screen {
  position: absolute;
  overflow: hidden;
  background: #000;
  border-radius: 3px;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--active-cabinet-accent, #8fd7ff) 45%, transparent), 0 0 28px color-mix(in srgb, var(--active-cabinet-accent, #43c1ff) 30%, transparent);
  pointer-events: auto;
}
.play-screen iframe { display: block; width: 100%; height: 100%; border: 0; background: #000; }
.leave-cabinet {
  position: fixed;
  right: 22px;
  bottom: 20px;
  padding: 11px 16px;
  border: 1px solid rgba(143, 215, 255, .58);
  border-radius: 9px;
  background: rgba(7, 18, 30, .9);
  color: #fff;
  font-weight: 850;
  cursor: pointer;
  pointer-events: auto;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .42);
}
.leave-cabinet:hover { border-color: #ffd33d; color: #ffd33d; }
.play-actions { position: fixed; right: 22px; bottom: 20px; display: flex; gap: 8px; pointer-events: none; }
.play-actions .leave-cabinet { position: static; }
.play-actions .leave-cabinet[aria-pressed="true"] { border-color: #ffd33d; color: #ffd33d; }
/* Fullscreen: the game fills the viewport and the room behind it goes dark. This is the
   layout whether or not the browser granted real fullscreen, so the button always does
   something visible. */
.play-layer.is-fullscreen { background: #000; }
.play-layer.is-fullscreen .play-screen { border-radius: 0; box-shadow: none; }
.play-layer.is-fullscreen .play-actions { opacity: .35; transition: opacity .2s; }
.play-layer.is-fullscreen .play-actions:hover,
.play-layer.is-fullscreen .play-actions:focus-within { opacity: 1; }
.play-layer:fullscreen { background: #000; }
.is-playing .room-header,
.is-playing .control-hint,
.is-playing .cabinet-prompt { opacity: 0; pointer-events: none; }

/* — Interactive decor overlay (the calendar) — */
.decor-overlay { position: fixed; z-index: 21; inset: 0; display: grid; place-items: center; padding: 18px; background: rgba(2, 8, 16, .78); backdrop-filter: blur(6px); }
.decor-overlay[hidden] { display: none; }
.decor-overlay__card { display: grid; grid-template-rows: auto 1fr; width: min(1080px, 100%); height: min(860px, 100%); overflow: hidden; border: 1px solid rgba(143, 215, 255, .4); border-radius: 14px; background: #0b0f16; box-shadow: 0 30px 80px rgba(0, 0, 0, .6); }
.decor-overlay__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px 10px 18px; border-bottom: 1px solid rgba(143, 215, 255, .18); background: rgba(7, 18, 30, .9); }
.decor-overlay__title { font: 850 13px/1.2 ui-monospace, monospace; letter-spacing: .12em; text-transform: uppercase; color: #b8cada; }
.decor-overlay__close { position: static; padding: 8px 12px; font-size: 12px; box-shadow: none; }
.decor-overlay__close kbd { margin-left: 6px; padding: 1px 5px; border: 1px solid rgba(255,255,255,.25); border-radius: 4px; font: 700 10px/1 ui-monospace, monospace; }
.decor-overlay iframe { display: block; width: 100%; height: 100%; border: 0; background: #0b0f16; }
.is-viewing .room-header,
.is-viewing .control-hint,
.is-viewing .cabinet-prompt { opacity: 0; pointer-events: none; }

@media (max-width: 720px) {
  .room-header { padding: 14px; }
  .room-header h1 { font-size: 22px; }
  .back-link { padding: 8px 10px; font-size: 12px; }
  .edit-arcade { padding: 9px 11px; font-size: 11px; }
  .control-hint { left: 10px; right: 10px; bottom: 8px; justify-content: center; flex-wrap: wrap; }
  .control-hint span { padding: 5px 7px; }
  .cabinet-prompt { bottom: 84px; white-space: nowrap; }
  .leave-cabinet { right: 10px; bottom: 9px; padding: 8px 11px; font-size: 12px; }
  .play-actions { right: 10px; bottom: 9px; }
  .decor-overlay { padding: 8px; }
  .decor-overlay__card { border-radius: 10px; }
}



/* ══════════════════════════════════════════════════════════════════════════
   BUILD MODE — the room's own rules. The editor frame and every shared widget
   (topbar, rail, drawer, inspector, cards, swatches, colour picker) live in
   css/space-editor.css and are shared with the farm; this block is only what
   the arcade adds on top: its swatch patterns, its card kinds, the cabinet
   catalog and the avatar tab.
   ══════════════════════════════════════════════════════════════════════════ */
.swatch[data-pattern="checker"] .swatch__chip { background: conic-gradient(var(--swatch-a) 25%, var(--swatch-b) 0 50%, var(--swatch-a) 0 75%, var(--swatch-b) 0); background-size: 50% 50%; }
.swatch[data-pattern="stripes"] .swatch__chip { background: repeating-linear-gradient(90deg, var(--swatch-a) 0 10px, var(--swatch-b) 10px 13px); }
.swatch[data-pattern="planks"] .swatch__chip,
.swatch[data-pattern="tiles"] .swatch__chip,
.swatch[data-pattern="acoustic"] .swatch__chip,
.swatch[data-pattern="panels"] .swatch__chip { background: repeating-linear-gradient(0deg, var(--swatch-a) 0 10px, var(--swatch-b) 10px 12px); }
.swatch[data-pattern="brick"] .swatch__chip,
.swatch[data-pattern="cinderblock"] .swatch__chip { background: linear-gradient(0deg, var(--swatch-b) 2px, transparent 2px) 0 0 / 100% 9px, linear-gradient(90deg, var(--swatch-b) 2px, transparent 2px) 0 0 / 16px 100%, var(--swatch-a); }
.swatch[data-pattern="chevron"] .swatch__chip,
.swatch[data-pattern="diamonds"] .swatch__chip { background: repeating-linear-gradient(45deg, var(--swatch-a) 0 8px, var(--swatch-b) 8px 12px); }
.swatch[data-pattern="neon-grid"] .swatch__chip { background: linear-gradient(0deg, var(--swatch-b) 1px, transparent 1px) 0 0 / 100% 9px, linear-gradient(90deg, var(--swatch-b) 1px, transparent 1px) 0 0 / 9px 100%, var(--swatch-a); box-shadow: inset 0 0 8px var(--swatch-b); }
.swatch[data-pattern="starfield"] .swatch__chip { background: radial-gradient(circle at 20% 30%, var(--swatch-b) 1px, transparent 2px), radial-gradient(circle at 70% 60%, var(--swatch-b) 1px, transparent 2px), radial-gradient(circle at 45% 80%, var(--swatch-b) 1px, transparent 2px), var(--swatch-a); }
.swatch[data-pattern="galaxy-carpet"] .swatch__chip,
.swatch[data-pattern="memphis"] .swatch__chip,
.swatch[data-pattern="terrazzo"] .swatch__chip { background: radial-gradient(circle at 30% 40%, var(--swatch-b) 3px, transparent 4px), radial-gradient(circle at 75% 65%, var(--swatch-b) 3px, transparent 4px), var(--swatch-a); }
.decor-card__icon[data-kind="strip"] { background: linear-gradient(180deg, rgba(0,0,0,.35) 42%, var(--decor-tint) 42% 58%, rgba(0,0,0,.35) 58%); box-shadow: inset 0 0 12px var(--decor-tint); color: transparent; }
.decor-card__icon[data-kind="text-sign"] { font-size: 11px; letter-spacing: .06em; }
.decor-card__icon[data-kind="rug"] { background: var(--decor-tint); color: transparent; box-shadow: inset 0 0 0 5px rgba(255,255,255,.18); }
/* A rendered thumbnail sits on a dark plate with a hint of the item's tint behind it, so neon glows and props read as objects. */
.decor-card__icon[data-picture="true"] { background: radial-gradient(ellipse at 50% 60%, color-mix(in srgb, var(--decor-tint) 28%, transparent) 0%, rgba(0,0,0,.55) 75%), #0a0f18; box-shadow: none; }
.decor-card__icon[data-picture="true"] img { object-fit: contain; padding: 3px; box-sizing: border-box; }
.decor-card__icon[data-kind="poster"] img { object-fit: cover; padding: 0; }
.is-editing .room-header { display: none; }
/* Cabinets tab: a card per game to add, then a row per placed cabinet. */
.cabinet-catalog { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
.cabinet-catalog .decor-card img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 7px; background: #06101b; }
.cabinet-list__row { grid-template-columns: minmax(0, 1fr) auto; }

/* — Avatar tab — */
.avatar-preview { position: relative; height: 300px; margin-bottom: 14px; overflow: hidden; border: 1px solid rgba(112,232,255,.28); border-radius: 14px; background: radial-gradient(circle at 50% 62%, rgba(112,232,255,.2), transparent 42%), linear-gradient(180deg, #111a28, #080b12); }
.avatar-preview::after { content: ""; position: absolute; left: 18%; right: 18%; bottom: 22px; height: 12px; border-radius: 50%; background: rgba(112,232,255,.22); filter: blur(7px); }
.avatar-preview canvas { position: relative; z-index: 1; display: block; width: 100%; height: 100%; transition: opacity .2s; }
.avatar-preview canvas[data-state="loading"] { opacity: .35; }
.avatar-preview__hint { position: absolute; z-index: 2; right: 12px; top: 11px; color: #70e8ff; font: 800 8px/1 ui-monospace, monospace; letter-spacing: .14em; text-transform: uppercase; }
.avatar-preview__caption { position: absolute; z-index: 2; left: 14px; bottom: 12px; padding: 6px 10px; border-radius: 7px; background: rgba(4, 10, 18, .7); color: #fff; font: 900 13px/1 "Arial Black", sans-serif; letter-spacing: -.01em; text-transform: uppercase; }
.avatar-preview__caption:empty { display: none; }
.avatar-picker { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.avatar-card { display: grid; gap: 4px; min-width: 0; padding: 6px 6px 8px; border: 1px solid rgba(255,255,255,.12); border-radius: 12px; background: rgba(255,255,255,.04); color: #dbe8f1; text-align: left; cursor: pointer; transition: border-color .12s, background .12s; }
.avatar-card:hover { border-color: #70e8ff; background: rgba(112,232,255,.1); }
.avatar-card[aria-pressed="true"] { border-color: #ffd33d; box-shadow: 0 0 0 1px #ffd33d, 0 0 18px rgba(255, 211, 61, .25); background: rgba(255,211,61,.09); color: #fff; }
.avatar-card__figure { display: grid; place-items: center; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 8px; background: radial-gradient(circle at 50% 70%, rgba(112,232,255,.22), transparent 55%), linear-gradient(180deg, #16223a, #0a0f18); color: #8feeff; font: 900 24px/1 "Arial Black", sans-serif; }
.avatar-card[data-family="ogre"] .avatar-card__figure { background: radial-gradient(circle at 50% 70%, rgba(150, 230, 120, .2), transparent 55%), linear-gradient(180deg, #1c2a1a, #0a0f0a); color: #c9f29d; }
.avatar-card[data-family="skeleton"] .avatar-card__figure { background: radial-gradient(circle at 50% 70%, rgba(200, 180, 255, .2), transparent 55%), linear-gradient(180deg, #25203a, #0d0b14); color: #ece5ff; }
.avatar-card[data-family="villager"] .avatar-card__figure { background: radial-gradient(circle at 50% 70%, rgba(255, 190, 130, .2), transparent 55%), linear-gradient(180deg, #3a2a1e, #140d09); color: #ffd2ad; }
.avatar-card__figure img { display: block; width: 100%; height: 100%; object-fit: contain; }
.avatar-card[aria-pressed="true"] .avatar-card__figure { box-shadow: inset 0 0 0 1px rgba(255, 211, 61, .4); }
.avatar-card__name { padding: 2px 2px 0; color: inherit; font: 800 11px/1.25 ui-monospace, monospace; }
.avatar-card__meta { padding: 0 2px; color: #71899a; font: 700 8px/1 ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; }

@media (max-width: 1240px) {
  .avatar-picker, .cabinet-catalog { gap: 6px; }
}
@media (max-width: 900px) {
  .avatar-preview { height: 200px; }
}