/* tglgames.com — Pool styles.
 *
 * Layered after /assets/theme.css so design tokens (--bg, --text, --muted,
 * --accent, --panel, --grid, --warn, --ok, --danger, --overlay-bg) are in
 * scope. responsive.css ships separately and owns all media + container
 * queries.
 */

:root {
	--pool-felt:        #0e6b3a;
	--pool-felt-edge:   #094a28;
	--pool-rail:        #5a361a;
	--pool-rail-light:  #784a26;
	--pool-cue-tip:     #d8b274;
	--pool-accent:      #f1c40f;
	--rail-bg:          #12161e;
	--rail-border:      rgba(255,255,255,0.06);
}

[data-theme="light"] {
	--rail-bg:          #f7f8fa;
	--rail-border:      rgba(0,0,0,0.08);
}

* { box-sizing: border-box; }

/* The HTML `hidden` attribute resolves to `display: none` only when no
 * later, more-specific rule overrides display. Several elements here use
 * .overlay/.pregame/.accuracy-bar etc. with display:flex which would
 * otherwise win and leave them visible on boot. Force [hidden] to win. */
[hidden] { display: none !important; }

html, body {
	margin: 0;
	padding: 0;
	height: 100%;
	background: var(--bg);
	color: var(--text);
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	overscroll-behavior: none;
	-webkit-tap-highlight-color: transparent;
}
button, a, .mode-pick, .cue-pick, .bot-pick, .pool-canvas {
	-webkit-tap-highlight-color: transparent;
}

.pool-shell {
	display: grid;
	min-height: 100vh;
	min-height: 100dvh;
	grid-template-rows: auto 1fr auto auto;
	grid-template-columns: 1fr;
	grid-template-areas:
		"header"
		"table"
		"controls"
		"footer";
	gap: 0;
}
/* iOS Safari: lock to a JS-set pixel height so the URL-bar slide doesn't
 * thrash 100dvh and re-fit the canvas every frame (the "blinks crazy" bug).
 * --app-h is set once in main.js on load + orientationchange. */
html.is-ios .pool-shell {
	min-height: 0;
	height: var(--app-h, 100dvh);
}
/* iOS: backdrop-filter under a redrawing canvas causes per-frame repaints
 * that read as strobe flicker. Drop the blur, deepen the solid backdrop. */
html.is-ios .pregame,
html.is-ios .overlay,
html.is-ios .tutorial-backdrop,
html.is-ios .drawer-backdrop {
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}
html.is-ios .pregame,
html.is-ios .overlay { background: rgba(15,17,21,0.94); }
html.is-ios .tutorial-backdrop { background: rgba(0,0,0,0.6); }
html.is-ios .drawer-backdrop   { background: rgba(0,0,0,0.7); }
.pool-canvas { touch-action: none; }

/* Controls help bar — sits between the table and the footer so the
 * keybindings are always in view during play (not buried in the drawer). */
