/* Baifu drawer human check (v4): "turn the F upright" or "fit the poster piece", then the drawer opens.
   Palette and artwork from the original brand archive (李雪): F grey #EFEFEF, Buff green #47A847,
   F yellow #FCB330, F orange #F26620, Buff black #232323. */
.l1-slider.bfc,.bf-auth-card .l1-slider.bfc,.account-v2-details .l1-slider.bfc{
  --bfc-grey:#efefef;--bfc-green:#47a847;--bfc-yellow:#fcb330;--bfc-orange:#f26620;--bfc-black:#232323;--rot:-38deg;--pos:0;
  background:var(--bfc-grey);border:2px solid var(--bfc-black);border-radius:14px;padding:14px 14px 12px;
  color:var(--bfc-black);font-weight:500;margin:4px 0 14px}
.bfc-plate{display:inline-flex;align-items:center;gap:8px;background:#fff;border:2px solid var(--bfc-black);border-radius:6px;
  padding:4px 10px;box-shadow:3px 3px 0 var(--bfc-black)}
.bfc-plate strong{font-size:15px;font-weight:900;letter-spacing:.06em}
.bfc-plate em{font-style:normal;font-size:10px;font-weight:800;letter-spacing:.14em}
.bfc-rivet{width:6px;height:6px;border-radius:50%;background:var(--bfc-black)}
.bfc-copy{margin:10px 0 8px;font-size:13px;line-height:1.6}
.bfc-copy>span{display:none}
.bfc[data-mode="f"] .bfc-copy-f,.bfc[data-mode="badge"] .bfc-copy-badge,
.bfc[data-mode="fu"] .bfc-copy-fu,.bfc[data-mode="puzzle"] .bfc-copy-puzzle{display:inline}
.bfc-chip{display:inline-grid;place-items:center;width:1.55em;height:1.55em;border-radius:50%;background:var(--bfc-yellow);
  vertical-align:-.3em}
.bfc-chip img{width:100%;height:100%;display:block}

/* cabinet */
.bfc-cabinet{position:relative;margin:10px 0 12px;padding:6px 8px;background:#fff;border:2.5px solid var(--bfc-black);
  border-radius:12px;box-shadow:4px 4px 0 var(--bfc-black);transition:margin .5s}
.bfc-row{position:relative;display:flex;align-items:center;justify-content:space-between;height:34px;margin:6px 0;padding:0 12px;
  background:var(--bfc-grey);border:2.5px solid var(--bfc-black);border-radius:6px;box-sizing:border-box}
