/* Dirty Business — chrome only. Everything in the world is drawn by WebGL. */

:root {
	--ink: #eaf1f8;
	--ink-dim: #9aa9bb;
	--panel: rgba(14, 19, 26, 0.94);
	--edge: rgba(150, 175, 205, 0.18);
	--go: #3d7dff;
	--good: #43d18a;
	--warn: #ffb03a;
	--font: 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
}

* { box-sizing: border-box; }

/*
 * The UA rule for [hidden] is display:none at the lowest specificity, so any
 * class that sets display beats it. Every overlay in this file sets display:
 * grid, which meant a "hidden" panel stayed laid out over the whole viewport
 * and swallowed every click on the screen behind it. Found by the smoke test
 * on the first run, and it would have shipped as "the start button does
 * nothing" with no error anywhere.
 */
[hidden] { display: none !important; }

html, body {
	margin: 0;
	height: 100%;
	overflow: hidden;
	background: #0a0e14;
	color: var(--ink);
	font-family: var(--font);
	-webkit-text-size-adjust: 100%;
}

#stage {
	display: block;
	width: 100%;
	height: 100%;
	cursor: crosshair;
	touch-action: none;
}

/* ------------------------------------------------------------------ HUD */

.hud {
	position: fixed;
	inset: 0;
	pointer-events: none;
	padding: max(14px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
	display: grid;
	grid-template-columns: 1fr auto;
	align-content: start;
	gap: 10px;
	font-variant-numeric: tabular-nums;
}

.hud__left { display: grid; gap: 7px; max-width: min(46vw, 380px); }
.hud__right { display: grid; gap: 6px; justify-items: end; }

.meter { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 9px; }
.meter__label { font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-dim); white-space: nowrap; }
.meter__track { height: 7px; border-radius: 4px; background: rgba(8, 12, 18, 0.62); box-shadow: inset 0 0 0 1px var(--edge); overflow: hidden; }
.meter__track i { display: block; height: 100%; width: 0; border-radius: 4px; background: linear-gradient(90deg, #2f6fe0, #63d6ff); }
.meter--obj .meter__track i { background: linear-gradient(90deg, #2c9b6b, var(--good)); }
.meter--obj .meter__label { color: var(--ink); text-transform: none; letter-spacing: 0; font-size: 13px; }
.meter__pct { font-size: 13px; min-width: 3.2em; text-align: right; }

.cash { font-size: 26px; font-weight: 700; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6); }
.combo { font-size: 17px; font-weight: 700; color: var(--warn); }
.timer { font-size: 13px; color: var(--ink-dim); }
.timer--gone { color: #ff7a6b; }

.reticle {
	position: fixed;
	left: 50%;
	top: 50%;
	width: 5px;
	height: 5px;
	margin: -2.5px 0 0 -2.5px;
	border-radius: 50%;
	background: rgba(235, 245, 255, 0.75);
	box-shadow: 0 0 0 1.5px rgba(0, 0, 0, 0.45);
}

.nozzles {
	position: fixed;
	left: 50%;
	bottom: max(16px, env(safe-area-inset-bottom));
	transform: translateX(-50%);
	display: flex;
	gap: 6px;
	pointer-events: auto;
}

.nozzle {
	font: inherit;
	font-size: 12px;
	color: var(--ink-dim);
	background: rgba(10, 15, 21, 0.72);
	border: 1px solid var(--edge);
	border-radius: 7px;
	padding: 6px 10px;
	cursor: pointer;
}

.nozzle b { color: var(--ink); margin-right: 5px; }
.nozzle--on { color: var(--ink); border-color: rgba(99, 214, 255, 0.55); background: rgba(24, 46, 74, 0.82); }

.hint {
	position: fixed;
	left: 50%;
	bottom: calc(max(16px, env(safe-area-inset-bottom)) + 42px);
	transform: translateX(-50%);
	margin: 0;
	font-size: 12.5px;
	color: var(--ink-dim);
	background: rgba(10, 15, 21, 0.6);
	padding: 5px 11px;
	border-radius: 20px;
	white-space: nowrap;
}

.hint b { color: var(--ink); }

/* --------------------------------------------------------------- toasts */

.toasts {
	position: fixed;
	left: 50%;
	top: 22%;
	transform: translateX(-50%);
	display: grid;
	gap: 6px;
	justify-items: center;
	pointer-events: none;
	z-index: 5;
}

.toast {
	font-size: 15px;
	font-weight: 600;
	padding: 7px 15px;
	border-radius: 8px;
	background: rgba(12, 18, 26, 0.86);
	border: 1px solid var(--edge);
	transition: opacity 0.5s ease, transform 0.5s ease;
}

.toast--good { color: var(--good); }
.toast--big { font-size: 20px; padding: 10px 20px; }
.toast--out { opacity: 0; transform: translateY(-10px); }

/* -------------------------------------------------------------- overlays */

.overlay {
	position: fixed;
	inset: 0;
	display: grid;
	place-items: center;
	padding: 20px;
	background: radial-gradient(120% 90% at 50% 0%, rgba(16, 28, 44, 0.86), rgba(6, 9, 13, 0.95));
	overflow: auto;
	z-index: 10;
}

.panel {
	width: min(560px, 100%);
	background: var(--panel);
	border: 1px solid var(--edge);
	border-radius: 16px;
	padding: 26px;
	box-shadow: 0 26px 70px rgba(0, 0, 0, 0.55);
}

.panel--wide { width: min(820px, 100%); }

.eyebrow { margin: 0 0 6px; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-dim); }
h1 { margin: 0 0 14px; font-size: clamp(24px, 3.6vw, 34px); line-height: 1.16; }
h2 { margin: 0 0 12px; font-size: clamp(19px, 2.4vw, 24px); }
.lede { margin: 0 0 18px; color: var(--ink-dim); line-height: 1.55; max-width: 56ch; }
.muted { color: var(--ink-dim); margin: 0; }

.wallet { display: flex; align-items: baseline; gap: 14px; margin-bottom: 16px; }
.wallet__cash { font-size: 30px; font-weight: 700; }
.wallet__stats { font-size: 13px; color: var(--ink-dim); }

.shop { display: grid; gap: 8px; margin-bottom: 20px; }
.shop-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 11px 13px; border: 1px solid var(--edge); border-radius: 10px; }
.shop-row b { display: block; font-size: 14.5px; }
.shop-row span { display: block; font-size: 12.5px; color: var(--ink-dim); margin-top: 2px; }

.btn {
	font: inherit;
	font-weight: 600;
	color: #fff;
	background: var(--go);
	border: 0;
	border-radius: 9px;
	padding: 12px 22px;
	cursor: pointer;
}

.btn:disabled { background: #2b3442; color: #6c7889; cursor: not-allowed; }
.btn--small { padding: 8px 14px; font-size: 13px; }
.btn--go { width: 100%; font-size: 16px; padding: 14px; }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }

.card {
	font: inherit;
	text-align: left;
	color: var(--ink);
	background: rgba(22, 30, 41, 0.9);
	border: 1px solid var(--edge);
	border-radius: 12px;
	padding: 16px;
	cursor: pointer;
	display: grid;
	gap: 7px;
	align-content: start;
}

.card:hover, .card:focus-visible { border-color: rgba(99, 214, 255, 0.6); background: rgba(28, 42, 60, 0.95); }
.card h3 { margin: 0; font-size: 16.5px; }
.card p { margin: 0; font-size: 13px; color: var(--ink-dim); line-height: 1.45; }
.card__mod b { color: var(--warn); }
.card__pay { font-size: 20px !important; font-weight: 700; color: var(--good) !important; }
.card__teach { font-size: 12px !important; font-style: italic; }
.card--perk h3 { color: #8fd0ff; }

.runend { font-size: 17px; line-height: 1.6; margin: 0 0 20px; }

/* ---------------------------------------------------------------- touch */

.touch { position: fixed; inset: 0; pointer-events: none; }
.touch__pad {
	position: absolute;
	left: 6%;
	bottom: 12%;
	width: 108px;
	height: 108px;
	border-radius: 50%;
	border: 1px dashed var(--edge);
	display: grid;
	place-items: center;
	font-size: 12px;
	color: var(--ink-dim);
}
.touch__trigger {
	position: absolute;
	right: 6%;
	bottom: 12%;
	width: 108px;
	height: 108px;
	border-radius: 50%;
	border: 1px solid rgba(99, 214, 255, 0.5);
	background: rgba(24, 46, 74, 0.7);
	color: var(--ink);
	font: inherit;
	font-size: 14px;
	pointer-events: auto;
}

@media (max-width: 620px) {
	.hint { display: none; }
	.nozzles { bottom: auto; top: max(64px, env(safe-area-inset-top)); }
}

:focus-visible { outline: 2px solid #63d6ff; outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
	.toast { transition: none; }
}