/* Darts Checkout Calculator — TheDartScout */
/* Scoped under .dcc-wrap to avoid theme conflicts */

.dcc-wrap {
  --dcc-charcoal: #141414;
  --dcc-ink: #1E1E1E;
  --dcc-mid: #595959;
  --dcc-silver: #BDBDBD;
  --dcc-light: #E8E8E8;
  --dcc-cream: #F7F6F3;
  --dcc-white: #FFFFFF;
  --dcc-crimson: #B71C1C;
  --dcc-crimson-dark: #8B1515;
  --dcc-font-primary: 'Outfit', sans-serif;
  --dcc-font-body: 'Source Serif 4', serif;
  --dcc-radius-sm: 6px;
  --dcc-radius-md: 8px;
  --dcc-radius-lg: 12px;
}

.dcc-wrap *, .dcc-wrap *::before, .dcc-wrap *::after { box-sizing: border-box; margin: 0; padding: 0; }

.dcc-wrap {
  font-family: var(--dcc-font-primary);
  color: var(--dcc-charcoal);
  max-width: 480px;
  margin: 0 auto;
  padding: 32px 20px 60px;
}

.dcc-wrap .page-title {
  font-size: 28px;
  font-weight: 700;
  color: var(--dcc-charcoal);
  letter-spacing: -0.5px;
  margin-bottom: 4px;
}
.dcc-wrap .page-subtitle {
  font-family: var(--dcc-font-body);
  font-size: 15px;
  color: var(--dcc-mid);
  margin-bottom: 28px;
}

/* ── Score Display ── */
.dcc-wrap .score-display {
  background: var(--dcc-charcoal);
  border-radius: var(--dcc-radius-lg);
  padding: 28px 24px 20px;
  margin-bottom: 16px;
  position: relative;
  overflow: hidden;
}
.dcc-wrap .score-display::before {
  content: '';
  position: absolute;
  top: -40px; right: -40px;
  width: 160px; height: 160px;
  border-radius: 50%;
  background: rgba(183, 28, 28, 0.08);
  pointer-events: none;
}
.dcc-wrap .score-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--dcc-silver);
  margin-bottom: 6px;
}
.dcc-wrap .score-value {
  font-size: 72px;
  font-weight: 700;
  color: var(--dcc-white);
  line-height: 1;
  letter-spacing: -2px;
  transition: transform 0.15s ease;
}
.dcc-wrap .score-value.pulse { transform: scale(1.04); }
.dcc-wrap .score-meta {
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.dcc-wrap .darts-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(255,255,255,0.1);
  border-radius: 20px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--dcc-silver);
}
.dcc-wrap .darts-badge.one { background: rgba(183,28,28,0.3); color: #f5a5a5; }
.dcc-wrap .darts-badge.two { background: rgba(183,28,28,0.2); color: #f5a5a5; }
.dcc-wrap .darts-badge.three { background: rgba(255,255,255,0.1); color: var(--dcc-silver); }
.dcc-wrap .darts-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.dcc-wrap .bogey-tag {
  display: inline-block;
  background: rgba(183,28,28,0.25);
  color: #f5a5a5;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 20px;
}

/* ── Dart Progress ── */
.dcc-wrap .dart-progress {
  background: var(--dcc-white);
  border: 1px solid var(--dcc-light);
  border-radius: var(--dcc-radius-md);
  padding: 14px 16px;
  margin-bottom: 16px;
  display: none;
}
.dcc-wrap .dart-progress.visible { display: block; }
.dcc-wrap .dp-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--dcc-mid);
  margin-bottom: 10px;
}
.dcc-wrap .dart-slots {
  display: flex;
  gap: 8px;
}
.dcc-wrap .dart-slot {
  flex: 1;
  border: 1.5px solid var(--dcc-light);
  border-radius: var(--dcc-radius-sm);
  padding: 10px 8px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--dcc-mid);
  background: var(--dcc-cream);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  position: relative;
}
.dcc-wrap .dart-slot.active {
  border-color: var(--dcc-crimson);
  background: var(--dcc-white);
  color: var(--dcc-charcoal);
}
.dcc-wrap .dart-slot.scored {
  border-color: var(--dcc-charcoal);
  background: var(--dcc-charcoal);
  color: var(--dcc-white);
}
.dcc-wrap .dart-slot .slot-n { font-size: 10px; font-weight: 500; color: inherit; opacity: 0.7; margin-bottom: 2px; }
.dcc-wrap .dart-slot .slot-val { font-size: 15px; font-weight: 700; }
.dcc-wrap .undo-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px 14px;
  border: 1.5px solid var(--dcc-light);
  border-radius: 8px;
  background: var(--dcc-white);
  color: var(--dcc-mid);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.12s, color 0.12s;
  white-space: nowrap;
}
.dcc-wrap .undo-btn:hover {
  border-color: var(--dcc-crimson);
  color: var(--dcc-crimson);
}

