/* Pool Hall Live - styles. Built for a WHITE page: dark text, strong borders, solid buttons. */
.phl {
  --navy: #0b2545;
  --green: #0a7a2f;
  --red: #b3001b;
  --ink: #111827;
  max-width: 1100px;
  margin: 0 auto;
  padding: 12px;
  box-sizing: border-box;
  color: var(--ink);
  background: #fff;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.45;
}
.phl *, .phl *::before, .phl *::after { box-sizing: border-box; }
.phl [hidden] { display: none !important; }

.phl-top { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.phl-tabs, .phl-actions { display: flex; flex-wrap: wrap; gap: 8px; }

.phl button { font: inherit; cursor: pointer; }
.phl button:focus-visible, .phl input:focus-visible { outline: 3px solid #ffbf00; outline-offset: 2px; }

.phl-btn {
  background: var(--navy); color: #fff; border: 2px solid var(--navy); border-radius: 10px;
  padding: 9px 16px; min-height: 44px; font-weight: 700; line-height: 1.2;
}
.phl-btn:hover:not(:disabled) { background: #14407a; border-color: #14407a; }
.phl-btn-2 { background: #fff; color: var(--navy); }
.phl-btn-2:hover:not(:disabled) { background: #e8eef8; color: var(--navy); border-color: var(--navy); }
.phl-btn-go { background: var(--green); border-color: var(--green); }
.phl-btn-go:hover:not(:disabled) { background: #086626; border-color: #086626; }
.phl-btn-bad { background: var(--red); border-color: var(--red); }
.phl-btn-bad:hover:not(:disabled) { background: #8f0016; border-color: #8f0016; }
.phl-btn:disabled { opacity: .4; cursor: not-allowed; }
.phl-sm { min-width: 48px; padding: 6px 12px; }

.phl-tab {
  background: #fff; color: var(--navy); border: 2px solid var(--navy); border-radius: 10px;
  padding: 9px 16px; min-height: 44px; font-weight: 700;
}
.phl-tab.on { background: var(--navy); color: #fff; }
.phl-badge {
  display: inline-block; min-width: 22px; padding: 0 6px; margin-left: 4px; border-radius: 999px;
  background: #ffd23f; color: #111; font-size: 13px; text-align: center;
}

.phl-status {
  background: var(--navy); color: #fff; padding: 11px 14px; border-radius: 10px; font-weight: 600; margin-bottom: 8px;
}
.phl-status.me { background: var(--green); }
.phl-qline {
  border: 2px solid var(--navy); background: #eef3fb; color: var(--ink); border-radius: 10px;
  padding: 8px 12px; margin-bottom: 12px; font-size: 15px;
}
.phl-qline a { color: #0a3f9e; font-weight: 700; text-decoration: underline; }

.phl-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
@media (min-width: 980px) { .phl-grid { grid-template-columns: minmax(0, 1fr) 300px; align-items: start; } }

.phl-stage { position: relative; display: flex; justify-content: center; }
.phl-frame { display: inline-block; line-height: 0; border: 4px solid #111; border-radius: 18px; overflow: hidden; background: #2e1808; max-width: 100%; }
.phl-frame canvas { display: block; touch-action: none; cursor: crosshair; }
.phl-banner {
  position: absolute; left: 50%; top: 14px; transform: translateX(-50%); z-index: 2;
  background: #111827; color: #fff; border: 2px solid #ffd23f; border-radius: 999px;
  padding: 7px 16px; font-weight: 700; text-align: center; max-width: 90%; pointer-events: none;
}

.phl-controls { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; justify-content: center; margin-top: 12px; }
.phl-aim { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--navy); }
.phl-power { display: flex; align-items: center; gap: 8px; flex: 1 1 220px; max-width: 360px; font-weight: 700; color: var(--navy); }
.phl-power input { flex: 1; min-width: 100px; height: 32px; accent-color: var(--navy); }
.phl-power b { min-width: 46px; text-align: right; color: var(--ink); }
.phl-shoot { min-width: 130px; font-size: 18px; letter-spacing: .5px; }

.phl-hint { margin: 10px 0 0; color: #1f2937; font-size: 15px; }
.phl-name { margin-top: 8px; font-size: 15px; color: var(--ink); }
.phl-input { margin-left: 4px; padding: 8px 10px; border: 2px solid var(--navy); border-radius: 8px; font: inherit; color: var(--ink); background: #fff; min-height: 40px; max-width: 220px; }
.phl-note { margin: 6px 0 0; font-size: 14px; color: #374151; }

.phl-card { border: 2px solid var(--navy); border-radius: 12px; padding: 12px; margin-bottom: 14px; background: #fff; }
.phl-card h3 { margin: 0 0 8px; font-size: 17px; color: var(--navy); }
.phl-list { margin: 0; padding-left: 24px; }
.phl-list li { padding: 3px 0; color: var(--ink); }
.phl-list li.me { font-weight: 800; }
.phl-list .phl-empty { list-style: none; margin-left: -24px; color: #374151; font-style: italic; }
.phl-board li { display: list-item; }
.phl-board .phl-nm { font-weight: 700; }
.phl-board .phl-w { float: right; font-weight: 700; color: var(--green); }
.phl-mine { margin: 8px 0 0; font-weight: 700; color: var(--navy); font-size: 14px; }

.phl-pl { border: 2px solid #9aa5b8; border-radius: 10px; padding: 8px 10px; margin-bottom: 8px; background: #fff; }
.phl-pl.act { border-color: var(--green); background: #eaf7ee; box-shadow: 0 0 0 2px var(--green); }
.phl-pl-name { font-weight: 800; color: var(--ink); word-break: break-word; }
.phl-pl-grp { font-size: 14px; color: #374151; margin-bottom: 4px; }
.phl-chips { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.phl-arrow { font-weight: 800; padding: 0 2px; }
.phl-chip {
  position: relative; display: inline-flex; width: 26px; height: 26px; border-radius: 50%;
  border: 2px solid #111; align-items: center; justify-content: center; overflow: hidden;
}
.phl-chip i {
  font-style: normal; background: #fff; color: #111; font-size: 10px; font-weight: 800;
  width: 15px; height: 15px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
}
.phl-chip.out { opacity: .25; }

.phl-toast {
  position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 99999;
  background: #111827; color: #fff; border: 2px solid #ffd23f; border-radius: 12px;
  padding: 10px 16px; font-weight: 700; max-width: 92vw; text-align: center; box-shadow: 0 6px 18px rgba(0,0,0,.35);
}

@media (max-width: 520px) {
  .phl { padding: 6px; }
  .phl-actions .phl-btn { flex: 1 1 auto; }
  .phl-shoot { flex: 1 1 100%; }
}