.controls-help {
	grid-area: controls;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 12px;
	padding: 8px 14px;
	background: var(--panel, #161a22);
	border-top: 1px solid var(--rail-border);
	font-size: 0.78rem;
	color: var(--muted);
}
.controls-help .ch-group { display: inline-flex; align-items: center; gap: 4px; }
.controls-help .ch-group b { color: var(--text); font-weight: 600; }
.controls-help .ch-sep { color: var(--rail-border); }
.controls-help kbd {
	background: var(--grid, #1b2030);
	border: 1px solid var(--rail-border);
	color: var(--text);
	padding: 1px 6px;
	border-radius: 4px;
	font-family: ui-monospace, Menlo, Consolas, monospace;
	font-size: 0.72rem;
	box-shadow: 0 1px 0 rgba(0,0,0,0.4);
}
@media (max-height: 600px) and (orientation: landscape) {
	.controls-help { display: none; }   /* tight landscape hides to keep table tall */
}

/* ===== Header ===== */
.pool-header {
	grid-area: header;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	background: var(--panel, #161a22);
	border-bottom: 1px solid var(--rail-border);
}
.pool-header h1 {
	font-size: 1.1rem;
	margin: 0;
	font-weight: 700;
	letter-spacing: 0.02em;
}
.pool-header .home {
	color: var(--muted);
	text-decoration: none;
	font-size: 0.85rem;
}
.pool-header .home:hover { color: var(--text); }

.scoreboard {
	margin-left: auto;
	display: flex;
	gap: 14px;
	font-size: 0.85rem;
	color: var(--muted);
}
.scoreboard b { color: var(--text); margin-left: 4px; }

.user-chip {
	font-size: 0.78rem;
	padding: 3px 8px;
	border-radius: 999px;
	background: var(--grid, #1b2030);
	color: var(--text);
	cursor: pointer;
}

.theme-toggle, .drawer-toggle, .fs-btn, .share-btn {
	background: transparent;
	border: 1px solid var(--rail-border);
	color: var(--text);
	padding: 4px 8px;
	border-radius: 6px;
	cursor: pointer;
	font-size: 1rem;
}
.fs-btn[aria-pressed="true"] { background: var(--grid, #1b2030); }
.share-btn svg { width: 18px; height: 18px; vertical-align: middle; }

/* ===== Drawer accordion ===== */
.accordion-section { transition: padding 160ms ease; }
.accordion-head {
	cursor: pointer; user-select: none;
	display: flex; align-items: center; justify-content: space-between;
	gap: 8px; margin: 0 0 6px;
}
.accordion-head .acc-chev {
	display: inline-block; transition: transform 160ms ease;
	color: var(--muted); font-size: 0.78em;
}
.accordion-section.collapsed > *:not(.accordion-head):not(h3) { display: none !important; }
.accordion-section.collapsed { padding-bottom: 0; }
.accordion-section.collapsed .acc-chev { transform: rotate(-90deg); }
.accordion-head:focus-visible { outline: 2px solid var(--accent, #60a5fa); outline-offset: 2px; }

.share-targets {
	display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
	gap: 6px; margin-bottom: 8px;
}
.share-target {
	display: flex; flex-direction: column; align-items: center; gap: 3px;
	padding: 8px 4px; border-radius: 8px;
	background: var(--grid, #1b2030); border: 1px solid var(--rail-border);
	color: var(--text); cursor: pointer; font: inherit;
	transition: transform 80ms ease, border-color 120ms ease;
}
.share-target:hover { transform: translateY(-1px); border-color: var(--share-color, var(--accent, #60a5fa)); }
.share-target:active { transform: translateY(0); }
.share-target-icon {
	width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center;
	color: var(--share-color, currentColor);
}
.share-target-icon svg { width: 22px; height: 22px; }
.share-target-label { font-size: 0.66rem; color: var(--muted); letter-spacing: 0.02em; }

.share-row { display: flex; gap: 6px; align-items: center; }
.share-row input {
	flex: 1; background: var(--grid, #1b2030); border: 1px solid var(--rail-border);
	color: var(--text); padding: 6px 8px; border-radius: 6px; font-size: 0.78rem;
	font-family: ui-monospace, Menlo, Consolas, monospace;
}
.share-status { font-size: 0.72rem; color: var(--ok, #6ee7b7); margin-top: 4px; min-height: 1em; }
.theme-toggle .moon { display: none; }
[data-theme="light"] .theme-toggle .sun { display: none; }
[data-theme="light"] .theme-toggle .moon { display: inline; }

.conn-dot {
	width: 8px; height: 8px; border-radius: 50%;
	background: #555;
}
.conn-dot[data-state="connecting"] { background: var(--warn); animation: pulse 1s ease-in-out infinite; }
.conn-dot[data-state="open"]       { background: var(--ok); }
.conn-dot[data-state="closed"]     { background: var(--danger); }
@keyframes pulse { 50% { opacity: 0.4; } }

/* ===== Side rails ===== */
.pool-rail {
	background: var(--rail-bg);
	border: 1px solid var(--rail-border);
	padding: 12px;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.rail-section h3 {
	margin: 0 0 8px;
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--muted);
}

/* Rails default to hidden — responsive.css turns them on for tablet+ */
.pool-rail-left, .pool-rail-right { display: none; }

/* ===== Table area ===== */
.pool-table-wrap {
	grid-area: table;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--bg);
	overflow: hidden;
	min-height: 0;
	container-type: size;
	container-name: tableWrap;
}

.pool-canvas {
	display: block;
	box-shadow: 0 8px 30px rgba(0,0,0,0.45);
	border-radius: 8px;
	max-width: 100%;
	max-height: 100%;
	background: #094a28;
}

/* ===== Overlays / pregame / game-over ===== */
.pregame, .overlay {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	background: var(--overlay-bg, rgba(15,17,21,0.82));
	backdrop-filter: blur(4px);
	z-index: 5;
	padding: 20px;
	text-align: center;
}
.pregame h2, .overlay h2 { margin: 0; font-size: 1.4rem; }
.pregame-hint { color: var(--muted); max-width: 400px; line-height: 1.5; font-size: 0.9rem; }

.daily-card {
	background: rgba(0,0,0,0.3);
	border: 1px solid var(--rail-border);
	border-radius: 10px;
	padding: 14px 16px;
	max-width: 380px;
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 6px;
	box-shadow: 0 4px 16px rgba(0,0,0,0.25);
}
.daily-card-row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	font-size: 0.9rem;
}
.daily-label { color: var(--muted); }
.daily-seed {
	font-family: ui-monospace, Menlo, Consolas, monospace;
	font-size: 1.05rem;
	color: var(--accent, #60a5fa);
	letter-spacing: 0.1em;
}
.daily-countdown { font-variant-numeric: tabular-nums; color: var(--text); }
.daily-best { font-weight: 700; color: var(--accent, #60a5fa); }
.quick-card {
	background: rgba(0,0,0,0.3); border: 1px solid var(--rail-border);
	border-radius: 10px; padding: 14px 16px; max-width: 380px; width: 100%;
	display: flex; flex-direction: column; gap: 8px;
}
.ghost-picker-list { display: flex; flex-direction: column; gap: 4px; max-height: 280px; overflow-y: auto; }
.ghost-picker-section { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); margin-top: 6px; padding-left: 4px; }
.ghost-row {
	background: rgba(0,0,0,0.25);
	border: 1px solid var(--rail-border);
	border-radius: 6px;
	padding: 6px 10px;
	cursor: pointer;
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 4px 8px;
	font-size: 0.82rem;
	align-items: baseline;
}
.ghost-row:hover, .ghost-row.sel { border-color: var(--accent, #60a5fa); }
.ghost-row.sel { background: rgba(96,165,250,0.12); }
.ghost-row .who   { font-weight: 600; }
.ghost-row .meta  { color: var(--muted); font-size: 0.74rem; }
.ghost-row .score { color: var(--accent, #60a5fa); font-weight: 700; font-variant-numeric: tabular-nums; }
.ghost-empty { color: var(--muted); padding: 12px; text-align: center; font-size: 0.82rem; }
.daily-blurb {
	color: var(--muted);
	font-size: 0.78rem;
	margin: 6px 0 0;
	line-height: 1.4;
}
.btn-row { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.replay-progress { color: var(--muted); font-size: 0.85rem; margin-top: 6px; }
.replay-progress b { color: var(--text); }

.replay-banner {
	position: absolute;
	top: 14px; left: 50%;
	transform: translateX(-50%);
	display: flex; align-items: center; gap: 10px;
	background: rgba(0,0,0,0.7);
	color: #fff;
	border-radius: 999px;
	padding: 6px 6px 6px 14px;
	font-size: 0.85rem;
	z-index: 6;
}
.replay-banner button { padding: 4px 12px; font-size: 0.78rem; }
.replay-banner b { color: var(--accent, #60a5fa); font-variant-numeric: tabular-nums; }

/* Tutorial overlay */
.tutorial-overlay { position: fixed; inset: 0; pointer-events: none; z-index: 200; display: none; }
.tutorial-overlay.open { display: block; }
.tutorial-backdrop {
	position: absolute; inset: 0;
	background: rgba(0, 0, 0, 0.45);
	pointer-events: auto;
	backdrop-filter: blur(1px);
}
.tutorial-card {
	position: absolute;
	width: 360px;
	max-width: calc(100vw - 24px);
	background: var(--panel, #161a22);
	border: 1px solid var(--rail-border);
	border-radius: 12px;
	padding: 18px 18px 14px;
	box-shadow: 0 18px 60px rgba(0,0,0,0.5);
	pointer-events: auto;
	display: flex; flex-direction: column; gap: 10px;
}
.tutorial-step-num {
	font-size: 0.72rem;
	color: var(--accent, #60a5fa);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-weight: 600;
}
.tutorial-card h3 { margin: 0; font-size: 1.05rem; }
.tutorial-card p  { margin: 0; color: var(--muted); line-height: 1.5; font-size: 0.9rem; }
.tutorial-row { display: flex; justify-content: space-between; gap: 10px; margin-top: 6px; }
.tutorial-dots { display: flex; gap: 6px; justify-content: center; }
.tutorial-dot {
	width: 7px; height: 7px; border-radius: 50%;
	background: var(--grid, #1b2030);
	border: 1px solid var(--rail-border);
}
.tutorial-dot.active { background: var(--accent, #60a5fa); border-color: var(--accent, #60a5fa); }

/* Practice-mode tip toasts */
.practice-tip {
	position: absolute;
	left: 50%;
	bottom: 56px;
	transform: translateX(-50%) translateY(20px);
	max-width: min(440px, calc(100vw - 24px));
	background: rgba(12, 16, 26, 0.94);
	border: 1px solid rgba(96,165,250,0.35);
	color: var(--text);
	border-radius: 10px;
	padding: 10px 36px 10px 14px;
	display: flex; align-items: flex-start; gap: 10px;
	box-shadow: 0 10px 28px rgba(0,0,0,0.4);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.35s, transform 0.35s;
	z-index: 7;
	font-size: 0.85rem;
	line-height: 1.45;
}
.practice-tip.open {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
	pointer-events: auto;
}
.practice-tip-body b { display: block; color: var(--accent, #60a5fa); margin-bottom: 2px; font-size: 0.82rem; letter-spacing: 0.02em; }
.practice-tip-close {
	position: absolute; top: 4px; right: 6px;
	background: transparent; border: 0; color: var(--muted);
	font-size: 1.2rem; cursor: pointer; padding: 2px 6px;
}
.practice-tip-close:hover { color: var(--text); }

.btn {
	padding: 10px 18px;
	border-radius: 8px;
	border: 1px solid var(--rail-border);
	background: var(--grid, #1b2030);
	color: var(--text);
	cursor: pointer;
	font-size: 0.9rem;
	font-weight: 500;
}
.btn:hover { filter: brightness(1.15); }
.btn.gold {
	background: linear-gradient(180deg, #f5c842, #c89a1f);
	color: #2a1f00;
	border-color: #c89a1f;
	font-weight: 700;
}
.btn.ghost { background: transparent; }

/* ===== HUD overlay (top-left of table) ===== */
.hud-overlay {
	position: absolute;
	top: 12px; left: 12px;
	display: flex; flex-direction: column; gap: 4px;
	pointer-events: none;
	z-index: 3;
}
.hud-turn {
	font-size: 0.85rem;
	background: rgba(0,0,0,0.55);
	color: #fff;
	padding: 4px 10px;
	border-radius: 999px;
}
.hud-foul {
	font-size: 0.8rem;
	background: rgba(255,80,80,0.85);
	color: #fff;
	padding: 4px 10px;
	border-radius: 999px;
	font-weight: 700;
}
.hud-group {
	font-size: 0.78rem;
	background: rgba(0,0,0,0.55);
	color: #fff;
	padding: 4px 10px;
	border-radius: 999px;
}
.hud-group.solid  { background: rgba(241,196,15,0.85); color: #2a1f00; }
.hud-group.stripe { background: rgba(231,231,231,0.95); color: #2a1f00; border: 2px solid rgba(192,57,43,0.8); }
.hud-specs {
	font-size: 0.78rem;
	background: rgba(0,0,0,0.55);
	color: #fff;
	border: 1px solid rgba(255,255,255,0.15);
	padding: 4px 10px;
	border-radius: 999px;
	cursor: pointer;
	pointer-events: auto;
}
.hud-specs b { color: var(--accent, #60a5fa); margin: 0 2px; }
.hud-spec-list {
	background: rgba(0,0,0,0.85);
	border: 1px solid var(--rail-border);
	border-radius: 8px;
	padding: 8px;
	min-width: 180px;
	max-width: 260px;
	pointer-events: auto;
}
.hud-spec-head { color: var(--muted); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 6px; }
.hud-spec-list ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 0.82rem; }
.hud-spec-list li { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.hud-spec-list button { padding: 2px 8px; font-size: 0.72rem; }
/* ===== Flash toast (transient warnings, status pings) ===== */
.flash-toast {
	position: fixed;
	top: 60px; left: 50%;
	transform: translateX(-50%);
	max-width: min(440px, calc(100vw - 24px));
	background: rgba(15, 17, 21, 0.92);
	border: 1px solid rgba(255,255,255,0.12);
	color: var(--text);
	border-radius: 8px;
	padding: 10px 14px;
	font-size: 0.88rem;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.18s;
	z-index: 50;
	text-align: center;
	box-shadow: 0 6px 20px rgba(0,0,0,0.4);
}
.flash-toast:not(:empty) { opacity: 1; }
.flash-toast .warn { color: var(--warn, #fbbf24); }
.flash-toast .win  { color: var(--ok,   #6ee7b7); }
.flash-toast .lose { color: var(--danger, #fca5a5); }

/* ===== Game scoreboard (top-right of table) ===== */
.hud-score {
	position: absolute;
	top: 12px; right: 12px;
	background: rgba(0,0,0,0.6);
	border: 1px solid var(--rail-border);
	border-radius: 10px;
	padding: 8px 12px;
	display: flex; flex-direction: column;
	gap: 4px;
	z-index: 4;
	font-size: 0.78rem;
	color: #fff;
	min-width: 180px;
	pointer-events: none;
}
.hud-score-row { display: flex; align-items: center; gap: 6px; }
.hud-score-row[data-mine="true"] {
	background: rgba(96,165,250,0.18);
	border-radius: 6px;
	padding: 2px 6px;
	margin: -2px -6px;
}
.hud-score-label { color: rgba(255,255,255,0.65); min-width: 50px; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; }
.hud-score-balls { display: inline-flex; gap: 2px; flex: 1; flex-wrap: wrap; }
.hud-score-balls .ball {
	width: 12px; height: 12px;
	border-radius: 50%;
	border: 1px solid rgba(255,255,255,0.3);
	display: inline-block;
	font-size: 7px;
	color: #222;
	text-align: center;
	line-height: 11px;
	font-weight: 700;
	background: var(--ball-color, #888);
}
.hud-score-balls .ball.stripe {
	background: linear-gradient(180deg, var(--ball-color, #888) 0%, var(--ball-color, #888) 30%, #f4f4f4 30%, #f4f4f4 70%, var(--ball-color, #888) 70%);
}
.hud-score-balls .ball.potted { opacity: 0.25; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.4); }
.hud-score-count { font-variant-numeric: tabular-nums; min-width: 28px; text-align: right; font-size: 0.72rem; color: rgba(255,255,255,0.75); }
.hud-score-eight { display: flex; align-items: center; gap: 6px; padding: 2px 0; opacity: 0.85; }
.hud-score-eight-ball { width: 14px; height: 14px; border-radius: 50%; background: #1c1c1c; border: 1px solid rgba(255,255,255,0.4); position: relative; }
.hud-score-eight-ball::after { content: '8'; position: absolute; inset: 0; color: #fff; font-size: 7px; font-weight: 700; text-align: center; line-height: 12px; }
.hud-score-eight.potted .hud-score-eight-ball { opacity: 0.3; }
.hud-score-eight-label { font-size: 0.72rem; color: rgba(255,255,255,0.65); }
.hud-score-fouls { font-size: 0.7rem; color: rgba(255,180,180,0.85); }
.hud-score-fouls:empty { display: none; }

.score-panel {
	position: absolute;
	top: 12px; right: 12px;
	background: rgba(0,0,0,0.62);
	border: 1px solid rgba(255,255,255,0.10);
	border-radius: 10px;
	padding: 8px 10px;
	display: flex; flex-direction: column;
	gap: 6px;
	z-index: 4;
	font-size: 0.78rem;
	color: #fff;
	min-width: 195px;
	pointer-events: none;
	box-shadow: 0 4px 14px rgba(0,0,0,0.4);
}
.score-row {
	display: grid;
	grid-template-columns: 50px 1fr auto;
	align-items: center;
	gap: 6px;
}
.score-row.mine .score-label {
	color: var(--accent, #60a5fa);
	font-weight: 700;
}
.score-row[data-side="eight"] { opacity: 0.85; }
.score-label {
	font-size: 0.66rem;
	letter-spacing: 0.06em;
	color: rgba(255,255,255,0.6);
	font-weight: 600;
}
.score-balls { display: inline-flex; gap: 2px; flex-wrap: wrap; }
.score-balls .ball {
	width: 13px; height: 13px;
	border-radius: 50%;
	background: var(--ball-color, #888);
	border: 1px solid rgba(0,0,0,0.4);
	font-size: 7px;
	color: #222;
	text-align: center;
	line-height: 11px;
	font-weight: 700;
	box-shadow: inset 0 0 0 1px rgba(255,255,255,0.15);
	display: inline-block;
}
.score-balls .ball.stripe {
	background:
		linear-gradient(180deg,
			#f4f4f4 0 22%,
			var(--ball-color, #888) 22% 78%,
			#f4f4f4 78% 100%);
}
.score-balls .ball.b8 { background: #1c1c1c; color: #fff; }
.score-balls .ball.potted {
	opacity: 0.22;
	box-shadow: inset 0 0 0 1px rgba(255,255,255,0.4);
}
.score-count {
	font-variant-numeric: tabular-nums;
	color: rgba(255,255,255,0.78);
	font-size: 0.72rem;
	min-width: 32px;
	text-align: right;
}
.score-foot {
	display: flex; justify-content: space-between;
	font-size: 0.7rem;
	color: rgba(255,255,255,0.6);
	border-top: 1px solid rgba(255,255,255,0.08);
	padding-top: 4px;
	margin-top: 2px;
}
.score-foot b { color: #fff; font-variant-numeric: tabular-nums; }
.score-fouls:empty::before { content: 'no fouls'; color: rgba(110,231,183,0.7); }
.score-fouls { color: rgba(255,180,180,0.85); }

.hud-bih {
	font-size: 0.78rem;
	background: rgba(96,165,250,0.85);
	color: #0a1320;
	padding: 4px 10px;
	border-radius: 999px;
	font-weight: 600;
	pointer-events: none;
}
.friend-ui { display: flex; flex-direction: column; gap: 12px; max-width: 360px; width: 100%; }
.friend-mode-picker { display: flex; gap: 6px; }
.friend-mode-pick {
	flex: 1;
	background: var(--grid, #1b2030);
	color: var(--text);
	border: 1px solid var(--rail-border);
	border-radius: 6px;
	padding: 8px;
	cursor: pointer;
	font-size: 0.85rem;
}
.friend-mode-pick.sel {
	background: var(--accent, #60a5fa);
	color: #0a1320;
	border-color: var(--accent, #60a5fa);
	font-weight: 600;
}
.friend-host, .friend-join {
	background: rgba(0,0,0,0.25);
	border: 1px solid var(--rail-border);
	border-radius: 8px;
	padding: 12px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.friend-host-label, .friend-host-status, .friend-join-status {
	font-size: 0.82rem;
	color: var(--muted);
}
.friend-invite-code {
	display: inline-block;
	font-family: ui-monospace, Menlo, Consolas, monospace;
	font-size: 1.4rem;
	background: rgba(0,0,0,0.45);
	color: var(--accent, #60a5fa);
	padding: 8px 12px;
	border-radius: 6px;
	letter-spacing: 0.16em;
	text-align: center;
}
.friend-code-input {
	background: var(--grid, #1b2030);
	color: var(--text);
	border: 1px solid var(--rail-border);
	border-radius: 6px;
	padding: 10px;
	font-family: ui-monospace, Menlo, Consolas, monospace;
	font-size: 1.1rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}
.bot-picker { display: flex; gap: 6px; }
.bot-pick {
	flex: 1;
	background: var(--grid, #1b2030);
	color: var(--text);
	border: 1px solid var(--rail-border);
	border-radius: 6px;
	padding: 8px 6px;
	cursor: pointer;
	font-size: 0.82rem;
}
.bot-pick.sel {
	background: linear-gradient(180deg, var(--accent, #60a5fa), color-mix(in srgb, var(--accent, #60a5fa) 70%, black));
	color: #0a1320;
	border-color: var(--accent, #60a5fa);
	font-weight: 600;
}

/* ===== English (spin) widget ===== */
.english-widget {
	position: absolute;
	bottom: 14px; right: 14px;
	width: 56px; height: 56px;
	z-index: 4;
	touch-action: none;
}
.english-widget::after {
	content: 'English — drag to spin · double-click to reset';
	position: absolute;
	bottom: 100%; right: 0;
	margin-bottom: 4px;
	white-space: nowrap;
	font-size: 0.65rem;
	color: rgba(255,255,255,0.7);
	background: rgba(0,0,0,0.55);
	padding: 2px 6px;
	border-radius: 4px;
	opacity: 0;
	transition: opacity 0.15s;
	pointer-events: none;
}
.english-widget:hover::after { opacity: 1; }
.english-ball {
	width: 100%; height: 100%;
	border-radius: 50%;
	background: radial-gradient(circle at 30% 30%, #fff, #cfcfcf 75%, #888);
	box-shadow: 0 2px 8px rgba(0,0,0,0.5);
	position: relative;
	cursor: pointer;
}
.english-tip {
	position: absolute;
	width: 10px; height: 10px;
	border-radius: 50%;
	background: var(--accent, #60a5fa);
	left: 50%; top: 50%;
	transform: translate(-50%, -50%);
	transition: transform 0.1s;
}

/* ===== Accuracy bar ===== */
.accuracy-bar {
	position: absolute;
	bottom: 14px; left: 50%;
	transform: translateX(-50%);
	width: min(280px, 60%);
	z-index: 4;
	pointer-events: none;
}
.accuracy-track {
	position: relative;
	height: 14px;
	background: rgba(0,0,0,0.65);
	border-radius: 7px;
	border: 1px solid rgba(255,255,255,0.15);
	overflow: hidden;
}
.accuracy-zone {
	position: absolute;
	top: 0; bottom: 0;
	background: linear-gradient(180deg, rgba(110,231,183,0.7), rgba(80,200,160,0.5));
	border-left: 1px solid rgba(255,255,255,0.4);
	border-right: 1px solid rgba(255,255,255,0.4);
}
.accuracy-needle {
	position: absolute;
	top: -2px; bottom: -2px;
	width: 3px;
	background: #fff;
	box-shadow: 0 0 6px rgba(255,255,255,0.8);
	transform: translateX(-50%);
	transition: left 0.05s linear;
}
.accuracy-marker {
	position: absolute;
	top: -4px; bottom: -4px;
	width: 4px;
	transform: translateX(-50%);
	border-radius: 2px;
}
.accuracy-marker.in-zone  { background: #6ee7b7; box-shadow: 0 0 8px rgba(110,231,183,0.9); }
.accuracy-marker.off-zone { background: #fca5a5; box-shadow: 0 0 8px rgba(252,165,165,0.9); }
.accuracy-label {
	margin-top: 4px;
	text-align: center;
	color: rgba(255,255,255,0.92);
	font-size: 0.72rem;
	text-shadow: 0 1px 2px rgba(0,0,0,0.7);
	font-variant-numeric: tabular-nums;
}

/* ===== Mode + cue picker buttons ===== */
.mode-picker, .cue-control {
	display: flex; flex-direction: column; gap: 6px;
}
.mode-pick, .cue-pick {
	background: var(--grid, #1b2030);
	color: var(--text);
	border: 1px solid var(--rail-border);
	border-radius: 6px;
	padding: 8px 10px;
	cursor: pointer;
	font-size: 0.85rem;
	text-align: left;
}
.mode-pick.sel, .cue-pick.sel {
	background: linear-gradient(180deg, var(--accent, #60a5fa), color-mix(in srgb, var(--accent, #60a5fa) 70%, black));
	color: #0a1320;
	border-color: var(--accent, #60a5fa);
	font-weight: 600;
}

/* ===== Leaders / stats / chat lists ===== */
.leaders, .friend-list, .chat-msgs {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 0.82rem;
}
.leaders li, .friend-list li {
	display: flex;
	gap: 8px;
	padding: 4px 0;
	border-bottom: 1px solid var(--rail-border);
}
.leaders li.empty, .friend-list li.empty { color: var(--muted); border: 0; }
.leaders li.me { color: var(--accent, #60a5fa); font-weight: 600; }
.shot-stats {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 4px 10px;
	font-size: 0.82rem;
	margin: 0;
}
.shot-stats dt { color: var(--muted); }
.shot-stats dd { margin: 0; font-variant-numeric: tabular-nums; }

.chat-msgs {
	max-height: 200px;
	overflow-y: auto;
	padding: 4px;
	background: rgba(0,0,0,0.2);
	border-radius: 6px;
}
.chat-msgs li { padding: 3px 4px; border: 0; display: flex; flex-direction: column; gap: 2px; }
.chat-line { word-wrap: break-word; }
.chat-reactions {
	display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px;
}
.chat-react-chip, .chat-react-add {
	display: inline-flex; align-items: center; gap: 3px;
	background: rgba(255,255,255,0.06); border: 1px solid var(--rail-border);
	color: var(--text); border-radius: 999px; padding: 1px 8px;
	font-size: 0.78rem; cursor: pointer; line-height: 1.4;
}
.chat-react-chip.mine {
	background: rgba(96,165,250,0.18);
	border-color: rgba(96,165,250,0.45);
}
.chat-react-chip .n { font-variant-numeric: tabular-nums; color: var(--muted); font-size: 0.72rem; }
.chat-react-chip.mine .n { color: var(--accent, #60a5fa); }
.chat-react-add { color: var(--muted); font-weight: 600; }
.chat-react-add:hover { color: var(--text); border-color: var(--accent, #60a5fa); }
.chat-react-picker {
	position: absolute;
	background: var(--panel, #161a22);
	border: 1px solid var(--rail-border);
	border-radius: 6px;
	padding: 4px; display: flex; gap: 2px;
	box-shadow: 0 4px 12px rgba(0,0,0,0.3);
	z-index: 30;
}
.chat-react-picker button {
	background: transparent; border: 0; cursor: pointer;
	padding: 2px 6px; font-size: 1.05rem;
}
.chat-react-picker button:hover { background: rgba(96,165,250,0.18); border-radius: 4px; }
.chat-msgs { position: relative; }
.chat-form {
	display: flex; gap: 6px; margin-top: 6px;
}
.chat-form input {
	flex: 1;
	background: var(--grid, #1b2030);
	border: 1px solid var(--rail-border);
	color: var(--text);
	padding: 6px 8px;
	border-radius: 6px;
	font-size: 0.85rem;
}
.chat-form button {
	background: var(--accent, #60a5fa);
	color: #0a1320;
	border: 0;
	padding: 6px 12px;
	border-radius: 6px;
	cursor: pointer;
	font-weight: 600;
}

/* ===== Footer ===== */
.pool-footer {
	grid-area: footer;
	display: flex;
	justify-content: space-between;
	padding: 6px 14px;
	font-size: 0.72rem;
	color: var(--muted);
	background: var(--panel, #161a22);
	border-top: 1px solid var(--rail-border);
}
.pool-footer kbd {
	background: var(--grid, #1b2030);
	border: 1px solid var(--rail-border);
	padding: 1px 5px;
	border-radius: 3px;
	font-size: 0.7rem;
}

/* ===== Drawer ===== */
.drawer-backdrop {
	position: fixed; inset: 0;
	background: rgba(0,0,0,0.55);
	backdrop-filter: blur(2px);
	display: none;
	z-index: 50;
}
.drawer-backdrop.open { display: block; }
.drawer {
	position: fixed;
	top: 0; right: 0; bottom: 0;
	width: min(360px, 90vw);
	background: var(--panel, #161a22);
	border-left: 1px solid var(--rail-border);
	padding: 24px 18px;
	overflow-y: auto;
	transform: translateX(100%);
	transition: transform 0.25s ease;
	z-index: 60;
}
.drawer.open { transform: translateX(0); }
.drawer .close {
	position: absolute; top: 10px; right: 12px;
	background: none; border: 0; color: var(--text);
	font-size: 1.4rem; cursor: pointer;
}
.drawer section {
	margin-bottom: 22px;
}
.drawer h3 {
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--muted);
	margin: 0 0 10px;
}
.rename-form {
	display: flex; gap: 6px;
	margin-top: 6px;
}
.rename-form input {
	flex: 1;
	background: var(--grid, #1b2030);
	border: 1px solid var(--rail-border);
	color: var(--text);
	padding: 6px 8px;
	border-radius: 6px;
}
.rename-form button {
	background: var(--accent, #60a5fa);
	color: #0a1320;
	border: 0;
	padding: 6px 12px;
	border-radius: 6px;
	cursor: pointer;
	font-weight: 600;
}
.current-name { color: var(--muted); font-size: 0.85rem; }
.current-name-value { color: var(--text); font-weight: 600; }
.stats {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 4px 12px;
	font-size: 0.85rem;
	margin: 0;
}
.stats dt { color: var(--muted); }
.stats dd { margin: 0; font-variant-numeric: tabular-nums; }
.stats-by-mode {
	width: 100%;
	margin-top: 10px;
	border-collapse: collapse;
	font-size: 0.78rem;
	font-variant-numeric: tabular-nums;
}
.stats-by-mode th, .stats-by-mode td {
	padding: 4px 6px;
	border-bottom: 1px solid var(--rail-border);
	text-align: right;
}
.stats-by-mode th:first-child, .stats-by-mode td:first-child { text-align: left; }
.stats-by-mode th { color: var(--muted); font-weight: 500; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; }
.stats-by-mode tbody tr:hover { background: rgba(96,165,250,0.06); }

.debug-log {
	width: 100%;
	background: var(--grid, #1b2030);
	color: var(--text);
	border: 1px solid var(--rail-border);
	border-radius: 6px;
	padding: 6px;
	font-family: ui-monospace, Menlo, Consolas, monospace;
	font-size: 0.7rem;
	resize: vertical;
}
.debug-row {
	display: flex; gap: 6px; margin-top: 6px; align-items: center;
	flex-wrap: wrap;
}
.debug-status { font-size: 0.7rem; color: var(--muted); }

/* ----- Pool-only chrome offsets ---------------------------------------
   The bottom-right corner holds the English (spin) widget plus the new
   stats drawer toggle. The site-wide chat bubble (.social-toggle,
   /assets/social.css) and fullscreen toggle (.gh-fs-toggle,
   /assets/theme.js) both default to that same corner — on Pool we
   stack them vertically on the LEFT side instead, with the fullscreen
   toggle sitting just above the chat bubble. */
.social-toggle { right: auto; left: 16px; bottom: 16px; }
.gh-fs-toggle  { right: auto; left: 16px; bottom: 70px; }

/* ----- Fullscreen-the-table mode --------------------------------------
   When Pool's documentElement is in :fullscreen (triggered by the
   site-wide gh-fs-toggle in /assets/theme.js, or the F shortcut), strip
   the header / footer / controls bar / side rails and let the table
   occupy the entire viewport so all six pockets stay visible on small
   landscape screens. The english widget + accuracy bar + chat icon stay
   floating on top because they're position:fixed/absolute. */
:fullscreen .pool-header,
:fullscreen .pool-footer,
:fullscreen .controls-help,
:fullscreen .pool-rail-left,
:fullscreen .pool-rail-right,
:-webkit-full-screen .pool-header,
:-webkit-full-screen .pool-footer,
:-webkit-full-screen .controls-help,
:-webkit-full-screen .pool-rail-left,
:-webkit-full-screen .pool-rail-right { display: none !important; }

:fullscreen .pool-shell,
:-webkit-full-screen .pool-shell {
	grid-template-rows: 1fr;
	grid-template-columns: 1fr;
	grid-template-areas: "table";
	height: 100vh;
	min-height: 0;
}

/* In landscape, the footer + controls-help bar always crop the bottom
   pockets — kill them outright regardless of viewport height. */
@media (orientation: landscape) {
	.pool-shell .controls-help,
	.pool-shell .pool-footer { display: none !important; }
}

/* Phone landscape (and most small-tablet landscape) — every band of
   vertical chrome (header, controls-help bar, footer) eats just enough
   to crop the bottom pockets. Float the header as a thin transparent
   strip in the top-left and hide the rest so the canvas gets the full
   viewport height. */
@media (orientation: landscape) and (max-height: 900px) {
	.pool-header {
		position: absolute; top: 4px; left: 4px;
		z-index: 6;
		background: transparent;
		border: 0;
		padding: 0;
		gap: 4px;
	}
	.pool-header h1,
	.pool-header .scoreboard,
	.pool-header .home,
	.pool-header .user-chip { display: none; }
	.controls-help,
	.pool-footer { display: none !important; }
	.pool-shell {
		grid-template-rows: 1fr;
		grid-template-areas: "table";
		min-height: 100vh;
		min-height: 100dvh;
	}
	.pool-rail-left,
	.pool-rail-right { display: none !important; }
	/* Reserve a bit of breathing room around the table so the bottom
	   pockets and the english widget don't overlap. */
	.pool-table-wrap { padding: 4px 4px 12px; }
}

/* ----- Stats drawer (Last shot + Ball status) -------------------------
   On desktop / portrait the .score-panel sits in the table's top-right
   corner. On phone landscape it would overlap the top-right pocket and
   bank shots, so we hide it by default and surface a small ⓼ pill
   (.stats-toggle) that slides the panel in from the right edge. The
   panel now also carries a "Last shot" mini summary so phones don't
   lose that info when the right rail is hidden. */

.stats-toggle {
	position: absolute;
	top: 10px; right: 10px;
	width: 38px; height: 38px;
	border-radius: 999px;
	border: 1px solid var(--rail-border, rgba(255,255,255,0.15));
	background: rgba(0,0,0,0.55);
	color: var(--text, #fff);
	display: none;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 6;
	padding: 0;
	box-shadow: 0 4px 12px rgba(0,0,0,0.35);
}
.stats-toggle svg { width: 22px; height: 22px; flex: 0 0 22px; }
.stats-toggle:hover { color: var(--accent, #60a5fa); border-color: var(--accent, #60a5fa); }
.stats-toggle[aria-expanded="true"] { color: var(--accent, #60a5fa); }

.score-panel-close {
	display: none;
	position: absolute;
	top: 4px; right: 4px;
	width: 24px; height: 24px;
	border: 0;
	background: transparent;
	color: rgba(255,255,255,0.65);
	font: 700 18px/1 system-ui;
	cursor: pointer;
	border-radius: 6px;
	padding: 0;
}
.score-panel-close:hover { background: rgba(255,255,255,0.08); color: #fff; }

.score-shot {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin: 0 0 4px;
	padding: 0 0 6px;
	border-bottom: 1px solid rgba(255,255,255,0.08);
}
.score-shot-head { color: rgba(255,255,255,0.55); font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.06em; }
.score-shot .shot-stats {
	margin: 0;
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 1px 8px;
	font-size: 0.72rem;
}
.score-shot .shot-stats dt { color: rgba(255,255,255,0.55); }
.score-shot .shot-stats dd { margin: 0; color: #fff; font-variant-numeric: tabular-nums; }

/* On phone/small-landscape, .score-panel becomes a slide-in drawer. */
@media (orientation: landscape) and (max-height: 900px) {
	.stats-toggle { display: flex; }
	.score-panel {
		top: 0; right: 0; bottom: 0;
		min-width: 220px; max-width: 80vw;
		border-radius: 0;
		border-top: 0; border-right: 0; border-bottom: 0;
		padding: 28px 14px 14px;
		background: rgba(0,0,0,0.86);
		transform: translateX(110%);
		transition: transform 200ms cubic-bezier(0.22, 0.61, 0.36, 1);
		pointer-events: auto;
		overflow-y: auto;
		z-index: 7;
	}
	body[data-stats-open="1"] .score-panel { transform: translateX(0); }
	.score-panel-close { display: block; }
	body[data-stats-open="1"] .stats-toggle { opacity: 0.4; }
}

/* ----- Stepped (mobile) cue control ----------------------------------- 
   A persistent control bar pinned to the bottom of .pool-table-wrap,
   only visible when state.cueControl === 'stepped'. The state machine
   in pool/js/input/stepped.js sets [data-phase] on the bar; CSS shows
   the appropriate buttons per phase. */

.stepped-bar {
	position: absolute;
	left: 50%;
	bottom: 14px;
	transform: translateX(-50%);
	max-width: calc(100% - 24px);
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	justify-content: center;
	padding: 8px 12px;
	background: rgba(0,0,0,0.78);
	border: 1px solid var(--rail-border);
	border-radius: 14px;
	box-shadow: 0 8px 24px rgba(0,0,0,0.45);
	z-index: 6;
	pointer-events: auto;
}

/* Show the bar only when stepped mode is active (the body attribute is
   set by setCueControl()). */
body:not([data-cue-control="stepped"]) .stepped-bar { display: none !important; }

/* Per-phase button visibility — every button is hidden by default and
   the [data-phase] selector reveals the relevant cluster. */
.stepped-bar [data-stepped] { display: none; }
.stepped-bar[data-phase="idle"]  [data-stepped="grab"],
.stepped-bar[data-phase="power"] [data-stepped="cancel"],
.stepped-bar[data-phase="power"] .stepped-power,
.stepped-bar[data-phase="power"] [data-stepped="lock-power"],
.stepped-bar[data-phase="aim"]   [data-stepped="cancel"],
.stepped-bar[data-phase="aim"]   [data-stepped="edit-power"],
.stepped-bar[data-phase="aim"]   [data-stepped="lock-aim"],
.stepped-bar[data-phase="ready"] [data-stepped="cancel"],
.stepped-bar[data-phase="ready"] [data-stepped="edit-power"],
.stepped-bar[data-phase="ready"] [data-stepped="edit-aim"],
.stepped-bar[data-phase="ready"] [data-stepped="shoot"]   { display: inline-flex; }

/* In stepped mode the drag-back accuracy bar is irrelevant — hide it
   even if some legacy path tries to show it. */
body[data-cue-control="stepped"] .accuracy-bar { display: none !important; }

/* Drawer difficulty section is hidden unless stepped is active. */
body:not([data-cue-control="stepped"]) #steppedDifficultySection { display: none; }

/* The drawer-action button gets a "selected" indicator. */
[data-stepped-difficulty].selected {
	border-color: var(--accent, #60a5fa);
	color: var(--accent, #60a5fa);
}

.stepped-bar .stepped-btn {
	min-height: 40px;
	padding: 0 14px;
	border-radius: 10px;
	border: 1px solid var(--rail-border);
	background: var(--grid, #1b2030);
	color: var(--text);
	font: 600 13px/1 system-ui;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.stepped-bar .stepped-btn:hover { border-color: var(--accent, #60a5fa); }
.stepped-bar .stepped-btn.primary {
	background: var(--accent, #60a5fa);
	color: #0b1220;
	border-color: var(--accent, #60a5fa);
	font-weight: 700;
}
.stepped-bar .stepped-btn.ghost { background: transparent; color: var(--muted); }
.stepped-bar .stepped-btn.shoot {
	min-width: 140px;
	min-height: 48px;
	background: var(--ok, #22c55e);
	color: #052012;
	border-color: var(--ok, #22c55e);
	font: 800 15px/1 system-ui;
	letter-spacing: 0.06em;
	position: relative;
	overflow: hidden;
}
.stepped-bar .stepped-btn.shoot:hover { filter: brightness(1.08); }

.stepped-power {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-width: 200px;
}
.stepped-power-label { font-size: 0.74rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.stepped-power-val   { font-variant-numeric: tabular-nums; min-width: 36px; text-align: right; font-weight: 700; }
.stepped-power-slider { flex: 1; min-width: 120px; accent-color: var(--accent, #60a5fa); }

/* Pro-mode swing meter that overlays the SHOOT button face. */
.shoot-meter {
	position: absolute;
	left: 6px; right: 6px; bottom: 4px;
	height: 6px;
	background: rgba(0,0,0,0.35);
	border-radius: 3px;
	overflow: hidden;
}
.shoot-meter-zone {
	position: absolute;
	top: 0; bottom: 0;
	left: 36%;
	width: 28%;
	background: rgba(255,255,255,0.65);
	border-radius: 2px;
}
.shoot-meter-needle {
	position: absolute;
	top: -1px; bottom: -1px;
	width: 3px;
	left: 0;
	background: #052012;
	box-shadow: 0 0 0 1px rgba(255,255,255,0.6);
	transform: translateX(-50%);
}

/* Mobile / phone landscape: bar sits a touch lower, buttons a bit tighter. */
@media (orientation: landscape) and (max-height: 720px) {
	.stepped-bar {
		bottom: 8px;
		padding: 6px 10px;
		gap: 6px;
	}
	.stepped-bar .stepped-btn { min-height: 38px; padding: 0 12px; font-size: 12px; }
	.stepped-bar .stepped-btn.shoot { min-width: 110px; min-height: 44px; font-size: 14px; }
	.stepped-power { min-width: 160px; }
}