* {
	padding: 0;
	margin: 0;
	font-family: monospace;
}

body {
	overflow: hidden;
	position: fixed;
	-webkit-overflow-scrolling: touch;
}

#viewport-canvas {
	position: absolute;
	top: 0;
	left: 0;
	image-rendering: pixelated;
	width: 100vw;
	height: 100vh;
	background-color: #e0e0e0;
}

#ui-wrapper {
	position: fixed;
	bottom: top;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #ffffff;
	transition: background 1s;
}

#ui-wrapper>#color-wrapper,
#zoom-wrapper,
#chat-panel {
	visibility: hidden;
}


#ui-wrapper[hide=true] {
	pointer-events: none;
	background: none;
}

#ui-wrapper[hide=true]>#color-wrapper,
#zoom-wrapper,
#chat-panel {
	visibility: visible;
}

/* color UI removed from public surface */
#color-wrapper, #color-swatch, #color-field { display: none !important; }

/* bottom-docked collapsible chat panel */
#chat-panel {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 800;
	pointer-events: all;
	font-size: 14px;
}

#chat-header {
	height: 44px;
	padding: 0 16px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: rgba(255,255,255,0.95);
	border-top: 1px solid #000;
	cursor: pointer;
	user-select: none;
}

#chat-title { font-weight: 700; }
#chat-toggle { font-size: 16px; }

#chat-body {
	height: 0;
	overflow: hidden;
	background: rgba(255,255,255,0.97);
	border-top: 1px solid #000;
}

#chat-panel.chat-expanded #chat-body {
	height: min(55vh, 420px);
}

#chat-messages {
	height: calc(100% - 44px);
	overflow-y: auto;
	padding: 12px 16px;
	box-sizing: border-box;
	line-height: 1.35;
}

.chat-msg { margin-bottom: 8px; }
.chat-name { font-weight: 700; }

#chat-input-row {
	height: 44px;
	display: flex;
	gap: 8px;
	padding: 8px 16px;
	box-sizing: border-box;
	border-top: 1px solid #000;
}

#chat-input {
	flex: 1;
	border: 1px solid #000;
	padding: 8px;
	background: #fff;
}

#chat-send {
	border: 1px solid #000;
	background: #fff;
	padding: 0 12px;
}

/* keep defaults compact on mobile */
@media (hover: none) {
	#chat-panel.chat-expanded #chat-body { height: min(50vh, 360px); }
}

#loading-p {
	position: absolute;
	top: 50%;
	left: 50%;
	font-size: 1.4em;
	transform: translate(-50%, -50%);
}

#zoom-wrapper {
	position: absolute;
	top: 16px;
	right: 16px;
}

.zoom-button {
	width: 36px;
	height: 36px;
	border: none;
	background: none;
	outline: none;
	background-color: red;
	font-size: 24px;
	background-color: #ffffff;
	border: 1px solid black;
	cursor: pointer;
	pointer-events: all;
	user-select: none;
}

#help-button {
	position: absolute;
	top: 16px;
	left: 16px;
	z-index: 900;
	height: 36px;
	padding: 0 12px;
	background-color: #ffffff;
	border: 1px solid #000;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

#help-popup {
	font-size: 16px;
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 1000;
	width: 800px;
	max-width: calc(100vw - 60px);
	padding: 20px;
	background-color: #ffffff;
	border: 1px solid #000;
}

#close-help-popup {
	font-size: inherit;
	margin-top: 20px;
	text-decoration: underline;
	cursor: pointer;
	background: none;
	border: none;
}

#help-text-mobile {
	display: none;
}

@media (hover: none) {
	#help-text-desktop {
		display: none;
	}

	#help-text-mobile {
		display: inline;
	}
}