/* Spud & Root: town/bar.html, table shuffleboard (bar-shuffleboard.js).
   The table is drawn on the canvas; this styles the scoreboard (a little
   wooden one with brass pegs, whose turn it is in the middle), the help
   button, the opponent's picture standing at the table, and the cards over
   the table. The top 64px belong to the engine's Done and Sound buttons,
   and the bottom 86px or so to its caption. */

.sb {
  position: absolute;
  inset: 0;
  overflow: hidden;
  font-family: var(--font-body);
  color: var(--ink);
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

.sb [hidden] {
  display: none !important;
}

.sb__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
  outline: none;
  cursor: grab;
}
.sb__canvas:active {
  cursor: grabbing;
}
/* the focus ring is drawn on the canvas, round the table */
.sb__canvas:focus,
.sb__canvas:focus-visible {
  outline: none;
}

/* the opponent, standing at your end of the table; the script moves her */
.sb__opp {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  will-change: transform;
}
.sb__opp[hidden] {
  display: none;
}
.sb__opp img {
  display: block;
  width: 100%;
  height: 100%;
}

/* ---------- Scoreboard ---------- */

.sb__top {
  position: absolute;
  top: 66px;
  left: 50%;
  transform: translateX(-50%);
  width: min(560px, calc(100% - 24px));
  pointer-events: none;
  z-index: 2;
}

.sb__board {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 7px;
  color: var(--cream);
  background: #5a341c;
  border: var(--stroke) solid var(--ink);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.sb__side {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.sb__side--them {
  align-items: flex-end;
  text-align: right;
}
.sb__name {
  max-width: 100%;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-bottom: 3px solid transparent;
}
.sb__side.is-turn .sb__name {
  border-bottom-color: var(--logo-yellow);
}

.sb__row {
  display: flex;
  align-items: center;
  gap: 7px;
}
.sb__side--them .sb__row {
  flex-direction: row-reverse;
}
.sb__score {
  min-width: 2.1ch;
  padding: 1px 6px 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 1.1;
  text-align: center;
  color: #d9a441;
  background: #2a1810;
  border: 2px solid var(--ink);
  border-radius: 8px;
  font-variant-numeric: tabular-nums;
}
.sb__score.is-bump {
  animation: sb-bump 0.4s var(--ease-spring);
}
@keyframes sb-bump {
  0% { transform: scale(1); color: #fff3b0; }
  35% { transform: scale(1.3); color: #fff3b0; }
  100% { transform: scale(1); }
}

/* the weights still to throw */
.sb__discs {
  display: flex;
  gap: 3px;
}
.sb__disc {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 2px solid var(--ink);
  background: #e2382c;
  box-shadow: inset 0 0 0 2px #d3dbe1;
  transition: background-color 0.2s, opacity 0.2s, transform 0.2s;
}
.sb__side--them .sb__disc {
  background: #5b84a8;
}
.sb__disc.is-used {
  background: #2a1810;
  box-shadow: none;
  opacity: 0.6;
  transform: scale(0.8);
}

/* fifteen peg holes each, brass pegs for the points */
.sb__pegs {
  display: flex;
  gap: 2px;
}
.sb__side--them .sb__pegs {
  flex-direction: row-reverse;
}
.sb__pegs i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #2a1810;
  box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.5);
}
.sb__pegs i:nth-child(5n) {
  margin-right: 3px;
}
.sb__side--them .sb__pegs i:nth-child(5n) {
  margin-right: 0;
  margin-left: 3px;
}
.sb__pegs i.is-on {
  background: #d9a441;
  box-shadow: 0 0 0 1px var(--ink);
}

/* the middle: how far to go, and whose shot it is */
.sb__mid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-family: var(--font-display);
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
}
.sb__to {
  font-size: 0.75rem;
  color: #d9a441;
}
.sb__turn {
  padding: 3px 12px 4px;
  font-size: 0.9375rem;
  line-height: 1.15;
  color: var(--ink);
  background: var(--cream);
  border: 2px solid var(--ink);
  border-radius: var(--radius-pill);
}
.sb__turn.is-you {
  background: var(--logo-yellow);
}

/* ---------- Help ---------- */

.sb__q {
  position: absolute;
  right: 12px;
  top: 150px;
  z-index: 3;
  width: 34px;
  height: 34px;
  padding: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  color: var(--ink);
  background: var(--white);
  border: var(--stroke) solid var(--ink);
  border-radius: 50%;
  box-shadow: 3px 3px 0 var(--ink);
  cursor: pointer;
}
.sb__q:hover {
  background: var(--logo-yellow);
}
.sb__q:focus-visible,
.sb__btn:focus-visible {
  outline: 3px solid var(--logo-yellow);
  outline-offset: 3px;
}

/* ---------- Cards over the table ---------- */

.sb__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 10px 24px;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--ink);
  background: var(--logo-yellow);
  border: var(--stroke) solid var(--ink);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: transform 0.18s var(--ease-out), box-shadow 0.18s var(--ease-out);
}
.sb__btn--white {
  background: var(--white);
}
.sb__btn[hidden] {
  display: none;
}
@media (hover: hover) {
  .sb__btn:hover {
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 var(--ink);
  }
}
.sb__btn:active {
  transform: translate(3px, 3px);
  box-shadow: 1px 1px 0 var(--ink);
}

