/* =====================================================================
   GoDartsPro : A1
   /wp-content/themes/dart/assets/css/gdp-game-a1.css

   Loaded AFTER gdp-game.css. Everything shared lives there: tokens, the
   photo band, cards, chips, figures, the stats tab and panel, the flash.
   This file is only what A1 arranges differently. Same two rules as the
   Dedication file: rules move up to the shared file on their second use,
   and no --gdp- token is redeclared here.

   Colours as rgba are the palette tokens written out, as Dedication does:
     --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)
   ===================================================================== */


/* ---------- screens ---------- */
.gdp-a1-screen{position:relative;}


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

.gdp-a1-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);
}
.gdp-a1-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);
}

/* The two options as cards rather than a select. Which one is in play is
   the one decision on this screen, and a select hides the other choice. */
.gdp-a1-modes{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%;}
.gdp-a1-mode{
  display:flex;flex-direction:column;align-items:flex-start;gap:3px;
  padding:11px 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-a1-mode b{font-size:17px;font-weight:500;letter-spacing:.02em;}
.gdp-a1-mode span{font-family:var(--gdp-font-note);font-size:12px;color:var(--gdp-muted);}
.gdp-a1-mode:hover{border-color:#4a4a4a;}
.gdp-a1-mode.is-on{background:rgba(255,164,0,.12);border-color:var(--gdp-accent);}
.gdp-a1-mode.is-on b{color:var(--gdp-accent);}
.gdp-a1-mode.is-locked{opacity:.4;cursor:not-allowed;}
.gdp-a1-mode:focus-visible{outline:2px solid var(--gdp-win);outline-offset:2px;}

.gdp-a1-lock{
  display:flex;align-items:center;gap:8px;margin:4px 0 8px;
  font-family:var(--gdp-font-note);font-size:12.5px;color:var(--gdp-accent);
}

/* includeDartsSetup() prints a Bootstrap select. Dark, like every other
   field in the system. */
.gdp-a1-darts{width:100%;}
.gdp-a1-darts select,
.gdp-a1-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-a1-darts select:focus,
.gdp-a1-darts .form-control:focus{border-color:var(--gdp-accent);outline:none;box-shadow:none;}
.gdp-a1-darts label,.gdp-a1-darts .app-header-m{
  font-family:var(--gdp-font);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gdp-muted);
}

.gdp-a1-best{margin:6px 0 14px;}
.gdp-a1-figs .gdp-figure{background:rgba(18,18,18,.88);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);}
.gdp-a1-figs{margin-bottom:8px;}
.gdp-a1-first,.gdp-a1-distnote{
  font-family:var(--gdp-font-note);font-size:13.5px;line-height:1.5;color:#cfcfcf;margin:0;
  text-shadow:0 1px 6px rgba(0,0,0,.75);
}
.gdp-a1-distnote .fa-solid{color:var(--gdp-accent);margin-right:4px;}

/* Start in the system's go green, sound a quiet panel button beside it. */
.gdp-a1-start{display:flex;gap:10px;align-items:stretch;flex-wrap:wrap;}
.gdp-a1-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-a1-start .gdp-btn-primary:hover{background:var(--gdp-go-hi);}
.gdp-a1-sound{min-height:56px;}
.gdp-a1-start .gdp-btn:focus-visible{outline:2px solid #fff;outline-offset:2px;}

.gdp-a1-rules{margin:0 0 6px;padding-left:20px;}
.gdp-a1-rules li{
  font-family:var(--gdp-font-note);font-weight:300;font-size:13.5px;line-height:1.6;
  color:var(--gdp-muted);margin-bottom:6px;
}
.gdp-a1-rules li::marker{color:var(--gdp-accent);font-family:var(--gdp-font);}


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

.gdp-a1-stat{display:inline-flex;align-items:baseline;gap:7px;margin-right:10px;}
.gdp-a1-stat b{
  font-family:var(--gdp-font);font-size:22px;font-weight:500;color:var(--gdp-ink);
  font-variant-numeric:tabular-nums;
}
.gdp-a1-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-a1-pausebtn[aria-pressed="true"]{color:var(--gdp-accent);border-color:var(--gdp-accent);}
.gdp-a1-pausebtn:focus-visible{outline:2px solid var(--gdp-accent);outline-offset:2px;}

/* Target on the left, the two buttons on the right. */
.gdp-a1-stage{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,340px);
  gap:24px;align-items:start;margin-top:6px;
}

.gdp-a1-hero{text-align:center;min-width:0;padding-top:4px;}

/* The number is read from the oche, two and a half metres away. */
.gdp-a1-target{
  font-family:var(--gdp-font);font-weight:600;
  font-size:clamp(120px,22vw,250px);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);
  margin:4px 0 2px;
}
.gdp-a1-target.is-bull{font-size:clamp(92px,16vw,190px);letter-spacing:.02em;text-transform:uppercase;}
.gdp-a1-target.is-in{animation:a1TargetIn .55s cubic-bezier(.18,1.4,.4,1);}
@keyframes a1TargetIn{
  0%{opacity:0;transform:translateY(18px) scale(.86);}
  100%{opacity:1;transform:none;}
}

.gdp-a1-bed{
  font-family:var(--gdp-font);font-size:14px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--gdp-muted);margin-bottom:14px;
}

/* Marks. The same five pips on the hero and every tile, so the player
   learns one shape. */
.gdp-a1-pips{display:inline-flex;gap:5px;align-items:center;}
.gdp-a1-pips i{
  width:10px;height:10px;border-radius:50%;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);
  transition:background .2s,border-color .2s,transform .2s;
}
.gdp-a1-pips i.is-on{background:var(--gdp-accent);border-color:var(--gdp-accent);}
.gdp-a1-pips.is-hero{gap:10px;}
.gdp-a1-pips.is-hero i{width:22px;height:22px;border-width:2px;}
.gdp-a1-pips.is-hero i.is-on{box-shadow:0 0 14px rgba(255,164,0,.45);}

.gdp-a1-markof{
  font-family:var(--gdp-font-note);font-size:12px;letter-spacing:.08em;color:var(--gdp-muted);margin-top:8px;
}

