/* HOW TO PLAY SCREEN — animated like real gameplay */
#sHowTo{
  justify-content:flex-start;
  padding:0;
  cursor:pointer;
  background:#FFFFFF;
  overflow:hidden;
  color:#0A0A0A;
}

/* ── Title ── */
.ht-title{
  position:absolute;
  top:180px;
  left:0;right:0;
  text-align:center;
  font-family:'Inter Tight',system-ui,'Segoe UI',Arial,sans-serif;
  font-size:112px;
  font-weight:700;
  letter-spacing:-.06em;
  line-height:1;
  color:#0A0A0A;
  z-index:2;
}
.ht-sub{
  position:absolute;
  top:316px;
  left:0;right:0;
  text-align:center;
  font-family:'Inter Tight',system-ui,'Segoe UI',Arial,sans-serif;
  font-size:40px;
  font-weight:600;
  letter-spacing:-.05em;
  color:#0A0A0A;
  z-index:2;
}

/* ── Stage ── */
.ht-stage{
  position:absolute;
  top:600px;
  left:50%;
  transform:translateX(-50%);
  width:760px;
  height:600px;
  z-index:1;
}

/* dashed rails marking the perfect alignment column */
.ht-rail{
  position:absolute;
  top:0;
  bottom:0;
  width:0;
  border-left:4px dashed #C2CAC9;
  z-index:0;
}
.ht-rail-l{ left:100px; }
.ht-rail-r{ right:100px; }

/* total cycle = 12s; each frame visible 4s */
.ht-frame{
  position:absolute;
  inset:0;
  opacity:0;
  animation:ht-frame-vis 12s linear infinite;
}
.ht-frame-tap     { animation-delay:0s; }
.ht-frame-perfect { animation-delay:4s; }
.ht-frame-miss    { animation-delay:8s; }

@keyframes ht-frame-vis{
  0%,33.33%   { opacity:1; }
  35%,100%    { opacity:0; }
}

/* ── Block primitives ── */
.ht-block{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  width:560px;
  height:108px;
}

