/* Bolos — the big screen (.bw) and the phone's lane (.bwp).
   A neon alley: the stage's navy and violet, the pins' white, and a hot pink
   for the marks on the score sheet. */

.bw, .bwp {
  --p-color-bowling-neon: #38e8ff;
  --p-color-bowling-mark: #ff4fd8;
  --p-color-bowling-gold: #ffd23f;
  --p-color-bowling-panel: rgba(14, 12, 34, 0.84);
  --p-color-bowling-wood: #e2ae68;
}

/* ================================================================ big screen */

/* --uw / --uh: 1% of the width / height of the largest 16:9 picture that fits
   the viewport, so a screen that is not 16:9 (the /demo embed) keeps a TV's
   proportions. */
.bw {
  --uw: min(1vw, 1.778vh); --uh: min(1vh, 0.5625vw);
  flex: 1; position: relative; min-height: 0; overflow: hidden;
}
.bw__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.bw__shade {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(8, 8, 24, 0.7) 0%, rgba(8, 8, 24, 0) 26%);
}
.bw[data-phase="presentation"] .bw__shade, .bw[data-phase="intro"] .bw__shade, .bw[data-phase="results"] .bw__shade { background: rgba(8, 8, 24, 0.55); }

.bw__left {
  position: absolute; top: calc(2.4 * var(--uh)); left: calc(2.2 * var(--uw));
  display: flex; align-items: flex-start; gap: calc(1.6 * var(--uw));
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.85);
}
.bw__turn { display: flex; flex-direction: column; gap: calc(1 * var(--uh)); min-width: calc(30 * var(--uw)); }
.bw__title { font-size: calc(3.4 * var(--uw)); letter-spacing: 0.02em; }
.bw__who { display: flex; align-items: center; gap: calc(1 * var(--uw)); font-size: calc(1.9 * var(--uw)); }
.bw__who .team-chip { font-size: calc(1.9 * var(--uw)); box-shadow: 0 0.4vh 1.4vh rgba(0, 0, 0, 0.5); }
.bw__label { color: var(--p-color-text-secondary); font-weight: var(--p-font-weight-bold); text-transform: uppercase; letter-spacing: 0.08em; font-size: calc(1.2 * var(--uw)); }
.bw__ball {
  font-family: var(--p-font-family-display); color: var(--p-color-bowling-gold);
  font-size: calc(1.9 * var(--uw)); white-space: nowrap;
}
.bw__ball small { font-family: var(--p-font-family-body); font-size: 0.6em; color: var(--p-color-text-secondary); }
.bw__timebar { width: calc(30 * var(--uw)); height: calc(1.1 * var(--uh)); }
.bw__timebar .mg__timebar-fill { background: linear-gradient(90deg, var(--p-color-bowling-neon), var(--p-color-bowling-mark)); }
.bw__hint { font-size: calc(1.45 * var(--uw)); color: var(--p-color-text); }

