/* =========================================================
   BUILDER — Dragon Ball World Collision

   Solo quello che Bootstrap e ui.css non sanno fare: la
   griglia di pixel, i campioni di colore, le miniature dei
   pezzi e il palco del Pieces Linker. Tutto il resto delle
   pagine e scritto con le utility di Bootstrap.
   ========================================================= */

:root {
	--bld-checker-a: #2a2e38;
	--bld-checker-b: #20232b;
}

/* Scacchiera: lo sfondo di quello che e trasparente */
.bld-checker {
	background-color: var(--bld-checker-a);
	background-image:
		linear-gradient(45deg, var(--bld-checker-b) 25%, transparent 25%, transparent 75%, var(--bld-checker-b) 75%),
		linear-gradient(45deg, var(--bld-checker-b) 25%, transparent 25%, transparent 75%, var(--bld-checker-b) 75%);
	background-position: 0 0, 8px 8px;
	background-size: 16px 16px;
}

.bld-pixelated { image-rendering: pixelated; }

/* ui.css disattiva solo i .pixel-btn: qui servono anche i .ui-btn */
.ui-btn:disabled {
	opacity: 0.4;
	cursor: not-allowed;
	filter: grayscale(1);
}


/* =========================================================
   GRIGLIA
   ========================================================= */

.bld-grid {
	display: inline-block;
	line-height: 0;
	border: var(--ui-border);
	box-shadow: var(--ui-shadow);
	cursor: crosshair;
	touch-action: none;
	user-select: none;
}

.bld-row { display: flex; }

.bld-cell {
	flex: 0 0 auto;
	width: var(--cell, 16px);
	height: var(--cell, 16px);
	background-color: var(--bld-checker-a);
}

.bld-cell.is-odd { background-color: var(--bld-checker-b); }

.bld-grid--lines .bld-cell { box-shadow: inset -1px -1px 0 rgba(0, 0, 0, 0.35); }


/* =========================================================
   CAMPIONI DI COLORE
   ========================================================= */

.bld-swatch {
	width: 22px;
	height: 22px;
	padding: 0;
	border: 2px solid #000;
	cursor: pointer;
	font-family: inherit;
	font-size: 6px;
}

.bld-swatch.is-active {
	outline: 2px solid var(--ui-accent);
	outline-offset: 1px;
}

/* Campione con il codice scritto sopra, per i colori usati */
.bld-swatch--code {
	width: auto;
	padding: 0 4px;
}

.bld-color {
	width: 34px;
	height: 28px;
	padding: 0;
	border: 2px solid #000;
	background: none;
	cursor: pointer;
}


/* =========================================================
   ELENCO DEI PEZZI
   ========================================================= */

.bld-list { max-height: 68vh; }

.bld-piece {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	padding: 4px 6px;
	border: 2px solid transparent;
	background: rgba(255, 255, 255, 0.04);
	color: var(--ui-text);
	font-family: inherit;
	font-size: 8px;
	line-height: 1.6;
	text-align: left;
	cursor: pointer;
}

.bld-piece:hover { border-color: rgba(255, 255, 255, 0.3); }

.bld-piece.is-active {
	border-color: var(--ui-accent);
	background: rgba(255, 193, 7, 0.12);
}

.bld-thumb {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	object-fit: contain;
	border: 2px solid #000;
	image-rendering: pixelated;
}


/* =========================================================
   PALCO DEL PIECES LINKER
   ========================================================= */

.bld-stage {
	position: relative;
	overflow: auto;
	min-height: 52vh;
	border: var(--ui-border);
	outline: none;
}

.bld-stage:focus-visible { border-color: var(--ui-accent); }

.bld-layer {
	position: absolute;
	left: 0;
	top: 0;
	image-rendering: pixelated;
	pointer-events: none;
}

.bld-layer--moving { outline: 1px dashed var(--ui-accent); }


/* =========================================================
   AVVISI
   ========================================================= */

.bld-toasts {
	position: fixed;
	left: 8px;
	bottom: 8px;
	z-index: 3100;
	display: flex;
	flex-direction: column;
	gap: 6px;
	max-width: min(420px, 80vw);
}

.bld-toast {
	padding: 8px 10px;
	border: var(--ui-border);
	background: var(--ui-panel-solid);
	box-shadow: var(--ui-shadow);
	font-size: 8px;
	line-height: 1.8;
}

.bld-toast--ok    { border-color: var(--ui-success); }
.bld-toast--warn  { border-color: var(--ui-accent); }
.bld-toast--error { border-color: var(--ui-danger); }