/* ===== The Daily Drive: the home page's daily game (daily-drive.js) =====
   Layout A: a slim field from the 50 to the end zone across the top; zones light up in the tiers page's colors
   (Plus Territory orange, Red Zone red, End Zone green) as each first down is gained. The card is always dark. */

.dd {
  --dd-orange: #f28c1e; --dd-red: #e10600; --dd-green: #1d9a4a; --dd-gold: #e8c33c;
  position: relative;
  margin-bottom: 2.25rem;
  border-radius: 18px;
  overflow: hidden;
  background: radial-gradient(ellipse at 20% 0%, rgba(225, 6, 0, .14), transparent 55%), #050505;
  color: #fff;
  container-type: inline-size;
}

/* the field band */
.dd-band { display: grid; grid-template-columns: 50fr 33fr 17fr; height: 64px; position: relative; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.dd-z {
  position: relative; display: flex; align-items: flex-end; padding: .4rem .55rem; min-width: 0;
  font-size: .62rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .35);
  border-left: 2px solid rgba(255, 255, 255, .14);
  background-image: repeating-linear-gradient(90deg, transparent 0 calc(33.333% - 1px), rgba(255, 255, 255, .06) calc(33.333% - 1px) 33.333%);
  transition: background-color .6s, color .6s;
}
.dd-z:first-child { border-left: 0; }
.dd-z.rz { background-image: repeating-linear-gradient(90deg, transparent 0 calc(50% - 1px), rgba(255, 255, 255, .06) calc(50% - 1px) 50%); }
.dd-z.ez { border-left: 4px solid rgba(255, 255, 255, .7); justify-content: center; background-image: none; }
.dd-z .yd { position: absolute; top: .35rem; left: .45rem; font-family: var(--display); font-stretch: 72%; font-size: 1rem; color: rgba(255, 255, 255, .22); letter-spacing: 0; }
.dd-z.lit.pt { background-color: var(--dd-orange); color: #1a1a1a; }
.dd-z.lit.rz { background-color: var(--dd-red); color: #fff; }
.dd-z.lit.ez { background-color: var(--dd-green); color: #fff; }
.dd-z.lit .yd { color: rgba(0, 0, 0, .3); }
.dd-z.gold { box-shadow: inset 0 0 0 4px var(--dd-gold), 0 0 24px rgba(232, 195, 60, .6); }
.dd-ball {
  position: absolute; top: 50%; width: 34px; height: 20px; border-radius: 50%;
  background: radial-gradient(ellipse at 35% 30%, #a0582e, #6b3416 70%); box-shadow: 0 4px 10px rgba(0, 0, 0, .6);
  transform: translate(-50%, -50%) rotate(-8deg); transition: left .8s cubic-bezier(.2, .7, .3, 1);
}
.dd-ball::before { content: ""; position: absolute; left: 30%; right: 30%; top: 46%; height: 2px; background: #fff; }
.dd-ball::after { content: ""; position: absolute; left: 34%; right: 34%; top: 34%; height: 27%; background: repeating-linear-gradient(90deg, #fff 0 2px, transparent 2px 5px); }

/* the text and questions */
.dd-body { display: grid; gap: .6rem; padding: 1.4rem 1.6rem 1.5rem; }
.dd-kicker { margin: 0; font-size: .85rem; font-weight: 700; color: rgba(255, 255, 255, .72); }
.dd-kicker b { color: #fff; }
.dd-title { margin: 0; font-family: var(--display); font-stretch: 72%; font-style: italic; font-weight: 800; text-transform: uppercase; font-size: clamp(2rem, 7cqi, 3.2rem); line-height: .95; }
.dd-title span { color: var(--dd-red); }
.dd-tag { margin: 0; font-size: 1rem; color: rgba(255, 255, 255, .82); }
.dd-downs { display: flex; gap: .35rem; align-items: center; font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, .7); }
.dd-downs i { width: 24px; height: 8px; border-radius: 4px; background: rgba(255, 255, 255, .18); }
.dd-downs i.ok { background: #fff; }
.dd-downs i.no { background: #6b6b78; }
.dd-downs i.now { background: transparent; box-shadow: inset 0 0 0 2px #fff; }
.dd-downs i.bonus { background: transparent; box-shadow: inset 0 0 0 2px var(--dd-gold); }
.dd-downs i.bonus.ok { background: var(--dd-gold); }
.dd-downs i.bonus.no { background: #6b6b78; box-shadow: none; }
.dd-actions { display: flex; flex-wrap: wrap; gap: .55rem; }
.dd-btn {
  font: inherit; font-family: var(--display); font-weight: 800; font-size: .85rem; letter-spacing: .03em; text-transform: uppercase;
  padding: .6rem 1.05rem; border-radius: 10px; border: 2px solid rgba(255, 255, 255, .85); background: transparent; color: #fff;
  cursor: pointer; text-decoration: none; display: inline-flex; align-items: center;
}
.dd-btn:hover { background: rgba(255, 255, 255, .1); }
.dd-btn.primary { background: var(--dd-red); border-color: var(--dd-red); }
.dd-btn.primary:hover { background: #b80500; border-color: #b80500; }
.dd-btn:focus-visible, .dd-opt:focus-visible, .dd-link:focus-visible { outline: 3px solid var(--dd-gold); outline-offset: 2px; }
.dd-small { margin: 0; font-size: .78rem; color: rgba(255, 255, 255, .65); }
.dd-small b { color: #fff; }
.dd-link { font: inherit; background: none; border: 0; padding: 0; color: #fff; text-decoration: underline; cursor: pointer; font-weight: 700; }

.dd-play { display: grid; gap: .55rem; }
.dd-play-h { display: flex; justify-content: space-between; gap: .5rem; align-items: baseline; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .75); }
.dd-play-h.go2 { color: var(--dd-gold); }
.dd-q { margin: 0; font-size: 1.1rem; font-weight: 700; line-height: 1.3; }
.dd-clues { display: flex; flex-wrap: wrap; gap: .4rem; }
.dd-clues span { background: rgba(255, 255, 255, .1); border-radius: 8px; padding: .3rem .55rem; font-size: .88rem; }
.dd-clues small { display: block; font-size: .6rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .55); }
.dd-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem; }
.dd-opt {
  font: inherit; font-weight: 700; font-size: .95rem; text-align: left; padding: .65rem .8rem; border-radius: 10px; min-height: 46px;
  border: 1.5px solid rgba(255, 255, 255, .25); background: rgba(255, 255, 255, .06); color: #fff; cursor: pointer;
}
.dd-opt:hover:not(:disabled) { background: rgba(255, 255, 255, .14); }
.dd-opt.right { background: var(--dd-green); border-color: var(--dd-green); }
.dd-opt.wrong { background: #4a4a52; border-color: #4a4a52; text-decoration: line-through; }
.dd-opt:disabled { cursor: default; }
.dd-res { margin: 0; font-size: .86rem; color: rgba(255, 255, 255, .85); min-height: 1.2em; }
.dd-res b { color: #fff; }

/* the finish */
.dd-finish { display: flex; gap: .9rem; align-items: center; }
.dd-finish > div:last-child { min-width: 0; }
.dd-finish h3 { margin: 0; font-family: var(--display); font-stretch: 72%; font-style: italic; font-weight: 800; text-transform: uppercase; font-size: clamp(1.25rem, 5.5cqi, 1.7rem); line-height: 1; }
.dd-finish p { margin: .25rem 0 0; color: rgba(255, 255, 255, .8); font-size: .88rem; }
.dd-share { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .82rem; background: rgba(255, 255, 255, .08); border-radius: 8px; padding: .45rem .6rem; white-space: pre-wrap; margin: 0; }
.dd-review { display: grid; gap: .45rem; margin: 0; padding: 0; list-style: none; }
.dd-review li { background: rgba(255, 255, 255, .06); border-radius: 10px; padding: .55rem .7rem; font-size: .86rem; display: grid; gap: .15rem; }
.dd-review small { font-size: .62rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .55); }
.dd-review .ans { font-weight: 800; }
.dd-review .ans.ok::before { content: "✓ "; color: #6fd38f; }
.dd-review .ans.no::before { content: "✕ "; color: #b4b4ba; }
.dd-review p { margin: 0; color: rgba(255, 255, 255, .75); }

/* badges: same colors as the tiers page; 2PT is gold */
.dd-badge {
  width: 78px; height: 78px; border-radius: 50%; display: grid; place-items: center; flex: none; position: relative;
  font-family: var(--display); font-stretch: 72%; font-style: italic; font-weight: 900; font-size: 1.75rem; color: #fff; border: 4px solid rgba(255, 255, 255, .9);
}
.dd-badge.b-PT { background: var(--dd-orange); color: #1a1a1a; }
.dd-badge.b-RZ { background: var(--dd-red); }
.dd-badge.b-EZ { background: var(--dd-green); }
.dd-badge.b-none { background: #2a2a30; color: rgba(255, 255, 255, .45); font-size: 1rem; }
.dd-badge .plus2 { position: absolute; right: -8px; top: -8px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--dd-gold); color: #1a1a1a; font-size: .8rem; font-style: normal; border: 3px solid #050505; }

@container (max-width: 520px) {
  .dd-body { padding: 1.1rem 1.1rem 1.2rem; }
  .dd-opts { grid-template-columns: minmax(0, 1fr); }
  .dd-finish { align-items: flex-start; }
  .dd-badge { width: 64px; height: 64px; font-size: 1.45rem; }
  .dd-z { font-size: .56rem; padding: .35rem .4rem; }
}
@media (max-width: 600px) { .dd { border-radius: 14px; margin-bottom: 1.5rem; } }
@media (prefers-reduced-motion: reduce) { .dd-z, .dd-ball { transition: none; } }

/* ===== Account page: Your Daily Drive ===== */
.ddp-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .55rem; }
@media (max-width: 640px) { .ddp-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ddp-stat { background: var(--surface); border-radius: 10px; padding: .6rem .75rem; display: grid; gap: .1rem; min-width: 0; }
.ddp-stat small { font-size: .68rem; font-weight: 800; color: var(--subtle); text-transform: uppercase; letter-spacing: .05em; }
.ddp-stat b { font-family: var(--display); font-stretch: 80%; font-size: 1.7rem; font-weight: 800; }
.ddp-stat span { font-size: .76rem; color: var(--muted); }
.ddp-stat.gold { box-shadow: inset 0 0 0 2px #e8c33c; }
.ddp-outs { display: grid; gap: .4rem; max-width: 560px; margin-top: .9rem; }
.ddp-outs div { display: grid; grid-template-columns: 130px minmax(0, 1fr) 40px; gap: .6rem; align-items: center; font-size: .86rem; }
.ddp-outs i { height: 12px; border-radius: 6px; min-width: 2px; }
.ddp-outs b { text-align: right; font-variant-numeric: tabular-nums; }
.ddp-pill { display: inline-block; font-size: .62rem; font-weight: 900; padding: .1rem .45rem; border-radius: 999px; margin-right: .35rem; font-family: var(--display); font-style: italic; }