/* ============================================================================
   Claw machine (www/js/claw.js). Every class is cl- namespaced.
   Mounts into a full-screen <section>; the parent owns safe-area padding.
   ========================================================================== */
.cl-root{flex:1 1 auto;min-height:0;width:100%;max-width:520px;margin:0 auto;display:flex;flex-direction:column;gap:10px;}

.cl-top{display:flex;align-items:center;gap:10px;min-height:48px;}
.cl-back{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.08);color:var(--bone);
  transition:transform .35s var(--boing);}
.cl-back:active{transform:scale(.86);transition-duration:.06s;}
.cl-title{flex:1;min-width:0;font-family:var(--f-display);font-size:26px;line-height:1.1;text-transform:var(--display-case);letter-spacing:var(--display-track);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transform:rotate(var(--tilt-h));
  text-shadow:2px 0 0 var(--stroke),-2px 0 0 var(--stroke),0 2px 0 var(--stroke),0 -2px 0 var(--stroke),0 4px 0 var(--stroke);}
.cl-tokens{flex:none;display:flex;align-items:center;gap:6px;min-height:40px;padding:0 14px 0 10px;border-radius:20px;background:rgba(255,255,255,.07);
  font-family:var(--f-display);font-size:19px;color:#fde68a;font-variant-numeric:tabular-nums;}
.cl-tk-w{font-family:var(--f-body);font-weight:var(--fw-bold);font-size:13px;color:var(--muted);}
.cl-tk-ico{width:22px;height:22px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fde047,#d97706);box-shadow:0 2px 0 #92400e,inset 0 0 0 3px rgba(255,255,255,.25);}

.cl-stage{position:relative;flex:1 1 auto;min-height:220px;width:100%;}
.cl-cv{position:absolute;inset:0;width:100%;height:100%;display:block;}
.cl-toast{position:absolute;left:50%;top:34%;transform:translate(-50%,-6px) scale(.9);opacity:0;pointer-events:none;max-width:86%;
  padding:8px 16px;border-radius:16px;font-family:var(--f-display);font-size:22px;line-height:1.15;text-align:center;
  background:rgba(8,8,11,.88);color:var(--bone);box-shadow:inset 0 0 0 2px rgba(255,255,255,.12),0 6px 18px rgba(0,0,0,.4);
  transition:opacity .2s ease,transform .35s var(--boing);}
.cl-toast.on{opacity:1;transform:translate(-50%,0) scale(1);}
.cl-toast.win{color:#fde68a;box-shadow:inset 0 0 0 2px rgba(251,191,36,.6),0 0 26px rgba(251,191,36,.3);}
.cl-toast.miss{color:#fecdd3;font-size:18px;}
.cl-reduced .cl-toast{transition:opacity .15s linear;transform:translate(-50%,0);}

.cl-case{display:flex;flex-direction:column;gap:6px;}
.cl-case-h{font-weight:var(--fw-bold);font-size:13px;letter-spacing:.02em;color:var(--muted);}
.cl-chips{display:flex;flex-wrap:wrap;gap:6px;}
.cl-chip{display:inline-flex;align-items:center;gap:5px;max-width:100%;min-height:28px;padding:3px 10px 3px 4px;border-radius:14px;
  background:rgba(255,255,255,.06);font-weight:var(--fw-bold);font-size:13px;line-height:1.1;color:var(--bone);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cl-chip i{font-style:normal;flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:13px;background:var(--c,#f5f3ef);color:#1d0610;}
.cl-chip-empty{padding-left:10px;color:var(--muted);}

.cl-ctrl{display:flex;flex-direction:column;align-items:stretch;gap:2px;}
.cl-drop{width:100%;}
.cl-busy .cl-drop[disabled]{opacity:.7;}
.cl-note{min-height:20px;text-align:center;font-size:14px;line-height:1.3;color:var(--muted);font-weight:var(--fw-bold);}

@media (max-height:700px){
  .cl-root{gap:6px;}
  .cl-title{font-size:22px;}
  .cl-stage{min-height:180px;}
  .cl-chips{gap:4px;}
  .cl-chip{min-height:24px;font-size:12px;padding:2px 8px 2px 3px;}
  .cl-chip i{width:19px;height:19px;font-size:11px;}
  .cl-ctrl .btn.big{min-height:56px;font-size:24px;}
}

/* 2026-10-27 redesign: hold-to-move button, heft words in the case list, the win punch */
.cl-drop{touch-action:none;-webkit-touch-callout:none;user-select:none;-webkit-user-select:none;}
.cl-moving .cl-drop{filter:brightness(1.12);transform:skewX(var(--btn-skew)) translateY(calc(var(--btn-depth) - 1px)) scale(1.02,.95);}
.cl-case-h span{font-weight:var(--fw-body);}
.cl-chip em{font-style:normal;font-size:12px;color:var(--muted);margin-left:2px;}
.cl-chip.h-heavy em{color:#fdba74;} .cl-chip.h-slick em{color:#f9a8d4;}
.cl-stage.cl-punch{animation:cl-punch .38s cubic-bezier(.2,1.8,.4,1);}
@keyframes cl-punch{0%{transform:scale(1.04)}40%{transform:scale(.985) translateY(2px)}100%{transform:none}}
.cl-reduced .cl-stage.cl-punch{animation:none;}