@font-face { font-family: 'Lilita One'; src: url(../../assets/fonts/LilitaOne-Regular.woff) format('woff'); font-display: block; }
@font-face { font-family: 'Nunito Black'; src: url(../../assets/fonts/Nunito-Black.woff) format('woff'); font-display: block; }

html, body {
	margin: 0; height: 100%; overflow: hidden;
	/* the game screen background of Tap Block Out, stretched over the window */
	background: #6a3fc2 url(../../assets/ui/bg_purple.webp) center / 100% 100% no-repeat;
	user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
	touch-action: none; overscroll-behavior: none;
}
#scene { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
#hud { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }

/* a GUI node: a zero-size point carrying scale, rotation and opacity; its picture is the skin around it */
.n { position: absolute; width: 0; height: 0; }
.skin { position: absolute; box-sizing: border-box; background-size: 100% 100%; background-repeat: no-repeat; border-color: transparent; }
.center { left: 50% !important; top: 50% !important; }
.full { position: fixed; left: 0 !important; top: 0 !important; width: 100%; height: 100%; }
.full > .skin { left: 0 !important; top: 0 !important; width: 100% !important; height: 100% !important; }
.block, .popup, .btn, .btn * { pointer-events: auto; }
.btn { cursor: pointer; }
.popup .n:not(.btn) > .skin { pointer-events: none; }

.txt {
	position: absolute; left: 0; top: 0; transform: translate(-50%, -50%);
	white-space: nowrap; text-align: center; line-height: 1.1;
	paint-order: stroke fill; pointer-events: none;
}
.txt.lilita { font-family: 'Lilita One', 'Nunito Black', sans-serif; }
.txt.nunito { font-family: 'Nunito Black', sans-serif; font-weight: 900; }

.confetti { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
.confetti > div { position: absolute; left: 0; top: 0; }

/* orders (ui/orders_hud.js), in the HUD reference px: two order slots framed in their colour, the white tray */
.orders { position: absolute; left: 0; top: 0; transform: translate(-50%, 0); display: flex; flex-direction: column; align-items: center; gap: 30px; }
.ord-row { display: flex; gap: 34px; height: 128px; align-items: center; }
.slot {
	box-sizing: border-box; height: 120px; padding: 12px; border-radius: 30px;
	background: var(--col); box-shadow: 0 9px 0 var(--edge), 0 14px 18px rgba(30, 10, 70, 0.35);
}
.slot.empty { width: 208px; background: rgba(255, 255, 255, 0.14); box-shadow: inset 0 0 0 6px rgba(255, 255, 255, 0.22); }
.slot .inner {
	display: flex; height: 100%; border-radius: 20px; overflow: hidden;
	background: linear-gradient(#ffffff, #eceaf3); box-shadow: inset 0 4px 0 rgba(0, 0, 0, 0.12);
}
.slot .cell { width: 92px; height: 100%; display: flex; align-items: center; justify-content: center; }
.slot .cell + .cell { border-left: 3px solid rgba(60, 40, 110, 0.12); }
.tray {
	display: flex; box-sizing: border-box; height: 108px; padding: 10px; border-radius: 28px;
	background: linear-gradient(#ffffff, #e7e3f0); box-shadow: 0 9px 0 #b9b0d3, 0 14px 18px rgba(30, 10, 70, 0.35);
}
.tray .cell { width: 96px; height: 100%; display: flex; align-items: center; justify-content: center; }
.tray .cell + .cell { border-left: 3px solid rgba(60, 40, 110, 0.12); }

/* a wound tape in a cell: a roll lying along the slot, its end showing on the right */
.roll {
	position: relative; box-sizing: border-box; width: 86%; height: 78%; border-radius: 7px 14px 14px 7px;
	background: linear-gradient(var(--lo) 0%, var(--c) 14%, var(--hi) 32%, var(--c) 52%, var(--lo) 100%);
	box-shadow: 0 3px 0 rgba(0, 0, 0, 0.18);
}
.roll::after {
	content: ''; position: absolute; right: -2px; top: 4%; width: 22%; height: 92%; border-radius: 50%;
	background: linear-gradient(var(--end), var(--lo)); box-shadow: inset 2px 0 0 rgba(255, 255, 255, 0.25);
}
/* the flying strip; its bottom centre is the anchor of its moves */
.strip {
	position: fixed; left: 0; top: 0; z-index: 5; pointer-events: none; transform-origin: 50% 100%;
	background: linear-gradient(90deg, var(--lo), var(--c) 12%, var(--c) 88%, var(--lo));
}

/* the level's item in the win window (view/prize.js), HUD reference px */
.prize { position: absolute; left: -260px; top: -260px; width: 520px; height: 520px; pointer-events: none; }