/* sign-in / tasks / monster handbook (src/features.js). Art: tools/cut-feat.py (art-src/feat.png). Spacing steps --sp1..--sp5 (docs/UI_COMPONENTS.md). */

/* lobby right column (UIMainTabRight): icons stack under each other, same look as the starter pack icon on the left */
.fpil { position: absolute; right: var(--sp4); top: var(--sp4); z-index: 3; display: flex; flex-direction: column; align-items: center; gap: var(--sp3); }
.fpil .iconbtn { position: relative; left: auto; top: auto; }

/* popup frame */
.fpw .pop { width: 92cqw; max-height: 88cqh; }
.fpw .fbody { padding: var(--sp3); gap: var(--sp3); }
.ffoot:empty { display: none; }
.ffoot { padding: 0 var(--sp3) var(--sp3); }
.fpages { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--sp2); }
.fpages .btn { min-width: 0; width: 100%; position: relative; }
.fchip { width: 12.4cqw !important; height: 12.4cqw !important; flex: none; }
.fchip > b { font-size: 2.7cqw !important; }

/* progress bars: same bar as the result screen's EXP bar (flow.css .rexp .bar) */
.fbar { position: relative; height: 3.2cqw; border-radius: 1.6cqw; background: #120d2b; overflow: hidden; border: 0.4cqw solid #120d2b; }
.fbar i { display: block; height: 100%; width: 0; background: linear-gradient(#ffe36b, #ffb21f); border-radius: 1.2cqw; }
.fbar.sm { height: 2.4cqw; } .fbar.sm i { background: linear-gradient(#9cf07a, #3fbf3a); }

/* ---- sign-in: 3 x 2 day cards + a wide day 7 'Grand Prize' card + Sign In button ---- */
.fsign { display: flex; flex-direction: column; gap: var(--sp3); }
.fsgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp2); }
.fsday { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--sp1); padding: 0 0 var(--sp2); min-height: 33cqw; color: #4a2a10;
  background: none; border: 0 solid transparent; border-image: url(art/ft_day.png?v=8b68e5fd96) 58 16 16 16 fill / 7.4cqw 2cqw 2cqw 2cqw stretch; }
.fsday.ready { border-image-source: url(art/ft_day_on.png?v=8b68e5fd96); }
.fsday .fsh { height: 6.4cqw; display: flex; align-items: center; justify-content: center; font-size: 3.6cqw; padding-top: calc(var(--kfix) * 2em); }
.fsday .fsc { flex: 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--sp1); padding: 0 var(--sp1); }
.fsday .fsst { font-size: 2.8cqw; color: #c0520a; margin-top: -0.6cqw; }
.fsday.got .fsc { opacity: .45; }
.fsday .fsok { position: absolute; inset: 7cqw 0 0; display: grid; place-items: center; pointer-events: none; }
.fsday .fsok img { width: 11cqw !important; height: 11cqw !important; }
.fsday.wide { min-height: 26cqw; }
.fsday.wide .fsc { gap: var(--sp3); }
.fsrib { position: absolute; left: -1.6cqw; top: -2.2cqw; width: 26cqw; height: 8.4cqw; display: flex; align-items: center; justify-content: center; padding: calc(var(--kfix) * 2em) 0 0 2cqw; font-size: 3.2cqw;
  background: url(art/ft_ribbon.png?v=8b68e5fd96) center / 100% 100% no-repeat; z-index: 1; }
.fsact { display: flex; justify-content: flex-end; }
.fsact .btn { position: relative; min-width: 34cqw; }

/* ---- daily / weekly: activity bar with 5 boxes, reset countdown, task rows, Quick Claim ---- */
.fact { display: flex; flex-direction: column; gap: var(--sp1); padding: var(--sp2) var(--sp2) 0; }
.factrow { display: flex; align-items: center; gap: var(--sp3); }
.fatok { position: relative; width: 12cqw; height: 12cqw; flex: none; }
.fatok img { width: 100%; height: 100%; object-fit: contain; }
.fatok b { position: absolute; inset: auto 0 -1.4cqw; text-align: center; font-size: 3.6cqw; }
.fbarw { position: relative; flex: 1; height: 15cqw; margin-right: 4cqw; display: flex; align-items: center; }
.fbarw .fbar { width: 100%; }
.fbox { position: absolute; top: 0; transform: translateX(-50%); width: 10cqw; background: none; border: 0; padding: 0; display: flex; flex-direction: column; align-items: center; }
.fbox img:first-child { width: 9cqw; height: 8cqw; object-fit: contain; filter: drop-shadow(0 0.4cqw 0 rgba(0,0,0,.35)); }
.fbox span { font-size: 2.8cqw; margin-top: 2.4cqw; }
.fbox.rd img:first-child { animation: fwig 1s ease-in-out infinite; }
.fbox.got img:first-child { opacity: .8; }
@keyframes fwig { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-9deg) scale(1.08); } 75% { transform: rotate(9deg) scale(1.08); } }
.freset { align-self: flex-end; font-size: 3cqw; color: #cfd3ff; } .freset b { color: #fff; font-weight: 400; }
.flist { display: flex; flex-direction: column; gap: var(--sp2); }
.frow { display: flex; align-items: center; gap: var(--sp2); padding: var(--sp2) var(--sp3) calc(var(--sp2) + 1.4cqw); color: #4a2a10; text-align: left;
  border: 0 solid transparent; border-image: url(art/ft_row.png?v=8b68e5fd96) 14 14 30 14 fill / 2cqw 2cqw 3.6cqw 2cqw stretch; }
.frow.got { opacity: .6; }
.frow .ftx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--sp1); }
.frow .ftt { font-size: 3.4cqw; font-weight: 700; line-height: 1.15; }
.frow .fpg { display: flex; align-items: center; gap: var(--sp2); } .frow .fpg .fbar { flex: 1; } .frow .fpg b { font-size: 2.8cqw; font-weight: 400; min-width: 15cqw; text-align: right; }
.frow .btn { flex: none; min-width: 19cqw; position: relative; }
.frow .fdone { flex: none; min-width: 19cqw; text-align: center; font-size: 3cqw; color: #8a6a4a; }
.fallrow { display: flex; justify-content: center; padding-top: var(--sp1); } .fallrow .btn { min-width: 40cqw; }

/* ---- monster handbook: 3-column entry cards, collection bar + chest, tabs ---- */
.fhgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp3) var(--sp2); }
.fhcard { position: relative; display: flex; flex-direction: column; align-items: center; padding: 0; aspect-ratio: 199 / 240; color: #3a3550;
  background: none; border: 0 solid transparent; border-image: url(art/ft_hbcard.png?v=8b68e5fd96) 22 22 62 22 fill / 2.4cqw 2.4cqw 6.6cqw 2.4cqw stretch; }
