/* ═══════════════════════════════════════════════════════════════════════════
   THE HUNDRED-DAY ROAD — the return-reward screen.

   Drawn as a REEL, not a list: three cards on a strip, today in the middle and
   raised, tomorrow half-lit at the edge doing the retention work. When a new
   day is claimed the strip lands with a flare, because a thing that moves is a
   thing that happened.

   Two homes, one set of rules — folded into the top of the offline catch-up
   popup (#offline-body) and standing alone in #daily-modal. Nothing here is
   scoped to either, so the two can never drift apart.

   Palette borrows the forged-iron language of the pack (grid-satchel.css) with
   one warm amber accent kept for the things that only happen on this screen:
   today's card, the claim button and the wax.
   ═══════════════════════════════════════════════════════════════════════════ */

.dr-panel {
  --dr-ink: #e9eef4;
  --dr-dim: #93a1b0;
  --dr-edge: #3d444e;
  --dr-cell: linear-gradient(#232830, #171b21);
  --dr-amber: #d9a441;
  --dr-amber-lt: #f2cd7c;
  --dr-seal: #a8332c;

  margin: 0 0 14px;
  padding: 12px 10px 10px;
  border: 1px solid var(--dr-edge);
  border-radius: 10px;
  background: linear-gradient(#1b2027, #14181d);
  color: var(--dr-ink);
  overflow: hidden;
}

.dr-title {
  text-align: center;
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dr-amber);
  margin-bottom: 10px;
}

/* ── the two counters ──────────────────────────────────────────────────────
   Always on screen, always both. The left is who the player IS (their real day
   count, never reset to 1); the right is where the ladder has got to. They are
   different numbers on purpose. */
.dr-counters {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}
.dr-counter {
  flex: 1;
  text-align: center;
  padding: 7px 4px;
  border: 1px solid var(--dr-edge);
  border-radius: 8px;
  background: var(--dr-cell);
}
.dr-num {
  display: block;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--dr-amber-lt);
}
.dr-lab {
  display: block;
  margin-top: 2px;
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--dr-dim);
}

/* The gap between the two counters, explained. Shown only when days on the road outrun rewards
   claimed — see daily-reward.js. Sits directly under them, quiet enough not to compete with the
   reel, close enough to read as a footnote to the numbers it is about. */
.dr-note {
  margin: -6px 2px 12px;
  font-size: 11px;
  line-height: 1.45;
  text-align: center;
  color: var(--dr-dim);
}

/* ── the reel ──────────────────────────────────────────────────────────────
   Three cards, today centred and raised. On a narrow phone the neighbours are
   allowed to be clipped by the panel's overflow — seeing the EDGE of tomorrow
   is what tells the player the strip continues. */
.dr-reelwrap { overflow: hidden; margin: 0 -4px; }
.dr-reel {
  display: flex;
  align-items: stretch;
  gap: 8px;
  padding: 4px;
}
.dr-card {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 9px 8px;
  border: 1px solid var(--dr-edge);
  border-radius: 9px;
  background: var(--dr-cell);
  transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}
.dr-when {
  font-size: 9px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dr-dim);
}
.dr-no {
  font-size: 10px;
  color: var(--dr-dim);
}
.dr-what {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--dr-ink);
}
.dr-blurb {
  font-size: 10px;
  line-height: 1.35;
  color: var(--dr-dim);
}

/* Yesterday is spent — dimmed, and slightly back. */
.dr-past { opacity: .5; transform: scale(.94); }