/* ── Checkout Result ── */
.dcc-wrap .checkout-section { display: none; }
.dcc-wrap .checkout-section.visible { display: block; }

.dcc-wrap .checkout-primary {
  background: var(--dcc-white);
  border: 1px solid var(--dcc-light);
  border-radius: var(--dcc-radius-lg);
  padding: 20px;
  margin-bottom: 12px;
}
.dcc-wrap .checkout-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.dcc-wrap .checkout-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--dcc-crimson);
}
.dcc-wrap .checkout-dartscount {
  font-size: 11px;
  font-weight: 600;
  color: var(--dcc-mid);
}

.dcc-wrap .dart-sequence {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.dcc-wrap .dart-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--dcc-cream);
  border: 1px solid var(--dcc-light);
  border-radius: var(--dcc-radius-md);
  padding: 10px 14px;
  min-width: 68px;
}
.dcc-wrap .dart-chip.treble {
  background: var(--dcc-charcoal);
  border-color: var(--dcc-charcoal);
}
.dcc-wrap .dart-chip.double {
  background: var(--dcc-crimson);
  border-color: var(--dcc-crimson);
}
.dcc-wrap .dart-chip.bull-chip {
  background: var(--dcc-crimson);
  border-color: var(--dcc-crimson);
}
.dcc-wrap .dart-chip.single {
  background: var(--dcc-cream);
  border-color: var(--dcc-light);
}
.dcc-wrap .chip-code {
  font-size: 18px;
  font-weight: 700;
  color: var(--dcc-charcoal);
  line-height: 1;
}
.dcc-wrap .dart-chip.treble .chip-code,
.dcc-wrap .dart-chip.double .chip-code,
.dcc-wrap .dart-chip.bull-chip .chip-code { color: var(--dcc-white); }
.dcc-wrap .chip-label {
  font-size: 10px;
  font-weight: 500;
  color: var(--dcc-mid);
  margin-top: 3px;
  white-space: nowrap;
}
.dcc-wrap .dart-chip.treble .chip-label,
.dcc-wrap .dart-chip.double .chip-label,
.dcc-wrap .dart-chip.bull-chip .chip-label { color: rgba(255,255,255,0.65); }
.dcc-wrap .chip-pts {
  font-size: 10px;
  font-weight: 600;
  color: var(--dcc-silver);
  margin-top: 1px;
}
.dcc-wrap .dart-chip.treble .chip-pts,
.dcc-wrap .dart-chip.double .chip-pts,
.dcc-wrap .dart-chip.bull-chip .chip-pts { color: rgba(255,255,255,0.45); }

.dcc-wrap .dart-arrow {
  color: var(--dcc-silver);
  font-size: 14px;
  flex-shrink: 0;
}

/* ── Alt Routes ── */
.dcc-wrap .alt-routes { margin-top: 8px; }
.dcc-wrap .alt-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--dcc-mid);
  margin-bottom: 8px;
  padding-left: 2px;
}
.dcc-wrap .alt-route {
  background: var(--dcc-white);
  border: 1px solid var(--dcc-light);
  border-radius: var(--dcc-radius-md);
  padding: 12px 16px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  transition: border-color 0.15s;
}
.dcc-wrap .alt-route:hover { border-color: var(--dcc-charcoal); }
.dcc-wrap .alt-route-darts {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.dcc-wrap .mini-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 13px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 4px;
  color: var(--dcc-white);
}
.dcc-wrap .mini-chip.treble { background: var(--dcc-charcoal); }
.dcc-wrap .mini-chip.double { background: var(--dcc-crimson); }
.dcc-wrap .mini-chip.single { background: var(--dcc-mid); }
.dcc-wrap .mini-chip.bull-chip { background: var(--dcc-crimson); }
.dcc-wrap .mini-sep { color: var(--dcc-silver); font-size: 12px; }
.dcc-wrap .alt-pts {
  font-size: 12px;
  font-weight: 500;
  color: var(--dcc-mid);
  white-space: nowrap;
  margin-left: 8px;
}

