* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-size: 16px; font-family: 'Arial', sans-serif; background: #ffffff; color: #000; text-align: center; }
p { padding: 15px 0px; }

canvas { display: block; margin: 0 auto; }

/* --- Touch devices --- */
/* The notch/rounded-corner insets, republished as custom properties so JS can
   read the resolved numbers back (env() is not otherwise visible to script).
   Zero on every device without them. */
:root {
	--safe-left: env(safe-area-inset-left, 0px);
	--safe-right: env(safe-area-inset-right, 0px);
}
/* None of the browser's own touch gestures do anything useful over this game:
   the canvas already sizes itself to the window, so pinch-zoom only crops it,
   and a swipe meant for a slime should never scroll the page instead. The
   court is a fixed 2:1 box that can overhang a narrow portrait window (see
   CANVAS_MIN_W, helpers.js) — the rotate prompt covers that case, and
   overflow-x keeps the page from sliding sideways behind it meanwhile. */
html, body { overflow-x: hidden; overscroll-behavior: none; }
body {
	-webkit-text-size-adjust: 100%;          /* don't reflow our own HUD text */
	-webkit-tap-highlight-color: transparent; /* no grey flash on every tap */
	padding-left: var(--safe-left);
	padding-right: var(--safe-right);
}
canvas { touch-action: none; user-select: none; -webkit-user-select: none; }
button { touch-action: manipulation; }      /* skips the double-tap-zoom wait */

/* --- Portrait-phone rotate prompt (Slime.html, updateRotatePrompt) --- */
.rotate-prompt {
	position: fixed;
	inset: 0;
	z-index: 50;  /* above the drawers (40), which a rotate must also outrank */
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 18px;
	background: #0a0c12; /* opaque: the title buttons and corner controls are
	                        fixed-position and would otherwise show through */
	color: #fff;
	padding: 24px;
}
.rotate-prompt.hidden { display: none; }
/* A phone outline that tips through the turn being asked for — cheaper and
   sharper than shipping an icon, and it re-reads on every loop. */
.rotate-prompt-phone {
	width: 52px;
	height: 88px;
	border: 3px solid #fff;
	border-radius: 11px;
	animation: rotate-prompt-tip 2.4s ease-in-out infinite;
}
@keyframes rotate-prompt-tip {
	0%, 28% { transform: rotate(0deg); }
	52%, 100% { transform: rotate(-90deg); }
}
@media (prefers-reduced-motion: reduce) {
	.rotate-prompt-phone { animation: none; transform: rotate(-90deg); }
}
/* --- On-screen touch controls (Slime.html, updateTouchControls) --- */
/* A full-viewport layer that ignores pointers except on the buttons, so the
   court behind it keeps receiving its own taps. Pinned to the viewport edges
   rather than positioned off the canvas each frame: the gutters they live in
   are reserved by fitCanvasToWindow (helpers.js), so the edges ARE the
   gutters. Vertically centred, where thumbs rest on a phone held sideways. */
.touch-controls {
	position: fixed;
	inset: 0;
	z-index: 25;  /* over the canvas and corner controls, under the drawers */
	pointer-events: none;
}
.touch-controls.hidden { display: none; }
.touch-cluster {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	gap: 8px;
	pointer-events: auto;
}
.touch-cluster-move { left: calc(var(--safe-left) + 10px); }
.touch-cluster-jump { right: calc(var(--safe-right) + 10px); }
.touch-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 58px;
	height: 76px;
	padding: 0;
	border: 2px solid rgba(255, 255, 255, 0.5);
	border-radius: 14px;
	/* Deliberately theme-neutral: these sit over eight different skies, and a
	   translucent dark plate with a white glyph reads on all of them. */
	background: rgba(12, 14, 22, 0.45);
	color: #fff;
	cursor: pointer;
	touch-action: none;      /* the button handles the gesture, not the browser */
	user-select: none;
	-webkit-user-select: none;
}
.touch-button-jump { width: 72px; height: 92px; border-radius: 18px; }
.touch-button svg { width: 26px; height: 26px; fill: currentColor; }
.touch-button-jump svg { width: 32px; height: 32px; }
.touch-button.pressed {
	background: rgba(255, 255, 255, 0.32);
	border-color: rgba(255, 255, 255, 0.85);
}

