/* Gamarium Ads v1 (js/ads.js, docs/ADS.md): the Watch & Win entry on Home, the ladder sheet (three tiers of ten steps, the
   milestones as our 3D renders, then the bonus ads row), the Quests card, the partner task (Quick Task: Home, the sheet's
   top, Quests; its red dot and the sheet's "One more" offer) and the test ad. Arcade Bright tokens, no new colours beyond
   a warm orange for the ladder. */

/* ---------- Home: the Watch & Win entry (full width, between the Airdrop card and the Daily Tap) ----------
   The brand violet sticker with our gold play button, the trophy render rising out of its top edge on the eclipse
   corona (no sunburst), a shine sweep now and then. Logical properties, so it mirrors in right-to-left. */
.wwh-slot { display: block; }
.wwh { position: relative; isolation: isolate; display: flex; align-items: center; gap: 11px; width: 100%; height: 84px; margin-top: 26px;
  padding-block: 0; padding-inline: 11px 98px; border-radius: 24px; border: var(--bw) solid var(--ink); box-shadow: 0 5px 0 var(--ink); text-align: start;
  background: radial-gradient(60% 130% at 90% 85%, rgba(255, 205, 110, .5), rgba(255, 205, 110, 0) 64%), linear-gradient(160deg, #8F63FF 0%, #6A3CF5 50%, #5326D9 100%);
  transition: transform .12s ease, box-shadow .12s ease; }
.wwh:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--ink); }
.wwh-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; border-radius: 21px; pointer-events: none; }
.wwh-bg::before { content: ""; position: absolute; inset: 0; background: var(--dust); opacity: .4; }
.wwh-bg::after { content: ""; position: absolute; left: 4px; right: 4px; top: 3px; height: 40%; border-radius: 18px 18px 50% 50% / 18px 18px 18px 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .26), rgba(255, 255, 255, 0)); }
.wwh-shine { position: absolute; top: -30%; bottom: -30%; left: 0; width: 26%; z-index: 1;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .3) 50%, rgba(255, 255, 255, 0));
  transform: translateX(-130%) skewX(-18deg); animation: wwh-shine 5.2s ease-in-out 1.2s infinite; }
@keyframes wwh-shine { 0%, 58% { transform: translateX(-130%) skewX(-18deg); } 86%, 100% { transform: translateX(420%) skewX(-18deg); } }

