/* FINGER JAM  -  overlays and shell */
:root {
	--gs: 360px;
	--gr: 24px;
	--neon-a: #33e6ff;
	--neon-b: #ff3df0;
	--font: "Roboto Condensed", "sans-serif-condensed", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
	--ink: #eef1ff;
	--ink-dim: #9aa0b8;
	--green: #2ee86a;
	--red: #ff3348;
	--yellow: #ffd21f;
}
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body {
	width: 100%; height: 100%; overflow: hidden;
	background: #04040a; color: var(--ink);
	font-family: var(--font);
	user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
	overscroll-behavior: none;
}
body { touch-action: none; }
#game { position: fixed; inset: 0; display: block; touch-action: none; }
#safe {
	position: fixed; pointer-events: none; visibility: hidden;
	top: env(safe-area-inset-top, 0px); bottom: env(safe-area-inset-bottom, 0px);
	left: env(safe-area-inset-left, 0px); right: env(safe-area-inset-right, 0px);
}
.hidden { display: none !important; }

.iconBtn {
	position: fixed; z-index: 30;
	border: 1.5px solid color-mix(in srgb, var(--neon-a) 70%, transparent);
	border-radius: 30%;
	background: rgba(5, 6, 13, 0.7);
	box-shadow: 0 0 calc(var(--gs) * 0.03) color-mix(in srgb, var(--neon-a) 40%, transparent);
	display: grid; place-items: center; cursor: pointer;
}
.iconBtn svg { width: 46%; height: 46%; fill: var(--neon-a); }
.iconBtn:active { transform: scale(0.94); }

/* overlays live inside the neon frame */
#ui { position: fixed; z-index: 20; display: grid; }
#ui.hidden { display: none; }
.panel {
	grid-area: 1 / 1;
	display: flex; flex-direction: column; align-items: center; justify-content: safe center;
	gap: calc(var(--gs) * 0.032);
	padding: calc(var(--gs) * 0.07);
	border-radius: var(--gr);
	background: rgba(4, 5, 12, 0.55);
	-webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
	text-align: center;
	overflow-y: auto;
	animation: panelIn 0.2s ease-out;
}
#ui.dim .panel { background: rgba(4, 5, 12, 0.88); }
@keyframes panelIn { from { opacity: 0; transform: scale(0.97); } to { opacity: 1; transform: none; } }

.headline {
	font-size: calc(var(--gs) * 0.085); font-weight: 900; font-style: italic; line-height: 1;
	color: var(--neon-a);
	text-shadow: 0 0 calc(var(--gs) * 0.03) var(--neon-a);
}
.lead { font-size: calc(var(--gs) * 0.05); font-weight: 700; color: var(--ink); }
.sub { font-size: calc(var(--gs) * 0.042); color: var(--ink-dim); font-weight: 600; min-height: 1em; }
.fine { font-size: calc(var(--gs) * 0.036); color: var(--ink-dim); line-height: 1.35; max-width: 27em; }

.row { display: flex; gap: calc(var(--gs) * 0.03); width: 100%; justify-content: center; }
.row .btn { flex: 1; max-width: calc(var(--gs) * 0.4); }