/* Today is the payment. */
.dr-now {
  border-color: var(--dr-amber);
  background: linear-gradient(#2b2418, #1d1913);
  box-shadow: 0 0 0 1px rgba(217, 164, 65, .25), 0 4px 14px rgba(0, 0, 0, .45);
  transform: scale(1.03);
}
.dr-now .dr-when { color: var(--dr-amber-lt); }
.dr-now .dr-what { color: #fff; }

/* Tomorrow is the retention mechanic: legible, unmistakably NOT yet yours. */
.dr-next {
  opacity: .72;
  transform: scale(.94);
  border-style: dashed;
}

/* A sealed card wears its wax. */
.dr-sealed { position: relative; }
.dr-waxdot {
  position: absolute;
  top: 6px;
  right: 7px;
  width: 15px;
  height: 15px;
  line-height: 15px;
  text-align: center;
  font-size: 9px;
  border-radius: 50%;
  color: #f6dcd7;
  background: radial-gradient(circle at 35% 30%, #d1554b, var(--dr-seal));
  box-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}

/* One every fifty days — it is allowed to look like it. */
.dr-wearable.dr-now {
  border-color: #b98cd8;
  box-shadow: 0 0 0 1px rgba(185, 140, 216, .3), 0 0 22px rgba(185, 140, 216, .28);
}

/* The landing. Fires once per claim, on the whole strip, so the reel reads as
   having MOVED into place rather than as a card that simply changed text. */
.dr-landed { animation: dr-land .58s cubic-bezier(.2, .9, .25, 1.1) 1; }
.dr-landed .dr-now { animation: dr-flare .7s ease-out 1; }
@keyframes dr-land {
  0%   { transform: translateX(28%); }
  70%  { transform: translateX(-2%); }
  100% { transform: translateX(0); }
}
@keyframes dr-flare {
  0%   { box-shadow: 0 0 0 1px rgba(217,164,65,.25), 0 0 0 rgba(242,205,124,0); }
  35%  { box-shadow: 0 0 0 2px rgba(242,205,124,.9), 0 0 34px rgba(242,205,124,.7); }
  100% { box-shadow: 0 0 0 1px rgba(217,164,65,.25), 0 4px 14px rgba(0,0,0,.45); }
}

/* ── the action row ────────────────────────────────────────────────────────── */
.dr-action { margin-top: 12px; }
.dr-claimbtn {
  display: block;
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--dr-amber);
  border-radius: 9px;
  background: linear-gradient(#c99a3c, #a97f2b);
  color: #1a1408;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .03em;
  cursor: pointer;
}
.dr-claimbtn:hover { background: linear-gradient(#dcab45, #bb8d31); }
.dr-claimbtn:disabled { opacity: .6; cursor: default; }
.dr-wait {
  text-align: center;
  font-size: 11px;
  color: var(--dr-dim);
  padding: 6px 0 2px;
}

/* ── the seal ──────────────────────────────────────────────────────────────
   A box you tap opens itself; a box you have to BREAK makes you do something
   with your thumb before the game gives you anything. touch-action:none is
   load-bearing — without it the browser claims the horizontal drag as a scroll
   and the wax never moves on a phone. */
.dr-box {
  padding: 10px;
  border: 1px solid var(--dr-seal);
  border-radius: 9px;
  background: linear-gradient(#2a1c1a, #1c1413);
  touch-action: none;
  user-select: none;
  cursor: grab;
}
.dr-box:focus-visible { outline: 2px solid var(--dr-amber-lt); outline-offset: 2px; }
.dr-boxname {
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: #f0d9d5;
  margin-bottom: 8px;
}
.dr-track {
  position: relative;
  height: 34px;
  border-radius: 17px;
  background: linear-gradient(#15100f, #221816);
  border: 1px solid #3a2422;
  overflow: hidden;
}
.dr-wax {
  position: absolute;
  left: 3px;
  top: 3px;
  width: 28px;
  height: 28px;
  line-height: 28px;
  text-align: center;
  border-radius: 50%;
  font-size: 13px;
  color: #f8e3de;
  background: radial-gradient(circle at 35% 30%, #d1554b, var(--dr-seal));
  box-shadow: 0 2px 5px rgba(0, 0, 0, .55);
  transition: transform .18s cubic-bezier(.3, 1.4, .5, 1);
}
.dr-sealhint {
  margin-top: 7px;
  text-align: center;
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #b4938d;
}
.dr-broken .dr-track { border-color: var(--dr-amber); }
.dr-broken .dr-wax {
  transform: translateX(160%) rotate(220deg);
  opacity: 0;
  transition: transform .45s ease-in, opacity .45s ease-in;
}
.dr-broken .dr-sealhint { color: var(--dr-amber-lt); }

/* ── what actually landed ──────────────────────────────────────────────────── */
.dr-lines { margin-top: 0; }
.dr-lines.dr-has {
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid var(--dr-edge);
}
.dr-headline {
  font-size: 12px;
  font-weight: 700;
  color: var(--dr-amber-lt);
  margin-bottom: 4px;
}
.dr-line {
  font-size: 12px;
  line-height: 1.5;
  color: var(--dr-ink);
}
.dr-line::before { content: '+ '; color: var(--dr-amber); }

/* The standalone modal is the same panel with its frame removed — the card it
   sits in is already a card. */
.daily-card .dr-panel { margin-bottom: 10px; border: 0; background: none; padding: 0; }

/* Somebody who has asked for less motion gets the information and none of the
   theatre: the strip still updates, it simply does not perform. */
@media (prefers-reduced-motion: reduce) {
  .dr-landed, .dr-landed .dr-now { animation: none; }
  .dr-card, .dr-wax { transition: none; }
}