/* the rack: ten dots, the back row on top as the bowler sees it */
.bw-rack {
  display: flex; flex-direction: column; align-items: center; gap: calc(0.5 * var(--uh));
  padding: calc(1.2 * var(--uh)) calc(1 * var(--uw));
  background: var(--p-color-bowling-panel); border-radius: var(--p-border-radius-300);
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.bw-rack[hidden] { display: none; }
.bw-rack__row { display: flex; gap: calc(0.7 * var(--uw)); }
.bw-rack__pin {
  width: calc(1.5 * var(--uw)); height: calc(1.5 * var(--uw)); border-radius: 50%;
  background: #fff; box-shadow: 0 0 calc(0.8 * var(--uw)) rgba(255, 255, 255, 0.7), inset 0 calc(-0.3 * var(--uw)) 0 #d1202f;
  transition: background 0.2s, box-shadow 0.2s, transform 0.2s;
}
.bw-rack__pin.is-down { background: rgba(255, 255, 255, 0.1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22); transform: scale(0.72); }

/* the score sheet */
.bw__board {
  position: absolute; top: calc(2.4 * var(--uh)); right: calc(2.2 * var(--uw));
  display: flex; flex-direction: column; gap: calc(0.6 * var(--uh));
  padding: calc(1.2 * var(--uh)) calc(1 * var(--uw));
  background: var(--p-color-bowling-panel); border-radius: var(--p-border-radius-300);
  border: 1px solid rgba(255, 255, 255, 0.12);
  font-size: calc(1.45 * var(--uw));
}
.bw__board[hidden] { display: none; }
.bw-row {
  display: grid; grid-template-columns: minmax(0, calc(17 * var(--uw))) repeat(2, calc(2.8 * var(--uw))) calc(4.6 * var(--uw));
  align-items: center; gap: calc(0.5 * var(--uw));
  padding: calc(0.4 * var(--uh)) calc(0.6 * var(--uw)); border-radius: var(--p-border-radius-200);
  border-left: calc(0.5 * var(--uw)) solid var(--team-color);
  opacity: 0.72;
}
.bw-row.is-on { opacity: 1; background: rgba(255, 255, 255, 0.1); box-shadow: 0 0 0 1px var(--p-color-bowling-neon); }
.bw-row.is-done { opacity: 1; }
.bw-row__team { display: flex; align-items: center; gap: calc(0.6 * var(--uw)); min-width: 0; font-weight: var(--p-font-weight-bold); }
.bw-row__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bw-row__box {
  height: calc(2.8 * var(--uw)); display: grid; place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.3); border-radius: var(--p-border-radius-100);
  font-family: var(--p-font-family-display); font-size: calc(1.6 * var(--uw)); background: rgba(0, 0, 0, 0.28);
}
.bw-row__box.is-mark { color: #12141f; background: var(--p-color-bowling-mark); border-color: transparent; }
.bw-row__pts { text-align: right; font-family: var(--p-font-family-display); color: var(--p-color-bowling-gold); }

/* what the ball did */
.bw__flash {
  position: absolute; left: 50%; top: 31%; transform: translate(-50%, -50%);
  text-align: center; pointer-events: none;
  animation: bw-flash 2.6s var(--p-motion-ease) forwards;
}
.bw__flash[hidden] { display: none; }
.bw.is-paused .bw__flash, .bw.is-paused .bw-card, .bw.is-paused .bw-frame, .bw.is-paused .bw-results__row { animation-play-state: paused; }
.bw__flash-big {
  font-size: calc(10 * var(--uw)); line-height: 1; white-space: nowrap; color: #fff;
  -webkit-text-stroke: calc(0.25 * var(--uw)) #12141f; paint-order: stroke fill;
  text-shadow: 0 calc(0.5 * var(--uw)) 0 #12141f, 0 0 calc(4 * var(--uw)) var(--p-color-bowling-neon);
}
.bw__flash[data-kind="strike"] .bw__flash-big { color: var(--p-color-bowling-gold); text-shadow: 0 calc(0.5 * var(--uw)) 0 #12141f, 0 0 calc(5 * var(--uw)) var(--p-color-bowling-mark); }
.bw__flash[data-kind="spare"] .bw__flash-big { color: var(--p-color-bowling-neon); font-size: calc(8 * var(--uw)); }
.bw__flash[data-kind="gutter"] .bw__flash-big { color: #ff8f8f; text-shadow: 0 calc(0.5 * var(--uw)) 0 #12141f; }
.bw__flash[data-kind="meh"] .bw__flash-big, .bw__flash[data-kind="good"] .bw__flash-big { font-size: calc(7.5 * var(--uw)); }
.bw__flash-sub {
  display: inline-block; margin-top: calc(1.4 * var(--uh)); padding: calc(0.6 * var(--uh)) calc(1.6 * var(--uw));
  font-size: calc(2 * var(--uw)); font-weight: var(--p-font-weight-bold);
  background: var(--p-color-bowling-panel); border-radius: var(--p-border-radius-full);
}
@keyframes bw-flash {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.4) rotate(-6deg); }
  9% { opacity: 1; transform: translate(-50%, -50%) scale(1.12) rotate(2deg); }
  15% { transform: translate(-50%, -50%) scale(1) rotate(0); }
  86% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -56%) scale(1); }
}

