/* ============================================================
   BARELY ZIPPED — the Kink Deck.

   A stack of cards you swipe through. Designed to be opened for
   ninety seconds and abandoned: every swipe is already saved, so
   there is no finish button, no progress to lose, and no penalty
   for closing the tab on card six.

   Phones swipe. Desktops get four buttons and the arrow keys,
   because dragging with a mouse is miserable.
   ============================================================ */
/* Self-contained, like bz-kinkmeter.css: deck.html loads this and
   nothing else, and an @import would leave bz-design.css outside the
   build's cache-busting stamp. Values copied from bz-design.css. */
#deck{
  --bg:#0A0A0B; --surface:#141416; --surface-2:#1B1B1E; --surface-3:#232327;
  --hairline:rgba(255,255,255,.07); --hairline-2:rgba(255,255,255,.12);
  --text:#ECECEE; --text-dim:#B0B0B6; --muted:#84848C; --faint:#5A5A61;
  --accent:#E8608F; --accent-hi:#FF8FB4; --accent-dim:#8E3355;
  --accent-wash:rgba(232,96,143,.12); --ok:#6B9E78;
  --display:'Playfair Display',Georgia,serif;
  --ui:'Inter',system-ui,-apple-system,sans-serif;
  --r-sm:8px; --r:12px; --r-lg:16px; --r-xl:22px; --r-pill:999px;
  --shadow-3:0 16px 48px rgba(0,0,0,.5);
  --ease:cubic-bezier(.2,.7,.3,1);
}

html:has(#deck){height:100%;overflow:hidden}
#deck{background:var(--bg);color:var(--text);font-family:var(--ui);margin:0;
  height:100vh;height:100dvh;max-height:100dvh;
  display:flex;flex-direction:column;
  /* No page scroll at all: a vertical swipe is an answer, not a scroll,
     and rubber-banding on iOS would fight the drag. */
  overflow:hidden;overscroll-behavior:none;
  /* A swiped card flies to translate(120%), which would otherwise widen
     the page and give the phone a sideways scroll. */
  overflow-x:hidden}

/* Any rule that sets `display` outranks the `hidden` attribute, and this
   file sets display on .dk-choices, .dk-lv and more. Without this, hiding
   the button row in JS does nothing at all. */
[hidden]{display:none!important}

/* width:100% + padding was pushing .dk-shell 36px wider than a 375px
   phone and giving the page a sideways scroll. */
#deck,#deck *,#deck *::before,#deck *::after{box-sizing:border-box}

/* ---- chrome ---------------------------------------------------- */
.dk-head{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:14px 20px;border-bottom:1px solid var(--hairline);position:sticky;top:0;
  background:rgba(10,10,11,.92);backdrop-filter:blur(10px);z-index:5}
.dk-brand{font-family:var(--display);font-size:19px;color:var(--text);text-decoration:none;
  white-space:nowrap;flex:none}
.dk-brand em{color:var(--accent);font-style:italic}
.dk-close{font:600 13px/1 var(--ui);color:var(--text-dim);text-decoration:none;white-space:nowrap;flex:none;
  border:1px solid var(--hairline-2);border-radius:var(--r-pill);padding:9px 15px;background:none;cursor:pointer}
.dk-close:hover{color:var(--text);border-color:var(--accent-dim)}

/* The count IS the reassurance that walking away was fine. */
.dk-meter{display:flex;align-items:center;justify-content:center;gap:10px;font-size:12px;
  color:var(--muted);letter-spacing:.04em;white-space:nowrap;flex:1 1 auto;min-width:0;overflow:hidden}
.dk-meter b{color:var(--text);font-variant-numeric:tabular-nums}
.dk-bar{width:120px;height:5px;border-radius:999px;background:var(--surface-3);overflow:hidden}
.dk-bar i{display:block;height:100%;width:0;border-radius:999px;
  background:linear-gradient(90deg,var(--accent-dim),var(--accent));transition:width .35s var(--ease)}

