/* Bullseye Tavern overlay: in-play HUD, score popups, results actions and the
   cinematic grade (vignette, warm grain). Logical properties keep it RTL-correct. */

:root { --bt-brass: #e0a64a; --bt-panel: rgb(16 11 9 / .8); --bt-ink: #fff4e4; }

/* A fine warm film grain on medium and high (the vignette is part of the 3D frame: stage/Stage.js). */
body.has-grain #app::before { content: ""; position: fixed; inset: -10%; pointer-events: none; z-index: 2; opacity: .5;
  background-image: var(--bt-grain); animation: bt-grain 1s steps(6) infinite; }
@keyframes bt-grain { 0% { transform: translate(0, 0); } 33% { transform: translate(-3%, 2%); } 66% { transform: translate(2%, -3%); } 100% { transform: translate(-1%, 1%); } }
@media (prefers-reduced-motion: reduce) { body.has-grain #app::before { animation: none; } }
#overlay { z-index: 3; }
body.is-attract #overlay { display: none; }


/* Player cards along the top */
.bt-hud { position: absolute; inset: 0; z-index: 10; }
.bt-cards { position: absolute; top: 2.2vh; inset-inline: 0; margin: 0; padding: 0 2vw; list-style: none; display: flex; justify-content: center; gap: .7em; flex-wrap: wrap; }
.bt-card { position: relative; min-width: 7.2em; padding: .5em .9em .55em; border-radius: 14px; background: var(--bt-panel);
  border: 1px solid rgb(255 214 160 / .12); box-shadow: 0 12px 30px -16px rgb(0 0 0 / .9); text-align: center;
  transition: transform 260ms cubic-bezier(.34,1.56,.64,1), border-color 200ms ease, box-shadow 200ms ease, opacity 200ms ease; }
.bt-card::before { content: ""; position: absolute; inset-inline: 14px; top: 0; height: 3px; border-radius: 0 0 3px 3px; background: var(--pc); }
.bt-card__name { font-weight: 700; font-size: .95em; color: color-mix(in srgb, var(--pc) 40%, #fff); max-width: 9em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bt-card__value { font-size: 2em; font-weight: 800; line-height: 1.05; color: var(--bt-ink); font-variant-numeric: tabular-nums; }
.bt-card__legs { min-height: .9em; font-size: .7em; letter-spacing: .2em; color: #ffd27a; }
.bt-card__tag { position: absolute; top: -.7em; inset-inline-end: -.4em; padding: .1em .5em; border-radius: 999px; font-size: .65em; font-weight: 700; background: #3a2a20; color: #ffd8a8; }
.bt-card.is-current { transform: translateY(.25em) scale(1.08); border-color: var(--pc);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--pc) 35%, transparent), 0 14px 40px -12px var(--pc); }
.bt-card.is-away { opacity: .45; }
.bt-card.is-pending { opacity: .7; border-style: dashed; }

/* Current turn panel */
.bt-turn { position: absolute; left: 2.2vw; bottom: 3.2vh; min-width: 17em; padding: .8em 1.1em 1em; border-radius: 18px; background: var(--bt-panel);
  border: 1px solid color-mix(in srgb, var(--pc, #ffc24b) 40%, transparent); box-shadow: 0 20px 50px -20px rgb(0 0 0 / .9); }
.bt-turn__name { font-weight: 800; font-size: 1.15em; color: color-mix(in srgb, var(--pc, #ffc24b) 35%, #fff); }
.bt-turn__row { display: flex; align-items: center; gap: 1em; margin-top: .45em; }
.bt-slots { display: flex; gap: .45em; margin: 0; padding: 0; list-style: none; }
.bt-slot { width: 3.6em; height: 2.3em; display: grid; place-items: center; border-radius: 10px; font-weight: 800; font-size: 1em;
  border: 2px dashed rgb(255 214 160 / .25); color: var(--bt-ink); font-variant-numeric: tabular-nums; }
.bt-slot[class*="is-"] { border-style: solid; background: rgb(255 255 255 / .06); animation: bt-pop-in 320ms cubic-bezier(.34,1.56,.64,1); }
.bt-slot.is-treble, .bt-slot.is-double { border-color: #ff6a6a; color: #ffd4d4; background: rgb(195 37 45 / .25); }
.bt-slot.is-bull { border-color: #ffc24b; color: #ffe7b0; background: rgb(255 194 75 / .2); }
.bt-slot.is-miss { border-color: rgb(255 255 255 / .2); color: rgb(255 255 255 / .5); }
.bt-turn__total { font-size: 2.4em; font-weight: 800; min-width: 2.2em; text-align: center; color: #ffe6bd; font-variant-numeric: tabular-nums; }
.bt-turn__hint { margin-top: .55em; display: flex; flex-wrap: wrap; align-items: center; gap: .35em; }
.bt-turn__hintlabel { color: rgb(255 240 220 / .65); font-size: .85em; font-weight: 600; margin-inline-end: .2em; }
.bt-chip { padding: .15em .6em; border-radius: 8px; background: rgb(46 242 194 / .14); border: 1px solid rgb(46 242 194 / .45); color: #c9fff0; font-weight: 800; font-size: .95em; }
@keyframes bt-pop-in { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }

/* Release coaching and the keyboard power meter */
.bt-feedback { position: absolute; inset-inline: 0; bottom: 15vh; margin: 0 auto; width: max-content; max-width: 80vw; padding: .45em 1.1em; border-radius: 999px;
  background: var(--bt-panel); font-weight: 700; opacity: 0; transform: translateY(10px); transition: opacity 220ms ease, transform 220ms ease; }
.bt-feedback.is-in { opacity: 1; transform: none; }
.bt-feedback.is-good { color: #9ff7dd; border: 1px solid rgb(46 242 194 / .5); }
.bt-feedback.is-warn { color: #ffe0a0; border: 1px solid rgb(255 194 75 / .55); }
.bt-meter { position: absolute; inset-inline: 0; bottom: 9vh; margin: 0 auto; width: 26em; height: 1.1em; border-radius: 999px; background: rgb(0 0 0 / .55);
  border: 1px solid rgb(255 214 160 / .3); overflow: hidden; }
.bt-meter__band { position: absolute; top: 0; bottom: 0; inset-inline-start: 45%; width: 25%; background: rgb(46 242 194 / .28); }
.bt-meter__fill { position: absolute; inset: 0; background: linear-gradient(90deg, #ffb347, #ff6a4d); opacity: .85; transform-origin: left center; transform: scaleX(0); }
[dir="rtl"] .bt-meter__fill { transform-origin: right center; }
.bt-meter__label { position: absolute; inset: 0; display: grid; place-items: center; font-size: .7em; font-weight: 800; letter-spacing: .1em; color: #fff; text-shadow: 0 1px 2px #000; }

/* Score popups at the impact point */
.bt-popups { position: absolute; inset: 0; z-index: 12; }
.bt-pop { position: absolute; left: 0; top: 0; display: grid; justify-items: center; opacity: 0; will-change: transform, opacity; }
.bt-pop__main, .bt-pop__sub { transform: translate(-50%, -150%); }
.bt-pop__main { font-size: 2.3em; font-weight: 800; color: #fff; text-shadow: 0 0 14px rgb(0 0 0 / .9), 0 2px 0 #000; white-space: nowrap; }
.bt-pop__sub { font-size: 1.2em; font-weight: 800; color: #ffe6bd; text-shadow: 0 2px 6px #000; white-space: nowrap; }
.bt-pop.is-treble .bt-pop__main, .bt-pop.is-double .bt-pop__main { color: #ff8a8a; }
.bt-pop.is-bull .bt-pop__main { color: #ffd36b; font-size: 2.8em; }
.bt-pop.is-miss .bt-pop__main { color: rgb(255 255 255 / .6); }

/* During play the kit's sound chip moves to the bottom centre (the corners hold the turn panel and the dart). */
body.bt-in-play .gk-sound { inset-inline: 0; margin-inline: auto; inline-size: max-content; inset-block-end: 2vh; }

/* Results actions */
.bt-results { position: absolute; inset-inline-start: 4vw; top: 50%; transform: translateY(-50%); z-index: 20; }
.bt-results__actions { display: grid; gap: .7em; min-width: 16em; }
.bt-results .gk-menu__item { pointer-events: auto; }