/* The ghost of the best game on this option. */
.gdp-a1-ghost{
  display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center;
  margin-top:16px;padding:7px 14px;border-radius:999px;
  font-family:var(--gdp-font);font-size:14px;letter-spacing:.03em;color:var(--gdp-muted);
  background:rgba(12,12,12,.72);border:1px solid rgba(255,255,255,.1);
}
.gdp-a1-ghost em{font-style:normal;font-family:var(--gdp-font-note);font-size:11.5px;opacity:.75;}
.gdp-a1-ghost.is-ahead{color:var(--gdp-win);border-color:rgba(61,220,132,.45);}
.gdp-a1-ghost.is-behind{color:#ffb0aa;border-color:rgba(255,90,82,.4);}
.gdp-a1-ghost.is-level{color:var(--gdp-ink);}

/* ---------- the controls ---------- */
.gdp-a1-controls{display:flex;flex-direction:column;gap:12px;}
.gdp-a1-btn{
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  min-height:110px;padding:14px;border-radius:14px;cursor:pointer;
  font-family:var(--gdp-font);color:var(--gdp-ink);
  transition:background-color .12s,border-color .12s,transform .08s;
}
.gdp-a1-btn-l{font-size:38px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;line-height:1;}
.gdp-a1-btn small{font-family:var(--gdp-font-note);font-size:12.5px;opacity:.8;}
.gdp-a1-btn kbd{
  position:absolute;top:9px;right:11px;padding:1px 7px;border-radius:5px;
  font-family:var(--gdp-font);font-size:12px;background:rgba(0,0,0,.28);color:inherit;opacity:.7;box-shadow:none;
}
.gdp-a1-btn.is-hit{background-color:rgba(44,138,90,.78);border:1px solid var(--gdp-win);}
.gdp-a1-btn.is-hit:hover{background-color:rgba(55,165,109,.9);}
.gdp-a1-btn.is-miss{background-color:rgba(255,90,82,.62);border:1px solid var(--gdp-bust);}
.gdp-a1-btn.is-miss:hover{background-color:rgba(255,90,82,.78);}
.gdp-a1-btn:active{transform:scale(.98);}
.gdp-a1-btn:disabled{opacity:.4;cursor:not-allowed;transform:none;}
.gdp-a1-btn:focus-visible{outline:3px solid #fff;outline-offset:3px;}

.gdp-a1-undo{
  align-self:center;margin-top:6px;padding:9px 20px;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-a1-undo:hover:not(:disabled){border-color:#4a4a4a;color:var(--gdp-ink);}
.gdp-a1-undo:disabled{opacity:.35;cursor:default;}
.gdp-a1-undo:focus-visible{outline:2px solid var(--gdp-accent);outline-offset:2px;}

/* ---------- the board of targets ---------- */
.gdp-a1-board{
  list-style:none;margin:26px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:8px;
}
.gdp-a1-tile{
  position:relative;display:flex;flex-direction:column;align-items:center;gap:7px;
  padding:12px 4px 10px;border-radius:11px;
  background:rgba(18,18,18,.82);border:1px solid rgba(255,255,255,.1);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  transition:border-color .2s,background .2s,transform .2s,opacity .2s;
}
.gdp-a1-tile-n{font-family:var(--gdp-font);font-size:28px;font-weight:500;line-height:1;font-variant-numeric:tabular-nums;}
.gdp-a1-tile .gdp-a1-pips{gap:3px;}
.gdp-a1-tile .gdp-a1-pips i{width:8px;height:8px;}
.gdp-a1-tile-meta{
  min-height:14px;font-family:var(--gdp-font-note);font-size:10.5px;letter-spacing:.04em;color:var(--gdp-muted);
}

.gdp-a1-tile.is-active{
  background:#1a1305;border-color:var(--gdp-accent);transform:translateY(-3px);
  box-shadow:0 8px 24px rgba(0,0,0,.45),0 0 0 1px rgba(255,164,0,.25);
}
.gdp-a1-tile.is-active .gdp-a1-tile-n{color:var(--gdp-accent);}

/* Closed: locked out of the loop. Green along the top, the marks in
   green, the number stepping back. */
.gdp-a1-tile.is-closed{border-top:3px solid var(--gdp-win);padding-top:10px;}
.gdp-a1-tile.is-closed .gdp-a1-tile-n{color:var(--gdp-muted);}
.gdp-a1-tile.is-closed .gdp-a1-pips i.is-on{background:var(--gdp-win);border-color:var(--gdp-win);}
.gdp-a1-tile.is-closed .gdp-a1-tile-meta{color:var(--gdp-win);}

.gdp-a1-tile.fx-hit{animation:a1Hit .5s ease-out;}
.gdp-a1-tile.fx-miss{animation:a1Miss .42s ease-out;}
.gdp-a1-tile.fx-closed{animation:a1Closed .9s cubic-bezier(.16,1,.3,1);}
@keyframes a1Hit{
  0%{box-shadow:0 0 0 0 rgba(61,220,132,.7);}
  100%{box-shadow:0 0 0 12px rgba(61,220,132,0);}
}
@keyframes a1Miss{
  0%,100%{transform:translateX(0);}
  25%{transform:translateX(-4px);}
  75%{transform:translateX(4px);}
}
@keyframes a1Closed{
  0%{transform:scale(1);box-shadow:0 0 0 0 rgba(61,220,132,.8);}
  35%{transform:scale(1.1);}
  100%{transform:scale(1);box-shadow:0 0 0 22px rgba(61,220,132,0);}
}

/* ---------- Scolia ---------- */
.gdp-a1-scolia{margin:18px auto 0;max-width:460px;}
/* The distance readout. Deliberately not shaped like a control: no box,
   no fill, no border. A thin rule above separates it from the site's own
   dart boxes, which ARE the controls (tap to correct). */
.gdp-a1-dist{
  display:flex;align-items:center;justify-content:center;gap:18px;
  margin-top:6px;padding-top:12px;border-top:1px solid rgba(255,255,255,.08);
  cursor:default;user-select:none;
}
.gdp-a1-map{width:104px;height:104px;flex:0 0 auto;overflow:visible;}
.gdp-a1-map-ring{fill:none;stroke:rgba(255,255,255,.14);stroke-width:1;}
.gdp-a1-map-ring.is-inner{stroke:rgba(61,220,132,.35);}
.gdp-a1-map-cross{stroke:rgba(255,255,255,.45);stroke-width:.8;}
.gdp-a1-dot circle{fill:#8b8b8b;stroke:#0a0a0a;stroke-width:1.2;}
.gdp-a1-dot text{font-family:var(--gdp-font);font-size:8px;font-weight:600;text-anchor:middle;fill:#0a0a0a;}
.gdp-a1-dot.is-hit circle{fill:var(--gdp-win);}
.gdp-a1-dot.is-small circle{fill:var(--gdp-accent);}
.gdp-a1-dot.is-out circle{stroke-dasharray:1.4 1;}

.gdp-a1-distcol{display:flex;flex-direction:column;align-items:flex-start;gap:5px;min-width:0;}
.gdp-a1-dvals{display:flex;gap:16px;flex-wrap:wrap;}
.gdp-a1-dv{
  display:inline-flex;align-items:baseline;gap:5px;
  font-family:var(--gdp-font);font-size:19px;color:rgba(255,255,255,.7);
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.gdp-a1-dv i{
  font-style:normal;font-family:var(--gdp-font-note);font-size:10px;font-weight:700;
  color:var(--gdp-muted);
}
.gdp-a1-dv small{font-size:11px;margin-left:1px;color:var(--gdp-muted);}
.gdp-a1-dv.is-hit{color:var(--gdp-win);}
.gdp-a1-dv.is-small{color:var(--gdp-accent);}
.gdp-a1-dv.is-empty{color:rgba(255,255,255,.25);}

.gdp-a1-sessdist{display:flex;align-items:baseline;gap:8px;margin-top:2px;}
.gdp-a1-sessdist b{font-family:var(--gdp-font);font-size:17px;font-weight:500;color:var(--gdp-accent);font-variant-numeric:tabular-nums;}

/* The site's own tracked dart boxes, moved in under the target. */
.gdp-a1-scolia .dart-detail-container{padding-top:0;margin-bottom:10px;}

/* ---------- paused ---------- */
.gdp-a1-paused{
  position:absolute;inset:-6px;z-index:20;display:flex;align-items:center;justify-content:center;
  background:rgba(8,8,8,.78);border-radius:var(--gdp-radius);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
}
.gdp-a1-paused-card{text-align:center;max-width:340px;padding:24px;}
.gdp-a1-paused-card p{font-family:var(--gdp-font-note);font-size:14px;color:var(--gdp-muted);margin:10px 0 18px;}
.gdp-a1-paused .gdp-btn-primary{width:auto;padding:13px 40px;}


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

.gdp-a1-result{max-width:820px;margin:0 auto;padding:4px 0 10px;}
.gdp-a1-res-head{text-align:center;margin-bottom:22px;}
.gdp-a1-res-score{display:flex;align-items:baseline;justify-content:center;gap:12px;margin:6px 0 10px;}
.gdp-a1-res-score b{
  font-family:var(--gdp-font);font-weight:600;font-size:clamp(96px,17vw,170px);line-height:.88;color:#fff;
  font-variant-numeric:tabular-nums;text-shadow:0 6px 34px rgba(0,0,0,.85);
}
.gdp-a1-res-score span{
  font-family:var(--gdp-font);font-size:16px;letter-spacing:.24em;text-transform:uppercase;color:var(--gdp-muted);
}
.gdp-a1-pb{
  display:inline-flex;align-items:center;gap:9px;padding:9px 20px;border-radius:999px;
  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:a1Pb 2.4s ease-in-out infinite alternate;
}
.gdp-a1-pb.is-equal,.gdp-a1-pb.is-first{
  background:rgba(255,164,0,.12);color:var(--gdp-accent);border:1px solid rgba(255,164,0,.5);
  box-shadow:none;animation:none;
}
@keyframes a1Pb{from{background-position:0% 50%;}to{background-position:100% 50%;}}

.gdp-a1-res-line{font-family:var(--gdp-font-note);font-size:14px;color:var(--gdp-muted);margin:12px 0 0;}
.gdp-a1-res-line.is-accent{color:var(--gdp-accent);text-align:center;margin:-8px 0 16px;}

.gdp-a1-res-figs{grid-template-columns:repeat(var(--a1-n,5),minmax(0,1fr));}
.gdp-a1-res-figs .gdp-figure{background:rgba(18,18,18,.88);}
.gdp-a1-res-figs .gdp-figure.is-best b{color:var(--gdp-accent);}

/* Target by target. */
.gdp-a1-table{display:flex;flex-direction:column;gap:4px;margin-bottom:20px;}
.gdp-a1-tr{
  display:grid;grid-template-columns:60px 66px minmax(0,1fr);align-items:center;gap:12px;
  padding:7px 12px;border-radius:9px;background:rgba(18,18,18,.82);border:1px solid rgba(255,255,255,.06);
  font-family:var(--gdp-font);font-variant-numeric:tabular-nums;
}
.gdp-a1-table.has-avg .gdp-a1-tr{grid-template-columns:60px 66px minmax(0,1fr) 66px;}
.gdp-a1-tr.is-head{
  background:none;border-color:transparent;padding-top:0;padding-bottom:2px;
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--gdp-muted);
}
.gdp-a1-td-t{font-size:18px;}
.gdp-a1-td-n{font-size:18px;text-align:right;}
.gdp-a1-td-a{font-size:14px;text-align:right;color:var(--gdp-muted);}
.gdp-a1-td-bar{position:relative;height:10px;border-radius:5px;background:rgba(255,255,255,.06);}
.gdp-a1-td-bar i{position:absolute;left:0;top:0;bottom:0;border-radius:5px;background:#7f8b99;}
/* The player's own average, as a tick on the bar. */
.gdp-a1-td-bar em{position:absolute;top:-4px;bottom:-4px;width:2px;margin-left:-1px;background:#fff;opacity:.85;border-radius:1px;}
.gdp-a1-tr.is-better .gdp-a1-td-bar i{background:var(--gdp-win);}
.gdp-a1-tr.is-better .gdp-a1-td-n{color:var(--gdp-win);}
.gdp-a1-tr.is-worse .gdp-a1-td-bar i{background:var(--gdp-bust);}

.gdp-a1-upsell{margin:6px 0 20px;}

.gdp-a1-res-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;}
.gdp-a1-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-a1-res-actions .gdp-btn-primary:hover{background:var(--gdp-go-hi);}
.gdp-a1-res-actions .gdp-btn:focus-visible{outline:2px solid #fff;outline-offset:2px;}

.gdp-a1-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-a1-save.is-ok{color:var(--gdp-win);}
.gdp-a1-save.is-error{color:#ffb0aa;}
.gdp-a1-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);
}


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

.gdp-stats-head .gdp-a1-smodes{margin-left:auto;margin-right:10px;}
.gdp-a1-stfigs{grid-template-columns:repeat(6,minmax(0,1fr));}
.gdp-a1-stfigs .gdp-figure.is-best b{color:var(--gdp-accent);}
.gdp-a1-stfigs .gdp-figure b{font-size:clamp(18px,2.1vw,26px);}

.gdp-a1-tbars{display:flex;flex-direction:column;gap:6px;}
.gdp-a1-tbar{display:grid;grid-template-columns:48px minmax(0,1fr) 44px;align-items:center;gap:10px;}
.gdp-a1-tbar span{font-family:var(--gdp-font);font-size:15px;}
.gdp-a1-tbar i{position:relative;height:12px;border-radius:6px;background:rgba(255,255,255,.06);overflow:hidden;}
.gdp-a1-tbar i b{position:absolute;left:0;top:0;bottom:0;border-radius:6px;background:#7f8b99;}
.gdp-a1-tbar em{font-style:normal;font-family:var(--gdp-font);font-size:14px;text-align:right;font-variant-numeric:tabular-nums;}
.gdp-a1-tbar.is-slow i b{background:var(--gdp-accent);}
.gdp-a1-tbar.is-slow span,.gdp-a1-tbar.is-slow em{color:var(--gdp-accent);}
.gdp-a1-hint{font-family:var(--gdp-font-note);font-size:13px;color:var(--gdp-muted);margin:12px 0 0;}

.gdp-a1-hist{margin-top:0;}
.gdp-session.is-a1{grid-template-columns:9px 86px minmax(0,1fr) 56px 64px 56px;cursor:default;}
.gdp-session.is-a1:hover{border-color:var(--gdp-line);}
.gdp-session.is-a1.is-head:hover{border-color:transparent;}


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

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

@media(max-width:991px){
  .gdp-a1-stage{grid-template-columns:1fr;gap:16px;}
  .gdp-a1-controls{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
  .gdp-a1-undo{grid-column:1 / -1;}
  .gdp-a1-board{grid-template-columns:repeat(5,minmax(0,1fr));}
  .gdp-a1-res-figs{grid-template-columns:repeat(3,minmax(0,1fr));}
}

@media(max-width:760px){
  .gdp-session.is-a1{grid-template-columns:9px 86px minmax(0,1fr);}
}

@media(max-width:600px){
  .gdp-a1-modes{grid-template-columns:1fr;}
  .gdp-a1-stat{margin-right:4px;}
  .gdp-a1-stat b{font-size:18px;}
  .gdp-a1-btn{min-height:92px;}
  .gdp-a1-btn-l{font-size:30px;}
  .gdp-a1-board{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;}
  .gdp-a1-tile-n{font-size:24px;}
  .gdp-a1-pips.is-hero i{width:18px;height:18px;}
  .gdp-a1-res-figs{grid-template-columns:repeat(2,minmax(0,1fr));}
  .gdp-a1-stfigs{grid-template-columns:repeat(2,minmax(0,1fr));}
  .gdp-a1-tr,.gdp-a1-table.has-avg .gdp-a1-tr{grid-template-columns:48px 44px minmax(0,1fr);}
  .gdp-a1-table.has-avg .gdp-a1-td-a{display:none;}
  .gdp-stats-head .gdp-a1-smodes{order:3;flex:1 1 100%;margin:0;}
}

@media(prefers-reduced-motion:reduce){
  .gdp-a1-target.is-in,.gdp-a1-tile.fx-hit,.gdp-a1-tile.fx-miss,.gdp-a1-tile.fx-closed,.gdp-a1-pb{animation:none;}
  .gdp-a1-tile.is-active{transform:none;}
}

@media(max-width:600px){
  .gdp-a1-table.has-avg .gdp-a1-tr.is-head span:last-child{display:none;}
}



/* A unit inside a figure card. gdp-game.css styles every span in a card
   as the label underneath it, which drops the unit onto its own line.
   Dedication carries the same override: this is its second use, so it is
   ready to move up into gdp-game.css. */
.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;}

/* The tab sits on the right edge at the height of the target once the
   layout stacks. Lifted clear on the setup screen, as Dedication does,
   and stood down while a game is on, where nothing should cover the
   number. The result screen carries its own Your stats button. */
@media(max-width:991px){
  .gdp-wrap .gdp-statstab{top:70px;}
}


/* =====================================================================
   THE PHOTOGRAPH
   ---------------------------------------------------------------------
   gdp-game.css paints the player photograph on .gdp-wrap. The frame also
   carries the platform class .container-main-graphic, and the theme's
   rule for that class (the old dartboard graphic) loads later at the same
   specificity, so it won and the photograph never showed.

   Restated here one step more specific, with the shared tokens, so the
   band height, tint, divider and the in-play and result strengths all
   still come from gdp-game.css. If the shared layers change, change these
   to match. The images are A1's own: 2026-back-game-2.webp and
   2026-back-game-2-mobile.webp in /images/2026/.
   ===================================================================== */
.gdp .gdp-wrap.js-a1-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-2.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;
}
@media(max-width:900px){
  .gdp .gdp-wrap.js-a1-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-2-mobile.webp');
  }
}

/* The setup section carries .gdp-screen-setup, so the shared glass panel
   behind the rules applies: the player in the photograph stands right
   behind that column. */
.gdp-screen-setup.gdp-a1-screen .gdp-intro h2:first-child{margin-top:0;}

/* includeDartsSetup() brings its own heading ("Use your darts setup") at
   the theme's size, which shouted next to the quiet OPTION and DARTS
   labels. Brought down to body size. */
.gdp-a1-darts .app-header-m,
.gdp-a1-darts .app-header-s,
.gdp-a1-darts h3,
.gdp-a1-darts h4{
  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;
}

/* Phones: the tab goes up into the empty corner beside the A1 title, and
   the intro line stops short of it rather than running underneath. */
@media(max-width:991px){
  .gdp .gdp-wrap.js-a1-wrap .gdp-statstab{top:16px;}
  .gdp-a1-lede{padding-right:44px;}
}

/* The setup tint. gdp-game.css covers the photograph at .90 on the setup
   screen, which on a real display leaves only the outline of the heads
   along the top edge (owner, 16 October 2026: "no background photo at
   all"). A1's setup is short, so it takes close to the in-play strength.

   This sets shared tokens from a game file, which the Dedication file
   rules out. Scoped to A1's frame and its setup state only, and the
   candidate for a shared class (say .gdp-wrap.is-photo) in gdp-game.css
   if a second game wants the same. */
.gdp .gdp-wrap.js-a1-wrap:not(.is-playing):not(.is-over){
  --gdp-tint-hi:rgba(8,8,8,.60);
  --gdp-tint-lo:rgba(8,8,8,.46);
}

/* The rules panel stands in front of the player, so it lets more of him
   through: lighter ground, more blur to keep the text clean. */
.gdp .gdp-wrap.js-a1-wrap .gdp-screen-setup .gdp-intro{
  background:rgba(10,10,10,.50);
  backdrop-filter:blur(7px);
  -webkit-backdrop-filter:blur(7px);
}
.gdp .gdp-wrap.js-a1-wrap .gdp-screen-setup .gdp-a1-rules li{color:#c9c9c9;}


/* =====================================================================
   REV 6, owner feedback on the in-play screen, 16 October 2026
   ===================================================================== */

/* "Your stats" is for the setup and result screens. During a game it only
   sits on top of the controls, at every width. */
.gdp .gdp-wrap.js-a1-wrap.is-playing .gdp-statstab{display:none;}

/* The divider took too much focus in play, running straight through the
   target and the HIT button. Down to the faint strength the shared file
   uses on the result screen. */
.gdp .gdp-wrap.js-a1-wrap.is-playing{--gdp-divider:rgba(255,164,0,.12);}

/* "LARGE SINGLE" was touching the foot of the number. The number's
   line-height is under 1, so its glyphs reach below its own box; the
   label is pushed clear of that. */
.gdp-a1-target{margin-bottom:0;padding-bottom:.06em;}
.gdp-a1-bed{margin-top:clamp(14px,2.2vw,26px);}

@media(max-width:600px){
  .gdp-a1-dist{gap:12px;}
  .gdp-a1-map{width:88px;height:88px;}
  .gdp-a1-dvals{gap:10px;flex-wrap:nowrap;}
  .gdp-a1-dv{font-size:17px;gap:3px;}
  .gdp-a1-dv small{font-size:10px;}
}

/* ---------- the distance readout on a large screen (rev 8) ----------
   Moved by the script into the right column under Undo. There is a full
   column of empty space there once a board is tracking, so the map and the
   figures go up to a size that reads from the oche. Still information
   only: no box, no fill, a hairline above it and nothing else. */
.gdp-a1-distslot:empty{display:none;}
.gdp-a1-controls .gdp-a1-distslot{margin-top:14px;}

.gdp-a1-dist.is-wide{
  flex-direction:column;align-items:center;gap:14px;
  margin-top:0;padding-top:18px;
}
.gdp-a1-dist.is-wide .gdp-a1-map{width:min(220px,100%);height:auto;aspect-ratio:1/1;}
.gdp-a1-dist.is-wide .gdp-a1-dot text{font-size:7px;}
.gdp-a1-dist.is-wide .gdp-a1-distcol{align-items:stretch;width:100%;gap:8px;}
.gdp-a1-dist.is-wide .gdp-a1-distcol > .gdp-label{text-align:center;}

/* Three across, each figure in its own column under its dart number, so
   the eye goes 1, 2, 3 the same way the site's dart boxes do. */
.gdp-a1-dist.is-wide .gdp-a1-dvals{
  display:grid;grid-template-columns:repeat(3,1fr);gap:6px;
}
.gdp-a1-dist.is-wide .gdp-a1-dv{
  flex-direction:column;align-items:center;gap:2px;
  font-size:32px;line-height:1;
}
.gdp-a1-dist.is-wide .gdp-a1-dv i{font-size:11px;letter-spacing:.14em;order:-1;}
.gdp-a1-dist.is-wide .gdp-a1-dv small{font-size:12px;margin:2px 0 0;}

.gdp-a1-dist.is-wide .gdp-a1-sessdist{
  justify-content:center;margin-top:8px;padding-top:10px;
  border-top:1px solid rgba(255,255,255,.06);
}
.gdp-a1-dist.is-wide .gdp-a1-sessdist b{font-size:24px;}

/* =====================================================================
   REV 9: the "Removing darts" popup widened the page on phones
   ---------------------------------------------------------------------
   viewparts/autotrack/auto-track-correction.php wraps the panel in
   .dart-retrieve-container.mobile-padding-content, positioned and padded
   by the theme. The panel inside is capped (max-width:100%), but its
   wrapper ran past the right edge of the screen, the page grew sideways
   and the white body showed as a strip down the right-hand side.

   Two guards, both inside A1's frame only:
     1. The wrapper is pinned to the frame's own edges and can be no
        wider than it, whatever position and padding the theme gives it.
     2. The frame clips anything that still reaches past its sides.
        overflow-x:clip, not hidden: hidden would turn the frame into a
        scroll container and break the sticky header in the stats list.
   ===================================================================== */
.gdp .gdp-wrap.js-a1-wrap{overflow-x:clip;}

.gdp .gdp-wrap.js-a1-wrap .dart-retrieve-container{
  left:0;
  right:0;
  width:auto;
  max-width:100%;
  margin-left:0;
  margin-right:0;
  box-sizing:border-box;
}
@media(max-width:600px){
  .gdp .gdp-wrap.js-a1-wrap .dart-retrieve-container{padding-left:12px;padding-right:12px;}
}
.gdp .gdp-wrap.js-a1-wrap .gdp-retrieve{width:600px;max-width:100%;box-sizing:border-box;}


/* =====================================================================
   REV 10: the hit, and the number changing
   ===================================================================== */

/* The number sits in a box of its own so the outgoing copy can be laid
   exactly over it while the new one comes in. */
.gdp-a1-targetbox{position:relative;margin:4px 0 2px;}
.gdp-a1-targetbox .gdp-a1-target{margin:0;position:relative;z-index:1;}

/* ---------- the number changing ----------
   Out: up, smaller, blurred, gone. In: from below, a little late, with a
   slight overshoot so it lands rather than appears. */
.gdp-a1-target.is-out{
  position:absolute;left:0;right:0;top:0;z-index:2;pointer-events:none;
  animation:a1NumOut .5s cubic-bezier(.4,0,.2,1) forwards;
}
.gdp-a1-target.is-out.was-hit{color:var(--gdp-win);text-shadow:0 0 42px rgba(61,220,132,.55),0 6px 34px rgba(0,0,0,.85);}
.gdp-a1-target.is-out.was-closed{color:#ffd451;text-shadow:0 0 50px rgba(255,164,0,.6),0 6px 34px rgba(0,0,0,.85);}
.gdp-a1-target.is-out.was-miss{color:rgba(255,255,255,.5);}
@keyframes a1NumOut{
  0%  {opacity:1;transform:none;filter:blur(0);}
  100%{opacity:0;transform:translateY(-24%) scale(.84);filter:blur(7px);}
}
.gdp-a1-target.is-in{animation:a1NumIn .62s cubic-bezier(.18,1.3,.4,1) .08s both;}
@keyframes a1NumIn{
  0%  {opacity:0;transform:translateY(26%) scale(.9);filter:blur(6px);}
  60% {opacity:1;filter:blur(0);}
  100%{opacity:1;transform:none;filter:blur(0);}
}

/* ---------- the hit ----------
   The number swells and glows green; behind it a soft glow, two rings and
   a ring of sparks go out. The fifth mark, closing the target, is the
   same in gold and larger. */
.gdp-a1-target.fx-hit{animation:a1NumHit .7s cubic-bezier(.2,1.4,.4,1);}
.gdp-a1-target.fx-closed{animation:a1NumClosed .95s cubic-bezier(.2,1.4,.4,1);}
@keyframes a1NumHit{
  0%  {transform:scale(1);}
  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);}
  100%{transform:scale(1);}
}
@keyframes a1NumClosed{
  0%  {transform:scale(1);}
  30% {transform:scale(1.12);color:#fff1c2;text-shadow:0 0 60px rgba(255,164,0,.8),0 6px 34px rgba(0,0,0,.85);}
  100%{transform:scale(1);}
}

.gdp-a1-burst{
  position:absolute;left:50%;top:48%;width:0;height:0;z-index:0;pointer-events:none;
  --c:var(--gdp-win);--cs:61,220,132;--rs:190px;
}
.gdp-a1-burst.is-closed{--c:var(--gdp-accent);--cs:255,164,0;--rs:250px;}
.gdp-a1-burst i{position:absolute;display:block;opacity:0;}
.gdp-a1-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-a1-ring{
  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-a1-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-a1-burst.is-on .gdp-a1-glow{animation:a1Glow .9s ease-out forwards;}
.gdp-a1-burst.is-on .gdp-a1-ring{animation:a1Ring .85s cubic-bezier(.16,1,.3,1) forwards;}
.gdp-a1-burst.is-on .gdp-a1-ring.is-2{animation-delay:.13s;border-width:2px;}
.gdp-a1-burst.is-on .gdp-a1-spark{animation:a1Spark .8s cubic-bezier(.16,1,.3,1) var(--t,0s) forwards;}
@keyframes a1Glow{0%{opacity:0;transform:scale(.5);}25%{opacity:1;}100%{opacity:0;transform:scale(1.15);}}
@keyframes a1Ring{0%{opacity:.95;transform:scale(.25);}100%{opacity:0;transform:scale(1.55);}}
@keyframes a1Spark{
  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);}
}

/* The mark that was just earned pops in. */
.gdp-a1-pips.is-hero i.is-pop{animation:a1Pip .6s cubic-bezier(.18,1.6,.4,1);}
@keyframes a1Pip{
  0%  {transform:scale(.3);background:var(--gdp-win);border-color:var(--gdp-win);box-shadow:0 0 0 0 rgba(61,220,132,.8);}
  45% {transform:scale(1.35);background:var(--gdp-win);border-color:var(--gdp-win);box-shadow:0 0 0 10px rgba(61,220,132,0);}
  100%{transform:scale(1);}
}

@media(prefers-reduced-motion:reduce){
  .gdp-a1-target.is-in,.gdp-a1-target.fx-hit,.gdp-a1-target.fx-closed,
  .gdp-a1-pips.is-hero i.is-pop{animation:none;}
  .gdp-a1-target.is-out,.gdp-a1-burst{display:none;}
}


/* =====================================================================
   REV 11: a more compact game screen
   ---------------------------------------------------------------------
   With a board tracking, the frame was 928px tall on a 1280x800 screen,
   so the target row sat below the fold on an ordinary laptop. The right
   column set the height: two stacked 110px buttons, then the distance
   readout stacked underneath them. Now:
     - HIT and MISS side by side, shorter
     - the readout laid out across (map left, figures right)
     - the number, the site's dart boxes and the target row tightened
   ===================================================================== */

.gdp-a1-screen.js-a1-play .gdp-bar{margin-bottom:4px;}
.gdp-a1-stage{gap:22px;margin-top:0;}

/* ---------- the number and its marks ---------- */
.gdp-a1-target{font-size:clamp(110px,17vw,200px);}
.gdp-a1-target.is-bull{font-size:clamp(84px,12.5vw,150px);}
.gdp-a1-bed{margin-top:clamp(10px,1.4vw,16px);margin-bottom:10px;font-size:13px;}
.gdp-a1-pips.is-hero{gap:8px;}
.gdp-a1-pips.is-hero i{width:18px;height:18px;}
.gdp-a1-markof{margin-top:5px;}
.gdp-a1-ghost{margin-top:10px;padding:5px 13px;font-size:13px;}

/* The site's own dart boxes, under the number: same boxes, less air. */
.gdp-a1-scolia{margin-top:12px;}
.gdp-a1-scolia .dart-detail{padding-top:6px;padding-bottom:6px;}
.gdp-a1-scolia .dart-detail .app-header-xl{font-size:32px;line-height:1.1;}
.gdp-a1-scolia .dart-detail .app-header-m{font-size:14px;}
.gdp-a1-scolia .js-hide-autotrack-darts{padding-top:4px;padding-bottom:0;font-size:13px;letter-spacing:.14em;}

/* ---------- HIT and MISS side by side ---------- */
.gdp-a1-controls{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-content:start;}
.gdp-a1-controls .gdp-a1-undo,
.gdp-a1-controls .gdp-a1-distslot{grid-column:1 / -1;}
.gdp-a1-btn{min-height:96px;padding:12px 10px;border-radius:12px;}
.gdp-a1-btn-l{font-size:32px;}
.gdp-a1-btn small{font-size:12px;}
.gdp-a1-undo{margin-top:2px;padding:7px 18px;}
.gdp-a1-controls .gdp-a1-distslot{margin-top:6px;}

/* ---------- the readout in the right column, across ---------- */
.gdp-a1-dist.is-wide{
  flex-direction:row;align-items:center;gap:16px;padding-top:12px;
}
.gdp-a1-dist.is-wide .gdp-a1-map{width:128px;flex:0 0 128px;}
.gdp-a1-dist.is-wide .gdp-a1-distcol{gap:6px;}
.gdp-a1-dist.is-wide .gdp-a1-distcol > .gdp-label{text-align:left;}
.gdp-a1-dist.is-wide .gdp-a1-dv{font-size:26px;}
.gdp-a1-dist.is-wide .gdp-a1-dv small{font-size:11px;}
.gdp-a1-dist.is-wide .gdp-a1-sessdist{justify-content:flex-start;margin-top:4px;padding-top:7px;}
.gdp-a1-dist.is-wide .gdp-a1-sessdist b{font-size:20px;}

/* ---------- the target row ---------- */
.gdp-a1-board{margin-top:16px;gap:7px;}
.gdp-a1-tile{padding:8px 4px 7px;gap:5px;}
.gdp-a1-tile.is-closed{padding-top:6px;}
.gdp-a1-tile-n{font-size:24px;}
.gdp-a1-tile-meta{min-height:12px;font-size:10px;}

/* ---------- phones ---------- */
@media(max-width:600px){
  .gdp-a1-target{font-size:clamp(96px,30vw,130px);}
  .gdp-a1-btn{min-height:74px;}
  .gdp-a1-btn-l{font-size:26px;}
  .gdp-a1-btn small{font-size:11px;}
  .gdp-a1-pips.is-hero i{width:16px;height:16px;}
  .gdp-a1-board{margin-top:12px;gap:5px;}
  .gdp-a1-tile{padding:6px 3px;}
  .gdp-a1-tile-n{font-size:21px;}
  .gdp-a1-scolia .dart-detail .app-header-xl{font-size:26px;}
}

/* The shared frame has a 700px floor so it does not jump about. In play
   A1 now needs about 525px by hand and 630px with a board, so the floor
   comes down to 640: still above both, so the frame keeps one height
   when the Scolia readout appears, and 60px nearer to fitting a laptop. */
@media(min-width:992px){
  .gdp .gdp-wrap.js-a1-wrap.is-playing{min-height:640px;}
}
.gdp-a1-controls .gdp-a1-undo{justify-self:center;width:auto;}
.gdp-a1-dist.is-wide .gdp-a1-dv{font-size:24px;}
.gdp-a1-dist.is-wide .gdp-a1-dvals{gap:4px;}


/* =====================================================================
   REV 12: Your stats, recent games open to show each target
   ===================================================================== */

/* The averages take a narrow column now; the game list gets the room,
   since that is where the detail opens. */
@media(min-width:901px){
  .gdp-stats-grid.gdp-a1-stgrid{grid-template-columns:minmax(220px,270px) minmax(0,1fr);gap:28px;}
}
.gdp-a1-stgrid .gdp-a1-tbar{grid-template-columns:38px minmax(0,1fr) 34px;gap:8px;}
.gdp-a1-stgrid .gdp-a1-tbar span{font-size:14px;}
.gdp-a1-stgrid .gdp-a1-tbar i{height:9px;}
.gdp-a1-stgrid .gdp-a1-tbar em{font-size:13px;}
.gdp-a1-stgrid .gdp-a1-tbars{gap:7px;}
.gdp-a1-stgrid .gdp-stats-list{margin-top:0;}

/* ---------- the row is a button ---------- */
button.gdp-session.is-a1{
  width:100%;text-align:left;color:inherit;background:none;font:inherit;
  font-family:var(--gdp-font);cursor:pointer;
  grid-template-columns:9px 86px minmax(0,1fr) 56px 64px 56px 16px;
}
.gdp-session.is-a1.is-head{grid-template-columns:9px 86px minmax(0,1fr) 56px 64px 56px 16px;}
button.gdp-session.is-a1:hover{border-color:var(--gdp-accent);}
button.gdp-session.is-a1:focus-visible{outline:2px solid var(--gdp-accent);outline-offset:2px;}
button.gdp-session.is-a1.is-on{
  border-color:var(--gdp-accent);background:#1a1305;
  border-bottom-left-radius:0;border-bottom-right-radius:0;margin-bottom:0;
}
.gdp-a1-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-a1.is-on .gdp-a1-chev{transform:rotate(-135deg) translate(-2px,-2px);border-color:var(--gdp-accent);}

/* ---------- the opened game ---------- */
.gdp-a1-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 12px;margin-bottom:6px;
  animation:a1Open .22s ease-out;
}
.gdp-a1-gdetail[hidden]{display:none;}
@keyframes a1Open{from{opacity:0;transform:translateY(-4px);}to{opacity:1;transform:none;}}

.gdp-a1-gdetail-h{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px;}
.gdp-a1-gkey{
  display:inline-flex;align-items:center;gap:5px;flex-wrap:wrap;
  font-family:var(--gdp-font-note);font-size:11px;color:var(--gdp-muted);
}
.gdp-a1-gkey i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-left:6px;}
.gdp-a1-gkey i.is-better{background:var(--gdp-win);}
.gdp-a1-gkey i.is-worse{background:var(--gdp-bust);}
.gdp-a1-gkey i.is-avg{width:10px;height:2px;background:#fff;border-radius:1px;}

/* A bar per target, as tall as the round it closed in. */
.gdp-a1-gbars{display:grid;grid-template-columns:repeat(var(--n,9),minmax(0,1fr));gap:6px;align-items:end;}
.gdp-a1-gt{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0;}
.gdp-a1-gt em{
  font-style:normal;font-family:var(--gdp-font);font-size:16px;
  font-variant-numeric:tabular-nums;color:var(--gdp-ink);line-height:1;
}
.gdp-a1-gt i{
  position:relative;display:block;width:100%;max-width:34px;height:84px;
  border-radius:5px;background:rgba(255,255,255,.05);overflow:visible;
}
.gdp-a1-gt i b{position:absolute;left:0;right:0;bottom:0;border-radius:5px;background:#7f8b99;
  animation:a1Grow .45s cubic-bezier(.2,1,.3,1) both;transform-origin:bottom;}
@keyframes a1Grow{from{transform:scaleY(0);}to{transform:scaleY(1);}}
/* The player's own average for this target, a white tick across the bar. */
.gdp-a1-gt i u{position:absolute;left:-3px;right:-3px;height:2px;margin-bottom:-1px;background:#fff;opacity:.85;border-radius:1px;}
.gdp-a1-gt span{font-family:var(--gdp-font);font-size:13px;color:var(--gdp-muted);}
.gdp-a1-gt.is-better i b{background:var(--gdp-win);}
.gdp-a1-gt.is-better em{color:var(--gdp-win);}
.gdp-a1-gt.is-worse i b{background:var(--gdp-bust);}
.gdp-a1-gt.is-worse em{color:#ffb0aa;}
.gdp-a1-gt.is-none em{color:var(--gdp-muted);}
/* The target that closed last, which set the score. */
.gdp-a1-gt.is-last span{color:var(--gdp-accent);}

.gdp-a1-gmeta{
  margin:10px 0 0;font-family:var(--gdp-font-note);font-size:12px;color:var(--gdp-muted);
}
.gdp-a1-gmeta b{font-family:var(--gdp-font);font-weight:500;font-size:13.5px;color:var(--gdp-ink);}

@media(max-width:760px){
  button.gdp-session.is-a1{grid-template-columns:9px 86px minmax(0,1fr) 16px;}
  button.gdp-session.is-a1 .gdp-a1-chev{grid-column:4;grid-row:1;}
  .gdp-a1-gbars{gap:3px;}
  .gdp-a1-gt i{height:64px;}
  .gdp-a1-gt em{font-size:14px;}
  .gdp-a1-gt span{font-size:11px;}
}
@media(prefers-reduced-motion:reduce){
  .gdp-a1-gdetail,.gdp-a1-gt i b{animation:none;}
}


/* =====================================================================
   REV 13: a larger distance readout in the right column
   ---------------------------------------------------------------------
   On the live site the dart boxes on the left are about 140px tall, so
   the left column reaches well below the readout and the right column had
   some 240px spare. The readout goes back to stacked (map on top, figures
   under it) and grows into that space. Measured with 140px dart boxes it
   still finishes above the left column, so the frame keeps its height.
   ===================================================================== */
.gdp-a1-dist.is-wide{
  flex-direction:column;align-items:center;gap:12px;padding-top:14px;
}
.gdp-a1-dist.is-wide .gdp-a1-map{width:172px;flex:0 0 auto;height:auto;aspect-ratio:1/1;}
.gdp-a1-dist.is-wide .gdp-a1-dot text{font-size:7px;}
.gdp-a1-dist.is-wide .gdp-a1-distcol{align-items:stretch;width:100%;gap:8px;}
.gdp-a1-dist.is-wide .gdp-a1-distcol > .gdp-label{text-align:center;font-size:12px;}
.gdp-a1-dist.is-wide .gdp-a1-dvals{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;}
.gdp-a1-dist.is-wide .gdp-a1-dv{
  flex-direction:column;align-items:center;gap:3px;font-size:36px;line-height:1;
}
.gdp-a1-dist.is-wide .gdp-a1-dv i{font-size:11px;letter-spacing:.14em;order:-1;}
.gdp-a1-dist.is-wide .gdp-a1-dv small{font-size:12px;margin:2px 0 0;}
.gdp-a1-dist.is-wide .gdp-a1-sessdist{
  justify-content:center;margin-top:6px;padding-top:10px;
  border-top:1px solid rgba(255,255,255,.06);
}
.gdp-a1-dist.is-wide .gdp-a1-sessdist .gdp-label{font-size:12px;}
.gdp-a1-dist.is-wide .gdp-a1-sessdist b{font-size:28px;}


/* =====================================================================
   REV 14: what the circles are centred on
   ---------------------------------------------------------------------
   "CENTER OF" over the current target, large and faint inside the map,
   under the rings' crosshair and the darts. Sized in the map's own units
   (the viewBox is 112 across), so it scales with the map at any width.
   ===================================================================== */
.gdp-a1-map-label text{
  text-anchor:middle;font-family:var(--gdp-font);fill:#fff;
  pointer-events:none;user-select:none;
}
.gdp-a1-map-label .is-sm{font-size:6.5px;letter-spacing:.24em;font-weight:500;fill-opacity:.42;}
.gdp-a1-map-label .is-lg{font-size:36px;font-weight:600;fill-opacity:.13;letter-spacing:-.01em;}
.gdp-a1-map-label .is-lg.is-bull{font-size:21px;letter-spacing:.04em;}
/* The crosshair sits on the number, so it steps back a little. */
.gdp-a1-map-cross{stroke:rgba(255,255,255,.32);}
/* On the small phone map, the large number only: the small words would
   be under 6px there. */
@media(max-width:991px){
  .gdp-a1-map-label .is-sm{display:none;}
  .gdp-a1-map-label .is-lg{transform:translateY(-1px);font-size:40px;}
  .gdp-a1-map-label .is-lg.is-bull{font-size:23px;}
}


/* =====================================================================
   REV 15: dart boxes and score as in 501
   ---------------------------------------------------------------------
   The boxes are the site's own, styled by gdp-game.css exactly as in 501
   (dark green ground, green border, green score, muted sector). Rev 11
   shrank the text inside them to save height, but the theme keeps the
   boxes tall, so the score sat at the top of an empty box. Back to the 501
   proportions, with the content centred, and the score number larger.
   ===================================================================== */
.gdp-a1-target{font-size:clamp(120px,19vw,240px);}
.gdp-a1-target.is-bull{font-size:clamp(90px,14vw,176px);}

.gdp-a1-scolia{margin-top:16px;max-width:470px;}
.gdp-a1-scolia .dart-detail-container{padding-top:0;margin-bottom:0;}
.gdp-a1-scolia .dart-detail-wrapper{padding-left:9px;padding-right:9px;}
.gdp-a1-scolia .dart-detail{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-height:132px;padding:10px 4px;
}
.gdp-a1-scolia .dart-detail .app-header-xl,
.gdp-a1-scolia .dart-detail .js-dart-detail-score{
  font-family:var(--gdp-font);font-size:52px;font-weight:500;line-height:1;
}
.gdp-a1-scolia .dart-detail .js-dart-detail-hit{
  font-family:var(--gdp-font);font-size:20px;line-height:1.1;margin-top:8px;min-height:22px;
}
/* The theme's distance line inside each box is not used by A1: the
   readout beside the board carries the distances. */
.gdp-a1-scolia .js-dart-distance{display:none !important;}
/* The boxes stay up for the whole game now, so HIDE has nothing to do. */
.gdp-a1-scolia .js-hide-autotrack-darts{display:none !important;}

@media(max-width:600px){
  .gdp-a1-target{font-size:clamp(100px,32vw,140px);}
  .gdp-a1-scolia .dart-detail-wrapper{padding-left:5px;padding-right:5px;}
  .gdp-a1-scolia .dart-detail{min-height:96px;}
  .gdp-a1-scolia .dart-detail .app-header-xl,
  .gdp-a1-scolia .dart-detail .js-dart-detail-score{font-size:38px;}
  .gdp-a1-scolia .dart-detail .js-dart-detail-hit{font-size:16px;margin-top:5px;}
}


/* =====================================================================
   REV 16: the marks beside the number
   ---------------------------------------------------------------------
   Three columns: the side block, the number, and an empty column the
   same width as the side block, so the number stays on the centre line
   of the hero. The marks stand in a column and fill from the bottom up,
   like a meter; LARGE SINGLE runs up the left of them.
   ===================================================================== */
.gdp-a1-targetrow{
  display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;column-gap:clamp(14px,2.2vw,28px);
  margin:2px 0 4px;
}
.gdp-a1-targetrow .gdp-a1-targetbox{grid-column:2;margin:0;}
.gdp-a1-side{
  grid-column:1;justify-self:end;
  display:flex;align-items:center;gap:clamp(8px,1.2vw,14px);
}
/* Read from the bottom up, along the column it labels. */
.gdp-a1-targetrow .gdp-a1-bed{
  writing-mode:vertical-rl;transform:rotate(180deg);
  margin:0;font-size:12px;letter-spacing:.3em;white-space:nowrap;
  color:rgba(255,255,255,.5);
}
.gdp-a1-sidepips{display:flex;flex-direction:column;align-items:center;gap:8px;}
.gdp-a1-sidepips .gdp-a1-pips.is-hero{flex-direction:column-reverse;gap:11px;}
.gdp-a1-sidepips .gdp-a1-pips.is-hero i{width:22px;height:22px;}
.gdp-a1-sidepips .gdp-a1-markof{margin:0;font-size:11px;letter-spacing:.06em;}

@media(max-width:600px){
  .gdp-a1-targetrow{column-gap:12px;}
  .gdp-a1-side{gap:7px;}
  .gdp-a1-targetrow .gdp-a1-bed{font-size:10px;letter-spacing:.22em;}
  .gdp-a1-sidepips{gap:6px;}
  .gdp-a1-sidepips .gdp-a1-pips.is-hero{gap:7px;}
  .gdp-a1-sidepips .gdp-a1-pips.is-hero i{width:15px;height:15px;}
  .gdp-a1-sidepips .gdp-a1-markof{font-size:10px;}
}


/* =====================================================================
   REV 17: pause covers the dart boxes
   ---------------------------------------------------------------------
   gdp-game.css lifts .dart-detail-container to z-index 1185 (so the 501
   banner sweeps behind it), which put the boxes above A1's pause overlay
   at 20: they stayed bright and the third box covered RESUME. The overlay
   now sits at 1190: over the boxes, still under the site's Scolia popups
   at 1200 (removing darts, score correction), which must stay reachable.
   ===================================================================== */
.gdp .gdp-wrap.js-a1-wrap .gdp-a1-paused{z-index:1190;}
.gdp .gdp-wrap.js-a1-wrap .gdp-a1-paused-card{position:relative;z-index:1;}


/* =====================================================================
   REV 18: coaching tips, early in a game
   ---------------------------------------------------------------------
   Takes the ghost line's place under the number while coaching runs.
   A schematic of the target's segment with the bed that counts lit, and
   one line on what just happened and what a mark needs. Amber edge for
   "not a mark, here is why", green for a mark, plain otherwise.
   ===================================================================== */
.gdp-a1-coach{
  display:flex;align-items:center;gap:14px;
  max-width:470px;margin:10px auto 0;padding:10px 14px 10px 12px;
  text-align:left;border-radius:12px;
  background:rgba(12,12,12,.84);border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  animation:a1CoachIn .3s ease-out;
}
.gdp-a1-coach.is-warn{border-color:rgba(255,164,0,.6);}
.gdp-a1-coach.is-good{border-color:rgba(61,220,132,.6);}
.gdp-a1-coach.is-info{border-color:rgba(255,255,255,.3);}
@keyframes a1CoachIn{from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:none;}}

/* The segment. */
.gdp-a1-cseg{width:38px;height:62px;flex:0 0 38px;overflow:visible;}
.gdp-a1-cseg path{stroke:#0a0a0a;stroke-width:1.5;}
.gdp-a1-cseg .s-small{fill:#2c2c2c;}
.gdp-a1-cseg .s-treble,.gdp-a1-cseg .s-double{fill:#5a2622;}
.gdp-a1-cseg .s-large{fill:var(--gdp-win);}
.gdp-a1-cseg .s-outer{fill:#2c2c2c;stroke:#0a0a0a;stroke-width:1.5;}
.gdp-a1-cseg .s-inner{fill:#2c2c2c;}
.gdp-a1-cseg .s-num{font-family:var(--gdp-font);font-size:30px;font-weight:600;text-anchor:middle;fill:#06301c;}
.gdp-a1-cseg.is-bull .s-large{fill:#2c2c2c;}
.gdp-a1-cseg.is-bull .s-outer,.gdp-a1-cseg.is-bull .s-inner{fill:var(--gdp-win);}

.gdp-a1-cbody{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;min-width:0;flex:1 1 auto;}
.gdp-a1-ctag{
  font-family:var(--gdp-font);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gdp-accent);
}
.gdp-a1-coach.is-good .gdp-a1-ctag{color:var(--gdp-win);}
.gdp-a1-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-a1-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-a1-chide:hover{color:var(--gdp-ink);}
.gdp-a1-chide:focus-visible{outline:2px solid var(--gdp-accent);outline-offset:2px;border-radius:2px;}

/* Each dart of the visit so far: green large single, amber small single,
   grey anything else, an empty ring for a dart still to come. */
.gdp-a1-cdots{display:inline-flex;gap:4px;}
.gdp-a1-cdots i{width:9px;height:9px;border-radius:50%;border:1.5px solid rgba(255,255,255,.3);}
.gdp-a1-cdots i.is-hit{background:var(--gdp-win);border-color:var(--gdp-win);}
.gdp-a1-cdots i.is-small{background:var(--gdp-accent);border-color:var(--gdp-accent);}
.gdp-a1-cdots i.is-miss{background:#777;border-color:#777;}

/* The setting on the setup screen. */
.gdp-a1-tipsopt{
  display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  font-family:var(--gdp-font-note);font-size:13.5px;color:var(--gdp-ink);
}
.gdp-a1-tipsopt input{accent-color:var(--gdp-accent);width:16px;height:16px;margin:0;}

@media(max-width:600px){
  .gdp-a1-coach{gap:10px;padding:9px 11px;}
  .gdp-a1-cseg{width:30px;height:50px;flex-basis:30px;}
  .gdp-a1-cbody p{font-size:12.5px;}
}
@media(prefers-reduced-motion:reduce){ .gdp-a1-coach{animation:none;} }


/* =====================================================================
   REV 22: phones, the whole game on one screen
   ---------------------------------------------------------------------
   On an iPhone the target row was below the fold: number, then the
   buttons under it, then three rows of tiles. Now, up to 600px wide:
     - the number and its marks on the left, HIT / MISS / UNDO stacked on
       the right, side by side;
     - ghost or tip, then the Scolia boxes and readout, full width;
     - the targets in one row of nine (eight on Beginner);
     - the top bar on one line (the option name is on the setup screen).
   The hero's own box steps aside (display:contents) so its parts can be
   placed in the stage grid next to the controls. Larger screens are not
   touched.
   ===================================================================== */
@media(max-width:600px){
  .gdp-a1-screen.js-a1-play .gdp-bar{flex-wrap:nowrap;padding-bottom:6px;margin-bottom:2px;}
  .gdp-a1-screen.js-a1-play .gdp-bar-rules .js-a1-modename,
  .gdp-a1-screen.js-a1-play .gdp-bar-rules span[aria-hidden]{display:none;}
  .gdp-a1-screen.js-a1-play .gdp-bar-actions{gap:2px;}
  .gdp-a1-stat{gap:4px;margin-right:2px;}
  .gdp-a1-stat .gdp-label{font-size:9px;letter-spacing:.1em;}
  .gdp-a1-stat b{font-size:17px;}
  .gdp-a1-pausebtn{width:34px;height:34px;}

  .gdp-a1-stage{
    display:grid;
    grid-template-columns:minmax(0,1fr) 124px;
    grid-template-areas:
      "eyebrow ctrl"
      "target  ctrl"
      "ghost   ghost"
      "coach   coach"
      "scolia  scolia";
    column-gap:12px;row-gap:0;align-items:center;
  }
  .gdp-a1-hero{display:contents;}
  .gdp-a1-hero > .gdp-eyebrow{grid-area:eyebrow;text-align:center;align-self:end;}
  .gdp-a1-hero > .gdp-a1-targetrow{grid-area:target;margin:0;column-gap:8px;}
  .gdp-a1-hero > .gdp-a1-ghost{grid-area:ghost;justify-self:center;margin-top:8px;}
  .gdp-a1-hero > .gdp-a1-coach{grid-area:coach;width:100%;margin-top:8px;}
  .gdp-a1-hero > .gdp-a1-scolia{grid-area:scolia;width:100%;margin-top:10px;}

  /* The number: its column is narrower now, and two digits must still
     fit beside the marks. */
  .gdp-a1-target{font-size:clamp(84px,27vw,118px);}
  .gdp-a1-target.is-bull{font-size:clamp(54px,16vw,72px);}
  .gdp-a1-sidepips .gdp-a1-pips.is-hero{gap:6px;}
  .gdp-a1-sidepips .gdp-a1-pips.is-hero i{width:13px;height:13px;}

  /* HIT, MISS, UNDO stacked on the right. */
  .gdp-a1-controls{
    grid-area:ctrl;display:flex;flex-direction:column;gap:8px;align-self:center;
  }
  .gdp-a1-btn{min-height:66px;padding:8px 6px;border-radius:12px;}
  .gdp-a1-btn-l{font-size:26px;}
  .gdp-a1-btn small{font-size:10.5px;}
  .gdp-a1-btn kbd{display:none;}
  .gdp-a1-controls .gdp-a1-undo{align-self:stretch;margin-top:0;padding:6px 8px;justify-self:auto;}

  /* Scolia: boxes and readout a little shorter. */
  .gdp-a1-scolia .dart-detail{min-height:78px;padding-top:6px;padding-bottom:6px;}
  .gdp-a1-scolia .dart-detail .app-header-xl,
  .gdp-a1-scolia .dart-detail .js-dart-detail-score{font-size:32px;}
  .gdp-a1-scolia .dart-detail .js-dart-detail-hit{font-size:14px;margin-top:3px;min-height:16px;}
  .gdp-a1-dist{margin-top:8px;padding-top:8px;}
  .gdp-a1-map{width:76px;height:76px;}

  /* The targets in one row. */
  .gdp-a1-board{
    display:flex;gap:4px;margin-top:12px;
  }
  .gdp-a1-tile{flex:1 1 0;min-width:0;padding:7px 1px 6px;gap:4px;border-radius:8px;}
  .gdp-a1-tile.is-closed{padding-top:5px;}
  .gdp-a1-tile.is-active{transform:none;}
  .gdp-a1-tile-n{font-size:17px;}
  .gdp-a1-tile[data-t="25"] .gdp-a1-tile-n{font-size:12px;letter-spacing:.02em;}
  .gdp-a1-tile .gdp-a1-pips{gap:1.5px;}
  .gdp-a1-tile .gdp-a1-pips i{width:5px;height:5px;border-width:1px;}
  .gdp-a1-tile-meta{display:none;}
}

/* =====================================================================
   REV 23: phones, the targets on two rows
   ---------------------------------------------------------------------
   One row of nine made the tiles too small to read. Two rows instead:
   20-16 over 15-Bull on Experienced, 20-17 over 16-13 on Beginner (eight
   tiles, found with :has, so the rows stay even). The height the second
   row costs is taken back from the Scolia boxes and the distance map.
   ===================================================================== */
@media(max-width:600px){
  .gdp-a1-board{
    display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;margin-top:10px;
  }
  .gdp-a1-board:has(> .gdp-a1-tile:nth-child(8):last-child){grid-template-columns:repeat(4,minmax(0,1fr));}
  .gdp-a1-tile{padding:7px 2px 7px;gap:5px;border-radius:10px;}
  .gdp-a1-tile.is-closed{padding-top:5px;}
  .gdp-a1-tile-n{font-size:23px;}
  .gdp-a1-tile[data-t="25"] .gdp-a1-tile-n{font-size:19px;letter-spacing:.02em;}
  .gdp-a1-tile .gdp-a1-pips{gap:3px;}
  .gdp-a1-tile .gdp-a1-pips i{width:7px;height:7px;border-width:1px;}

  .gdp-a1-hero > .gdp-a1-scolia{margin-top:8px;}
  .gdp-a1-scolia .dart-detail{min-height:66px;padding-top:4px;padding-bottom:4px;}
  .gdp-a1-scolia .dart-detail .app-header-xl,
  .gdp-a1-scolia .dart-detail .js-dart-detail-score{font-size:28px;}
  .gdp-a1-scolia .dart-detail .js-dart-detail-hit{font-size:13px;margin-top:2px;}
  .gdp-a1-dist{margin-top:6px;padding-top:6px;gap:10px;}
  .gdp-a1-map{width:64px;height:64px;}
  .gdp-a1-distcol{gap:3px;}
}
/* The shorter second row (four tiles under five) sits centred, rather
   than leaving a hole at its end. */
@media(max-width:600px){
  .gdp-a1-board{display:flex;flex-wrap:wrap;justify-content:center;}
  .gdp-a1-board .gdp-a1-tile{flex:0 0 calc((100% - 24px) / 5);}
  .gdp-a1-board:has(> .gdp-a1-tile:nth-child(8):last-child) .gdp-a1-tile{flex-basis:calc((100% - 18px) / 4);}
}


/* =====================================================================
   REV 25: a great dart on the CENTER OF map
   ---------------------------------------------------------------------
   Within 10 mm of the centre of the bed. The dot turns gold and keeps a
   soft pulse until the takeout; the dart that has just landed also sends
   out three sonar rings and a flash of eight short rays. Its distance in
   the readout is gold as well. Sized in the map's own units, so the same
   on the large map and the phone map.
   ===================================================================== */
.gdp-a1-dot.is-great circle.core{
  fill:#ffd451;stroke:#3a2600;
  animation:a1GreatPulse 1.6s ease-in-out infinite;
}
.gdp-a1-dot.is-great text{fill:#2b1c00;}
@keyframes a1GreatPulse{
  0%,100%{filter:drop-shadow(0 0 1.5px rgba(255,212,81,.55));}
  50%    {filter:drop-shadow(0 0 6px rgba(255,212,81,1));}
}

.gdp-a1-dot .gdp-a1-greatfx circle.w{
  fill:none;stroke:#ffd451;stroke-width:1.6;opacity:0;
  transform-box:fill-box;transform-origin:center;
  animation:a1GreatWave 1.25s cubic-bezier(.16,1,.3,1) forwards;
}
.gdp-a1-dot .gdp-a1-greatfx circle.w2{animation-delay:.22s;}
.gdp-a1-dot .gdp-a1-greatfx circle.w3{animation-delay:.44s;}
@keyframes a1GreatWave{
  0%  {opacity:.95;transform:scale(1);stroke-width:2;}
  100%{opacity:0;transform:scale(4.6);stroke-width:.4;}
}

.gdp-a1-dot .gdp-a1-greatfx .ray{
  stroke:#fff1c2;stroke-width:1.6;stroke-linecap:round;opacity:0;
  animation:a1GreatRay .7s ease-out .05s forwards;
}
@keyframes a1GreatRay{
  0%  {opacity:0;stroke-dasharray:0 8;}
  30% {opacity:1;stroke-dasharray:7 8;}
  100%{opacity:0;stroke-dasharray:7 8;stroke-dashoffset:-8;}
}

/* The figure in the readout. */
.gdp-a1-dv.is-great,
.gdp-a1-dist.is-wide .gdp-a1-dv.is-great{
  color:#ffd451;text-shadow:0 0 12px rgba(255,212,81,.55);
}
.gdp-a1-dv.is-great small{color:rgba(255,212,81,.75);}

@media(prefers-reduced-motion:reduce){
  .gdp-a1-dot.is-great circle.core{animation:none;filter:drop-shadow(0 0 3px rgba(255,212,81,.8));}
  .gdp-a1-greatfx{display:none;}
}


/* =====================================================================
   REV 26: tips can be brought back
   ---------------------------------------------------------------------
   Setup: the site's on/off switch (.gdp-switch, from gdp-game.css) with
   the state in words. In play: once the player hides the tips, a small
   "Show tips" button stays in their place while the coaching rounds
   last.
   ===================================================================== */
.gdp-a1-tipsopt.gdp-switch{font-family:var(--gdp-font-note);font-size:13.5px;}
.gdp-a1-tipsstate{
  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-a1-tipsstate.is-off{color:var(--gdp-muted);background:rgba(255,255,255,.08);}

.gdp-a1-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-a1-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-a1-cshow .fa-lightbulb{color:var(--gdp-accent);}
.gdp-a1-cshow:hover{color:var(--gdp-ink);border-color:rgba(255,164,0,.5);}
.gdp-a1-cshow:focus-visible{outline:2px solid var(--gdp-accent);outline-offset:2px;}

/* =====================================================================
   REV 27: distance from the center per number in "Your stats"
   Sits under "Avg round to close" in the same narrow column and uses the
   same bars, so the two read as one set. Shorter is better here too.
   Closest number green, furthest in the accent, the rest neutral.
   ===================================================================== */
.gdp-a1-distnum{margin-top:22px;padding-top:18px;border-top:1px solid rgba(255,255,255,.08);}
.gdp-a1-distnum .gdp-stats-h3{margin-bottom:2px;}
.gdp-a1-distnote{font-family:var(--gdp-font-note);font-size:12px;color:var(--gdp-muted);margin:0 0 10px;}
.gdp-a1-tbar.is-close i b{background:var(--gdp-win);}
.gdp-a1-tbar.is-close span,.gdp-a1-tbar.is-close em{color:var(--gdp-win);}
.gdp-a1-tbar.is-far i b{background:var(--gdp-accent);}
.gdp-a1-tbar.is-far span,.gdp-a1-tbar.is-far em{color:var(--gdp-accent);}

/* The total, the same rule as the bars above it. */
.gdp-a1-distall{
  display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;
  margin-top:12px;padding:9px 12px;border-radius:10px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);
}
.gdp-a1-distall span{
  font-family:var(--gdp-font);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gdp-muted);
}
.gdp-a1-distall b{font-family:var(--gdp-font);font-size:22px;font-weight:600;color:var(--gdp-ink);font-variant-numeric:tabular-nums;}
.gdp-a1-distall b small{font-size:12px;font-weight:400;color:var(--gdp-muted);margin-left:2px;}
.gdp-a1-distall em{font-style:normal;font-family:var(--gdp-font-note);font-size:12px;color:var(--gdp-muted);margin-left:auto;}

/* To the full view: one quiet row the width of the column, the place
   name large and what it holds small above it, so it fits the narrow
   column on one line without shouting louder than the stats. */
.gdp .gdp-a1-pclink{
  display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:16px;
  padding:10px 14px;border-radius:10px;border:1px solid rgba(255,164,0,.35);
  background:rgba(255,164,0,.06);color:var(--gdp-ink);text-decoration:none;
  transition:background .18s ease,border-color .18s ease;
}
.gdp .gdp-a1-pclink span{display:flex;flex-direction:column;font-family:var(--gdp-font);font-size:15px;letter-spacing:.04em;line-height:1.15;}
.gdp .gdp-a1-pclink small{
  font-family:var(--gdp-font);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--gdp-accent);margin-bottom:2px;
}
.gdp .gdp-a1-pclink i{color:var(--gdp-accent);font-size:13px;transition:transform .18s ease;}
.gdp .gdp-a1-pclink:hover,.gdp .gdp-a1-pclink:focus-visible{
  background:rgba(255,164,0,.12);border-color:rgba(255,164,0,.6);color:var(--gdp-ink);text-decoration:none;
}
.gdp .gdp-a1-pclink:focus-visible{outline:2px solid var(--gdp-accent);outline-offset:2px;}
.gdp .gdp-a1-pclink:hover i,.gdp .gdp-a1-pclink:focus-visible i{transform:translateX(3px);}
@media(prefers-reduced-motion:reduce){ .gdp .gdp-a1-pclink,.gdp .gdp-a1-pclink i{transition:none;} }