/* ============================================================
   BombTimer — full-screen timer takeover (product register)
   Calm, projector-legible. Shared by every homepage mockup.
   ============================================================ */
#bt-timer{position:fixed;inset:0;z-index:90000;display:none;flex-direction:column;align-items:center;justify-content:center;
  background:radial-gradient(1100px 760px at 50% -6%, #283057 0%, #161a34 58%, #0e1126 100%);
  color:#f7f3ea;font-family:var(--bt-ui,"Hanken Grotesk",system-ui,sans-serif);
  -webkit-font-smoothing:antialiased;opacity:0;transition:opacity .28s ease;
  overflow-x:hidden;overscroll-behavior:contain;touch-action:pan-y}
#bt-timer.open{display:flex;opacity:1}
#bt-timer .bt-glow{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(440px 440px at 50% 42%, rgba(246,195,61,.10), transparent 70%)}

#bt-close{position:absolute;top:18px;right:20px;width:46px;height:46px;border-radius:50%;
  border:1px solid rgba(247,243,234,.22);background:rgba(20,24,46,.7);color:#f7f3ea;font-size:20px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:.15s;z-index:3;touch-action:manipulation}
#bt-close:hover{background:rgba(40,48,87,.9);transform:scale(1.05)}
#bt-tag{position:absolute;top:18px;left:22px;display:flex;align-items:center;z-index:2}
#bt-tag img{height:54px;width:auto;display:block}
/* small phones: match the homepage header logo (which drops to 44px at <=400px) */
@media (max-width:400px){#bt-tag img{height:44px}}
/* iPadOS draws its own system ✕ in the top-left while an element is fullscreen — slide the
   logo right so it isn't covered. Coarse-pointer only; desktop fullscreen has no permanent ✕.
   (Two rules on purpose: an unrecognized pseudo-class would invalidate a combined selector list.) */
@media (pointer:coarse){
  #bt-timer:fullscreen #bt-tag{left:86px}
}
@media (pointer:coarse){
  #bt-timer:-webkit-full-screen #bt-tag{left:86px}
}

/* icon buttons (restart / pick-time / fullscreen / sound / motion / share): one fixed square
   size on every device — width comes from the box, not from glyph/padding math, so the row
   never renders mixed sizes across desktop / iPad / phone */
#bt-ctrls .bt-icon{width:46px;min-width:46px;flex:0 0 46px;padding-left:0;padding-right:0;justify-content:center}
#bt-ctrls .bt-icon .ic{display:flex}
#bt-ctrls .bt-icon svg{width:20px;height:20px;display:block}
#bt-ctrls #bt-pick svg{width:21px;height:21px}
#bt-ctrls .bt-icon.on{background:#f6c33d;color:#2a1c05;border-color:#ffd87a}
#bt-ctrls #bt-sound{position:relative}

/* first-run sound hint: a one-time gold ring + bubble pointing at the sound toggle.
   While it shows, a dim+blur backdrop covers the takeover so the hint stands out; the
   sound button is raised above it. (Backdrop only exists for the ~7s the hint is up.) */
.bt-sound-backdrop{position:absolute;inset:0;z-index:50;background:rgba(8,12,30,.5);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);pointer-events:none;animation:bt-backfade .22s ease}
@keyframes bt-backfade{from{opacity:0}to{opacity:1}}
#bt-ctrls #bt-sound.bt-hintpulse{z-index:60}   /* lift the sound button (and its tip) above the blur backdrop */
#bt-ctrls #bt-sound.bt-hintpulse{box-shadow:0 0 0 3px rgba(246,195,61,.55);animation:bt-soundpulse 1.5s ease-in-out infinite}
@keyframes bt-soundpulse{0%,100%{box-shadow:0 0 0 3px rgba(246,195,61,.5)}50%{box-shadow:0 0 0 9px rgba(246,195,61,0)}}
.bt-reduced #bt-ctrls #bt-sound.bt-hintpulse{animation:none}   /* keep the static ring, drop the pulse */
.bt-soundtip{position:absolute;bottom:calc(100% + 12px);left:50%;transform:translateX(-50%);
  background:#f6c33d;color:#2a1c05;font-weight:800;font-size:13px;line-height:1.25;white-space:nowrap;
  padding:8px 12px;border-radius:10px;pointer-events:none;box-shadow:0 10px 28px rgba(0,0,0,.45);z-index:90012}