.ht-b-base { bottom:0;   width:600px; height:120px; background:#A8B1B0; }
.ht-b-mid1 { bottom:120px;  background:#5C6463; }
.ht-b-mid2 { bottom:228px; background:#A8B1B0; }
.ht-b-mid3 { bottom:336px; background:#5C6463; }

/* ── Moving / dropping block (per frame) ── */

/* shared start: each moving block slides L→R during 0–1.2s,
   then drops 1.2–1.6s, settles, score pops 1.7–3.2s. Frame visible 0–4s. */

/* Moving block lives at the next-stack-row height. It slides left↔right,
   "locks" in place (no vertical drop), then any overhanging part shears off
   as a falling chip. This mirrors the actual gameplay. */

/* Stage = 760px wide. Stationary mid blocks span x:50→330 (width 280, centered).
   Drop block enters offstage left, slides right, locks above the topmost mid,
   then the overhang shears off cleanly at x=330 — exactly the right edge of
   the stack column. The chip's left edge equals the stack's right edge. */

/* TAP — locks at left:160px (range 80–360 → 60px overhang past 330).
        After shear: width 250, range 80–330. Chip: x 330–360, width 30. */
.ht-frame-tap .ht-drop{
  position:absolute;
  height:108px;
  background:#5C6463;
  border-radius:0;
  bottom:228px;
  width:560px;
  animation:ht-slide-tap 4s cubic-bezier(.45,.05,.55,.95) infinite;
}
@keyframes ht-slide-tap{
  0%   { left:-600px; width:560px; }
  45%  { left:160px;   width:560px; }
  55%  { left:160px;   width:560px; }
  60%  { left:160px;   width:500px; }
  100% { left:160px;   width:500px; }
}

.ht-frame-tap .ht-chip{
  position:absolute;
  height:108px;
  background:#5C6463;
  border-radius:0;
  bottom:228px;
  left:660px;
  width:60px;
  opacity:0;
  animation:ht-chip-tap 4s ease-in infinite;
}
@keyframes ht-chip-tap{
  0%,58%  { opacity:0; transform:translate(0,0) rotate(0); }
  60%     { opacity:1; transform:translate(0,0) rotate(0); }
  100%    { opacity:0; transform:translate(80px,400px) rotate(34deg); }
}

/* PERFECT — locks at left:100px, range 50–330, exact match with stack. */
.ht-frame-perfect .ht-drop{
  position:absolute;
  height:108px;
  background:#5C6463;
  border-radius:0;
  bottom:336px;
  width:560px;
  animation:ht-slide-perfect 4s cubic-bezier(.45,.05,.55,.95) infinite;
}
@keyframes ht-slide-perfect{
  0%   { left:-600px; }
  45%  { left:100px;   }
  55%  { left:100px;   transform:scaleY(1); }
  62%  { left:100px;   transform:scaleY(.92); }
  68%  { left:100px;   transform:scaleY(1); }
  100% { left:100px;   transform:scaleY(1); }
}

.ht-frame-perfect .ht-glow{
  position:absolute;
  left:50%;
  bottom:336px;
  transform:translateX(-50%);
  width:640px; height:128px;
  border-radius:12px;
  background:radial-gradient(ellipse at center, rgba(238,255,65,.9) 0%, rgba(238,255,65,0) 70%);
  opacity:0;
  animation:ht-glow-flash 4s ease-out infinite;
}
@keyframes ht-glow-flash{
  0%,55%   { opacity:0; transform:translateX(-50%) scale(.9); }
  62%      { opacity:1; transform:translateX(-50%) scale(1.15); }
  78%      { opacity:0; transform:translateX(-50%) scale(1.5); }
  100%     { opacity:0; }
}

/* MISS — locks at left:400px (range 200–480 → 300px overhang past 330).
         After shear: width 130, range 200–330. Chip: x 330–480, width 150. */
.ht-frame-miss .ht-drop{
  position:absolute;
  height:108px;
  background:#5C6463;
  border-radius:0;
  bottom:444px;
  width:560px;
  animation:ht-slide-miss 4s cubic-bezier(.45,.05,.55,.95) infinite;
}
@keyframes ht-slide-miss{
  0%   { left:-600px; width:560px; }
  45%  { left:400px;  width:560px; }
  55%  { left:400px;  width:560px; }
  60%  { left:400px;  width:260px; }
  100% { left:400px;  width:260px; }
}

.ht-frame-miss .ht-chip{
  position:absolute;
  height:108px;
  background:#5C6463;
  border-radius:0;
  bottom:444px;
  left:660px;
  width:300px;
  opacity:0;
  animation:ht-chip-miss 4s ease-in infinite;
}
@keyframes ht-chip-miss{
  0%,58%  { opacity:0; transform:translate(0,0) rotate(0); }
  60%     { opacity:1; transform:translate(0,0) rotate(0); }
  100%    { opacity:0; transform:translate(160px,520px) rotate(48deg); }
}

/* ── Score popup ── */
.ht-badge{
  position:absolute;
  right:-4px;
  bottom:480px;
  font-family:'Inter Tight',system-ui,'Segoe UI',Arial,sans-serif;
  font-size:72px;
  font-weight:800;
  letter-spacing:-.02em;
  opacity:0;
  animation:ht-badge-pop 4s ease-out infinite;
}
.ht-badge-pos{ color:#0A0A0A; }
.ht-badge-neg{ color:#E63946; }

@keyframes ht-badge-pop{
  0%,42%   { opacity:0; transform:translateY(20px) scale(.85); }
  48%      { opacity:1; transform:translateY(0)    scale(1.05); }
  55%      { transform:translateY(-12px) scale(1); }
  80%      { opacity:1; transform:translateY(-60px) scale(1); }
  100%     { opacity:0; transform:translateY(-100px) scale(.95); }
}

/* ── Caption ── */
.ht-caption{
  position:absolute;
  top:1240px;
  left:0;right:0;
  height:72px;
  text-align:center;
  z-index:2;
}
.ht-cap{
  position:absolute;
  left:0;right:0;
  font-family:'Inter Tight',system-ui,'Segoe UI',Arial,sans-serif;
  font-size:40px;
  font-weight:600;
  letter-spacing:-.05em;
  color:#8A9290;
  opacity:0;
  animation:ht-cap-cycle 12s linear infinite;
}
.ht-cap-tap     { animation-delay:0s; }
.ht-cap-perfect { animation-delay:4s; }
.ht-cap-miss    { animation-delay:8s; }

@keyframes ht-cap-cycle{
  0%      { opacity:0; transform:translateY(16px); }
  4%      { opacity:1; transform:translateY(0); }
  28%     { opacity:1; transform:translateY(0); }
  33%     { opacity:0; transform:translateY(-16px); }
  100%    { opacity:0; }
}

.ht-continue{
  position:absolute;
  bottom:200px;
  left:50%;
  transform:translateX(-50%);
  width:auto;
  height:40px;
  pointer-events:none;
  user-select:none;
  opacity:.85;
  z-index:2;
}

/* ── Settings (kept for admin) ── */
.ht-settings-btn{
  position:absolute;
  top:28px; right:28px;
  width:80px; height:80px;
  border:none; border-radius:50%;
  background:rgba(0,0,0,.06);
  color:#0A0A0A;
  font-size:44px;
  cursor:pointer;
  opacity:.2;
  z-index:5;
}
.ht-settings-btn:active{ background:rgba(0,0,0,.12); }

.ht-settings-panel{
  position:absolute;
  top:120px; right:28px;
  width:600px;
  max-height:70%;
  overflow-y:auto;
  padding:28px 32px;
  border-radius:28px;
  background:#FFFFFF;
  box-shadow:0 24px 64px rgba(0,0,0,.18);
  display:none;
  z-index:6;
  font-family:'Inter Tight',system-ui,'Segoe UI',Arial,sans-serif;
  color:#0A0A0A;
}
.ht-settings-panel.open{ display:block; }
.ht-settings-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.ht-settings-title{ font-weight:800; font-size:32px; }
.ht-settings-reset{ background:#0A0A0A; color:#fff; border:none; border-radius:16px; padding:8px 20px; font-weight:700; cursor:pointer; }
.ht-setting{ display:block; margin:20px 0; font-size:26px; }
.ht-setting-row{ display:flex; justify-content:space-between; margin-bottom:8px; }
.ht-slider{ width:100%; }