:root {
  --ink: #f3ead6;
  --muted: #b9a888;
  --brass-hi: #f7e2a6;
  --brass: #c9a052;
  --brass-lo: #7d5a22;
  --leather: #2a1a12;
  --leather-2: #3a251a;
  --walnut: #4a2d1a;
  --felt: #1d6b3f;
  --good: #8fd6a2;
  --bad: #ff8f84;
  --brass-grad: linear-gradient(180deg, #f8e6ae 0%, #d6ae60 38%, #a57a32 62%, #e2c27a 100%);
  --wood-grad: repeating-linear-gradient(92deg, #0000 0 7px, #00000014 7px 9px, #0000 9px 19px, #ffffff08 19px 20px),
    linear-gradient(180deg, #5a3720, #3d2414);
  --leather-grad: radial-gradient(120% 140% at 30% 0%, #ffffff0d, #0000 60%),
    repeating-radial-gradient(circle at 20% 30%, #00000010 0 1px, #0000 1px 3px), linear-gradient(180deg, #34211a, #22150f);
  --display: 'Playfair Display', Georgia, serif;
  --ui: 'Oswald', 'Arial Narrow', sans-serif;
}
* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}
html,
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  color: var(--ink);
  font-family: var(--ui);
  letter-spacing: 0.02em;
  user-select: none;
  touch-action: none;
  /* dim club room: panelled wall with a pool of lamp light */
  background-color: #120b08;
  background-image: radial-gradient(ellipse 75% 65% at 50% 50%, #ffd9a01f 0%, #0000 60%),
    radial-gradient(ellipse 120% 100% at 50% 50%, #0000 35%, #000000d9 100%),
    repeating-linear-gradient(0deg, #00000059 0 2px, #0000 2px 54px),
    repeating-linear-gradient(90deg, #0000 0 230px, #0000004d 230px 232px),
    repeating-linear-gradient(90deg, #ffffff05 0 3px, #0000 3px 11px),
    linear-gradient(180deg, #3b2617, #2a190f);
}
#game {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.hidden {
  display: none !important;
}
svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ================= HUD: one leather scoreboard strip with brass trim */
#hud {
  position: fixed;
  top: max(8px, env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  width: min(980px, calc(100% - 16px));
  display: flex;
  align-items: stretch;
  gap: 8px;
  z-index: 5;
}
.frame-btn {
  width: 50px;
  flex: none;
  border-radius: 10px;
  border: none;
  padding: 3px;
  background: var(--brass-grad);
  box-shadow: 0 4px 10px #000a;
  cursor: pointer;
  display: grid;
  place-items: center;
  color: var(--ink);
  position: relative;
  transition: filter 0.15s;
}
.frame-btn::before {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 8px;
  background: var(--leather-grad);
  box-shadow: inset 0 2px 6px #000c;
}
.frame-btn > * {
  position: relative;
}
.frame-btn svg {
  width: 22px;
  height: 22px;
  color: var(--brass-hi);
}
.frame-btn:hover {
  filter: brightness(1.12);
}
.frame-btn:active {
  transform: translateY(1px);
}
.hud-main {
  flex: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  border-radius: 10px;
  border: 3px solid transparent;
  background: var(--leather-grad) padding-box, var(--brass-grad) border-box;
  box-shadow: 0 6px 16px #000b, inset 0 2px 6px #000b;
  min-height: 62px;
}
.hud-cell {
  padding: 4px 16px;
  text-align: center;
  line-height: 1;
}
.hud-cell + .hud-cell,
.hud-tray + .hud-cell {
  border-left: 1px solid #ffffff14;
  box-shadow: -1px 0 0 #0006;
}
.hud-cell small {
  display: block;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 3px;
}
.hud-cell b {
  font: 500 24px/1 var(--ui);
  color: var(--ink);
}
.hud-level b {
  color: var(--brass-hi);
}
.hud-score {
  min-width: 96px;
}
.hud-score .best {
  margin: 3px 0 0;
  font-size: 9px;
  letter-spacing: 0.15em;
}
.hud-score .best span {
  color: var(--brass-hi);
}
.hud-turns b {
  font-size: 26px;
  color: #9cc8ff;
}
.pips {
  display: flex;
  justify-content: center;
  gap: 3px;
  margin-top: 4px;
  max-width: 120px;
  flex-wrap: wrap;
}
/* each turn is a chalk cube */
.pips i {
  width: 9px;
  height: 9px;
  border-radius: 2px;
  background: linear-gradient(135deg, #8cc0ff, #2f6ad0);
  box-shadow: inset 0 0 0 1px #ffffff40, 0 1px 2px #000a;
  transition: 0.3s;
}
.pips i.now {
  outline: 2px solid var(--brass-hi);
  outline-offset: 1px;
}
.pips i.used {
  background: #ffffff14;
  box-shadow: inset 0 0 0 1px #ffffff14;
}
.hud-turns.last b {
  color: var(--bad);
  animation: pulse 0.9s infinite;
}
/* recessed ball rack in the middle of the board */
.hud-tray {
  align-self: stretch;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
  justify-content: center;
  margin: 6px 4px;
  padding: 4px 10px;
  border-radius: 20px;
  background: linear-gradient(180deg, #0a0604, #1d120c);
  box-shadow: inset 0 3px 8px #000, 0 1px 0 #ffffff12;
}
.hud-tray .pball {
  --s: 26px;
}

/* status line under the table */
#status {
  position: fixed;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 7px 16px;
  border-radius: 999px;
  background: #0b0705cc;
  border: 1px solid #c9a05255;
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--muted);
  white-space: nowrap;
  pointer-events: none;
  z-index: 4;
  animation: fade 0.3s;
}
#status b {
  font-weight: 500;
  color: var(--brass-hi);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
#status span {
  padding-left: 12px;
  border-left: 1px solid #ffffff1f;
}

/* ================= CSS pool balls */
.pball {
  --c: #fff;
  --s: 24px;
  position: relative;
  width: var(--s);
  height: var(--s);
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-style: normal;
  background: radial-gradient(circle at 33% 28%, #ffffffe0 0 6%, #ffffff40 12%, #0000 24%),
    radial-gradient(circle at 60% 70%, #0000 40%, #0000008c 100%), var(--c);
  box-shadow: 0 2px 3px #000a;
  transition: opacity 0.3s, transform 0.3s, filter 0.3s;
}
.pball.stripe {
  background: radial-gradient(circle at 33% 28%, #ffffffe0 0 6%, #ffffff40 12%, #0000 24%),
    radial-gradient(circle at 60% 70%, #0000 40%, #0000008c 100%),
    linear-gradient(#f4efe2 0 24%, var(--c) 24% 76%, #f4efe2 76%);
}
.pball b {
  width: 40%;
  height: 40%;
  border-radius: 50%;
  background: #f8f4ea;
  color: #111;
  font: 600 calc(var(--s) * 0.26) / 1 var(--ui);
  display: grid;
  place-items: center;
  letter-spacing: 0;
}
.pball.gone {
  opacity: 0.2;
  filter: grayscale(1);
  transform: scale(0.85);
}
.pball.dark {
  background: radial-gradient(circle at 33% 28%, #ffffff30 0 10%, #0000 26%), #1b1410;
}
.pball.dark svg {
  width: 45%;
  height: 45%;
  color: #8a7a62;
}

/* ================= spin picker */
.cueball,
#spinBall {
  position: relative;
  display: block;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, #fff 0 14%, #efeadd 42%, #b9b2a2 100%);
  box-shadow: 0 3px 8px #000a;
}
.cueball {
  width: 34px;
  height: 34px;
}
.dot {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 26%;
  height: 26%;
  margin: -13% 0 0 -13%;
  border-radius: 50%;
  background: #c8202a;
  box-shadow: 0 0 0 2px #fff9;
  transition: transform 0.08s;
}
#spinPanel {
  position: fixed;
  top: 96px;
  right: max(16px, calc(50% - 470px));
  padding: 14px 16px;
  border-radius: 10px;
  background: var(--leather-grad);
  border: 3px solid var(--brass);
  box-shadow: 0 14px 30px #000c;
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  z-index: 7;
}
#spinPanel.show {
  display: flex;
}
.spin-legend {
  display: flex;
  justify-content: space-between;
  width: 100%;
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted);
}
.spin-title {
  font-size: 12px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--brass-hi);
}
#spinBall {
  width: 130px;
  height: 130px;
  cursor: crosshair;
  touch-action: none;
}
#spinBall::before,
#spinBall::after {
  content: '';
  position: absolute;
  background: #00000026;
}
#spinBall::before {
  left: 50%;
  top: 8%;
  bottom: 8%;
  width: 1px;
}
#spinBall::after {
  top: 50%;
  left: 8%;
  right: 8%;
  height: 1px;
}
#spinDotBig {
  width: 22%;
  height: 22%;
  margin: -11% 0 0 -11%;
}

/* ================= power: desktop meter + touch bar */
#powerMeter {
  --p: 0;
  position: fixed;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 14px;
  border-radius: 999px;
  background: #0b0705e6;
  border: 1px solid #c9a05277;
  opacity: 0;
  transition: opacity 0.15s;
  pointer-events: none;
  z-index: 5;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}
#powerMeter.show {
  opacity: 1;
}
#powerMeter b {
  width: min(260px, 45vw);
  height: 10px;
  border-radius: 5px;
  background: #1c120c;
  box-shadow: inset 0 1px 3px #000;
  overflow: hidden;
}
#powerMeter i {
  display: block;
  height: 100%;
  width: calc(var(--p) * 100%);
  background: linear-gradient(90deg, #6fbf73, #e8c35a 60%, #d9483b);
}
#powerMeter em {
  font: 500 15px var(--ui);
  font-style: normal;
  color: var(--ink);
  min-width: 40px;
  text-align: right;
}
.touch-ctl {
  position: fixed;
  right: max(10px, env(safe-area-inset-right));
  top: 56%;
  transform: translateY(-50%);
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  z-index: 5;
}
@media (pointer: coarse) {
  .touch-ctl {
    display: flex;
  }
  #powerMeter {
    display: none;
  }
}
#power {
  position: relative;
  width: 48px;
  height: min(46vh, 300px);
  border-radius: 24px;
  border: 3px solid var(--brass);
  background: linear-gradient(90deg, #120a06, #2a1a12 50%, #120a06);
  overflow: hidden;
  touch-action: none;
}
#powerFill {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 0;
  background: linear-gradient(#6fbf73, #e8c35a 55%, #d9483b);
  opacity: 0.8;
}
#powerKnob {
  position: absolute;
  left: 4px;
  right: 4px;
  top: 0;
  height: 15%;
  border-radius: 16px;
  background: linear-gradient(90deg, #c9a46c, #f1dcae 45%, #a77a40);
  box-shadow: 0 3px 6px #000a;
}
.ctl-label {
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--muted);
}