/* ── Bogey / Invalid ── */
.dcc-wrap .bogey-card {
  background: var(--dcc-white);
  border: 1px solid var(--dcc-light);
  border-radius: var(--dcc-radius-lg);
  padding: 24px 20px;
  text-align: center;
  display: none;
}
.dcc-wrap .bogey-card.visible { display: block; }
.dcc-wrap .bogey-icon { font-size: 32px; margin-bottom: 12px; }
.dcc-wrap .bogey-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--dcc-charcoal);
  margin-bottom: 6px;
}
.dcc-wrap .bogey-desc {
  font-family: var(--dcc-font-body);
  font-size: 14px;
  color: var(--dcc-mid);
  line-height: 1.6;
}

/* ── Numpad ── */
.dcc-wrap .numpad-wrap {
  background: var(--dcc-white);
  border: 1px solid var(--dcc-light);
  border-radius: var(--dcc-radius-lg);
  padding: 16px;
  margin-bottom: 12px;
}
.dcc-wrap .numpad-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  background: var(--dcc-cream);
  border: 1.5px solid var(--dcc-light);
  border-radius: var(--dcc-radius-sm);
  padding: 10px 14px;
}
.dcc-wrap .numpad-input-row input {
  flex: 1;
  border: none;
  background: transparent;
  font-family: var(--dcc-font-primary);
  font-size: 28px;
  font-weight: 700;
  color: var(--dcc-charcoal);
  outline: none;
  width: 100%;
}
.dcc-wrap .numpad-input-row input::placeholder { color: var(--dcc-silver); }
.dcc-wrap .clear-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--dcc-mid);
  font-size: 18px;
  padding: 4px;
  line-height: 1;
  border-radius: 4px;
  transition: color 0.15s;
}
.dcc-wrap .clear-btn:hover { color: var(--dcc-crimson); }

.dcc-wrap .numpad-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.dcc-wrap .num-btn {
  font-family: var(--dcc-font-primary);
  font-size: 20px;
  font-weight: 600;
  color: var(--dcc-charcoal);
  background: var(--dcc-cream);
  border: 1.5px solid var(--dcc-light);
  border-radius: var(--dcc-radius-sm);
  padding: 16px 0;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, transform 0.08s;
  -webkit-tap-highlight-color: transparent;
}
.dcc-wrap .num-btn:active { transform: scale(0.95); background: var(--dcc-light); }
.dcc-wrap .num-btn.del {
  font-size: 16px;
  color: var(--dcc-mid);
}
.dcc-wrap .num-btn.go {
  background: var(--dcc-crimson);
  border-color: var(--dcc-crimson);
  color: var(--dcc-white);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.5px;
}
.dcc-wrap .num-btn.go:active { background: var(--dcc-crimson-dark); border-color: var(--dcc-crimson-dark); }