.rotate-prompt-title { font: 700 22px 'Arial', sans-serif; }
.rotate-prompt-sub { font: 400 15px 'Arial', sans-serif; opacity: 0.75; }

/* Visible only to screen readers (standard clip-based hide) */
.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* --- Title screen start buttons --- */
.title-buttons {
	position: fixed;
	z-index: 15;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	transform: translate(-50%, -50%);
	pointer-events: none;
}
.title-buttons.hidden { display: none; }
.title-button-row {
	display: flex;
	align-items: flex-start;
	gap: 20px;
	justify-content: center;
	flex-wrap: wrap;
}
.title-button-group {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
}
.title-button {
	pointer-events: auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 16px 34px;
	font: 700 20px 'Arial', sans-serif;
	color: #fff;
	background: var(--button-accent, #2563eb);
	border: none;
	border-radius: 999px;
	cursor: pointer;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
	transition: filter 0.15s ease, transform 0.1s ease;
	white-space: nowrap;
}
/* A fixed hover color doesn't work once the fill itself is themed (see
   --button-accent above, applyThemeToPage in themes.js) — darken whatever
   the current accent is instead. */
.title-button:hover { filter: brightness(0.88); }
.title-button:active { transform: translateY(1px); }
.title-hint {
	font: 600 12px 'Arial', sans-serif;
	color: #fff;
	background: rgba(0, 0, 0, 0.55);
	padding: 6px 14px;
	border-radius: 999px;
	display: none; /* toggled on by updateTitleButtons() in helpers.js */
}

/* --- Title-screen theme browser (.theme-picker, Slime.html) --- */
.theme-picker {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
}
.theme-picker-row {
	display: flex;
	align-items: center;
	gap: 4px;
	background: rgba(0, 0, 0, 0.55);
	border-radius: 999px;
	padding: 2px;
}
/* Same themed fill as .title-button, at a size that reads as secondary to
   the two start buttons above it. */
.theme-arrow {
	pointer-events: auto;
	width: 30px;
	height: 30px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font: 700 20px 'Arial', sans-serif;
	line-height: 1;
	color: #fff;
	background: var(--button-accent, #2563eb);
	border: none;
	border-radius: 50%;
	cursor: pointer;
	transition: filter 0.15s ease;
}
.theme-arrow:hover { filter: brightness(0.88); }
.theme-name {
	font: 700 13px 'Arial', sans-serif;
	color: #fff;
	min-width: 132px; /* widest theme name, so stepping through doesn't
	                     shuffle the arrows left and right under the cursor */
	text-align: center;
	white-space: nowrap;
}
/* Same translucent scrim as .title-hint, and for the same reason: these sit
   directly on the themed scene, so on a white-sky theme (High Contrast)
   white dots on their own were invisible. */
.theme-dots {
	display: flex;
	gap: 5px;
	background: rgba(0, 0, 0, 0.55);
	border-radius: 999px;
	padding: 5px 8px;
}
.theme-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.45);
}
.theme-dot.on { background: #fff; }

/* --- One-time "try Performance mode" hint (perf-hint.js) --- */
.perf-hint {
	position: fixed;
	z-index: 15;
	transform: translate(-50%, 0);
	font: 600 13px 'Arial', sans-serif;
	color: #fff;
	background: rgba(0, 0, 0, 0.7);
	padding: 8px 16px;
	border-radius: 999px;
	pointer-events: none;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.perf-hint.hidden { display: none; }

/* --- 2P pre-match options --- */
.two-player-options {
	position: fixed;
	z-index: 15;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	transform: translate(-50%, -50%);
	pointer-events: none;
}
.two-player-options.hidden { display: none; }
.tpo-column {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
}
/* Same pill as .title-button (already themed via --button-accent), just
   smaller — four of these stack where .title-button normally sits alone. */
.tpo-button {
	pointer-events: auto;
	padding: 10px 24px;
	font-size: 16px;
	white-space: nowrap;
}
.tpo-back {
	pointer-events: auto;
	background: none;
	border: none;
	color: #fff;
	font: 600 13px 'Arial', sans-serif;
	text-decoration: underline;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
	cursor: pointer;
	padding: 4px 8px;
}

/* --- Replay scrubbing controls --- */
.replay-controls {
	position: fixed;
	z-index: 15;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	transform: translate(-50%, 0);
}
.replay-controls.hidden { display: none; }
.replay-controls-row {
	display: flex;
	align-items: center;
	gap: 10px;
}
.replay-controls input[type="range"] {
	width: 200px;
	accent-color: #2563eb;
	cursor: pointer;
}
.replay-return-button {
	padding: 8px 16px;
	font: 600 13px 'Arial', sans-serif;
	color: #fff;
	background: rgba(0, 0, 0, 0.55);
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 999px;
	cursor: pointer;
	white-space: nowrap;
	transition: background 0.15s ease;
}
.replay-return-button:hover { background: rgba(0, 0, 0, 0.75); }
/* Quiet exit hint, off to the side of the controls rather than a center-
   court banner (see the Slime.html comment above .replay-controls). */
.replay-hint {
	font: 600 12px 'Arial', sans-serif;
	color: #fff;
	background: rgba(0, 0, 0, 0.55);
	padding: 4px 12px;
	border-radius: 999px;
}

/* --- Persistent "recording light" replay indicator (corner-anchored) --- */
.replay-indicator {
	position: fixed;
	z-index: 15;
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	font: 700 12px 'Arial', sans-serif;
	letter-spacing: 0.5px;
	color: #fff;
	background: rgba(0, 0, 0, 0.55);
	border-radius: 999px;
	pointer-events: none;
}
.replay-indicator.hidden { display: none; }
.replay-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #e11d48;
	animation: replay-dot-pulse 1.2s ease-in-out infinite;
}
@keyframes replay-dot-pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.3; }
}

