/* ==========================================================================
   WIZKET — hook-lab.css · "Hook lab" (Marketing page, #lab)
   Build an ad from three cards, post it to a river of 100 simulated thumbs, then test
   9 versions at once. js/hook-lab.js sets data-state on .hk
   (build · posting · posted · testing · done). The phone + post keep app palettes.
   Prefix: hk-
   ========================================================================== */
.hk {
  --side: clamp(20px, 6vw, 110px);
  --pw: 270px;     /* phone */
  --rw: 104px;     /* thumb river */
  --gap: clamp(18px, 2.4vw, 32px);
  --pad: clamp(16px, 2vw, 26px);
  position: relative;
  padding: clamp(90px, 14vh, 150px) var(--side) clamp(70px, 11vh, 120px);
  background: var(--bg);
}
.hk__head { width: min(1180px, 100%); margin: 0 auto clamp(22px, 4vh, 34px); display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 32px; }
.hk__title { margin: 0; font: 400 clamp(2.6rem, min(6vw, 11vh), 6.4rem)/0.9 var(--font-display); text-transform: uppercase; color: var(--text); }
.hk__title em { font-style: normal; }
.hk__sub { margin: 0 0 6px; max-width: 34ch; font: 500 clamp(0.95rem, 1.1vw, 1.08rem)/1.45 var(--font-body); color: var(--muted); }
.hk__game { width: min(1180px, 100%); margin: 0 auto; }