/* ================= ball in hand hint, toast, floating points */
#handHint {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translate(-50%, 20px);
  padding: 9px 18px;
  border-radius: 6px;
  background: var(--leather-grad);
  border: 2px solid var(--brass);
  box-shadow: 0 8px 20px #000b;
  font-size: 14px;
  color: var(--muted);
  opacity: 0;
  pointer-events: none;
  transition: 0.25s;
  z-index: 6;
  white-space: nowrap;
}
#handHint b {
  color: var(--brass-hi);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-right: 8px;
}
#handHint.show {
  opacity: 1;
  transform: translate(-50%, 0);
}
.float {
  position: fixed;
  transform: translate(-50%, -50%);
  font: 600 22px/1 var(--ui);
  color: var(--brass-hi);
  text-shadow: 0 2px 4px #000, 0 0 12px #000;
  pointer-events: none;
  z-index: 6;
  text-align: center;
  animation: floatUp 1.1s ease-out forwards;
}
.float small {
  display: block;
  font-size: 12px;
  letter-spacing: 0.15em;
  color: var(--good);
}
.float.neg {
  color: var(--bad);
  font-size: 18px;
  letter-spacing: 0.1em;
}
.float.trick {
  font-size: 18px;
  letter-spacing: 0.12em;
}
#toast {
  position: fixed;
  left: 50%;
  top: 26%;
  transform: translate(-50%, -8px);
  padding: 8px 22px;
  border-radius: 4px;
  background: #0a0604d9;
  border-top: 1px solid var(--brass);
  border-bottom: 1px solid var(--brass);
  font: 500 19px var(--ui);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0;
  pointer-events: none;
  transition: 0.2s;
  z-index: 6;
  white-space: nowrap;
}
#toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}
#toast.good {
  color: var(--good);
}
#toast.bad {
  color: var(--bad);
}

/* ================= overlays */
#overlay {
  position: fixed;
  inset: 0;
  display: none;
  place-items: center;
  padding: 16px;
  z-index: 10;
  overflow: auto;
}
#overlay.show {
  display: grid;
  animation: fade 0.3s;
}
#overlay.dim {
  background: radial-gradient(ellipse at center, #0006, #000c);
}
#overlay.full {
  background: radial-gradient(ellipse 80% 70% at 50% 40%, #0008, #000e);
}