.bt-soundtip::after{content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%);border:7px solid transparent;border-top-color:#f6c33d}

/* share-this-timer popover (fixed-positioned in JS from the share button's rect) */
#bt-sharemenu{position:fixed;z-index:90011;display:none;flex-direction:column;min-width:190px;padding:8px;gap:2px;
  background:rgba(15,18,38,.98);border:1px solid rgba(247,243,234,.16);border-radius:14px;box-shadow:0 18px 50px rgba(0,0,0,.55)}
#bt-sharemenu.open{display:flex}
#bt-sharemenu .bt-shopt{display:flex;align-items:center;gap:11px;width:100%;justify-content:flex-start;text-align:left;
  font-family:inherit;font-weight:700;font-size:14px;color:#f7f3ea;background:transparent;border:0;border-radius:10px;
  padding:10px 12px;cursor:pointer;text-decoration:none;min-height:42px;touch-action:manipulation}
#bt-sharemenu .bt-shopt:hover{background:rgba(58,68,116,.92)}
#bt-sharemenu .bt-shopt svg{width:18px;height:18px;display:block;flex:0 0 auto}
#bt-sharemenu .bt-shopt[hidden]{display:none}

#bt-arena{position:relative;width:min(94vmin,792px);height:min(94vmin,792px)}
#bt-arena .bt-mount{position:absolute;inset:0}
#bt-fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:6;overflow:visible}
#bt-arena.boom{animation:bt-arenashake .5s ease}
@keyframes bt-arenashake{0%,100%{transform:translate(0,0)}20%{transform:translate(-5px,3px)}40%{transform:translate(5px,-3px)}60%{transform:translate(-3px,-3px)}80%{transform:translate(3px,3px)}}

/* big projector readout under the bomb (hidden — the time is shown on the bomb's LED) */
#bt-big{display:none;font-variant-numeric:tabular-nums;font-weight:800;letter-spacing:.04em;
  font-size:clamp(40px,9vmin,104px);line-height:1;margin-top:.1em;color:#f7f3ea;
  text-shadow:0 2px 30px rgba(0,0,0,.4);font-family:var(--bt-ui,"Hanken Grotesk",system-ui,sans-serif)}
#bt-big.warn{color:#ffd23d}
#bt-big.danger{color:#ff6a52}

/* controls */
/* solid translucent bar (no backdrop-filter — the live backdrop blur was the single most expensive
   effect on the takeover, and a moving bomb sits right behind it; the solid bar reads ~identical) */
#bt-ctrls{display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:center;margin-top:22px;
  background:rgba(15,18,38,.92);border:1px solid rgba(247,243,234,.14);border-radius:18px;padding:12px 14px}
/* touch-action:manipulation = no iOS double-tap-zoom wait on these buttons. Without it, taps on
   the toggles get eaten while the bomb is animating (Safari holds the click hostage to tap-vs-pan
   disambiguation against the takeover's pan-y root) */
#bt-ctrls button{font-family:inherit;font-weight:700;font-size:14px;color:#f7f3ea;background:rgba(40,48,87,.7);
  border:1px solid rgba(247,243,234,.16);border-radius:12px;padding:11px 16px;cursor:pointer;transition:.14s;min-height:46px;display:flex;align-items:center;gap:8px;touch-action:manipulation}
#bt-ctrls button:hover{background:rgba(58,68,116,.9);border-color:rgba(247,243,234,.3)}
#bt-ctrls #bt-play{min-width:128px;justify-content:center;background:linear-gradient(180deg,#ffd75e,#f3aa1e);color:#2a1c05;border-color:#ffd87a;font-weight:800}
#bt-ctrls #bt-play:hover{filter:brightness(1.05)}
#bt-ctrls #bt-play .bt-pp{width:16px;height:16px;display:block;flex:0 0 auto}
#bt-ctrls .bt-sep{width:1px;height:30px;background:rgba(247,243,234,.16);margin:0 2px}
#bt-ctrls .bt-step{min-width:64px;justify-content:center;font-size:15px;font-weight:800;letter-spacing:.01em}
#bt-ctrls #bt-pick{min-width:46px;justify-content:center}
#bt-ctrls #bt-pick svg{width:21px;height:21px;display:block}