.bfc-word{font-size:12px;font-weight:900;letter-spacing:.16em}
.bfc-row i{font-style:normal;font-size:10px;font-weight:800;color:#8a8a8a;letter-spacing:.1em}
.bfc-pin{width:12px;height:12px;border:2.5px solid var(--bfc-black);border-radius:3px;background:#fff}
.bfc-main{height:62px;padding:0;background:transparent;border:0;z-index:2}
.bfc[data-mode="puzzle"] .bfc-side{display:none}
.bfc[data-mode="puzzle"] .bfc-main{height:auto;aspect-ratio:16/9}
.bfc-front{position:absolute;inset:0;z-index:2;overflow:hidden;background:var(--bfc-grey);border:2.5px solid var(--bfc-black);
  border-radius:6px;transform-origin:50% 100%;
  transition:transform .6s cubic-bezier(.2,.9,.25,1.25),background-color .3s,box-shadow .6s,border-color .3s}
.bfc[data-mode="f"] .bfc-front,.bfc[data-mode="fu"] .bfc-front,.bfc[data-mode="badge"] .bfc-front{overflow:visible}
.bfc[data-mode="f"] .bfc-main,.bfc[data-mode="fu"] .bfc-main{height:86px}
.bfc[data-mode="badge"] .bfc-main{height:58px}
.bfc-front-f{display:flex;align-items:center;justify-content:center;gap:8px;height:100%;padding:0 10px;box-sizing:border-box}
.bfc[data-mode="badge"] .bfc-front-f{justify-content:space-between;padding:0 8px 0 12px}
.bfc-front-word{display:none;font-size:12px;font-weight:900;letter-spacing:.16em}
.bfc[data-mode="badge"] .bfc-front-word{display:block}
.bfc[data-mode="badge"] .bfc-lockup{display:none}
.bfc-handle{display:none!important}
.bfc[data-mode="badge"] .bfc-handle{display:grid!important}
.bfc-front-puzzle{display:none;position:absolute;inset:0;background:var(--bfc-poster) center/100% 100% no-repeat}
.bfc[data-mode="puzzle"] .bfc-front-f{display:none}
.bfc[data-mode="puzzle"] .bfc-front-puzzle{display:block}
.bfc-lockup{position:relative;display:block;height:64px;aspect-ratio:1303/304;max-width:100%}
.bfc-lockup-base{width:100%;height:100%;display:block}
/* 福 and the round F are cut from the same artwork and placed back over their gaps
   (positions printed by tools/build_captcha_assets.py) */
.bfc-fu,.bfc-lf{position:absolute;transform-origin:50% 50%;transition:transform .12s linear;will-change:transform}
.bfc-fu{left:17.268%;top:2.632%;width:16.424%;height:45.724%}
.bfc-lf{left:77.897%;top:3.618%;width:21.335%;height:91.447%}
.bfc[data-mode="fu"] .bfc-fu,.bfc[data-mode="f"] .bfc-lf{transform:rotate(var(--rot))}

/* round F handle: the original badge artwork on a yellow disc */
.bfc-handle{position:relative;flex:0 0 auto;width:48px;height:48px;border-radius:50%;background:var(--bfc-yellow);
  display:grid;place-items:center;transition:box-shadow .25s}
.bfc-f{width:48px;height:48px;display:block;transform-origin:50% 50%;
  transition:transform .12s linear;will-change:transform}
.bfc[data-mode="badge"] .bfc-f{transform:rotate(var(--rot))}
.bfc.is-dragging .bfc-f,.bfc.is-dragging .bfc-fu,.bfc.is-dragging .bfc-lf,.bfc.is-dragging .bfc-thumb-f,.bfc.is-dragging .bfc-piece{transition:none}

/* poster puzzle */
.bfc-hole,.bfc-piece{position:absolute;width:var(--bfc-piece,46px);height:var(--bfc-piece,46px);border-radius:8px;box-sizing:border-box}
.bfc-hole{background:rgba(20,20,20,.55);border:2px dashed var(--bfc-yellow);box-shadow:inset 0 0 0 2px rgba(0,0,0,.35)}
.bfc-piece{z-index:2;border:2px solid #fff;box-shadow:0 0 0 2px var(--bfc-black),4px 6px 10px rgba(0,0,0,.45);
  background-image:var(--bfc-poster);background-repeat:no-repeat;transition:left .12s linear,transform .2s}
.bfc.is-dragging .bfc-piece{transform:scale(1.06)}
.bfc.is-open .bfc-hole{opacity:0;transition:opacity .2s}
.bfc.is-open .bfc-piece{box-shadow:0 0 0 2px var(--bfc-green);border-color:var(--bfc-green);transition:left .25s ease-out}

/* inside the drawer */
.bfc-inside{position:absolute;left:8px;right:8px;top:2px;height:50px;z-index:1;display:flex;align-items:flex-start;justify-content:center;
  gap:12px;padding-top:5px;box-sizing:border-box;overflow:hidden;border:2.5px solid var(--bfc-black);border-radius:6px;
  background:repeating-linear-gradient(90deg,#2f2f2f 0 14px,#2a2a2a 14px 28px);opacity:0;transition:opacity .25s}
.bfc-paper{padding:3px 8px;background:#fff;border:2px solid var(--bfc-black);border-radius:3px;font-size:10px;font-weight:900;
  letter-spacing:.14em;transform:translateY(40px) rotate(-6deg);transition:transform .5s cubic-bezier(.2,.9,.3,1.4) .25s}
.bfc-paper-b{background:var(--bfc-yellow);transform:translateY(40px) rotate(7deg);transition-delay:.38s}
.bfc-smile svg{width:30px;height:30px;display:block}
.bfc-smile,.bfc-hongbao,.bfc-mooncake{transform:translateY(40px) scale(.4);transition:transform .55s cubic-bezier(.2,.9,.3,1.6) .3s}
.bfc-smile circle{fill:var(--bfc-yellow);stroke:var(--bfc-black);stroke-width:2.5}
.bfc-smile .bfc-eye{fill:var(--bfc-black);stroke:none}
.bfc-smile path{fill:none;stroke:var(--bfc-black);stroke-width:2.5;stroke-linecap:round}
.bfc-burst{position:absolute;left:50%;top:50%;width:0;height:0;z-index:5;pointer-events:none}
.bfc-burst span{position:absolute;width:9px;height:9px;border:2px solid var(--bfc-black);border-radius:2px;
  animation:bfc-pop .9s cubic-bezier(.15,.8,.3,1) forwards}
@keyframes bfc-pop{0%{transform:translate(0,0) rotate(0) scale(.4);opacity:1}
  100%{transform:translate(var(--dx),var(--dy)) rotate(var(--dr)) scale(1);opacity:0}}

/* opened: the drawer comes towards the viewer */
.bfc.is-open .bfc-front{transform:translateY(38px) scale(1.06);box-shadow:0 16px 18px -10px rgba(0,0,0,.45),4px 4px 0 var(--bfc-black)}
.bfc[data-mode="f"].is-open .bfc-front,.bfc[data-mode="fu"].is-open .bfc-front,.bfc[data-mode="badge"].is-open .bfc-front{background:var(--bfc-green);color:#fff}
.bfc[data-mode="f"].is-open .bfc-lockup img,.bfc[data-mode="fu"].is-open .bfc-lockup img{filter:brightness(0) invert(1)}
.bfc[data-mode="puzzle"].is-open .bfc-front{border-color:var(--bfc-green);box-shadow:0 0 0 3px var(--bfc-green),0 16px 18px -10px rgba(0,0,0,.45)}
.bfc.is-open .bfc-handle{box-shadow:0 0 0 4px #fff,0 0 0 6.5px var(--bfc-black)}
.bfc.is-open .bfc-f,.bfc.is-open .bfc-fu,.bfc.is-open .bfc-lf{transform:rotate(0deg);transition:transform .45s cubic-bezier(.2,.9,.3,1.8)}
.bfc.is-open .bfc-inside{opacity:1}
.bfc.is-open .bfc-paper{transform:translateY(0) rotate(-6deg)}
.bfc.is-open .bfc-paper-b{transform:translateY(0) rotate(7deg)}
.bfc.is-open .bfc-smile,.bfc.is-open .bfc-hongbao,.bfc.is-open .bfc-mooncake{transform:translateY(0) scale(1)}
.bfc.is-open .bfc-cabinet{margin-bottom:46px}
.bfc.is-open .bfc-status{color:#237a23}

/* start button */
.bfc-start{appearance:none;border:2px solid var(--bfc-black);background:var(--bfc-black);color:#fff;border-radius:999px;
  padding:8px 18px;font:inherit;font-weight:800;letter-spacing:.08em;cursor:pointer;box-shadow:3px 3px 0 var(--bfc-yellow)}
.bfc-start:hover{background:#000}.bfc-start:disabled{opacity:.55;cursor:wait}
.bfc-start:focus-visible,.bfc-thumb:focus-visible{outline:3px solid var(--bfc-orange);outline-offset:3px}

/* knob rail */
.bfc-rail{margin:12px 0 4px}
.bfc-rail[hidden]{display:none}
.bfc-target{display:none!important}
.bfc-range{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.bfc-groove{position:relative;height:46px;border:2.5px solid var(--bfc-black);border-radius:999px;cursor:pointer;
  touch-action:none;user-select:none;-webkit-user-select:none;
  background:linear-gradient(var(--bfc-black),var(--bfc-black)) 22px 50%/calc(100% - 44px) 2px no-repeat,
    repeating-linear-gradient(90deg,var(--bfc-black) 0 2px,transparent 2px 22px) 22px 50%/calc(100% - 44px) 12px no-repeat,#fff}
/* the knob is Li Xue's yellow round F badge; it turns together with the F / 福 on the drawer */
.bfc-thumb{position:absolute;top:50%;left:calc(21px + (100% - 42px) * var(--pos) / 100);width:42px;height:42px;
  transform:translate(-50%,-50%);border-radius:50%;background:var(--bfc-yellow);display:grid;place-items:center;cursor:grab;
  box-shadow:0 0 0 2.5px var(--bfc-black),3px 3px 0 2.5px var(--bfc-black)}
.bfc-thumb-f{width:42px;height:42px;display:block;border-radius:50%;pointer-events:none;user-select:none;-webkit-user-drag:none;
  transform:rotate(var(--knob,var(--rot)));transition:transform .12s linear}
.bfc.is-dragging .bfc-thumb{cursor:grabbing}
.bfc.is-checking .bfc-thumb{cursor:progress;box-shadow:0 0 0 3px var(--bfc-orange),3px 3px 0 3px var(--bfc-black)}
.bfc-status{min-height:1.3em;margin:6px 0 0;font-size:13px;font-weight:700}
.bfc-sound-replay{margin-top:7px;padding:6px 11px;border:1px solid #b6c9b2;border-radius:999px;background:#f7f3e8;color:#335744;font:inherit;font-size:12px;font-weight:700;cursor:pointer}.bfc-sound-replay:hover,.bfc-sound-replay:focus-visible{background:#e9f0df;outline:2px solid #c99f42;outline-offset:2px}

/* missed */
.bfc.is-miss .bfc-cabinet{animation:bfc-rattle .42s}
.bfc[data-mode="badge"].is-miss .bfc-f,.bfc[data-mode="fu"].is-miss .bfc-fu,.bfc[data-mode="f"].is-miss .bfc-lf{animation:bfc-wobble .6s}
.bfc.is-miss .bfc-status,.bfc.is-dead .bfc-status{color:var(--bfc-orange)}
@keyframes bfc-rattle{20%,60%{transform:translateX(-5px)}40%,80%{transform:translateX(5px)}}
@keyframes bfc-wobble{0%{transform:rotate(calc(var(--rot) - 25deg))}40%{transform:rotate(calc(var(--rot) + 14deg))}
  70%{transform:rotate(calc(var(--rot) - 6deg))}100%{transform:rotate(var(--rot))}}

/* season badge and festive inside items */
.bfc-season{display:none;margin-left:8px;padding:3px 9px;border:2px solid var(--bfc-black);border-radius:999px;font-size:12px;
  font-weight:900;letter-spacing:.08em;vertical-align:middle;box-shadow:2px 2px 0 var(--bfc-black)}
.bfc[data-theme] .bfc-season{display:inline-block}
.bfc[data-theme="spring"] .bfc-season{background:#d7261e;color:#ffe39a}
.bfc[data-theme="midautumn"] .bfc-season{background:var(--bfc-yellow);color:var(--bfc-black)}
.bfc-hongbao,.bfc-mooncake{display:none}
.bfc-hongbao svg{width:24px;height:30px;display:block}
.bfc-mooncake svg{width:30px;height:30px;display:block}
.bfc-hongbao rect{fill:#d7261e;stroke:var(--bfc-black);stroke-width:2.5}
.bfc-hongbao path{fill:none;stroke:#ffd15c;stroke-width:2}
.bfc-hongbao circle{fill:#ffd15c;stroke:var(--bfc-black);stroke-width:1.5}
.bfc-hongbao text{fill:#ffd15c;font-size:11px;font-weight:900}
.bfc-mooncake circle{fill:#e0a43a;stroke:var(--bfc-black);stroke-width:2.5}
.bfc-mooncake .bfc-mc-in{fill:#f6cf7a;stroke:#a96a14;stroke-width:1.5}
.bfc-mooncake path{stroke:#a96a14;stroke-width:2;stroke-linecap:round}
.bfc[data-theme="spring"] .bfc-smile,.bfc[data-theme="midautumn"] .bfc-smile{display:none}
.bfc[data-theme="spring"] .bfc-hongbao,.bfc[data-theme="midautumn"] .bfc-mooncake{display:block}
.bfc[data-theme="spring"] .bfc-paper{background:#d7261e;color:#ffe39a}
.bfc[data-theme="spring"] .bfc-paper-b{background:#ffd15c;color:#b71c15}
.bfc[data-theme="midautumn"] .bfc-paper{background:#26346b;color:#ffe39a}
.bfc[data-theme="midautumn"] .bfc-paper-b{background:var(--bfc-yellow);color:var(--bfc-black)}

/* beginner hint after three misses: an upright badge beside the handle (F game only) */
.bfc-ghost{display:none;position:absolute;right:calc(100% + 12px);top:50%;transform:translateY(-50%);width:40px;height:40px;
  border:2px dashed var(--bfc-black);border-radius:50%;place-items:center;background:rgba(252,179,48,.35)}
.bfc-ghost img{width:34px;height:34px;opacity:.6;display:block}
.bfc-ghost small{position:absolute;top:100%;left:50%;transform:translate(-50%,1px);white-space:nowrap;font-size:9px;font-weight:800;
  color:var(--bfc-black);background:var(--bfc-grey);padding:0 3px;border-radius:3px}
.bfc[data-mode="badge"].needs-hint .bfc-ghost{display:grid}
.bfc.is-open .bfc-ghost{display:none}

@media (prefers-reduced-motion:reduce){
  .bfc-front,.bfc-f,.bfc-fu,.bfc-lf,.bfc-paper,.bfc-smile,.bfc-hongbao,.bfc-mooncake,.bfc-thumb-f,.bfc-cabinet,.bfc-piece{transition:none!important}
  .bfc.is-miss .bfc-cabinet,.bfc.is-miss .bfc-f,.bfc.is-miss .bfc-fu,.bfc.is-miss .bfc-lf,.bfc-burst span{animation:none!important}
  .bfc-burst{display:none}}
@media (max-width:420px){.bfc-plate em{display:none}.bfc-row{height:30px}.bfc[data-mode="badge"] .bfc-main{height:54px}
  .bfc[data-mode="f"] .bfc-main,.bfc[data-mode="fu"] .bfc-main{height:72px}.bfc-lockup{height:56px}
  .bfc-handle,.bfc-f{width:42px;height:42px}}

/* scratch-card games: an archive picture under a silver foil */
.bfc[data-mode="scratch"] .bfc-copy-scratch{display:inline}
.bfc-front-scratch{display:none;position:absolute;inset:0;background:#d9dce0}
.bfc[data-mode="scratch"] .bfc-side{display:none}
.bfc[data-mode="scratch"] .bfc-main{height:auto;aspect-ratio:16/9}
.bfc[data-mode="scratch"] .bfc-front-f,.bfc[data-mode="scratch"] .bfc-front-puzzle{display:none}
.bfc[data-mode="scratch"] .bfc-front-scratch{display:block}
.bfc-scratch-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.bfc-foil{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:crosshair;touch-action:none;
  transition:opacity .45s ease}
.bfc-foil:focus-visible{outline:3px solid var(--bfc-orange);outline-offset:-3px}
.bfc.is-revealed .bfc-foil{opacity:0;pointer-events:none}
.bfc-scratch-meter{position:absolute;right:8px;bottom:8px;z-index:2;padding:2px 8px;border:2px solid var(--bfc-black);
  border-radius:999px;background:var(--bfc-yellow);font-size:11px;font-weight:900;pointer-events:none;opacity:0;transition:opacity .2s}
.bfc[data-mode="scratch"].is-scratching .bfc-scratch-meter{opacity:1}
.bfc[data-mode="scratch"] .bfc-groove{display:none}
.bfc[data-mode="scratch"] .bfc-rail{margin:0}
.bfc[data-mode="scratch"].is-open .bfc-front{border-color:var(--bfc-green);
  box-shadow:0 0 0 3px var(--bfc-green),0 16px 18px -10px rgba(0,0,0,.45)}
.bfc[data-mode="scratch"].is-miss .bfc-front-scratch{animation:bfc-rattle .42s}
@media (prefers-reduced-motion:reduce){.bfc-foil{transition:none}}
.bfc[data-mode="scratch"].is-revealed .bfc-scratch-meter{opacity:0}

/* picture games, opened: the green drawer face stays visible around the picture (mounted, not covering it) */
.bfc-front-puzzle,.bfc-front-scratch{transform-origin:50% 0;transition:transform .5s cubic-bezier(.2,.9,.25,1.1),border-radius .3s}
.bfc[data-mode="puzzle"].is-open .bfc-front,.bfc[data-mode="scratch"].is-open .bfc-front{background:var(--bfc-green)}
.bfc[data-mode="puzzle"].is-open .bfc-front-puzzle,.bfc[data-mode="scratch"].is-open .bfc-front-scratch{
  transform:translateY(7px) scale(.88);border-radius:6px;box-shadow:0 0 0 2px var(--bfc-black)}
.bfc[data-mode="puzzle"] .bfc-front::after,.bfc[data-mode="scratch"] .bfc-front::after{content:"BUFF · 佰福";position:absolute;
  left:50%;bottom:3px;transform:translateX(-50%);padding:1px 12px;border:2px solid var(--bfc-black);border-radius:999px;
  background:var(--bfc-yellow);color:var(--bfc-black);font-size:10px;font-weight:900;letter-spacing:.12em;white-space:nowrap;
  opacity:0;transition:opacity .3s .25s;pointer-events:none}
.bfc[data-mode="puzzle"].is-open .bfc-front::after,.bfc[data-mode="scratch"].is-open .bfc-front::after{opacity:1}
@media (prefers-reduced-motion:reduce){.bfc-front-puzzle,.bfc-front-scratch,.bfc-front::after{transition:none}}
/* F / 福 / badge games, opened: the cabinet grows so the pulled-out drawer no longer covers the LIFE row */
.bfc-main{transition:margin .5s cubic-bezier(.2,.9,.25,1.1)}
.bfc[data-mode="f"].is-open .bfc-main,.bfc[data-mode="fu"].is-open .bfc-main,.bfc[data-mode="badge"].is-open .bfc-main{margin-bottom:52px}
.bfc[data-mode="f"].is-open .bfc-cabinet,.bfc[data-mode="fu"].is-open .bfc-cabinet,.bfc[data-mode="badge"].is-open .bfc-cabinet{margin-bottom:12px}
@media (prefers-reduced-motion:reduce){.bfc-main{transition:none}}

/* Keep the opened drawer in its own vertical space.  On narrow login cards the
   pulled-out front otherwise overlaps the status line and the code field. */
.bfc.is-open .bfc-cabinet{margin-bottom:96px}
@media (max-width:420px){
  .bfc.is-open .bfc-cabinet{margin-bottom:108px}
  .bfc.is-open .bfc-front{transform:translateY(30px) scale(1.02)}
}