/* buttons: neon outline tubes; primary is a lit green orb color */
.btn {
	font: 800 calc(var(--gs) * 0.046)/1 var(--font);
	color: var(--ink);
	padding: calc(var(--gs) * 0.038) calc(var(--gs) * 0.045);
	border: 1.5px solid color-mix(in srgb, var(--neon-a) 55%, transparent);
	border-radius: 999px;
	background: rgba(10, 12, 26, 0.75);
	box-shadow: 0 0 calc(var(--gs) * 0.025) color-mix(in srgb, var(--neon-a) 25%, transparent), inset 0 0 calc(var(--gs) * 0.02) color-mix(in srgb, var(--neon-a) 15%, transparent);
	cursor: pointer;
	transition: transform 0.08s ease-out, filter 0.15s;
}
.btn:active { transform: scale(0.95); }
.btn:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }
.btn.primary {
	color: #03260f; border-color: transparent;
	background: radial-gradient(130% 160% at 35% 25%, #d8ffe5 0%, #6ff59c 30%, var(--green) 60%, #18a64a 100%);
	box-shadow: 0 0 calc(var(--gs) * 0.06) rgba(46,232,106,0.55), inset 0 -3px 0 rgba(0,0,0,0.15);
}
.btn.big {
	font-size: calc(var(--gs) * 0.075); font-style: italic; font-weight: 900;
	width: 100%; max-width: calc(var(--gs) * 0.83);
	padding: calc(var(--gs) * 0.048);
}
.btn.ghost { border-color: rgba(255,255,255,0.18); box-shadow: none; }
.btn.danger { color: #ffb3bd; border-color: rgba(255,51,72,0.6); width: 100%; max-width: calc(var(--gs) * 0.7); box-shadow: none; }
.btn.danger.armed {
	color: #fff; border-color: transparent;
	background: radial-gradient(130% 160% at 35% 25%, #ffc2cb, var(--red) 60%, #b81c30);
	box-shadow: 0 0 calc(var(--gs) * 0.05) rgba(255,51,72,0.6);
	animation: pulse 0.6s ease-in-out infinite alternate;
}
.btn:disabled { opacity: 0.4; cursor: default; }
@keyframes pulse { to { filter: brightness(1.2); } }
.btn.toggle { min-width: calc(var(--gs) * 0.2); padding: calc(var(--gs) * 0.03) calc(var(--gs) * 0.04); }
.btn.toggle.wide { min-width: calc(var(--gs) * 0.38); }
.btn.toggle[aria-pressed="true"] { color: #03260f; border-color: transparent; background: linear-gradient(#8bf7b0, var(--green)); }

.setting {
	display: flex; align-items: center; justify-content: space-between;
	width: 100%; max-width: calc(var(--gs) * 0.74);
	font-size: calc(var(--gs) * 0.05); font-weight: 700;
}

/* difficulty list */
.diffList { display: flex; flex-direction: column; gap: calc(var(--gs) * 0.016); width: 100%; max-width: calc(var(--gs) * 0.8); }
.btn.diff {
	display: flex; justify-content: space-between; align-items: center; gap: 1em;
	border-color: color-mix(in srgb, var(--c) 70%, transparent);
	box-shadow: 0 0 calc(var(--gs) * 0.025) color-mix(in srgb, var(--c) 30%, transparent);
	padding: calc(var(--gs) * 0.026) calc(var(--gs) * 0.05);
}
#difficulty, #over { gap: calc(var(--gs) * 0.024); padding: calc(var(--gs) * 0.05) calc(var(--gs) * 0.06); }
#over .btn.big { padding: calc(var(--gs) * 0.036); }
.btn { white-space: nowrap; }
.btn.diff .dname { font-size: calc(var(--gs) * 0.056); font-style: italic; font-weight: 900; color: var(--c); text-shadow: 0 0 calc(var(--gs) * 0.02) var(--c); }
.btn.diff .dbest { font-size: calc(var(--gs) * 0.036); font-weight: 600; color: var(--ink-dim); text-align: right; }
.btn.diff.current { background: color-mix(in srgb, var(--c) 14%, rgba(10,12,26,0.85)); }

.scoreList { display: flex; flex-direction: column; gap: calc(var(--gs) * 0.018); width: 100%; max-width: calc(var(--gs) * 0.74); }
.srow {
	display: flex; justify-content: space-between; align-items: baseline;
	padding-bottom: calc(var(--gs) * 0.014);
	border-bottom: 1px solid rgba(255,255,255,0.08);
	font-size: calc(var(--gs) * 0.05);
}
.srow span { font-weight: 800; font-style: italic; color: var(--c); }
.srow b { font-weight: 900; font-variant-numeric: tabular-nums; }

#help { gap: calc(var(--gs) * 0.016); padding: calc(var(--gs) * 0.04) calc(var(--gs) * 0.06); }
#help .headline { font-size: calc(var(--gs) * 0.07); }
#help .btn { padding: calc(var(--gs) * 0.03) calc(var(--gs) * 0.06); }
.rules { list-style: none; display: flex; flex-direction: column; gap: calc(var(--gs) * 0.012); text-align: left; width: 100%; }
.rules li { display: flex; align-items: center; gap: calc(var(--gs) * 0.025); font-size: calc(var(--gs) * 0.038); line-height: 1.2; }
.rules canvas { width: calc(var(--gs) * 0.12); height: calc(var(--gs) * 0.12); flex: none; margin: calc(var(--gs) * -0.02); }
.rules b { display: block; font-size: 1.08em; font-weight: 900; font-style: italic; }

.score {
	font-size: calc(var(--gs) * 0.15); font-weight: 900; font-style: italic; line-height: 1;
	color: var(--neon-a); text-shadow: 0 0 calc(var(--gs) * 0.045) var(--neon-a);
	font-variant-numeric: tabular-nums;
}
.badge {
	font-size: calc(var(--gs) * 0.045); font-weight: 900; font-style: italic;
	color: #3a2a00; background: var(--yellow);
	padding: calc(var(--gs) * 0.01) calc(var(--gs) * 0.04);
	border-radius: 99px;
	box-shadow: 0 0 calc(var(--gs) * 0.05) rgba(255,210,31,0.6);
	animation: pulse 0.5s ease-in-out infinite alternate;
}
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(var(--gs) * 0.02); width: 100%; }
.stats div { display: flex; flex-direction: column-reverse; gap: 0.2em; }
.stats dt { font-size: calc(var(--gs) * 0.032); color: var(--ink-dim); font-weight: 600; }
.stats dd { font-size: calc(var(--gs) * 0.058); font-weight: 800; font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
	.panel, .badge, .btn.danger.armed { animation: none; }
}