body {
	background: #aaaaaa;
	font-size: 17px;
	font-family: "Arial", "Helvetica", "sans-serif";
}

a {
	text-decoration: underline;
}

a:hover {
	text-decoration: none;
}

.preview-base {
	width: 640px;
	height: 511px;
	position:absolute;
	left: 640px;
	top: -2px;
}

.explanation-base {
	width: 600px;
	height: 511px;
	position:absolute;
	left: 640px;
	top: 0.75em;
	padding:0.75em;
}

#container {
	width: 640px;
	height: 511px;
	position: absolute;
	left: 0px;
	top: 0px;
	z-index: 10;
}

#naplps_field_container {
	position: absolute;
	left: 12px;
	top: 520px;
	z-index: 1;
	width: 597px;
	height: 120px;
	border: 1px solid black;
	border-radius: 0.5em;
	padding: 0.5em;
	margin: 0px;
	background-color: #000000;
	opacity: 0.8;
}

#canvas {
	/* */
}

.sketch {
	position: absolute;
	width: 640px;
	height: 511px;
	top: 4px;
	left: 0px;
}

#preview {
	/* */
}

#explanation {
	font-size: 0.975em;
	text-shadow: 2px 2px 2px #000000;
	color: #ffffff;	
}

#explanation-bg {
	background: #002244;
	opacity: 0.75;
}

.explanation-base a {
	color: #ffffff;
}

/* ── Tezos wallet / mint UI ── */
.tezos-btn {
	background: #001a33;
	color: #ffffff;
	border: 1px solid #0055aa;
	border-radius: 0.3em;
	padding: 0.1em 0.55em;
	cursor: pointer;
	font-size: 0.82em;
	font-family: inherit;
	vertical-align: middle;
}

.tezos-btn:hover {
	background: #0055aa;
}

.tezos-status {
	color: #ffcc00;
	font-size: 0.82em;
	vertical-align: middle;
}

.tezos-address {
	color: #88ccff;
	font-size: 0.82em;
	vertical-align: middle;
	font-family: monospace;
}

.tezos-size {
	color: #ffcc00;
	font-size: 0.82em;
	vertical-align: middle;
}

/* ── Live Drawing button ── */
#btn-live-drawing {
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	background: #003366;
	color: #ffffff;
	border: 2px solid #0077cc;
	border-radius: 0.4em;
	padding: 0.5em 1em;
	cursor: pointer;
	font-size: 0.9em;
	font-family: inherit;
	font-weight: bold;
}

#btn-live-drawing:hover {
	background: #0077cc;
}

/* ── Drawing mode container ── */
#drawing-container {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	z-index: 1000;
	background-color: #222;
}

#drawing-container.active {
	display: block;
}

#drawing-container canvas {
	display: block;
}

#drawing-container #loading {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: white;
	font-family: sans-serif;
	pointer-events: none;
	z-index: 10;
}

#drawing-container .label {
	position: absolute;
	color: white;
	font-family: sans-serif;
	font-size: 14px;
	pointer-events: none;
	text-align: center;
	transform: translate(-50%, -100%);
	text-shadow: 1px 1px 2px black;
	z-index: 5;
}

#drawing-container .label-small {
	font-size: 10px;
	margin-top: 5px;
}

#drawing-container #reset-overlay {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	pointer-events: none;
	z-index: 100;
	display: none;
}

#drawing-container #reset-circle-left,
#drawing-container #reset-circle-right {
	position: absolute;
	border: 8px solid rgba(255, 0, 0, 0.5);
	border-radius: 50%;
	box-sizing: border-box;
	top: 50%;
	left: 50%;
}

#drawing-container #confirm-overlay {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	pointer-events: none;
	z-index: 100;
	display: none;
}

#drawing-container #confirm-circle-left,
#drawing-container #confirm-circle-right {
	position: absolute;
	border: 8px solid rgba(0, 255, 0, 0.5);
	border-radius: 50%;
	box-sizing: border-box;
	top: 50%;
	left: 50%;
}

#btn-exit-drawing {
	position: fixed;
	top: 20px;
	right: 20px;
	z-index: 1001;
	background: rgba(255, 0, 0, 0.7);
	color: white;
	border: 2px solid #ff4444;
	border-radius: 0.4em;
	padding: 0.5em 1em;
	cursor: pointer;
	font-size: 1em;
	font-weight: bold;
}