@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Special+Elite&display=swap');

body.pool {
  background:
    radial-gradient(ellipse at center top, #1a6b39 0%, #0c4422 60%, #062817 100%);
  background-attachment: fixed;
  color: #f5e9c0;
  font-family: "Special Elite", "Fredoka", sans-serif;
}
body.pool::before { display: none !important; }

.pool-header {
  background: linear-gradient(180deg, #2a1a0e 0%, #150a05 100%);
  border-bottom: 3px solid #d4a437;
  color: #f4d97a;
}
.pool-header h1 {
  font-family: "Bebas Neue", sans-serif;
  font-size: 1.6rem;
  letter-spacing: 4px;
  color: #d4a437;
  text-shadow: 0 2px 0 #000, 0 0 12px rgba(212,164,55,.4);
}
.pool-header .back {
  background: rgba(212,164,55,.2);
  color: #f4d97a;
  border: 1px solid #d4a437;
}
.phase-tag {
  background: #d4a437;
  color: #1a0e05;
  font-family: "Bebas Neue", sans-serif;
  font-size: .9rem;
  letter-spacing: 2px;
  padding: .2rem .6rem;
  border-radius: 4px;
}

body.pool main { padding: 1rem; max-width: 760px; margin: 0 auto; }

body.pool h2.round-title,
body.pool h2.rack-title {
  font-family: "Bebas Neue", sans-serif;
  font-size: 1.3rem;
  letter-spacing: 3px;
  color: #d4a437;
  margin: 1.2rem 0 .5rem;
  display: flex; align-items: center; gap: .5rem;
}

/* Billiard balls */
.ball {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  font-family: "Bebas Neue", sans-serif;
  font-size: .9rem;
  font-weight: 700;
  color: #1a0e05;
  background: white;
  box-shadow: inset -2px -3px 6px rgba(0,0,0,.3), 0 1px 3px rgba(0,0,0,.4);
  border: 1px solid rgba(0,0,0,.15);
  position: relative;
  flex: 0 0 auto;
}
.ball::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.65) 0%, transparent 35%);
  pointer-events: none;
}
.ball-1 { background: #fed24a; }
.ball-2 { background: #1d62b2; color: #fff; }
.ball-3 { background: #d8323c; color: #fff; }
.ball-4 { background: #6c2a86; color: #fff; }
.ball-5 { background: #ee7838; color: #fff; }
.ball-6 { background: #2c8055; color: #fff; }
.ball-7 { background: #842424; color: #fff; }
.ball-8 { background: #131313; color: #fff; }
.ball-9 { background: #fed24a; }
.ball-10 { background: #1d62b2; color: #fff; }
.ball-11 { background: #d8323c; color: #fff; }
.ball-12 { background: #6c2a86; color: #fff; }
.ball-13 { background: #ee7838; color: #fff; }
.ball-14 { background: #2c8055; color: #fff; }
.ball-15 { background: #842424; color: #fff; }

/* ---------- USER BANNER ---------- */
.user-banner {
  margin: 0 0 1rem;
  padding: .85rem 1rem;
  border-radius: 12px;
  border: 2px solid;
  text-align: center;
  font-family: "Special Elite", inherit;
  display: flex; flex-direction: column; align-items: center; gap: .35rem;
}
.user-banner.ready {
  background: linear-gradient(135deg, rgba(244,217,122,.18), rgba(212,164,55,.25));
  border-color: #f4d97a;
  box-shadow: 0 0 18px rgba(244,217,122,.4);
  animation: ub-pulse 2.4s ease-in-out infinite;
}
@keyframes ub-pulse {
  0%, 100% { box-shadow: 0 0 18px rgba(244,217,122,.4); }
  50%      { box-shadow: 0 0 28px rgba(244,217,122,.7); }
}
.user-banner.pending {
  background: linear-gradient(135deg, rgba(204,136,68,.18), rgba(204,136,68,.08));
  border-color: #c84;
}
.user-banner.waiting {
  background: rgba(245,233,192,.05);
  border-color: rgba(212,164,55,.35);
  border-style: dashed;
}
.user-banner.eliminated {
  background: rgba(132,36,36,.15);
  border-color: rgba(132,36,36,.6);
  color: #c9bf99;
}
.ub-title {
  font-family: "Bebas Neue", sans-serif;
  letter-spacing: 2px;
  font-size: 1.25rem;
  color: #f4d97a;
}
.user-banner.eliminated .ub-title { color: #f5e9c0; }
.ub-detail { color: #f5e9c0; font-size: .95rem; }
.ub-action {
  background: #d4a437;
  color: #1a0e05;
  border: 2px solid #f4d97a;
  font-family: "Bebas Neue", sans-serif;
  letter-spacing: 2px;
  font-size: .95rem;
  padding: .5rem 1.1rem;
  border-radius: 6px;
  margin-top: .25rem;
  cursor: pointer;
  box-shadow: 0 3px 0 #8a6a1f;
}
.ub-action:active { transform: translateY(2px); box-shadow: 0 1px 0 #8a6a1f; }

/* ---------- SIGNUP ---------- */
.signup .hint { color: #c9bf99; }
.signup .hint.dim { opacity: .7; font-style: italic; }
.signup-actions {
  display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
  margin: .5rem 0 1.25rem;
}
.signup-list {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: .4rem;
}
.signup-item {
  display: flex; align-items: center; gap: .65rem;
  padding: .55rem .85rem;
  background: rgba(245,233,192,0.07);
  border: 1px solid rgba(212,164,55,0.3);
  border-radius: 8px;
}
.signup-name { font-weight: 700; color: #f5e9c0; letter-spacing: .3px; }
.signup-list .empty { color: #c9bf99; font-style: italic; padding: .5rem 0; }

button.primary, button.danger, button.ghost, button.gold-btn {
  font-family: "Bebas Neue", sans-serif;
  letter-spacing: 2px;
  padding: .6rem 1.1rem;
  font-size: 1rem;
  border-radius: 6px;
  border: none;
  cursor: pointer;
}
button.primary {
  background: #d4a437;
  color: #1a0e05;
  border: 2px solid #f4d97a;
  box-shadow: 0 3px 0 #8a6a1f;
}
button.primary:active { transform: translateY(2px); box-shadow: 0 1px 0 #8a6a1f; }
button.gold-btn {
  background: linear-gradient(180deg, #f4d97a, #d4a437);
  color: #1a0e05;
  border: 2px solid #fff3c0;
  box-shadow: 0 3px 0 #8a6a1f, 0 0 14px rgba(244,217,122,.5);
}
button.danger {
  background: #842424; color: #f4d97a;
  border: 2px solid #d4a437;
}
button.ghost {
  background: rgba(245,233,192,.06);
  color: #f4d97a;
  border: 1px solid rgba(244,217,122,.4);
}
.reset-btn { margin-top: 1.5rem; }

/* ---------- BRACKET ---------- */
.bracket-toolbar {
  display: flex; justify-content: flex-end;
  margin-bottom: .25rem;
}
.rotate-btn {
  font-family: "Bebas Neue", sans-serif;
  letter-spacing: 1.5px;
  font-size: .8rem;
  padding: .35rem .75rem;
  background: rgba(245,233,192,.08);
  color: #f4d97a;
  border: 1px solid rgba(244,217,122,.4);
  border-radius: 6px;
  cursor: pointer;
}
.rotate-btn:hover { background: rgba(245,233,192,.15); }

.bracket-wrap {
  position: relative;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: .5rem;
}
.bracket-wrap.fullscreen {
  position: fixed;
  inset: 0;
  z-index: 40;
  background:
    radial-gradient(ellipse at center top, #1a6b39 0%, #0c4422 60%, #062817 100%);
  padding: 3.5rem 1rem 1rem;
  overflow-x: hidden;   /* never horizontal scroll — width is the constraint */
  overflow-y: auto;
}
.bracket-wrap.fullscreen::before {
  content: "🎱 Pool tournament";
  position: fixed;
  top: 1rem; left: 50%;
  transform: translateX(-50%);
  font-family: "Bebas Neue", sans-serif;
  letter-spacing: 4px;
  color: #d4a437;
  font-size: 1.4rem;
  text-shadow: 0 2px 0 #000, 0 0 12px rgba(212,164,55,.4);
  z-index: 41;
  pointer-events: none;
}
.bracket-wrap.fullscreen + .third-section,
body.bracket-fullscreen .pool-header,
body.bracket-fullscreen .top-ticker,
body.bracket-fullscreen #podium,
body.bracket-fullscreen #user-banner,
body.bracket-fullscreen #history,
body.bracket-fullscreen .admin-row { display: none; }
/* Move the rotate button to a fixed top-right position when fullscreen */
body.bracket-fullscreen .bracket-toolbar {
  position: fixed;
  top: 1rem; right: 1rem;
  margin: 0;
  z-index: 42;
}
body.bracket-fullscreen .bracket-toolbar .rotate-btn {
  background: #d4a437;
  color: #1a0e05;
  border-color: #f4d97a;
  font-size: .9rem;
  padding: .45rem .9rem;
}

.bracket {
  display: grid;
  grid-template-columns: repeat(var(--cols), 130px);
  grid-template-rows: 28px repeat(var(--rows), 36px);
  position: relative;
  min-width: max-content;
  padding: .25rem 1rem 1rem;
  column-gap: 38px;
}
/* Flipped layout: rounds are rows, slot positions are columns sized as 1fr
   so the whole bracket fits the viewport width with no horizontal scroll.
   Nodes are capped at max-width and centered within their spanned cells. */
.bracket.flipped {
  grid-template-rows: repeat(var(--cols), 100px);
  grid-template-columns: 90px repeat(var(--rows), 1fr);
  column-gap: 0;
  row-gap: 30px;
  padding: 1rem;
  width: 100%;
  min-width: 0;
}
.bracket.flipped .round-header {
  grid-row: var(--col);
  grid-column: 1;
  align-self: center;
  justify-self: end;
  padding-right: .75rem;
  font-size: 1.1rem;
  letter-spacing: 3px;
}
.bracket.flipped .node {
  grid-row: var(--col);
  grid-column: var(--rs) / var(--re);
  align-self: center;
  justify-self: center;
  width: 100%;
  max-width: 180px;
  min-width: 90px;
  height: 72px;
  font-size: 1rem;
  padding: 6px 8px;
}
.bracket.flipped .node .row {
  font-size: 1rem;
  padding: 2px 4px;
}
.bracket.flipped .node-badge {
  top: -10px; right: -8px;
  width: 26px; height: 22px;
  font-size: .8rem;
}

.round-header {
  grid-row: 1;
  grid-column: var(--col);
  font-family: "Bebas Neue", sans-serif;
  font-size: .8rem;
  letter-spacing: 2px;
  color: #d4a437;
  text-align: center;
  align-self: center;
  z-index: 2;
}

.bracket-svg {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: visible;
}
.bracket-line {
  fill: none;
  stroke: rgba(212,164,55,.5);
  stroke-width: 2;
  stroke-linejoin: round;
}
.bracket-line.settled {
  stroke: #f4d97a;
  stroke-width: 3;
  filter: drop-shadow(0 0 6px rgba(244,217,122,.8));
}

/* ---------- BRACKET NODE ---------- */
.node {
  grid-column: var(--col);
  grid-row: var(--rs) / var(--re);
  align-self: center;
  position: relative;
  z-index: 1;
  background: linear-gradient(135deg, #f5e9c0 0%, #e0d29a 100%);
  color: #1a0e05;
  border: 2px solid #3a2418;
  border-radius: 6px;
  padding: 4px 6px;
  font-size: .78rem;
  line-height: 1.15;
  box-shadow: 0 2px 0 #1a0e05, 0 3px 5px rgba(0,0,0,.35);
  cursor: pointer;
  height: 56px;
  display: flex; flex-direction: column; justify-content: center;
  font-family: "Bebas Neue", sans-serif;
  letter-spacing: .3px;
  transition: transform .1s;
}
.node:hover { transform: translateY(-1px); }
.node:active { transform: translateY(0); }
.node.tbd {
  /* Opaque dark felt so connector lines under the cell don't bleed through. */
  background: #0c4422;
  color: #c9bf99;
  border-color: rgba(212,164,55,.3);
  border-style: dashed;
  box-shadow: none;
  font-style: italic;
  cursor: default;
}
.node.settled {
  border-color: #d4a437;
  background: linear-gradient(135deg, #fff3c0 0%, #d4a437 130%);
  box-shadow: 0 2px 0 #8a6a1f, 0 0 10px rgba(244,217,122,.55);
}
.node.pending {
  border-color: #c84;
  border-style: dashed;
  background: linear-gradient(135deg, #f5e9c0 0%, #e8c878 120%);
}
.node.me {
  /* highlight the user's current matches with a subtle outer outline */
  outline: 2px solid #f4d97a;
  outline-offset: 2px;
}

.node .row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 1px 2px;
  border-radius: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.node .row.win { background: rgba(132,36,36,.18); color: #842424; font-weight: 700; }
.node .row.win::after { content: " 🏆"; }
.node .row.lose { color: #6e553a; opacity: .55; text-decoration: line-through; }
.node .row.reported { background: rgba(212,164,55,.3); color: #5a3f0c; }
.node .row.tbd { color: #6e553a; opacity: .5; font-style: italic; font-size: .68rem; }
.node .row.is-me { font-weight: 800; }

.node-badge {
  position: absolute;
  top: -8px; right: -6px;
  width: 22px; height: 18px;
  border-radius: 4px;
  background: #d4a437;
  color: #1a0e05;
  font-size: .65rem;
  font-family: "Bebas Neue", sans-serif;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid #1a0e05;
  z-index: 2;
}
.node.pending .node-badge { background: #c84; color: #fff; }
.node.tbd .node-badge { background: rgba(212,164,55,.3); color: rgba(0,0,0,.5); }

/* ---------- THIRD-PLACE SECTION ---------- */
.third-section {
  margin-top: 1.5rem;
  text-align: center;
}
.third-section h2 {
  font-family: "Bebas Neue", sans-serif;
  letter-spacing: 3px;
  color: #cd7f32;
  font-size: 1.05rem;
  margin: 0 0 .4rem;
}
.third-section .node { display: inline-flex; width: 200px; }

/* ---------- PODIUM ---------- */
.podium {
  background: linear-gradient(180deg, #1a0e05 0%, #2a1a0e 100%);
  border: 3px solid #d4a437;
  border-radius: 12px;
  padding: 1.25rem;
  margin-bottom: 1.5rem;
  text-align: center;
  box-shadow: 0 0 24px rgba(212,164,55,.35);
}
.podium-title {
  font-family: "Bebas Neue", sans-serif;
  letter-spacing: 3px;
  color: #d4a437;
  font-size: 1.1rem;
  margin-bottom: .75rem;
}
.podium-row {
  display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap;
  margin-bottom: 1rem;
}
.podium-pill {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .45rem .85rem;
  background: rgba(245,233,192,.08);
  border: 2px solid;
  border-radius: 999px;
  font-family: "Bebas Neue", sans-serif;
  letter-spacing: 1.5px;
  color: #f5e9c0;
}
.podium-pill .m { font-size: 1.3rem; line-height: 1; }
.podium-pill.gold { border-color: #f4d97a; }
.podium-pill.silver { border-color: #c0c0c0; }
.podium-pill.bronze { border-color: #cd7f32; }

/* ---------- MATCH MODAL ---------- */
.modal {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(0,0,0,.7);
  display: flex;
  align-items: flex-end; justify-content: center;
  padding: 1rem;
}
.modal.hidden { display: none; }
@media (min-width: 480px) { .modal { align-items: center; } }
.modal-card {
  width: 100%; max-width: 380px;
  background: linear-gradient(180deg, #1a0e05 0%, #2a1a0e 100%);
  border: 3px solid #d4a437;
  border-radius: 14px;
  padding: 1.1rem;
  color: #f5e9c0;
  box-shadow: 0 8px 32px rgba(0,0,0,.6);
  animation: modal-up .25s ease-out;
}
@keyframes modal-up {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.modal-card h3 {
  font-family: "Bebas Neue", sans-serif;
  letter-spacing: 2px;
  color: #d4a437;
  font-size: 1.2rem;
  margin: 0 0 .5rem;
}
.modal-vs {
  display: flex; align-items: center; gap: .5rem;
  font-family: "Bebas Neue", sans-serif;
  font-size: 1.4rem;
  letter-spacing: .5px;
  margin-bottom: .5rem;
}
.modal-vs .p { flex: 1; padding: .3rem .5rem; border-radius: 5px; background: rgba(245,233,192,.06); border: 1px solid rgba(212,164,55,.3); text-align: center; }
.modal-vs .p.win { background: rgba(212,164,55,.25); border-color: #d4a437; color: #f4d97a; }
.modal-vs .p.lose { opacity: .5; }
.modal-vs .p.reported { background: rgba(212,164,55,.18); border-color: #c84; }
.modal-vs .vs { color: #d4a437; }
.modal-status {
  font-size: .85rem; color: #c9bf99; font-style: italic;
  margin: .35rem 0 .75rem;
}
.modal-actions { display: flex; flex-direction: column; gap: .4rem; }
.modal-actions button {
  font-family: "Bebas Neue", sans-serif;
  letter-spacing: 2px;
  font-size: .9rem;
  padding: .55rem 1rem;
  border-radius: 6px;
  border: 2px solid #3a2418;
  cursor: pointer;
}
.modal-actions .report { background: #2c8055; color: white; border-color: #1a6b39; }
.modal-actions .confirm { background: #d4a437; color: #1a0e05; border-color: #f4d97a; box-shadow: 0 0 12px rgba(212,164,55,.4); }
.modal-actions .take-back { background: rgba(132,36,36,.6); color: #f4d97a; border-color: #842424; }
.modal-actions .close { background: rgba(245,233,192,.06); color: #f4d97a; border-color: rgba(244,217,122,.3); margin-top: .25rem; }
.modal-actions .dice {
  background: #2a1a0e;
  color: #f4d97a;
  border-color: #d4a437;
}
.modal-actions .dice:disabled { opacity: .6; cursor: progress; }
.modal-actions .dice:hover { background: #3a2418; }

.dice-result {
  margin: .5rem 0;
  padding: .55rem .75rem;
  background: rgba(212,164,55,.12);
  border: 1px solid rgba(212,164,55,.4);
  border-radius: 8px;
  text-align: center;
  font-family: "Bebas Neue", sans-serif;
  letter-spacing: 1.5px;
  color: #f4d97a;
  font-size: 1rem;
  transition: background .2s;
}
.dice-result.hidden { display: none; }
.dice-result.settled {
  background: rgba(212,164,55,.32);
  border-color: #d4a437;
  font-size: 1.25rem;
  box-shadow: 0 0 12px rgba(244,217,122,.35);
}
.dice-result.settled strong { color: #fff3c0; }
.dice-result .dice-icon {
  display: inline-block;
  animation: dice-shake .14s linear infinite;
}
@keyframes dice-shake {
  0%   { transform: rotate(-18deg) translateY(0); }
  25%  { transform: rotate(12deg) translateY(-2px); }
  50%  { transform: rotate(-6deg) translateY(0); }
  75%  { transform: rotate(20deg) translateY(-1px); }
  100% { transform: rotate(-18deg) translateY(0); }
}

/* ---------- HISTORY ---------- */
.history { margin-top: 1.5rem; }
.history-list {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: .35rem;
}
.history-list li {
  background: rgba(245,233,192,.05);
  border-left: 3px solid #d4a437;
  padding: .5rem .75rem;
  border-radius: 4px;
  font-size: .9rem;
}
.hist-date { color: #c9bf99; margin-right: .5rem; font-size: .8rem; }

.admin-row { margin-top: 1.5rem; text-align: right; }