/* =====================================================================
   GoDartsPro : Big Singles (app 100)                             v2.0.0
   /wp-content/themes/dart/assets/css/gdp-game-big-singles.css

   Loaded AFTER gdp-game.css. Everything shared lives there: tokens, the
   photo band, cards, chips, figures, the stats tab and panel, the flash,
   the full screen button. This file is only what Big Singles arranges
   differently. Colours as rgba are the palette tokens written out:
     --gdp-win    #3ddc84   rgba(61,220,132,x)
     --gdp-accent #ffa400   rgba(255,164,0,x)
     --gdp-bust   #ff5a52   rgba(255,90,82,x)
     --gdp-go     #2c8a5a   rgba(44,138,90,x)
   Gold for three in the bed and medals is the A1 gold: #ffd451.
   ===================================================================== */

.gdp-bs-screen{position:relative;}
.gdp .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0;}


/* =====================================================================
   THE BOARD RING
   The twenty large singles where they sit on a board. The other beds
   are drawn faint, for orientation only.
   ===================================================================== */
.gdp-bs-board{display:block;width:100%;height:auto;overflow:visible;}
.gdp-bs-b-face{fill:#0c0c0c;stroke:rgba(255,255,255,.1);stroke-width:1;}
.gdp-bs-b-small{fill:#171717;}
.gdp-bs-b-small.is-alt{fill:#121212;}
.gdp-bs-b-tre,.gdp-bs-b-dbl{fill:rgba(255,255,255,.09);}
.gdp-bs-b-tre.is-alt,.gdp-bs-b-dbl.is-alt{fill:rgba(255,255,255,.05);}
.gdp-bs-b-bull{fill:#111;stroke:rgba(255,255,255,.08);}
.gdp-bs-seg{fill:#2a2a2a;stroke:#0a0a0a;stroke-width:1.2;transition:fill .35s ease,opacity .35s ease;}
.gdp-bs-seg.is-alt{fill:#222;}
.gdp-bs-seg.is-cleared{fill:rgba(61,220,132,.52);}
.gdp-bs-seg.is-cleared.is-alt{fill:rgba(61,220,132,.42);}
.gdp-bs-seg.is-lost{fill:rgba(255,90,82,.16);stroke:rgba(255,90,82,.55);stroke-dasharray:4 3;}
/* The bed in play: a strong amber pulse with a white edge, so it reads
   at once among the cleared green beds. */
.gdp-bs-seg.is-current{
  fill:var(--gdp-accent);stroke:#fff;stroke-width:2;
  filter:drop-shadow(0 0 8px rgba(255,164,0,.8));animation:bsSeg 1.1s ease-in-out infinite;
}
@keyframes bsSeg{
  0%,100%{fill:#ffa400;stroke-width:1.5;stroke-opacity:.55;filter:drop-shadow(0 0 6px rgba(255,164,0,.6));}
  50%{fill:#ffe08a;stroke-width:4.5;stroke-opacity:1;filter:drop-shadow(0 0 22px rgba(255,190,40,1)) drop-shadow(0 0 40px rgba(255,164,0,.7));}
}
.gdp-bs-b-num.is-current{animation:bsSegNum 1.1s ease-in-out infinite;}
@keyframes bsSegNum{50%{fill:#ffe08a;}}
.gdp-bs-tile.is-current{animation:bsTile 1.1s ease-in-out infinite;}
@keyframes bsTile{50%{box-shadow:0 8px 24px rgba(0,0,0,.45),0 0 0 2px rgba(255,164,0,.9),0 0 18px rgba(255,164,0,.55);}}
.gdp-bs-b-num{
  fill:rgba(255,255,255,.42);font-family:var(--gdp-font);font-size:17px;font-weight:500;
  text-anchor:middle;dominant-baseline:central;transition:fill .3s;
}
.gdp-bs-b-num.is-cleared{fill:var(--gdp-win);}
.gdp-bs-b-num.is-current{fill:var(--gdp-accent);font-size:22px;font-weight:600;}

/* The hero ring: the small singles and bull become a clean disc for the
   number. */
.gdp-bs-board.is-hero .gdp-bs-b-small,
.gdp-bs-board.is-hero .gdp-bs-b-bull{fill:#0e0e0e;stroke:none;}
/* The setup board: the large singles lit, as on the old board picture. */
.gdp-bs-board.is-intro .gdp-bs-seg.is-cleared{fill:rgba(255,164,0,.82);}
.gdp-bs-board.is-intro .gdp-bs-seg.is-cleared.is-alt{fill:rgba(255,164,0,.66);}
.gdp-bs-board.is-intro .gdp-bs-b-num.is-cleared{fill:rgba(255,255,255,.72);}
.gdp-bs-board.is-mini .gdp-bs-seg.is-current{animation:none;filter:none;}


/* =====================================================================
   SETUP
   ===================================================================== */

.gdp-bs-title{
  font-size:clamp(56px,9vw,92px);line-height:.9;letter-spacing:-.01em;margin:6px 0 10px;
  text-shadow:0 4px 26px rgba(0,0,0,.7);text-transform:uppercase;
}
.gdp-bs-title span{color:var(--gdp-accent);}
.gdp-bs-lede{
  font-family:var(--gdp-font-note);font-weight:300;font-size:15px;line-height:1.55;
  color:#d7d7d7;margin:0 0 18px;max-width:46ch;text-shadow:0 1px 6px rgba(0,0,0,.75);
}
.gdp-bs-chal{display:flex;align-items:center;gap:8px;margin:-6px 0 14px;font-family:var(--gdp-font);font-size:16px;letter-spacing:.04em;color:#ffd451;}

.gdp-bs-card{display:flex;flex-direction:column;gap:16px;}
.gdp-bs-field{display:flex;flex-direction:column;gap:8px;}
.gdp-bs-row2{display:grid;grid-template-columns:1fr;gap:14px;}
.gdp-bs-row2 > div{display:flex;flex-direction:column;gap:8px;min-width:0;}
.gdp-bs-row2 .gdp-chip:disabled{opacity:.4;cursor:not-allowed;}

.gdp-bs-levels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;}
.gdp-bs-level{
  position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:3px;
  padding:12px 14px;border-radius:10px;cursor:pointer;text-align:left;
  background:var(--gdp-panel2);border:1px solid var(--gdp-line);color:var(--gdp-ink);font-family:var(--gdp-font);
  transition:border-color .15s,background .15s;
}
.gdp-bs-level b{font-size:17px;font-weight:500;letter-spacing:.02em;}
.gdp-bs-level span{font-family:var(--gdp-font-note);font-size:12px;color:var(--gdp-muted);}
.gdp-bs-level:hover{border-color:#4a4a4a;}
.gdp-bs-level.is-on{background:rgba(255,164,0,.12);border-color:var(--gdp-accent);}
.gdp-bs-level.is-on b{color:var(--gdp-accent);}
.gdp-bs-level.is-locked{opacity:.4;cursor:not-allowed;}
.gdp-bs-level:focus-visible{outline:2px solid var(--gdp-win);outline-offset:2px;}
.gdp-bs-tag{
  position:absolute;top:-8px;right:8px;padding:1px 8px;border-radius:999px;
  font-style:normal;font-family:var(--gdp-font);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:#04230f;background:var(--gdp-win);
}
.gdp-bs-levelrule{margin:0;min-height:18px;font-family:var(--gdp-font-note);font-size:12.5px;line-height:1.45;color:#cfcfcf;}
.gdp-bs-timednote{margin:-8px 0 0;min-height:0;font-family:var(--gdp-font-note);font-size:12px;color:var(--gdp-muted);}
.gdp-bs-timednote:empty{display:none;}
.gdp-bs-lockmsg{display:flex;align-items:center;gap:8px;margin:-6px 0 0;font-family:var(--gdp-font-note);font-size:12.5px;color:var(--gdp-accent);}

/* includeDartsSetup() prints a Bootstrap select and its own heading. */
.gdp-bs-darts{width:100%;}
.gdp-bs-darts select,.gdp-bs-darts .form-control{
  width:100%;max-width:340px;height:40px;font-family:var(--gdp-font);font-size:14px;
  background:var(--gdp-panel2);border:1px solid var(--gdp-line);color:var(--gdp-ink);
  border-radius:8px;box-shadow:none;padding:6px 10px;
}
.gdp-bs-darts select:focus,.gdp-bs-darts .form-control:focus{border-color:var(--gdp-accent);outline:none;box-shadow:none;}
.gdp-bs-darts .app-header-m,.gdp-bs-darts .app-header-s,.gdp-bs-darts h3,.gdp-bs-darts h4,.gdp-bs-darts label{
  font-family:var(--gdp-font-note);font-size:13px;font-weight:400;letter-spacing:0;text-transform:none;color:var(--gdp-muted);margin:0 0 6px;
}
.gdp-bs-card .gdp-switch{font-family:var(--gdp-font-note);font-size:13.5px;}
.gdp-bs-state{
  margin-left:6px;padding:1px 8px;border-radius:999px;
  font-family:var(--gdp-font);font-size:11px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gdp-accent-ink);background:var(--gdp-accent);
}
.gdp-bs-state.is-off{color:var(--gdp-muted);background:rgba(255,255,255,.08);}

/* What this player has done on this level. */
.gdp-bs-best{margin:14px 0;}
.gdp-bs-figs{grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:10px;}
.gdp-bs-figs.is-two{grid-template-columns:repeat(2,minmax(0,1fr));}
.gdp-bs-figs .gdp-figure{background:rgba(18,18,18,.88);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);position:relative;}
.gdp-bs-figs .gdp-figure.is-best b{color:var(--gdp-accent);}
.gdp-bs-figs .gdp-bs-medal.is-fig{position:absolute;top:6px;left:8px;width:16px;height:20px;}
.gdp-bs-goal{
  display:flex;align-items:center;gap:8px;margin:0 0 10px;
  font-family:var(--gdp-font);font-size:15px;letter-spacing:.03em;color:#e6e6e6;text-shadow:0 1px 6px rgba(0,0,0,.75);
}
.gdp-bs-goal .fa-solid{color:var(--gdp-accent);}
.gdp-bs-first{
  font-family:var(--gdp-font-note);font-size:13.5px;line-height:1.5;color:#cfcfcf;margin:0 0 10px;
  text-shadow:0 1px 6px rgba(0,0,0,.75);
}

/* The four medals of the level. */
.gdp-bs-ladder-m{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;}
.gdp-bs-ladder-m li{
  display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;column-gap:8px;align-items:center;
  padding:7px 9px;border-radius:9px;background:rgba(18,18,18,.82);border:1px solid rgba(255,255,255,.07);opacity:.62;
}
.gdp-bs-ladder-m li .gdp-bs-medal{grid-row:1 / 3;width:20px;height:24px;}
.gdp-bs-ladder-m b{font-family:var(--gdp-font);font-size:13px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;line-height:1.1;}
.gdp-bs-ladder-m span{font-family:var(--gdp-font-note);font-size:11px;color:var(--gdp-muted);}
.gdp-bs-ladder-m li.is-got{opacity:1;border-color:rgba(255,212,81,.45);background:rgba(40,30,8,.8);}

.gdp-bs-start{display:flex;gap:10px;align-items:stretch;flex-wrap:wrap;}
.gdp-bs-start .gdp-btn-primary{
  flex:1 1 220px;width:auto;min-height:56px;background:var(--gdp-go);border-color:var(--gdp-go);color:#fff;
  font-size:19px;letter-spacing:.06em;text-transform:uppercase;
}
.gdp-bs-start .gdp-btn-primary:hover{background:var(--gdp-go-hi);}
.gdp-bs-sound{min-height:56px;}
.gdp-bs-start .gdp-btn:focus-visible{outline:2px solid #fff;outline-offset:2px;}

/* The game in progress, above the options. */
.gdp-bs-resume{
  display:grid;grid-template-columns:62px minmax(0,1fr);gap:4px 14px;align-items:center;margin:0 0 14px;padding:12px 14px;border-radius:12px;
  background:linear-gradient(100deg,rgba(255,164,0,.16),rgba(18,18,18,.92) 70%);border:1px solid rgba(255,164,0,.55);
  animation:bsIn .35s ease-out;
}
.gdp-bs-resume-i{grid-row:1 / 3;width:62px;}
.gdp-bs-resume-t{display:flex;flex-direction:column;min-width:0;}
.gdp-bs-resume-t b{font-family:var(--gdp-font);font-size:17px;font-weight:500;letter-spacing:.04em;}
.gdp-bs-resume-t span{font-family:var(--gdp-font-note);font-size:12.5px;color:#d8d8d8;}
.gdp-bs-resume-a{display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
.gdp-bs-resume .gdp-btn-primary{width:auto;padding:9px 22px;background:var(--gdp-go);border-color:var(--gdp-go);color:#fff;text-transform:uppercase;letter-spacing:.06em;}
@keyframes bsIn{from{opacity:0;transform:translateY(5px);}to{opacity:1;transform:none;}}

.gdp-bs-linkbtn{
  padding:4px 2px;background:none;border:0;cursor:pointer;
  font-family:var(--gdp-font-note);font-size:12.5px;color:var(--gdp-muted);
  text-decoration:underline;text-underline-offset:3px;
}
.gdp-bs-linkbtn:hover{color:var(--gdp-ink);}
.gdp-bs-linkbtn.is-confirm{color:#ffb0aa;text-decoration:none;font-weight:600;}
.gdp-bs-linkbtn:focus-visible{outline:2px solid var(--gdp-accent);outline-offset:2px;border-radius:3px;}

/* Rules. */
.gdp-bs-introboard{width:min(250px,70%);margin:0 auto 18px;filter:drop-shadow(0 10px 30px rgba(0,0,0,.6));}
.gdp-bs-rulelist{margin:0 0 12px;padding-left:20px;}
.gdp-bs-rulelist li{font-family:var(--gdp-font-note);font-weight:300;font-size:13.5px;line-height:1.6;color:#c9c9c9;margin-bottom:6px;}
.gdp-bs-rulelist li::marker{color:var(--gdp-accent);font-family:var(--gdp-font);}
.gdp-bs-levelrules{display:flex;flex-direction:column;gap:6px;margin-bottom:16px;}
.gdp-bs-levelrules div{display:grid;grid-template-columns:100px minmax(0,1fr);gap:10px;align-items:baseline;}
.gdp-bs-levelrules b{font-family:var(--gdp-font);font-size:14px;font-weight:500;color:var(--gdp-accent);letter-spacing:.03em;}
.gdp-bs-levelrules span{font-family:var(--gdp-font-note);font-size:12.5px;line-height:1.5;color:#c9c9c9;}
.gdp-bs-intro p{font-family:var(--gdp-font-note);font-size:13px;line-height:1.55;color:#c9c9c9;}


/* =====================================================================
   PLAY
   ===================================================================== */

.gdp-bs-screen.js-bs-play .gdp-bar{margin-bottom:6px;}
.gdp-bs-stat{display:inline-flex;align-items:baseline;gap:7px;margin-right:10px;}
.gdp-bs-stat b{font-family:var(--gdp-font);font-size:22px;font-weight:500;color:var(--gdp-ink);font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;
  display:inline-block;text-align:left;}
/* Each figure keeps the width of its longest value, so nothing in the
   bar moves as the clock ticks or the counts grow: 20/20, 999, 59:59. */
.gdp-bs-stat b.js-bs-prog{min-width:2.55em;}
.gdp-bs-stat b.js-bs-darts{min-width:1.7em;}
.gdp-bs-stat b.js-bs-time{min-width:2.55em;}
.gdp-bs-stat b.is-low{color:var(--gdp-accent);animation:bsBlink 1s ease-in-out infinite;}
.gdp-bs-pausebtn{
  width:40px;height:40px;border-radius:50%;
  border:1px solid rgba(255,255,255,.24);display:inline-flex;align-items:center;justify-content:center;
}
.gdp-bs-pausebtn[aria-pressed="true"]{color:var(--gdp-accent);border-color:var(--gdp-accent);}
.gdp-bs-pausebtn:focus-visible{outline:2px solid var(--gdp-accent);outline-offset:2px;}
/* Not saved yet: a small amber dot on the darts count. */
.gdp-bs-screen.is-unsaved .js-bs-darts::after{
  content:"";display:inline-block;width:6px;height:6px;margin-left:5px;vertical-align:super;
  border-radius:50%;background:var(--gdp-accent);animation:bsBlink 1s ease-in-out infinite;
}
@keyframes bsBlink{50%{opacity:.25;}}

.gdp-bs-stage{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,360px);
  gap:24px;align-items:start;
}
.gdp-bs-hero{text-align:center;min-width:0;}

/* What has been done on the left, what comes next on the right, the
   ring in the middle. The two sides are the same width, so the ring
   stays on the centre line. */
.gdp-bs-herorow{
  display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;column-gap:clamp(10px,2vw,26px);
}
.gdp-bs-side{display:flex;flex-direction:column;min-width:0;font-family:var(--gdp-font);}
.gdp-bs-side.is-left{justify-self:end;align-items:flex-end;text-align:right;}
.gdp-bs-side.is-right{justify-self:start;align-items:flex-start;text-align:left;}
.gdp-bs-side b{font-size:52px;font-weight:600;line-height:1;font-variant-numeric:tabular-nums;color:#fff;}
.gdp-bs-side .gdp-bs-side-sm{font-size:26px;font-weight:500;margin-top:14px;color:#d8d8d8;}
.gdp-bs-side span{font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--gdp-muted);margin-top:4px;}
.gdp-bs-side.is-left b.js-bs-cleared{color:var(--gdp-win);text-shadow:0 0 22px rgba(61,220,132,.35);}
.gdp-bs-side.is-right span{margin:0 0 4px;}
.gdp-bs-side.is-right b{font-size:40px;color:rgba(255,255,255,.55);}

.gdp-bs-ring{position:relative;width:clamp(280px,31vw,400px);aspect-ratio:1/1;container-type:inline-size;}
.gdp-bs-ring > .gdp-bs-board{position:absolute;inset:0;}
.gdp-bs-numbox{
  position:absolute;left:50%;top:50%;width:46%;height:46%;transform:translate(-50%,-50%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:2;
}
.gdp-bs-eyebrow{font-size:9.5px;letter-spacing:.24em;white-space:nowrap;margin-bottom:2px;}
.gdp-bs-num{
  position:relative;z-index:1;
  font-family:var(--gdp-font);font-weight:600;font-size:110px;font-size:31cqw;line-height:.86;
  letter-spacing:-.03em;color:#fff;font-variant-numeric:tabular-nums;
  text-shadow:0 6px 34px rgba(0,0,0,.85),0 1px 3px rgba(0,0,0,.6);
}
.gdp-bs-num.is-out{
  position:absolute;left:0;right:0;top:auto;z-index:2;pointer-events:none;
  animation:bsNumOut .5s cubic-bezier(.4,0,.2,1) forwards;
}
.gdp-bs-num.is-out.was-up{color:var(--gdp-win);text-shadow:0 0 42px rgba(61,220,132,.55),0 6px 34px rgba(0,0,0,.85);}
.gdp-bs-num.is-out.was-hat{color:#ffd451;text-shadow:0 0 50px rgba(255,164,0,.6),0 6px 34px rgba(0,0,0,.85);}
.gdp-bs-num.is-out.was-back{color:var(--gdp-bust);text-shadow:0 0 40px rgba(255,90,82,.55);animation-name:bsNumFall;}
@keyframes bsNumOut{0%{opacity:1;transform:none;filter:blur(0);}100%{opacity:0;transform:translateY(-30%) scale(.84);filter:blur(7px);}}
@keyframes bsNumFall{0%{opacity:1;transform:none;}100%{opacity:0;transform:translateY(30%) scale(.8) rotate(-4deg);filter:blur(5px);}}
.gdp-bs-num.is-in{animation:bsNumIn .6s cubic-bezier(.18,1.3,.4,1) .08s both;}
@keyframes bsNumIn{0%{opacity:0;transform:translateY(26%) scale(.9);filter:blur(6px);}60%{opacity:1;filter:blur(0);}100%{opacity:1;transform:none;}}
.gdp-bs-num.fx-up{animation:bsNumUp .7s cubic-bezier(.2,1.4,.4,1);}
.gdp-bs-num.fx-hat{animation:bsNumHat .95s cubic-bezier(.2,1.4,.4,1);}
.gdp-bs-num.fx-back{animation:bsShake .45s ease-out;}
@keyframes bsNumUp{30%{transform:scale(1.08);color:#d8ffe9;text-shadow:0 0 46px rgba(61,220,132,.75),0 6px 34px rgba(0,0,0,.85);}}
@keyframes bsNumHat{30%{transform:scale(1.14);color:#fff1c2;text-shadow:0 0 60px rgba(255,164,0,.8),0 6px 34px rgba(0,0,0,.85);}}
@keyframes bsShake{0%,100%{transform:none;}20%{transform:translateX(-9px);color:#ffd6d3;}40%{transform:translateX(8px);}60%{transform:translateX(-5px);}80%{transform:translateX(3px);}}

/* The burst behind the number: green when it moves on, gold and larger
   for three in the bed. Same shapes as A1 and Lock Out. */
.gdp-bs-burst{position:absolute;left:50%;top:50%;width:0;height:0;z-index:0;pointer-events:none;--c:var(--gdp-win);--cs:61,220,132;--rs:170px;}
.gdp-bs-burst.is-hat{--c:#ffd451;--cs:255,212,81;--rs:240px;}
.gdp-bs-burst i{position:absolute;display:block;opacity:0;}
.gdp-bs-glow{left:calc(var(--rs) * -.8);top:calc(var(--rs) * -.8);width:calc(var(--rs) * 1.6);height:calc(var(--rs) * 1.6);border-radius:50%;
  background:radial-gradient(circle, rgba(var(--cs),.42) 0%, rgba(var(--cs),.12) 40%, rgba(var(--cs),0) 70%);}
.gdp-bs-ringfx{left:calc(var(--rs) * -.5);top:calc(var(--rs) * -.5);width:var(--rs);height:var(--rs);border-radius:50%;
  border:3px solid var(--c);box-shadow:0 0 18px rgba(var(--cs),.55);}
.gdp-bs-spark{left:-4px;top:-4px;width:8px;height:8px;border-radius:50%;background:var(--c);box-shadow:0 0 10px rgba(var(--cs),.9);}
.gdp-bs-burst.is-on .gdp-bs-glow{animation:bsGlow .9s ease-out forwards;}
.gdp-bs-burst.is-on .gdp-bs-ringfx{animation:bsRing .85s cubic-bezier(.16,1,.3,1) forwards;}
.gdp-bs-burst.is-on .gdp-bs-ringfx.is-2{animation-delay:.13s;border-width:2px;}
.gdp-bs-burst.is-on .gdp-bs-spark{animation:bsSpark .8s cubic-bezier(.16,1,.3,1) var(--t,0s) forwards;}
@keyframes bsGlow{0%{opacity:0;transform:scale(.5);}25%{opacity:1;}100%{opacity:0;transform:scale(1.15);}}
@keyframes bsRing{0%{opacity:.95;transform:scale(.25);}100%{opacity:0;transform:scale(1.55);}}
@keyframes bsSpark{0%{opacity:1;transform:rotate(var(--a)) translateY(-30px) scale(1.1);}100%{opacity:0;transform:rotate(var(--a)) translateY(calc(var(--d) * -1)) scale(.25);}}

/* A knock-back: the frame flushes red for a moment. */
.gdp .gdp-wrap.js-bs-wrap.fx-back::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:5;
  box-shadow:inset 0 0 110px rgba(255,90,82,.5);animation:bsBackFrame 1s ease-out forwards;
}
@keyframes bsBackFrame{0%{opacity:0;}20%{opacity:1;}100%{opacity:0;}}

/* What each number of hits does, the one in hand lit. */
.gdp-bs-rules{display:flex;justify-content:center;gap:6px;flex-wrap:wrap;margin-top:12px;}
.gdp-bs-rule{
  display:inline-flex;align-items:baseline;gap:6px;padding:4px 11px;border-radius:999px;
  font-family:var(--gdp-font);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--gdp-muted);
  background:rgba(12,12,12,.72);border:1px solid rgba(255,255,255,.1);transition:all .15s;
}
.gdp-bs-rule b{font-size:15px;font-weight:600;color:var(--gdp-ink);}
.gdp-bs-rule.is-up b{color:var(--gdp-win);}
.gdp-bs-rule.is-back b{color:var(--gdp-bust);}
.gdp-bs-rule.is-on{color:var(--gdp-ink);border-color:rgba(255,255,255,.55);background:rgba(40,40,40,.92);transform:translateY(-1px);}
.gdp-bs-rule.is-on.is-up{border-color:var(--gdp-win);background:rgba(44,138,90,.35);}
.gdp-bs-rule.is-on.is-back{border-color:var(--gdp-bust);background:rgba(255,90,82,.18);}

.gdp-bs-warn{
  display:inline-flex;align-items:center;gap:8px;margin-top:10px;padding:5px 14px;border-radius:999px;
  font-family:var(--gdp-font);font-size:13px;letter-spacing:.04em;color:var(--gdp-accent-ink);background:var(--gdp-accent);
  animation:bsIn .3s ease-out;
}
.gdp-bs-warn::before{content:"!";font-weight:700;}

.gdp-bs-ghost{
  display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center;
  margin-top:10px;padding:5px 13px;border-radius:999px;
  font-family:var(--gdp-font);font-size:13px;letter-spacing:.03em;color:var(--gdp-muted);
  background:rgba(12,12,12,.72);border:1px solid rgba(255,255,255,.1);
}
.gdp-bs-ghost em{font-style:normal;font-family:var(--gdp-font-note);font-size:11.5px;opacity:.75;}
.gdp-bs-ghost.is-ahead{color:var(--gdp-win);border-color:rgba(61,220,132,.45);}
.gdp-bs-ghost.is-behind{color:#ffb0aa;border-color:rgba(255,90,82,.4);}
.gdp-bs-ghost.is-level{color:var(--gdp-ink);}

.gdp-bs-coach{
  display:flex;align-items:center;gap:14px;max-width:500px;margin:10px auto 0;padding:10px 14px 10px 12px;
  text-align:left;border-radius:12px;background:rgba(12,12,12,.88);border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);animation:bsIn .3s ease-out;
}
.gdp-bs-coach.is-warn{border-color:rgba(255,164,0,.6);}
.gdp-bs-coach.is-good{border-color:rgba(61,220,132,.6);}
.gdp-bs-coach.is-info{border-color:rgba(255,255,255,.3);}
.gdp-bs-cicon{font-size:20px;color:#ffd451;flex:0 0 auto;line-height:1;}
.gdp-bs-coach.is-warn .gdp-bs-cicon{color:var(--gdp-accent);}
.gdp-bs-coach.is-good .gdp-bs-cicon{color:var(--gdp-win);}
.gdp-bs-cbody{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;min-width:0;flex:1 1 auto;}
.gdp-bs-ctag{font-family:var(--gdp-font);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--gdp-accent);}
.gdp-bs-cbody p{flex:1 1 100%;margin:0;font-family:var(--gdp-font-note);font-size:13.5px;line-height:1.45;color:#e2e2e2;}
.gdp-bs-chide{
  margin-left:auto;order:2;padding:0;background:none;border:0;cursor:pointer;
  font-family:var(--gdp-font-note);font-size:11px;color:var(--gdp-muted);text-decoration:underline;text-underline-offset:2px;
}
.gdp-bs-chide:hover{color:var(--gdp-ink);}
.gdp-bs-coach.is-collapsed{display:flex;justify-content:center;max-width:none;margin-top:8px;padding:0;background:none;border:0;backdrop-filter:none;-webkit-backdrop-filter:none;animation:none;}
.gdp-bs-cshow{
  display:inline-flex;align-items:center;gap:7px;cursor:pointer;padding:5px 13px;border-radius:999px;
  font-family:var(--gdp-font-note);font-size:12px;color:var(--gdp-muted);background:rgba(12,12,12,.7);border:1px solid rgba(255,255,255,.14);
}
.gdp-bs-cshow .fa-lightbulb{color:var(--gdp-accent);}

/* ---------- the controls ---------- */
.gdp-bs-controls{display:flex;flex-direction:column;gap:10px;}
.gdp-bs-dartrow{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
.gdp-bs-dart{
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  min-height:128px;padding:10px 6px;border-radius:14px;cursor:pointer;
  font-family:var(--gdp-font);color:var(--gdp-ink);
  background:rgba(22,22,22,.9);border:1px solid rgba(255,255,255,.16);
  transition:background-color .12s,border-color .12s,transform .08s,box-shadow .2s;
}
.gdp-bs-dart small{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gdp-muted);}
.gdp-bs-dart-ic{
  width:34px;height:34px;border-radius:50%;border:2px dashed rgba(255,255,255,.28);position:relative;transition:all .15s;
}
.gdp-bs-dart-v{font-size:22px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.55);}
.gdp-bs-dart-s{min-height:13px;font-style:normal;font-family:var(--gdp-font-note);font-size:11px;color:var(--gdp-muted);}
.gdp-bs-dart kbd{
  position:absolute;top:7px;right:8px;padding:0 6px;border-radius:5px;
  font-family:var(--gdp-font);font-size:11px;background:rgba(0,0,0,.35);color:inherit;opacity:.7;box-shadow:none;
}
.gdp-bs-dart:hover:not(:disabled){border-color:rgba(255,255,255,.4);}
.gdp-bs-dart:active{transform:scale(.97);}
.gdp-bs-dart:disabled{opacity:.3;cursor:not-allowed;transform:none;}
.gdp-bs-dart:focus-visible{outline:3px solid #fff;outline-offset:3px;}
.gdp-bs-dart.is-hit{background:rgba(44,138,90,.82);border-color:var(--gdp-win);box-shadow:0 0 24px rgba(61,220,132,.25);}
.gdp-bs-dart.is-hit:hover:not(:disabled){background:rgba(55,165,109,.92);}
.gdp-bs-dart.is-hit .gdp-bs-dart-ic{border:0;background:#fff;box-shadow:0 0 14px rgba(255,255,255,.55);}
.gdp-bs-dart.is-hit .gdp-bs-dart-ic::after{
  content:"";position:absolute;left:12px;top:7px;width:8px;height:15px;
  border:solid var(--gdp-go);border-width:0 3px 3px 0;transform:rotate(45deg);
}
.gdp-bs-dart.is-hit .gdp-bs-dart-v{color:#fff;}
.gdp-bs-dart.is-hit small,.gdp-bs-dart.is-hit .gdp-bs-dart-s{color:rgba(255,255,255,.75);}
.gdp-bs-dart.is-board{border-style:solid;}

.gdp-bs-register{
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  min-height:64px;padding:8px 14px;border-radius:14px;cursor:pointer;
  font-family:var(--gdp-font);color:#fff;border:1px solid rgba(255,255,255,.3);background:rgba(60,60,60,.85);
  transition:background-color .15s,border-color .15s,transform .08s;
}
.gdp-bs-register span{font-size:21px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;}
.gdp-bs-register small{font-family:var(--gdp-font);font-size:13px;letter-spacing:.12em;text-transform:uppercase;opacity:.85;}
.gdp-bs-register kbd{
  position:absolute;top:8px;right:10px;padding:0 6px;border-radius:5px;
  font-family:var(--gdp-font);font-size:10px;background:rgba(0,0,0,.3);color:inherit;opacity:.7;box-shadow:none;
}
.gdp-bs-register.is-up{background:var(--gdp-go);border-color:var(--gdp-win);}
.gdp-bs-register.is-up:hover:not(:disabled){background:var(--gdp-go-hi);}
.gdp-bs-register.is-stay{background:rgba(70,70,70,.9);}
.gdp-bs-register.is-back{background:rgba(120,32,28,.9);border-color:var(--gdp-bust);}
.gdp-bs-register:active{transform:scale(.98);}
.gdp-bs-register:disabled{opacity:.3;cursor:not-allowed;}
.gdp-bs-register:focus-visible{outline:3px solid #fff;outline-offset:3px;}

.gdp-bs-undo{
  align-self:center;padding:7px 18px;border-radius:9px;cursor:pointer;
  font-family:var(--gdp-font);font-size:13px;letter-spacing:.14em;text-transform:uppercase;
  background:transparent;border:1px solid var(--gdp-line);color:var(--gdp-muted);
}
.gdp-bs-undo:hover:not(:disabled){border-color:#4a4a4a;color:var(--gdp-ink);}
.gdp-bs-undo:disabled{opacity:.35;cursor:default;}
.gdp-bs-undo:focus-visible{outline:2px solid var(--gdp-accent);outline-offset:2px;}

/* ---------- Scolia: the site's dart boxes and the grouping map ---------- */
.gdp-bs-scolia{margin:14px auto 0;max-width:470px;}
.gdp-bs-scolia .dart-detail-container{padding-top:0;margin-bottom:0;}
.gdp-bs-scolia .dart-detail-wrapper{padding-left:8px;padding-right:8px;}
.gdp-bs-scolia .dart-detail{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:96px;padding:8px 4px;}
.gdp-bs-scolia .dart-detail .app-header-xl,.gdp-bs-scolia .dart-detail .js-dart-detail-score{font-family:var(--gdp-font);font-size:38px;font-weight:500;line-height:1;}
.gdp-bs-scolia .dart-detail .js-dart-detail-hit{font-family:var(--gdp-font);font-size:17px;line-height:1.1;margin-top:6px;min-height:20px;}
.gdp-bs-scolia .js-dart-distance,.gdp-bs-scolia .js-hide-autotrack-darts{display:none !important;}

.gdp-bs-map{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:12px;}
.gdp-bs-map:empty{display:none;}
.gdp-bs-map-svg{width:118px;height:118px;flex:0 0 auto;overflow:visible;}
.gdp-bs-map-lg{text-anchor:middle;font-family:var(--gdp-font);font-size:32px;font-weight:600;fill:#fff;fill-opacity:.1;}
.gdp-bs-map-r{fill:none;stroke:rgba(255,255,255,.16);stroke-width:.6;}
.gdp-bs-map-r:first-of-type{stroke:rgba(255,255,255,.1);}
.gdp-bs-map-x{stroke:rgba(255,255,255,.35);stroke-width:.6;}
.gdp-bs-map-dot circle{stroke:#0a0a0a;stroke-width:.8;}
.gdp-bs-map-dot text{text-anchor:middle;font-family:var(--gdp-font);font-size:5.5px;font-weight:600;fill:#0a0a0a;}
.gdp-bs-map-dot.is-hit circle{fill:var(--gdp-win);}
.gdp-bs-map-dot.is-small circle{fill:var(--gdp-accent);}
.gdp-bs-map-dot.is-miss circle{fill:#8a8a8a;}
.gdp-bs-map-dot.is-clamp circle{stroke:#fff;stroke-dasharray:1.2 1;}
.gdp-bs-mapfig{display:flex;flex-direction:column;gap:8px;min-width:0;text-align:left;}
.gdp-bs-mapfig .gdp-label{font-size:10px;}
.gdp-bs-dvals{display:flex;gap:12px;}
.gdp-bs-dv{display:flex;align-items:baseline;gap:4px;font-family:var(--gdp-font);font-size:22px;font-weight:500;font-variant-numeric:tabular-nums;}
.gdp-bs-dv i{font-style:normal;font-size:10px;color:var(--gdp-muted);letter-spacing:.1em;}
.gdp-bs-dv small,.gdp-bs-mapsum small{font-size:10px;color:var(--gdp-muted);margin-left:1px;}
.gdp-bs-mapsum{display:flex;gap:16px;padding-top:6px;border-top:1px solid rgba(255,255,255,.07);}
.gdp-bs-mapsum span{display:flex;flex-direction:column;}
.gdp-bs-mapsum span > small{letter-spacing:.14em;text-transform:uppercase;margin:0 0 2px;}
.gdp-bs-mapsum b{font-family:var(--gdp-font);font-size:20px;font-weight:500;}

/* A dart that missed the bed: the shared box, quietened. */
.gdp .gdp-bs-scolia .dart-detail.gdp-bs-box-miss{border-color:rgba(255,255,255,.18);background:rgba(20,20,20,.9);box-shadow:none;}
.gdp .gdp-bs-scolia .dart-detail.gdp-bs-box-miss .js-dart-detail-score{color:rgba(255,255,255,.45);}
.gdp-bs-box-sm{font-size:.5em;letter-spacing:.14em;text-transform:uppercase;color:var(--gdp-accent);}

.gdp-bs-scoliaslot:empty{display:none;}
.gdp-bs-scolia.is-wide{margin:4px 0 0;max-width:none;padding-top:12px;border-top:1px solid rgba(255,255,255,.08);}
.gdp-bs-scolia.is-wide .dart-detail{min-height:92px;}
.gdp-bs-scolia.is-wide .gdp-bs-map-svg{width:146px;height:146px;}
.gdp-bs-map-dot text{font-size:6.5px;}

/* ---------- the track of numbers ---------- */
.gdp-bs-trackwrap{
  position:relative;margin-top:18px;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;padding:10px 2px 8px;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 20px,#000 calc(100% - 20px),transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 20px,#000 calc(100% - 20px),transparent 100%);
}
.gdp-bs-trackwrap::-webkit-scrollbar{height:6px;}
.gdp-bs-trackwrap::-webkit-scrollbar-thumb{background:#333;border-radius:3px;}
.gdp-bs-track{list-style:none;margin:0 auto;padding:0 16px;display:flex;gap:5px;width:max-content;min-width:100%;justify-content:center;}
.gdp-bs-tile{
  flex:0 0 46px;display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:8px 2px 6px;border-radius:9px;background:rgba(18,18,18,.82);border:1px solid rgba(255,255,255,.09);
  transition:border-color .2s,background .2s,transform .2s,opacity .2s;
}
.gdp-bs-tile-n{font-family:var(--gdp-font);font-size:19px;font-weight:500;line-height:1;font-variant-numeric:tabular-nums;}
.gdp-bs-tile-m{min-height:11px;font-size:9px;letter-spacing:.06em;color:var(--gdp-muted);line-height:11px;}
.gdp-bs-tile.is-ahead{opacity:.5;}
.gdp-bs-tile.is-cleared{border-top:3px solid var(--gdp-win);padding-top:6px;}
.gdp-bs-tile.is-cleared .gdp-bs-tile-n{color:var(--gdp-muted);}
.gdp-bs-tile.is-cleared .gdp-bs-tile-m{color:var(--gdp-win);}
.gdp-bs-tile.is-lost{border-top:3px dashed rgba(255,90,82,.6);padding-top:6px;opacity:.8;}
.gdp-bs-tile.is-current{opacity:1;background:#1a1305;border-color:var(--gdp-accent);transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,.45);}
.gdp-bs-tile.is-current .gdp-bs-tile-n{color:var(--gdp-accent);}
.gdp-bs-tile.fx-drain{animation:bsDrain .7s ease-out both;}
@keyframes bsDrain{0%{background:rgba(255,90,82,.55);border-color:var(--gdp-bust);}100%{}}

/* ---------- pause ---------- */
.gdp .gdp-wrap.js-bs-wrap .gdp-bs-overlay{
  position:absolute;inset:-6px;z-index:1190;display:flex;align-items:center;justify-content:center;
  background:rgba(8,8,8,.84);border-radius:var(--gdp-radius);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
}
.gdp-bs-overlay.is-hidden{display:none !important;}
.gdp-bs-overlay-card{position:relative;z-index:1;text-align:center;max-width:470px;padding:26px 24px;animation:bsIn .3s ease-out;}
.gdp-bs-overlay-card p{font-family:var(--gdp-font-note);font-size:14.5px;line-height:1.5;color:#d2d2d2;margin:8px 0 16px;}
.gdp-bs-overlay-card .gdp-bs-pausesum{font-family:var(--gdp-font);font-size:20px;letter-spacing:.03em;color:#fff;margin:10px 0 0;}
.gdp-bs-overlay .gdp-btn-primary{width:auto;padding:13px 44px;background:var(--gdp-go);border-color:var(--gdp-go);color:#fff;text-transform:uppercase;letter-spacing:.06em;font-size:17px;}
.gdp-bs-endbox{
  display:flex;flex-direction:column;align-items:center;gap:8px;margin:22px auto 14px;padding:16px 16px 14px;
  border-radius:12px;background:rgba(255,164,0,.06);border:1px solid rgba(255,164,0,.3);
}
.gdp-bs-endbox span{font-family:var(--gdp-font-note);font-size:12.5px;line-height:1.45;color:#cfcfcf;}
.gdp-bs-endbtn{
  display:inline-flex;align-items:center;gap:9px;padding:10px 22px;border-radius:10px;cursor:pointer;
  font-family:var(--gdp-font);font-size:16px;letter-spacing:.06em;text-transform:uppercase;
  background:transparent;border:1px solid var(--gdp-accent);color:var(--gdp-accent);
}
.gdp-bs-endbtn:hover{background:rgba(255,164,0,.12);}
.gdp-bs-endbtn.is-confirm{background:var(--gdp-accent);color:var(--gdp-accent-ink);}
.gdp-bs-endbtn:focus-visible{outline:2px solid #fff;outline-offset:2px;}
.gdp-bs-linkbtn.is-danger:hover{color:#ffb0aa;}


/* =====================================================================
   RESULT
   ===================================================================== */

.gdp-bs-result{max-width:880px;margin:0 auto;padding:4px 0 10px;}
.gdp-bs-res-head{text-align:center;margin-bottom:20px;}
.gdp-bs-res-top{display:flex;align-items:center;justify-content:center;gap:clamp(18px,5vw,56px);margin:12px 0 10px;flex-wrap:wrap;}
.gdp-bs-res-medal{display:inline-flex;align-items:center;gap:14px;text-align:left;}
.gdp-bs-res-medal .gdp-bs-medal.is-big{width:70px;height:84px;}
.gdp-bs-res-medal b{display:block;font-family:var(--gdp-font);font-size:34px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;line-height:1;}
.gdp-bs-res-medal span{font-family:var(--gdp-font);font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--gdp-muted);}
.gdp-bs-res-head.is-m4 .gdp-bs-res-medal b{background:linear-gradient(100deg,#3ddc84,#ffd451);-webkit-background-clip:text;background-clip:text;color:transparent;}
.gdp-bs-res-head.is-m3 .gdp-bs-res-medal b{color:#ffd451;}
.gdp-bs-res-head.is-m2 .gdp-bs-res-medal b{color:#dfe6ec;}
.gdp-bs-res-head.is-m1 .gdp-bs-res-medal b{color:#e0a46a;}
.gdp-bs-res-head.fx-in .gdp-bs-medal{animation:bsMedal 1.1s cubic-bezier(.2,1.3,.4,1) both;}
@keyframes bsMedal{0%{transform:translateY(-30px) rotate(-25deg) scale(.4);opacity:0;}60%{transform:rotate(8deg) scale(1.08);opacity:1;}100%{transform:none;}}
.gdp-bs-res-score{display:flex;align-items:baseline;justify-content:center;gap:12px;}
.gdp-bs-res-score b{
  font-family:var(--gdp-font);font-weight:600;font-size:clamp(96px,16vw,160px);line-height:.88;color:#fff;
  font-variant-numeric:tabular-nums;text-shadow:0 6px 34px rgba(0,0,0,.85);
}
.gdp-bs-res-score span{font-family:var(--gdp-font);font-size:16px;letter-spacing:.24em;text-transform:uppercase;color:var(--gdp-muted);}
.gdp-bs-res-score.is-sm{justify-content:flex-start;margin-top:12px;}
.gdp-bs-res-score.is-sm b{font-size:clamp(54px,8vw,74px);}

/* An ended game: how far round the board it got. */
.gdp-bs-res-top.is-ended{gap:clamp(18px,4vw,40px);}
.gdp-bs-res-ring{position:relative;width:clamp(200px,26vw,250px);}
.gdp-bs-res-ringc{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;}
.gdp-bs-res-ringc b{font-family:var(--gdp-font);font-size:50px;font-weight:600;line-height:1;color:var(--gdp-win);}
.gdp-bs-res-ringc span{font-family:var(--gdp-font);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--gdp-muted);}
.gdp-bs-res-endtxt{text-align:left;max-width:340px;}
.gdp-bs-res-ended{font-family:var(--gdp-font);font-size:clamp(30px,4vw,40px);font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:#fff;line-height:1;}
.gdp-bs-res-endline{font-family:var(--gdp-font-note);font-size:14px;line-height:1.5;color:#d2d2d2;margin:10px 0 0;}

.gdp-bs-pb{
  display:inline-flex;align-items:center;gap:9px;padding:9px 20px;border-radius:999px;margin-top:6px;
  font-family:var(--gdp-font);font-size:17px;font-weight:500;letter-spacing:.05em;color:var(--gdp-accent-ink);
  background:linear-gradient(112deg,#fff1c2 0%,#ffd451 30%,#ffa400 70%,#ffcf66 100%);background-size:220% 100%;
  box-shadow:0 10px 30px rgba(255,164,0,.3);animation:bsPb 2.4s ease-in-out infinite alternate;
}
.gdp-bs-pb.is-soft{background:rgba(255,164,0,.12);color:var(--gdp-accent);border:1px solid rgba(255,164,0,.5);box-shadow:none;animation:none;}
@keyframes bsPb{from{background-position:0% 50%;}to{background-position:100% 50%;}}
.gdp-bs-res-line{font-family:var(--gdp-font-note);font-size:14px;color:#cfcfcf;margin:12px 0 0;}
.gdp-bs-res-line.is-left{text-align:left;color:var(--gdp-muted);margin:0 0 16px;}

.gdp-bs-levelup{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:0 0 20px;padding:12px 14px;border-radius:12px;
  background:linear-gradient(100deg,rgba(61,220,132,.14),rgba(18,18,18,.9) 70%);border:1px solid rgba(61,220,132,.5);
}
.gdp-bs-levelup-i{
  width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:0 0 auto;
  background:var(--gdp-win);color:#04230f;font-size:17px;
}
.gdp-bs-levelup > div:nth-child(2){display:flex;flex-direction:column;flex:1 1 200px;min-width:0;}
.gdp-bs-levelup b{font-family:var(--gdp-font);font-size:17px;font-weight:500;letter-spacing:.04em;color:#fff;}
.gdp-bs-levelup span{font-family:var(--gdp-font-note);font-size:13px;color:#d8d8d8;}

.gdp-bs-res-figs{grid-template-columns:repeat(var(--bs-n,5),minmax(0,1fr));margin-bottom:18px;}
.gdp-bs-res-figs .gdp-figure{background:rgba(18,18,18,.88);}
.gdp-bs-res-figs .gdp-figure.is-gold b{color:#ffd451;}
.gdp-bs-res-figs .gdp-figure.is-bad b{color:#ffb0aa;}

.gdp-bs-dbd{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) ;gap:6px 18px;align-items:center;margin:0 0 22px;}
.gdp-bs-dbd > .gdp-label{grid-column:1 / -1;}
.gdp-bs-dbd-r{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:8px;align-items:center;font-family:var(--gdp-font);}
.gdp-bs-dbd-r span{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gdp-muted);}
.gdp-bs-dbd-r i{display:block;height:8px;border-radius:4px;background:rgba(255,255,255,.08);overflow:hidden;}
.gdp-bs-dbd-r em{display:block;height:100%;background:var(--gdp-win);border-radius:4px;}
.gdp-bs-dbd-r b{font-size:16px;font-weight:500;font-variant-numeric:tabular-nums;min-width:40px;text-align:right;}
.gdp-bs-dbd.is-panel{grid-template-columns:1fr;margin-top:18px;}

.gdp-bs-note{font-family:var(--gdp-font-note);font-size:12px;color:var(--gdp-muted);margin:-4px 0 10px;}
.gdp-bs-nums{list-style:none;margin:0 0 14px;padding:0;display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:6px;}
.gdp-bs-n{
  display:flex;flex-direction:column;align-items:center;gap:4px;padding:9px 3px 8px;border-radius:10px;
  background:rgba(18,18,18,.82);border:1px solid rgba(255,255,255,.07);border-top:3px solid rgba(255,255,255,.18);
}
.gdp-bs-n.is-one{border-top-color:var(--gdp-win);}
.gdp-bs-n.is-many{border-top-color:var(--gdp-bust);}
.gdp-bs-n.is-open{opacity:.4;border-top-color:rgba(255,255,255,.08);}
.gdp-bs-n-n{font-family:var(--gdp-font);font-size:21px;font-weight:500;line-height:1;font-variant-numeric:tabular-nums;}
.gdp-bs-n-v{font-family:var(--gdp-font);font-size:13px;color:#d8d8d8;}
.gdp-bs-n-v small{font-size:9px;color:var(--gdp-muted);margin-left:1px;}
/* Premium: this game (the bar) against the player's usual (the tick). */
.gdp-bs-n-u{position:relative;display:block;width:82%;height:4px;border-radius:2px;background:rgba(255,255,255,.08);}
.gdp-bs-n-u em{position:absolute;left:0;top:0;bottom:0;border-radius:2px;background:#7f8b99;}
.gdp-bs-n-u i{position:absolute;top:-3px;width:2px;height:10px;margin-left:-1px;background:#fff;border-radius:1px;z-index:1;}
.gdp-bs-n.is-better .gdp-bs-n-u em{background:var(--gdp-win);}
.gdp-bs-n.is-worse .gdp-bs-n-u em{background:var(--gdp-bust);}
.gdp-bs-upsell{margin:6px 0 20px;}

.gdp-bs-res-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:8px;}
.gdp-bs-res-actions .gdp-btn-primary{
  width:auto;min-width:220px;background:var(--gdp-go);border-color:var(--gdp-go);color:#fff;
  font-size:18px;letter-spacing:.06em;text-transform:uppercase;
}
.gdp-bs-res-actions .gdp-btn-primary:hover{background:var(--gdp-go-hi);}
.gdp-bs-res-actions a.gdp-btn{color:var(--gdp-ink);text-decoration:none;}
.gdp-bs-save{text-align:center;margin:14px 0 0;min-height:20px;font-family:var(--gdp-font-note);font-size:12.5px;color:var(--gdp-muted);}
.gdp-bs-save.is-ok{color:var(--gdp-win);}
.gdp-bs-save.is-error{color:#ffb0aa;}
.gdp-bs-retry{
  margin-left:6px;padding:3px 12px;border-radius:999px;cursor:pointer;font-family:var(--gdp-font);font-size:12px;letter-spacing:.08em;
  background:none;border:1px solid rgba(255,90,82,.6);color:var(--gdp-ink);
}

/* Medals: a disc with a large single on its face. */
.gdp-bs-medal{width:28px;height:34px;overflow:visible;--m1:#ffd451;--m2:#b07a12;--rb1:#2e6fbf;--rb2:#24589a;}
.gdp-bs-medal.is-silver{--m1:#e6edf2;--m2:#7c8a96;}
.gdp-bs-medal.is-bronze{--m1:#e7ad74;--m2:#8a4f22;}
.gdp-bs-medal.is-elite{--m1:#a6f3c8;--m2:#d9a521;--rb1:#1f8a55;--rb2:#176b42;}
.gdp-bs-medal.is-none{--m1:#4a4a4a;--m2:#2c2c2c;--rb1:#3a3a3a;--rb2:#2e2e2e;}
.gdp-bs-medal .rb{fill:var(--rb1);}
.gdp-bs-medal .rb.is-2{fill:var(--rb2);}
.gdp-bs-medal .rim{fill:var(--m2);}
.gdp-bs-medal .face{fill:var(--m1);}
.gdp-bs-medal .bed,.gdp-bs-medal .dot{fill:var(--m2);}


/* =====================================================================
   YOUR STATS
   ===================================================================== */

.gdp-stats-head .gdp-bs-schips{margin-left:auto;margin-right:10px;align-items:center;}
.gdp-bs-chipsep{width:1px;height:20px;background:var(--gdp-line);margin:0 4px;}
.gdp-bs-stfigs{grid-template-columns:repeat(6,minmax(0,1fr));}
.gdp-bs-stfigs .gdp-figure b{font-size:clamp(18px,2.1vw,26px);}
.gdp-bs-stfigs .gdp-figure.is-best b{color:var(--gdp-accent);}
.gdp-bs-stmedals{display:flex;flex-wrap:wrap;gap:8px;margin:-6px 0 22px;}
.gdp-bs-stm{
  display:grid;grid-template-columns:auto auto;grid-template-rows:auto auto;column-gap:8px;align-items:center;
  padding:8px 14px 8px 10px;border-radius:10px;background:var(--gdp-panel);border:1px solid var(--gdp-line);opacity:.55;
}
.gdp-bs-stm .gdp-bs-medal{grid-row:1 / 3;width:22px;height:27px;}
.gdp-bs-stm b{font-family:var(--gdp-font);font-size:20px;font-weight:600;line-height:1;}
.gdp-bs-stm b small{font-size:11px;color:var(--gdp-muted);margin-left:1px;}
.gdp-bs-stm span{font-family:var(--gdp-font);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--gdp-muted);}
.gdp-bs-stm.is-got,.gdp-bs-stm.is-furthest,.gdp-bs-stm.is-dist{opacity:1;}
.gdp-bs-stm.is-furthest,.gdp-bs-stm.is-dist{grid-template-columns:auto;padding-left:14px;}
@media(min-width:901px){
  .gdp-stats-grid.gdp-bs-stgrid{grid-template-columns:minmax(260px,340px) minmax(0,1fr);gap:28px;}
}

.gdp-bs-bars{display:flex;flex-direction:column;gap:4px;}
.gdp-bs-bar{display:grid;grid-template-columns:24px minmax(0,1fr) 34px;gap:8px;align-items:center;font-family:var(--gdp-font);font-variant-numeric:tabular-nums;}
.gdp-bs-bar span{font-size:14px;text-align:right;color:#d8d8d8;}
.gdp-bs-bar i{display:block;height:10px;border-radius:5px;background:rgba(255,255,255,.06);overflow:hidden;}
.gdp-bs-bar em{display:block;height:100%;border-radius:5px;background:#7f8b99;}
.gdp-bs-bar b{font-size:13px;font-weight:500;text-align:right;}
.gdp-bs-bar.is-weak span,.gdp-bs-bar.is-weak b{color:#ffb0aa;}
.gdp-bs-bar.is-weak em{background:var(--gdp-bust);}
.gdp-bs-bar.is-empty{opacity:.35;}
.gdp-bs-stgrid .gdp-bs-res-line.is-left{margin-top:12px;}

button.gdp-session.is-bs{
  width:100%;text-align:left;color:inherit;background:none;font:inherit;font-family:var(--gdp-font);cursor:pointer;
  grid-template-columns:44px 86px minmax(0,1fr) 72px 48px 16px;
}
button.gdp-session.is-bs:hover{border-color:var(--gdp-accent);}
button.gdp-session.is-bs:focus-visible{outline:2px solid var(--gdp-accent);outline-offset:2px;}
button.gdp-session.is-bs.is-on{border-color:var(--gdp-accent);background:#1a1305;border-bottom-left-radius:0;border-bottom-right-radius:0;margin-bottom:0;}
.gdp-session.is-bs .gdp-session-num small{font-size:10px;color:var(--gdp-muted);margin-left:3px;letter-spacing:.08em;}
.gdp-bs-sm .gdp-bs-medal{width:20px;height:24px;}
.gdp-bs-endmark{
  display:inline-block;padding:1px 6px;border-radius:999px;font-style:normal;font-size:10px;letter-spacing:.04em;
  color:var(--gdp-accent);background:rgba(255,164,0,.12);border:1px solid rgba(255,164,0,.4);
}
.gdp-bs-chev{
  width:8px;height:8px;justify-self:end;border-right:1.5px solid var(--gdp-muted);border-bottom:1.5px solid var(--gdp-muted);
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .2s;
}
button.gdp-session.is-bs.is-on .gdp-bs-chev{transform:rotate(-135deg) translate(-2px,-2px);border-color:var(--gdp-accent);}
.gdp-bs-gdetail{
  border:1px solid var(--gdp-accent);border-top:0;border-radius:0 0 10px 10px;background:rgba(26,19,5,.55);
  padding:12px 14px;margin-bottom:6px;animation:bsIn .22s ease-out;
}
.gdp-bs-gdetail[hidden]{display:none;}
.gdp-bs-strip{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:4px;}
.gdp-bs-so{
  display:flex;flex-direction:column;align-items:center;padding:4px 2px;border-radius:6px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-top-width:3px;
}
.gdp-bs-so b{font-family:var(--gdp-font);font-size:14px;font-weight:500;}
.gdp-bs-so em{font-style:normal;font-family:var(--gdp-font-note);font-size:10px;color:var(--gdp-muted);min-height:12px;}
.gdp-bs-so.is-one{border-top-color:var(--gdp-win);}
.gdp-bs-so.is-some{border-top-color:rgba(255,255,255,.35);}
.gdp-bs-so.is-many{border-top-color:var(--gdp-bust);}
.gdp-bs-so.is-none{opacity:.35;}
.gdp-bs-gmeta{margin:10px 0 0;font-family:var(--gdp-font-note);font-size:12px;color:var(--gdp-muted);}
.gdp-bs-gmeta b{font-family:var(--gdp-font);font-weight:500;font-size:13.5px;color:var(--gdp-ink);}


/* =====================================================================
   THE PHOTOGRAPH
   The theme's .container-main-graphic rule loads after gdp-game.css at the
   same specificity and hides the shared photo. Restated one step more
   specific with the shared tokens (see the A1 file, same block), with
   Big Singles' own photographs: 2026-back-game-5.webp, and -mobile at
   900px and below.
   ===================================================================== */
.gdp .gdp-wrap.js-bs-wrap{
  background-color:var(--gdp-bg);
  background-image:
    linear-gradient(-18deg, transparent 0 45.35%, var(--gdp-divider) 45.35% 45.7%, transparent 45.7%),
    linear-gradient(-18deg, var(--gdp-tint-hi) 0 45.7%, var(--gdp-tint-lo) 45.7%),
    linear-gradient(to bottom,
      rgba(10,10,10,0) 0,
      rgba(10,10,10,0) calc(var(--gdp-band) * .45),
      rgba(10,10,10,.55) calc(var(--gdp-band) * .74),
      rgba(10,10,10,.88) calc(var(--gdp-band) * .90),
      var(--gdp-bg) var(--gdp-band)),
    url('/wp-content/themes/dart/images/2026/2026-back-game-5.webp');
  background-size:100% var(--gdp-band), 100% var(--gdp-band), 100% 100%, 100% auto;
  background-position:left top, left top, left top, center top;
  background-repeat:no-repeat;
  overflow-x:clip;
}
@media(max-width:900px){
  .gdp .gdp-wrap.js-bs-wrap{
    background-image:
      linear-gradient(-18deg, transparent 0 32.94%, var(--gdp-divider) 32.94% 33.5%, transparent 33.5%),
      linear-gradient(-18deg, var(--gdp-tint-hi) 0 33.5%, var(--gdp-tint-lo) 33.5%),
      linear-gradient(to bottom,
        rgba(10,10,10,0) 0,
        rgba(10,10,10,0) calc(var(--gdp-band) * .45),
        rgba(10,10,10,.55) calc(var(--gdp-band) * .74),
        rgba(10,10,10,.88) calc(var(--gdp-band) * .90),
        var(--gdp-bg) var(--gdp-band)),
      url('/wp-content/themes/dart/images/2026/2026-back-game-5-mobile.webp');
  }
}
/* Setup tint as on A1 and Lock Out, scoped to this frame's setup state. */
.gdp .gdp-wrap.js-bs-wrap:not(.is-playing):not(.is-over){--gdp-tint-hi:rgba(8,8,8,.60);--gdp-tint-lo:rgba(8,8,8,.46);}
.gdp .gdp-wrap.js-bs-wrap.is-playing{--gdp-divider:rgba(255,164,0,.12);}
.gdp .gdp-wrap.js-bs-wrap .gdp-screen-setup .gdp-intro{background:rgba(10,10,10,.52);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);}
/* Your stats: setup and result only. */
.gdp .gdp-wrap.js-bs-wrap.is-playing .gdp-statstab{display:none;}
@media(min-width:992px){ .gdp .gdp-wrap.js-bs-wrap.is-playing{min-height:640px;} }

/* The "Removing darts" popup must not widen the page (A1 rev 9). */
.gdp .gdp-wrap.js-bs-wrap .dart-retrieve-container{left:0;right:0;width:auto;max-width:100%;margin-left:0;margin-right:0;box-sizing:border-box;}
.gdp .gdp-wrap.js-bs-wrap .gdp-retrieve{width:600px;max-width:100%;box-sizing:border-box;}

/* A unit inside a figure card (as A1 and Lock Out). */
.gdp-figure .gdp-unit{display:inline;font-size:.5em;font-weight:400;letter-spacing:normal;text-transform:none;color:rgba(255,255,255,.55);margin:0 0 0 2px;}
.gdp-figure b{white-space:nowrap;}

/* Full screen: the play screen is scaled to the window by the shared
   script; the ring keeps its page size inside it. */
@media(min-width:992px){
  html.gdp-fs:not(.gdp-fs-plain) .gdp-wrap.js-bs-wrap .gdp-bs-ring{width:380px;}
}


/* =====================================================================
   NARROW
   ===================================================================== */

@media(max-width:1100px){
  .gdp-bs-stfigs{grid-template-columns:repeat(3,minmax(0,1fr));}
  .gdp-bs-res-figs{grid-template-columns:repeat(4,minmax(0,1fr));}
}

@media(max-width:991px){
  .gdp-bs-stage{grid-template-columns:1fr;gap:16px;}
  .gdp-bs-controls{max-width:560px;width:100%;margin:0 auto;}
  .gdp-bs-ring{width:clamp(260px,52vw,380px);}
  .gdp .gdp-wrap.js-bs-wrap .gdp-statstab{top:16px;}
  .gdp-bs-lede{padding-right:44px;}
  .gdp-bs-nums,.gdp-bs-strip{grid-template-columns:repeat(5,minmax(0,1fr));}
}

@media(max-width:760px){
  button.gdp-session.is-bs{grid-template-columns:44px 80px minmax(0,1fr) 64px 16px;}
  button.gdp-session.is-bs > .gdp-session-num.is-rate{display:none;}
  .gdp-bs-row2{grid-template-columns:1fr;}
  .gdp-bs-dbd{grid-template-columns:1fr;}
}

/* Phones: the ring on top with the bar carrying the count, the darts and
   Register under it in one block, the track at the foot. */
@media(max-width:600px){
  .gdp-bs-levels{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;}
  .gdp-bs-level{padding:10px 9px;}
  .gdp-bs-level b{font-size:14px;}
  .gdp-bs-level span{font-size:11px;}
  .gdp-bs-figs{grid-template-columns:repeat(2,minmax(0,1fr));}
  .gdp-bs-ladder-m{grid-template-columns:repeat(2,minmax(0,1fr));}
  .gdp-bs-levelrules div{grid-template-columns:86px minmax(0,1fr);}

  .gdp-bs-screen.js-bs-play .gdp-bar{flex-wrap:nowrap;padding-bottom:6px;margin-bottom:2px;}
  .gdp-bs-screen.js-bs-play .gdp-bar-rules{display:none;}
  .gdp-bs-screen.js-bs-play .gdp-bar-actions{gap:2px;width:100%;justify-content:space-between;}
  .gdp-bs-stat{gap:4px;margin-right:2px;}
  .gdp-bs-stat .gdp-label{font-size:9px;letter-spacing:.1em;}
  .gdp-bs-stat b{font-size:17px;}
  .gdp-bs-pausebtn{width:34px;height:34px;}

  .gdp-bs-herorow{grid-template-columns:1fr;}
  .gdp-bs-side{display:none;}
  .gdp-bs-ring{width:min(78vw,300px);margin:0 auto;}
  .gdp-bs-b-num{font-size:19px;}
  .gdp-bs-rules{gap:4px;margin-top:8px;}
  .gdp-bs-rule{padding:3px 8px;font-size:10.5px;}
  .gdp-bs-rule b{font-size:13px;}
  .gdp-bs-ghost{font-size:12px;margin-top:6px;}
  .gdp-bs-coach{gap:10px;padding:9px 11px;}
  .gdp-bs-cbody p{font-size:12.5px;}

  .gdp-bs-controls{gap:7px;}
  .gdp-bs-dartrow{gap:6px;}
  .gdp-bs-dart{min-height:96px;gap:4px;}
  .gdp-bs-dart-ic{width:28px;height:28px;}
  .gdp-bs-dart.is-hit .gdp-bs-dart-ic::after{left:9px;top:5px;width:7px;height:13px;}
  .gdp-bs-dart-v{font-size:18px;}
  .gdp-bs-dart kbd,.gdp-bs-register kbd{display:none;}
  .gdp-bs-register{min-height:66px;}
  .gdp-bs-register span{font-size:19px;}

  .gdp-bs-scolia .dart-detail{min-height:64px;padding-top:4px;padding-bottom:4px;}
  .gdp-bs-scolia .dart-detail .app-header-xl,.gdp-bs-scolia .dart-detail .js-dart-detail-score{font-size:26px;}
  .gdp-bs-scolia .dart-detail .js-dart-detail-hit{font-size:13px;margin-top:2px;}
  .gdp-bs-scolia .dart-detail-wrapper{padding-left:4px;padding-right:4px;}
  .gdp-bs-map{gap:12px;}
  .gdp-bs-map-svg{width:92px;height:92px;}
  .gdp-bs-dv{font-size:18px;gap:3px;}
  .gdp-bs-dvals{gap:9px;}

  .gdp-bs-trackwrap{margin-top:12px;padding-top:12px;}
  .gdp-bs-track{justify-content:flex-start;padding:0 12px;gap:4px;}
  .gdp-bs-tile{flex-basis:40px;padding:7px 1px 5px;}
  .gdp-bs-tile-n{font-size:17px;}
  .gdp-bs-tile.is-current{transform:none;}

  .gdp-bs-res-figs{grid-template-columns:repeat(2,minmax(0,1fr));}
  .gdp-bs-stfigs{grid-template-columns:repeat(2,minmax(0,1fr));}
  .gdp-bs-res-endtxt{text-align:center;}
  .gdp-bs-res-score.is-sm{justify-content:center;}
  .gdp-stats-head{flex-wrap:wrap;gap:8px;}
  .gdp-stats-head .gdp-bs-schips{order:3;flex:1 1 100%;margin:0;}
  .gdp-bs-resume{grid-template-columns:48px minmax(0,1fr);}
  .gdp-bs-resume-i{width:48px;}
}

@media(prefers-reduced-motion:reduce){
  .gdp-bs-num.is-in,.gdp-bs-num.fx-up,.gdp-bs-num.fx-hat,.gdp-bs-num.fx-back,
  .gdp-bs-seg.is-current,.gdp-bs-b-num.is-current,.gdp-bs-tile.is-current,.gdp-bs-tile.fx-drain,.gdp-bs-pb,.gdp-bs-coach,.gdp-bs-warn,
  .gdp-bs-resume,.gdp-bs-overlay-card,.gdp-bs-res-head.fx-in .gdp-bs-medal,.gdp-bs-gdetail,
  .gdp-bs-stat b.is-low,.gdp-bs-screen.is-unsaved .js-bs-darts::after{animation:none;}
  .gdp-bs-num.is-out,.gdp-bs-burst{display:none;}
  .gdp .gdp-wrap.js-bs-wrap.fx-back::after{animation:none;opacity:0;}
  .gdp-bs-tile.is-current,.gdp-bs-rule.is-on{transform:none;}
  .gdp-bs-seg,.gdp-bs-b-num{transition:none;}
}


/* =====================================================================
   PHONE PLAY SCREEN (rev 4)
   Everything needed to throw fits one screen: the ring, what the hits
   do, the three darts and Register. The board's boxes and map come next,
   and the tip, the ghost and the track after them. The hero's parts and
   the controls are put in that order with display:contents, so the
   markup stays the same as on a desktop. The ring is sized by the
   screen's height as well as its width (svh), so a short phone, or one
   with the browser's bars showing, still has the controls in view.
   ===================================================================== */
@media(max-width:600px){
  .gdp-bs-screen.js-bs-play .gdp-bar{padding-bottom:4px;margin-bottom:0;}
  .gdp-bs-stage{display:flex;flex-direction:column;align-items:stretch;gap:8px;}
  .gdp-bs-herorow{justify-items:center;}
  .gdp-bs-hero{display:contents;}
  .gdp-bs-herorow{order:1;}
  .gdp-bs-rules{order:2;margin-top:0;}
  .gdp-bs-warn{order:3;margin:0 auto;}
  .gdp-bs-controls{order:4;margin:2px 0 0;}
  .js-bs-scoliaslot-narrow{order:5;}
  .gdp-bs-ghost{order:6;margin:2px auto 0;}
  .gdp-bs-coach{order:7;margin-top:0;}

  .gdp-bs-ring{width:min(74vw,36svh,340px);min-width:200px;}
  .gdp-bs-eyebrow{font-size:8px;letter-spacing:.2em;}
  .gdp-bs-b-num{font-size:21px;}
  .gdp-bs-b-num.is-current{font-size:25px;}

  /* Undo beside Register, not under it. */
  .gdp-bs-controls{display:grid;grid-template-columns:62px minmax(0,1fr);gap:6px;}
  .gdp-bs-dartrow{grid-column:1 / -1;}
  .gdp-bs-dart{min-height:82px;}
  /* One line on a phone: "Register 2 hits  ·  Next: 2". */
  .gdp-bs-register{grid-column:2;grid-row:2;min-height:48px;padding:6px 10px;border-radius:12px;
    flex-direction:row;flex-wrap:wrap;align-items:baseline;justify-content:center;column-gap:10px;}
  .gdp-bs-register span{font-size:17px;}
  .gdp-bs-register small{font-size:11px;}
  .gdp-bs-register small::before{content:"\00B7";margin-right:10px;opacity:.6;}
  .gdp-bs-undo{grid-column:1;grid-row:2;align-self:stretch;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    padding:4px;font-size:10px;letter-spacing:.1em;}
  .gdp-bs-undo .fa-solid{font-size:15px;}
  .gdp-bs-scoliaslot{display:none;}

  /* The board's boxes and map: one compact band. */
  .gdp-bs-scolia{margin:4px auto 0;}
  .gdp-bs-scolia .dart-detail{min-height:54px;}
  .gdp-bs-scolia .dart-detail .app-header-xl,.gdp-bs-scolia .dart-detail .js-dart-detail-score{font-size:22px;}
  .gdp-bs-map{margin-top:8px;}
  .gdp-bs-map-svg{width:76px;height:76px;}
  .gdp-bs-dv{font-size:16px;}
  .gdp-bs-mapsum b{font-size:16px;}
}
/* Very short screens (a small phone with the browser's bars): a smaller
   ring and lower buttons. */
@media(max-width:600px) and (max-height:700px){
  .gdp-bs-ring{width:min(64vw,30svh,240px);min-width:180px;}
  .gdp-bs-dart{min-height:70px;gap:2px;}
  .gdp-bs-dart-ic{width:22px;height:22px;}
  .gdp-bs-dart.is-hit .gdp-bs-dart-ic::after{left:7px;top:3px;width:6px;height:11px;border-width:0 2px 2px 0;}
  .gdp-bs-dart-v{font-size:16px;}
  .gdp-bs-register{min-height:44px;}
  .gdp-bs-rule{padding:2px 7px;}
}


/* =====================================================================
   WITH A SCOLIA BOARD (rev 5)
   The board scores every dart, so the Hit / Miss buttons go. The site's
   dart boxes show each dart (tick, small or cross) and are where a wrong
   dart is corrected; they move up to where the buttons were, above
   Register. Register stays for settling a visit early.
   ===================================================================== */
.gdp .gdp-wrap.js-bs-wrap.has-board .gdp-bs-dartrow{display:none;}
.gdp .gdp-wrap.js-bs-wrap.has-board .gdp-bs-controls > .gdp-bs-scoliaslot{order:-1;margin:0;}
.gdp .gdp-wrap.js-bs-wrap.has-board .gdp-bs-scolia.is-wide{margin:0;padding-top:0;border-top:0;}
.gdp .gdp-wrap.js-bs-wrap.has-board .gdp-bs-scolia.is-wide .gdp-bs-map{
  margin-top:12px;padding-top:12px;border-top:1px solid rgba(255,255,255,.08);
}
@media(max-width:600px){
  .gdp .gdp-wrap.js-bs-wrap.has-board .js-bs-scoliaslot-narrow{order:3;}
  .gdp .gdp-wrap.js-bs-wrap.has-board .gdp-bs-scolia{margin:0 auto;width:100%;}
  .gdp .gdp-wrap.js-bs-wrap.has-board .gdp-bs-scolia .dart-detail{min-height:62px;}
  .gdp .gdp-wrap.js-bs-wrap.has-board .gdp-bs-map{margin-top:6px;}
  .gdp .gdp-wrap.js-bs-wrap.has-board .gdp-bs-controls{grid-template-rows:auto;}
  .gdp .gdp-wrap.js-bs-wrap.has-board .gdp-bs-register,
  .gdp .gdp-wrap.js-bs-wrap.has-board .gdp-bs-undo{grid-row:1;}
}


/* =====================================================================
   REV 6
   Register says only what it does, centred; the hit chips under the
   ring already show where the visit takes you. The dart boxes read from
   the oche: a large mark and the sector under it.
   ===================================================================== */
.gdp-bs-register small{display:none;}
.gdp-bs-register{justify-content:center;align-items:center;}
.gdp-bs-register span{line-height:1;}

.gdp .gdp-bs-scolia .dart-detail .js-dart-detail-score{font-size:46px;line-height:1;font-weight:600;}
.gdp .gdp-bs-scolia .dart-detail .js-dart-detail-hit{font-size:21px;font-weight:500;letter-spacing:.04em;margin-top:6px;color:#e6e6e6;}
.gdp .gdp-bs-scolia .dart-detail.gdp-bs-box-miss .js-dart-detail-hit{color:rgba(255,255,255,.7);}
.gdp-bs-box-sm{font-size:.42em;letter-spacing:.12em;}
@media(max-width:600px){
  .gdp .gdp-bs-scolia .dart-detail{min-height:78px;}
  .gdp .gdp-bs-scolia .dart-detail .js-dart-detail-score{font-size:36px;}
  .gdp .gdp-bs-scolia .dart-detail .js-dart-detail-hit{font-size:19px;margin-top:4px;}
  .gdp-bs-register{min-height:50px;}
  .gdp-bs-register span{font-size:19px;}
}
@media(max-width:600px) and (max-height:700px){
  .gdp .gdp-bs-scolia .dart-detail{min-height:64px;}
  .gdp .gdp-bs-scolia .dart-detail .js-dart-detail-score{font-size:30px;}
  .gdp .gdp-bs-scolia .dart-detail .js-dart-detail-hit{font-size:17px;}
  .gdp-bs-register{min-height:46px;}
}


/* =====================================================================
   REV 7
   At the end of a game the site slides a "To Performance Center" button
   down from the top edge of the frame, centred, about 34px tall. The
   result starts under it, so the eyebrow and the medal are never
   covered.
   ===================================================================== */
.gdp-bs-result{padding-top:40px;}
@media(max-width:600px){ .gdp-bs-result{padding-top:44px;} }


/* =====================================================================
   REV 8
   Recent games: the average distance on each row for Scolia players,
   without opening it. Green, as distance figures are elsewhere.
   ===================================================================== */
.gdp-bs-hist.has-dist button.gdp-session.is-bs{grid-template-columns:44px 86px minmax(0,1fr) 72px 48px 70px 16px;}
.gdp-session.is-bs .gdp-session-num.is-dist{color:var(--gdp-win);}
.gdp-session.is-bs .gdp-session-num.is-dist small{color:rgba(61,220,132,.65);margin-left:2px;}
@media(max-width:760px){
  /* The shared phone rule folds each figure under the row (span 2); the
     Big Singles row stays one line. */
  button.gdp-session.is-bs > .gdp-session-num{grid-column:auto;display:block;text-align:right;}
  .gdp-bs-hist.has-dist button.gdp-session.is-bs{grid-template-columns:40px 74px minmax(0,1fr) 62px 62px 14px;gap:8px;}
}
@media(max-width:400px){
  .gdp-bs-hist.has-dist button.gdp-session.is-bs > .gdp-session-when{display:none;}
  .gdp-bs-hist.has-dist button.gdp-session.is-bs{grid-template-columns:40px minmax(0,1fr) 62px 62px 14px;}
}


/* =====================================================================
   REV 9
   A timed session's last visit: the clock stops on 00:00 in amber and a
   pill under the ring says to throw the last visit.
   ===================================================================== */
.gdp .gdp-wrap.js-bs-wrap.is-lastvisit .js-bs-time{color:var(--gdp-accent);}
.gdp .gdp-wrap.js-bs-wrap.is-lastvisit .js-bs-timelabel{color:var(--gdp-accent);}
.gdp-bs-warn.is-time{background:#ffd451;animation:bsLast 1.2s ease-in-out infinite;}
.gdp-bs-warn.is-time::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--gdp-accent-ink);}
@keyframes bsLast{50%{box-shadow:0 0 0 6px rgba(255,212,81,.25);}}
@media(prefers-reduced-motion:reduce){ .gdp-bs-warn.is-time{animation:none;} }


/* =====================================================================
   REV 10
   Recent games: how far each game got, without opening it.
   ===================================================================== */
.gdp-bs-where{font-weight:500;color:#e6e6e6;}
.gdp-bs-where.is-done{color:var(--gdp-win);}
.gdp-bs-wheresub{font-family:var(--gdp-font);font-size:11px;letter-spacing:.06em;color:var(--gdp-muted);margin-left:4px;}
@media(max-width:400px){
  button.gdp-session.is-bs:not(.x) > .gdp-session-when{display:none;}
  .gdp-bs-hist:not(.has-dist) button.gdp-session.is-bs{grid-template-columns:40px minmax(0,1fr) 62px 14px;}
}
/* Short words on a phone: "On 14", "All 20". */
.gdp-bs-ws{display:none;}
@media(max-width:760px){ .gdp-bs-wl{display:none;} .gdp-bs-ws{display:inline;} }