/* --- Corner trigger buttons (settings gear + "How to play") --- */
.corner-controls {
	position: fixed;
	bottom: 16px;
	right: 16px;
	z-index: 20;
	display: flex;
	align-items: center;
	gap: 10px;
}
.help-toggle {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 9px 15px;
	font: 600 14px 'Arial', sans-serif;
	color: #fff;
	background: #2563eb;
	border: none;
	border-radius: 999px;
	cursor: pointer;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
	transition: background 0.15s ease, transform 0.1s ease;
}
.help-toggle:hover { background: #1d4ed8; }
.help-toggle:active { transform: translateY(1px); }
.help-toggle .help-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	font-weight: 700;
	background: rgba(255, 255, 255, 0.22);
	border-radius: 50%;
}
.icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	font-size: 20px;
	line-height: 1;
	color: #fff;
	background: #2563eb;
	border: none;
	border-radius: 50%;
	cursor: pointer;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
	transition: background 0.15s ease, transform 0.1s ease;
}
.icon-btn:hover { background: #1d4ed8; }
.icon-btn:active { transform: translateY(1px); }

/* --- Backdrop --- */
.help-backdrop {
	position: fixed;
	inset: 0;
	z-index: 30;
	background: rgba(0, 0, 0, 0.45);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.25s ease, visibility 0.25s ease;
}
.help-backdrop.open { opacity: 1; visibility: visible; }

/* --- Slide-in drawer --- */
.help-drawer {
	position: fixed;
	top: 0;
	right: 0;
	z-index: 40;
	width: 380px;
	max-width: 90vw;
	height: 100%;
	background: #1e2233;
	color: #e6e9f0;
	text-align: left;
	box-shadow: -4px 0 24px rgba(0, 0, 0, 0.35);
	transform: translateX(100%);
	transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
	display: flex;
	flex-direction: column;
}
.help-drawer.open { transform: translateX(0); }

.help-drawer header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 18px 20px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	flex: 0 0 auto;
}
.help-drawer header h2 { font-size: 18px; font-weight: 700; color: #fff; }
.help-close {
	background: none;
	border: none;
	color: #aab;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	padding: 0 4px;
	transition: color 0.15s ease;
}
.help-close:hover { color: #fff; }

.help-body { padding: 8px 20px 28px; overflow-y: auto; flex: 1 1 auto; }

.help-section { margin-top: 22px; }
.help-section h3 {
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: #7c8bd0;
	margin-bottom: 10px;
}
.help-section p { padding: 0; margin-bottom: 8px; font-size: 14px; line-height: 1.5; color: #c7ccda; }

/* Key / description rows */
.help-row {
	display: flex;
	align-items: baseline;
	gap: 12px;
	padding: 6px 0;
	font-size: 14px;
	line-height: 1.4;
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.help-row:last-child { border-bottom: none; }
.help-keys { flex: 0 0 108px; display: flex; flex-wrap: wrap; gap: 4px; }
.help-desc { flex: 1; color: #c7ccda; }

kbd {
	display: inline-block;
	min-width: 22px;
	padding: 2px 7px;
	font: 600 12px 'Arial', sans-serif;
	text-align: center;
	color: #1e2233;
	background: #e6e9f0;
	border-radius: 5px;
	box-shadow: 0 2px 0 #a9b0c4;
}

/* Scoring list */
.help-score { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; font-size: 14px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.help-score:last-child { border-bottom: none; }
.help-score .label { color: #c7ccda; }
.help-score .value { color: #fff; font-weight: 600; white-space: nowrap; }
.help-score .flawless-icon { color: #ffd54f; } /* the match-point gold (MATCH_POINT_PIP_GLOW_COLOR) */
.help-note { margin-top: 12px; font-size: 13px; font-style: italic; color: #8b93a7; }

/* Settings */
.help-setting { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: 14px; color: #c7ccda; }
.help-setting input { margin-top: 3px; width: 16px; height: 16px; flex: 0 0 auto; cursor: pointer; }
.help-setting strong { color: #fff; font-weight: 600; }
.help-setting .help-note { margin-top: 3px; font-style: normal; display: block; }

.help-select-setting label { display: block; color: #fff; font-weight: 600; font-size: 14px; margin-bottom: 8px; }
.help-select-setting select {
	width: 100%;
	padding: 8px 10px;
	font: 14px 'Arial', sans-serif;
	color: #fff;
	background: #262b40;
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: 8px;
	cursor: pointer;
}
.help-select-setting .help-note { margin-top: 8px; font-style: normal; display: block; }

/* Pause menu action buttons — same color/radius/shadow as .title-button,
   but block/full-width to sit in the drawer's padded column instead of
   floating over the canvas. */
.pause-menu-button {
	display: block;
	width: 100%;
	padding: 12px 20px;
	font: 700 15px 'Arial', sans-serif;
	color: #fff;
	background: #2563eb;
	border: none;
	border-radius: 999px;
	cursor: pointer;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
	transition: background 0.15s ease, transform 0.1s ease;
}
.pause-menu-button:hover { background: #1d4ed8; }
.pause-menu-button:active { transform: translateY(1px); }
.pause-menu-button + .help-note { margin-top: 8px; }
.pause-menu-button + .pause-menu-button,
#pauseMenuRestartRow + .pause-menu-button { margin-top: 16px; }

/* Respect the OS/browser reduce-motion preference: cut the decorative UI
   transitions (drawer slide, backdrop fade, button hover/close) to instant.
   Gameplay itself draws on canvas and has no CSS transitions to gate. */
@media (prefers-reduced-motion: reduce) {
	.icon-btn,
	.help-backdrop,
	.help-drawer,
	.help-close,
	.replay-return-button {
		transition: none;
	}
	.replay-dot {
		animation: none;
	}
}