/* Trick Shot Snooker (/snooker, snooker.js). Phones first: under the header, the table fills the
   screen, with the live points, the power bar and the sound switch in a row below it; the
   scoreboard is a sheet of paper further down. Wider screens centre the same. */

.snooker-page .site-header { flex-wrap: nowrap; }
.snooker-title { min-width: 0; margin: 0; font-size: clamp(1.3rem, 6vw, 2rem); line-height: 1.1; white-space: nowrap; }

.snooker-game {
  display: flex; flex-direction: column;
  height: calc(100svh - var(--header-h, 72px)); min-height: 300px; max-width: 1200px;
  margin: 0 auto; padding: 8px max(8px, env(safe-area-inset-right)) 0 max(8px, env(safe-area-inset-left));
  user-select: none; -webkit-user-select: none;
}

/* The table: the canvas fills whatever's left, and the table is drawn as big as fits */
.snooker-table { position: relative; flex: 1; min-height: 0; }
.snooker-table canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; outline: none; }
.snooker-table canvas:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.snooker-hint {
  position: absolute; top: 50%; left: 50%; translate: -50% -50%; display: flex; flex-direction: column; gap: 0.3rem;
  width: max-content; max-width: min(19rem, calc(100% - 100px)); padding: 0.8rem 1.1rem; border-radius: 14px;
  background: rgb(20 20 20 / 0.78); color: #f4f3ef; font: 0.95rem/1.35 var(--sans); text-align: center; pointer-events: none;
}
.snooker-hint strong { font: 600 1.25rem/1.15 var(--display); }
.snooker-hint[hidden] { display: none; }