.wwh-play { position: relative; z-index: 2; flex: none; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%;
  background: var(--g-gold); border: var(--bw) solid var(--ink); box-shadow: 0 4px 0 var(--ink); color: #fff; animation: wwh-ping 2.2s ease-out infinite; }
.wwh-play::before { content: ""; position: absolute; left: 7px; right: 7px; top: 4px; height: 42%; border-radius: 50% 50% 45% 45%;
  background: linear-gradient(180deg, rgba(255, 255, 255, .6), rgba(255, 255, 255, 0)); }
.wwh-play svg { position: relative; width: 25px; height: 25px; margin-left: 4px; /* the play glyph's optical centre; media controls never mirror */
  filter: drop-shadow(1.4px 1.4px 0 var(--ink)) drop-shadow(-1.4px -1.4px 0 var(--ink)) drop-shadow(1.4px -1.4px 0 var(--ink)) drop-shadow(-1.4px 1.4px 0 var(--ink)); }
@keyframes wwh-ping { 0% { box-shadow: 0 4px 0 var(--ink), 0 0 0 0 rgba(255, 216, 79, .8); } 70%, 100% { box-shadow: 0 4px 0 var(--ink), 0 0 0 13px rgba(255, 216, 79, 0); } }

.wwh-tx { position: relative; z-index: 2; flex: 1; min-width: 0; display: grid; gap: 8px; }
.wwh-h { font-size: 23px; line-height: 1; color: #fff; white-space: nowrap; letter-spacing: .015em; -webkit-text-stroke: 5px var(--ink); paint-order: stroke fill; text-shadow: 0 3px 0 var(--ink); }
.wwh-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.wwh-chip { flex: none; display: inline-flex; align-items: center; gap: 4px; height: 25px; padding-block: 0; padding-inline: 3px 9px; border-radius: 13px;
  background: #fff; border: 2px solid var(--ink); box-shadow: 0 2px 0 var(--ink); font: 900 11.5px/1 var(--f-ui); color: var(--ink-2); white-space: nowrap; }
.wwh-chip b, .wwh-bar > b { direction: ltr; unicode-bidi: isolate; }
.wwh-chip b { font: 400 16px/1 var(--f-d); color: var(--ink); }
.wwh-chip > svg { width: 13px; height: 13px; margin-inline-start: 4px; color: var(--violet); stroke-width: 2.6; }
.wwh-chip--cd [data-cd-text] { font: 400 14px/1 var(--f-d); color: var(--ink); }
.wwh-bar { position: relative; flex: 1; min-width: 52px; max-width: 118px; height: 21px; border-radius: 11px; overflow: hidden; background: #fff; border: 2px solid var(--ink); box-shadow: 0 2px 0 var(--ink);
  display: grid; place-items: center; }
.wwh-bar > i { position: absolute; inset-block: 0; inset-inline-start: 0; border-radius: 9px; background: linear-gradient(180deg, #FFE27A, #F5A00C); }
.wwh-bar > i::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: repeating-linear-gradient(120deg, rgba(255, 255, 255, .3) 0 5px, rgba(255, 255, 255, 0) 5px 10px); }
.wwh-bar > b { position: relative; font-size: 13px; line-height: 1; color: #fff; letter-spacing: .02em; -webkit-text-stroke: 3.5px var(--ink); paint-order: stroke fill; }
.wwh-note { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 900 12.5px/1 var(--f-ui); color: #fff; text-shadow: 0 1.5px 0 rgba(42, 22, 82, .7); }

.wwh-art { position: absolute; z-index: 1; inset-inline-end: 2px; bottom: 3px; width: 98px; height: 98px; pointer-events: none; }
.wwh-art img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 4px 0 rgba(42, 22, 82, .38)); animation: wwh-bob 3.4s ease-in-out infinite; }
/* the eclipse corona behind the trophy, inside the clipped background */
.wwh-glow { position: absolute; inset-inline-end: -16px; bottom: -40px; width: 140px; height: 140px; border-radius: 50%; background: var(--corona-g); opacity: .9;
  animation: cr-breathe 4.5s ease-in-out infinite; }
@keyframes wwh-bob { 50% { transform: translateY(-4px); } }

.wwh-new { position: absolute; z-index: 4; top: -12px; inset-inline-start: -7px; padding: 4px 7px 3px; border-radius: 9px; transform: rotate(-8deg); font-style: normal;
  background: var(--g-red); border: 2px solid var(--ink); box-shadow: 0 2px 0 var(--ink); color: #fff; font: 400 12px/1 var(--f-d); letter-spacing: .06em;
  -webkit-text-stroke: 2.5px var(--ink); paint-order: stroke fill; }
[dir="rtl"] .wwh-new { transform: rotate(8deg); }

/* small phones: a little more compact, so the Daily Tap stays close */
@media (max-width: 374px) {
  .wwh { height: 78px; margin-top: 23px; gap: 10px; padding-inline: 10px 92px; }
  .wwh-play { width: 50px; height: 50px; }
  .wwh-play svg { width: 22px; height: 22px; }
  .wwh-h { font-size: 21px; }
  .wwh-tx { gap: 7px; }
  .wwh-art { width: 90px; height: 90px; }
  .wwh-chip { gap: 3px; padding-inline-end: 7px; }
}

/* bonus ads (after the ladder): the same entry, calmer; a sticker says there is no daily limit */
.wwh.is-bonus .wwh-play { animation-duration: 3.4s; }
.wwh-free { position: absolute; z-index: 4; top: -12px; inset-inline-start: 12px; display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: 11px;
  transform: rotate(-4deg); font-style: normal; background: var(--g-green); border: 2px solid var(--ink); box-shadow: 0 2px 0 var(--ink);
  font: 400 12px/1 var(--f-d); letter-spacing: .03em; color: #fff; -webkit-text-stroke: 2.5px var(--ink); paint-order: stroke fill; white-space: nowrap; }
.wwh-free svg { width: 12px; height: 12px; stroke-width: 2.6; color: #fff; -webkit-text-stroke: 0; filter: drop-shadow(0 1px 0 var(--ink)); }
[dir="rtl"] .wwh-free { transform: rotate(4deg); }

/* the day is done (only without bonus ads): calm, no pulse, no shine; the countdown to 00:00 UTC */
.wwh.is-done { background: radial-gradient(60% 130% at 90% 85%, rgba(255, 255, 255, .35), rgba(255, 255, 255, 0) 64%), linear-gradient(160deg, #C4B0FF 0%, #A68AFF 100%); }
.wwh.is-done .wwh-play { background: var(--g-green); animation: none; }
.wwh.is-done .wwh-play svg { margin-left: 0; stroke-width: 3.4; }
.wwh.is-done .wwh-shine, .wwh.is-done .wwh-glow { display: none; }
.wwh.is-done .wwh-art img { animation: none; }

/* ---------- the ladder sheet ---------- */
.ads { display: grid; gap: 12px; padding-top: 4px; }
.ads-hero { position: relative; height: 142px; border-radius: 22px; overflow: hidden; isolation: isolate;
  border: var(--bw) solid var(--ink); box-shadow: 0 5px 0 var(--ink);
  background: radial-gradient(90% 80% at 86% 78%, rgba(255, 236, 170, .95) 0%, rgba(255, 236, 170, 0) 60%), linear-gradient(160deg, #FFC46E 0%, #FF8A3D 100%); }
.ads-hero-dust { position: absolute; inset: 0; z-index: -1; background: var(--dust); opacity: .6; }
.ads-hero-ring { position: absolute; right: -30px; bottom: -52px; z-index: -1; width: 210px; height: 210px; border-radius: 50%; background: var(--corona-w); animation: cr-breathe 5s ease-in-out infinite; }
.ads-hero-art { position: absolute; right: 6px; bottom: -8px; width: 122px; height: 122px; filter: drop-shadow(0 4px 0 rgba(42, 22, 82, .3)); }
.ads-hero-tx { position: absolute; left: 14px; top: 14px; right: 128px; display: grid; gap: 7px; justify-items: start; }
.ads-hero-tx h2 { font-size: 31px; line-height: 1; color: #fff; white-space: nowrap; -webkit-text-stroke: 6px var(--ink); paint-order: stroke fill; text-shadow: 0 4px 0 var(--ink); }
.ads-hero-tx p { font: 800 12.5px/1.3 var(--f-ui); color: var(--ink); }

.ads-now { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 0 12px; padding: 11px 14px 13px; }
.ads-now .cap { display: block; margin-bottom: 6px; }
.ads-now-v { display: flex; align-items: center; gap: 7px; min-width: 0; }
.ads-now-v b { font-size: 29px; line-height: 1; }
.ads-now-v small { align-self: flex-end; margin-bottom: 3px; font: 900 12px/1 var(--f-ui); color: var(--ink-3); white-space: nowrap; }
.ads-now-b { text-align: right; }
.ads-now-b b { display: block; font-size: 25px; line-height: 30px; }
.ads-now-b small { font-size: 15px; color: var(--ink-3); }
.ads-prog { grid-column: 1 / -1; position: relative; height: 13px; margin-top: 10px; border-radius: 8px; overflow: hidden; background: var(--lilac); border: 2px solid var(--ink); }
.ads-prog > i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 6px; background: linear-gradient(180deg, #FFE27A, #F5A00C); transition: width .5s cubic-bezier(.3, .8, .3, 1); }
.ads-prog > i::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: repeating-linear-gradient(120deg, rgba(255, 255, 255, .3) 0 5px, rgba(255, 255, 255, 0) 5px 10px); }
.ads-prog > span { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: rgba(42, 22, 82, .4); }
.ads-now.is-full .ads-prog > i { background: linear-gradient(180deg, #53E895, #1FBF67); }

.ads-tiers { display: grid; gap: 12px; margin-top: 2px; }
.ads-tier { position: relative; display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)) 80px; grid-template-rows: 24px 38px; gap: 8px 4px;
  padding: 10px 10px 11px; border-radius: 20px; background: #fff; border: var(--bw) solid var(--ink); box-shadow: 0 4px 0 var(--ink); }
.ads-tier.is-done { background: #F1FBF5; }
.ads-tier.is-now { background: linear-gradient(180deg, #FFF8E4, #FFFFFF 70%); }
.ads-th { grid-column: 1 / 10; grid-row: 1; display: flex; align-items: center; gap: 7px; min-width: 0; }
.ads-th b { font-size: 16.5px; line-height: 1; white-space: nowrap; }
.ads-each { display: inline-flex; align-items: center; gap: 4px; height: 23px; padding: 0 8px 0 3px; border-radius: 12px; white-space: nowrap;
  background: #fff; border: 2px solid var(--ink); font: 900 11px/1 var(--f-ui); color: var(--ink); }
.ads-tick { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--green); border: 2px solid var(--ink); color: #fff; }
.ads-tick svg { width: 12px; height: 12px; stroke-width: 3.8; }
.ads-s { grid-row: 2; display: grid; place-items: center; min-width: 0; border-radius: 10px; background: var(--lilac); border: 2px solid #CFC3EA; color: var(--ink-3);
  font: 400 14px/1 var(--f-d); }
.ads-s svg { width: 15px; height: 15px; }
.ads-s.is-done { background: var(--g-green); border-color: var(--ink); box-shadow: 0 2px 0 var(--ink); color: #fff; }
.ads-s.is-done svg { stroke-width: 3.8; filter: drop-shadow(0 1px 0 rgba(42, 22, 82, .55)); }
.ads-s.is-wait { background: var(--g-sky); border-color: var(--ink); box-shadow: 0 2px 0 var(--ink); color: #fff; }
.ads-s.is-wait svg { stroke-width: 2.8; }
.ads-s.is-next { position: relative; z-index: 1; background: var(--g-gold); border-color: var(--ink); color: #fff; font-size: 15px;
  -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; transform: translateY(-2px); box-shadow: 0 3px 0 var(--ink); animation: ads-ping 1.7s ease-out infinite; }
.ads-m { grid-column: 10; grid-row: 1 / 3; position: relative; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 6px;
  border-radius: 16px; border: var(--bw) solid var(--ink); box-shadow: 0 3px 0 var(--ink); background: linear-gradient(170deg, #F1EAFF, #C9B3FF); }
.ads-tier--2 .ads-m { background: linear-gradient(170deg, #FFEAF4, #FFB3D3); }
.ads-m--top, .ads-tier--3 .ads-m { background: linear-gradient(170deg, #FFF4C8, #FFC531); }
.ads-m-ring { position: absolute; left: 50%; top: 24px; width: 96px; height: 96px; margin: -48px 0 0 -48px; border-radius: 50%; background: var(--corona-w); pointer-events: none; }
.ads-m img { position: absolute; left: 50%; top: -12px; width: 68px; height: 68px; margin-left: -34px; filter: drop-shadow(0 3px 0 rgba(42, 22, 82, .3)); }
.ads-m--top img { top: -22px; width: 82px; height: 82px; margin-left: -41px; }
.ads-m--top .ads-m-ring { top: 20px; width: 112px; height: 112px; margin: -56px 0 0 -56px; background: var(--corona-g); animation: cr-breathe 4s ease-in-out infinite; }
.ads-m--top b { font-size: 15px; }
.ads-m b { position: relative; z-index: 2; font-size: 16px; line-height: 1; color: #fff; -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; }
.ads-m-ok { position: absolute; right: -8px; top: -9px; z-index: 3; display: grid; place-items: center; width: 25px; height: 25px; border-radius: 50%;
  background: var(--green); border: 2px solid var(--ink); color: #fff; }
.ads-m-ok svg { width: 13px; height: 13px; stroke-width: 3.8; }
.ads-m-tag { position: absolute; left: -7px; top: -10px; z-index: 3; padding: 4px 6px 3px; border-radius: 8px; transform: rotate(-9deg);
  background: var(--g-red); border: 2px solid var(--ink); color: #fff; font: 400 11px/1 var(--f-d); font-style: normal; letter-spacing: .04em;
  -webkit-text-stroke: 2.5px var(--ink); paint-order: stroke fill; }
.ads-m.is-done { background: linear-gradient(170deg, #E6FCEE, #9FEBC0); }
.ads-m.is-next { animation: ads-ping-big 1.7s ease-out infinite; }
.ads-m.is-wait b { opacity: .5; }
.ads-s.is-new, .ads-m.is-new, .ads-bonus.is-new .ads-bonus-ic { animation: ads-pop .55s cubic-bezier(.3, 1.6, .5, 1); }
/* the bonus ads after the ladder: locked (lilac) until the ladder is climbed, then a calm gold row with today's count */
.ads-bonus { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 20px; background: var(--lilac); border: var(--bw) dashed #B7A6DE; }
.ads-bonus-ic { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #fff; border: 2px solid #CFC3EA; color: var(--ink-3); }
.ads-bonus-ic svg { width: 17px; height: 17px; }
.ads-bonus-tx { flex: 1; min-width: 0; display: grid; gap: 4px; }
.ads-bonus-tx b { font-size: 16.5px; line-height: 1; color: var(--ink-2); }
.ads-bonus-tx span { font: 800 11.5px/1.25 var(--f-ui); color: var(--ink-3); }
.ads-bonus.is-now { background: linear-gradient(180deg, #FFF8E4, #FFFFFF 75%); border: var(--bw) solid var(--ink); box-shadow: 0 4px 0 var(--ink); }
.ads-bonus.is-now .ads-bonus-ic { background: var(--g-gold); border: var(--bw) solid var(--ink); box-shadow: 0 3px 0 var(--ink); color: #fff; }
.ads-bonus.is-now .ads-bonus-ic svg { margin-left: 3px; filter: drop-shadow(1.2px 1.2px 0 var(--ink)) drop-shadow(-1.2px -1.2px 0 var(--ink)) drop-shadow(1.2px -1.2px 0 var(--ink)) drop-shadow(-1.2px 1.2px 0 var(--ink)); }
.ads-bonus.is-now .ads-bonus-tx b { color: var(--ink); }
.ads-bonus.is-now .ads-bonus-tx span { color: var(--ink-2); }
.ads-bonus-n { flex: none; display: grid; justify-items: center; gap: 3px; min-width: 46px; }
.ads-bonus-n b { font-size: 22px; line-height: 1; }
.ads-bonus-n small { font: 900 10px/1 var(--f-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
@keyframes ads-ping { 0% { box-shadow: 0 3px 0 var(--ink), 0 0 0 0 rgba(255, 178, 12, .7); } 70%, 100% { box-shadow: 0 3px 0 var(--ink), 0 0 0 7px rgba(255, 178, 12, 0); } }
@keyframes ads-ping-big { 0% { box-shadow: 0 3px 0 var(--ink), 0 0 0 0 rgba(255, 178, 12, .75); } 70%, 100% { box-shadow: 0 3px 0 var(--ink), 0 0 0 9px rgba(255, 178, 12, 0); } }
@keyframes ads-pop { 0% { transform: scale(.6); } 60% { transform: scale(1.18); } 100% { transform: scale(1); } }
.ads-go { margin-top: 4px; }
.ads-go [data-cd-text] { font: inherit; }
.ads-fine { margin-top: -2px; }

/* ---------- Quests: the Watch & Win card and the sponsored task ---------- */
.adq { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 11px; border-radius: 20px; background: linear-gradient(180deg, #FFF2DF, #FFFFFF 72%); }
.adq.is-done { background: #FAF7FF; }
.adq-art { flex: none; position: relative; width: 50px; height: 50px; border-radius: 15px; border: var(--bw) solid var(--ink); background: linear-gradient(165deg, #FFD9A3, #FF9445); }
.adq-art img { position: absolute; left: -7px; top: -12px; width: 62px; height: 62px; filter: drop-shadow(0 2px 0 rgba(42, 22, 82, .3)); }
.adq-main { flex: 1; min-width: 0; }
.adq-main > b { display: block; font-size: 17px; line-height: 1; }
.adq-s { display: block; margin-top: 4px; font: 800 11.5px/1.2 var(--f-ui); color: var(--ink-2); }
.adt-el { display: block; flex: 1; min-width: 0; color: var(--ink); font-family: var(--f-ui); --adsgram-task-font-size: 14px; --adsgram-task-icon-size: 42px; --adsgram-task-title-gap: 4px;
  --adsgram-task-icon-border-radius: 13px; --adsgram-task-icon-title-gap: 11px; --adsgram-task-button-width: 74px; }
.adt-rw { display: inline-flex; align-items: center; gap: 4px; font: 900 11.5px/1 var(--f-ui); color: var(--ink); white-space: nowrap; }
.adt-b { width: 100%; }

/* ---------- the partner task: Quick Task (Home right under Watch & Win, the ladder sheet's top, Quests) ----------
   A cream sticker with a gold task tile, our reward chip and AdsGram's task on a lilac tray. Only the live slot holds the
   <adsgram-task>; the others keep this frame with a quiet placeholder (no jump when the sheet opens or closes). */
.qt-slot { display: block; }
.qt-slot:empty { display: none; }
.ads-part { display: contents; }
.qt { margin-top: 14px; padding: 10px 10px 10px 11px; border-radius: 22px; background: linear-gradient(180deg, #FFF6DC 0%, #FFFFFF 58%); }
.qt--sheet { margin-top: 0; }
.qt--quests { margin-top: 10px; }
/* the head: the task tile over two rows, the title and our reward chip, then the line under both (one line on a phone) */
.qt-hd { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 10px; row-gap: 3px; min-width: 0; }
.qt-ic { grid-row: 1 / 3; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 13px; background: var(--g-gold); border: var(--bw) solid var(--ink);
  box-shadow: 0 2px 0 var(--ink); color: var(--ink); --icf: #fff; }
.qt-ic svg { width: 21px; height: 21px; stroke-width: 2.5; }
.qt-h { grid-column: 2; grid-row: 1; min-width: 0; font-size: 19px; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qt-s { grid-column: 2 / 4; grid-row: 2; min-width: 0; font: 800 11.5px/1.2 var(--f-ui); color: var(--ink-2); }
.qt-chip { grid-column: 3; grid-row: 1; display: inline-flex; align-items: center; gap: 4px; height: 28px; padding-block: 0; padding-inline: 3px 10px; border-radius: 14px;
  background: #fff; border: 2px solid var(--ink); box-shadow: 0 2px 0 var(--ink); }
.qt-chip b { font: 400 16px/1 var(--f-d); color: var(--ink); direction: ltr; unicode-bidi: isolate; }
.qt-body { display: flex; align-items: center; min-height: 64px; margin-top: 9px; padding: 7px 8px; border-radius: 16px; background: var(--lilac); border: 2px solid #DCD0F5; }
/* the red dot while a partner task is waiting (the badge red of the Tasks sticker) */
.qt-dot { position: absolute; z-index: 3; top: -6px; inset-inline-end: -5px; width: 17px; height: 17px; border-radius: 50%; background: var(--red); border: 2px solid var(--ink);
  box-shadow: 0 2px 0 var(--ink); animation: breathe 2.2s ease-in-out infinite; }
/* not the live slot (the sheet holds the task): a quiet placeholder of the same height */
.qt-ph { display: flex; align-items: center; gap: 11px; width: 100%; }
.qt-ph i { flex: none; width: 42px; height: 42px; border-radius: 13px; background: #E2D8F6; }
.qt-ph span { flex: 1; display: grid; gap: 7px; }
.qt-ph b { height: 10px; border-radius: 5px; background: #E2D8F6; }
.qt-ph b + b { width: 58%; }
.qt-ph em { flex: none; width: 74px; height: 34px; border-radius: 11px; background: #E2D8F6; }
/* a paid task: the amount for 2.5 s, then the next task loads */
.qt.is-paid .qt-body { background: #EAFBF1; border-color: #A9E8C4; }
.qt-paid { display: flex; align-items: center; gap: 11px; width: 100%; animation: ads-pop .5s cubic-bezier(.3, 1.6, .5, 1); }
.qt-paid-ok { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--g-green); border: var(--bw) solid var(--ink);
  box-shadow: 0 3px 0 var(--ink); color: #fff; }
.qt-paid-ok svg { width: 21px; height: 21px; stroke-width: 3.6; filter: drop-shadow(0 1px 0 rgba(42, 22, 82, .55)); }
.qt-paid-tx { flex: 1; min-width: 0; display: grid; gap: 4px; }
.qt-paid-tx b { font-size: 20px; line-height: 1; color: var(--green-d); }
.qt-paid-tx span { font: 800 11.5px/1.2 var(--f-ui); color: var(--ink-2); }
/* "One more" (and the mission's Go) brings the card into view: a gold ring pulse */
.qt.is-pulse { animation: qt-pulse .9s ease-out 2; }
@keyframes qt-pulse { 0% { box-shadow: 0 4px 0 var(--ink), 0 0 0 0 rgba(255, 178, 12, .85); transform: scale(1); } 35% { transform: scale(1.015); }
  80%, 100% { box-shadow: 0 4px 0 var(--ink), 0 0 0 14px rgba(255, 178, 12, 0); transform: scale(1); } }
/* the ladder sheet, after a paid ad: "One more: a quick task for +X" right above the Watch button */
.qt-more { display: flex; align-items: center; gap: 10px; width: 100%; padding-block: 8px; padding-inline: 9px 8px; border-radius: 18px; text-align: start;
  background: linear-gradient(180deg, #FFF4C9, #FFE07E); border: var(--bw) solid var(--ink); box-shadow: 0 3px 0 var(--ink); animation: ads-pop .5s cubic-bezier(.3, 1.6, .5, 1); }
.qt-more:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
.qt-more-ic { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 11px; background: var(--g-violet); border: 2px solid var(--ink); color: #fff; }
.qt-more-ic svg { width: 16px; height: 16px; stroke-width: 2.4; }
.qt-more-tx { flex: 1; min-width: 0; font: 900 13px/1.3 var(--f-ui); color: var(--ink); }
.qt-more-n { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; vertical-align: top; }
.qt-more-n .gmc { width: 16px; height: 16px; }
.qt-more-go { flex: none; display: grid; place-items: center; height: 32px; padding: 0 15px; border-radius: 11px; background: var(--g-violet); border: 2px solid var(--ink);
  box-shadow: 0 2px 0 var(--ink); color: #fff; font: 400 15px/1 var(--f-d); letter-spacing: .02em; -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; }
@media (max-width: 374px) {
  .qt-h { font-size: 18px; }
  .qt-ic { width: 35px; height: 35px; border-radius: 12px; }
  .qt-ic svg { width: 19px; height: 19px; }
  .adt-el { --adsgram-task-icon-size: 38px; --adsgram-task-button-width: 70px; --adsgram-task-icon-title-gap: 9px; }
}
/* ---------- Task Break (ad-free investors only): a short sheet at a calm moment, the Quick Task head on the sheet itself
   (no sticker inside it), the live task on the lilac tray, then "Not now". It waits off screen (tb-hold, no veil, taps
   pass through) until AdsGram had a moment to answer, then slides in like every sheet; no pulse, no countdown. */
.sheet-wrap.sheet--tb.tb-hold { pointer-events: none; }
.sheet-wrap.sheet--tb.tb-hold .sheet { transform: translate(-50%, 104%); }
.sheet-wrap.sheet--tb.tb-hold .sheet-backdrop { opacity: 0; }
.sheet--tb .sheet-x { top: 22px; right: 14px; }
.sheet--tb .sheet-body { padding-top: 6px; padding-bottom: calc(var(--safe-bottom) + 12px); }
.tb { display: grid; }
.qt--break { margin: 0; padding: 0; background: none; border: 0; box-shadow: none; }
.qt--break .qt-hd { padding-inline-end: 48px; min-height: 42px; }
/* a longer title (other languages) wraps at a space instead of being cut */
.qt--break .qt-h { font-size: 21px; line-height: 1.04; white-space: normal; overflow: visible; overflow-wrap: break-word; }
.qt--break .qt-body { margin-top: 12px; min-height: 68px; background: #fff; border: var(--bw) solid var(--ink); box-shadow: 0 3px 0 var(--ink); border-radius: 18px; }
.qt--break.is-paid .qt-body { background: #EAFBF1; border-color: var(--ink); }
.tb-no { justify-self: center; min-width: 140px; height: 42px; margin-top: 8px; padding: 0 18px; border-radius: 12px; font: 900 13.5px/1 var(--f-ui); color: var(--ink-2);
  text-decoration: underline; text-decoration-color: rgba(42, 22, 82, .25); text-underline-offset: 3px; }
.tb-no:active { color: var(--ink); background: rgba(123, 77, 255, .08); }
.tb.is-paid .tb-no { visibility: hidden; }
@media (max-width: 374px) {
  .qt--break .qt-h { font-size: 19px; }
}

/* the red dot on the Tasks sticker and the Quests tile (a waiting partner task, nothing to claim) */
.sr-badge--dot { top: -6px; left: -6px; min-width: 0; width: 15px; height: 15px; padding: 0; }
.side-rail--l .sr-badge--dot { left: auto; right: -6px; }
.et .bdg--dot { right: -5px; top: -7px; min-width: 0; width: 19px; height: 19px; padding: 0; }

/* ---------- Daily Tap: the Watch & Win hint when the taps run out ---------- */
.eh--ad > svg { color: var(--orange); }
.eh--ad b { background: var(--g-gold); }

/* ---------- the test ad (ADS_TEST=1) ---------- */
.adx { position: fixed; inset: 0; z-index: 600; display: grid; place-items: center; padding: 24px 16px; opacity: 0; transition: opacity .2s;
  background: radial-gradient(circle at 50% 38%, #4B2A8A 0%, #1A0B3A 78%); }
.adx.is-in { opacity: 1; }
.adx-card { width: min(340px, 100%); display: grid; justify-items: center; gap: 10px; padding: 14px 16px 20px; text-align: center; transform: scale(.94);
  border-radius: 26px; border: var(--bw) solid var(--ink); box-shadow: 0 6px 0 var(--ink); background: linear-gradient(180deg, #F3ECFF 0%, #FFF7EC 70%);
  transition: transform .26s cubic-bezier(.3, 1.4, .5, 1); }
.adx.is-in .adx-card { transform: none; }
.adx-top { width: 100%; display: flex; align-items: center; justify-content: space-between; }
.adx-skip { height: 30px; padding: 0 12px; border-radius: 10px; background: #fff; border: 2px solid var(--ink); box-shadow: 0 2px 0 var(--ink); font: 900 12px/1 var(--f-ui); color: var(--ink-2); }
.adx-stage { position: relative; width: 156px; height: 156px; display: grid; place-items: center; }
.adx-ring { position: absolute; inset: -24px; border-radius: 50%; background: var(--corona-v); animation: cr-breathe 3s ease-in-out infinite; }
.adx-stage img { position: relative; width: 132px; height: 132px; object-fit: contain; filter: drop-shadow(0 5px 0 rgba(42, 22, 82, .25)); animation: adx-float 2.6s ease-in-out infinite; }
@keyframes adx-float { 50% { transform: translateY(-6px); } }
.adx-h { font-size: 27px; line-height: 1; }
.adx-p { max-width: 260px; font: 800 12.5px/1.35 var(--f-ui); color: var(--ink-2); }
.adx-cd { position: relative; width: 54px; height: 54px; display: grid; place-items: center; margin-top: 2px; }
.adx-cd svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.adx-cd circle { fill: #fff; stroke: var(--violet); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 0; animation: adx-cd var(--secs, 4s) linear forwards; }
@keyframes adx-cd { to { stroke-dashoffset: 100; } }
.adx-cd b { position: relative; font-size: 21px; line-height: 1; }

@media (prefers-reduced-motion: reduce) {
  .ads-s.is-next, .ads-m.is-next, .ads-hero-ring, .ads-m--top .ads-m-ring, .adx-ring, .adx-stage img { animation: none; }
  .wwh-play, .wwh-shine, .wwh-glow, .wwh-art img { animation: none; }
  .qt-dot, .qt.is-pulse, .qt-paid, .qt-more { animation: none; }
  .wwh-shine { display: none; }
}