/* Four-Ever Dojo · ABSN's 4th birthday adventure.
   Each screen wears its app's colors: ABSN (home), Supernatural, FitXR, FunFitLand. */
:root {
  --absn-yellow: #FAFB7B; --absn-logo: #FCF555; --absn-teal: #3FA88E; --absn-glow: #92FDE9; --absn-lime: #C8D65E;
  --sprinkles: #FF6FA8; --frosting: #5EE6C4; --confetti: #6CB8FF; --candles: #FAFB7B;
  --gutter: max(16px, env(safe-area-inset-left, 0px));
  --gutter-r: max(16px, env(safe-area-inset-right, 0px));
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 600 16px/1.45 Figtree, system-ui, -apple-system, sans-serif; background: #000; color: #F5F5EF; }
img { max-width: 100%; display: block; }
button, input, select { font: inherit; }
a { color: inherit; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 3px solid var(--focus, #FAFB7B); outline-offset: 2px; }

/* ---------- themes ---------- */
.theme-absn { --bg: #000; --fg: #F5F5EF; --muted: #A9AD9F; --card: #111; --line: #2A2A2A; --accent: #FAFB7B; --accent-ink: #000; --track: #262626; --display: "Chakra Petch", Figtree, sans-serif; --focus: #FAFB7B; }
.theme-sn   { --bg: #11151F; --fg: #F3F1EC; --muted: #8F96B3; --card: #1B2130; --line: #343C55; --accent: #D7F23A; --accent-ink: #11151F; --track: #2C3450; --display: Outfit, Figtree, sans-serif; --lav: #A9A4F5; --org: #F2A93B; --focus: #D7F23A; }
.theme-fxr  { --bg: #FFFFFF; --fg: #0B1B3A; --muted: #4A5D78; --card: #EEFBFD; --line: #BDEEF3; --accent: #01DAE9; --accent-ink: #062A33; --track: #D3F5F8; --display: Anton, "Barlow Condensed", sans-serif; --neon: #01DAE9; --focus: #0098A8; }
.theme-ffl  { --bg: #FFFFFF; --fg: #2A1206; --muted: #7A4A28; --card: #FFF3E6; --line: #FFD2A6; --accent: #FF7A00; --accent-ink: #FFFFFF; --track: #FFE3C7; --display: "Lilita One", Nunito, sans-serif; --focus: #FF7A00; }
.page { min-height: 100vh; background: var(--bg); color: var(--fg); padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
.wrap { max-width: 1180px; margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter-r); }
.stack { display: flex; flex-direction: column; gap: 22px; }
.row { display: flex; flex-wrap: wrap; gap: 22px; align-items: flex-start; }
.row > * { flex: 1 1 340px; min-width: 0; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 12px; }
.muted { color: var(--muted); }
.small { font-size: 13px; }

/* ---------- top bar + app tabs ---------- */
.topbar { position: sticky; top: 0; z-index: 20; background: rgba(0, 0, 0, 0.92); backdrop-filter: blur(8px); padding-top: env(safe-area-inset-top, 0px); }
.topbar .wrap { display: flex; align-items: center; gap: 12px; min-height: 56px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--absn-yellow); margin-right: auto; }
.brand img { width: 38px; height: 38px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px var(--absn-yellow); }
.brand span { font: 700 12px/1.1 Syncopate, sans-serif; letter-spacing: 1px; }
.me-chip { display: flex; align-items: center; gap: 8px; color: #F5F5EF; font-size: 14px; white-space: nowrap; }
.avatar { width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #000; font: 700 14px "Chakra Petch", sans-serif; flex: none; }
.join-btn { min-height: 40px; padding: 0 16px; border-radius: 999px; border: 0; background: var(--absn-yellow); color: #000; font-weight: 800; text-decoration: none; display: inline-flex; align-items: center; }
.tabs { background: #000; border-top: 1px solid #1C1C1C; }
.tabs .wrap { display: flex; gap: 6px; overflow-x: auto; padding-top: 8px; padding-bottom: 8px; scrollbar-width: none; }
.tabs a { flex: none; min-height: 40px; display: inline-flex; align-items: center; padding: 0 13px; border-radius: 999px; text-decoration: none; color: #D6D8CF; background: #151515; font-size: 14px; font-weight: 700; }
.tabs a[aria-current="page"] { background: var(--absn-yellow); color: #000; }

/* ---------- shared bits ---------- */
.card { background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 20px; }
.h2 { margin: 0; font-family: var(--display); font-size: 24px; line-height: 1.1; text-wrap: balance; }
.theme-absn .h2 { color: var(--absn-yellow); font-style: italic; text-transform: uppercase; }
.head-row { display: flex; flex-wrap: wrap; gap: 6px 12px; justify-content: space-between; align-items: baseline; }
.btn { min-height: 52px; padding: 0 22px; border-radius: 999px; border: 0; background: var(--accent); color: var(--accent-ink); font-weight: 800; font-size: 16px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; text-decoration: none; cursor: pointer; }
.btn.ghost { background: transparent; color: var(--fg); border: 1.5px solid var(--line); }
.btn[disabled] { opacity: .55; cursor: default; }
.bar { height: 10px; border-radius: 999px; background: var(--track); overflow: hidden; }
.bar > i { display: block; height: 100%; border-radius: 999px; background: var(--accent); }
.pill { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: 1px; }
.notice { padding: 12px 14px; border-radius: 14px; font-size: 14px; font-weight: 700; }
.notice.bad { background: #3A1420; color: #FFC2D4; }
.theme-fxr .notice.bad, .theme-ffl .notice.bad { background: #FFE4E4; color: #8A1020; }
.notice.good { background: #12301F; color: #BFF5D4; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 13px; font-weight: 800; letter-spacing: .5px; color: var(--muted); }
.field input, .field select { min-height: 50px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--bg); color: var(--fg); padding: 0 14px; font-size: 16px; width: 100%; }
.loading { padding: 120px 20px; text-align: center; font-family: "Chakra Petch", sans-serif; font-size: 22px; color: var(--absn-yellow); }

/* ---------- home (ABSN) ---------- */
.hero { position: relative; overflow: hidden; text-align: center; }
.hero .lines { position: absolute; left: 0; right: 0; top: 0; width: 100%; height: 240px; object-fit: cover; object-position: 50% 0; }
.hero .fade { position: absolute; left: 0; right: 0; top: 0; height: 240px; background: linear-gradient(180deg, rgba(0,0,0,0) 45%, #000 100%); }
.hero .inner { position: relative; padding-top: 28px; padding-bottom: 26px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.hero .logo { width: 230px; max-width: 64%; filter: drop-shadow(0 0 26px rgba(250,251,123,.35)); }
.hero h1 { margin: 0; font: italic 700 clamp(46px, 8vw, 96px)/.95 "Chakra Petch", sans-serif; color: var(--absn-yellow); text-transform: uppercase; letter-spacing: 1px; text-wrap: balance; }
.hero p { margin: 0; max-width: 560px; color: #D8DCCF; font-size: 17px; }
.hero .dates { font: 700 11px/1.4 Syncopate, sans-serif; letter-spacing: 1px; color: var(--absn-glow); }
.daypill { background: var(--absn-yellow); color: #000; font-weight: 800; font-size: 12px; letter-spacing: 1.5px; padding: 6px 12px; }
.countdown { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; width: min(420px, 100%); }
.countdown div { background: #111; border: 1px solid #2A2A2A; border-radius: 12px; padding: 10px 0; }
.countdown b { display: block; font: 700 30px/1 "Chakra Petch", sans-serif; color: var(--absn-yellow); }
.countdown small { font-size: 11px; letter-spacing: 1px; color: #A9AD9F; }
.cake { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.candles { display: flex; gap: 26px; align-items: flex-end; height: 58px; }
.candle { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.candle .flame { width: 12px; height: 18px; border-radius: 50% 50% 45% 45%; background: var(--absn-yellow); }
.candle .flame.out { background: none; border: 2px dashed #555; border-radius: 50%; }
.candle .stick { width: 10px; height: 34px; border-radius: 3px; }
.tier { height: 54px; border-radius: 10px 10px 4px 4px; background: #262626; overflow: hidden; position: relative; }
.tier i { position: absolute; inset: 0 auto 0 0; }
.tier .drip { position: absolute; left: 0; right: 0; top: 0; height: 12px; background: radial-gradient(circle at 10px 0, var(--absn-yellow) 8px, transparent 9px) 0 0/20px 12px repeat-x; }
.tier span { position: absolute; left: 50%; bottom: 7px; transform: translateX(-50%); white-space: nowrap; padding: 1px 10px; border-radius: 999px; background: rgba(0,0,0,.72); font: 700 14px "Chakra Petch", sans-serif; color: #fff; }
.tier.mine { box-shadow: 0 0 0 2px #fff; }
.plate { width: 100%; height: 10px; border-radius: 999px; background: linear-gradient(90deg, var(--absn-teal), var(--absn-lime), var(--absn-yellow)); }
.ring { width: 112px; height: 112px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.ring > div { width: 88px; height: 88px; border-radius: 50%; background: var(--card); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.ring b { font: 700 32px/1 var(--display); }
.week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.week .d { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 11px; font-weight: 800; }
.week .dot { width: 38px; height: 38px; border-radius: 50%; background: #222; display: flex; align-items: center; justify-content: center; font-size: 10px; }
.week .dot.done { background: var(--absn-yellow); color: #000; }
.week .dot.today { border: 3px dashed var(--absn-yellow); background: transparent; }
.race-row { display: flex; flex-direction: column; gap: 6px; }
.race-row .t { display: flex; justify-content: space-between; font-weight: 800; }
.apps { display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 10px; }
.apps a { position: relative; overflow: hidden; border-radius: 16px; min-height: 120px; padding: 14px 12px; display: flex; flex-direction: column; justify-content: space-between; text-decoration: none; }
.apps .sn { color: #fff; justify-content: flex-end; }
.apps .sn::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, rgba(14,18,30,.85)); }
.apps .sn span { position: relative; z-index: 1; }
.apps .fxr { background: #FFFFFF; color: #0B1B3A; }
.apps .ffl { background: #FF7A00; color: #fff; }
.apps b { font: 700 20px "Chakra Petch", sans-serif; }
.apps small { font-size: 11px; letter-spacing: 2px; font-weight: 800; }
.bday { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.bday div { border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 4px; border: 2px dashed #444; }
.bday div.done { background: var(--absn-yellow); color: #000; border-color: var(--absn-yellow); }
.bday b { font: 700 17px "Chakra Petch", sans-serif; text-transform: uppercase; }

/* ---------- app headers ---------- */
.apphead { position: relative; overflow: hidden; }
.apphead .inner { position: relative; padding-top: 22px; padding-bottom: 24px; display: flex; flex-direction: column; gap: 8px; }
.apphead h1 { margin: 0; }
.theme-sn .apphead { min-height: 400px; display: flex; align-items: flex-end; }
.theme-sn .apphead::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(17,21,31,0) 55%, #11151F); }
.theme-sn .apphead .inner { z-index: 1; width: 100%; }
.theme-sn .apphead h1 { font: 300 clamp(42px, 6vw, 72px)/1 Outfit, sans-serif; letter-spacing: 1px; }
.theme-sn .kicker { font-size: 12px; letter-spacing: 4px; font-weight: 600; }
.theme-fxr .apphead { background: linear-gradient(180deg, #FFFFFF 0%, #E3F9FB 100%); color: #0B1B3A; border-bottom: 4px solid #01DAE9; }
.theme-fxr .apphead h1 { font: 400 clamp(56px, 9vw, 96px)/.9 Anton, sans-serif; letter-spacing: 1px; }
.theme-fxr .kicker { font-size: 12px; font-weight: 900; letter-spacing: 3px; }
.theme-ffl .apphead { background: #FF7A00; color: #fff; }
.theme-ffl .apphead h1 { font: 400 clamp(46px, 8vw, 84px)/.95 "Lilita One", sans-serif; text-shadow: 0 4px 0 rgba(0,0,0,.18); }
.theme-ffl .kicker { align-self: flex-start; background: #fff; color: #FF7A00; border-radius: 999px; padding: 5px 14px; font-weight: 900; font-size: 12px; letter-spacing: 2px; transform: rotate(-2deg); }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 10px; max-width: 560px; }
.stats div { border-radius: 14px; padding: 12px 10px; background: rgba(255,255,255,.18); }
.theme-ffl .stats div { background: #fff; color: #2A1206; }
.theme-fxr .stats div { background: #01DAE9; color: #062A33; }
.stats small { display: block; font-size: 10px; font-weight: 900; letter-spacing: 1.5px; opacity: .8; }
.stats b { font: 400 26px/1.1 var(--display); }
.theme-sn .stats div { background: rgba(17,21,31,.6); }
.theme-sn .stats b { font-weight: 500; }

/* badges */
.badge { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.badge.none { border-style: dashed; }
.badge .top { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.badge b { font: 400 21px/1.1 var(--display); }
.theme-sn .badge b { font-weight: 600; font-size: 17px; }
.tier-0 { background: transparent; border: 1.5px solid var(--line); color: var(--muted); }
.tier-1 { background: #D9A066; color: #2A1206; }
.tier-2 { background: #C9CED8; color: #1A1A1A; }
.tier-3 { background: #F5C842; color: #2A1206; }
.pips { display: flex; gap: 4px; }
.pips span { width: 22px; height: 6px; border-radius: 3px; background: var(--track); }
.pips span.on1 { background: #D9A066; } .pips span.on2 { background: #C9CED8; } .pips span.on3 { background: #F5C842; }

/* lists */
.list { display: flex; flex-direction: column; }
.list .item { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.list .item:last-child { border-bottom: 0; }
.list .item .r { text-align: right; flex: none; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { padding: 8px 12px; border-radius: 999px; font-size: 13px; font-weight: 800; letter-spacing: 1px; background: var(--track); }
.chip.on { background: var(--accent); color: var(--accent-ink); }

/* Supernatural */
.theme-sn .card { border-radius: 22px; }
.theme-sn .week .dot { background: var(--track); }
.snweek .dot { width: 100%; height: auto; border-radius: 12px; padding: 8px 0; flex-direction: column; gap: 2px; font-size: 15px; font-weight: 600; }
.snweek .dot small { font-size: 10px; letter-spacing: 1px; color: var(--muted); font-weight: 600; }
.snweek .dot.done { background: transparent; border: 1px solid var(--accent); color: var(--fg); }
.wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(165px, 100%), 1fr)); gap: 10px; }
.wall figure { margin: 0; position: relative; border-radius: 16px; overflow: hidden; aspect-ratio: 4 / 3; background: #232A3D; }
.wall img { width: 100%; height: 100%; object-fit: cover; }
.wall figcaption { position: absolute; inset: auto 0 0 0; padding: 18px 10px 8px; background: linear-gradient(180deg, transparent, rgba(17,21,31,.9)); font-size: 13px; font-weight: 500; color: #fff; }
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; background: var(--card); border-radius: 999px; padding: 5px; }
.seg button { min-height: 44px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font-weight: 700; cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
.drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 160px; border: 2px dashed var(--line); border-radius: 16px; padding: 16px; text-align: center; cursor: pointer; color: var(--muted); }
.drop img { max-height: 260px; border-radius: 10px; }
.math { background: var(--bg); border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.math div { display: flex; justify-content: space-between; }
.math .total { font-size: 18px; color: var(--accent); border-top: 1px solid var(--line); padding-top: 8px; }
.step { display: flex; gap: 10px; align-items: center; }
.step span { width: 26px; height: 26px; border-radius: 50%; background: var(--lav, var(--accent)); color: #11151F; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px; flex: none; }
.success { border-radius: 24px; padding: 24px; text-align: center; background: linear-gradient(160deg, #2B3556, #6A4A63 60%, #C96A3A); color: #fff; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.fields2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.search-results { display: flex; flex-direction: column; gap: 6px; }
.search-results button { text-align: left; min-height: 44px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); color: var(--fg); padding: 0 12px; cursor: pointer; }
.toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 50; width: min(480px, calc(100% - 32px)); background: #FAFB7B; color: #000; border-radius: 14px; padding: 12px 16px; font-weight: 800; box-shadow: 0 8px 30px rgba(0,0,0,.4); }
@media (prefers-reduced-motion: no-preference) { .btn, .tabs a { transition: transform .1s; } .btn:active { transform: translateY(1px); } }

/* app logos */
.app-logo { height: clamp(56px, 9vw, 92px); width: auto; max-width: 100%; }
.theme-sn .app-logo { height: clamp(44px, 7vw, 72px); }
.tile-logo { height: 22px; width: auto; max-width: 100%; position: relative; z-index: 1; }
.apps .fxr .tile-logo { height: 26px; }
.theme-fxr .chip.on { background: #01DAE9; color: #062A33; }
.theme-fxr .bar > i { background: #01DAE9; }
.apphead + .wrap { padding-top: 22px; }

/* Supernatural: a dusk-over-the-peaks scene in the app's own colors (no workout screenshot) */
.sn-scene { position: absolute; inset: 0; overflow: hidden; background: linear-gradient(180deg, #2A3A6A 0%, #5A4A7A 20%, #B5607A 36%, #F08A4A 48%, #FFC56A 55%, #2A2540 56%); }
.sn-scene i { position: absolute; display: block; }
.sn-scene .sun { left: 64%; top: 50%; width: 220px; height: 220px; margin: -110px 0 0 -110px; border-radius: 50%; background: radial-gradient(circle, rgba(255,214,140,.95) 0 18%, rgba(255,170,90,.45) 40%, rgba(255,140,60,0) 70%); }
.sn-scene .m1 { left: 0; right: 0; bottom: 44%; height: 34%; background: #3A2F55; clip-path: polygon(0 70%, 8% 52%, 15% 60%, 26% 30%, 33% 44%, 41% 12%, 46% 26%, 52% 0, 57% 22%, 63% 8%, 70% 34%, 80% 24%, 90% 46%, 100% 36%, 100% 100%, 0 100%); }
.sn-scene .m2 { left: 0; right: 0; bottom: 44%; height: 20%; background: #262243; clip-path: polygon(0 45%, 14% 70%, 28% 38%, 44% 66%, 58% 30%, 72% 58%, 86% 34%, 100% 55%, 100% 100%, 0 100%); }
.sn-scene .m3 { left: 0; right: 0; bottom: 44%; height: 9%; background: #191A30; clip-path: polygon(0 40%, 20% 70%, 38% 30%, 60% 62%, 78% 28%, 100% 58%, 100% 100%, 0 100%); }
.sn-scene .lake { left: 0; right: 0; bottom: 0; height: 44%; background: linear-gradient(180deg, #E58A48 0%, #6A4A63 30%, #23263F 70%, #11151F 100%); opacity: .9; }
.theme-sn .apphead .sn-scene .lake { background: linear-gradient(180deg, #F0A060 0%, #9A5A6A 18%, #3A3358 45%, #11151F 100%); }
.apps .sn .sn-scene { z-index: 0; }
.apps .sn .sn-scene .sun { width: 90px; height: 90px; margin: -45px 0 0 -45px; }

/* FitXR: fast italic speed stripes, like the FIT wordmark, in white / light blue / neon cyan */
.theme-fxr .apphead { overflow: hidden; }
.fxr-scene { position: absolute; inset: 0; overflow: hidden; background: linear-gradient(115deg, #FFFFFF 0%, #F2FCFD 45%, #C9F3F7 100%); }
.fxr-scene i { position: absolute; top: -20%; bottom: -20%; transform: skewX(-24deg); display: block; }
.fxr-scene .s1 { right: 4%; width: 120px; background: #01DAE9; }
.fxr-scene .s2 { right: calc(4% + 150px); width: 46px; background: #7FEBF3; }
.fxr-scene .s3 { right: calc(4% + 222px); width: 18px; background: #BFF4F8; }
.fxr-scene .s4 { right: calc(4% - 70px); width: 40px; background: #00A9C4; }
@media (max-width: 600px) { .fxr-scene .s1 { width: 70px; right: -6%; } .fxr-scene .s2 { right: calc(-6% + 90px); width: 26px; } .fxr-scene .s3 { right: calc(-6% + 132px); width: 10px; } .fxr-scene .s4 { display: none; } }
.theme-fxr .apphead .inner { position: relative; z-index: 1; }
/* FunFitLand: orange with soft playful blobs, like the logo's rounded shapes */
.theme-ffl .apphead { overflow: hidden; }
.ffl-scene { position: absolute; inset: 0; overflow: hidden; background: radial-gradient(circle at 15% 0%, #FFA040 0, transparent 45%), linear-gradient(160deg, #FF9A2E 0%, #FF7D00 55%, #F06A00 100%); }
.ffl-scene i { position: absolute; display: block; border-radius: 50%; }
.ffl-scene .b1 { right: -40px; top: -50px; width: 220px; height: 220px; background: rgba(255,255,255,.18); }
.ffl-scene .b2 { right: 120px; bottom: -70px; width: 160px; height: 160px; background: rgba(255,255,255,.14); }
.ffl-scene .b3 { right: 40px; top: 46%; width: 54px; height: 54px; background: radial-gradient(circle at 35% 30%, #FFFFFF, #FFE2C2 70%); box-shadow: 0 8px 18px rgba(160,60,0,.3); }
.ffl-scene .b4 { right: 30%; top: 14%; width: 26px; height: 26px; background: radial-gradient(circle at 35% 30%, #FFFFFF, #FFD3A8 70%); box-shadow: 0 5px 12px rgba(160,60,0,.25); }
.ffl-scene .b5 { left: -60px; bottom: -80px; width: 200px; height: 200px; border-radius: 42% 58% 60% 40% / 45% 40% 60% 55%; background: rgba(255,196,120,.35); }
.theme-ffl .apphead .inner { position: relative; z-index: 1; }

/* ---------- stamps (compact) ---------- */
.stamps-card { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px; }
.stamps-card .h2 { margin: 0; font-size: 19px; }
.stamp { display: block; overflow: visible; }
.stamp.off { opacity: .5; }
.stamp-row { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 8px; max-width: 520px; }
.stamp-btn { all: unset; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 4px; border-radius: 14px; }
.stamp-btn .stamp { width: 100%; max-width: 84px; height: auto; }
.stamp-btn[aria-pressed="true"] { background: color-mix(in srgb, var(--accent) 16%, transparent); }
.stamp-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mini-bar { display: block; width: 70%; height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; }
.mini-bar i { display: block; height: 100%; background: var(--accent); }
.stamp-detail { margin: 0; font-size: 14px; line-height: 1.4; min-height: 2.8em; }
.stamp-next { font-weight: 800; }
.cstrip { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: 4px; scrollbar-width: thin; }
.chip { flex: none; scroll-snap-align: start; display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 999px; background: var(--bg); border: 1px solid var(--line); }
.chip .stamp { flex: none; }
.chip-text { letter-spacing: normal; display: flex; flex-direction: column; font-size: 12px; line-height: 1.25; white-space: nowrap; }
.chip-text b { font-size: 13px; }
.tdot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 5px; vertical-align: 1px; }

/* ---------- "new stamp" pop-up ---------- */
.celebrate { position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,.78); display: flex; align-items: center; justify-content: center; padding: 20px max(16px, env(safe-area-inset-right, 0px)) 20px max(16px, env(safe-area-inset-left, 0px)); overflow: hidden; }
.cele-card { position: relative; z-index: 1; width: min(400px, 100%); background: #111; border: 2px solid #FAFB7B; border-radius: 28px; padding: 26px 22px 22px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; color: #F5F5EF; box-shadow: 0 0 60px rgba(250,251,123,.25); }
.cele-kicker { font: 700 12px Syncopate, sans-serif; letter-spacing: 2px; color: #FAFB7B; }
.cele-card h2 { margin: 6px 0 0; font: italic 700 30px/1.05 "Chakra Petch", sans-serif; text-transform: uppercase; color: #FAFB7B; }
.cele-tier { margin: 0; font-weight: 800; color: #92FDE9; }
.cele-desc { margin: 0 0 10px; color: #B5B9AE; }
.cele-card .btn { background: #FAFB7B; color: #000; width: 100%; }
.confetti-fall { position: absolute; inset: 0; pointer-events: none; }
.confetti-fall i { position: absolute; top: -20px; width: 9px; height: 14px; border-radius: 2px; opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .confetti-fall i { animation: fall 2.4s ease-in forwards; }
  @keyframes fall { 0% { opacity: 1; transform: translateY(0) rotate(0); } 100% { opacity: 0.9; transform: translateY(105vh) rotate(540deg); } }
  .stamp.pop { animation: stamp-in .7s cubic-bezier(.2, 1.6, .4, 1) both; }
  @keyframes stamp-in { 0% { opacity: 0; transform: scale(2.2) rotate(-25deg); } 60% { opacity: 1; } 100% { opacity: 1; transform: scale(1) rotate(-6deg); } }
}

.duo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
@media (min-width: 900px) { .duo:has(> :nth-child(2)) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.stamps-card { min-height: 0; }

/* Celebration Wall: fixed height, scrolls inside (about 3½ rows show, so the cut-off row hints there's more) */
.cscroll { list-style: none; margin: 0; padding: 0 4px 0 0; max-height: 178px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; display: flex; flex-direction: column; gap: 6px;
  -webkit-mask-image: linear-gradient(to bottom, #000 80%, transparent); mask-image: linear-gradient(to bottom, #000 80%, transparent); }
.cscroll li { display: flex; align-items: center; gap: 10px; padding: 5px 10px 5px 5px; border-radius: 12px; background: var(--bg); border: 1px solid var(--line); flex: none; }
.cscroll li .stamp { flex: none; }
.c-line { flex: 1; min-width: 0; font-size: 13px; line-height: 1.3; }
.c-ago { flex: none; font-size: 12px; }
.cscroll:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.reg-link { color: var(--absn-yellow, #FAFB7B); font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
details > summary { cursor: pointer; font-weight: 700; }