/* bz-guard.js wraps the whole page in a plain <div data-members-only>,
   so there is a block box sitting between #deck (the flex column) and
   .dk-shell. That broke the chain: the shell had no height to inherit,
   .dk-stage grew to its content height -- and every card is
   position:absolute, so that height was zero. The cards were being
   rendered into a box 0px tall, which looked exactly like a deck that
   had failed to load. The wrapper has to pass the height through. */
#deck > [data-members-only]{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}

/* ---- the stack ------------------------------------------------- */
.dk-shell{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:14px;padding:14px 18px 18px;width:100%;
  max-width:460px;margin:0 auto;overflow:hidden}
.dk-stage{position:relative;width:100%;flex:1 1 auto;min-height:0;
  margin-bottom:26px;touch-action:none;user-select:none;
  -webkit-user-select:none;-webkit-touch-callout:none}

.dk-card{position:absolute;inset:0;border-radius:var(--r-xl);overflow:hidden;
  background:var(--surface);border:1px solid var(--hairline-2);box-shadow:var(--shadow-3);
  display:flex;flex-direction:column;justify-content:flex-end;
  will-change:transform;transform-origin:50% 120%}
/* Cards behind the top one only hint at depth. */
.dk-card[data-depth="1"]{transform:scale(.955) translateY(9px);opacity:.75}
.dk-card[data-depth="2"]{transform:scale(.91) translateY(17px);opacity:.42}
.dk-card[data-depth="3"]{transform:scale(.87) translateY(24px);opacity:.18}
.dk-card.dk-settle{transition:transform .3s var(--ease),opacity .3s var(--ease)}
.dk-card.dk-gone{transition:transform .42s cubic-bezier(.3,.1,.4,1),opacity .42s linear}

.dk-art{position:absolute;inset:0;z-index:0}
.dk-art svg{width:100%;height:100%;display:block}
/* Text sits over procedural art, so it needs its own floor to be legible. */
.dk-card-body{position:relative;z-index:1;padding:26px 24px 28px;
  background:linear-gradient(to top,rgba(8,8,9,.95) 0%,rgba(8,8,9,.88) 46%,rgba(8,8,9,0) 100%)}