/* the frame's result, over the middle of the table */
.sb__banner {
  position: absolute;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 20px 10px;
  background: var(--cream);
  border: var(--stroke) solid var(--ink);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  transform: translate(-50%, -50%);
  pointer-events: none;
  animation: sb-pop 0.35s var(--ease-spring);
  white-space: nowrap;
}
.sb__banner.is-you {
  background: var(--logo-yellow);
}
.sb__banner[hidden],
.sb__howto[hidden],
.sb__card[hidden] {
  display: none;
}
.sb__banner-frame {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.8125rem;
  color: var(--ink-soft);
}
.sb__banner-text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.4rem;
  line-height: 1.1;
  text-align: center;
}

@keyframes sb-pop {
  from {
    transform: translate(-50%, -50%) scale(0.7);
    opacity: 0;
  }
  to {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
}

.sb__howto {
  position: absolute;
  z-index: 5;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(380px, calc(100% - 32px));
  max-height: calc(100% - 140px);
  overflow: auto;
  padding: 18px 20px 20px;
  background: var(--cream);
  border: var(--stroke) solid var(--ink);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow);
}
.sb__howto h2 {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
}
.sb__howto p {
  margin: 0 0 10px;
  font-size: 0.9375rem;
  line-height: 1.45;
}
.sb__howto .sb__btn {
  margin-top: 4px;
}

/* the end of a match: along the bottom, above the engine's caption */
.sb__card {
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: 96px;
  width: min(420px, calc(100% - 24px));
  padding: 14px 16px 16px;
  text-align: center;
  background: var(--cream);
  border: var(--stroke) solid var(--ink);
  border-radius: 20px;
  box-shadow: 6px 6px 0 var(--ink);
  transform: translateX(-50%);
  animation: sb-card 0.4s var(--ease-spring);
}
.sb__card.is-win {
  background: #fff6c4;
}
@keyframes sb-card {
  from {
    transform: translate(-50%, 40px);
    opacity: 0;
  }
  to {
    transform: translate(-50%, 0);
    opacity: 1;
  }
}
.sb__card-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 1.1;
}
.sb__card-text {
  margin: 4px 0 12px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.0625rem;
  color: var(--ink-soft);
}
.sb__card-btns {
  display: flex;
  gap: 10px;
}
.sb__card-btns .sb__again {
  flex: 1 1 auto;
}
.sb__card-btns .sb__done {
  flex: 0 0 auto;
}

.sb__live {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- Small screens ---------- */

@media (max-width: 420px) {
  .sb__board {
    gap: 5px;
    padding: 5px 9px 6px;
  }
  .sb__name {
    font-size: 0.875rem;
  }
  .sb__score {
    font-size: 1.375rem;
  }
  .sb__disc {
    width: 11px;
    height: 11px;
  }
  .sb__pegs i {
    width: 5px;
    height: 5px;
  }
  .sb__pegs i:nth-child(5n) {
    margin-right: 2px;
  }
  .sb__side--them .sb__pegs i:nth-child(5n) {
    margin-left: 2px;
  }
  .sb__turn {
    padding: 2px 10px 3px;
    font-size: 0.875rem;
  }
  .sb__card-title {
    font-size: 1.4rem;
  }
}
@media (max-width: 350px) {
  .sb__to {
    display: none;
  }
  .sb__discs {
    gap: 2px;
  }
  .sb__disc {
    width: 9px;
    height: 9px;
    border-width: 1.5px;
  }
}

/* a phone on its side: one slim row, so the table gets the height */
.sb.is-flat .sb__top {
  top: 62px;
  width: min(640px, calc(100% - 200px));
}
.sb.is-flat .sb__board {
  padding: 3px 10px;
}
.sb.is-flat .sb__side {
  flex-direction: row;
  align-items: center;
  gap: 8px;
}
.sb.is-flat .sb__side--them {
  flex-direction: row-reverse;
}
.sb.is-flat .sb__pegs,
.sb.is-flat .sb__to {
  display: none;
}
.sb.is-flat .sb__score {
  font-size: 1.2rem;
}
.sb.is-flat .sb__card {
  bottom: 12px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 4px 14px;
  text-align: left;
  width: min(560px, calc(100% - 24px));
}
.sb.is-flat .sb__card-text {
  margin: 0;
}
.sb.is-flat .sb__card-btns {
  grid-column: 2;
  grid-row: 1 / span 2;
}
.sb.is-flat .sb__howto {
  width: min(620px, calc(100% - 32px));
  max-height: calc(100% - 24px);
  padding: 14px 18px 16px;
}
.sb.is-flat .sb__howto p {
  margin-bottom: 8px;
  font-size: 0.875rem;
  line-height: 1.4;
}

/* reduced motion: nothing pops or slides in */
.sb.is-still .sb__banner,
.sb.is-still .sb__card,
.sb.is-still .sb__score.is-bump {
  animation: none;
}
.sb.is-still .sb__btn,
.sb.is-still .sb__disc {
  transition: none;
}
@media (prefers-reduced-motion: reduce) {
  .sb__banner,
  .sb__card,
  .sb__score.is-bump {
    animation: none;
  }
  .sb__btn,
  .sb__disc {
    transition: none;
  }
}