/* FreeTA live layer: stickers, clocks, the add-card journey, tonight's stack.
   Loads after play.css. Light only. */

/* ---------- stickers: the one loud thing on any card ---------- */
.stk{flex:none;display:inline-grid;place-items:center;min-width:44px;padding:5px 9px 6px;border-radius:9px;background:var(--sun);color:var(--ink);
  font-family:var(--display);font-weight:800;font-size:20px;line-height:1;letter-spacing:-.01em;font-style:normal;
  box-shadow:inset 0 0 0 2px var(--ink),3px 3px 0 var(--ink);transform:rotate(-4deg)}
.stk-s{min-width:0;font-size:15px;padding:4px 7px 5px;box-shadow:inset 0 0 0 2px var(--ink),2px 2px 0 var(--ink)}
.stk-xl{font-size:30px;padding:7px 12px 9px;border-radius:12px;min-width:62px}
.stk-xxl{font-size:54px;padding:10px 18px 14px;border-radius:16px;min-width:108px;box-shadow:inset 0 0 0 3px var(--ink),5px 5px 0 var(--ink)}

/* ---------- card front: percent off first ---------- */
.fcard-off{display:grid;gap:1px;line-height:1.15}
.fcard-off em{font-style:normal;font-family:var(--ui);font-weight:800;font-size:15px;color:var(--ink)}
.fcard-off small{font-size:12px;font-weight:600;color:var(--ink-2)}
.fcard-off small:empty{display:none}
.fcard-s .fcard-off em{font-size:13.5px}
.fcard-s .fcard-off small{font-size:11px}

/* ---------- event cards in the Live row ---------- */
.evx{position:relative;color:var(--ink);text-decoration:none;width:204px;box-shadow:inset 0 0 0 1px rgba(29,18,51,.06);transition:transform .2s var(--ease)}
.evx:hover{transform:translateY(-3px)}
.evx-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:2px}
.evx em{justify-self:start;font-style:normal}
.evx em:empty{display:none}