/* The aiming wheel at the table's right: a ridged dial that rolls as it's dragged */
.snooker-wheel {
  --roll: 0px;
  position: absolute; top: 50%; right: 0; translate: 0 -50%; width: 44px; height: min(64%, 360px);
  border: 1px solid var(--line); border-radius: 22px; overflow: hidden;
  background: var(--field); box-shadow: inset 0 0 10px rgb(0 0 0 / 0.18); cursor: ns-resize; touch-action: none;
}
.snooker-wheel span {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(180deg, var(--muted) 0 2px, transparent 2px 12px) 0 var(--roll) / 100% 24px;
  -webkit-mask: linear-gradient(transparent, #000 30%, #000 70%, transparent); mask: linear-gradient(transparent, #000 30%, #000 70%, transparent);
  opacity: 0.6;
}
.snooker-wheel.off { opacity: 0.4; }
.snooker-wheel:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Spin: a little white ball under the wheel with a dot where the tip will strike; tapping it opens
   a big one to tap or drag on (high: follow, low: screw) */
.snooker-spin {
  --spin: 0;
  position: absolute; right: 0; bottom: 0; display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
  border: 0; border-radius: 50%; background: none; cursor: pointer;
}
.snooker-spin::before, .snooker-spin-ball {
  border-radius: 50%; background: radial-gradient(circle at 36% 32%, #fff, #efede6 55%, #bdbab1);
  box-shadow: 0 2px 5px rgb(0 0 0 / 0.3), inset 0 0 0 1px rgb(0 0 0 / 0.12);
}
.snooker-spin::before { content: ""; width: 36px; height: 36px; }
.snooker-spin .snooker-spin-tip { position: absolute; top: calc(50% - 4px - var(--spin) * 9px); left: calc(50% - 4px); width: 8px; height: 8px; }
.snooker-spin-tip { border-radius: 50%; background: #1c1b19; box-shadow: 0 0 0 2px rgb(255 255 255 / 0.6); pointer-events: none; }
.snooker-spin.off { opacity: 0.4; }
.snooker-spin:focus-visible, .snooker-spin-ball:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.snooker-spin-panel {
  position: absolute; right: 52px; bottom: 0; z-index: 2; padding: 0.75rem 0.9rem 0.9rem;
  border-top: 5px solid var(--rule); background: var(--paper); color: var(--text); box-shadow: 0 10px 30px rgb(0 0 0 / 0.35);
}
.snooker-spin-panel[hidden] { display: none; }
.snooker-spin-help { margin: 0 0 0.6rem; color: var(--muted); font: 500 0.8rem/1.3 var(--sans); }
.snooker-spin-pick { display: flex; align-items: center; gap: 0.75rem; }
.snooker-spin-labels { display: flex; flex-direction: column; justify-content: space-between; height: 120px; color: var(--muted); font: 500 0.75rem/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; text-align: right; }
.snooker-spin-ball { --spin: 0; position: relative; flex: none; width: 132px; height: 132px; cursor: pointer; touch-action: none; }
.snooker-spin-ball::before { content: ""; position: absolute; top: 18%; bottom: 18%; left: 50%; border-left: 1px dashed rgb(0 0 0 / 0.25); }
.snooker-spin-ball .snooker-spin-tip { position: absolute; top: calc(50% - 9px - var(--spin) * 42px); left: calc(50% - 9px); width: 18px; height: 18px; }

/* Watching a replay: who took the shot, over the top cushion (between the pockets on its side) */
.snooker-banner {
  position: absolute; top: 6px; left: 50%; translate: -50% 0; max-width: calc(100% - 150px); margin: 0;
  overflow: hidden; padding: 0.4rem 0.9rem; border-radius: 999px;
  background: rgb(20 20 20 / 0.8); color: #f4f3ef; font: 600 0.85rem/1.3 var(--sans);
  text-overflow: ellipsis; white-space: nowrap; pointer-events: none;
}
/* Centred over the table, which sits left of the aiming wheel */
.snooker-banner, .snooker-hint, .snooker-result { left: calc(50% - 26px); }
.snooker-table.landscape .snooker-banner { left: 30%; }
.snooker-banner[hidden] { display: none; }

/* After the shot: a slip of paper over the table */
.snooker-result {
  position: absolute; top: 50%; left: 50%; translate: -50% -50%; width: min(21rem, calc(100% - 64px));
  padding: 1.2rem 1.2rem 1.1rem; border-top: 6px solid var(--rule);
  background: var(--paper); color: var(--text); box-shadow: 0 14px 40px rgb(0 0 0 / 0.35); text-align: center;
  animation: snooker-in 0.25s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.snooker-result[hidden] { display: none; }
.snooker-result-title { margin: 0; font: 600 2.1rem/1.1 var(--display); text-wrap: balance; }
.snooker-result-text { margin: 0.4rem 0 1rem; color: var(--muted); font-size: 1rem; line-height: 1.4; }
.snooker-form { margin: 0 0 0.75rem; text-align: left; }
.snooker-form[hidden] { display: none; }
.snooker-form label { display: block; margin-bottom: 0.35rem; color: var(--muted); font: 500 0.85rem/1.3 var(--sans); }
.snooker-form-row { display: flex; gap: 8px; }
.snooker-form input {
  flex: 1; min-width: 0; min-height: 50px; padding: 0 0.8rem; border: 1px solid var(--line); border-radius: 8px;
  background: var(--field); color: var(--text); font: max(16px, 1rem)/1.2 var(--sans);
}
.snooker-form input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.snooker-form-row .snooker-button { flex: none; }
.snooker-form-note { margin: 0.4rem 0 0; color: var(--muted); font: 0.85rem/1.35 var(--sans); }
.snooker-form-note:empty { display: none; }
.snooker-trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.snooker-actions { display: flex; flex-wrap: wrap; gap: 10px; }
/* Two buttons sit side by side on the narrowest phone; a third wraps onto its own row */
.snooker-actions .snooker-button { flex: 1 1 auto; padding: 0 0.75rem; white-space: nowrap; }
/* Share this shot: a quieter, full-width link-style button under the others */
.snooker-switch {
  display: block; width: 100%; min-height: 44px; margin: 8px 0 0; padding: 0;
  border: 0; background: none; color: var(--text); font: 600 0.95rem/1.2 var(--sans);
  text-decoration: underline; text-underline-offset: 4px; cursor: pointer;
}
.snooker-switch[hidden] { display: none; }
.snooker-switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.snooker-button {
  flex: 1; min-height: 50px; padding: 0 1rem; border: 1px solid var(--rule); border-radius: 8px;
  background: var(--field); color: var(--text); font: 600 1rem/1.2 var(--sans); cursor: pointer;
}
.snooker-button[hidden] { display: none; }
.snooker-button:disabled { opacity: 0.6; }
.snooker-primary { border-color: var(--text); background: var(--text); color: var(--paper); }
.snooker-button:focus-visible, .snooker-icon:focus-visible, .snooker-power:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

@keyframes snooker-in { from { opacity: 0; transform: translateY(10px) scale(0.97); } }

/* Below the table: the points (counting up live during a shot), the power bar, the sound */
.snooker-controls {
  display: flex; flex: none; align-items: center; gap: 10px;
  width: min(36rem, 100%); margin: 0 auto; padding: 10px 4px 0;
}
.snooker-points { display: flex; flex: none; align-items: center; gap: 6px; margin: 0; }
.snooker-points-n { min-width: 1.1ch; font: 600 2.6rem/1 var(--display); font-variant-numeric: tabular-nums; text-align: center; }
.snooker-points-n.bump { animation: snooker-bump 0.45s cubic-bezier(0.2, 0.7, 0.2, 1); }
.snooker-points-label { color: var(--muted); font: 500 0.7rem/1.35 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; }
.snooker-points-label b { color: var(--text); font-weight: 500; }
@keyframes snooker-bump { 30% { transform: scale(1.45); } }

/* The power bar: press anywhere on it, pull right, let go */
.snooker-power {
  --p: 0;
  position: relative; flex: 1; min-width: 0; height: 60px;
  border: 1px solid var(--line); border-radius: 30px; overflow: hidden;
  background: var(--field); cursor: grab; touch-action: none;
}
.snooker-power.pulling { cursor: grabbing; }
.snooker-power-fill {
  position: absolute; inset: 0 auto 0 0; width: calc(28px + var(--p) * (100% - 28px));
  background: linear-gradient(90deg, var(--line), var(--muted) 60%, var(--rule));
  opacity: calc(0.25 + var(--p) * 0.75);
}
.snooker-power-label {
  position: absolute; inset: 0 0 0 52px; display: grid; place-items: center;
  color: var(--muted); font: 600 0.75rem/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap;
  pointer-events: none; transition: opacity 0.15s;
}
.snooker-power.pulling .snooker-power-label { opacity: 0; }
.snooker-power-knob {
  position: absolute; top: 5px; left: calc(5px + var(--p) * (100% - 58px));
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  background: var(--text); color: var(--paper); box-shadow: 0 2px 6px rgb(0 0 0 / 0.25); pointer-events: none;
}
.snooker-power-knob svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }

.snooker-icon {
  display: grid; flex: none; place-items: center; width: 48px; height: 48px; padding: 0;
  border: 0; border-radius: 50%; background: none; color: var(--text); cursor: pointer;
}
.snooker-icon svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.snooker-icon path:first-child { fill: currentColor; }
.snooker-icon[aria-pressed="true"] .snooker-sound-off,
.snooker-icon[aria-pressed="false"] .snooker-sound-on { display: none; }
.snooker-icon[aria-pressed="false"] { color: var(--muted); }
@media (hover: hover) { .snooker-icon:hover { background: var(--field); } }

@media (prefers-reduced-motion: reduce) { .snooker-result, .snooker-points-n.bump { animation: none; } }

.score-play { margin: 0.9rem 0 0; }
.score-play[hidden] { display: none; }
.score-play .snooker-button { width: 100%; }

/* The scoreboard */
#scoreboard { scroll-margin-top: 1rem; margin-bottom: 1.5rem; }
#scoreboard h2 { font-size: 2rem; margin-bottom: 0.5rem; }
.score-list { margin: 1.25rem 0 0; padding: 0; list-style: none; font-family: var(--sans); }
.score-list li {
  display: grid; grid-template-columns: 1.6rem minmax(0, 1fr) auto auto; grid-template-areas: "rank name points replay" "rank date points replay";
  align-items: center; column-gap: 0.7rem; padding: 0.6rem 0; border-top: 1px solid var(--line);
}
.score-replay {
  grid-area: replay; min-height: 44px; padding: 0 0.75rem; border: 1px solid var(--line); border-radius: 8px;
  background: var(--field); color: var(--text); font: 500 0.85rem/1.2 var(--sans); white-space: nowrap; cursor: pointer;
}
.score-replay:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (hover: hover) { .score-replay:hover { border-color: var(--text); } }
.score-list li:last-child { border-bottom: 1px solid var(--line); }
.score-list li.score-gap { display: block; padding: 0.2rem 0; color: var(--muted); text-align: center; }
.score-list li.mine { margin: 0 -0.6rem; padding: 0.6rem; background: var(--field); }
.score-rank { grid-area: rank; color: var(--muted); font: 500 0.9rem/1 var(--mono); text-align: right; }
.score-name { grid-area: name; overflow: hidden; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.score-date { grid-area: date; color: var(--muted); font-size: 0.8rem; }
.score-points { grid-area: points; font: 600 1.6rem/1 var(--display); }
.score-note { color: var(--muted); font-family: var(--sans); font-size: 0.9rem; }

/* A nudge under the controls so phone visitors know the scoreboard is a scroll away */
.snooker-scroll {
  display: flex; flex: none; align-items: center; justify-content: center; gap: 6px; min-height: 44px;
  margin: 0 auto; padding: 0 1rem env(safe-area-inset-bottom); color: var(--muted); font: 500 0.75rem/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none;
}
.snooker-scroll svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; animation: snooker-nudge 1.6s ease-in-out infinite; }
@keyframes snooker-nudge { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) { .snooker-scroll svg { animation: none; } }

/* How to play, under the leaderboard: plain text for people (and search engines) who want the rules */
.snooker-guide { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.snooker-guide h2 { margin-top: 1.75rem; font-size: 1.6rem; }
.snooker-guide h2:first-child { margin-top: 0; }
.snooker-guide h3 { margin: 1.25rem 0 0.2rem; font: 600 1.05rem/1.3 var(--sans); }
.snooker-guide h3 + p { margin-top: 0; }
.snooker-steps { margin: 1rem 0 0; }
.snooker-steps dt { margin-top: 0.9rem; font: 500 0.8rem/1.2 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; }
.snooker-steps dd { margin: 0.2rem 0 0; }

/* --- The trick shots guide (/snooker/trick-shots): diagrams drawn from the game's own shots by
   scripts/render-snooker-guide.mjs, in the table's colours ----------------------------------- */
.sg-crumb { margin: 0 0 0.25rem; font: 500 0.8rem/1.4 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.sg-crumb a { display: inline-block; padding: 12px 0; color: inherit; }
.snooker-guide-page main h1 { margin-top: 0.25rem; font-size: clamp(1.9rem, 8vw, 2.6rem); line-height: 1.1; }
.sg-contents { display: flex; flex-wrap: wrap; gap: 8px; margin: 1.25rem 0 0; }
.sg-contents a {
  display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 14px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--field);
  font: 500 0.95rem/1.2 var(--sans); color: var(--text); text-decoration: none;
}
.sg-shot { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); scroll-margin-top: 12px; }
.sg-shot h2 { margin: 0 0 1rem; font-size: 1.6rem; }
.sg-shot figure { margin: 0 0 1rem; }
/* Upright like the game on a phone; never taller than most of the screen */
.sg-table { display: block; width: 100%; max-height: 72svh; margin: 0 auto; border-radius: 10px; }
.sg-rail { fill: #5b2d18; }
.sg-cushion { fill: #17502b; }
.sg-bed { fill: #237043; }
.sg-pockets { fill: #0e0e0d; }
.sg-lines { fill: none; stroke: rgb(255 255 255 / 0.4); stroke-width: 5; }
.sg-spots { fill: rgb(255 255 255 / 0.5); }
.sg-white-path { fill: none; stroke: #fff; stroke-width: 9; stroke-dasharray: 4 22; stroke-linecap: round; stroke-linejoin: round; opacity: 0.9; }
.sg-black-path { fill: none; stroke: #ffd76a; stroke-width: 12; stroke-linecap: round; stroke-linejoin: round; }
.sg-ghost { fill: none; stroke: #fff; stroke-width: 6; stroke-dasharray: 14 10; }
.sg-white { fill: #f4f2ec; stroke: rgb(0 0 0 / 0.35); stroke-width: 4; }
.sg-black { fill: #111; stroke: rgb(255 255 255 / 0.45); stroke-width: 4; }
.sg-ball-end { fill: rgb(244 242 236 / 0.35); stroke: rgb(255 255 255 / 0.6); stroke-width: 4; stroke-dasharray: 10 8; }
.sg-mark circle { fill: #ffd76a; }
.sg-mark text { fill: #1c1b19; font: 600 72px/1 var(--sans); text-anchor: middle; }
/* Where the drawing stops short of the bottom of the table: the table fades into the paper */
.sg-fade-from { stop-color: var(--bg); stop-opacity: 0; }
.sg-fade-to { stop-color: var(--bg); stop-opacity: 1; }
.sg-key { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0.6rem 0 0; font: 400 0.85rem/1.4 var(--sans); color: var(--muted); }
.sg-key span::before { content: ""; display: inline-block; width: 22px; height: 0; margin-right: 6px; vertical-align: middle; border-top: 3px solid; }
.sg-key .sg-key-white::before { border-top-style: dotted; border-color: var(--text); }
.sg-key .sg-key-black::before { border-color: #d9a520; }
.sg-key .sg-key-ghost::before, .sg-key .sg-key-mark::before { width: 12px; height: 12px; border-radius: 50%; }
.sg-key .sg-key-ghost::before { border: 2px dashed var(--text); }
.sg-key .sg-key-mark::before { border: 0; background: #e0b030; }
.sg-info { margin: 0.2rem 0 0; font: 400 0.85rem/1.4 var(--mono); color: var(--muted); }
.sg-try {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px;
  border-radius: 999px; background: #17502b; color: #fff; font: 600 1rem/1.2 var(--sans); text-decoration: none;
}
.sg-try::after { content: "\2192"; margin-left: 8px; }
.sg-try:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (min-width: 700px) {
  .sg-shot figure { float: right; width: 46%; margin: 0 0 1rem 1.5rem; }
  .sg-shot::after { content: ""; display: block; clear: both; }
}
a.snooker-switch { display: flex; align-items: center; justify-content: center; }
a.snooker-switch[hidden] { display: none; }