/* ===========================================================================
   BB : Badminton Bill — Smash Check styles
   =========================================================================== */

/* ---- entry button (in main body) -------------------------------------- */
.smash-entry {
  display: flex; align-items: center; gap: 12px; width: 100%;
  margin: 12px 0 2px; padding: 13px 14px;
  border-radius: var(--radius);
  background: linear-gradient(150deg, #0f3325 0%, #0c2b1f 60%);
  color: #fff; border: 1.5px solid #14402f;
  box-shadow: var(--shadow-card);
  position: relative; overflow: hidden;
  transition: transform .14s cubic-bezier(.2,.9,.3,1.4);
}
.smash-entry::after {
  content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 100% 22px, 30px 100%;
  -webkit-mask-image: radial-gradient(120% 120% at 90% -20%, #000 30%, transparent 70%);
          mask-image: radial-gradient(120% 120% at 90% -20%, #000 30%, transparent 70%);
  pointer-events: none;
}
.smash-entry:active { transform: scale(.98); }
.smash-entry .se-ic {
  position: relative; width: 40px; height: 40px; border-radius: 13px; flex: none;
  display: grid; place-items: center;
  background: var(--lime); color: var(--lime-ink);
  box-shadow: 0 6px 18px rgba(201,245,58,.3);
}
.smash-entry .se-ic svg { width: 23px; height: 23px; }
.smash-entry .se-tx { position: relative; flex: 1; text-align: left; line-height: 1.15; }
.smash-entry .se-tx b { display: block; font-size: 15px; font-weight: 700; }
.smash-entry .se-tx small { display: block; font-size: 11px; color: rgba(255,255,255,.6); margin-top: 2px; }
.smash-entry .se-tag {
  position: relative; font-family: var(--font-num); font-size: 10px; font-weight: 700;
  color: var(--lime-ink); background: var(--lime); padding: 2px 7px; border-radius: 999px;
  margin-right: 2px;
}
.smash-entry .se-arrow { position: relative; color: rgba(255,255,255,.5); display: flex; }
.smash-entry .se-arrow svg { width: 18px; height: 18px; }

/* game entry — yellow accent, used as a link */
a.smash-entry { text-decoration: none; }
.game-entry .se-ic {
  background: linear-gradient(150deg, var(--yellow, #ffd21e), #f0a800);
  color: #3a2700; box-shadow: 0 6px 18px rgba(255,210,30,.32);
}
.game-entry .se-tag.play {
  color: #3a2700; background: var(--yellow, #ffd21e);
}

/* ---- full-screen tool overlay ----------------------------------------- */
.smash-screen {
  position: fixed; inset: 0; z-index: 200;
  max-width: 480px; margin: 0 auto;
  background: var(--bg);
  display: flex; flex-direction: column;
  animation: smashIn .34s cubic-bezier(.2,.85,.2,1) both;
}
.smash-screen.closing { animation: smashOut .26s ease forwards; }
@keyframes smashIn { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes smashOut { from { transform: translateY(0); } to { transform: translateY(100%); } }

.smash-head {
  flex: none; display: flex; align-items: center; gap: 10px;
  padding: 14px 14px 12px;
  padding-top: calc(14px + env(safe-area-inset-top));
  background: linear-gradient(160deg, var(--court-2), var(--court));
  color: #fff;
}
.smash-head .sh-back, .smash-head .sh-hist {
  width: 38px; height: 38px; border-radius: 50%; flex: none;
  display: grid; place-items: center; color: #fff;
  background: rgba(255,255,255,.12);
  transition: transform .12s, background .15s;
}
.smash-head .sh-back:active, .smash-head .sh-hist:active { transform: scale(.9); background: rgba(255,255,255,.22); }
.smash-head .sh-back svg, .smash-head .sh-hist svg { width: 19px; height: 19px; }
.smash-head .sh-title { flex: 1; min-width: 0; }
.smash-head .sh-title h2 { margin: 0; font-size: 17px; font-weight: 700; display: flex; align-items: center; gap: 7px; }
.smash-head .sh-title h2 .beta {
  font-family: var(--font-num); font-size: 9.5px; font-weight: 700;
  color: var(--lime-ink); background: var(--lime); padding: 2px 6px; border-radius: 999px;
}
.smash-head .sh-title p { margin: 1px 0 0; font-size: 11px; color: rgba(255,255,255,.6); }

.smash-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 16px; padding-bottom: 28px; }

/* ---- intro / howto ----------------------------------------------------- */
.smash-hero {
  border-radius: var(--radius); overflow: hidden; position: relative;
  background: radial-gradient(120% 120% at 80% -10%, #15402f, #0c2b1f);
  color: #fff; padding: 22px 18px; text-align: center; margin-bottom: 16px;
}
.smash-hero .big-ic {
  width: 60px; height: 60px; border-radius: 18px; margin: 0 auto 12px;
  display: grid; place-items: center; background: var(--lime); color: var(--lime-ink);
  box-shadow: 0 10px 30px rgba(201,245,58,.35);
}
.smash-hero .big-ic svg { width: 34px; height: 34px; }
.smash-hero h3 { margin: 0 0 4px; font-size: 19px; font-weight: 700; }
.smash-hero p { margin: 0; font-size: 12.5px; color: rgba(255,255,255,.68); line-height: 1.5; }

.tips-card { background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--radius); padding: 6px 4px; margin-bottom: 16px; box-shadow: var(--shadow-card); }
.tip {
  display: flex; align-items: flex-start; gap: 12px; padding: 11px 13px;
  border-bottom: 1px solid var(--line);
}
.tip:last-child { border-bottom: none; }
.tip .t-ic {
  flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center;
  background: var(--primary-soft); color: var(--primary-press);
}
.tip .t-ic svg { width: 17px; height: 17px; }
.tip .t-tx { font-size: 13px; line-height: 1.45; color: var(--ink); }
.tip .t-tx b { font-weight: 700; }
.tip .t-tx .hi { color: var(--primary-press); font-weight: 700; }

/* image save overlay (mobile long-press fallback) */
.img-save-overlay {
  position: fixed; inset: 0; z-index: 120;
  background: rgba(6,22,15,.82); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  padding: 18px; animation: isoIn .2s ease;
}
@keyframes isoIn { from { opacity: 0; } to { opacity: 1; } }
.iso-card {
  width: 100%; max-width: 360px; max-height: 92vh;
  display: flex; flex-direction: column; gap: 12px; align-items: center;
}
.iso-tip {
  display: flex; align-items: center; gap: 9px;
  color: #eafff0; font-size: 13.5px; font-weight: 600; text-align: center;
}
.iso-tip svg { width: 20px; height: 20px; flex: none; color: var(--lime); }
.iso-tip b { color: var(--lime); font-weight: 800; }
.iso-card img {
  max-width: 100%; max-height: 70vh; width: auto; border-radius: 16px;
  box-shadow: 0 20px 50px -16px rgba(0,0,0,.7); -webkit-touch-callout: default;
}
.iso-close {
  margin-top: 2px; padding: 12px 30px; border: none; border-radius: 999px;
  background: var(--primary); color: #fff; font-weight: 800; font-size: 15px;
  cursor: pointer; box-shadow: 0 8px 20px -8px rgba(18,179,79,.7);
}
.iso-close:active { transform: scale(.95); }

.fps-note {
  display: flex; align-items: center; gap: 10px; margin-bottom: 16px;
  background: var(--lime); color: var(--lime-ink); border-radius: var(--radius-sm);
  padding: 12px 14px; font-size: 12.5px; font-weight: 600; line-height: 1.4;
}
.fps-note svg { width: 20px; height: 20px; flex: none; }
.fps-note b { font-weight: 800; }
.fps-note.hot {
  background: var(--court); color: #eafff0;
  border: 1.5px solid var(--primary);
  box-shadow: 0 6px 18px -10px rgba(18,179,79,.6);
}
.fps-note.hot svg { color: var(--lime); }
.fps-note.hot b { color: var(--lime); }

.fps-note.warn {
  background: #fff7e6; border: 1.5px solid #f0c24b; color: #6b4e16;
}
.fps-note.warn svg { color: #d98c12; }
.fps-note.warn b { color: #b9740a; font-weight: 800; }

/* "why" explainer box on calib */
.why-note {
  display: flex; align-items: flex-start; gap: 10px;
  background: var(--surface-soft); border: 1.5px solid var(--line);
  border-left: 4px solid var(--primary);
  border-radius: 12px; padding: 11px 13px; margin-bottom: 14px;
  font-size: 13px; line-height: 1.5; color: var(--ink);
}
.why-note svg { width: 18px; height: 18px; flex: none; margin-top: 1px; color: var(--primary); }
.why-note b { font-weight: 800; color: var(--primary-press); }

/* calibration sections */
.calib-sec {
  background: var(--surface); border: 1.5px solid var(--line);
  border-radius: var(--radius); padding: 14px 14px 6px;
  margin-bottom: 14px; box-shadow: var(--shadow-card);
}
.cs-head { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; }
.cs-no {
  width: 26px; height: 26px; flex: none; border-radius: 50%;
  background: var(--primary); color: #fff; font-weight: 800; font-size: 14px;
  display: grid; place-items: center;
}
.cs-tx { font-size: 15px; font-weight: 800; color: var(--ink); letter-spacing: -.01em; }

/* press-and-hold frame stepper */
.frame-step {
  width: 44px; height: 44px; flex: none; border-radius: 12px;
  background: var(--court); color: var(--lime);
  border: none; display: grid; place-items: center;
  cursor: pointer; touch-action: none; user-select: none;
  transition: transform .08s, background .15s;
}
.frame-step:active { transform: scale(.9); background: var(--court-2); }
.frame-step svg { width: 22px; height: 22px; }

/* big primary action */
.smash-cta {
  display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%;
  padding: 16px; border-radius: 16px; font-size: 15.5px; font-weight: 700;
  background: var(--primary); color: #fff;
  box-shadow: 0 8px 22px var(--glow);
  transition: transform .14s cubic-bezier(.2,.9,.3,1.4), background .15s;
}
.smash-cta:active { transform: scale(.97); background: var(--primary-press); }
.smash-cta svg { width: 20px; height: 20px; }
.smash-cta.ghost { background: var(--surface); color: var(--ink); border: 1.5px solid var(--line); box-shadow: var(--shadow-card); }
.smash-cta.ghost:active { background: var(--surface-soft); }
.smash-cta.dark { background: var(--court); color: #fff; box-shadow: var(--shadow-card); }
.smash-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.smash-row { display: flex; gap: 10px; }
.smash-row > * { flex: 1; }

/* ---- calibration ------------------------------------------------------- */
.calib-stage { position: relative; border-radius: var(--radius); overflow: hidden; background: #0c2b1f; box-shadow: var(--shadow-card); margin-bottom: 6px; touch-action: none; }
.calib-stage canvas { display: block; width: 100%; height: auto; }
.calib-help { font-size: 12.5px; color: var(--muted); text-align: center; margin: 10px 0 12px; line-height: 1.45; }
.calib-help b { color: var(--ink); }

.scrub { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.scrub .s-lab { font-size: 11px; color: var(--muted); font-weight: 600; white-space: nowrap; }
.scrub input[type=range] { flex: 1; accent-color: var(--primary); height: 26px; }

.ref-label { font-size: 12px; font-weight: 700; color: var(--ink-2); margin: 4px 2px 8px; }
.ref-hint { font-size: 12px; color: var(--muted); margin: -4px 2px 10px; line-height: 1.5; }
.ref-hint b { color: var(--primary-press); font-weight: 800; }
.ref-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.ref-chip {
  display: flex; flex-direction: column; gap: 1px; padding: 9px 12px; border-radius: 12px;
  background: var(--surface); border: 1.5px solid var(--line); text-align: left;
  transition: transform .12s, border-color .15s, background .15s;
}
.ref-chip:active { transform: scale(.96); }
.ref-chip.on { border-color: var(--primary); background: var(--primary-soft); }
.ref-chip .rc-name { font-size: 12px; font-weight: 700; color: var(--ink); }
.ref-chip .rc-m { font-family: var(--font-num); font-size: 11px; color: var(--muted); font-weight: 600; }
.ref-chip.on .rc-m { color: var(--primary-press); }
.ref-custom { display: flex; align-items: center; gap: 6px; }
.ref-custom input {
  width: 64px; border: 1.5px solid var(--line); border-radius: 10px; padding: 8px;
  font-size: 14px; font-family: var(--font-num); text-align: center; background: var(--surface);
}
.ref-custom input:focus { outline: none; border-color: var(--primary); }
.ref-custom .u { font-size: 12px; color: var(--muted); font-weight: 600; }

/* ---- analyzing --------------------------------------------------------- */
.analyzing { text-align: center; padding: 40px 10px; }
.analyzing .spin {
  width: 64px; height: 64px; margin: 0 auto 22px; border-radius: 50%;
  border: 5px solid var(--line); border-top-color: var(--primary);
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.analyzing h3 { margin: 0 0 6px; font-size: 17px; font-weight: 700; }
.analyzing p { margin: 0 0 18px; font-size: 12.5px; color: var(--muted); }
.prog-track { height: 10px; border-radius: 999px; background: var(--line); overflow: hidden; max-width: 280px; margin: 0 auto; }
.prog-fill { height: 100%; background: linear-gradient(90deg, var(--primary), var(--lime)); border-radius: 999px; transition: width .15s linear; }
.prog-pct { font-family: var(--font-num); font-size: 13px; font-weight: 700; color: var(--primary-press); margin-top: 10px; }

/* ---- result ------------------------------------------------------------ */
.result-card {
  position: relative; overflow: hidden; border-radius: var(--radius-lg);
  background: radial-gradient(130% 120% at 50% -20%, #15402f, #0c2b1f);
  color: #fff; padding: 26px 20px 24px; text-align: center; margin-bottom: 16px;
  box-shadow: var(--shadow-pop);
}
.result-card .rc-grid {
  position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 100% 26px, 34px 100%;
  -webkit-mask-image: radial-gradient(100% 100% at 50% 0%, #000 40%, transparent 80%);
          mask-image: radial-gradient(100% 100% at 50% 0%, #000 40%, transparent 80%);
}
.result-card .rc-cat { position: relative; font-size: 13px; font-weight: 700; color: var(--lime); margin-bottom: 6px; display: inline-flex; align-items: center; gap: 6px; justify-content: center; }
.result-card .rc-cat svg { width: 15px; height: 15px; }
.result-card .rc-num { position: relative; font-family: var(--font-num); font-weight: 700; line-height: .92; }
.result-card .rc-num .v { font-size: 76px; letter-spacing: -2px; }
.result-card .rc-num .u { font-size: 22px; color: rgba(255,255,255,.6); margin-left: 6px; }
.result-card .rc-best {
  position: relative; display: inline-flex; align-items: center; gap: 6px; margin-top: 14px;
  background: var(--lime); color: var(--lime-ink); font-size: 12.5px; font-weight: 800;
  padding: 6px 13px; border-radius: 999px;
  animation: bestPop .5s cubic-bezier(.2,.9,.3,1.5) both;
}
.result-card .rc-best svg { width: 15px; height: 15px; }
@keyframes bestPop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.result-card .rc-sub { position: relative; font-size: 11.5px; color: rgba(255,255,255,.55); margin-top: 12px; }

.traj-wrap { border-radius: var(--radius); overflow: hidden; background: #0c2b1f; box-shadow: var(--shadow-card); margin-bottom: 16px; }
.traj-wrap canvas { display: block; width: 100%; height: auto; }

.save-row { display: flex; gap: 8px; margin-bottom: 14px; }
.save-row input {
  flex: 1; border: 1.5px solid var(--line); border-radius: 13px; padding: 13px 14px;
  font-size: 14px; background: var(--surface);
}
.save-row input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--glow-soft); }
.save-row .save-btn {
  flex: none; display: flex; align-items: center; gap: 7px; padding: 0 16px; border-radius: 13px;
  background: var(--court); color: #fff; font-size: 14px; font-weight: 700;
  transition: transform .12s;
}
.save-row .save-btn:active { transform: scale(.96); }
.save-row .save-btn.saved { background: var(--primary); }
.save-row .save-btn svg { width: 17px; height: 17px; }

/* result for "not found" */
.no-find { text-align: center; padding: 8px 6px 0; }
.no-find .nf-ic { width: 56px; height: 56px; border-radius: 16px; margin: 0 auto 12px; display: grid; place-items: center; background: var(--surface-soft); color: var(--muted); }
.no-find .nf-ic svg { width: 30px; height: 30px; }
.no-find h3 { margin: 0 0 6px; font-size: 17px; }
.no-find p { margin: 0 0 4px; font-size: 13px; color: var(--muted); line-height: 1.5; }

/* ---- manual tap mode --------------------------------------------------- */
.manual-dots { display: flex; gap: 8px; justify-content: center; margin: 12px 0 8px; }
.manual-dot { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--muted); padding: 6px 12px; border-radius: 999px; background: var(--surface); border: 1.5px solid var(--line); }
.manual-dot.on { color: var(--primary-press); border-color: var(--primary); background: var(--primary-soft); }
.manual-dot .d { width: 14px; height: 14px; border-radius: 50%; }

/* ---- history ----------------------------------------------------------- */
.hist-best {
  border-radius: var(--radius); background: radial-gradient(120% 120% at 80% -10%, #15402f, #0c2b1f);
  color: #fff; padding: 20px; text-align: center; margin-bottom: 16px; box-shadow: var(--shadow-card);
}
.hist-best .hb-lab { font-size: 12px; font-weight: 700; color: var(--lime); margin-bottom: 4px; display: inline-flex; align-items: center; gap: 6px; }
.hist-best .hb-lab svg { width: 15px; height: 15px; }
.hist-best .hb-num { font-family: var(--font-num); font-weight: 700; }
.hist-best .hb-num .v { font-size: 52px; }
.hist-best .hb-num .u { font-size: 17px; color: rgba(255,255,255,.6); margin-left: 5px; }
.hist-best .hb-who { font-size: 12px; color: rgba(255,255,255,.6); margin-top: 4px; }

.hist-list { display: flex; flex-direction: column; gap: 9px; }
.hist-item {
  display: flex; align-items: center; gap: 12px; padding: 13px 14px;
  background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card);
}
.hist-item.is-best { border-color: var(--lime); background: linear-gradient(90deg, #fffdef, var(--surface)); }
.hist-item .hi-rank { font-family: var(--font-num); font-size: 13px; font-weight: 700; color: var(--muted); width: 22px; text-align: center; flex: none; }
.hist-item .hi-main { flex: 1; min-width: 0; }
.hist-item .hi-name { font-size: 14px; font-weight: 700; color: var(--ink); }
.hist-item .hi-date { font-size: 11px; color: var(--muted); margin-top: 1px; }
.hist-item .hi-kmh { font-family: var(--font-num); font-size: 19px; font-weight: 700; color: var(--ink); white-space: nowrap; }
.hist-item .hi-kmh small { font-size: 11px; color: var(--muted); font-weight: 600; margin-left: 3px; }
.hist-item .hi-del { width: 30px; height: 30px; border-radius: 9px; flex: none; display: grid; place-items: center; color: var(--muted); background: var(--surface-soft); }
.hist-item .hi-del:active { transform: scale(.9); color: #e5484d; }
.hist-item .hi-del svg { width: 15px; height: 15px; }
.hist-empty { text-align: center; padding: 50px 20px; color: var(--muted); }
.hist-empty svg { width: 44px; height: 44px; margin-bottom: 12px; opacity: .5; }
.hist-empty p { font-size: 13.5px; margin: 0; line-height: 1.5; }
.hist-clear { display: block; margin: 18px auto 0; font-size: 12.5px; font-weight: 600; color: #e5484d; padding: 8px 16px; border-radius: 999px; background: #fdecec; }

/* ---- board tabs + share ------------------------------------------------ */
.board-tabs {
  display: flex; gap: 6px; padding: 5px; margin-bottom: 16px;
  background: var(--surface-soft); border-radius: 14px; border: 1.5px solid var(--line);
}
.board-tab {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 10px; border-radius: 10px; font-size: 13.5px; font-weight: 700; color: var(--muted);
  transition: background .15s, color .15s, transform .1s;
}
.board-tab:active { transform: scale(.97); }
.board-tab.on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-card); }
.board-tab svg { width: 16px; height: 16px; }

.board-share {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
  margin-bottom: 14px; padding: 13px; border-radius: 14px;
  font-size: 14px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, #12b34f, #0c7a36);
  box-shadow: 0 6px 18px rgba(18,179,79,.28);
  transition: transform .12s, filter .15s;
}
.board-share:active { transform: scale(.97); }
.board-share.done { background: var(--surface); color: var(--primary-press); border: 1.5px solid var(--primary); box-shadow: none; }
.board-share:disabled { cursor: default; }
.board-share svg { width: 17px; height: 17px; }

.board-item .hi-rank { font-size: 16px; }
.board-item.is-best { border-color: var(--lime); background: linear-gradient(90deg, #fffdef, var(--surface)); }

/* confetti */
.confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.confetti i { position: absolute; top: -12px; width: 8px; height: 12px; border-radius: 2px; animation: fall linear forwards; }
@keyframes fall { to { transform: translateY(360px) rotate(540deg); opacity: 0; } }