/* The inside of your home (js/lair-room.js). The canvas sizes itself to whole device pixels; the stage
   around it is the same dark as the room's shadows so any letterboxing disappears. */
.vg-room {
	margin: 0 0 12px;
	border: 1px solid var(--vg-border, rgba(139, 26, 26, 0.35));
	border-radius: 12px;
	background: #0a0709;
	overflow: hidden;
}
/* The site styles every <button> (Cinzel caps, fixed height): start the item cards and slot chips from scratch. */
.vg-room .vg-room__pick,
.vg-room .vg-room__slots button { all: unset; box-sizing: border-box; }
.vg-room .vg-room__pick > * { display: block; text-transform: none; letter-spacing: 0; white-space: normal; }
.vg-room__stage {
	display: flex;
	justify-content: center;
	align-items: center;
	background: #0a0709;
	line-height: 0;
}
.vg-room__canvas {
	display: block;
	image-rendering: pixelated;
	image-rendering: crisp-edges;
	touch-action: manipulation;
}
.vg-room__caption {
	padding: 7px 12px;
	font: 400 12px/1.4 'Inter', system-ui, sans-serif;
	color: var(--vg-text-dim, #b8ac98);
	text-align: center;
	border-top: 1px solid rgba(212, 176, 80, 0.12);
	min-height: 1.4em;
}
.vg-room__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 0 12px 10px;
	font-size: 12px;
	color: var(--vg-text-faint, #8a7f70);
}
.vg-room__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 34px;
	padding: 0 12px;
	border: 1px solid rgba(212, 176, 80, 0.45);
	border-radius: 7px;
	background: rgba(40, 24, 14, 0.6);
	color: var(--vg-gold, #d4b050);
	font: 600 12px/1 'Inter', system-ui, sans-serif;
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
}
.vg-room__btn--primary {
	background: linear-gradient(180deg, rgba(139, 26, 26, 0.75), rgba(90, 14, 18, 0.75));
	border-color: rgba(212, 120, 90, 0.55);
	color: #f6e6c8;
}
.vg-room__btn:disabled { opacity: 0.45; cursor: default; }
.vg-room__btn:focus-visible, .vg-room__pick:focus-visible, .vg-room__slots button:focus-visible {
	outline: 2px solid var(--vg-gold-bright, #f0d070);
	outline-offset: 2px;
}

.vg-room__panel {
	border-top: 1px solid rgba(212, 176, 80, 0.14);
	padding: 10px 12px 12px;
}
.vg-room__live { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 10px; font-size: 12px; color: var(--vg-text-dim, #b8ac98); }
.vg-room__slots {
	/* every tab in view (they wrap), locked ones last */
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	padding-bottom: 8px;
}
.vg-room__slots::-webkit-scrollbar { display: none; }
.vg-room .vg-room__slots button {
	flex: 0 0 auto;
	min-height: 32px;
	padding: 0 11px;
	border: 1px solid rgba(212, 176, 80, 0.22);
	border-radius: 16px;
	background: rgba(20, 12, 14, 0.7);
	color: var(--vg-text-dim, #b8ac98);
	font: 500 12px/1 'Inter', system-ui, sans-serif;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
}
.vg-room .vg-room__slots button.is-locked { opacity: .45; cursor: help; }
.vg-room .vg-room__slots button.is-locked .vg2-ic { width: 11px; height: 11px; vertical-align: -1px; margin-left: 2px; }
.vg-room .vg-room__slots button.on {
	border-color: rgba(212, 176, 80, 0.7);
	color: var(--vg-gold-bright, #f0d070);
	background: rgba(60, 36, 16, 0.7);
}
.vg-room__items {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 8px;
}
.vg-room__item {
	display: flex;
	align-items: stretch;
	gap: 6px;
	border: 1px solid rgba(212, 176, 80, 0.16);
	border-radius: 9px;
	background: rgba(14, 9, 11, 0.7);
	padding: 4px;
}
.vg-room__item.on { border-color: rgba(212, 176, 80, 0.65); background: rgba(48, 30, 14, 0.6); }
/* Portrait backdrop cards: your own portrait on each backdrop, as it would hang */
.vg-room__bd { display: block; width: 40px; height: 48px; image-rendering: pixelated; border-radius: 2px; box-shadow: 0 0 0 2px #8a6a3a, 0 2px 4px rgba(0, 0, 0, .5); margin-bottom: 4px; }
.vg-room .vg-room__pick {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 5px 6px;
	border: 0;
	background: none;
	color: var(--vg-text, #d8ccb4);
	text-align: left;
	cursor: pointer;
	font: 400 12px/1.3 'Inter', system-ui, sans-serif;
}
.vg-room__pick b { font-weight: 600; color: var(--vg-text-bright, #f0e8d8); }
.vg-room__pick small { color: var(--vg-text-faint, #8a7f70); font-size: 11px; }
.vg-room__pick span { color: var(--vg-gold, #d4b050); font-size: 11px; }
.vg-room__item .vg-room__btn { align-self: center; }
.vg-room__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-top: 10px;
}
.vg-room__toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--vg-text-dim, #b8ac98); cursor: pointer; }
.vg-room__toggle input { accent-color: #c9a040; width: 16px; height: 16px; margin: 0; }
.vg-room__gold { color: var(--vg-gold, #d4b050); font-size: 12px; font-variant-numeric: tabular-nums; }
.vg-room__msg { flex: 1; min-width: 0; font-size: 12px; color: #9fd8a8; }
.vg-room__msg.bad { color: #ffb0a0; }

@media (max-width: 767px) {
	.vg-room { border-radius: 12px; }
	.vg-room__items { grid-template-columns: 1fr; }
	.vg-room__foot .vg-room__msg { flex-basis: 100%; order: 3; }
}

/* a piece's picture on its card (drawn from the room itself: lair-room.js Room.thumb) */
.vg-room .vg-room__pick { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: start; }
.vg-room .vg-room__pick > b, .vg-room .vg-room__pick > small, .vg-room .vg-room__pick > span { grid-column: 2; }
/* one box for every picture (lair-room.js TH_W × TH_H), the piece drawn at whole-pixel scale and centred in it */
.vg-room__thumb { grid-row: 1 / span 3; width: 96px; height: 72px; object-fit: contain; image-rendering: pixelated; border-radius: 6px; background: #0a0709; box-shadow: 0 0 0 1px rgba(212, 176, 80, 0.18); }
.vg-room__btn--sell { opacity: .8; }
.vg-room__foot .vg-room__msg a { color: var(--vg-gold-bright, #f0d070); }
/* visitors: admire the home */
.vg-room__social { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; padding: 8px 12px 10px; font-size: 12px; color: var(--vg-text-dim, #b8ac98); }
/* the gramophone's Play / Stop and what's on it (js/lair-room.js buildMusic) */
.vg-room__music { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; padding: 0 12px 8px; font-size: 12px; color: var(--vg-text-dim, #b8ac98); }
.vg-room__music[hidden] { display: none; }
.vg-room__now { font-style: italic; }
.vg-room__social .vg2-ic { width: 13px; height: 13px; vertical-align: -2px; color: #e05a6a; }
/* the room described in words, for screen readers only */
.vg-room__desc { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.vg-room { position: relative; }
/* a wide room on a narrow screen pans instead of shrinking */
.vg-room__stage.is-pan { justify-content: flex-start; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.vg-room__stage.is-pan canvas { flex: none; }
/* item cards: the picture and words on top, the buy / sell / commission buttons in a row underneath */
.vg-room__item { flex-direction: column; }
.vg-room__item .vg-room__acts { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 10px 10px; }
.vg-room__item .vg-room__acts .vg-room__btn { align-self: auto; min-height: 28px; height: auto; padding: 4px 12px; font-size: 11px; line-height: 1.2; }
.vg-room__items { grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
.vg-room__foot .vg-room__msg { flex: 1 1 220px; min-width: 0; }
.vg-room [hidden] { display: none !important; }   /* the site styles buttons with a display that would beat [hidden] */
/* A coven hall's "+N more" (funcs/coven_hall.php): the members past the portrait's 24 */
.vg-room__more { margin: -4px 0 12px; font: 400 12px/1.4 'Inter', system-ui, sans-serif; color: var(--vg-text-faint, #8a7f70); text-align: center; }