.hk__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; padding: 14px 20px; border: 1px solid var(--line2); border-bottom: 0; border-radius: 20px 20px 0 0; background: var(--surface); }
.hk__step { margin-right: auto; font: 600 12px/1 var(--font-body); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.hk__stat { font: 600 12.5px/1 var(--font-body); color: var(--muted); }
.hk__stat b { margin-left: 4px; font: 400 22px/1 var(--font-display); color: var(--text); font-variant-numeric: tabular-nums; }
.hk__stat--cpo b { color: var(--accent); }

.hk__lab {
  position: relative;
  display: grid;
  grid-template-columns: var(--pw) var(--rw) minmax(0, 1fr);
  gap: var(--gap);
  align-items: center;
  height: clamp(500px, 64vh, 580px);
  padding: var(--pad);
  border: 1px solid var(--line2);
  border-radius: 0 0 20px 20px;
  background:
    linear-gradient(var(--line) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(90deg, var(--line) 1px, transparent 1px) 0 0 / 32px 32px,
    var(--petrol);
  user-select: none;
  -webkit-user-select: none;
}

/* bridge B: the CRT that powers off into the phone */
.hk-crt {
  position: absolute;
  z-index: 5;
  left: calc(var(--pad) + var(--pw) / 2 - 170px);
  top: calc(50% - 110px);
  width: 340px;
  height: 220px;
  border-radius: 24px;
  border: 8px solid #1a2024;
  background: radial-gradient(90% 90% at 50% 45%, #2b3a42 0%, #0a0e10 100%);
  box-shadow: 0 0 60px rgba(160, 220, 255, 0.25), inset 0 0 40px rgba(255, 255, 255, 0.08);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
}
.hk-crt i { position: absolute; inset: 0; border-radius: 16px; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.2) 0 1px, transparent 1px 3px); }

/* ---- the phone ---- */
.hk-phone {
  position: relative;
  height: min(100%, 520px);
  padding: 10px;
  border-radius: 34px;
  background: #0d1114;
  box-shadow: 0 40px 80px -36px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.08) inset;
  transition: box-shadow 0.3s, opacity 0.4s;
}
.hk-phone.is-over { box-shadow: 0 0 0 4px var(--accent), 0 0 40px rgba(253, 95, 7, 0.45); }
.hk-post {
  height: 100%;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: 10px;
  padding: 14px;
  border-radius: 25px;
  background: #fff;
  color: #15191c;
  font-family: var(--font-body);
}
.hk-post p { margin: 0; }
.hk-post__who { display: flex; align-items: center; gap: 8px; font: 700 12.5px/1 var(--font-body); }
.hk-post__who i { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #fd5f07; font: 400 14px/1 var(--font-display); font-style: normal; color: #fff; }
.hk-post__who span { margin-left: auto; font: 500 10.5px/1 var(--font-body); color: #8a959b; }

.hk-slot {
  display: grid;
  place-items: center;
  min-height: 48px;
  padding: 10px;
  border-radius: 12px;
  border: 2px dashed #d5dadd;
  text-align: center;
  font: 600 12px/1.3 var(--font-body);
  color: #9aa6ad;
  transition: border-color 0.3s, background-color 0.3s;
}
.hk-slot.is-full { border-style: solid; border-color: transparent; color: #15191c; }
.hk-slot--hook.is-full { padding: 4px 2px; font: 400 23px/1 var(--font-display); text-transform: uppercase; text-align: left; place-items: center start; }
.hk-slot--visual { position: relative; overflow: hidden; min-height: 0; }
.hk-slot--offer.is-full { background: #fd5f07; font: 800 14px/1 var(--font-body); color: #fff; }
.hk-slot.is-pop { animation: hk-pop 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.4); }
@keyframes hk-pop { 0% { transform: scale(0.86); } 100% { transform: none; } }

/* the four visuals (used in the phone and in the 9 mini ads) */
.is-v-beans { background: radial-gradient(circle at 30% 40%, #6b4a32 0 9%, transparent 10%) 0 0 / 34px 30px, radial-gradient(circle at 70% 70%, #5a3b26 0 8%, transparent 9%) 0 0 / 30px 34px, #8a6a52 !important; }
.is-v-beans em { padding: 4px 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.75); font: 700 10px/1 var(--font-body); font-style: normal; letter-spacing: 0.1em; text-transform: uppercase; color: #6b5a4d; }
.is-v-steam { background: radial-gradient(70% 70% at 50% 40%, #ffb27a 0%, #c2410c 100%) !important; }
.is-v-selfie { background: linear-gradient(160deg, #ffd9b8, #f2a36b) !important; }
.is-v-logo { background: #eef1f3 !important; }
.is-v-logo b { font: 400 48px/1 var(--font-display); color: #c3cacf; }
.hk-face { position: relative; width: 70px; height: 70px; border-radius: 50%; background: #f6c7a1; box-shadow: inset -6px -6px 0 rgba(0, 0, 0, 0.06); }
.hk-face::before { content: ""; position: absolute; left: 0; right: 0; top: -6px; height: 30px; border-radius: 40px 40px 10px 10px; background: #3b2a20; }
.hk-face i { position: absolute; left: 20px; top: 32px; width: 6px; height: 6px; border-radius: 50%; background: #2b1d14; box-shadow: 24px 0 0 #2b1d14; }
.hk-face::after { content: ""; position: absolute; left: 22px; top: 44px; width: 26px; height: 12px; border-radius: 0 0 14px 14px; background: #a8422a; }
.hk-mini-cup { position: absolute; right: 22%; bottom: 14%; width: 30px; height: 26px; border-radius: 4px 4px 12px 12px; background: #fff; box-shadow: 4px 0 0 -1px #fd5f07; }

/* ---- the thumb river ---- */
.hk-river { position: relative; height: 100%; border-radius: 14px; overflow: hidden; background: color-mix(in srgb, var(--bg) 70%, transparent); border: 1px solid var(--line2); transition: opacity 0.4s; }
.hk-river canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.hk-river__label { position: absolute; left: 0; right: 0; bottom: 8px; margin: 0; text-align: center; font: 700 9.5px/1.2 var(--font-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }

/* ---- the deck ---- */
.hk-deck { display: grid; gap: clamp(12px, 2vh, 20px); align-content: center; transition: opacity 0.4s; }
.hk-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.hk-row__k { grid-column: 1 / -1; margin: 0; font: 700 11px/1 var(--font-body); letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); }
.hk-card {
  min-height: 46px;
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--line2);
  box-shadow: 0 10px 22px -16px rgba(0, 0, 0, 0.5);
  text-align: left;
  font: 600 13.5px/1.25 var(--font-body);
  color: var(--text);
  cursor: grab;
  touch-action: none;
  transition: border-color 0.25s, background-color 0.25s, transform 0.25s var(--ease-out), opacity 0.25s;
}
.hk-card--v::before { content: "\25A3  "; color: var(--muted); }
.hk-card.is-picked { border-color: var(--accent); background: var(--accent-soft); }
.hk-card.is-picked::after { content: " \2713"; color: var(--accent); }
.hk-card.is-lifted { opacity: 0.3; }
.hk-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .hk[data-state="build"] .hk-card:hover { transform: translateY(-2px); border-color: var(--text); } }
.hk:not([data-state="build"]) .hk-deck { opacity: 0.45; pointer-events: none; }
.hk-ghost { position: fixed; z-index: 9999; margin: 0; pointer-events: none; box-shadow: 0 24px 40px -14px rgba(0, 0, 0, 0.6); border-color: var(--accent); }

/* ---- the 9 versions take over the phone + river ---- */
.hk-grid {
  position: absolute;
  z-index: 3;
  left: var(--pad);
  top: var(--pad);
  bottom: var(--pad);
  width: calc(var(--pw) + var(--rw) + var(--gap));
  display: none;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.hk[data-state="testing"] .hk-grid, .hk[data-state="done"] .hk-grid { display: grid; }
.hk[data-state="testing"] .hk-phone, .hk[data-state="done"] .hk-phone,
.hk[data-state="testing"] .hk-river, .hk[data-state="done"] .hk-river { opacity: 0 !important; }   /* beats the entry tween's inline opacity */
.hk-cell {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 4px;
  padding: 7px;
  border-radius: 10px;
  background: #fff;
  color: #15191c;
  font-family: var(--font-body);
  box-shadow: 0 10px 22px -14px rgba(0, 0, 0, 0.6);
  animation: hk-in 0.4s var(--ease-out) both;
  transition: transform 0.5s var(--ease-out), box-shadow 0.5s, opacity 0.6s, filter 0.6s;
}
.hk-cell:nth-child(3n + 2) { animation-delay: 0.05s; } .hk-cell:nth-child(3n) { animation-delay: 0.1s; }
@keyframes hk-in { from { opacity: 0; transform: scale(0.7); } }
.hk-cell p { margin: 0; overflow: hidden; }
.hk-cell__h { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font: 400 11.5px/1 var(--font-display); text-transform: uppercase; }
.hk-cell__v { display: block; border-radius: 6px; }
.hk-cell__o { padding: 3px 4px; border-radius: 4px; background: #fd5f07; font: 700 8.5px/1.1 var(--font-body); white-space: nowrap; text-overflow: ellipsis; color: #fff; }
.hk-cell__n { position: absolute; right: 6px; bottom: 26px; padding: 3px 6px; border-radius: 6px; background: rgba(21, 25, 28, 0.85); font: 400 15px/1 var(--font-display); color: #fff; }
.hk-cell__n::after { content: " orders"; font: 600 8px/1 var(--font-body); }
.hk-cell.is-mine { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--text); }
.hk-cell__you { position: absolute; left: 6px; top: -8px; padding: 3px 6px; border-radius: 6px; background: var(--text); font: 700 8.5px/1 var(--font-body); font-style: normal; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bg); }
.hk-cell.is-dead { animation: hk-crumble 0.6s ease-in forwards; }
@keyframes hk-crumble { 30% { transform: rotate(-3deg) scale(0.97); } 100% { transform: translateY(14px) scale(0.86) rotate(4deg); opacity: 0.12; filter: grayscale(1) blur(1.5px); } }
.hk-cell.is-win { z-index: 2; transform: scale(1.12); box-shadow: 0 0 0 3px var(--accent), 0 0 46px rgba(253, 95, 7, 0.6); }
.hk-cell.is-win::before { content: "Winner"; position: absolute; right: 6px; top: -9px; padding: 3px 7px; border-radius: 6px; background: var(--accent); font: 700 8.5px/1 var(--font-body); letter-spacing: 0.1em; text-transform: uppercase; color: #fff; }
.hk-coin { position: fixed; z-index: 9999; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ffd2ad, #fd5f07); box-shadow: 0 0 8px rgba(253, 95, 7, 0.8); pointer-events: none; }

/* ---- foot ---- */
.hk__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; margin-top: clamp(16px, 3vh, 26px); }
.hk__msg { flex: 1 1 320px; margin: 0; min-height: 1.4em; font: 600 clamp(15px, 1.3vw, 17px)/1.4 var(--font-body); color: var(--text); }
.hk__btns { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.hk__go[disabled] { opacity: 0.4; pointer-events: none; }
.hk__go[hidden], .hk__again[hidden] { display: none; }
.hk__again { font: 600 14px/1 var(--font-body); color: var(--muted); transition: color 0.3s; }
@media (hover: hover) and (pointer: fine) { .hk__again:hover { color: var(--text); } }
.hk__note { margin: 12px 0 0; font: 500 12px/1.4 var(--font-body); color: var(--muted); }

/* ---- small screens: phone + river side by side, the deck underneath ---- */
@media (max-width: 899px) {
  .hk { --pw: min(250px, calc(100vw - 2 * var(--side) - 2 * var(--pad) - 70px)); --rw: 56px; --gap: 12px; }
  .hk__lab { grid-template-columns: var(--pw) var(--rw); justify-content: center; height: auto; align-items: stretch; }
  .hk-phone { height: 440px; }
  .hk-deck { grid-column: 1 / -1; margin-top: 8px; }
  .hk-grid { bottom: auto; height: 440px; left: 50%; translate: -50% 0; width: min(100% - 2 * var(--pad), 360px); }
  .hk-river__label { font-size: 8px; letter-spacing: 0.08em; }
  .hk__stat b { font-size: 18px; }
  .hk-crt { left: calc(50% - 130px); top: 110px; width: 260px; height: 170px; }
}