/* duration chips (ready state) */
#bt-presets{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:18px}
#bt-presets button{font-family:inherit;font-weight:700;font-size:14px;color:#cfd6f5;background:rgba(40,48,87,.5);
  border:1px solid rgba(247,243,234,.14);border-radius:999px;padding:9px 16px;cursor:pointer;transition:.14s;min-height:42px;touch-action:manipulation}
#bt-presets button:hover{background:rgba(58,68,116,.8);color:#fff}
#bt-presets button.on{background:#f6c33d;color:#2a1c05;border-color:#ffd87a}
#bt-presets .bt-custombtn{background:rgba(40,48,87,.7);border-style:dashed}

/* hot-potato difficulty selector (hidden mode only) */
#bt-difficulty{display:none;gap:8px;flex-wrap:wrap;justify-content:center;align-items:center;margin-top:18px}
#bt-difficulty .bt-difflabel{font-size:14px;font-weight:700;color:#cfd6f5;margin-right:4px}
#bt-difficulty button{display:flex;flex-direction:column;align-items:center;gap:1px;line-height:1.15;font-family:inherit;color:#cfd6f5;background:rgba(40,48,87,.5);
  border:1px solid rgba(247,243,234,.14);border-radius:14px;padding:8px 20px;cursor:pointer;transition:.14s;min-height:46px;touch-action:manipulation}
#bt-difficulty button .d-name{font-weight:800;font-size:15px}
#bt-difficulty button .d-sec{font-weight:600;font-size:11.5px;opacity:.72}
#bt-difficulty button:hover{background:rgba(58,68,116,.8);color:#fff}
#bt-difficulty button.on{background:#f6c33d;color:#2a1c05;border-color:#ffd87a}
#bt-difficulty button.on .d-sec{opacity:.85}

/* custom time input */
#bt-custom{display:none;margin-top:12px;gap:10px;align-items:center;justify-content:center;
  background:rgba(15,18,38,.92);border:1px solid rgba(247,243,234,.14);border-radius:14px;padding:10px 14px}
#bt-custom.open{display:flex}
#bt-custom label{font-size:14px;font-weight:700;color:#cfd6f5;display:flex;gap:9px;align-items:center}
#bt-custom input{width:72px;font-family:inherit;font-size:16px;font-weight:800;text-align:center;color:#f7f3ea;
  background:rgba(40,48,87,.7);border:1px solid rgba(247,243,234,.22);border-radius:10px;padding:9px 8px}
