/* "The Big Break": snooker view. Shares the board stylesheet's replay
   overlay, toasts, processing banner and spoiler blur. */

.snk-lb {
	--snk-ink: #f5f1e6;
	--snk-bg: #0c1410;
	--snk-panel: #111c17;
	--snk-line: #23342b;
	--snk-muted: #a9bab0;
	--snk-gold: #f2d27a;
	padding: 18px;
	border-radius: 22px;
	background: var(--snk-bg);
	color: var(--snk-ink);
}
.snk-lb .ladder-lb__title { color: var(--snk-gold); }
.snk-lb .ladder-lb__chip { background: var(--snk-panel); border-color: var(--snk-line); color: #cfd9d2; }
.snk-lb .ladder-lb__chip::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: #c4161c; box-shadow: inset -2px -2px 3px rgba(0,0,0,.35); }
.snk-lb .snk-chip--foul::before { background: #f5f1e6; }

/* TV scoreboard strip */
.snk-score {
	display: flex;
	align-items: stretch;
	margin: 0 0 14px;
	border-radius: 12px;
	overflow: hidden;
	background: var(--snk-panel);
	border: 1px solid var(--snk-line);
	box-shadow: 0 10px 26px rgba(0,0,0,.3);
}
.snk-score:empty { display: none; }
.snk-score__name {
	flex: 1 1 0;
	min-width: 0;
	padding: 10px 14px;
	font-weight: 800;
	font-size: 16px;
	letter-spacing: .03em;
	text-transform: uppercase;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.snk-score__name--b { text-align: right; color: #cfd9d2; }
.snk-score__pts { display: flex; align-items: center; padding: 0 14px; background: #24372d; font-weight: 900; font-size: 24px; font-variant-numeric: tabular-nums; }
.snk-score__pts--lead { background: var(--snk-gold); color: #1d1606; }
.snk-score__lead { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 12px; background: #1b2a22; font-weight: 900; font-size: 16px; }
.snk-score__lead small { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--snk-muted); }

/* Table */
.snk-stage { position: relative; border-radius: 16px; }
.snk-table { display: block; width: 100%; height: auto; filter: drop-shadow(0 14px 22px rgba(0,0,0,.45)); }
.snk-aim, .snk-glow { opacity: 0; transition: opacity .15s ease; }
.snk-aim.is-on { opacity: .75; }
.snk-glow.is-on { opacity: .9; }

.snk-breakbox {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 6;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 6px 14px;
	border-radius: 12px;
	background: var(--snk-gold);
	color: #1d1606;
	opacity: 0;
	transform: scale(.8);
	transition: opacity .2s ease, transform .2s ease, background .2s ease;
	pointer-events: none;
}
.snk-breakbox.is-on { opacity: 1; transform: none; }
.snk-breakbox.is-bump { animation: snk-bump .3s cubic-bezier(.2,.9,.3,1.5); }
.snk-breakbox.is-foul { background: #ef4444; color: #fff; }
.snk-breakbox small { font-size: 10px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.snk-breakbox strong { font-size: 26px; line-height: 1; font-weight: 900; font-variant-numeric: tabular-nums; }
@keyframes snk-bump { 0% { transform: scale(1); } 40% { transform: scale(1.18); } 100% { transform: scale(1); } }

/* Cue ball instead of a die on the replay card */
.snk-lb .lr-roll__die.snk-cueicon {
	border-radius: 50%;
	background: radial-gradient(circle at 35% 30%, #fff 0 20%, #f5f1e6 45%, #bdb6a2 100%);
	box-shadow: inset -4px -5px 8px rgba(0,0,0,.25), 0 6px 12px rgba(0,0,0,.3);
}

/* Standings */
.snk-list { display: flex; flex-direction: column; margin-top: 14px; border-radius: 14px; overflow: hidden auto; max-height: 360px; background: var(--snk-panel); border: 1px solid var(--snk-line); }
.snk-list > .snk-row { flex: 0 0 auto; }
.snk-row--head { position: sticky; top: 0; z-index: 1; }
.snk-row {
	display: grid;
	grid-template-columns: 38px minmax(0, 1fr) minmax(0, 150px) 64px 60px;
	gap: 10px;
	align-items: center;
	padding: 9px 14px;
	border-top: 1px solid #1d2d24;
	font-size: 14px;
}
.snk-row--head { border-top: 0; background: #16241d; font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--snk-muted); }
.snk-row--head span:nth-child(n+4) { text-align: right; }
.snk-row--me { background: rgba(242,210,122,.16); box-shadow: inset 4px 0 0 var(--snk-gold); }
.snk-row--gap { padding-top: 2px; padding-bottom: 2px; color: var(--snk-muted); }
.snk-pos { font-weight: 900; font-size: 18px; color: var(--snk-gold); }
.snk-name { font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.snk-name em { margin-left: 4px; padding: 1px 6px; border-radius: 6px; background: var(--snk-gold); color: #1d1606; font-style: normal; font-size: 10px; font-weight: 900; letter-spacing: .08em; }
.snk-pots { display: flex; align-items: center; gap: 4px; min-width: 0; overflow: hidden; }
.snk-dot { flex: 0 0 auto; width: 16px; height: 16px; border-radius: 50%; background: var(--c); box-shadow: inset -3px -3px 5px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.12); }
.snk-foul { flex: 0 0 auto; padding: 1px 6px; border-radius: 6px; border: 1.5px solid #ef5a61; color: #ef5a61; font-size: 10px; font-weight: 800; letter-spacing: .06em; }
.snk-big { flex: 0 0 auto; padding: 1px 6px; border-radius: 6px; background: #24372d; color: var(--snk-gold); font-size: 11px; font-weight: 800; }
.snk-high { text-align: right; color: #cfd9d2; font-weight: 700; font-variant-numeric: tabular-nums; }
.snk-pts { text-align: right; font-weight: 900; font-size: 17px; font-variant-numeric: tabular-nums; }
.snk-lb .lrl-more { padding: 8px; text-align: center; color: var(--snk-muted); }

@media (max-width: 600px) {
	.snk-lb { padding: 12px; border-radius: 18px; }
	.snk-row { grid-template-columns: 28px minmax(0, 1fr) minmax(0, 76px) 46px; gap: 8px; padding: 8px 10px; font-size: 13px; }
	.snk-row > :nth-child(4) { display: none; }
	.snk-dot { width: 13px; height: 13px; }
	.snk-pots { justify-content: flex-end; } /* keep the newest pots when space runs out */
	.snk-score__name { font-size: 13px; padding: 8px 10px; }
	.snk-score__pts { font-size: 19px; padding: 0 10px; }
	.snk-breakbox strong { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) {
	.snk-breakbox.is-bump { animation: none; }
}

/* Arcade shot effects */
.snk-ghost { opacity: .55; animation: snk-ghost .32s ease-out forwards; pointer-events: none; }
@keyframes snk-ghost { to { opacity: 0; transform: scale(.4); transform-box: fill-box; transform-origin: center; } }
.snk-burst { transform-box: fill-box; transform-origin: center; animation: snk-burst .5s ease-out forwards; }
@keyframes snk-burst { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(7); } }
.snk-pop { font-family: inherit; font-size: 26px; font-weight: 900; fill: #fff3b8; stroke: #1d1606; stroke-width: 4px; paint-order: stroke; animation: snk-pop .9s ease-out forwards; }
.snk-pop.is-black { fill: #f2d27a; font-size: 32px; }
@keyframes snk-pop { 0% { opacity: 0; transform: translateY(8px) scale(.6); } 20% { opacity: 1; transform: translateY(0) scale(1.15); } 100% { opacity: 0; transform: translateY(-26px) scale(1); } }
.snk-pop { transform-box: fill-box; transform-origin: center; }
.snk-ball.is-pop > circle { animation: snk-popin .35s cubic-bezier(.2,.9,.3,1.6); transform-box: fill-box; transform-origin: center; }
@keyframes snk-popin { from { transform: scale(0); } to { transform: scale(1); } }
.snk-stage.is-shake { animation: snk-shake .32s ease-out; }
@keyframes snk-shake { 0%,100% { transform: none; } 20% { transform: translate(-5px, 2px); } 40% { transform: translate(5px, -3px); } 60% { transform: translate(-3px, 2px); } 80% { transform: translate(2px, -1px); } }
@media (prefers-reduced-motion: reduce) { .snk-ghost, .snk-burst, .snk-pop, .snk-stage.is-shake, .snk-ball.is-pop > circle { animation: none; } }

/* Cue stick */
.snk-stick { opacity: 0; transition: opacity .15s ease; pointer-events: none; }
.snk-stick.is-on { opacity: 1; }