[hidden] { display: none !important; }

/* ================= Shared dialog ================= */
/* dark glass in a gold rim, like the player cards: an emerald glow from the top, a hairline inside the rim */
.modal {
  position: fixed; inset: 0; z-index: 50;
  display: grid; place-items: center; padding: 16px;
  background: radial-gradient(ellipse at center, rgba(2,10,10,.5), rgba(0,0,0,.82));
  backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
}
.mbox {
  position: relative;
  width: min(100%, calc(var(--g) * 440)); max-height: 100%; overflow: auto;
  padding: calc(var(--g) * 24) calc(var(--g) * 26);
  border: calc(var(--g) * 2) solid transparent;
  border-radius: calc(var(--g) * 26);
  background:
    radial-gradient(ellipse 90% 55% at 50% 0%, rgba(46,170,120,.26), transparent 70%) padding-box,
    radial-gradient(ellipse 70% 40% at 50% 100%, rgba(255,190,80,.06), transparent 70%) padding-box,
    linear-gradient(180deg, #14282b 0%, #0a1517 55%, #060d0e 100%) padding-box,
    linear-gradient(160deg, #fff1b8, #d9a33a 22%, #7a4a0c 50%, #e2b04a 78%, #fff1b8) border-box;
  box-shadow:
    0 0 0 calc(var(--g) * 3) rgba(10,6,2,.85),
    inset 0 1px 0 rgba(255,255,255,.08),
    0 0 50px rgba(255,190,70,.12),
    0 30px 70px rgba(0,0,0,.75);
  animation: pop .24s cubic-bezier(.2,.9,.3,1.25);
  scrollbar-width: thin; scrollbar-color: #8a6a2c transparent;
}
.mbox::before { /* hairline inside the rim */
  content: ""; position: absolute; inset: calc(var(--g) * 5); border-radius: calc(var(--g) * 20);
  border: 1px solid rgba(255,214,120,.16); pointer-events: none;
}
@keyframes pop { from { transform: scale(.92); opacity: 0; } }

/* title between two gold rules, each ending in a diamond */
.mtitle {
  display: flex; align-items: center; justify-content: center; gap: calc(var(--g) * 12);
  margin-bottom: calc(var(--g) * 18);
}
.mtitle span {
  font-family: "Oswald", sans-serif; font-weight: 700; letter-spacing: 1.5px; white-space: nowrap;
  font-size: calc(var(--g) * 28); line-height: 1.15; color: #ffd34d;
  background: linear-gradient(180deg, #fff6c8 0%, #ffd34d 45%, #f0a018 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 0 rgba(0,0,0,.55));
}
.mtitle::before, .mtitle::after {
  content: ""; flex: 1; max-width: calc(var(--g) * 70); height: calc(var(--g) * 8);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M4 0 8 4 4 8 0 4z' fill='%23f2c14e'/%3E%3C/svg%3E") right center / calc(var(--g) * 8) calc(var(--g) * 8) no-repeat,
    linear-gradient(90deg, transparent, #c9973a) left center / calc(100% - var(--g) * 11) 1.5px no-repeat;
}
.mtitle::after { transform: scaleX(-1); }

.mbody { display: flex; flex-direction: column; gap: calc(var(--g) * 14); }
.mbtns { display: flex; flex-wrap: wrap; gap: calc(var(--g) * 10); margin-top: calc(var(--g) * 22); }

/* buttons: dark glass with a gold edge; the main one solid gold with a shine on its upper half */
.mbtn {
  all: unset; cursor: pointer; position: relative; overflow: hidden; box-sizing: border-box;
  flex: 1 1 calc(var(--g) * 140);
  display: flex; align-items: center; justify-content: center; gap: calc(var(--g) * 8);
  min-height: calc(var(--g) * 46); padding: calc(var(--g) * 8) calc(var(--g) * 14); border-radius: calc(var(--g) * 14);
  font-family: "Oswald", sans-serif; font-weight: 600; letter-spacing: .8px; font-size: calc(var(--g) * 17);
  color: #f4efe4;
  background: linear-gradient(180deg, #1e3134 0%, #0f1c1e 60%, #0a1314 100%);
  box-shadow:
    inset 0 0 0 calc(var(--g) * 1.5) rgba(214,166,72,.7),
    inset 0 calc(var(--g) * 2) 0 rgba(255,255,255,.07),
    0 calc(var(--g) * 4) 0 #040809,
    0 calc(var(--g) * 6) 14px rgba(0,0,0,.45);
  transition: transform .12s, box-shadow .15s, filter .15s;
}
.mbtn svg { width: calc(var(--g) * 19); height: calc(var(--g) * 19); flex: none; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.mbtn:hover { box-shadow: inset 0 0 0 calc(var(--g) * 1.5) #ffd34d, inset 0 calc(var(--g) * 2) 0 rgba(255,255,255,.07), 0 calc(var(--g) * 4) 0 #040809, 0 0 18px rgba(255,197,49,.25), 0 calc(var(--g) * 6) 14px rgba(0,0,0,.45); }
.mbtn.primary {
  color: #3a1d04; font-weight: 700;
  background: linear-gradient(180deg, #fff0a8 0%, #ffd34d 30%, #ffb726 62%, #f08f0c 100%);
  box-shadow:
    inset 0 0 0 calc(var(--g) * 1.5) #fff4c4,
    inset 0 calc(var(--g) * -3) 0 rgba(150,70,0,.35),
    0 0 0 calc(var(--g) * 2) #7a4506,
    0 calc(var(--g) * 4) 0 calc(var(--g) * 2) #5a3104,
    0 0 26px rgba(255,190,50,.35),
    0 calc(var(--g) * 8) 16px rgba(0,0,0,.45);
  text-shadow: 0 1px 0 rgba(255,255,255,.45);
}
.mbtn.primary::after { /* glass shine */
  content: ""; position: absolute; left: 6%; right: 6%; top: 8%; height: 40%; border-radius: 99px; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,0));
}
.mbtn.primary:hover { filter: brightness(1.06); }
.mbtn:active { transform: translateY(calc(var(--g) * 2)); }
.mbtn:focus-visible { outline: 2px solid #fff3b0; outline-offset: 3px; }
/* more than two buttons: the main one first and across the full width, the rest two or three to a row */
.mbtns.grid { display: grid; grid-template-columns: 1fr 1fr; }
.mbtns.row3 { grid-template-columns: repeat(3, 1fr); }
.mbtns.row3 .mbtn:not(.primary) { font-size: calc(var(--g) * 14.5); letter-spacing: .3px; gap: calc(var(--g) * 6); padding: calc(var(--g) * 8) calc(var(--g) * 6); }
.mbtns.row3 .mbtn:not(.primary) svg { width: calc(var(--g) * 16); height: calc(var(--g) * 16); }
.mbtns.grid .primary { grid-column: 1 / -1; order: -1; min-height: calc(var(--g) * 52); font-size: calc(var(--g) * 19); margin-bottom: calc(var(--g) * 4); }

.mnote { font-size: calc(var(--g) * 14); line-height: 1.55; color: #d8d0bd; text-align: center; }
.mnote b { color: #ffd34d; font-weight: 600; }

/* rules: the goal on a felt strip, the controls as key + action rows */
.rule {
  padding: calc(var(--g) * 12) calc(var(--g) * 14); border-radius: calc(var(--g) * 14);
  font-size: calc(var(--g) * 14); line-height: 1.5; color: #f4efe4; text-align: center;
  background: radial-gradient(ellipse at 50% 0%, #1f7a4c, #0e3d27 80%);
  box-shadow: inset 0 0 0 1px rgba(140,230,170,.22), inset 0 calc(var(--g) * 3) calc(var(--g) * 10) rgba(0,0,0,.25);
}
.rule b { color: #ffd34d; }
.keys { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: calc(var(--g) * 7) calc(var(--g) * 12); }
.keys kbd {
  justify-self: end; white-space: nowrap;
  font-family: "Oswald", sans-serif; font-weight: 600; font-size: calc(var(--g) * 12.5); letter-spacing: .5px; color: #ffe08a;
  padding: calc(var(--g) * 4) calc(var(--g) * 10); border-radius: calc(var(--g) * 8);
  background: linear-gradient(180deg, #1e3134, #0a1314);
  box-shadow: inset 0 0 0 1px rgba(214,166,72,.55), 0 calc(var(--g) * 2) 0 #040809;
}
.keys span { font-size: calc(var(--g) * 13.5); color: #d8d0bd; }

/* setup options: a gold diamond before each label, the choices in one recessed track */
.opt { display: flex; flex-direction: column; gap: calc(var(--g) * 7); }
.olbl {
  display: flex; align-items: center; gap: calc(var(--g) * 8);
  font-family: "Oswald", sans-serif; font-weight: 600; text-transform: uppercase;
  font-size: calc(var(--g) * 12); letter-spacing: 2px; color: #cdbf98;
}
.olbl::before { content: ""; width: calc(var(--g) * 6); height: calc(var(--g) * 6); transform: rotate(45deg); background: linear-gradient(135deg, #fff1b8, #d9a33a); box-shadow: 0 0 6px rgba(255,200,80,.5); }
.chips {
  display: flex; gap: calc(var(--g) * 4); padding: calc(var(--g) * 4); border-radius: calc(var(--g) * 14);
  background: linear-gradient(180deg, #030708, #08100f);
  box-shadow: inset 0 calc(var(--g) * 2) calc(var(--g) * 6) rgba(0,0,0,.8), 0 0 0 1px rgba(255,214,120,.16), 0 1px 0 rgba(255,255,255,.05);
}
.chips button {
  all: unset; cursor: pointer; flex: 1; text-align: center; position: relative;
  padding: calc(var(--g) * 9) calc(var(--g) * 6); border-radius: calc(var(--g) * 10);
  font-family: "Oswald", sans-serif; font-weight: 600; font-size: calc(var(--g) * 16.5); letter-spacing: .5px;
  color: rgba(244,239,228,.72);
  transition: color .15s, background .15s, box-shadow .15s;
}
.chips button:hover { color: #fff; background: rgba(255,255,255,.05); }
.chips button.on {
  color: #3a1d04; text-shadow: 0 1px 0 rgba(255,255,255,.4);
  background: linear-gradient(180deg, #fff0a8 0%, #ffd34d 35%, #ffb726 70%, #f29a0e 100%);
  box-shadow: inset 0 0 0 1px #fff4c4, inset 0 calc(var(--g) * -2) 0 rgba(150,70,0,.3), 0 calc(var(--g) * 2) 0 #6a3c05, 0 0 14px rgba(255,190,50,.35);
}
.chips button:focus-visible { outline: 2px solid #fff3b0; outline-offset: 2px; }

/* results and statistics */
.final { display: flex; flex-direction: column; gap: calc(var(--g) * 8); }
.frow {
  display: flex; align-items: center; gap: calc(var(--g) * 12);
  padding: calc(var(--g) * 10) calc(var(--g) * 14); border-radius: calc(var(--g) * 14);
  background: linear-gradient(180deg, #0b1718, #060d0e);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), inset 0 calc(var(--g) * 2) calc(var(--g) * 6) rgba(0,0,0,.5);
}
.frow.win {
  background: linear-gradient(90deg, rgba(255,197,49,.24), rgba(255,197,49,.04) 70%), linear-gradient(180deg, #0f1d1e, #071011);
  box-shadow: inset 0 0 0 calc(var(--g) * 1.5) rgba(255,214,90,.75), 0 0 18px rgba(255,197,49,.2);
}
.fname { flex: 1; min-width: 0; font-weight: 600; font-size: calc(var(--g) * 16); color: #f4efe4; }
.fbest { font-size: calc(var(--g) * 12); color: #bfb69f; text-align: right; }
.fscore {
  font-family: "Oswald", sans-serif; font-weight: 700; font-size: calc(var(--g) * 30); line-height: 1; min-width: 1.4em; text-align: right;
  color: #ffd34d; background: linear-gradient(180deg, #fff6c8, #ffd34d 45%, #f0a018); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 0 rgba(0,0,0,.6));
}
.fnote { text-align: center; font-size: calc(var(--g) * 12); letter-spacing: 1px; color: #bfb69f; }

/* settings: table and cue drawn live between two arrows on the left, the choices on the right */
.mbox.wide { width: min(100%, calc(var(--g) * 720)); }
.sets { display: grid; grid-template-columns: 1.15fr 1fr; gap: calc(var(--g) * 16) calc(var(--g) * 22); }
.scol { display: flex; flex-direction: column; gap: calc(var(--g) * 14); min-width: 0; }
@media (max-width: 600px), (orientation: portrait) { .sets { grid-template-columns: minmax(0, 1fr); } }
.cwin { display: flex; align-items: center; gap: calc(var(--g) * 6); }
.cview {
  flex: 1; min-width: 0; border-radius: calc(var(--g) * 12); overflow: hidden;
  background: #040a0b;
  box-shadow: inset 0 0 0 1px rgba(255,214,120,.18), inset 0 calc(var(--g) * 2) calc(var(--g) * 8) rgba(0,0,0,.8);
}
.cview canvas { display: block; width: 100%; }
.car[data-k="table"] canvas { aspect-ratio: 2 / 1; }
.car[data-k="cue"] canvas { height: calc(var(--g) * 42); }
.carr {
  all: unset; cursor: pointer; flex: none; display: grid; place-items: center;
  width: calc(var(--g) * 32); height: calc(var(--g) * 32); border-radius: 50%; color: #ffe08a;
  background: radial-gradient(circle at 50% 30%, #2a3437, #0d1517 70%);
  box-shadow: 0 0 0 calc(var(--g) * 1.5) #b8862c, 0 0 0 calc(var(--g) * 2.5) #1a1006, 0 4px 8px rgba(0,0,0,.5);
  transition: transform .12s, box-shadow .12s;
}
.carr svg { width: 58%; height: 58%; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.carr.next svg { transform: scaleX(-1); }
.carr:hover { box-shadow: 0 0 0 calc(var(--g) * 1.5) #ffd34d, 0 0 0 calc(var(--g) * 2.5) #1a1006, 0 0 12px rgba(255,197,49,.35), 0 4px 8px rgba(0,0,0,.5); }
.carr:active { transform: scale(.94); }
.carr:focus-visible { outline: 2px solid #fff3b0; outline-offset: 2px; }
.cname { display: flex; align-items: baseline; justify-content: center; gap: calc(var(--g) * 8); }
.cname b { font-family: "Oswald", sans-serif; font-weight: 600; font-size: calc(var(--g) * 16); letter-spacing: .5px; color: #f4efe4; }
.cname span { font-size: calc(var(--g) * 11.5); color: #a99f86; }

.pball {
  flex: none; width: calc(var(--g) * 26); height: calc(var(--g) * 26); border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #fff 0, var(--c) 22%, var(--c) 62%, rgba(0,0,0,.55) 120%);
  box-shadow: 0 2px 4px rgba(0,0,0,.4);
}

/* ================= Game screen ================= */
#game { position: fixed; inset: 0; z-index: 10; touch-action: none; overflow: hidden; background: #05130c; -webkit-touch-callout: none; overscroll-behavior: none; }
#game .cv { position: absolute; inset: 0; display: block; }

.hud {
  position: absolute; left: env(safe-area-inset-left); right: env(safe-area-inset-right); top: env(safe-area-inset-top); height: calc(var(--g) * 56);
  display: flex; align-items: center; justify-content: center; gap: calc(var(--g) * 8);
  --hs: 144;   /* room for the button groups, kept even on both sides so the middle stays centred */
  padding: calc(var(--g) * 4) calc(var(--g) * var(--hs)) 0;
  pointer-events: none;
}
.hud > * { pointer-events: auto; }
.hgrp { position: absolute; top: calc(var(--g) * 9); display: flex; gap: calc(var(--g) * 7); }
.hgrp.l { left: calc(var(--g) * 10); }
.hgrp.r { right: calc(var(--g) * 10); }
.hbtn {
  all: unset; cursor: pointer; flex: none; display: grid; place-items: center;
  width: calc(var(--g) * 38); height: calc(var(--g) * 38); border-radius: 50%;
  background: radial-gradient(circle at 50% 30%, #2a3437, #0d1517 70%);
  box-shadow: 0 0 0 calc(var(--g) * 1.5) #b8862c, 0 0 0 calc(var(--g) * 2.5) #2a1a06, inset 0 1px 0 rgba(255,255,255,.12), 0 5px 10px rgba(0,0,0,.5);
  transition: transform .12s, box-shadow .12s;
  position: relative;
}
.hbtn::after { content: ""; position: absolute; inset: calc(var(--g) * -5); border-radius: 50%; } /* a larger target for a finger */
.hbtn svg { width: 54%; height: 54%; fill: none; stroke: #f4efe4; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.hbtn svg.thick { stroke-width: 2.8; }
.hbtn:hover { box-shadow: 0 0 0 calc(var(--g) * 1.5) var(--gold-2), 0 0 0 calc(var(--g) * 2.5) #2a1a06, 0 0 14px rgba(255,197,49,.35), 0 5px 10px rgba(0,0,0,.5); }
.hbtn:active { transform: translateY(1px) scale(.96); }
.hbtn:focus-visible { outline: 2px solid #fff3b0; outline-offset: 2px; }
/* the stats button goes first when the bar is narrow, then everything but settings and help.
   The HUD scales with the screen's short side, so its room in --g units follows the aspect ratio. */
@media (max-width: 1000px), (max-aspect-ratio: 3/2) { .hud { --hs: 98; } .hb-stats { display: none; } }

.pcard {
  flex: 1 1 0; min-width: 0; max-width: calc(var(--g) * 290);
  display: flex; align-items: center;
}
.pcard.right { flex-direction: row-reverse; }

/* round portrait in a gold frame, overlapping the plate */
.avatar {
  position: relative; z-index: 1; flex: none;
  width: calc(var(--g) * 48); height: calc(var(--g) * 48); margin-right: calc(var(--g) * -14);
  padding: calc(var(--g) * 2.5); border-radius: 50%;
  background: linear-gradient(180deg, #ffe58a, var(--gold-2) 45%, #c47a0a);
  box-shadow: 0 0 0 calc(var(--g) * 2) #0a0f10, 0 6px 14px rgba(0,0,0,.5);
}
.pcard.right .avatar { margin-right: 0; margin-left: calc(var(--g) * -14); }
.aimg { width: 100%; height: 100%; border-radius: 50%; overflow: hidden; box-shadow: inset 0 0 0 2px rgba(90,50,5,.35); }
.aimg svg { display: block; width: 100%; height: 100%; }
/* turn ring: a green arc that circles the portrait of the player to shoot */
.aring {
  position: absolute; inset: calc(var(--g) * -5); border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(63,220,106,0) 0%, #3fdc6a 55%, #b6ffc8 70%, rgba(63,220,106,0) 71%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--g) * 4), #000 calc(100% - var(--g) * 4));
          mask: radial-gradient(farthest-side, transparent calc(100% - var(--g) * 4), #000 calc(100% - var(--g) * 4));
  filter: drop-shadow(0 0 6px rgba(63,220,106,.9));
  opacity: 0; transition: opacity .25s;
  animation: ring-spin 1.8s linear infinite;
}
.pcard.on .aring { opacity: 1; }
@keyframes ring-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .aring { animation: none; background: #3fdc6a; } }

/* dark glass plate in a bevelled metal rim: bronze while waiting, bright gold for the player to shoot */
.plate {
  --rim: linear-gradient(180deg, #d9b26a 0%, #8a6326 38%, #4e360f 55%, #b58a3e 100%);
  flex: 1; min-width: 0; height: calc(var(--g) * 44);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-content: center; align-items: center;
  column-gap: calc(var(--g) * 6); row-gap: calc(var(--g) * 3);
  padding: 0 calc(var(--g) * 4) 0 calc(var(--g) * 17);
  border: calc(var(--g) * 1.6) solid transparent;
  border-radius: calc(var(--g) * 12);
  background:
    linear-gradient(180deg, rgba(255,255,255,.13), rgba(255,255,255,.035) 49%, rgba(255,255,255,0) 50%) padding-box,
    radial-gradient(120% 140% at 30% 0%, #1c3236 0%, #0d1a1c 55%, #060c0d 100%) padding-box,
    var(--rim) border-box;
  box-shadow: 0 0 0 1px rgba(0,0,0,.7), 0 8px 18px rgba(0,0,0,.5);
  transition: box-shadow .25s;
}
.pcard.right .plate { grid-template-columns: auto minmax(0, 1fr); padding: 0 calc(var(--g) * 17) 0 calc(var(--g) * 4); }
.pcard.on .plate {
  --rim: linear-gradient(180deg, #fff3b8 0%, #ffd23a 30%, #b9780c 55%, #ffdf6e 100%);
  box-shadow: 0 0 0 1px rgba(0,0,0,.7), 0 0 16px rgba(255,197,49,.5), 0 8px 18px rgba(0,0,0,.45);
}
.pname {
  grid-column: 1; min-width: 0;
  font-family: "Oswald", sans-serif; font-weight: 700; font-size: calc(var(--g) * 14.5); letter-spacing: .3px; line-height: 1;
  text-transform: uppercase; color: #fbf6ec; text-shadow: 0 1px 2px rgba(0,0,0,.7);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pcard.right .pname { grid-column: 2; text-align: right; }
.prow { grid-column: 1; min-width: 0; display: flex; align-items: center; gap: calc(var(--g) * 6); }
.pcard.right .prow { grid-column: 2; flex-direction: row-reverse; }
.pcol { display: flex; align-items: center; gap: calc(var(--g) * 5); min-width: 0; }
.pcol .pball { width: calc(var(--g) * 12); height: calc(var(--g) * 12); }
.pcolname {
  font-family: "Oswald", sans-serif; font-weight: 600; font-size: calc(var(--g) * 11); letter-spacing: 1px;
  text-transform: uppercase; color: rgba(214,232,230,.62); white-space: nowrap;
}
.prun {
  font-family: "Oswald", sans-serif; font-weight: 700; font-size: calc(var(--g) * 10); letter-spacing: .5px;
  color: var(--ink); background: linear-gradient(180deg, var(--gold-1), var(--gold-3));
  padding: 0 calc(var(--g) * 6); border-radius: 99px; white-space: nowrap;
}
.prun:empty { display: none; }
.pskor {
  grid-column: 2; grid-row: 1 / 3;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--g) * 1);
  min-width: calc(var(--g) * 40); height: calc(var(--g) * 34); padding: 0 calc(var(--g) * 5);
  border: calc(var(--g) * 1.3) solid transparent;
  border-radius: calc(var(--g) * 8);
  /* emerald gem in a gold bezel, with a glassy upper half */
  background:
    linear-gradient(180deg, rgba(255,255,255,.2), rgba(255,255,255,.05) 46%, rgba(255,255,255,0) 47%) padding-box,
    radial-gradient(90% 110% at 50% 100%, #1cc46a 0%, #0b8a44 45%, #034d24 100%) padding-box,
    linear-gradient(180deg, #fff1b0, #e3a823 45%, #8a5a10 70%, #f2c94c) border-box;
  box-shadow: inset 0 -2px 6px rgba(0,0,0,.35), 0 2px 6px rgba(0,0,0,.55);
}
.pcard.right .pskor { grid-column: 1; }
.sk { display: flex; align-items: center; gap: calc(var(--g) * 2); line-height: 1; }
.star { color: #ffe27a; font-size: calc(var(--g) * 9); text-shadow: 0 0 5px rgba(255,214,90,.9); }
.slbl { font-family: "Oswald", sans-serif; font-weight: 600; font-size: calc(var(--g) * 8.5); letter-spacing: 1px; color: rgba(235,255,240,.85); text-shadow: 0 1px 1px rgba(0,0,0,.4); }
.pscore {
  font-family: "Oswald", sans-serif; font-weight: 700; font-size: calc(var(--g) * 19); line-height: 1;
  color: #ffd23a; background: linear-gradient(180deg, #fffbe0 0%, #ffe066 40%, #f0a714 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1.5px 0 rgba(0,0,0,.6));
}

@media (max-width: 600px), (orientation: portrait) {
  .hud { --hs: 52; gap: calc(var(--g) * 5); }
  .hb-back, .hb-full { display: none; }
  .hmid { min-width: 0; }
  .goal { font-size: calc(var(--g) * 11); letter-spacing: .3px; }
  .slbl, .pcolname { display: none; }
  .avatar { width: calc(var(--g) * 44); height: calc(var(--g) * 44); margin-right: calc(var(--g) * -12); }
  .pcard.right .avatar { margin-left: calc(var(--g) * -12); }
  /* narrow: the name gets the whole width; ball and score share the second line */
  .plate, .pcard.right .plate { grid-template-columns: minmax(0, 1fr); padding: 0 calc(var(--g) * 7) 0 calc(var(--g) * 17); }
  .pcard.right .plate { padding: 0 calc(var(--g) * 17) 0 calc(var(--g) * 7); }
  .pname, .pcard.right .pname, .prow, .pcard.right .prow { grid-column: 1; }
  .prow { grid-row: 2; justify-self: start; }
  .pcard.right .prow { justify-self: end; }
  .pskor, .pcard.right .pskor {
    grid-column: 1; grid-row: 2; justify-self: end; flex-direction: row; gap: calc(var(--g) * 3);
    min-width: 0; height: calc(var(--g) * 17); padding: 0 calc(var(--g) * 6); border-radius: 99px;
  }
  .pcard.right .pskor { justify-self: start; }
  .pscore { font-size: calc(var(--g) * 14); }
  .pname { font-size: calc(var(--g) * 13.5); letter-spacing: .2px; }
}

.hmid { flex: 0 1 auto; display: flex; flex-direction: column; align-items: center; gap: calc(var(--g) * 5); min-width: calc(var(--g) * 110); position: relative; }
.goal {
  font-family: "Oswald", sans-serif; font-weight: 700; font-size: calc(var(--g) * 14); letter-spacing: .5px; line-height: 1;
  color: #fff; white-space: nowrap;
  padding: calc(var(--g) * 5) calc(var(--g) * 14); border-radius: 99px;
  background: linear-gradient(180deg, #221810, #0b0806);
  box-shadow: 0 0 0 calc(var(--g) * 1.5) rgba(184,134,44,.8), inset 0 1px 0 rgba(255,220,170,.15), 0 4px 10px rgba(0,0,0,.45);
}
.shot { display: flex; align-items: center; gap: calc(var(--g) * 5); }
.cush, .hits { display: flex; gap: calc(var(--g) * 5); }
.cush i, .hits i {
  width: calc(var(--g) * 11); height: calc(var(--g) * 11); border-radius: 50%;
  transition: background .15s, opacity .15s, transform .15s, box-shadow .15s;
}
.cush i { background: radial-gradient(circle at 35% 30%, #5a6466, #1c2426); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.cush i.on { background: radial-gradient(circle at 35% 30%, #fff3b0, var(--gold-2) 60%, var(--gold-3)); box-shadow: 0 0 8px rgba(255,197,49,.8); }
.hits i { background: radial-gradient(circle at 35% 30%, #fff8 0, var(--c) 40%, rgba(0,0,0,.6) 120%); opacity: .35; }
.hits i.on { opacity: 1; transform: scale(1.15); box-shadow: 0 0 8px var(--c); }
.status {
  position: absolute; top: 100%; margin-top: calc(var(--g) * 9); white-space: nowrap;
  display: flex; align-items: center; gap: calc(var(--g) * 8);
  padding: calc(var(--g) * 6) calc(var(--g) * 18) calc(var(--g) * 6) calc(var(--g) * 12); border-radius: 99px;
  font-size: calc(var(--g) * 13); font-weight: 600; color: #fff;
  background: rgba(8,18,20,.88); box-shadow: 0 0 0 1px rgba(255,255,255,.14), 0 6px 14px rgba(0,0,0,.45);
}
.status:empty { display: none; }
.spinner {
  width: calc(var(--g) * 14); height: calc(var(--g) * 14); border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 10%, #fff 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--g) * 2.5), #000 calc(100% - var(--g) * 2.5));
          mask: radial-gradient(farthest-side, transparent calc(100% - var(--g) * 2.5), #000 calc(100% - var(--g) * 2.5));
  animation: ring-spin .9s linear infinite;
}

/* ---- control panels: beside the table on wide screens, one row under it otherwise ---- */
.pnl {
  position: absolute; display: flex; gap: calc(var(--g) * 8); user-select: none; touch-action: none;
  padding: calc(var(--g) * 10) calc(var(--g) * 8);
  border-radius: calc(var(--g) * 14);
  background: linear-gradient(180deg, rgba(16,30,32,.94), rgba(5,13,14,.94));
  box-shadow: 0 0 0 1px rgba(255,255,255,.1), 0 0 0 calc(var(--g) * 2) rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06), 0 12px 26px rgba(0,0,0,.5);
}
#game.side .pnl { flex-direction: column; align-items: stretch; }
#game.bottom .pnl { flex-direction: row; align-items: center; padding: calc(var(--g) * 6) calc(var(--g) * 10); }
.ptitle {
  flex: none; text-align: center; white-space: nowrap;
  font-family: "Oswald", sans-serif; font-weight: 700; font-size: calc(var(--g) * 12.5); letter-spacing: .5px; color: #f4efe4;
}
#game.bottom .ptitle { display: none; }

.ctl { position: relative; display: flex; align-items: center; gap: calc(var(--g) * 6); transition: opacity .2s; }
.ctl .lbl { font-family: "Oswald", sans-serif; font-weight: 600; font-size: calc(var(--g) * 10); letter-spacing: 1px; color: var(--cream-dim); white-space: nowrap; }
#game.locked .ctl, #game.locked .pval { opacity: .45; }

/* power: pull the knob along the bar; the colours stay put and the knob uncovers them */
.power { cursor: grab; }
.power::before { content: ""; position: absolute; inset: calc(var(--g) * -9); } /* the finger may land just off the bar */
.power.vert { flex: 1; min-height: 0; align-self: center; width: 62%; }
.power.horz { flex: 1; align-self: stretch; margin: calc(var(--g) * 10) calc(var(--g) * 4); }
.power .track {
  position: absolute; inset: 0; overflow: hidden; border-radius: 99px;
  background: linear-gradient(90deg, #120604, #2a0e06 50%, #120604);
  box-shadow: 0 0 0 calc(var(--g) * 2) #050505, 0 0 0 calc(var(--g) * 3) rgba(255,255,255,.16), inset 0 3px 8px rgba(0,0,0,.8);
}
.power .fill {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, #37d65a 0%, #9fdc3a 22%, #ffd11a 42%, #ff8a1a 62%, #e2401c 82%, #9a1a0e 100%);
  clip-path: inset(0 0 calc((1 - var(--p, 0)) * 100%) 0);
}
.power .fill::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.35), rgba(255,255,255,.18) 35%, rgba(255,255,255,0) 55%, rgba(0,0,0,.35)); }
.power.horz .fill {
  background: linear-gradient(90deg, #37d65a 0%, #9fdc3a 22%, #ffd11a 42%, #ff8a1a 62%, #e2401c 82%, #9a1a0e 100%);
  clip-path: inset(0 calc((1 - var(--p, 0)) * 100%) 0 0);
}
.power.horz .fill::after { background: linear-gradient(180deg, rgba(255,255,255,.2), rgba(255,255,255,0) 50%, rgba(0,0,0,.3)); }
.power .knob {
  position: absolute; left: -14%; right: -14%; height: calc(var(--g) * 20);
  top: calc(var(--p, 0) * (100% - var(--g) * 20));
  border-radius: calc(var(--g) * 7);
  background: linear-gradient(180deg, #ffffff, #e9e4da 55%, #b9b2a4);
  box-shadow: 0 0 0 1px rgba(0,0,0,.35), 0 3px 6px rgba(0,0,0,.6);
}
.power.horz .knob { top: -18%; bottom: -18%; height: auto; left: calc(var(--p, 0) * (100% - var(--g) * 20)); right: auto; width: calc(var(--g) * 20); }
.power.active { cursor: grabbing; }

.pval { flex: none; display: flex; flex-direction: column; align-items: center; gap: calc(var(--g) * 4); transition: opacity .2s; }
.pval span { font-family: "Oswald", sans-serif; font-weight: 700; font-size: calc(var(--g) * 12); color: #f4efe4; }
.pval b {
  min-width: calc(var(--g) * 46); text-align: center;
  font-family: "Oswald", sans-serif; font-weight: 700; font-size: calc(var(--g) * 14); color: var(--gold-2);
  padding: calc(var(--g) * 3) calc(var(--g) * 6); border-radius: calc(var(--g) * 8);
  background: #050a0b; box-shadow: inset 0 0 0 1px rgba(255,255,255,.14);
}
#game.bottom .pval { flex-direction: row; }

/* fine aim: drag the ridged strip sideways to turn the cue a little */
.fine { flex: none; flex-direction: column; gap: calc(var(--g) * 4); }
#game.bottom .fine { order: -1; width: calc(var(--g) * 120); flex-direction: column-reverse; }
/* narrow row (phones): the power bar gets the room, the percentage alone says what it is */
#game.bottom.nopre .fine { width: calc(var(--g) * 82); }
#game.bottom.nopre .pval span { display: none; }
.fine .track {
  width: 100%; height: calc(var(--g) * 24); border-radius: calc(var(--g) * 8); cursor: ew-resize;
  background:
    linear-gradient(180deg, rgba(0,0,0,.55), transparent 30%, transparent 70%, rgba(0,0,0,.55)),
    repeating-linear-gradient(90deg, #2c3436 0 calc(var(--g) * 3), #7d8a8c calc(var(--g) * 3) calc(var(--g) * 5), #151b1c calc(var(--g) * 5) calc(var(--g) * 8));
  box-shadow: 0 0 0 calc(var(--g) * 1.5) #050505, 0 0 0 calc(var(--g) * 2.5) rgba(255,255,255,.12), inset 0 2px 6px rgba(0,0,0,.7);
}

.spin { flex: none; justify-content: center; }
#game.side .spin { padding: 0 calc(var(--g) * 4); }
#game.bottom .spin { order: 2; width: calc(var(--g) * 48); }
.sball {
  position: relative; flex: none; width: 100%; aspect-ratio: 1; border-radius: 50%; cursor: crosshair;
  background: radial-gradient(circle at 36% 30%, #fff 0, #f1ece0 40%, #b8b09c 100%);
  box-shadow: 0 0 0 2px #050505, 0 0 0 3px rgba(255,255,255,.14), 0 6px 14px rgba(0,0,0,.5), inset -6px -8px 16px rgba(0,0,0,.15);
}
.sball::before, .sball::after { content: ""; position: absolute; background: rgba(0,0,0,.16); }
.sball::before { left: 50%; top: 14%; bottom: 14%; width: 1px; }
.sball::after { top: 50%; left: 14%; right: 14%; height: 1px; }
.sdot {
  position: absolute; width: 20%; height: 20%; border-radius: 50%; transform: translate(-50%, -50%);
  left: 50%; top: 50%;
  background: radial-gradient(circle at 35% 30%, #ff8a8a, #e0161d 60%, #7e0a0e);
  box-shadow: 0 0 0 1.5px rgba(255,255,255,.8), 0 2px 4px rgba(0,0,0,.5);
}

/* spin presets */
.presets { flex-direction: column; align-items: stretch; gap: calc(var(--g) * 7); }
.presets button {
  all: unset; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: calc(var(--g) * 5);
  height: calc(var(--g) * 26); border-radius: 99px; white-space: nowrap;
  font-family: "Oswald", sans-serif; font-weight: 600; font-size: calc(var(--g) * 10.5); letter-spacing: .3px; color: #f4efe4;
  background: linear-gradient(180deg, #172325, #070d0e);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.16), 0 3px 6px rgba(0,0,0,.4);
  transition: box-shadow .15s, background .15s;
}
.presets svg { flex: none; width: calc(var(--g) * 14); height: calc(var(--g) * 14); fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.presets button:hover { box-shadow: inset 0 0 0 1px rgba(255,214,90,.6), 0 3px 6px rgba(0,0,0,.4); }
.presets button.on {
  background: linear-gradient(180deg, #2a2210, #0d0a04);
  box-shadow: inset 0 0 0 calc(var(--g) * 1.5) var(--gold-2), 0 0 12px rgba(255,197,49,.4), 0 3px 6px rgba(0,0,0,.4);
}
.presets button:focus-visible { outline: 2px solid #fff3b0; outline-offset: 2px; }
#game.bottom .presets { flex-direction: row; gap: calc(var(--g) * 6); }
#game.bottom .presets button { width: calc(var(--g) * 30); height: calc(var(--g) * 30); padding: 0; }
#game.bottom .presets button span { display: none; }
#game.nopre.bottom .presets { display: none; }

.banner {
  position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%) scale(.9);
  display: flex; flex-direction: column; align-items: center; gap: calc(var(--g) * 4);
  padding: calc(var(--g) * 12) calc(var(--g) * 30); border-radius: calc(var(--g) * 20);
  background: rgba(15, 6, 2, .78); box-shadow: 0 0 0 2px rgba(168,105,58,.7), 0 14px 30px rgba(0,0,0,.5);
  opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; text-align: center;
  max-width: 92vw;
}
.banner.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.banner b { font-family: "Baloo 2", sans-serif; font-weight: 800; font-size: calc(var(--g) * 40); line-height: 1; color: var(--cream); }
.banner small { font-size: calc(var(--g) * 14); font-weight: 600; color: var(--cream-dim); }
.banner.gold b {
  background: linear-gradient(180deg, #fff3b0, var(--gold-2) 50%, var(--gold-3));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 0 var(--ink));
}
.banner.gold { box-shadow: 0 0 0 2px var(--gold-2), 0 0 30px rgba(255,197,49,.5), 0 14px 30px rgba(0,0,0,.5); }

/* PC hint over the bottom edge of the table */
.kbhint {
  position: absolute; left: 50%; bottom: calc(var(--g) * 94); transform: translateX(-50%);
  padding: calc(var(--g) * 5) calc(var(--g) * 14); border-radius: 99px; white-space: nowrap;
  font-size: calc(var(--g) * 12); color: var(--cream-dim);
  background: rgba(15, 6, 2, .72); box-shadow: 0 0 0 1px rgba(168,105,58,.5);
  pointer-events: none;
}
.kbhint b { color: var(--gold-2); font-weight: 600; }

/* F: spin picker */
.spinpick {
  position: absolute; inset: 0; z-index: 20; display: grid; place-items: center;
  background: radial-gradient(ellipse at center, rgba(0,0,0,.35), rgba(0,0,0,.65));
}
.spbox {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: calc(var(--g) * 12);
  padding: calc(var(--g) * 18) calc(var(--g) * 26) calc(var(--g) * 16);
  border: calc(var(--g) * 2) solid transparent; border-radius: calc(var(--g) * 26);
  background:
    radial-gradient(ellipse 90% 55% at 50% 0%, rgba(46,170,120,.26), transparent 70%) padding-box,
    linear-gradient(180deg, #14282b 0%, #0a1517 55%, #060d0e 100%) padding-box,
    linear-gradient(160deg, #fff1b8, #d9a33a 22%, #7a4a0c 50%, #e2b04a 78%, #fff1b8) border-box;
  box-shadow: 0 0 0 calc(var(--g) * 3) rgba(10,6,2,.85), 0 0 50px rgba(255,190,70,.12), 0 30px 70px rgba(0,0,0,.75);
  animation: pop .2s cubic-bezier(.2,.9,.3,1.25);
}
.sptitle {
  font-family: "Oswald", sans-serif; font-weight: 700; font-size: calc(var(--g) * 22); letter-spacing: 3px; color: #ffd34d;
  background: linear-gradient(180deg, #fff6c8, #ffd34d 45%, #f0a018); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.spball {
  position: relative; width: calc(var(--g) * 190); height: calc(var(--g) * 190); border-radius: 50%; cursor: crosshair;
  background: radial-gradient(circle at 36% 30%, #fff 0, #f1ece0 38%, #b8b09c 100%);
  box-shadow: 0 0 0 calc(var(--g) * 3) #0a0f10, 0 0 0 calc(var(--g) * 5) #c9973a, 0 12px 28px rgba(0,0,0,.6), inset -10px -14px 30px rgba(0,0,0,.18);
}
.spball::before, .spball::after { content: ""; position: absolute; background: rgba(0,0,0,.14); }
.spball::before { left: 50%; top: 9%; bottom: 9%; width: 1px; }
.spball::after { top: 50%; left: 9%; right: 9%; height: 1px; }
.spdot {
  position: absolute; width: 16%; height: 16%; border-radius: 50%; transform: translate(-50%, -50%);
  left: 50%; top: 50%; pointer-events: none;
  background: radial-gradient(circle at 35% 30%, #ff8a8a, #c8161d 60%, #6e0a0e);
  box-shadow: 0 0 0 3px rgba(255,255,255,.8), 0 3px 6px rgba(0,0,0,.5);
}
.sphint { text-align: center; font-size: calc(var(--g) * 12); line-height: 1.5; color: var(--cream-dim); }
.sphint b { color: #ffd34d; }

/* rekoroyun 2026-11-05: */
/* Shift + fare falso: imlecin yanındaki küçük istaka topu (yazarın 8 Top Bilardo'sundaki gibi) */
.spinfloat{ position:absolute; z-index:15; pointer-events:none; width:calc(var(--g) * 58); height:calc(var(--g) * 58); margin:calc(var(--g) * 18) 0 0 calc(var(--g) * 18);
	border-radius:50%; background:radial-gradient(circle at 36% 30%, #fff 0, #f1ece0 40%, #b8b09c 100%);
	box-shadow:0 0 0 calc(var(--g) * 2) #0a0f10, 0 0 0 calc(var(--g) * 3.5) #c9973a, 0 8px 18px rgba(0,0,0,.55); }
.spinfloat[hidden]{ display:none; }
.spinfloat::before, .spinfloat::after{ content:""; position:absolute; background:rgba(0,0,0,.16); }
.spinfloat::before{ left:50%; top:14%; bottom:14%; width:1px; }
.spinfloat::after{ top:50%; left:14%; right:14%; height:1px; }
.spinfloat i{ position:absolute; width:22%; height:22%; border-radius:50%; transform:translate(-50%,-50%);
	background:radial-gradient(circle at 35% 30%, #ff8a8a, #e0161d 60%, #7e0a0e); box-shadow:0 0 0 1.5px rgba(255,255,255,.85), 0 2px 4px rgba(0,0,0,.5); }

/* rekoroyun 2026-11-05 (8 Top ile aynı): dik telefon ekranında kontroller masanın sağında ince şerit */
#game.slim .pnl { padding: calc(var(--g) * 8) calc(var(--g) * 4); gap: calc(var(--g) * 8); border-radius: calc(var(--g) * 12); }
#game.slim .ptitle, #game.slim .pval span, #game.slim .fine .lbl, #game.slim .presets { display: none; }
#game.slim .power.vert { width: 44%; }
#game.slim .pval b { min-width: 0; width: 100%; padding: calc(var(--g) * 3) 0; font-size: calc(var(--g) * 12); }
#game.slim .fine { width: 100%; }
#game.slim .fine .track {
  width: 62%; height: calc(var(--g) * 74); margin: 0 auto; cursor: ns-resize;
  background:
    linear-gradient(90deg, rgba(0,0,0,.55), transparent 30%, transparent 70%, rgba(0,0,0,.55)),
    repeating-linear-gradient(180deg, #2c3436 0 calc(var(--g) * 3), #7d8a8c calc(var(--g) * 3) calc(var(--g) * 5), #151b1c calc(var(--g) * 5) calc(var(--g) * 8));
}
#game.slim .pr { justify-content: center; padding: calc(var(--g) * 4); }
#game.slim .spin { padding: 0; width: 100%; }