/* Participant surface. Sharp edges, neon accents, no gradient, no glow. */

html, body { height: 100%; overscroll-behavior: none; }
body { user-select: none; touch-action: manipulation; }

#app {
	min-height: 100dvh;
	display: grid;
	grid-template-rows: auto auto 1fr auto;
	padding: max(env(safe-area-inset-top), 16px) 20px max(env(safe-area-inset-bottom), 20px);
	gap: 28px;
}

/* ---- top bar ---- */
.topbar {
	display: flex; align-items: center; justify-content: space-between;
	border-bottom: 1px solid var(--border);
	padding-bottom: 12px;
}
.brand { display: inline-flex; align-items: baseline; gap: 10px; }
.brand-mark {
	font-family: var(--font-mono);
	font-weight: 700;
	font-size: 16px;
	letter-spacing: var(--track-xwide);
	color: var(--fg);
}
.brand-sub {
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: var(--track-xwide);
	color: var(--fg-mute);
}

.status { display: inline-flex; align-items: center; gap: 8px; }
.status .dot {
	width: 8px; height: 8px;
	background: var(--fg-mute);
	transition: background 120ms linear;
}
.status .label { font-size: 10px; color: var(--fg-mute); }
.status[data-state="ok"] .dot { background: var(--neon-green); }
.status[data-state="err"] .dot { background: var(--neon-magenta); }
.status[data-state="ok"] .label { color: var(--fg-dim); }
.status[data-state="err"] .label { color: var(--neon-magenta); }

/* ---- identity readout ---- */
.identity {
	margin-top: 4px;
	display: flex; flex-direction: column; gap: 8px;
}
.row {
	display: flex; align-items: baseline; gap: 10px;
	border-bottom: 1px solid var(--border);
	padding-bottom: 10px;
}
.meta-label {
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: var(--track-xwide);
	color: var(--fg-mute);
	min-width: 64px;
}
.meta-sep { color: var(--border-2); font-family: var(--font-mono); font-size: 12px; }
.meta-value {
	font-size: 18px;
	color: var(--fg);
	letter-spacing: 0.04em;
	font-weight: 500;
}
.counter .meta-value { font-size: 22px; color: var(--neon-green); font-weight: 700; }

/* ---- tap target: brutalist square ---- */
.tap {
	position: relative;
	justify-self: center; align-self: center;
	width: min(78vw, 320px); height: min(78vw, 320px);
	border: 0; padding: 0; background: var(--bg-1);
	font: inherit; cursor: pointer;
	display: grid; place-items: center;
}
.tap-frame {
	position: absolute; inset: 0;
	border: 2px solid var(--neon-green);
	pointer-events: none;
	transition: background 60ms linear, border-color 60ms linear;
}
.tap-label {
	font-family: var(--font-mono);
	font-weight: 700;
	font-size: clamp(40px, 11vw, 60px);
	letter-spacing: var(--track-xwide);
	color: var(--fg);
	transform: translateZ(0);
}
.tap:active .tap-frame { background: var(--neon-green); }
.tap:active .tap-label { color: var(--bg); }

/* corner ticks — structural detail */
.tap::before, .tap::after {
	content: "";
	position: absolute;
	width: 14px; height: 14px;
	border: 2px solid var(--neon-green);
	pointer-events: none;
}
.tap::before { top: -7px; left: -7px;  border-right: 0; border-bottom: 0; }
.tap::after  { bottom: -7px; right: -7px; border-left: 0; border-top: 0; }

/* ---- motion control ---- */
.motion {
	display: flex; flex-direction: column; align-items: center; gap: 8px;
	border-top: 1px solid var(--border);
	padding-top: 16px;
}
.ghost {
	background: transparent;
	color: var(--fg);
	border: 1px solid var(--border-2);
	padding: 14px 22px;
	border-radius: var(--radius-0);
	font-family: var(--font-mono);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: var(--track-wide);
	cursor: pointer;
	min-width: 220px;
}
.ghost[disabled] { opacity: 0.5; cursor: default; }
.ghost.enabled { color: var(--neon-green); border-color: var(--neon-green); }
.hint {
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: var(--track-xwide);
	color: var(--fg-mute);
}

/* Flash on emit — sharp, not a soft pulse */
@keyframes emit {
	0%   { background: var(--neon-green); }
	60%  { background: var(--neon-green); }
	100% { background: transparent; }
}
.tap.emit .tap-frame { animation: emit 140ms steps(2, end); }
.tap.emit .tap-label { animation: emit-label 140ms steps(2, end); }
@keyframes emit-label {
	0%   { color: var(--bg); }
	60%  { color: var(--bg); }
	100% { color: var(--fg); }
}