/* Quick score picks */
.dcc-wrap .quick-picks {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.dcc-wrap .quick-pick {
  font-size: 12px;
  font-weight: 600;
  color: var(--dcc-mid);
  background: var(--dcc-white);
  border: 1px solid var(--dcc-light);
  border-radius: 20px;
  padding: 5px 12px;
  cursor: pointer;
  transition: border-color 0.12s, color 0.12s;
  -webkit-tap-highlight-color: transparent;
}
.dcc-wrap .quick-pick:hover { border-color: var(--dcc-charcoal); color: var(--dcc-charcoal); }

/* ── Hit/miss flow ── */
.dcc-wrap .missed-dart-section{margin-top:12px;display:none}
.dcc-wrap .missed-dart-section.visible{display:block}
.dcc-wrap .miss-flow-card{background:var(--dcc-white);border:1px solid var(--dcc-light);border-radius:var(--dcc-radius-lg);padding:16px}
.dcc-wrap .miss-flow-header{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.dcc-wrap .miss-flow-dart-chip{display:inline-flex;font-family:var(--dcc-font-primary);font-size:13px;font-weight:700;padding:4px 10px;border-radius:4px;color:#fff;background:var(--dcc-charcoal)}
.dcc-wrap .miss-flow-dart-chip.double-type,.dcc-wrap .miss-flow-dart-chip.bull-type{background:var(--dcc-crimson)}
.dcc-wrap .miss-flow-prompt{font-size:13px;font-weight:600;color:var(--dcc-charcoal)}
.dcc-wrap .hit-miss-row{display:flex;gap:8px;margin-bottom:0}
.dcc-wrap .btn-hit,.dcc-wrap .btn-miss{flex:1;font-family:var(--dcc-font-primary);font-size:15px;font-weight:700;padding:14px 0;border-radius:var(--dcc-radius-md);cursor:pointer;transition:background .12s,transform .08s;-webkit-tap-highlight-color:transparent;text-align:center}
.dcc-wrap .btn-hit{border:2px solid #2e7d32;background:#f1f8f1;color:#2e7d32}
.dcc-wrap .btn-hit:active{transform:scale(.97);background:#c8e6c9}
.dcc-wrap .btn-miss{border:2px solid var(--dcc-crimson);background:#fdf1f1;color:var(--dcc-crimson)}
.dcc-wrap .btn-miss:active{transform:scale(.97);background:#fbd8d8}

/* ── Segment picker ── */
.dcc-wrap .segment-picker{margin-top:12px;display:none}
.dcc-wrap .segment-picker.visible{display:block}
.dcc-wrap .mult-toggle{display:flex;margin-bottom:10px;background:var(--dcc-cream);border:1.5px solid var(--dcc-light);border-radius:var(--dcc-radius-sm);overflow:hidden}
.dcc-wrap .mult-btn{flex:1;font-family:var(--dcc-font-primary);font-size:13px;font-weight:600;padding:10px 0;border:none;background:transparent;color:var(--dcc-mid);cursor:pointer;text-align:center}
.dcc-wrap .mult-btn+.mult-btn{border-left:1.5px solid var(--dcc-light)}
.dcc-wrap .mult-btn.active-single{color:var(--dcc-charcoal);font-weight:700;box-shadow:inset 0 -2px 0 var(--dcc-charcoal)}
.dcc-wrap .mult-btn.active-double{color:var(--dcc-crimson);font-weight:700;box-shadow:inset 0 -2px 0 var(--dcc-crimson)}
.dcc-wrap .mult-btn.active-treble{color:var(--dcc-charcoal);font-weight:700;box-shadow:inset 0 -2px 0 var(--dcc-charcoal)}
.dcc-wrap .likely-misses{margin-bottom:10px}
.dcc-wrap .likely-label{font-family:var(--dcc-font-primary);font-size:10px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--dcc-silver);margin-bottom:6px}
.dcc-wrap .likely-btns{display:flex;gap:6px;flex-wrap:wrap}
.dcc-wrap .likely-btn{font-family:var(--dcc-font-primary);font-size:13px;font-weight:700;padding:8px 14px;border:2px solid var(--dcc-light);border-radius:var(--dcc-radius-sm);background:var(--dcc-white);cursor:pointer;transition:border-color .12s,transform .08s;-webkit-tap-highlight-color:transparent}
.dcc-wrap .likely-btn:active{transform:scale(.95)}
.dcc-wrap .likely-btn:hover{border-color:var(--dcc-charcoal)}
.dcc-wrap .likely-btn.highlight{border-color:var(--dcc-crimson);background:rgba(183,28,28,.04)}
.dcc-wrap .seg-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-bottom:8px}
.dcc-wrap .seg-btn{font-family:var(--dcc-font-primary);font-size:15px;font-weight:700;padding:12px 0;border:1.5px solid var(--dcc-light);border-radius:var(--dcc-radius-sm);background:var(--dcc-white);cursor:pointer;text-align:center;transition:border-color .12s,transform .08s;-webkit-tap-highlight-color:transparent}
.dcc-wrap .seg-btn:active{transform:scale(.93)}
.dcc-wrap .seg-btn:hover{border-color:var(--dcc-charcoal)}
.dcc-wrap .seg-btn.neighbor{border-color:var(--dcc-crimson);background:rgba(183,28,28,.04)}
.dcc-wrap .seg-zero-row{display:flex;gap:6px}
.dcc-wrap .seg-zero{flex:1;font-family:var(--dcc-font-primary);font-size:13px;font-weight:600;padding:10px 0;border:1.5px solid var(--dcc-light);border-radius:var(--dcc-radius-sm);background:var(--dcc-cream);color:var(--dcc-mid);cursor:pointer;text-align:center;transition:border-color .12s}
.dcc-wrap .seg-zero:hover{border-color:var(--dcc-charcoal)}
.dcc-wrap .missed-reset{margin-top:8px;font-family:var(--dcc-font-primary);font-size:12px;font-weight:600;color:var(--dcc-mid);background:none;border:none;cursor:pointer;text-decoration:underline;padding:0}
.dcc-wrap .missed-reset:hover{color:var(--dcc-crimson)}

/* ── Footer note ── */
.dcc-wrap .page-note {
  font-family: var(--dcc-font-body);
  font-size: 13px;
  color: var(--dcc-mid);
  text-align: center;
  margin-top: 24px;
  line-height: 1.6;
}

/* ── How To Use Guide ── */
.dcc-wrap .guide {
  margin-top: 36px;
  border-top: 1px solid var(--dcc-light);
  padding-top: 32px;
}
.dcc-wrap .guide-header { margin-bottom: 24px; }
.dcc-wrap .guide-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--dcc-charcoal);
  letter-spacing: -0.3px;
  margin-bottom: 4px;
}
.dcc-wrap .guide-sub {
  font-family: var(--dcc-font-body);
  font-size: 14px;
  color: var(--dcc-mid);
}
.dcc-wrap .guide-step { display: flex; gap: 16px; margin-bottom: 28px; }
.dcc-wrap .guide-step-number {
  flex-shrink: 0;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--dcc-charcoal);
  color: var(--dcc-white);
  font-size: 13px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  margin-top: 2px;
}
.dcc-wrap .guide-step-body { flex: 1; }
.dcc-wrap .guide-step-title { font-size: 15px; font-weight: 700; color: var(--dcc-charcoal); margin-bottom: 4px; }
.dcc-wrap .guide-step-desc { font-family: var(--dcc-font-body); font-size: 14px; color: var(--dcc-mid); line-height: 1.6; margin-bottom: 14px; }
.dcc-wrap .guide-visual {
  background: var(--dcc-white);
  border: 1px solid var(--dcc-light);
  border-radius: var(--dcc-radius-md);
  padding: 14px;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.dcc-wrap .guide-visual-hitm { justify-content: center; }
.dcc-wrap .gv-score-box { background: var(--dcc-charcoal); border-radius: var(--dcc-radius-sm); padding: 10px 14px; text-align: left; flex-shrink: 0; }
.dcc-wrap .gv-label { font-size: 9px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--dcc-silver); margin-bottom: 2px; }
.dcc-wrap .gv-score { font-size: 32px; font-weight: 700; color: var(--dcc-white); letter-spacing: -1px; line-height: 1; }
.dcc-wrap .gv-badge { margin-top: 5px; font-size: 10px; font-weight: 600; color: var(--dcc-silver); background: rgba(255,255,255,0.1); border-radius: 20px; padding: 2px 8px; display: inline-block; }
.dcc-wrap .gv-arrow { color: var(--dcc-silver); font-size: 16px; flex-shrink: 0; }
.dcc-wrap .gv-chips { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.dcc-wrap .gv-chip { display: flex; flex-direction: column; align-items: center; border-radius: var(--dcc-radius-sm); padding: 7px 10px; font-size: 13px; font-weight: 700; min-width: 46px; }
.dcc-wrap .gv-chip span { font-size: 9px; font-weight: 500; opacity: 0.7; margin-top: 2px; }
.dcc-wrap .gv-chip.gv-sm { padding: 5px 8px; font-size: 12px; min-width: 38px; }
.dcc-wrap .gv-chip.gv-sm span { display: none; }
.dcc-wrap .gv-treble { background: var(--dcc-charcoal); color: var(--dcc-white); }
.dcc-wrap .gv-double { background: var(--dcc-crimson); color: var(--dcc-white); }
.dcc-wrap .gv-single { background: var(--dcc-light); color: var(--dcc-charcoal); }
.dcc-wrap .gv-sep { color: var(--dcc-silver); font-size: 12px; }
.dcc-wrap .gv-hit-miss { width: 100%; max-width: 260px; }
.dcc-wrap .gv-dart-aim { text-align: center; font-size: 13px; font-weight: 700; color: var(--dcc-charcoal); margin-bottom: 10px; background: var(--dcc-white); border: 1px solid var(--dcc-light); border-radius: var(--dcc-radius-sm); padding: 10px 14px; }
.dcc-wrap .gv-hm-row { display: flex; gap: 8px; }
.dcc-wrap .gv-btn-hit { flex: 1; text-align: center; padding: 12px 0; border-radius: var(--dcc-radius-sm); font-size: 14px; font-weight: 700; border: 2px solid #2e7d32; background: #f1f8f1; color: #2e7d32; }
.dcc-wrap .gv-btn-miss { flex: 1; text-align: center; padding: 12px 0; border-radius: var(--dcc-radius-sm); font-size: 14px; font-weight: 700; border: 2px solid var(--dcc-crimson); background: #fdf1f1; color: var(--dcc-crimson); }
.dcc-wrap .gv-likely-row { margin-bottom: 2px; }
.dcc-wrap .gv-likely-label { font-size: 10px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--dcc-silver); margin-bottom: 5px; }
.dcc-wrap .gv-likely-btns { display: flex; gap: 5px; flex-wrap: wrap; }
.dcc-wrap .gv-lbtn { font-family: var(--dcc-font-primary); font-size: 12px; font-weight: 700; padding: 6px 10px; border: 2px solid var(--dcc-light); border-radius: var(--dcc-radius-sm); background: var(--dcc-white); color: var(--dcc-charcoal); }
.dcc-wrap .gv-lbtn-hl { border-color: var(--dcc-crimson); background: rgba(183,28,28,0.04); color: var(--dcc-crimson); }
.dcc-wrap .gv-mult-row { display: flex; background: var(--dcc-cream); border: 1.5px solid var(--dcc-light); border-radius: var(--dcc-radius-sm); overflow: hidden; }
.dcc-wrap .gv-mtab { flex: 1; font-family: var(--dcc-font-primary); font-size: 12px; font-weight: 600; padding: 8px 0; text-align: center; color: var(--dcc-mid); }
.dcc-wrap .gv-mtab + .gv-mtab { border-left: 1.5px solid var(--dcc-light); }
.dcc-wrap .gv-mtab-active { color: var(--dcc-charcoal); font-weight: 700; box-shadow: inset 0 -2px 0 var(--dcc-charcoal); }
.dcc-wrap .gv-seg-mini { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.dcc-wrap .gv-seg { font-family: var(--dcc-font-primary); font-size: 14px; font-weight: 700; padding: 10px 0; border: 1.5px solid var(--dcc-light); border-radius: var(--dcc-radius-sm); background: var(--dcc-white); color: var(--dcc-charcoal); text-align: center; }
.dcc-wrap .gv-seg-nb { border-color: var(--dcc-crimson); background: rgba(183,28,28,0.04); }
.dcc-wrap .guide-legend { background: var(--dcc-white); border: 1px solid var(--dcc-light); border-radius: var(--dcc-radius-md); padding: 16px; margin-bottom: 16px; }
.dcc-wrap .guide-legend-title { font-size: 11px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--dcc-mid); margin-bottom: 12px; }
.dcc-wrap .guide-legend-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-size: 13px; font-family: var(--dcc-font-body); color: var(--dcc-mid); }
.dcc-wrap .guide-legend-row:last-child { margin-bottom: 0; }
.dcc-wrap .guide-bogey { display: flex; gap: 12px; background: rgba(183,28,28,0.04); border: 1px solid rgba(183,28,28,0.15); border-radius: var(--dcc-radius-md); padding: 14px 16px; }
.dcc-wrap .guide-bogey-icon { flex-shrink: 0; margin-top: 2px; }
.dcc-wrap .guide-bogey-title { font-size: 13px; font-weight: 700; color: var(--dcc-crimson); margin-bottom: 4px; }
.dcc-wrap .guide-bogey-desc { font-family: var(--dcc-font-body); font-size: 13px; color: var(--dcc-mid); line-height: 1.6; }

/* ── Editorial / SEO section ── */
.dcc-wrap .editorial-section {
  margin-top: 48px;
  padding-top: 36px;
  border-top: 1px solid var(--dcc-light);
}
.dcc-wrap .ed-title {
  font-family: var(--dcc-font-primary);
  font-size: 18px;
  font-weight: 700;
  color: var(--dcc-charcoal);
  letter-spacing: -0.2px;
  margin-bottom: 10px;
  margin-top: 32px;
}
.dcc-wrap .ed-title:first-child { margin-top: 0; }
.dcc-wrap .ed-body {
  font-family: var(--dcc-font-body);
  font-size: 15px;
  color: var(--dcc-mid);
  line-height: 1.75;
  margin-bottom: 14px;
}
.dcc-wrap .ed-related {
  margin-top: 32px;
  background: var(--dcc-white);
  border: 1px solid var(--dcc-light);
  border-radius: var(--dcc-radius-md);
  padding: 20px;
}
.dcc-wrap .ed-related-label {
  font-family: var(--dcc-font-primary);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--dcc-mid);
  margin-bottom: 12px;
}
.dcc-wrap .ed-related-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.dcc-wrap .ed-related-list li {
  border-top: 1px solid var(--dcc-light);
  padding: 10px 0;
}
.dcc-wrap .ed-related-list li:first-child { border-top: none; padding-top: 0; }
.dcc-wrap .ed-related-list a {
  font-family: var(--dcc-font-body);
  font-size: 14px;
  color: var(--dcc-crimson);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.dcc-wrap .ed-related-list a:hover { color: var(--dcc-crimson-dark); }

/* ── Skill Selector ── */
.dcc-wrap .skill-selector { display:flex;gap:0;margin-top:8px;background:rgba(255,255,255,0.08);border-radius:20px;overflow:hidden;max-width:240px; }
.dcc-wrap .skill-btn { flex:1;border:none;background:transparent;color:var(--dcc-silver);font-size:11px;font-weight:600;letter-spacing:.5px;padding:5px 0;cursor:pointer;text-align:center;-webkit-tap-highlight-color:transparent; }
.dcc-wrap .skill-btn.active { background:var(--dcc-crimson);color:#fff;border-radius:20px; }

/* ── Difficulty Badge ── */
.dcc-wrap .diff-badge { font-size:10px;font-weight:700;padding:2px 7px;border-radius:10px;margin-left:6px;white-space:nowrap; }
.dcc-wrap .diff-green { background:#e8f5e9;color:#2e7d32; }
.dcc-wrap .diff-amber { background:#fff3e0;color:#e65100; }
.dcc-wrap .diff-red { background:#ffebee;color:#c62828; }

/* ── Share Button ── */
.dcc-wrap .share-btn { background:none;border:none;color:var(--dcc-mid);cursor:pointer;padding:2px 4px;font-size:14px;-webkit-tap-highlight-color:transparent;margin-left:4px; }
.dcc-wrap .share-btn:hover { color:var(--dcc-crimson); }

/* ── Alt Route Selected ── */
.dcc-wrap .alt-route.selected { border-color:var(--dcc-crimson);background:rgba(183,28,28,0.04); }

/* ── Board Hint Overlay ── */
.board-hint-overlay { position:fixed;inset:0;z-index:9000;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.4); }
.board-hint-card { background:#fff;border-radius:16px;padding:20px;text-align:center;box-shadow:0 8px 32px rgba(0,0,0,.2); }
.board-hint-label { font-size:11px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:var(--dcc-crimson);margin-top:8px; }
@keyframes bhFlash { 0%,100%{opacity:1} 50%{opacity:.45} }
.bh-flash { fill:#FFD600 !important; animation:bhFlash 1s ease-in-out infinite; }

/* ── Next Visit Banner ── */
.dcc-wrap .next-visit-banner { background:rgba(183,28,28,.06);border:1px solid rgba(183,28,28,.2);border-radius:8px;padding:12px 14px;margin-bottom:10px;text-align:center; }
.dcc-wrap .next-visit-label { font-size:10px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:var(--dcc-crimson);margin-bottom:4px; }
.dcc-wrap .next-visit-score { font-size:22px;font-weight:700;color:var(--dcc-charcoal); }
.dcc-wrap .next-visit-sub { font-size:11px;color:var(--dcc-mid);margin-top:2px; }

@media (max-width: 400px) {
  .dcc-wrap .score-value { font-size: 56px; }
  .dcc-wrap .dart-chip { min-width: 58px; padding: 8px 10px; }
  .dcc-wrap .chip-code { font-size: 16px; }
  .dcc-wrap .gv-score-box { padding: 8px 10px; }
  .dcc-wrap .gv-score { font-size: 24px; }
}