/* cards: the rules, a team's frame, the results */
.bw__center {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  padding: calc(14 * var(--uh)) calc(5 * var(--uw)) calc(6 * var(--uh)); pointer-events: none;
}
.bw[data-phase="frame"] .bw__center { align-items: flex-end; }
.bw-card {
  display: flex; flex-direction: column; gap: calc(2.2 * var(--uh)); max-width: calc(78 * var(--uw));
  padding: calc(3.4 * var(--uh)) calc(3 * var(--uw));
  background: var(--p-color-bowling-panel); border-radius: var(--p-border-radius-400);
  border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: 0 2vh 6vh rgba(0, 0, 0, 0.5);
  animation: bw-rise 0.5s var(--p-motion-ease-bounce) backwards;
}
.bw-card__lead { font-size: calc(2.1 * var(--uw)); line-height: 1.35; text-align: center; }
.bw-card__lead .team-chip { font-size: calc(1.6 * var(--uw)); vertical-align: middle; }
.bw-rules { display: grid; grid-template-columns: auto 1fr; gap: calc(1.4 * var(--uh)) calc(1.6 * var(--uw)); align-items: center; font-size: calc(1.9 * var(--uw)); }
.bw-rules__mark {
  width: calc(4.4 * var(--uw)); height: calc(4.4 * var(--uw)); display: grid; place-items: center;
  font-family: var(--p-font-family-display); font-size: calc(2.6 * var(--uw));
  color: #12141f; background: var(--p-color-bowling-mark); border-radius: var(--p-border-radius-200);
}
.bw-rules__mark:last-of-type { background: rgba(0, 0, 0, 0.3); color: #fff; border: 1px solid rgba(255, 255, 255, 0.3); }
.bw-frame {
  display: flex; align-items: center; gap: calc(2 * var(--uw));
  padding: calc(1.6 * var(--uh)) calc(2.6 * var(--uw));
  background: var(--p-color-bowling-panel); border-radius: var(--p-border-radius-full);
  border: 1px solid rgba(255, 255, 255, 0.14);
  animation: bw-rise 0.45s var(--p-motion-ease-bounce) backwards;
}
.bw-frame .team-chip { font-size: calc(2 * var(--uw)); }
.bw-frame__mark { font-size: calc(3.2 * var(--uw)); }
.bw-frame__pts { font-size: calc(3.2 * var(--uw)); color: var(--p-color-bowling-gold); }
.bw-results { display: flex; flex-direction: column; gap: calc(1.1 * var(--uh)); width: min(100%, calc(74 * var(--uw))); }
.bw-results__row {
  display: grid; grid-template-columns: calc(5 * var(--uw)) minmax(0, 1fr) repeat(2, calc(3.6 * var(--uw))) calc(15 * var(--uw)) calc(13 * var(--uw));
  align-items: center; gap: calc(1 * var(--uw));
  padding: calc(1.2 * var(--uh)) calc(1.6 * var(--uw));
  background: var(--p-color-bowling-panel); border-radius: var(--p-border-radius-300);
  border-left: calc(0.8 * var(--uw)) solid var(--team-color);
  font-size: calc(2 * var(--uw));
  animation: bw-rise 0.5s var(--p-motion-ease-bounce) backwards;
}
.bw-results__rank { font-size: calc(2.6 * var(--uw)); color: var(--p-color-bowling-gold); }
.bw-results__team { display: flex; align-items: center; gap: calc(0.8 * var(--uw)); min-width: 0; font-weight: var(--p-font-weight-bold); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.bw-results__row .bw-row__box { height: calc(3.6 * var(--uw)); font-size: calc(2.1 * var(--uw)); }
.bw-results__what { color: var(--p-color-text-secondary); white-space: nowrap; }
.bw-results__pts { text-align: right; font-size: calc(2.6 * var(--uw)); white-space: nowrap; }
@keyframes bw-rise { from { opacity: 0; transform: translateY(4vh) scale(0.94); } }

/* ================================================================ phone */

.bwp { flex: 1; display: flex; flex-direction: column; gap: var(--p-space-300); min-height: 0; }
.bwp__head { display: flex; align-items: center; justify-content: space-between; gap: var(--p-space-300); }
.bwp__role { font-family: var(--p-font-family-display); font-size: 1.15rem; line-height: 1.15; }
.bwp__ball {
  flex-shrink: 0; padding: 2px 12px; border-radius: var(--p-border-radius-full);
  background: var(--p-color-bowling-mark); color: #12141f; font-weight: var(--p-font-weight-bold); white-space: nowrap;
}
/* the lane is the panel: it takes all the phone has left under the status line */
.bwp__lane-wrap { position: relative; flex: 1 1 0; min-height: 130px; display: flex; justify-content: center; }
.bwp__lane {
  width: 100%; height: 100%; display: block; border-radius: var(--p-border-radius-400);
  touch-action: none; user-select: none; -webkit-user-select: none; cursor: grab;
  background: #15132c;
}
.bwp__lane.is-locked { cursor: default; }
.bwp__hint { text-align: center; min-height: 1.3em; color: var(--p-color-text-secondary); }
.bwp__hint:empty { display: none; }
.bwp__hint strong { color: var(--p-color-text); }

@media (prefers-reduced-motion: reduce) {
  .bw__flash { animation-duration: 2.6s; animation-name: bw-flash-plain; }
  .bw-card, .bw-frame, .bw-results__row { animation: none; }
  @keyframes bw-flash-plain { 0%, 86% { opacity: 1; } 100% { opacity: 0; } }
}