@media (max-width:540px){ #bt-custom{flex-wrap:wrap} }
#bt-custom #bt-custom-set{font-family:inherit;font-weight:800;font-size:14px;color:#2a1c05;
  background:linear-gradient(180deg,#ffd75e,#f3aa1e);border:1px solid #ffd87a;border-radius:10px;padding:10px 16px;cursor:pointer;min-height:42px;touch-action:manipulation}
#bt-custom #bt-custom-set:hover{filter:brightness(1.05)}

#bt-hint{margin-top:14px;font-size:13px;color:#aeb6dd;opacity:.85}
#bt-hint kbd{background:rgba(40,48,87,.8);border:1px solid rgba(247,243,234,.18);border-radius:5px;padding:1px 7px;font-family:inherit;font-size:12px}
/* touch devices (phones + tablets) have no keyboard — the Space/Esc hint is noise there */
@media (pointer:coarse){ #bt-hint{display:none} }
/* tablets (coarse pointer above the phone breakpoint): anchor the control bar to the bottom of
   the screen like phones do, instead of floating the whole stack mid-screen with dead space below */
@media (pointer:coarse) and (min-width:541px){
  #bt-timer{justify-content:flex-start;padding:74px 16px calc(18px + env(safe-area-inset-bottom, 0px));overflow-y:auto}
  #bt-arena{width:min(88vmin,58vh);height:min(88vmin,58vh);margin:auto 0}
}
/* native fullscreen on a touch device: lock scrolling completely. iPadOS Safari can freeze the
   whole page when a touch scroll / rubber-band inside a fullscreen element fights the system
   "swipe down to exit" gesture — with no pan possible there is nothing to fight. Taps still work
   (touch-action governs scroll/zoom, not clicks). Everything fits: the arena is vh-capped here.
   (Two rules on purpose: an unrecognized pseudo-class would invalidate a combined selector list.) */
@media (pointer:coarse){
  #bt-timer:fullscreen{overflow:hidden;touch-action:none;overscroll-behavior:none}
}
@media (pointer:coarse){
  #bt-timer:-webkit-full-screen{overflow:hidden;touch-action:none;overscroll-behavior:none}
}

/* finished panel */
#bt-done{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;z-index:8}
#bt-done.show{display:flex}
/* persistent "time's up" cue — readable from the back of the room, survives long after the explosion fades */
#bt-done .bt-doneword{font-family:'Baloo 2','Hanken Grotesk',sans-serif;font-weight:800;font-size:clamp(34px,7vw,64px);line-height:1.1;color:#ffd75e;text-shadow:0 3px 0 rgba(0,0,0,.28),0 10px 36px rgba(0,0,0,.45);margin-bottom:18px;text-align:center}
#bt-done .bt-donerow{display:flex;gap:12px}
/* one-time unlock nudge under the completion buttons */
#bt-done .bt-upsell{margin-top:18px;max-width:460px;text-align:center;font-size:14.5px;line-height:1.55;color:#cfd6f5}
#bt-done .bt-upsell a{color:#ffd75e;font-weight:800;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
#bt-done .bt-upsell .sub{display:block;margin-top:5px;font-size:13px;opacity:.8}
#bt-done button{font-family:inherit;font-weight:800;font-size:16px;border-radius:14px;padding:13px 22px;cursor:pointer;min-height:50px;border:1px solid transparent;touch-action:manipulation}
#bt-done #bt-replay{background:linear-gradient(180deg,#ffd75e,#f3aa1e);color:#2a1c05;border-color:#ffd87a}
#bt-done #bt-back{background:rgba(40,48,87,.8);color:#f7f3ea;border-color:rgba(247,243,234,.2)}

@media (max-width:540px){
  /* start below the logo and allow scroll so tall content is never clipped.
     bottom padding clears the iOS home-indicator / collapsed-toolbar zone — taps that land
     flush against the screen's bottom edge get swallowed by Safari's toolbar reveal */
  #bt-timer{justify-content:flex-start;padding:64px 10px calc(16px + env(safe-area-inset-bottom, 0px));overflow-y:auto}
  /* smaller bomb so the controls always fit, and far cheaper for mobile GPUs to repaint */
  /* margin:auto 0 centers the bomb in the upper space and pushes the controls + hint to the bottom */
  #bt-arena{width:min(82vmin,44vh);height:min(82vmin,44vh);margin:auto 0}
  #bt-ctrls{gap:8px;padding:10px;flex-wrap:wrap}
  #bt-ctrls button{padding:10px 12px;font-size:13px}
  /* force a clean 2-line split: only −30s / play-pause / +30s on top; restart, pick-time, sound, motion drop to the second line */
  #bt-ctrls .bt-sep{display:none}
  #bt-ctrls #bt-plus + .bt-sep{display:block;flex-basis:100%;width:100%;height:0;min-width:0;background:transparent;margin:0;padding:0}
}
/* short / landscape viewports: keep the bomb from pushing the controls off-screen */
@media (max-height:600px){
  #bt-timer{justify-content:flex-start;padding:70px 10px 20px;overflow-y:auto}
  #bt-arena{width:min(78vmin,70vh);height:min(78vmin,70vh)}
}

/* reduced-motion option (the boom ending stays at full default) */
.bt-reduced .bt-glow{display:none}

/* hot-potato hidden mode: no visible clock, no presets or steppers to peek the time */
.bt-hidden #bt-presets,.bt-hidden #bt-minus,.bt-hidden #bt-plus,.bt-hidden #bt-pick,.bt-hidden #bt-custom{display:none}
.bt-hidden #bt-difficulty{display:flex}