/* 🦸 The Hero Wall (preview, 2026-10-30): the supporters club the Boss dreamed up. Cartoon bright, phone first */
.club { background: radial-gradient(120% 70% at 50% 0%, #1d3f63 0%, var(--bg) 60%); min-height: 100vh; overflow-x: hidden; }
.cl-preview { margin: 0; padding: 8px 16px; background: #ffd84a; color: #2b1300; font-weight: 800; text-align: center; font-size: 14px; }
.cl { max-width: 980px; margin: 0 auto; padding: 18px 16px 60px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.cl-head { text-align: center; }
.cl-head h1 { margin: 6px 0 4px; font: 900 clamp(34px, 9vw, 64px)/1 "Jost", system-ui, sans-serif; color: #ffe14a;
  -webkit-text-stroke: 3px #3b1260; paint-order: stroke fill; text-shadow: 0 5px 0 #3b1260, 0 0 30px #ffb84a88; }
.cl-head p { margin: 0; color: #cfe6ff; }

/* 🎯 the team goal meter */
.cl-goal { background: #ffffff10; border: 2px solid #ffffff22; border-radius: 18px; padding: 12px 14px; }
.cl-goal-top { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 17px; }
.cl-goal-top b { color: #7ee08a; }
.cl-bar { height: 22px; margin: 8px 0 6px; border-radius: 99px; background: #0006; border: 2px solid #ffffff33; overflow: hidden; }
.cl-bar i { display: block; height: 100%; width: 0; border-radius: 99px; background: linear-gradient(90deg, #ff6fa5, #ffd84a, #7ee08a); transition: width 1.6s cubic-bezier(.2, .8, .2, 1); }
.cl-goal p { margin: 0; color: #cfe6ff; font-size: 14px; }

/* 👑 the BIGGEST SUPPORTER plaque */
.cl-plaque { position: relative; text-align: center; padding: 16px 14px 18px; border-radius: 26px; border: 4px solid #ffd84a;
  background: linear-gradient(180deg, #5a2a00, #2b1300); box-shadow: 0 0 0 5px #0006, 0 0 50px #ffd84a66; }
.cl-plaque-title { margin: 0 0 8px; font: 900 clamp(18px, 5vw, 26px)/1 "Jost", sans-serif; color: #ffe14a; letter-spacing: 1px; }
.cl-plaque-pic { position: relative; width: 120px; height: 120px; margin: 18px auto 8px; border-radius: 50%; display: grid; place-items: center;
  font-size: 66px; background: radial-gradient(circle, #ffe9a8, #ff9a3c); border: 4px solid #fff; box-shadow: 0 0 30px #ffd84a; }
.cl-plaque-pic::before { content: "👑"; position: absolute; top: -34px; font-size: 44px; }
.cl-plaque-pic::after { content: "#1"; position: absolute; right: -10px; bottom: -4px; padding: 4px 9px; border-radius: 99px; background: #ff3d6e;
  color: #fff; font: 900 18px/1 "Jost", sans-serif; border: 3px solid #fff; }
.cl-plaque-name { margin: 4px 0 0; font: 900 clamp(22px, 6vw, 32px)/1.1 "Jost", sans-serif; color: #fff; }
.cl-plaque-crown { margin: 4px 0 8px; color: #ffd84a; font-weight: 800; }

/* 🔒 a supporter's amount: locked until it's revealed (or kept secret, the supporter's choice) */
.cl-amt { position: relative; display: inline-grid; place-items: center; min-width: 96px; height: 40px; padding: 0 12px; border-radius: 12px;
  background: #0007; border: 2px dashed #ffffff55; font: 900 20px/1 "Jost", sans-serif; color: #7ee08a; }
.cl-amt .v { opacity: 0; transform: scale(.3); transition: opacity .3s, transform .45s cubic-bezier(.2, 1.6, .4, 1); }
.cl-amt .lk { position: absolute; inset: 0; display: grid; place-items: center; font-size: 22px; }
.cl-amt .lk small { font: 700 11px/1.1 "Jost", sans-serif; color: #cfe6ff; margin-left: 4px; }
.cl-amt.open { border: 2px solid #7ee08a; box-shadow: 0 0 18px #7ee08a88; }
.cl-amt.open .v { opacity: 1; transform: none; }
.cl-amt.open .lk { animation: cllock .7s ease-in forwards; pointer-events: none; }
@keyframes cllock { 0% { transform: none; } 30% { transform: translate(10px, -14px) rotate(25deg) scale(1.2); } 100% { transform: translate(70px, 140px) rotate(260deg); opacity: 0; } }

/* 🏟 the crowd in the stands: baby animals that jump up in a wave */
.cl-stands { display: flex; justify-content: center; flex-wrap: wrap; gap: 2px; padding: 10px 6px 6px; border-radius: 18px 18px 6px 6px;
  background: repeating-linear-gradient(180deg, #ffffff12 0 26px, #ffffff06 26px 52px); font-size: clamp(22px, 6.4vw, 34px); }
.cl-stands span { display: inline-block; }
.cl-stands.wave span { animation: clwave .7s ease-in-out calc(var(--i) * 70ms) 2; }
@keyframes clwave { 0%, 100% { transform: none; } 40% { transform: translateY(-22px) scale(1.15); } }

.cl-enter { justify-self: center; padding: 14px 26px; border-radius: 99px; border: 3px solid #fff; background: linear-gradient(180deg, #ff6fa5, #c2185b);
  color: #fff; font: 900 20px/1 "Jost", sans-serif; cursor: pointer; box-shadow: 0 6px 0 #6a0f33, 0 0 30px #ff6fa588; }
.cl-enter[hidden] { display: none; }

/* 🦸 the wall of heroes */
.cl-wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.cl-card { position: relative; display: grid; justify-items: center; gap: 6px; padding: 14px 8px 12px; border-radius: 18px; text-align: center;
  background: #ffffff12; border: 2px solid #ffffff2a; opacity: 0; transform: translateY(24px) scale(.8); transition: opacity .4s, transform .5s cubic-bezier(.2, 1.5, .4, 1); }
.cl-card.in { opacity: 1; transform: none; }
.cl-card .pet { font-size: 42px; line-height: 1; }
.cl-card .nm { font: 800 17px/1.15 "Jost", sans-serif; color: #fff; overflow-wrap: anywhere; }
.cl-card .tag { font-size: 12px; font-weight: 700; color: #ffd84a; }
.cl-card.shadow { background: radial-gradient(circle at 50% 30%, #3b4f8a55, #ffffff08); border-style: dashed; }
.cl-card.shadow .pet { filter: drop-shadow(0 0 10px #b9c8ff); }
.cl-card.shadow .nm { color: #b9c8ff; font-weight: 600; font-size: 14px; }
.cl-card.royal { border-color: #ffd84a; box-shadow: 0 0 22px #ffd84a66; }

/* 🦇 Precious flies in and smashes the lock */
.cl-bat { position: fixed; z-index: 95; width: 92px; height: auto; pointer-events: none; left: 0; top: 0; }

/* ▶ the preview buttons + the scam warning */
.cl-try { display: grid; gap: 8px; padding: 12px; border-radius: 16px; border: 2px dashed #ffd84a88; background: #ffd84a10; }
.cl-try p { margin: 0; color: #ffd84a; }
.cl-try button { padding: 10px 12px; border-radius: 12px; border: 2px solid #ffffff44; background: #ffffff14; color: #fff; font: 700 15px/1.2 "Jost", sans-serif; cursor: pointer; text-align: left; }
.cl-try button[aria-pressed="true"] { background: #7ee08a33; border-color: #7ee08a; }
.cl-scam { margin: 0; padding: 12px 14px; border-radius: 14px; background: #ff3d6e1f; border: 2px solid #ff3d6e88; color: #ffd9e2; font-size: 15px; }

/* 🦸 joining: every choice is the supporter's */
.cl-join { padding: 16px 14px; border-radius: 22px; background: linear-gradient(180deg, #2a1550, #16112e); border: 3px solid #b38cff; box-shadow: 0 0 40px #b38cff44; }
.cl-join h2 { margin: 0 0 6px; font: 900 clamp(22px, 6vw, 32px)/1.1 "Jost", sans-serif; color: #ffe14a; }
.cl-join > p { margin: 0 0 10px; color: #e6dcff; }
.cl-form { display: grid; gap: 12px; }
.cl-form fieldset { margin: 0; padding: 10px 12px 12px; border: 2px solid #ffffff22; border-radius: 16px; display: grid; gap: 6px; min-width: 0; }
.cl-form legend { padding: 0 6px; font-weight: 800; color: #fff; }
.cl-pets { grid-template-columns: repeat(5, 1fr); }
.cl-pets legend { grid-column: 1 / -1; }
.cl-pets label { position: relative; }
.cl-pets input { position: absolute; opacity: 0; }
.cl-pets span { display: grid; justify-items: center; gap: 2px; padding: 8px 2px; border-radius: 14px; border: 2px solid #ffffff22; font-size: 30px; cursor: pointer; }
.cl-pets small { font-size: 11px; font-weight: 700; color: #e6dcff; text-align: center; }
.cl-pets input:checked + span { border-color: #ffd84a; background: #ffd84a22; box-shadow: 0 0 14px #ffd84a66; transform: scale(1.06); }
.cl-pets input:focus-visible + span { outline: 3px solid #fff; }
.cl-row { display: flex; align-items: center; gap: 8px; color: #fff; cursor: pointer; }
.cl-row input { width: 20px; height: 20px; accent-color: #ffd84a; flex: none; }
.cl-text { width: 100%; box-sizing: border-box; padding: 11px 12px; border-radius: 12px; border: 2px solid #ffffff44; background: #0006; color: #fff; font: 600 17px/1.2 "Jost", sans-serif; }
.cl-money { font-weight: 800; font-size: 20px; }
.cl-money .cl-text { width: 100%; height: auto; max-width: 180px; }
.cl-msg { margin: 0; min-height: 1.2em; font-size: 14px; color: #7ee08a; }
.cl-msg.bad { color: #ff9cb4; }
.cl-sub { margin: 6px 0 0; color: #ffd84a; font-weight: 700; }
.cl-note { margin: 4px 0 0; color: #b9c8ff; font-size: 14px; }
.cl-go, .cl-matched { justify-self: start; padding: 12px 20px; border-radius: 99px; border: 3px solid #fff; background: linear-gradient(180deg, #7ee08a, #2e9a4a);
  color: #062b10; font: 900 18px/1 "Jost", sans-serif; cursor: pointer; box-shadow: 0 5px 0 #145a26; }
.cl-code { margin-top: 12px; padding: 14px; border-radius: 16px; background: #ffffff10; border: 2px dashed #7ee08a; }
.cl-code > p { margin: 0; color: #cfe6ff; }
.cl-code-v { display: block; margin: 4px 0 8px; font: 900 34px/1 "Jost", sans-serif; letter-spacing: 2px; color: #7ee08a; }
.cl-code ol { margin: 0 0 12px; padding-left: 22px; display: grid; gap: 6px; color: #fff; }
.cl-code i { color: #ffd84a; font-style: normal; font-size: 13px; }
.cl-code[hidden] { display: none; }

/* 💌 "your support arrived": the team's thank-you card */
.cl-thanks { position: fixed; z-index: 93; left: 50%; top: 58%; transform: translate(-50%, -50%); width: min(92vw, 420px); padding: 16px 16px 14px; border-radius: 22px;
  background: #fff; color: #2b1300; text-align: center; border: 4px solid #ffd84a; box-shadow: 0 10px 0 #0005, 0 0 60px #ffd84a88;
  animation: clthanks .6s cubic-bezier(.2, 1.5, .4, 1) both; }
.cl-thanks b { display: block; font: 900 22px/1.15 "Jost", sans-serif; color: #c2185b; }
.cl-thanks p { margin: 6px 0 10px; }
.cl-thanks button { padding: 10px 18px; border-radius: 99px; border: 0; background: #c2185b; color: #fff; font: 800 16px/1 "Jost", sans-serif; cursor: pointer; }
@keyframes clthanks { from { opacity: 0; transform: translate(-50%, -30%) scale(.6); } }

/* 😇 PAW + ANGEL = PANGEL (2026-10-30): the gold paw, the angel, and the Boss's Thankful Baby Tiger
   (his own art: halo, wings and the PANGEL crown are in the picture) */
.pg-tag { margin: 2px 0 0; font: 800 clamp(17px, 4.6vw, 24px)/1.2 "Jost", sans-serif; color: #ffd9f0; letter-spacing: 1px; }
.pg-eq { display: flex; justify-content: center; align-items: center; gap: clamp(4px, 1.6vw, 14px); padding-top: clamp(40px, 9vw, 64px); }
.pg-i { width: clamp(60px, 17vw, 120px); height: auto; filter: drop-shadow(0 4px 10px #0008); }
.pg-op { font: 900 clamp(32px, 9vw, 64px)/1 "Jost", sans-serif; color: #ffe14a; -webkit-text-stroke: 3px #3b1260; paint-order: stroke fill; text-shadow: 0 4px 0 #3b1260; }
.pg-tiger { display: block; width: clamp(110px, 30vw, 200px); aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: #fff;
  border: 4px solid #ffe14a; box-shadow: 0 0 34px #ffd84a, 0 0 70px #ff6fa555; animation: pgfloat 3s ease-in-out infinite; }
.pg-tiger img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pg-word { margin: 6px 0 0; text-align: center; font: 900 clamp(18px, 5vw, 28px)/1.1 "Jost", sans-serif; color: #fff; letter-spacing: 2px; }
.pg-word b { color: #ffe14a; }
.pg-lead { margin: 0; text-align: center; color: #cfe6ff; }
@keyframes pgfloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@media (prefers-reduced-motion: reduce) { .pg-tiger { animation: none; } }

/* 🎨 How the Pangels began: the Boss's story pictures (paint → bath → blow-dry) + the founding-day video */
.pg-story h2 { margin: 0 0 12px; text-align: center; font: 900 clamp(22px, 6vw, 30px)/1.1 "Jost", sans-serif; color: #ffe14a; }
.pg-strip { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.pg-strip li { margin: 0; border-radius: 18px; overflow: hidden; background: #fff; border: 3px solid #b38cff; box-shadow: 0 6px 18px #0006; }
.pg-strip img { display: block; width: 100%; height: auto; }
.pg-strip p { margin: 0; padding: 10px 12px 12px; color: #2a1550; font-size: 16px; line-height: 1.35; }
.pg-strip b { color: #7a2fd0; }
.pg-film { margin: 16px 0 0; border-radius: 20px; overflow: hidden; border: 3px solid #ffe14a; background: #16112e; box-shadow: 0 0 40px #ffd84a33; }
.pg-film video { display: block; width: 100%; height: auto; background: #000; }
.pg-film figcaption { padding: 12px 14px 14px; color: #fff; font-size: 17px; line-height: 1.4; }
.pg-film figcaption b { color: #ffe14a; }
.pg-join { max-width: 560px; margin: 20px auto 8px; }

/* 🚧 the live "under construction" page (club/index.html) until the Hero Wall opens */
.cl-tape { margin: 0; padding: 8px 0; overflow: hidden; white-space: nowrap; text-align: center; font: 900 15px/1 "Jost", sans-serif; letter-spacing: 2px;
  color: #1a1000; background: repeating-linear-gradient(-45deg, #ffd84a 0 22px, #ffb000 22px 44px); border-radius: 10px; box-shadow: 0 4px 0 #0005; }
.cl-soon-crowd { flex-wrap: nowrap; font-size: clamp(18px, 6vw, 34px); }
.cl-soon-crowd span { animation: clwave .7s ease-in-out calc(var(--i) * 90ms) infinite; animation-duration: 2.4s; }
.cl-soon-card { padding: 16px 16px 14px; border-radius: 22px; background: linear-gradient(180deg, #2a1550, #16112e); border: 3px solid #b38cff; box-shadow: 0 0 40px #b38cff44; }
.cl-soon-card h2 { margin: 0 0 10px; font: 900 clamp(22px, 6vw, 30px)/1.1 "Jost", sans-serif; color: #ffe14a; }
.cl-soon-card ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; color: #fff; font-size: 17px; }
.cl-soon-why { margin: 14px 0 0; color: #e6dcff; }
.cl-soon-go { margin: 0; text-align: center; }

@media (prefers-reduced-motion: reduce) {
  .cl-soon-crowd span { animation: none; }
  .cl-card { transition: none; } .cl-stands.wave span, .cl-amt.open .lk, .cl-thanks { animation: none; } .cl-amt.open .lk { opacity: 0; }
}