/* engraved brass name plate */
.plaque {
  align-self: center;
  padding: 3px;
  border-radius: 4px;
  background: var(--brass-grad);
  box-shadow: 0 4px 10px #000b;
}
.plaque span {
  display: block;
  padding: 7px 26px 8px;
  border-radius: 2px;
  background: linear-gradient(180deg, #e9cf8e, #c49a4f 55%, #b48a42);
  box-shadow: inset 0 1px 0 #fff6, inset 0 -1px 0 #0003;
  font: 700 24px/1 var(--display);
  color: #3a2508;
  text-shadow: 0 1px 0 #f9e7b8;
  white-space: nowrap;
}
.plaque.red span {
  color: #5a1010;
}

/* leather card with brass edge */
.card,
.board {
  position: relative;
  width: min(400px, 100%);
  padding: 22px 22px 20px;
  border-radius: 12px;
  background: var(--leather-grad);
  border: 4px solid transparent;
  background-clip: padding-box;
  box-shadow: 0 0 0 3px var(--brass), 0 0 0 7px var(--walnut), 0 24px 60px #000e;
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-align: center;
  animation: rise 0.35s cubic-bezier(0.2, 1, 0.3, 1);
}
.board {
  width: min(560px, 100%);
}
.card p {
  margin: 0;
  color: var(--muted);
}

/* buttons */
.menu-item {
  appearance: none;
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 12px 18px;
  border: 1px solid #ffffff14;
  border-radius: 6px;
  background: linear-gradient(180deg, #3b261b, #26180f);
  box-shadow: inset 0 1px 0 #ffffff12, 0 3px 8px #0009;
  color: var(--ink);
  font: 500 18px var(--ui);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: left;
  cursor: pointer;
  transition: 0.15s;
}
.menu-item svg {
  color: var(--brass);
  flex: none;
}
.menu-item span {
  flex: 1;
}
.menu-item small {
  display: block;
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--muted);
}
.menu-item:hover {
  border-color: var(--brass);
  background: linear-gradient(180deg, #46301f, #2c1c12);
}
.menu-item:active {
  transform: translateY(1px);
}
.menu-item.primary {
  background: linear-gradient(180deg, #2b7a4b, #175a34);
  border-color: #8fd6a255;
  box-shadow: inset 0 1px 0 #ffffff26, 0 4px 10px #000a;
}
.menu-item.primary svg {
  color: var(--ink);
}
.menu-item.primary:hover {
  background: linear-gradient(180deg, #33895a, #1b673c);
}
.menu-item.center {
  justify-content: center;
  text-align: center;
}
.menu-item.center span {
  flex: none;
}
.icon-btn {
  appearance: none;
  border: none;
  background: none;
  color: var(--muted);
  font: 500 10px var(--ui);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  cursor: pointer;
}
.icon-btn svg {
  width: 46px;
  height: 46px;
  padding: 11px;
  border-radius: 50%;
  color: var(--brass-hi);
  background: radial-gradient(circle at 50% 30%, #4a3022, #24160e);
  box-shadow: 0 0 0 2px var(--brass), 0 4px 10px #000a;
}
.icon-btn:hover svg {
  box-shadow: 0 0 0 2px var(--brass-hi), 0 4px 14px #000a;
}
.actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
}
.actions .menu-item {
  width: auto;
  min-width: 0;
  flex: 1;
  max-width: 290px;
  gap: 10px;
  padding: 12px 16px;
  font-size: clamp(14px, 4.2vw, 18px);
  letter-spacing: 0.06em;
  justify-content: center;
}
/* longer labels ("Accept rematch", "Waiting for friend…") wrap between words inside the button */
.actions .menu-item span {
  flex: 0 1 auto;
  min-width: 0;
  line-height: 1.1;
  text-align: center;
}
@media (max-width: 420px) {
  .actions .menu-item {
    padding: 12px 10px;
  }
  .actions .menu-item svg {
    display: none;
  }
}
.text-btn {
  appearance: none;
  border: none;
  background: none;
  color: var(--muted);
  font: 500 14px var(--ui);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
}
.text-btn:hover {
  color: var(--ink);
}

/* ---- title screen */
.title-screen {
  position: relative;
  width: min(420px, 100%);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 22px;
  animation: rise 0.5s cubic-bezier(0.2, 1, 0.3, 1);
}
.lamp-glow {
  position: fixed;
  left: 50%;
  top: -10%;
  width: 900px;
  height: 700px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse 45% 55% at 50% 30%, #ffdc9a26, #0000 70%);
  pointer-events: none;
}
.brand-plate {
  position: relative;
  padding: 22px 20px 18px;
  border-radius: 10px;
  text-align: center;
  background: var(--wood-grad);
  box-shadow: 0 0 0 3px var(--brass), 0 0 0 6px #1a0f08, 0 20px 50px #000d, inset 0 2px 0 #ffffff14;
}
.brand-plate small {
  font-size: 11px;
  letter-spacing: 0.4em;
  color: var(--brass);
}
.brand-plate h1 {
  margin: 4px 0 6px;
  font: italic 700 clamp(46px, 13vw, 64px) / 1 var(--display);
  background: var(--brass-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 0 #1a0f08) drop-shadow(0 6px 10px #000a);
}
.brand-rule {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 auto 8px;
  width: 70%;
}
.brand-rule i:not(.pball) {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, #0000, var(--brass), #0000);
}
.brand-rule .pball {
  --s: 26px;
}
.brand-plate p {
  margin: 0;
  font-size: 13px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--muted);
}
.menu-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.menu-list .primary {
  padding: 15px 18px;
  font-size: 22px;
}
.star-total {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.star-total b {
  font-size: 20px;
  color: var(--brass-hi);
  font-weight: 500;
}

/* ---- level select */
.levels .grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px 8px;
  padding: 14px;
  border-radius: 8px;
  background: radial-gradient(ellipse at center, #237a49, #13502d);
  box-shadow: inset 0 3px 14px #000c;
}
.tile {
  appearance: none;
  border: none;
  background: none;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 4px 0;
  border-radius: 8px;
  cursor: pointer;
  transition: 0.15s;
}
.tile .pball {
  --s: 40px;
  box-shadow: 0 4px 6px #0009;
}
.tile > b {
  font: 500 13px var(--ui);
  color: #e9f3ec;
}
.tile-stars {
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--brass-hi);
  min-height: 12px;
}
.tile-stars em {
  font-style: normal;
  color: #ffffff2e;
}
.tile:hover:not(:disabled) .pball {
  transform: translateY(-2px);
}
.tile.current .pball {
  box-shadow: 0 0 0 3px var(--brass-hi), 0 0 18px #f7e2a6aa;
}
.tile.locked {
  cursor: default;
  opacity: 0.7;
}
.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  color: var(--muted);
  font-size: 13px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.arrow {
  appearance: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid var(--brass);
  background: radial-gradient(circle at 50% 30%, #4a3022, #24160e);
  color: var(--brass-hi);
  display: grid;
  place-items: center;
  cursor: pointer;
}
.arrow:disabled {
  opacity: 0.3;
  cursor: default;
}

/* ---- rules */
.rules {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: r;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
}
.rules li {
  counter-increment: r;
  display: grid;
  grid-template-columns: 28px 1fr;
  column-gap: 10px;
  font-size: 14px;
  line-height: 1.4;
  color: var(--muted);
  font-family: Georgia, serif;
  letter-spacing: 0;
}
.rules li::before {
  content: counter(r);
  grid-row: span 2;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font: 600 13px var(--ui);
  color: #3a2508;
  background: var(--brass-grad);
}
.rules b {
  font: 500 15px var(--ui);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
}

/* ---- level brief */
.intro {
  cursor: pointer;
}
.brief {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
}
.brief li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 6px;
  background: #00000040;
  border-left: 3px solid var(--brass);
  font-size: 16px;
  color: var(--ink);
}
.brief li:first-child {
  font-size: 19px;
}
.brief b {
  color: var(--brass-hi);
  font-weight: 500;
}
.brief .pball {
  --s: 20px;
}
.new {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 6px;
  background: #2b7a4b33;
  border: 1px solid #8fd6a255;
  color: #d8f0de;
  font-size: 14px;
  text-align: left;
}
.new em {
  font-style: normal;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 3px;
  background: var(--good);
  color: #10321c;
}
.tap {
  font-size: 13px;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--brass-hi);
  animation: pulse 1.4s infinite;
}

/* ---- results */
.stats {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.stats div {
  display: flex;
  justify-content: space-between;
  padding: 6px 4px;
  border-bottom: 1px dashed #ffffff1a;
  font-size: 15px;
}
.stats dt {
  color: var(--muted);
  letter-spacing: 0.08em;
}
.stats dd {
  margin: 0;
  color: var(--ink);
}
.total-score small {
  display: block;
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--muted);
}
.total-score b {
  font: 700 46px/1.1 var(--display);
  background: var(--brass-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.total-score em {
  display: block;
  font-style: normal;
  font-size: 12px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--good);
}
.reason {
  font-family: Georgia, serif;
  font-size: 16px;
}
.stars {
  display: flex;
  justify-content: center;
  gap: 6px;
}
.stars svg {
  width: 22px;
  height: 22px;
  fill: #ffffff14;
  stroke: #ffffff26;
  stroke-width: 1;
}
.stars.big svg {
  width: 54px;
  height: 54px;
}
.stars .on svg {
  fill: #e9c56a;
  stroke: #7d5a22;
  filter: drop-shadow(0 0 10px #f7e2a680);
}
.stars.big span.on {
  animation: star 0.5s calc(var(--i) * 0.2s) both cubic-bezier(0.2, 1.6, 0.4, 1);
}

@keyframes fade {
  from {
    opacity: 0.5;
  }
}
@keyframes rise {
  from {
    transform: translateY(16px);
  }
}
@keyframes star {
  from {
    transform: scale(0);
  }
}
@keyframes pulse {
  50% {
    opacity: 0.4;
  }
}
@keyframes floatUp {
  to {
    transform: translate(-50%, -170%);
    opacity: 0;
  }
}

@media (max-width: 560px) {
  #hud {
    gap: 5px;
  }
  .frame-btn {
    width: 44px;
  }
  .cueball {
    width: 26px;
    height: 26px;
  }
  /* stats on top, ball rack underneath */
  .hud-main {
    grid-template-columns: 1fr 1fr 1fr;
    min-height: 0;
  }
  .hud-tray {
    grid-column: 1 / -1;
    grid-row: 2;
    margin: 0 6px 6px;
    padding: 3px 8px;
  }
  .hud-cell {
    padding: 6px 4px 4px;
  }
  .hud-cell small {
    font-size: 8px;
    letter-spacing: 0.15em;
  }
  .hud-cell b,
  .hud-turns b {
    font-size: 18px;
  }
  .hud-score {
    min-width: 0;
  }
  .hud-score .best,
  .pips {
    display: none;
  }
  .pball,
  .hud-tray .pball {
    --s: 17px;
  }
  #status span {
    display: none;
  }
  .pball b {
    display: none;
  }
  .tile .pball {
    --s: 34px;
  }
  .tile .pball b {
    display: grid;
  }
  .levels .grid {
    gap: 8px 4px;
    padding: 10px 6px;
  }
  .actions {
    gap: 10px;
  }
  #handHint {
    white-space: normal;
    width: calc(100% - 32px);
    text-align: center;
  }
}
.star-one {
  color: var(--brass-hi);
  font-size: 18px;
  letter-spacing: 0;
}
.intro-rack {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 5px;
  padding: 10px;
  border-radius: 30px;
  background: linear-gradient(180deg, #0a0604, #1d120c);
  box-shadow: inset 0 3px 8px #000;
}
.intro-rack .pball {
  --s: 30px;
}
.extra-turns {
  appearance: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 12px;
  border-radius: 8px;
  border: 1px solid #9cc8ff66;
  background: linear-gradient(180deg, #24406e, #152846);
  box-shadow: inset 0 1px 0 #ffffff22, 0 4px 10px #0009;
  color: var(--ink);
  font-family: var(--ui);
  cursor: pointer;
}
.extra-turns b {
  font-weight: 500;
  font-size: 20px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.extra-turns span {
  font-size: 12px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #b8d4ff;
}
.extra-turns:hover {
  filter: brightness(1.12);
}

/* keyboard focus */
button:focus-visible {
  outline: 2px solid var(--brass-hi);
  outline-offset: 3px;
}
/* subtle lift on menu items */
.menu-item {
  transition: transform 0.15s, background 0.15s, border-color 0.15s;
}
.menu-item:hover {
  transform: translateX(3px);
}
.menu-item.center:hover,
.actions .menu-item:hover {
  transform: translateY(-1px);
}
.tile:not(:disabled):hover > b {
  color: var(--brass-hi);
}
/* faint rim so dark balls (the 8) stay visible on the dark tray */
.hud-tray .pball,
.intro-rack .pball {
  box-shadow: 0 2px 3px #000a, 0 0 0 1px #ffffff2e;
}

/* =====================================================================
   Gameplay layout matching the reference: a portrait stage of dark wood,
   the table on the left, a slate side panel on the right, a fine-aim bar
   along the bottom.
   ===================================================================== */
html,
body {
  background: #0d0b0a;
}
#stage,
#hud {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 50%;
  width: min(100vw, 62vh);
  transform: translateX(-50%);
}
#stage {
  z-index: 0;
  border-radius: 14px;
  background:
    linear-gradient(90deg, #0000 0 96%, #00000059 96% 100%) 0 0 / 46px 100%,
    repeating-linear-gradient(90deg, #ffffff06 0 2px, #0000 2px 7px),
    linear-gradient(180deg, #3a2e28, #2a211d 50%, #332822);
  box-shadow: 0 0 60px #000;
}
#game {
  z-index: 1;
}
#hud {
  z-index: 5;
  display: block;
  pointer-events: none;
}
/* keep the panel's size while hidden so the table does not jump */
#hud.hidden {
  display: block !important;
  visibility: hidden;
}
#hud > * {
  pointer-events: auto;
}
#status,
#powerMeter {
  display: none !important;
}

/* ---- side panel */
#sidePanel {
  position: absolute;
  top: 10px;
  right: 8px;
  bottom: 10px;
  width: 17%;
  min-width: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
#sidePanel .lv {
  align-self: flex-end;
  font: 600 14px/1 var(--ui);
  letter-spacing: 0.04em;
  color: #9a9590;
  text-shadow: 0 1px 0 #000;
}
#sidePanel .lv b {
  font-weight: 600;
}
.panel-box {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 8px 4px 10px;
  border-radius: 10px;
  background: linear-gradient(180deg, #4a4d52, #33363a);
  border: 2px solid #5f6368;
  box-shadow: inset 0 2px 0 #ffffff1a, inset 0 -3px 6px #0006, 0 3px 8px #000a;
}
.pbtn {
  appearance: none;
  width: 70%;
  aspect-ratio: 1.2;
  border-radius: 7px;
  border: 1px solid #23252866;
  background: linear-gradient(180deg, #5e6268, #43464b);
  box-shadow: inset 0 1px 0 #ffffff26, 0 2px 3px #0008;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.pbtn svg {
  width: 60%;
  height: 60%;
  stroke: #2a2c2f;
  stroke-width: 4;
  filter: drop-shadow(0 1px 0 #ffffff40);
}
.pbtn:active {
  transform: translateY(1px);
}
.heart {
  position: relative;
  width: 74%;
  aspect-ratio: 1.08;
  display: grid;
  place-items: center;
}
.heart svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  stroke: none;
  filter: drop-shadow(0 2px 2px #000);
}
.heart b {
  position: relative;
  font: 600 16px/1 var(--ui);
  color: #fff;
  text-shadow: 0 1px 2px #0009;
  margin-top: -4px;
}
.heart.last b {
  animation: pulse 0.9s infinite;
}
.ballcount {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
.two-balls {
  display: flex;
}
.two-balls i {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff9 0 12%, #0000 30%), #e8b400;
  box-shadow: 0 1px 2px #000a;
}
.two-balls i + i {
  margin-left: -5px;
  background: radial-gradient(circle at 35% 30%, #fff9 0 12%, #0000 30%), #c4222a;
}
.ballcount b {
  padding: 2px 7px;
  border-radius: 4px;
  background: #26282b;
  box-shadow: inset 0 1px 3px #000;
  font: 600 13px/1.2 var(--ui);
  color: #e6e6e6;
}
.knob {
  appearance: none;
  width: 66%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 3px solid #6c7075;
  background: repeating-linear-gradient(135deg, #8d9196 0 5px, #4c4f53 5px 10px);
  background-size: 200% 200%;
  box-shadow: inset 0 3px 6px #000a, 0 3px 6px #000a;
  cursor: ns-resize;
  touch-action: none;
}
/* tall slot holding the cue: drag it down to load power */
.cue-slot {
  flex: 1;
  width: 86%;
  min-height: 120px;
  padding: 6px;
  border-radius: 12px 12px 12px 12px;
  background: linear-gradient(90deg, #54585d, #3a3d41 40%, #2e3134);
  border: 2px solid #6a6e73;
  box-shadow: inset 0 0 0 2px #0006, 0 3px 8px #000a;
}
#power {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  background: linear-gradient(90deg, #0d0e10, #1d1f22 50%, #0d0e10);
  box-shadow: inset 0 2px 8px #000;
  overflow: hidden;
  cursor: grab;
  touch-action: none;
  border: none;
}
#powerFill {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 0;
  background: linear-gradient(180deg, #3fc040 0%, #c8d82a 45%, #f0a020 70%, #e2342a 100%);
  opacity: 0.95;
}
/* the cue inside the slot: tip at the top */
#powerKnob {
  position: absolute;
  left: 50%;
  top: 0;
  width: 9px;
  height: 92%;
  margin-left: -4.5px;
  border-radius: 4px 4px 5px 5px;
  background: linear-gradient(180deg, #3d7ad6 0 2%, #f2efe6 2% 5%, #e6cf9d 5% 58%, #7a3b16 58% 62%, #20120a 62% 100%);
  box-shadow: inset -2px 0 2px #0005, inset 1px 0 1px #fff6, 0 0 4px #000;
  background-color: transparent;
}
#powerKnob i {
  position: absolute;
  left: 1px;
  right: 1px;
  bottom: 12%;
  height: 10%;
  background: repeating-linear-gradient(180deg, #e9e9e9 0 2px, #222 2px 5px);
  border-radius: 2px;
}

/* ---- bottom bar: spin ball + fine-aim strip */
#bottomBar {
  position: absolute;
  left: 8px;
  right: calc(17% + 16px);
  bottom: 10px;
  height: 46px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.cueball-btn {
  appearance: none;
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 2px solid #5f6368;
  background: radial-gradient(circle, #1b1c1e, #2d2f32);
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 3px 6px #000a;
}
.cueball-btn .cueball {
  width: 32px;
  height: 32px;
  background: radial-gradient(circle at 36% 30%, #fff 0 12%, #efe6d0 42%, #b8a988 100%);
}
#fineAim {
  flex: 1;
  height: 34px;
  padding: 4px;
  border-radius: 8px;
  background: linear-gradient(180deg, #54585d, #2e3134);
  border: 2px solid #6a6e73;
  box-shadow: 0 3px 8px #000a;
  cursor: ew-resize;
  touch-action: none;
}
#fineAimInner {
  width: 100%;
  height: 100%;
  border-radius: 5px;
  background: repeating-linear-gradient(90deg, #b9bdc2 0 2px, #6d7176 2px 4px, #3d4044 4px 6px);
  box-shadow: inset 12px 0 10px -4px #000c, inset -12px 0 10px -4px #000c, inset 0 2px 4px #000a;
}

/* spin picker opens above the cue ball button */
#spinPanel {
  top: auto;
  right: auto;
  left: calc(50% - min(50vw, 31vh) + 10px);
  bottom: 66px;
  background: linear-gradient(180deg, #4a4d52, #33363a);
  border: 2px solid #6a6e73;
}
.spin-title {
  color: #e6e6e6;
}
#handHint {
  bottom: 70px;
  background: #1c1d20e6;
  border-color: #6a6e73;
}
#handHint b {
  color: #fff;
}
#toast {
  top: 40%;
  background: #000000c0;
  border-color: #6a6e73;
}

/* =====================================================================
   Landscape pool-game layout: navy stage, player bars across the top,
   power bar on the left, ball-return chute on the right.
   ===================================================================== */
html,
body {
  background: #070a14;
}
#stage,
#hud {
  top: 50%;
  bottom: auto;
  width: min(100vw, 177.8vh);
  height: min(56.25vw, 100vh);
  transform: translate(-50%, -50%);
}
#stage {
  border-radius: 0;
  box-shadow: none;
  background: radial-gradient(ellipse 70% 70% at 50% 55%, #1d2a4d 0%, #121a33 55%, #0a0f1f 100%);
}
#hud {
  container-type: size;
  font-family: 'Arial Rounded MT Bold', 'Nunito', var(--ui);
}

/* ---- menu button (top left) */
.menu-btn {
  position: absolute;
  left: 1.2%;
  top: 2.5%;
  width: 5.2cqw;
  height: 5.2cqw;
  max-width: 64px;
  max-height: 64px;
  border-radius: 22%;
  border: 2px solid #8ff07a;
  background: linear-gradient(180deg, #5fd146, #2f9e1e);
  box-shadow: inset 0 2px 0 #ffffff55, 0 3px 6px #000a;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.menu-btn svg {
  width: 62%;
  height: 62%;
  stroke: #fff;
  stroke-width: 3;
}

/* ---- player bars */
.player {
  position: absolute;
  top: 2%;
  width: 28%;
  display: flex;
  flex-direction: column;
  gap: 0.6cqh;
}
.player.you {
  right: 57.5%;
  align-items: flex-end;
}
.player.table-side {
  left: 57.5%;
  align-items: flex-start;
}
.pl-row {
  display: flex;
  align-items: center;
  gap: 0.6cqw;
  width: 100%;
}
.player.you .pl-row {
  justify-content: flex-end;
}
.pl-name {
  flex: 1;
  height: 3.6cqh;
  padding: 0 1cqw;
  border-radius: 3px;
  background: linear-gradient(180deg, #2a3350, #1a2138);
  border: 1px solid #3a4569;
  color: #dfe6ff;
  font: 700 2.3cqh/3.4cqh 'Nunito', sans-serif;
  white-space: nowrap;
  overflow: hidden;
}
.player.you .pl-name {
  text-align: right;
}
.star {
  position: relative;
  width: 4.6cqh;
  height: 4.6cqh;
  flex: none;
  display: grid;
  place-items: center;
}
.star::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #ffe27a, #e0a51c);
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  filter: drop-shadow(0 1px 1px #000);
}
.star b {
  position: relative;
  font: 800 1.7cqh/1 'Nunito', sans-serif;
  color: #4a2a00;
  margin-top: 0.4cqh;
}
.avatar {
  width: 8.5cqh;
  height: 8.5cqh;
  flex: none;
  border-radius: 10%;
  background: linear-gradient(180deg, #e9edf5, #b9c2d6);
  border: 3px solid #2a3350;
  box-shadow: 0 2px 6px #000a;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.avatar.active {
  border-color: #3ee04a;
  box-shadow: 0 0 10px #3ee04a99, 0 2px 6px #000a;
}
.silhouette {
  width: 70%;
  height: 80%;
  margin-top: 20%;
  background: radial-gradient(circle at 50% 28%, #5a6a8c 0 22%, #0000 23%),
    radial-gradient(ellipse 60% 45% at 50% 100%, #5a6a8c 0 98%, #0000 100%);
}
.eight {
  width: 72%;
  height: 72%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #666 0 8%, #0000 30%), #111;
  display: grid;
  place-items: center;
  box-shadow: 0 2px 3px #000a;
}
.eight b {
  width: 46%;
  height: 46%;
  border-radius: 50%;
  background: #fff;
  color: #111;
  font: 800 2.2cqh/1 'Nunito', sans-serif;
  display: grid;
  place-items: center;
}
.pl-balls {
  display: flex;
  gap: 0.35cqw;
}
.player.you .pl-balls {
  margin-right: calc(8.5cqh + 0.6cqw + 6px);
}
.player.table-side .pl-balls {
  margin-left: calc(8.5cqh + 0.6cqw + 6px);
}
.pl-balls .pball {
  --s: 3.4cqh;
}
.pl-balls .pball b {
  display: grid;
}
.slot {
  width: 3.4cqh;
  height: 3.4cqh;
  border-radius: 50%;
  background: #0b0f1e;
  box-shadow: inset 0 2px 3px #000, 0 0 0 1px #2a3350;
}

/* ---- centre box (turns) */
.prize {
  position: absolute;
  left: 50%;
  top: 2%;
  transform: translateX(-50%);
  width: 10cqh;
  height: 10cqh;
  border-radius: 14%;
  background: linear-gradient(180deg, #1b2138, #0e1222);
  border: 2px solid #3a4569;
  box-shadow: 0 3px 8px #000a;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.prize .chalk {
  width: 3.2cqh;
  height: 3.2cqh;
  border-radius: 3px;
  background: linear-gradient(135deg, #8cc4ff, #2f6ad0);
  box-shadow: inset 0 0 0 1px #ffffff55, 0 2px 3px #000;
}
.prize b {
  font: 800 3.2cqh/1 'Nunito', sans-serif;
  color: #ffd84a;
  text-shadow: 0 2px 0 #000;
}
.prize small {
  font: 700 1.3cqh/1 'Nunito', sans-serif;
  letter-spacing: 0.1em;
  color: #9aa6c8;
}
.prize.last b {
  color: #ff6a5a;
  animation: pulse 0.9s infinite;
}

/* ---- spin + tool buttons (top right) */
.spin-btn {
  position: absolute;
  right: 1.2%;
  top: 2.5%;
  width: 7cqh;
  height: 7cqh;
  border-radius: 50%;
  border: none;
  padding: 0;
  background: none;
  cursor: pointer;
}
.spin-btn .cueball {
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 36% 30%, #fff 0 14%, #eceff4 45%, #a9b0bd 100%);
  box-shadow: 0 3px 8px #000c;
}
.tool-btn {
  position: absolute;
  right: 1.4%;
  top: 14%;
  width: 6.4cqh;
  height: 6.4cqh;
  border-radius: 14%;
  border: 2px solid #7fb6ff;
  background: linear-gradient(180deg, #3a86f0, #1a52c0);
  box-shadow: inset 0 2px 0 #ffffff44, 0 3px 6px #000a;
  display: grid;
  place-items: center;
  cursor: ns-resize;
  touch-action: none;
}
.tool-btn svg {
  width: 70%;
  height: 70%;
  stroke: #fff;
  stroke-width: 2;
}

/* ---- power bar (left) */
.power-col {
  position: absolute;
  left: 1.2%;
  top: 33%;
  height: 52%;
  width: 4.2%;
  padding: 0.5cqh;
  border-radius: 8px;
  background: linear-gradient(90deg, #2a3350, #1a2138);
  border: 2px solid #3a4569;
  box-shadow: 0 3px 8px #000a;
}
#power {
  border-radius: 6px;
  background: linear-gradient(90deg, #0a0d18, #151b2e 50%, #0a0d18);
}
#powerKnob {
  width: 30%;
  margin-left: -15%;
  height: 94%;
  top: 3%;
  border-radius: 3px;
  background: linear-gradient(180deg, #f4efe6 0 3%, #e3c79a 3% 55%, #a2602a 55% 60%, #6b3412 60% 100%);
}

/* ---- ball return (right) */
.chute {
  position: absolute;
  right: 0.8%;
  top: 25%;
  height: 72%;
  width: 6.2%;
}
.chute-rails {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: #8c96ad;
  stroke-width: 2.5;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 1px 0 #000);
}
#chuteBalls {
  position: absolute;
  right: 6%;
  bottom: 0;
  width: 40%;
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: 1px;
}
#chuteBalls .pball {
  --s: 3.6cqh;
  animation: roll-in 0.6s ease-in;
}
#chuteBalls .pball b {
  display: grid;
}
@keyframes roll-in {
  from {
    transform: translateY(-40cqh) rotate(-360deg);
  }
}

/* overlays and hints sit above the table */
#spinPanel {
  left: auto;
  right: calc(50% - min(50vw, 88.9vh) + 12px);
  top: calc(50% - min(28.1vw, 50vh) + 12%);
  bottom: auto;
  background: linear-gradient(180deg, #1f2850, #141a33);
  border-color: #3a4569;
}
#handHint {
  bottom: calc(50% - min(28.1vw, 50vh) + 10px);
  background: #121a33e6;
  border-color: #3a4569;
}
#toast {
  background: #0b1020d0;
  border-color: #3a4569;
}

/* ---- menus restyled to match the navy/blue/green game screen */
.card,
.board {
  background: linear-gradient(180deg, #24305a, #141b36);
  box-shadow: 0 0 0 2px #4a63b8, 0 0 0 5px #0b1022, 0 24px 60px #000e;
  font-family: 'Nunito', sans-serif;
}
.plaque {
  background: linear-gradient(180deg, #5fa8ff, #1d5fd0);
}
.plaque span {
  background: linear-gradient(180deg, #3d8bf2, #1b4fb8);
  color: #fff;
  text-shadow: 0 2px 0 #0b2a6b;
  font-family: 'Nunito', sans-serif;
  font-weight: 900;
  font-style: normal;
}
.plaque.red span {
  background: linear-gradient(180deg, #f2604f, #b8241b);
  color: #fff;
  text-shadow: 0 2px 0 #5a0d08;
}
.menu-item {
  border-radius: 10px;
  border: 2px solid #6b9cff;
  background: linear-gradient(180deg, #3d7fe8, #1e4fb3);
  box-shadow: inset 0 2px 0 #ffffff40, 0 4px 0 #0f2a66;
  font-family: 'Nunito', sans-serif;
  font-weight: 900;
}
.menu-item svg {
  color: #fff;
}
.menu-item small {
  color: #d6e4ff;
}
.menu-item:hover {
  border-color: #a9c6ff;
  background: linear-gradient(180deg, #4b8cf2, #2559c2);
}
.menu-item.primary {
  border-color: #9bf07f;
  background: linear-gradient(180deg, #62d64a, #2e9e1f);
  box-shadow: inset 0 2px 0 #ffffff55, 0 4px 0 #1b5e12;
}
.menu-item.primary:hover {
  background: linear-gradient(180deg, #70e357, #34ad24);
}
.brand-plate {
  background: linear-gradient(180deg, #24305a, #141b36);
  box-shadow: 0 0 0 2px #4a63b8, 0 0 0 5px #0b1022, 0 20px 50px #000d;
}
.brand-plate h1 {
  font-family: 'Nunito', sans-serif;
  font-style: normal;
  font-weight: 900;
  background: linear-gradient(180deg, #ffe680, #f0a51c);
  -webkit-background-clip: text;
  background-clip: text;
}
.brand-plate small,
.brand-plate p {
  color: #9fb4ea;
}
.icon-btn svg {
  color: #fff;
  background: radial-gradient(circle at 50% 30%, #3d7fe8, #1e4fb3);
  box-shadow: 0 0 0 2px #6b9cff, 0 4px 10px #000a;
}
.levels .grid {
  background: radial-gradient(ellipse at center, #2f6fef, #0c2c96);
}
.brief li {
  border-left-color: #6b9cff;
  background: #0b1022a0;
}
.lamp-glow {
  background: radial-gradient(ellipse 45% 55% at 50% 30%, #6b9cff22, #0000 70%);
}

/* shot clock: the active avatar's green border drains as the turn timer runs */
.avatar {
  position: relative;
  --clock: 0;
}
.avatar::after {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 14%;
  background: conic-gradient(#3ee04a calc(var(--clock) * 360deg), #0000 0);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  padding: 4px;
  pointer-events: none;
}
.avatar.active {
  border-color: #2a3350;
}

/* ================= lobby: main menu in a chunky cartoon style */
:root {
  --toon-ink: #0d1b33;
  --toon-soft: #4b5a78;
  --toon-cream: #fffbea;
  --toon-yellow: #ffe03a;
  --toon-lime: #b5ef45;
  --toon-font: 'Fredoka', 'Nunito', system-ui, sans-serif;
  --toon-display: 'Lilita One', 'Fredoka', system-ui, sans-serif;
}
#overlay.lobby-bg {
  place-items: stretch;
  padding: 0;
  /* the table's blue cloth with a soft light pool in the middle */
  background: radial-gradient(ellipse 70% 60% at 58% 42%, #ffffff1f, #0000 70%),
    radial-gradient(ellipse at 50% 50%, #3f86ff, #2463e0 55%, #1747b0);
}
.lobby {
  position: relative;
  min-width: 0;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 18px clamp(16px, 4vw, 48px) 28px;
  color: var(--toon-ink);
  font-family: var(--toon-font);
}
.lobby-top,
.lobby-main {
  position: relative;
  z-index: 1;
}
.lobby-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.logo {
  margin: 4px 0 0 4px;
  display: flex;
  flex-direction: column;
  font: 400 clamp(46px, 7vw, 68px) / 0.86 var(--toon-display);
  transform: rotate(-4deg);
  transform-origin: left top;
}
.logo span {
  color: var(--toon-yellow);
  -webkit-text-stroke: 8px var(--toon-ink);
  paint-order: stroke fill;
  text-shadow: 0 6px 0 var(--toon-ink);
}
.logo span + span {
  color: var(--toon-lime);
  padding-left: 0.95em;
}
.round-btns {
  display: flex;
  gap: 12px;
}
.round-btn {
  appearance: none;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: 3px solid var(--toon-ink);
  background: #fff;
  box-shadow: 0 5px 0 var(--toon-ink);
  color: var(--toon-ink);
  cursor: pointer;
  transition: transform 0.1s, box-shadow 0.1s;
}
.round-btn svg {
  width: 26px;
  height: 26px;
  stroke-width: 2.4;
}
.lobby-main {
  flex: 1;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}

/* the cream card */
.toon-card {
  width: min(480px, 100%);
  padding: 22px;
  border: 3px solid var(--toon-ink);
  border-radius: 28px;
  background: var(--toon-cream);
  box-shadow: 0 8px 0 var(--toon-ink);
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-align: left;
  animation: rise 0.35s cubic-bezier(0.2, 1, 0.3, 1);
}

/* segmented toggle */
.seg {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 4px;
  padding: 5px;
  border: 3px solid var(--toon-ink);
  border-radius: 18px;
  background: #e4eaf6;
}
.seg button {
  appearance: none;
  padding: 10px 4px;
  border: 3px solid transparent;
  border-radius: 13px;
  background: none;
  color: var(--toon-soft);
  font: 400 clamp(15px, 2.4vw, 20px) / 1.1 var(--toon-display);
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
}
.seg button:hover {
  color: var(--toon-ink);
}
.seg button.on {
  background: #fff;
  border-color: var(--toon-ink);
  color: var(--toon-ink);
}

/* option pills */
.pills {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.pills.two,
.pills:has(.note) {
  grid-template-columns: 1fr 1fr;
}
.pill {
  appearance: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 6px;
  border: 3px solid var(--toon-ink);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 5px 0 var(--toon-ink);
  color: var(--toon-ink);
  font: 700 18px var(--toon-font);
  cursor: pointer;
  transition: transform 0.1s, box-shadow 0.1s, background 0.15s;
}
.pill.on {
  background: var(--toon-yellow);
}
.pill.note {
  cursor: default;
  background: #eef2fb;
  border-color: #0d1b3399;
  box-shadow: 0 5px 0 #0d1b3340;
}
.pill.note svg {
  width: 20px;
  height: 20px;
  stroke-width: 2.4;
}
.hint {
  margin: -4px 0 0;
  color: var(--toon-soft);
  font: 600 14px var(--toon-font);
  text-align: center;
}

/* chunky buttons */
.toon-btn {
  appearance: none;
  width: 100%;
  padding: 13px 16px;
  border: 3px solid var(--toon-ink);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 6px 0 var(--toon-ink);
  color: var(--toon-ink);
  font: 400 22px var(--toon-display);
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: transform 0.1s, box-shadow 0.1s, filter 0.15s;
}
.toon-btn.play {
  background: var(--toon-lime);
}
.toon-btn.big {
  padding: 18px 16px;
  font-size: 32px;
}
.toon-btn:hover,
.pill:not(.note):hover,
.round-btn:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
}
.toon-btn:active,
.pill:not(.note):active,
.round-btn:active {
  transform: translateY(4px);
  box-shadow: 0 2px 0 var(--toon-ink);
}
.toon-btn.busy {
  opacity: 0.75;
  cursor: progress;
}
.toon-btn.busy span::after {
  content: '…';
}
.lobby button:focus-visible {
  outline: 3px solid var(--toon-yellow);
  outline-offset: 3px;
}

/* big cartoon pool balls tucked into the corners, where the reference has leaves */
.lobby-deco {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.pball.toon {
  position: absolute;
  box-shadow: 0 0 0 4px var(--toon-ink), 8px 10px 0 #0d1b3340;
}
.pball.toon b {
  width: 46%;
  height: 46%;
  border: 3px solid var(--toon-ink);
  font: 400 calc(var(--s) * 0.2) / 1 var(--toon-display);
  color: var(--toon-ink);
}
.pball.toon.d1 { --s: 230px; left: -70px; bottom: -80px; transform: rotate(-14deg); }
.pball.toon.d5 { --s: 110px; left: 140px; bottom: -36px; transform: rotate(18deg); }
.pball.toon.d2 { --s: 170px; right: -70px; top: 30%; transform: rotate(20deg); }
.pball.toon.d3 { --s: 210px; right: -60px; bottom: -70px; transform: rotate(-10deg); }
.pball.toon.d4 { --s: 96px; right: 170px; bottom: -24px; transform: rotate(12deg); }

/* phones and narrow windows: centre the card and shrink the decoration */
@media (max-width: 760px) {
  .lobby-main {
    justify-content: center;
  }
  .pball.toon.d1 { --s: 150px; left: -60px; bottom: -60px; }
  .pball.toon.d5 { --s: 70px; left: 70px; bottom: -26px; }
  .pball.toon.d2 { --s: 110px; right: -50px; top: auto; bottom: 120px; }
  .pball.toon.d3 { --s: 130px; right: -50px; bottom: -50px; }
  .pball.toon.d4 { display: none; }
  .round-btn {
    width: 48px;
    height: 48px;
  }
  .toon-card {
    padding: 18px 16px;
  }
  .pill {
    font-size: 16px;
  }
}

/* very narrow windows: shrink the header so the logo and round buttons still fit */
@media (max-width: 360px) {
  .logo {
    font-size: 34px;
  }
  .logo span {
    -webkit-text-stroke-width: 6px;
    text-shadow: 0 4px 0 var(--toon-ink);
  }
  .round-btns {
    gap: 8px;
  }
  .round-btn {
    width: 42px;
    height: 42px;
  }
  .round-btn svg {
    width: 22px;
    height: 22px;
  }
}

/* ---- online rooms: join form on the menu, and the host's waiting screen */
.toon-or {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: -2px 0 -4px;
  color: var(--toon-soft);
  font: 700 13px var(--toon-font);
}
.toon-or i {
  flex: 1;
  height: 2px;
  background: #0d1b3326;
}
.join-row {
  display: flex;
  gap: 10px;
}
.join-row input {
  flex: 1;
  min-width: 0;
  padding: 12px 14px;
  border: 3px solid var(--toon-ink);
  border-radius: 16px;
  background: #fff;
  color: var(--toon-ink);
  font: 400 24px var(--toon-display);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  outline: none;
}
.join-row input::placeholder {
  color: #8a96b3;
  font: 600 17px var(--toon-font);
  letter-spacing: 0;
  text-transform: none;
}
.join-row input:focus {
  box-shadow: 0 0 0 4px #ffe03acc;
}
.join-row .toon-btn {
  width: auto;
  padding: 0 22px;
}
.join-error {
  min-height: 1.3em;
  margin: -6px 0 -4px;
  color: #d0342c;
  font: 700 15px var(--toon-font);
  text-align: center;
}
.join-error:empty {
  min-height: 0;
  margin: -8px 0 0;
}
.room-card {
  text-align: center;
  align-items: center;
}
.room-label {
  margin: 0;
  font: 400 22px var(--toon-display);
}
.room-code {
  display: flex;
  gap: 8px;
}
.room-code b {
  display: grid;
  place-items: center;
  width: clamp(44px, 13vw, 62px);
  height: clamp(54px, 16vw, 74px);
  border: 3px solid var(--toon-ink);
  border-radius: 14px;
  background: var(--toon-yellow);
  box-shadow: 0 5px 0 var(--toon-ink);
  font: 400 clamp(28px, 9vw, 42px) var(--toon-display);
}
.room-card .toon-btn {
  width: auto;
  padding: 10px 26px;
  font-size: 19px;
}
.room-wait {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 4px 0 0;
  font: 700 17px var(--toon-font);
}
.dots {
  display: inline-flex;
  gap: 4px;
}
.dots i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--toon-ink);
  animation: dot 1.2s infinite ease-in-out;
}
.dots i:nth-child(2) {
  animation-delay: 0.15s;
}
.dots i:nth-child(3) {
  animation-delay: 0.3s;
}
@keyframes dot {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.35; }
  30% { transform: translateY(-6px); opacity: 1; }
}
.room-card .hint {
  margin: 0;
}
.link-btn {
  appearance: none;
  border: none;
  background: none;
  padding: 6px;
  color: #1e56c8;
  font: 700 16px var(--toon-font);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.link-btn:hover {
  color: var(--toon-ink);
}

/* =====================================================================
   Pool Kings table screen, in the same chunky cartoon style as the menu:
   players in cream cards along the bottom with the turn badge between
   them, round buttons in the top corners, the power bar on the left and
   the ball-return chute on the right. fitCamera() in game.js keeps the
   table, and the ball-return channel around it, inside the space this
   leaves (9.5% each side, 10.5% top, 21.5% bottom of the stage).
   ===================================================================== */
#stage {
  background: radial-gradient(ellipse 65% 60% at 47% 45%, #ffffff14, #0000 70%),
    radial-gradient(ellipse at 50% 50%, #2f6ae6 0%, #1b46b4 55%, #0f2c78 100%);
}
#hud {
  font-family: var(--toon-font);
  color: var(--toon-ink);
}

/* ---- round buttons in the top corners */
.menu-btn,
.spin-btn,
.tool-btn {
  position: absolute;
  top: 2.2%;
  width: 7.4cqh;
  height: 7.4cqh;
  max-width: none;
  max-height: none;
  padding: 0;
  border-radius: 50%;
  border: 3px solid var(--toon-ink);
  background: #fff;
  box-shadow: 0 0.55cqh 0 var(--toon-ink);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform 0.1s, box-shadow 0.1s;
}
.menu-btn:active,
.spin-btn:active,
.tool-btn:active {
  transform: translateY(0.4cqh);
  box-shadow: 0 0.15cqh 0 var(--toon-ink);
}
.menu-btn {
  left: 1.4%;
}
.menu-btn svg,
.tool-btn svg {
  width: 52%;
  height: 52%;
  stroke: var(--toon-ink);
  stroke-width: 2.6;
}
.spin-btn {
  right: 1.4%;
}
.spin-btn .cueball {
  width: 74%;
  height: 74%;
  box-shadow: inset 0 0 0 2px #0d1b3333;
}
.tool-btn {
  right: calc(1.4% + 9cqh);
  cursor: ns-resize;
}

/* ---- player cards along the bottom */
.player {
  top: auto;
  bottom: 2.6%;
  width: 37%;
  gap: 0.8cqh;
  padding: 1.2cqh 1.6cqh;
  border: 3px solid var(--toon-ink);
  border-radius: 2.6cqh;
  background: var(--toon-cream);
  box-shadow: 0 0.6cqh 0 var(--toon-ink);
  transition: background 0.2s;
}
.player:has(.avatar.active) {
  background: #eaffc9;
}
.player.you {
  left: 3.5%;
  right: auto;
  align-items: stretch;
}
.player.table-side {
  right: 3.5%;
  left: auto;
  align-items: stretch;
}
/* avatar on the outer edge of each card */
.player.you .pl-row {
  flex-direction: row-reverse;
  justify-content: flex-end;
}
.player.table-side .pl-row {
  flex-direction: row-reverse;
  justify-content: flex-start;
}
.pl-row {
  gap: 1.2cqh;
}
.pl-name,
.player.you .pl-name {
  height: auto;
  padding: 0;
  border: none;
  background: none;
  color: var(--toon-ink);
  font: 400 3.1cqh/1.1 var(--toon-display);
  text-align: left;
}
.player.table-side .pl-name {
  text-align: right;
}
.avatar {
  width: 9cqh;
  height: 9cqh;
  border-radius: 50%;
  border: 3px solid var(--toon-ink);
  background: #e4eaf6;
  box-shadow: none;
}
.avatar.active {
  border-color: var(--toon-ink);
  background: var(--toon-lime);
  box-shadow: 0 0 0 0.5cqh #b5ef4580;
}
.avatar::after {
  border-radius: 50%;
}
.silhouette {
  background: radial-gradient(circle at 50% 28%, var(--toon-ink) 0 22%, #0000 23%),
    radial-gradient(ellipse 60% 45% at 50% 100%, var(--toon-ink) 0 98%, #0000 100%);
}
.star {
  width: 4.8cqh;
  height: 4.8cqh;
}
.star::before {
  filter: drop-shadow(0 0 1px var(--toon-ink)) drop-shadow(0 2px 0 var(--toon-ink));
}
.star b {
  font: 400 1.8cqh/1 var(--toon-display);
  color: var(--toon-ink);
}
.player.you .pl-balls,
.player.table-side .pl-balls {
  margin: 0;
  gap: 0.6cqh;
}
.player.you .pl-balls {
  padding-left: calc(9cqh + 1.2cqh);
}
.player.table-side .pl-balls {
  justify-content: flex-end;
  padding-right: calc(9cqh + 1.2cqh);
}
.pl-balls .pball {
  --s: 3.6cqh;
  box-shadow: 0 0 0 1.5px var(--toon-ink);
}
.slot {
  width: 3.6cqh;
  height: 3.6cqh;
  background: #dfe5f2;
  box-shadow: inset 0 2px 3px #0d1b3330, 0 0 0 1.5px #0d1b3366;
}

/* ---- turn badge between the cards */
.prize {
  top: auto;
  bottom: 3.4%;
  width: 13cqh;
  height: 13cqh;
  border-radius: 50%;
  border: 3px solid var(--toon-ink);
  background: var(--toon-yellow);
  box-shadow: 0 0.6cqh 0 var(--toon-ink);
  gap: 0.2cqh;
}
.prize .chalk {
  display: none;
}
.prize b {
  font: 400 4.6cqh/1 var(--toon-display);
  color: var(--toon-ink);
  text-shadow: none;
}
.prize small {
  font: 700 1.5cqh/1 var(--toon-font);
  letter-spacing: 0.08em;
  color: var(--toon-ink);
}
.prize.last {
  background: #ff7a6b;
}
.prize.last b {
  color: var(--toon-ink);
}

/* ---- power bar on the left */
.power-col {
  left: 1.6%;
  right: auto;
  top: 16%;
  height: 58%;
  width: 6.4cqh;
  padding: 0.7cqh;
  border: 3px solid var(--toon-ink);
  border-radius: 999px;
  background: var(--toon-cream);
  box-shadow: 0 0.55cqh 0 var(--toon-ink);
}
.power-col #power {
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 999px;
  background: #1b2a4f;
}
#powerFill {
  background: linear-gradient(var(--toon-lime), var(--toon-yellow) 55%, #ff6a5a);
  opacity: 1;
}

/* ---- hints and messages */
#handHint {
  top: calc(50% - min(28.125vw, 50vh) + min(5.4vw, 9.6vh));
  bottom: auto;
  transform: translate(-50%, -10px);
  padding: 8px 18px;
  border: 3px solid var(--toon-ink);
  border-radius: 999px;
  background: var(--toon-cream);
  box-shadow: 0 4px 0 var(--toon-ink);
  color: var(--toon-soft);
  font: 600 14px var(--toon-font);
}
#handHint.show {
  transform: translate(-50%, 0);
}
#handHint b {
  color: var(--toon-ink);
  font: 400 15px var(--toon-display);
  letter-spacing: 0.04em;
}
#toast {
  top: 42%;
  padding: 8px 22px;
  border: 3px solid var(--toon-ink);
  border-radius: 999px;
  background: var(--toon-cream);
  box-shadow: 0 4px 0 var(--toon-ink);
  color: var(--toon-ink);
  font: 400 19px var(--toon-display);
  letter-spacing: 0.04em;
}
#toast.good {
  background: var(--toon-lime);
  color: var(--toon-ink);
}
#toast.bad {
  background: #ff7a6b;
  color: var(--toon-ink);
}
#spinPanel {
  right: calc(50% - min(50vw, 88.9vh) + 12px);
  top: calc(50% - min(28.125vw, 50vh) + min(6.2vw, 11vh));
  border: 3px solid var(--toon-ink);
  border-radius: 20px;
  background: var(--toon-cream);
  box-shadow: 0 5px 0 var(--toon-ink);
  color: var(--toon-ink);
}
#spinPanel .spin-title,
#spinPanel .spin-legend {
  color: var(--toon-ink);
  font-family: var(--toon-font);
}

/* ---- slimmer player cards, so the ball-return channel shows above them: avatar on the outer
   edge, name (with its badge) over the ball rack beside it. The row's children join the
   card's grid directly. */
.player {
  display: grid;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 1.2cqh;
  row-gap: 0.5cqh;
  bottom: 2.4%;
  padding: 1cqh 1.6cqh;
}
.player.you {
  grid-template-columns: auto 1fr auto;
  grid-template-areas: 'av name star' 'av balls balls';
}
.player.table-side {
  grid-template-columns: auto 1fr auto;
  grid-template-areas: 'star name av' 'balls balls av';
}
.player .pl-row {
  display: contents;
}
.player .avatar {
  grid-area: av;
  width: 7.6cqh;
  height: 7.6cqh;
}
.player .pl-name {
  grid-area: name;
  font-size: 2.8cqh;
}
.player .star {
  grid-area: star;
  width: 4cqh;
  height: 4cqh;
}
.player .pl-balls,
.player.you .pl-balls,
.player.table-side .pl-balls {
  grid-area: balls;
  padding: 0;
}
.pl-balls .pball,
.slot {
  --s: 3.1cqh;
  width: 3.1cqh;
  height: 3.1cqh;
}
.prize {
  bottom: 2.4%;
  width: 11cqh;
  height: 11cqh;
}
.prize b {
  font-size: 4cqh;
}
.prize small {
  font-size: 1.3cqh;
}

/* the hint sits just inside the top rail, below the channel */
#handHint {
  top: calc(50% - min(28.125vw, 50vh) + min(7.6vw, 13.5vh));
}

/* ---- the ball-return chute on the right (the realistic metal rails). The channel around the
   table feeds its entrance at the top left; CHUTE in game.js must match top/height/right/width. */
.chute {
  top: 16%;
  height: 68%;
  right: 0.8%;
  width: 6.2%;
}
#chuteBalls .pball {
  animation: none; /* game.js rolls each ball in from the entrance */
}