.fhcard .fhimg { flex: 1; width: 100%; display: grid; place-items: center; min-height: 0; padding: 1.4cqw; }
.fhcard .fhimg img { max-width: 100%; max-height: 18cqw; object-fit: contain; }
.fhcard .fhname { height: 6.6cqw; margin-top: -6.6cqw; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 2.7cqw; line-height: 1; padding: calc(var(--kfix) * 2em) 1cqw 0; }
.fhcard.locked .fhimg img, .fhcard.met .fhimg img { filter: brightness(0); opacity: .28; }
.fhcard img.dot { right: -1.2cqw; top: -1.2cqw; }
.fhfoot { display: flex; flex-direction: column; gap: var(--sp2); }
.fhbarrow { display: flex; align-items: center; gap: var(--sp2); padding: var(--sp2) var(--sp2) 0 var(--sp4); }
.fhbar { flex: 1; height: 5.2cqw; border-radius: 1cqw; } .fhbar i { border-radius: 0.6cqw; background: linear-gradient(#9cf07a, #3fbf3a); }
.fhbar b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 3cqw; font-weight: 400; padding-top: calc(var(--kfix) * 2em); }
.fhchest { position: relative; width: 14cqw; height: 12cqw; background: none; border: 0; padding: 0; flex: none; }
.fhchest img:first-child { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 0.5cqw 0 rgba(0,0,0,.35)); }
.fhchest.rd img:first-child { animation: fwig 1s ease-in-out infinite; }
.fhchest.got img:first-child { filter: grayscale(1) brightness(.8); }
.fhhint { font-size: 3cqw; text-align: center; color: #e8e6ff; }
@media (prefers-reduced-motion: reduce) { .fbox.rd img:first-child, .fhchest.rd img:first-child { animation: none !important; } }