/* ---------- Quick Start block (day 0 hero and the card-added page) ---------- */
.qs{display:grid;gap:14px;padding:18px;border-radius:var(--r-l);background:var(--tint);box-shadow:inset 0 0 0 1px rgba(29,18,51,.06)}
.qs-h{display:flex;align-items:center;gap:16px}
.qs-h .pl-h{font-size:28px}
.qs-clock{margin:0}
.qs-clock em{display:inline-block;font-style:normal;font-family:var(--display);font-weight:800;font-size:22px;line-height:1;padding:8px 14px 9px;border-radius:999px;background:var(--white);color:var(--ink);font-variant-numeric:tabular-nums}
.qs-clock em.live{background:var(--pink);color:#fff}
.qs-clock em.live::before{content:"";display:inline-block;width:9px;height:9px;border-radius:50%;background:#fff;margin-right:8px;vertical-align:2px;animation:plPulse 1.4s infinite}
.reduce .qs-clock em.live::before{animation:none}
.qs .pl-next{background:var(--white);box-shadow:var(--shadow)}

/* ---------- Triple Play strip ---------- */
.tp{display:grid;gap:8px;padding:14px;border-radius:var(--r);background:var(--white);color:var(--ink);text-decoration:none}
.tp-h{display:flex;align-items:center;gap:10px}
.tp-h b{font-family:var(--display);font-weight:800;font-size:21px;line-height:1}
.tp-h em{margin-left:auto;font-style:normal;font-family:var(--ui);font-weight:800;font-size:12.5px;padding:4px 10px;border-radius:999px;background:var(--paper-2)}
.tp-h em:empty{display:none}
.tp > small{font-size:14px;color:var(--ink-2)}
.slots-s{gap:8px}
.slots-s li{padding:9px 6px;border-radius:14px;background:var(--paper)}
.slot-open{box-shadow:inset 0 0 0 2px rgba(29,18,51,.14);background:transparent !important}
.slot-open span{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:rgba(29,18,51,.07);font-family:var(--ui);font-weight:800;font-size:15px;color:var(--ink-2)}
.slots li.slot-open small{color:var(--ink-2)}

/* ---------- next step: old amount crossed out next to the new one ---------- */
.pl-now{display:flex;align-items:baseline;gap:8px}
.pl-now s,.cont-f s{font-family:var(--ui);font-weight:800;font-size:15px;color:var(--ink-2);text-decoration-thickness:2px}
.pl-next-go em::after{content:" off GTA 6"}
.pl-next-x{box-shadow:inset 0 0 0 2px var(--pink),var(--shadow)}
.gr-plus s{font-size:12.5px;font-weight:800;color:var(--ink-2);text-decoration-thickness:2px}
.gtag-x2{background:var(--sun);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.gtag-x2 svg{width:12px;height:12px}

/* ---------- checkpoint reached ---------- */
.pl-claim{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;margin-top:14px;padding:11px 12px;border-radius:16px;background:var(--white);color:var(--ink);text-decoration:none;font-size:14px;line-height:1.3}
.pl-claim svg{width:26px;height:26px;padding:5px;border-radius:50%;background:var(--teal);color:#fff}
.pl-claim b{font-weight:800}
.pl-claim em{font-style:normal;font-family:var(--ui);font-weight:800;font-size:13px;padding:7px 12px;border-radius:999px;background:var(--ink);color:#fff;white-space:nowrap}

/* ---------- who just scored ---------- */
.tick{display:flex;align-items:center;gap:10px;margin:10px 4px 0;font-size:13.5px;color:var(--ink-2);min-height:22px}
.tick .sample{flex:none;font-size:11.5px;padding:2px 8px;border-radius:999px;background:var(--paper-2)}
.tick-t{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:opacity .3s,transform .3s var(--ease)}
.tick-t b{color:var(--ink);font-weight:800}
.tick-t.in{opacity:0;transform:translateY(6px)}

/* ---------- Rush Hour banner ---------- */
.rush,.of-x2{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:center;margin:0;padding:14px 16px;border-radius:var(--r);background:var(--ink);color:#fff;text-decoration:none;font-size:15px;line-height:1.3}
.rush b,.of-x2 b{display:block;font-family:var(--display);font-weight:800;font-size:22px;line-height:1.05}
.rush em,.of-x2 em{font-style:normal;font-family:var(--ui);font-weight:800;font-size:12.5px;padding:5px 11px;border-radius:999px;background:var(--pink);color:#fff;white-space:nowrap}
.rush em:empty,.of-x2 em:empty{display:none}
.of-x2{background:var(--t-butter);color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}
.st-x2 .st-p em{color:var(--pink)}
.st-x2 .st-p s{text-decoration-thickness:2px}

/* ---------- event page: the big 2x panel ---------- */
.ev-x2{grid-template-columns:auto minmax(0,1fr);align-items:center;gap:18px}
.ev-x2 > div{display:grid;gap:8px}
.rf-tk{display:flex;align-items:baseline;gap:10px;margin:0}
.rf-tk b{font-family:var(--display);font-weight:800;font-size:56px;line-height:.9;color:var(--ink)}
.rf-tk span{font-size:15px;font-weight:700;color:var(--ink-2)}

/* ---------- Tonight's Jobs ---------- */
.jobs{display:grid;gap:12px;padding:16px;border-radius:var(--r-l);background:var(--tint);color:var(--ink);text-decoration:none;box-shadow:inset 0 0 0 1px rgba(29,18,51,.06)}
.jobs-h{display:flex;align-items:center;gap:10px}
.jobs-h b{font-family:var(--display);font-weight:800;font-size:22px;line-height:1;margin-right:auto}
.jobs-l{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.jobs-l li{display:grid;grid-template-columns:26px minmax(0,1fr);gap:10px;align-items:center;padding:10px 12px;border-radius:14px;background:var(--white);font-size:15px;font-weight:700;line-height:1.25}
.jobs-l li > i{display:grid;place-items:center;width:26px;height:26px;border-radius:8px;box-shadow:inset 0 0 0 2px rgba(29,18,51,.18)}
.jobs-l li > i svg{width:16px;height:16px}
.jobs-l li.on{color:var(--ink-2)}
.jobs-l li.on > span{text-decoration:line-through;text-decoration-thickness:2px}
.jobs-l li.on > i{background:var(--teal);color:#fff;box-shadow:none}
.jobs-ll li{padding:14px;font-size:16.5px}
.jobs-f{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center}
.jobs-f em{font-style:normal;font-family:var(--ui);font-weight:800;font-size:12.5px;padding:4px 10px;border-radius:999px;background:var(--white)}
.jobs-bar{--a:0;position:relative;height:10px;border-radius:999px;background:rgba(255,255,255,.8);overflow:hidden}
.jobs-bar i{position:absolute;inset:0 auto 0 0;width:calc(var(--a) * 1%);border-radius:999px;background:var(--teal);transition:width .5s var(--ease)}

/* ---------- Continue playing ---------- */
.cont{flex:none;display:grid;gap:10px;width:236px;padding:14px;border-radius:var(--r);background:var(--white);color:var(--ink);text-decoration:none;box-shadow:var(--shadow);border-top:6px solid var(--c1,var(--pink))}
.cont-h{display:flex;align-items:center;gap:10px;min-width:0}
.cont-h > span{display:grid;min-width:0}
.cont-h b{font-family:var(--display);font-weight:800;font-size:19px;line-height:1.05;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cont-h small{font-size:12.5px;font-weight:700;color:var(--ink-2)}
.cont-h small.soon{color:#C2410C}
.cont-n{display:grid;gap:1px;font-size:14.5px;font-weight:700;line-height:1.25;min-height:38px}
.cont-n small{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.cont-f{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.cont-f em{font-style:normal;font-family:var(--display);font-weight:800;font-size:24px;line-height:1;color:var(--pink);margin-right:auto}
.cont-f .btn{align-self:center}

/* ---------- Hot Streak dots ---------- */
.dots li.bonus{font-size:10.5px;box-shadow:inset 0 0 0 2px var(--orange);color:#B45309}
.dots li.bonus.on{background:var(--orange);color:#fff;box-shadow:none}
.dots li.d7{box-shadow:inset 0 0 0 2px var(--pink);color:var(--pink)}
.dots li.d7.on{background:var(--pink);color:#fff;box-shadow:none}
.dots li.today{outline:3px solid var(--ink);outline-offset:2px}
.dots-l li.bonus{font-size:15px}

/* ---------- Home: first moves ---------- */
.first{padding:18px;border-radius:var(--r-l);background:var(--tint);display:grid;gap:12px}
.first-l{list-style:none;margin:0;padding:0;display:grid;gap:8px;counter-reset:none}
.first-l li{display:grid;grid-template-columns:34px minmax(0,1fr);gap:12px;align-items:center;padding:12px 14px;border-radius:16px;background:var(--white);font-size:15.5px;line-height:1.3}
.first-l li b{display:block;font-weight:800}
.first-l li small{font-size:13.5px;color:var(--ink-2)}
.first-l li > i{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--ink);color:#fff;font-style:normal;font-family:var(--ui);font-weight:800;font-size:15px}
.first-l li > i svg{width:18px;height:18px}
.first-l li.on > i{background:var(--teal)}

/* ---------- Card: four stops to free ---------- */
.road{list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;position:relative}
.road::before{content:"";position:absolute;left:8%;right:8%;top:27px;height:4px;border-radius:4px;background:linear-gradient(90deg,var(--orange),var(--pink) 60%,var(--violet))}
.road li{position:relative;display:grid;justify-items:center;gap:4px;text-align:center}
.road li img{width:58px;height:58px;border-radius:50%;object-fit:cover;background:var(--white);box-shadow:0 0 0 3px var(--white),0 0 0 5px var(--ink)}
.road li b{font-family:var(--display);font-weight:800;font-size:19px;line-height:1;margin-top:6px}
.road li small{font-size:12.5px;font-weight:700;color:var(--ink-2)}

/* ---------- the add-card journey ---------- */
.js-top{display:grid;gap:8px;padding:8px 0 4px}
.js-top .lede{max-width:34ch}
.js-top-c{justify-items:center;text-align:center}
.js-top-c .lede{max-width:none}
.js-from{justify-self:start;display:inline-flex;align-items:center;gap:8px;margin:0;padding:6px 12px 6px 8px;border-radius:999px;background:var(--t-mint);font-size:14px;font-weight:700}
.js-from-dot{width:10px;height:10px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 4px rgba(13,183,167,.22)}
.js-step{display:grid;gap:12px}
.js-n{display:flex;align-items:center;gap:10px;margin:0;font-family:var(--display);font-weight:800;font-size:24px;line-height:1}
.js-n b{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:var(--ink);color:#fff;font-family:var(--ui);font-size:15px}
.js-goals{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.js-goal{position:relative;display:grid;grid-template-columns:54px minmax(0,1fr);grid-template-rows:auto auto auto;column-gap:12px;align-items:center;text-align:left;padding:12px;border:0;border-radius:var(--r);background:var(--white);color:var(--ink);font:inherit;cursor:pointer;box-shadow:inset 0 0 0 2px var(--line);transition:transform .15s var(--ease),box-shadow .15s}
.js-goal img{grid-row:1 / 4;width:54px;height:54px;border-radius:16px;object-fit:cover;background:var(--paper-2)}
.js-goal b{font-family:var(--display);font-weight:800;font-size:24px;line-height:1}
.js-goal span{font-size:14px;font-weight:800;color:var(--pink)}
.js-goal small{font-size:12.5px;color:var(--ink-2)}
.js-goal:active{transform:scale(.98)}
.js-goal[aria-checked=true]{background:var(--t-butter);box-shadow:inset 0 0 0 3px var(--ink),4px 4px 0 var(--ink)}
.js-goal[aria-checked=true]::after{content:"";position:absolute;right:10px;top:10px;width:22px;height:22px;border-radius:50%;background:var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/13px no-repeat}
.js-add{display:grid;gap:16px;justify-items:center;padding:18px;border-radius:var(--r-l);background:var(--t-lilac)}
.js-card{display:grid;place-items:center}
.js-add-copy{display:grid;gap:12px;width:100%}
.js-btns{display:grid;gap:8px}
.js-wallet{display:grid;justify-items:center;gap:0;width:100%;padding:11px 16px 12px;border:0;border-radius:16px;background:#000;color:#fff;font:inherit;cursor:pointer;line-height:1.1;transition:transform .15s var(--ease)}
.js-wallet small{font-size:11.5px;font-weight:600;opacity:.8}
.js-wallet b{font-family:var(--ui);font-weight:800;font-size:19px;letter-spacing:-.01em}
.js-wallet:active{transform:scale(.98)}
.js-wallet-2{background:var(--white);color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}
.js-ticks{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.js-ticks li{display:flex;align-items:center;gap:8px;font-size:14.5px;font-weight:700}
.js-ticks svg{flex:none;width:20px;height:20px;padding:4px;border-radius:50%;background:var(--teal);color:#fff}
.js-desk{margin:0;padding:10px 12px;border-radius:14px;background:var(--white);font-size:14px;line-height:1.35}
.js-ok{display:grid;place-items:center;width:58px;height:58px;margin:0;border-radius:50%;background:var(--teal);color:#fff;box-shadow:0 0 0 8px rgba(13,183,167,.18)}
.js-ok svg{width:30px;height:30px}
.js-in{display:grid;gap:18px;justify-items:center}
.js-in .qs{width:100%}
.js-drop{transform-origin:50% 100%}
.js-drop.go{animation:jsDrop .9s var(--ease) both}
@keyframes jsDrop{0%{opacity:0;transform:translateY(-46px) rotate(-7deg) scale(.92)}60%{opacity:1;transform:translateY(6px) rotate(1.5deg) scale(1.02)}100%{opacity:1;transform:none}}
.js-next{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:8px}
.js-next a{display:grid;grid-template-columns:62px minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 14px;border-radius:var(--r);background:var(--white);color:var(--ink);text-decoration:none;box-shadow:var(--shadow)}
.js-next a > .stk{justify-self:center}
.js-next a > span:nth-child(2){display:grid;gap:1px;min-width:0}
.js-next small{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--pink)}
.js-next b{font-family:var(--display);font-weight:800;font-size:21px;line-height:1.05}
.js-next i{font-style:normal;font-size:14px;color:var(--ink-2);line-height:1.3}
.js-next a > svg{width:20px;height:20px;color:var(--ink-2)}

/* ---------- wider screens ---------- */
@media (min-width:700px){
  .js-goals{grid-template-columns:repeat(4,minmax(0,1fr))}
  .js-goal{grid-template-columns:1fr;justify-items:start;row-gap:2px}
  .js-goal img{grid-row:auto;width:72px;height:72px;margin-bottom:6px}
  .js-add{grid-template-columns:auto minmax(0,340px);justify-content:center;align-items:center;gap:32px;padding:28px}
  .js-in{grid-template-columns:auto minmax(0,440px);justify-content:center;align-items:center;gap:36px}
  .js-top-c{padding-top:20px}
  .first-l{grid-template-columns:repeat(3,minmax(0,1fr))}
  .road{max-width:620px}
  .evx{width:220px}
  .cont{width:260px}
}
@media (prefers-reduced-motion:reduce){.js-drop.go{animation:none}.evx,.js-goal,.js-wallet{transition:none}}

.fcard-off{text-align:left}
.fcard-amt .fcard-off span{font-size:inherit;font-weight:inherit;color:inherit}

/* the add-card page is one job: no radio, no tabs. The card-added page keeps tabs, drops the radio. */
.focus #tabs,.focus #radio,.quiet #radio{display:none !important}
.js-top{padding:18px 18px 0}
@media (min-width:700px){.js-top{padding:26px 0 0}}

.first-l li{display:block;padding:0}
.first-l a{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 14px;color:var(--ink);text-decoration:none;font-weight:800;font-size:16px;line-height:1.25}
.first-l a > i{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--ink);color:#fff;font-style:normal;font-family:var(--ui);font-weight:800;font-size:15px}
.first-l a > i svg{width:18px;height:18px}
.first-l li.on a > i{background:var(--teal)}
.first-l a > svg{width:18px;height:18px;color:var(--ink-2)}