.dk-sect{font:600 10px/1 var(--ui);letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent-hi);margin-bottom:10px;display:block}
.dk-name{font-family:var(--display);font-size:clamp(26px,7vw,34px);line-height:1.1;
  margin:0 0 10px;color:#fff}
.dk-blurb{font-size:14.5px;line-height:1.55;color:var(--text-dim);margin:0}

/* The verdict stamp that follows your thumb. */
.dk-stamp{position:absolute;top:26px;left:50%;transform:translateX(-50%) scale(.9);
  z-index:2;font:700 15px/1 var(--ui);letter-spacing:.14em;text-transform:uppercase;
  padding:10px 18px;border-radius:var(--r-pill);border:2px solid currentColor;
  opacity:0;pointer-events:none;background:rgba(8,8,9,.72)}
.dk-stamp[data-s="like"]{color:#6B9E78}
.dk-stamp[data-s="no"]{color:#B5544E}
.dk-stamp[data-s="favourite"]{color:var(--accent-hi)}
.dk-stamp[data-s="curious"]{color:#C89A5B}

/* ---- the four choices ------------------------------------------ */
.dk-choices{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;width:100%}
.dk-choice{display:flex;flex-direction:column;align-items:center;gap:7px;padding:13px 6px;
  border-radius:var(--r);border:1px solid var(--hairline-2);background:var(--surface-2);
  color:var(--text-dim);cursor:pointer;font:600 11px/1.2 var(--ui);text-align:center;
  letter-spacing:.03em;transition:border-color .15s,color .15s,background .15s,transform .1s}
.dk-choice span{font-size:21px;line-height:1}
.dk-choice:hover{background:var(--surface-3);color:var(--text)}
.dk-choice:active{transform:translateY(1px)}
.dk-choice[data-s="no"]:hover{border-color:#B5544E;color:#D98A84}
.dk-choice[data-s="curious"]:hover{border-color:#C89A5B;color:#E0BA82}
.dk-choice[data-s="like"]:hover{border-color:#6B9E78;color:#8FC49C}
.dk-choice[data-s="favourite"]:hover{border-color:var(--accent);color:var(--accent-hi)}
.dk-choice kbd{font:500 9px/1 var(--ui);color:var(--faint);letter-spacing:.08em}
@media(hover:none){.dk-choice kbd{display:none}}

.dk-note{font-size:12.5px;line-height:1.45;color:var(--muted);text-align:center;margin:0;flex:none}
/* Short phones: the cards matter, the instructions do not. */
@media(max-height:700px){
  .dk-shell{gap:10px;padding:10px 16px 14px}
  .dk-stage{margin-bottom:20px}
  .dk-note{font-size:11.5px}
  .dk-head{padding:9px 16px}
}
@media(max-height:600px){ .dk-note[data-stack-only]{display:none} }
.dk-note a{color:var(--accent)}
.dk-undo{background:none;border:none;color:var(--muted);font:500 12.5px var(--ui);
  text-decoration:underline;cursor:pointer;padding:4px}
.dk-undo:hover{color:var(--text)}
.dk-undo[hidden]{display:none}

/* ---- empty / done --------------------------------------------- */
.dk-done{text-align:center;padding:20px 10px;flex:1 1 auto;min-height:0;
  overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;
  align-items:center;justify-content:center}
.dk-done h2{font-family:var(--display);font-size:28px;margin:0 0 12px}
.dk-done p{color:var(--text-dim);font-size:15px;line-height:1.6;margin:0 0 20px}
.dk-btn{display:inline-block;font:600 13px/1 var(--ui);letter-spacing:.04em;padding:13px 22px;
  border-radius:var(--r-pill);border:1px solid var(--accent-dim);background:var(--accent-wash);
  color:var(--accent-hi);text-decoration:none;cursor:pointer}
.dk-btn:hover{background:rgba(232,96,143,.2)}
.dk-btn.dk-plain{border-color:var(--hairline-2);background:none;color:var(--text-dim)}

/* ---- activity level (pass two) --------------------------------- */
.dk-levels{width:100%;max-width:620px;margin:0 auto;padding:4px 0 20px;
  flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
  overscroll-behavior:contain}
.dk-levels h2{font-family:var(--display);font-size:26px;margin:0 0 8px}
.dk-levels>p{color:var(--text-dim);font-size:14.5px;line-height:1.6;margin:0 0 22px}
.dk-lv{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:14px 4px;border-bottom:1px solid var(--hairline)}
.dk-lv-name{font-size:15px;color:var(--text)}
.dk-lv-name small{display:block;font-size:11.5px;color:var(--muted);margin-top:3px;
  letter-spacing:.04em;text-transform:uppercase}
.dk-lv select{background:var(--surface-2);color:var(--text);border:1px solid var(--hairline-2);
  border-radius:var(--r-sm);padding:9px 11px;font:500 13.5px var(--ui);min-width:160px}
.dk-lv select:focus{outline:2px solid var(--accent-dim);outline-offset:1px}
.dk-saved{color:var(--ok);font-size:12px;opacity:0;transition:opacity .2s}
.dk-saved.on{opacity:1}

@media(max-width:420px){
  .dk-choice{padding:11px 4px;font-size:10px}
  .dk-choice span{font-size:19px}
  .dk-meter .dk-bar{width:70px}
  .dk-lv{flex-direction:column;align-items:flex-start;gap:9px}
  .dk-lv select{width:100%}
}
@media(prefers-reduced-motion:reduce){
  .dk-card,.dk-card.dk-settle,.dk-card.dk-gone,.dk-bar i{transition:none}
}