/* Spielanzeige: Anzeigetafel, Statuszeile, Stärke und Treffpunkt, Lupe, Buttons oben rechts, Stoß und
   Wiederholen, Editor-Leiste */

/* Anzeigetafel unten mittig, Statuszeile direkt darüber */
#board { position: fixed; bottom: calc(12px + var(--sab)); left: 50%; transform: translateX(-50%); display: flex; align-items: stretch; gap: 0; padding: 0; overflow: hidden; }
.player { padding: 8px 18px; min-width: 170px; display: flex; justify-content: space-between; align-items: center; gap: 14px; opacity: 0.55; }
.player.active { opacity: 1; background: rgba(255,181,71,0.12); box-shadow: inset 0 -3px 0 var(--accent); }
.player .name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; }
/* Unter dem Namen: gewonnene Frames im Match als Punkte (gefüllt = gewonnen), nur bei mehr als einem Frame */
.player .who { display: flex; flex-direction: column; min-width: 0; }
#p1 .who { align-items: flex-end; }
.pframes { font-size: 10px; line-height: 1.3; letter-spacing: .25em; color: var(--accent); }
.pframes:empty { display: none; }
/* Challenge: Zusatz zum Fortschritt (z. B. „Kugeln übrig“) als kleiner Text statt der Frame-Punkte */
.pframes.note { letter-spacing: .04em; color: var(--muted); }
.player .score { font-size: 30px; line-height: 1; font-variant-numeric: tabular-nums; }
#mid { padding: 6px 16px; border-left: 1px solid var(--line); border-right: 1px solid var(--line); font-size: 12px; color: var(--muted); display: grid; grid-template-columns: auto auto; column-gap: 10px; align-content: center; }
#mid b { color: var(--fg); font-weight: 600; }
#snookers { grid-column: 1 / 3; text-align: center; color: var(--accent); font-size: 11px; letter-spacing: .04em; }
#scoreLine { grid-column: 1 / 3; text-align: center; margin-top: 2px; padding-top: 3px; border-top: 1px solid var(--line); white-space: nowrap; }
#scoreLine b { color: var(--fg); font-weight: 600; margin-right: 6px; }
#on { padding: 0 6px; border-radius: 4px; }
.on-red { background: #b00d18; } .on-yellow { background: #c9a100; } .on-green { background: #0a6a2e; } .on-brown { background: #6a3418; }
.on-blue { background: #1240b0; } .on-pink { background: #d9628e; } .on-black { background: #000; border: 1px solid #555; } .on-colour { background: linear-gradient(90deg,#c9a100,#0a6a2e,#6a3418,#1240b0,#d9628e,#000); }

/* Kugeln des laufenden Breaks (zur Zusatzzeile „Possible – Break“): eigene Leiste direkt über der Tafel, je Farbe ein
   Kreis mit der Anzahl; die Statuszeile rückt so lange nach oben */
#breakBalls { position: fixed; bottom: calc(70px + var(--sab)); left: 50%; transform: translateX(-50%); display: flex; gap: 6px; padding: 5px 8px; }
#breakBalls .bb { --d: 22px; width: var(--d); height: var(--d); border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; filter: brightness(1.2); }
#breakBalls .bb.on-black { border: 1px solid #666; }
#hud.break-balls #status { bottom: calc(116px + var(--sab)); }
#hud.bottom-left #breakBalls { left: calc(12px + var(--sal)); transform: none; }

/* Ein Kasten unten für Meldungen (oben, hervorgehoben, verschwindet nach einigen Sekunden) und Status */
#status { position: fixed; bottom: calc(80px + var(--sab)); left: 50%; transform: translateX(-50%); padding: 6px 14px; color: var(--muted); font-size: 13px; max-width: min(640px, calc(100vw - 320px)); }
/* Mittig kämen Tafel und Statuszeile an Stoß-Button und Regler rechts: linksbündig (hud.js fitBottomBar) */
#hud.bottom-left #board, #hud.bottom-left:not(.editing) #status { left: calc(12px + var(--sal)); transform: none; }
#hud.bottom-left:not(.editing) #status { max-width: var(--status-max); }
#status.idle { display: none; }
#msg { display: none; color: var(--fg); font-weight: 600; margin-bottom: 3px; }
#msg.show { display: block; }

/* Stärke und Treffpunkt nebeneinander unten rechts – beides mit einer Hand erreichbar */
/* Beide frei über dem Tisch (ohne Kasten), gleich hoch (--ctl) und unten bündig mit Tafel und Stoß-Button */
#controls { --ctl: 150px; position: fixed; right: calc(16px + var(--sar)); bottom: calc(12px + var(--sab)); display: flex; gap: 14px; align-items: flex-end; }
#powerBox { padding: 0 4px; display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: ns-resize; touch-action: none; }
#power { width: 41px; height: var(--ctl); border-radius: 8px; background: rgba(0,0,0,.45); border: 1px solid rgba(255,255,255,.1); position: relative; overflow: hidden; cursor: ns-resize; touch-action: none;
  box-shadow: 0 4px 14px rgba(0,0,0,.45); }
#powerFill { position: absolute; inset: 0; background: linear-gradient(0deg, #3fae5a, #e8b84a 60%, #d9483b); }
/* Gesperrter Bereich oberhalb der Höchststärke (Kugel im Bereich des Durchschwingens) */
#powerLimit { position: absolute; left: 0; right: 0; top: 0; height: 0; pointer-events: none;
  background: repeating-linear-gradient(135deg, rgba(217,72,59,.45) 0 4px, rgba(0,0,0,.25) 4px 8px); border-bottom: 2px solid #d9483b; }
#powerLimit[style*="height: 0%"] { border-bottom: 0; }
.lbl { font-size: 10px; font-weight: 600; color: var(--muted); letter-spacing: .14em; text-transform: uppercase; }
#controls .lbl { color: var(--fg); text-shadow: 0 1px 3px rgba(0,0,0,.9), 0 0 8px rgba(0,0,0,.6); }

#spinBox { display: flex; flex-direction: column; align-items: center; gap: 6px; }
#powerBox.locked, #spinBox.locked { opacity: .4; pointer-events: none; transition: opacity .2s; }
#spin { width: var(--ctl); height: var(--ctl); cursor: pointer; touch-action: none; border-radius: 50%; box-shadow: 0 4px 14px rgba(0,0,0,.45); }
/* Lupe beim Ziehen mit dem Finger: vergrößerter Treffpunkt bzw. Stärke über dem Regler */
#loupe { position: fixed; z-index: 30; display: none; padding: 10px; border-radius: 16px; pointer-events: none;
  background: rgba(12,14,18,.9); box-shadow: 0 10px 30px rgba(0,0,0,.5); }
