/* blackjack.css — the popup hand, in the site's own palette.
   R2 2026-08-29. Cards are drawn in CSS (no images): paper face, ink type, the warm
   --accent for the LakeFly mark on the back. Every animation is wrapped so that a
   visitor asking for reduced motion gets the same game with none of the movement. */

.bj[hidden]{display:none}
.bj{position:fixed;inset:0;z-index:9000;display:flex;align-items:center;justify-content:center;padding:20px}
body.bj-open{overflow:hidden}

.bj__scrim{position:absolute;inset:0;background:rgba(6,6,8,.82);backdrop-filter:blur(3px)}

.bj__panel{
  position:relative;width:100%;max-width:520px;max-height:92vh;overflow-y:auto;
  background:var(--ink-2);border:1px solid var(--line);border-radius:14px;
  padding:30px 28px 26px;box-shadow:0 30px 90px rgba(0,0,0,.7);
  animation:bjrise .32s cubic-bezier(.2,.8,.3,1)
}
@keyframes bjrise{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}

.bj__x{position:absolute;top:12px;right:12px;width:34px;height:34px;border:1px solid var(--line);background:transparent;color:var(--t-mid);border-radius:8px;font-size:14px;cursor:pointer;line-height:1}
.bj__x:hover{color:#fff;border-color:var(--accent)}

.bj__eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.bj__h{font-family:var(--display);font-size:clamp(22px,4.4vw,28px);line-height:1.12;letter-spacing:-.02em;margin-top:10px}
.bj__h--sm{font-size:clamp(19px,3.6vw,23px)}
.bj__sub{font-size:13px;color:var(--t-mid);line-height:1.4;margin-top:6px}
.bj__rules{font-size:14.5px;color:var(--t-mid);line-height:1.55;margin-top:12px}
.bj__offer{font-size:14px;color:var(--t-mid);line-height:1.55;margin-top:14px;padding:12px 14px;border:1px solid var(--line);border-radius:9px;background:rgba(255,255,255,.02)}
.bj__offer b{color:var(--t-hi)}
.bj__fine{font-family:var(--mono);font-size:11px;letter-spacing:.02em;color:var(--t-low);line-height:1.6;margin-top:16px}
.bj__say{font-size:14.5px;color:var(--t-hi);margin-top:16px;min-height:1.4em}
.bj__final{font-family:var(--mono);font-size:12.5px;letter-spacing:.06em;color:var(--t-low);margin-top:10px}
.bj__again{font-size:14.5px;color:var(--t-hi);font-weight:600;margin-top:16px}

/* ---- form ---- */
.bj__form{margin-top:18px;display:flex;flex-direction:column}
.bj__lbl{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--t-low);margin-bottom:7px;margin-top:12px}
.bj__lbl:first-child{margin-top:0}
.bj__form input{
  width:100%;background:var(--ink-3);border:1px solid var(--line);border-radius:8px;
  padding:13px 14px;color:#fff;font-size:16px;font-family:var(--body)
}
.bj__form input:focus{outline:none;border-color:var(--accent)}
.bj__err{display:none;color:#f0937f;font-size:13.5px;margin-top:10px;line-height:1.5}
.bj__deal,.bj__form button[type=submit]{margin-top:18px;width:100%;justify-content:center}

.bj__acts{display:flex;gap:10px;margin-top:18px}
.bj__act{flex:1 1 0;justify-content:center}
.bj__act--ghost{background:transparent;border:1px solid var(--line);color:var(--t-hi)}
.bj__act--ghost:hover{border-color:var(--accent);color:#fff}

/* ---- the table ---- */
.bj__table{margin-top:20px;display:flex;flex-direction:column;gap:18px}
.bj__side{display:flex;flex-direction:column;gap:9px}
.bj__who{font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--t-low);display:flex;align-items:baseline;gap:9px}
.bj__score{color:var(--accent);font-size:15px;font-weight:700;letter-spacing:.02em}
.bj__cards{display:flex;gap:8px;flex-wrap:wrap;min-height:96px}

/* ---- a card ---- */
.bjcard{
  position:relative;width:66px;height:96px;flex:0 0 auto;
  background:var(--paper);color:#14141a;border-radius:7px;
  border:1px solid rgba(11,11,12,.2);box-shadow:0 6px 16px rgba(0,0,0,.45);
  font-family:var(--display);font-weight:700;
  animation:bjdeal .34s cubic-bezier(.2,.8,.3,1) backwards;
  animation-delay:calc(var(--i,0) * .09s)
}
@keyframes bjdeal{from{opacity:0;transform:translateY(-14px) rotate(-6deg) scale(.9)}to{opacity:1;transform:none}}

.bjcard--red{color:#b2352b}
.bjcard__c{position:absolute;font-size:13px;line-height:1;display:flex;flex-direction:column;align-items:center;gap:1px}
.bjcard__c i{font-style:normal;font-size:11px}
.bjcard__c--tl{top:7px;left:7px}
.bjcard__c--br{bottom:7px;right:7px;transform:rotate(180deg)}
.bjcard__pip{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:30px;opacity:.9}

.bjcard--back{
  background:
    repeating-linear-gradient(45deg, rgba(231,178,76,.16) 0 6px, transparent 6px 12px),
    var(--ink-3);
  border-color:rgba(231,178,76,.35)
}
.bjcard--back::after{
  content:"";position:absolute;inset:9px;border:1px solid rgba(231,178,76,.4);border-radius:4px
}

@media(max-width:420px){
  .bj__panel{padding:26px 20px 22px}
  .bjcard{width:58px;height:84px}
  .bjcard__pip{font-size:26px}
}

/* A visitor who asked for less motion gets the identical game, held still. */
@media (prefers-reduced-motion: reduce){
  .bj__panel,.bjcard{animation:none}
  .bj__panel{transition:none}
}