/* Clickbait lesson. All rules scoped under .clk-* */
.clk-feed { width: 100%; max-width: 340px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }
.clk-card { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 10px 12px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line-strong); color: var(--text); text-align: left; font-family: var(--sans); cursor: pointer; animation: clkIn .5s cubic-bezier(.2,.8,.2,1) both; transition: border-color .25s, box-shadow .25s, opacity .25s; }
.clk-feed .clk-card:nth-child(2) { animation-delay: .25s; }
.clk-feed .clk-card:nth-child(3) { animation-delay: .5s; }
@keyframes clkIn { from { opacity: 0; translate: 0 26px; } }
.clk-card:disabled { cursor: default; color: var(--text); opacity: 1; }
.clk-card.clk-on { border-color: var(--gold); box-shadow: 0 0 18px rgba(252,192,80,.35); }
.clk-pic { flex: 0 0 52px; width: 52px; height: 52px; border-radius: 10px; background: var(--raised); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.clk-pic svg { width: 40px; height: 40px; }
.clk-pic img { width: 100%; height: 100%; object-fit: contain; }
.clk-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.clk-txt small { font: 600 12px var(--sans); color: var(--faint); }
.clk-txt b { font: 700 15px/1.3 var(--sans); }
.clk-big { flex-direction: column; align-items: stretch; }
.clk-big .clk-pic { flex: none; width: 100%; height: 112px; background: radial-gradient(ellipse at center, rgba(123,92,253,.28), transparent 70%); }
.clk-big .clk-txt b { font-size: 16.5px; }
.clk-txt mark { background: none; color: inherit; border-radius: 6px; transition: background .5s, color .5s, box-shadow .5s; }
.clk-gap .clk-txt mark { background: rgba(252,192,80,.18); color: var(--gold); box-shadow: 0 0 0 2px rgba(252,192,80,.6); animation: clkGlow 1.4s ease-in-out 3; }
@keyframes clkGlow { 50% { box-shadow: 0 0 0 2px rgba(252,192,80,.6), 0 0 18px rgba(252,192,80,.5); } }
.clk-one .clk-card { animation-delay: 0s; }

/* the article */
.clk-page { width: 100%; max-width: 340px; margin: 0 auto; border-radius: 18px; background: #F4EFE6; color: #1C1A17; overflow: hidden; border: 1px solid var(--line-strong); }
.clk-scroll { height: 300px; overflow-y: auto; overscroll-behavior: contain; padding: 14px 16px 18px; scrollbar-width: none; touch-action: pan-y; -webkit-overflow-scrolling: touch; }
.clk-scroll::-webkit-scrollbar { display: none; }
.clk-scroll h3 { margin: 0 0 8px; font: 800 18px/1.25 var(--sans); }
.clk-scroll p { margin: 10px 0; font: 500 15px/1.45 var(--serif); }
.clk-hero { display: block; width: 70%; margin: 0 auto; }
.clk-ad { height: 120px; margin: 12px 0; border-radius: 10px; background: repeating-linear-gradient(45deg, #DDD5C7 0 10px, #E6DFD2 10px 20px); display: flex; align-items: flex-start; justify-content: flex-end; padding: 6px 8px; }
.clk-ad span { font: 700 11.5px var(--sans); color: #6B6358; text-transform: uppercase; letter-spacing: .08em; }
.clk-pay { margin: 14px 0 6px; padding: 8px; border-radius: 12px; text-align: center; transition: background .5s; }
.clk-pay img { display: block; width: 78%; margin: 0 auto 4px; }
.clk-pay b { font: 800 16px/1.3 var(--sans); }
.clk-pay.clk-lit { background: rgba(201,140,27,.16); }
.clk-end { color: #8A8176; font-style: italic; }

/* the editor */
.clk-edit { width: 100%; max-width: 340px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.clk-dog { width: 66%; max-width: 220px; filter: drop-shadow(0 8px 16px rgba(123,92,253,.25)); }
.clk-pk { width: 100%; }
.clk-pk .choices.clk-chips { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 8px; }
.clk-pk .clk-chips .choice { flex: 0 0 auto; width: auto; min-height: 44px; padding: 8px 12px; border-radius: 12px; font: 700 15.5px var(--sans); }
.clk-new { display: none; width: 100%; padding: 10px 12px; border-radius: 14px; background: var(--surface); border: 1px solid var(--gold); box-shadow: 0 0 18px rgba(252,192,80,.3); text-align: center; }
.clk-new.on { display: block; animation: clkIn .45s cubic-bezier(.2,.8,.2,1) both; }
.clk-dog.gone { display: none; }
.clk-new small { display: block; font: 700 11.5px var(--sans); color: var(--gold); text-transform: uppercase; letter-spacing: .08em; }
.clk-new b { font: 800 17px/1.3 var(--sans); }

.clk-hero2 { display: flex; justify-content: center; }
.clk-hero2 img { width: 62%; max-width: 230px; filter: drop-shadow(0 10px 22px rgba(123,92,253,.3)); }

@media (max-height: 700px) {
  .clk-scroll { height: 250px; }
  .clk-big .clk-pic { height: 84px; }
  .clk-card { min-height: 56px; padding: 8px 10px; }
  .clk-pic { flex-basis: 44px; width: 44px; height: 44px; }
  .clk-dog { width: 46%; }
  .clk-hero2 img { width: 48%; }
}