#loupe.on { display: block; }
#loupeSpin { display: none; width: 180px; height: 180px; }
#loupe.spin #loupeSpin { display: block; }
#loupePower { display: none; width: 150px; padding: 4px 6px 8px; text-align: center; }
#loupe.power #loupePower { display: block; }
#loupePower .track { height: 10px; border-radius: 5px; background: rgba(0,0,0,.35); border: 1px solid var(--line); overflow: hidden; }
#loupeBar { display: block; width: 100%; height: 100%; background: linear-gradient(90deg, #3fae5a, #e8b84a 60%, #d9483b); }

#tools { position: fixed; top: calc(12px + var(--sat)); right: calc(12px + var(--sar)); display: flex; flex-direction: column; gap: 6px; align-items: stretch; z-index: 6; }
.tool-row { display: flex; justify-content: flex-end; gap: 6px; }
.icon-btn { display: flex; align-items: center; justify-content: center; width: 42px; height: 38px; padding: 0; background: var(--panel); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); }
.icon-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#btnOptions[aria-expanded="true"] { border-color: var(--accent); }

/* Desktop: Stoß unten rechts direkt links neben der Stärke (auf dem Handy unten mittig, s. u.) */
#controls #btnShoot { align-self: flex-end; padding: 12px 22px; font-size: 22px; line-height: 1; white-space: nowrap; border-radius: var(--radius); }
/* Training und Editor: zurück und vor, links neben dem Stoß, gleiche Höhe */
#controls #btnUndo, #controls #btnRedo { align-self: flex-end; width: 48px; height: 46px; border-radius: var(--radius); }
#controls #btnUndo svg, #controls #btnRedo svg { width: 22px; height: 22px; }
#btnConcede { border-color: rgba(217,72,59,0.6); }
#tools button.on { border-color: var(--accent); }
/* Editor für eigene Situationen: Leiste unten links (Rote, Farben, Name, Speichern), Stoß, Stärke und Treffpunkt
   wie im Spiel unten rechts (zum Einstellen und Ausprobieren des gespeicherten Stoßes); Tafel aus, Statuszeile
   oben mittig. Während ein ausprobierter Stoß läuft, ist die Leiste gesperrt */
#hud.editing #board, #hud.editing #btnConcede { display: none !important; }
#hud.editing #status { top: calc(12px + var(--sat)); bottom: auto; left: 50%; transform: translateX(-50%); }
#editBar.busy { opacity: .5; pointer-events: none; }
#editBar { position: fixed; left: calc(16px + var(--sal)); bottom: calc(16px + var(--sab)); width: min(600px, calc(100vw - 470px));
  padding: 12px; display: flex; flex-direction: column; gap: 10px; z-index: 6; }
.edit-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.edit-reds { display: flex; align-items: center; gap: 6px; }
.edit-reds b { min-width: 20px; text-align: center; font-variant-numeric: tabular-nums; }
.edit-reds button { width: 34px; height: 34px; padding: 0; font-size: 18px; line-height: 1; }
.edit-colours { display: flex; gap: 6px; }
.ball-chip { width: 30px; height: 30px; padding: 0; border-radius: 50%; border: 2px solid rgba(255,255,255,.25);
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.55), transparent 40%), var(--ball, #b00d18); }
.ball-chip.off { opacity: .28; border-style: dashed; }
span.ball-chip { display: inline-block; width: 22px; height: 22px; flex: 0 0 auto; }
.edit-row .grow { flex: 1; }
.edit-row .small { padding: 7px 10px; font-size: 13px; }
#editCopy, #editChallenge { width: 34px; height: 34px; background: var(--btn); }
#editCopy svg, #editChallenge svg { width: 17px; height: 17px; }
#editName { flex: 1; min-width: 140px; font: inherit; font-size: 16px; color: var(--fg); background: var(--btn); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 9px 12px; outline: none; }
#editName:focus { border-color: rgba(255,181,71,.6); background: var(--btn-hover); }
#editBar .act { padding: 10px 16px; font-family: var(--display); font-style: italic; font-weight: 800; text-transform: uppercase;
  letter-spacing: .06em; font-size: 18px; line-height: 1; }
/* Schmal: Name über die volle Breite, Abbrechen und Speichern darunter nebeneinander; Statuszeile unter den Buttons */
@media (max-width: 520px) {
  #editName { flex: 1 1 100%; }
  #editBar .act { flex: 1; }
  #hud.editing #status { top: calc(54px + var(--sat)); max-width: calc(100vw - 20px); }
}