/* How To Play - screenshot slideshow (Stage 1 "Boot Camp", Stage 2 "H.U.B. Unlocked") + the live Stage 2 H.U.B. tour (.hts-tour).
   Ported from _mockups/howto-screens-20261001/v2/howto-mockup.html. Everything is scoped to .cbd-hts.
   Driven by js/howToSlides.js. Images: assets/howto/desktop|phone/*.webp (loaded one slide at a time). */
.cbd-hts{
  --hts-green:#00ff00; --hts-mint:#6dff8f; --hts-cyan:#00ffff; --hts-sky:#00ddff; --hts-teal:#00ffc8;
  --hts-gold:#ffd24d; --hts-orange:#ff9900; --hts-red:#ff4d4d;
  --hts-panel:linear-gradient(160deg, rgba(0,18,6,.97), rgba(0,6,2,.98));
  --hts-font:'Courier Prime', 'Courier New', monospace;
  position:fixed; inset:0; z-index:2147480000; color:#c8ffd0; font-family:var(--hts-font);
  background:radial-gradient(ellipse at 50% 40%, rgba(2,26,10,.97) 0%, rgba(0,0,0,.98) 70%);
  opacity:0; transition:opacity .28s ease; -webkit-tap-highlight-color:transparent; overflow:hidden;
  user-select:none; -webkit-user-select:none; touch-action:manipulation;
}
.cbd-hts.hts-on{opacity:1}
.cbd-hts *, .cbd-hts *::before, .cbd-hts *::after{box-sizing:border-box}
.cbd-hts::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.18;
  background-image:linear-gradient(rgba(0,255,0,.18) 1px,transparent 1px),linear-gradient(90deg,rgba(0,255,0,.18) 1px,transparent 1px);background-size:40px 40px}
.cbd-hts button{all:unset;box-sizing:border-box;cursor:pointer}
.cbd-hts .hts-wrap{position:absolute;inset:0;display:grid;grid-template-rows:auto 1fr auto auto;padding:max(10px,env(safe-area-inset-top)) 14px max(12px,env(safe-area-inset-bottom));gap:10px}
.cbd-hts .hts-head{display:flex;align-items:center;gap:10px;min-height:36px}
.cbd-hts .hts-title{font-weight:700;letter-spacing:3px;font-size:clamp(13px,1.6vw,18px);color:var(--hts-green);text-shadow:0 0 8px rgba(0,255,0,.7);white-space:nowrap}
.cbd-hts .hts-rec{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--hts-red);box-shadow:0 0 8px var(--hts-red);margin-right:8px;animation:htsRec 1.2s steps(2) infinite;vertical-align:1px}
@keyframes htsRec{50%{opacity:.15}}
.cbd-hts .hts-meter{margin-left:auto;font-size:11px;letter-spacing:2px;color:var(--hts-teal);border:1px solid rgba(0,255,200,.4);border-radius:4px;padding:3px 8px;white-space:nowrap}
.cbd-hts .hts-btn{white-space:nowrap;font-family:var(--hts-font);font-weight:700;letter-spacing:1.5px;text-transform:uppercase;border-radius:6px;border:1px solid rgba(0,255,0,.55);background:rgba(0,30,10,.85);color:var(--hts-mint);padding:9px 16px;font-size:13px;line-height:1.2;transition:transform .12s,box-shadow .2s,background .2s}
.cbd-hts .hts-btn:hover{box-shadow:0 0 12px rgba(0,255,0,.45);background:rgba(0,50,16,.95)}
.cbd-hts .hts-btn:active{transform:scale(.96)}
.cbd-hts .hts-btn:focus-visible{outline:2px solid var(--hts-cyan);outline-offset:2px}
.cbd-hts .hts-btn[disabled]{opacity:.3;pointer-events:none}
.cbd-hts .hts-skip{border-color:rgba(255,77,77,.6);color:var(--hts-red);padding:6px 12px;font-size:11px}
.cbd-hts .hts-next{background:var(--hts-cyan);color:#001a1a;border-color:var(--hts-cyan);box-shadow:0 0 14px rgba(0,255,255,.45)}
.cbd-hts .hts-next:hover{background:#7fffff}
.cbd-hts .hts-stage{position:relative;min-height:0;display:flex;align-items:center;justify-content:center}
.cbd-hts .hts-shot{position:relative;border-radius:10px;overflow:hidden;border:1px solid rgba(0,255,0,.45);box-shadow:0 0 0 1px rgba(0,0,0,.6),0 0 26px rgba(0,255,0,.18),0 10px 40px rgba(0,0,0,.8);background:#000}
/* ONE wrapper per frame (.hts-layer = image + its rings). The Ken Burns transform runs on the wrapper,
   so rings positioned in % of the image stay locked to the pixels on every frame. */
.cbd-hts .hts-layer{position:absolute;opacity:0;transition:opacity .45s ease;transform-origin:50% 50%;will-change:transform}
.cbd-hts .hts-layer.on{opacity:1;z-index:1}
.cbd-hts .hts-shot.kb .hts-layer.on{animation:htsKb 9s ease-out both}
@keyframes htsKb{from{transform:scale(1.035)}to{transform:scale(1)}}
.cbd-hts .hts-layer img{position:absolute;inset:0;width:100%;height:100%;max-width:none;display:block;margin:0;padding:0;border:0}
.cbd-hts .hts-shot::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.16) 0 1px,transparent 1px 3px);mix-blend-mode:multiply}
.cbd-hts .hts-shot::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;box-shadow:inset 0 0 60px rgba(0,0,0,.55)}
.cbd-hts .hts-ring{position:absolute;z-index:3;border:2px solid var(--c);box-shadow:0 0 10px var(--c),inset 0 0 8px var(--c);animation:htsRingIn .5s cubic-bezier(.2,1.5,.4,1) .25s both,htsRingPulse 1.8s ease-in-out .75s infinite;pointer-events:none}
.cbd-hts .hts-ring span{position:absolute;left:50%;bottom:100%;transform:translateX(-50%);margin-bottom:5px;font-size:11px;font-weight:700;letter-spacing:1px;color:var(--c);text-shadow:0 0 6px #000,0 0 6px #000;white-space:nowrap;background:rgba(0,0,0,.6);padding:1px 6px;border-radius:3px}
.cbd-hts .hts-ring.guide{border-width:3px}
.cbd-hts .hts-ring.guide::after{content:"";position:absolute;inset:-3px;border-radius:inherit;border:3px solid var(--c);animation:htsRipple 1.4s ease-out 1s infinite;pointer-events:none}
.cbd-hts .hts-ring.guide span{font-size:12px;background:var(--c);color:#001208;text-shadow:none}
@keyframes htsRingIn{from{opacity:0;transform:scale(1.4)}to{opacity:1;transform:scale(1)}}
@keyframes htsRingPulse{50%{box-shadow:0 0 18px var(--c),inset 0 0 12px var(--c);border-color:#fff}}
@keyframes htsRipple{from{opacity:.9;transform:scale(1)}to{opacity:0;transform:scale(1.35)}}
.cbd-hts .hts-coach{display:flex;align-items:flex-end;gap:12px;max-width:980px;width:100%;margin:0 auto;min-height:118px}
.cbd-hts .hts-bot{flex:0 0 auto;width:92px;height:104px;filter:drop-shadow(0 0 10px rgba(0,255,0,.45));animation:htsBob 2.6s ease-in-out infinite;cursor:pointer}
@keyframes htsBob{50%{transform:translateY(-5px)}}
.cbd-hts .hts-bot .eye{animation:htsBlink 4.2s infinite;transform-origin:center;transform-box:fill-box}
@keyframes htsBlink{0%,46%,50%,100%{transform:scaleY(1)}48%{transform:scaleY(.1)}}
.cbd-hts .hts-bot.talk .mouth-open{animation:htsTalk .22s steps(2) infinite}
@keyframes htsTalk{50%{opacity:0}}
.cbd-hts .hts-bot .led{animation:htsLed 1.6s ease-in-out infinite}
@keyframes htsLed{50%{opacity:.35}}
.cbd-hts .hts-bubble{position:relative;flex:1;min-width:0;background:var(--hts-panel);border:1px solid rgba(0,255,0,.6);border-radius:16px;padding:12px 16px 13px;box-shadow:0 0 18px rgba(0,255,0,.3),0 0 40px rgba(0,0,0,.6);transform-origin:0 100%;animation:htsPop .35s cubic-bezier(.2,1.6,.4,1) both}
.cbd-hts .hts-bubble::before{content:"";position:absolute;left:-11px;bottom:22px;width:20px;height:20px;background:#00120a;border-left:1px solid rgba(0,255,0,.6);border-bottom:1px solid rgba(0,255,0,.6);transform:rotate(45deg);border-bottom-left-radius:5px}
@keyframes htsPop{from{transform:scale(.85);opacity:0}to{transform:scale(1);opacity:1}}
.cbd-hts .hts-bubble h2{margin:0 0 4px;padding:0;font-family:var(--hts-font);font-weight:700;font-size:clamp(15px,1.7vw,19px);letter-spacing:1.5px;color:var(--hts-cyan);text-shadow:0 0 8px rgba(0,255,255,.55);text-transform:none}
.cbd-hts .hts-bubble p{margin:0;padding:0;font-family:var(--hts-font);font-size:clamp(14px,1.55vw,17px);line-height:1.38;color:#dfffe4;min-height:2.76em}
.cbd-hts .hts-caret{display:inline-block;width:.55em;height:1em;background:var(--hts-green);vertical-align:-2px;margin-left:2px;animation:htsRec .7s steps(2) infinite}
.cbd-hts .k-tower{color:var(--hts-mint)}.cbd-hts .k-energy{color:var(--hts-gold)}.cbd-hts .k-mob{color:var(--hts-orange)}.cbd-hts .k-core{color:var(--hts-red)}.cbd-hts .k-breach{color:var(--hts-teal)}.cbd-hts .k-ui{color:var(--hts-sky)}
.cbd-hts .hts-nav{display:flex;align-items:center;justify-content:center;gap:12px}
.cbd-hts .hts-dots{display:flex;gap:7px;flex-wrap:wrap;justify-content:center;max-width:60vw}
.cbd-hts .hts-dot{width:10px;height:10px;border-radius:50%;border:1px solid rgba(0,255,0,.6);background:transparent;padding:0;transition:all .2s}
.cbd-hts .hts-dot.on{background:var(--hts-green);box-shadow:0 0 8px var(--hts-green);transform:scale(1.25)}
.cbd-hts .hts-dot.seen{background:rgba(0,255,0,.3)}
.cbd-hts .hts-hint{position:absolute;left:50%;bottom:2px;transform:translateX(-50%);font-size:10px;letter-spacing:1px;color:rgba(200,255,208,.35);pointer-events:none;white-space:nowrap}
/* Real H.U.B. guide ring (Stage 2 finish): tracks the live Enemy HP Reduction buy button. */
.hts-guide-ring{position:fixed;z-index:2147480001;pointer-events:none;border:3px solid #00ff00;border-radius:8px;box-shadow:0 0 14px #00ff00,inset 0 0 10px #00ff00;animation:htsRingPulse 1.8s ease-in-out infinite;--c:#00ff00;display:none}
.hts-guide-ring::after{content:"";position:absolute;inset:-3px;border-radius:inherit;border:3px solid #00ff00;animation:htsRipple 1.4s ease-out infinite}
.hts-guide-ring span{position:absolute;left:50%;bottom:100%;transform:translateX(-50%);margin-bottom:6px;font:700 12px/1.2 'Courier Prime','Courier New',monospace;letter-spacing:1px;white-space:nowrap;background:#00ff00;color:#001208;padding:2px 8px;border-radius:3px}
/* Stage 2 "Go Home" guide on the eligible Game Over screen (js/howToSlides.js startDefeatGuide). */
.hts-guide-ring.hts-defeat-ring{--c:#00ffff;border-color:#00ffff;box-shadow:0 0 14px #00ffff,inset 0 0 10px #00ffff}
.hts-guide-ring.hts-defeat-ring::after{border-color:#00ffff}
.hts-guide-ring.hts-defeat-ring span{background:#00ffff;color:#001214}
/* Stage 2 H.U.B. tour (js/howToSlides.js startHubTour): a floating coach over the REAL H.U.B. It never blocks
   the modal: only the bubble takes pointer events, so every card stays buyable during the tour. */
.hts-tour{--c:#00ffff;position:fixed;left:50%;bottom:max(14px,env(safe-area-inset-bottom));transform:translateX(-50%);z-index:2147480002;display:flex;align-items:flex-end;gap:7px;width:min(500px,calc(100vw - 24px));pointer-events:none;font-family:'Courier Prime','Courier New',monospace;color:#c8ffd0;opacity:0;transition:opacity .25s ease}
.hts-tour.hts-on{opacity:1}
.hts-tour.hts-tour-top{bottom:auto;top:max(14px,env(safe-area-inset-top))}
.hts-tour *{box-sizing:border-box}
/* 2026-10-05 hubtour-clean: mascot ~65% (64x72 -> 42x47), slow 2px drift instead of the bob, compact bubble + type, no overshoot pop. */
.hts-tour .hts-bot{flex:0 0 auto;width:42px;height:47px;filter:drop-shadow(0 0 6px rgba(0,255,0,.35));animation:htsTourDrift 4.2s ease-in-out infinite;pointer-events:auto}
@keyframes htsTourDrift{50%{transform:translateY(-2px)}}
.hts-tour .hts-bot .eye{animation:htsBlink 4.2s infinite;transform-origin:center;transform-box:fill-box}
.hts-tour .hts-bot .led{animation:htsLed 1.6s ease-in-out infinite}
.hts-tour-bubble{position:relative;flex:1;min-width:0;pointer-events:auto;background:linear-gradient(160deg,rgba(0,16,8,.97),rgba(0,5,3,.98));border:1px solid rgba(0,255,140,.5);border-left:2px solid #00ffff;border-radius:6px;padding:8px 12px 8px;box-shadow:0 0 12px rgba(0,255,120,.18),0 6px 26px rgba(0,0,0,.7)}
.hts-tour-bubble::before{content:"";position:absolute;left:-7px;bottom:14px;width:11px;height:11px;background:#00100a;border-left:2px solid #00ffff;border-bottom:1px solid rgba(0,255,140,.5);transform:rotate(45deg);border-bottom-left-radius:2px}
.hts-tour.hts-pop .hts-tour-bubble{animation:htsTourIn .18s ease-out both}
@keyframes htsTourIn{from{opacity:.35;transform:translateY(3px)}to{opacity:1;transform:none}}
.hts-tour-head{display:flex;align-items:baseline;gap:8px;padding-bottom:4px;border-bottom:1px solid rgba(0,255,200,.14)}
.hts-tour-title{margin:0;padding:0;font:700 12px/1.2 'Courier Prime','Courier New',monospace;letter-spacing:1.6px;color:#00ffff;text-shadow:0 0 4px rgba(0,255,255,.35);text-transform:uppercase}
.hts-tour-meter{margin-left:auto;font-size:10px;letter-spacing:1px;color:rgba(0,255,200,.7);white-space:nowrap;font-variant-numeric:tabular-nums}
.hts-tour-text{margin:6px 0 7px;padding:0;font-size:13px;line-height:1.4;color:#d6f5dc}
.hts-tour .k-tower{color:#6dff8f}.hts-tour .k-energy{color:#ffd24d}.hts-tour .k-mob{color:#ff9900}.hts-tour .k-core{color:#ff4d4d}.hts-tour .k-breach{color:#00ffc8}.hts-tour .k-ui{color:#00ddff}
.hts-tour-nav{display:flex;gap:6px;align-items:center}
.hts-tour .hts-btn{all:unset;box-sizing:border-box;cursor:pointer;white-space:nowrap;font:700 11px/1.2 'Courier Prime','Courier New',monospace;letter-spacing:1px;text-transform:uppercase;border-radius:4px;border:1px solid rgba(0,255,0,.5);background:rgba(0,30,10,.85);color:#6dff8f;padding:5px 12px;transition:box-shadow .2s,background .2s}
.hts-tour .hts-btn:hover{box-shadow:0 0 8px rgba(0,255,0,.35);background:rgba(0,50,16,.95)}
.hts-tour .hts-btn:active{background:rgba(0,70,24,.95)}
.hts-tour .hts-btn:focus-visible{outline:2px solid #00ffff;outline-offset:2px}
.hts-tour .hts-btn[disabled]{opacity:.3;pointer-events:none}
.hts-tour .hts-btn[hidden]{display:none}
.hts-tour .hts-tour-next{background:#00ffff;color:#001a1a;border-color:#00ffff;box-shadow:0 0 8px rgba(0,255,255,.3)}
.hts-tour .hts-tour-next:hover{background:#7fffff;color:#001a1a}
.hts-tour .hts-tour-skip{margin-left:auto;border-color:rgba(255,77,77,.45);background:transparent;color:#ff6b6b;padding:4px 10px;font-size:10px}
.hts-tour.hts-tour-cheer .hts-tour-bubble{border-color:rgba(255,210,77,.6);border-left-color:#ffd24d;box-shadow:0 0 12px rgba(255,210,77,.25),0 6px 26px rgba(0,0,0,.7)}
.hts-tour.hts-tour-cheer .hts-tour-bubble::before{border-left-color:#ffd24d;border-bottom-color:rgba(255,210,77,.6)}
.hts-tour.hts-tour-cheer .hts-tour-title{color:#ffd24d;text-shadow:0 0 4px rgba(255,210,77,.4)}
.hts-guide-ring.hts-tour-ring{--c:#00ffff;border-color:#00ffff;box-shadow:0 0 14px #00ffff,inset 0 0 10px #00ffff;z-index:2147480001}
.hts-guide-ring.hts-tour-ring::after{border-color:#00ffff}
.hts-guide-ring.hts-tour-ring span{background:#00ffff;color:#001214}
.hts-skip-guide{display:block;margin:12px auto 0;padding:4px 8px;background:none;border:0;color:rgba(160,255,230,.7);font:700 12px/1.2 'Courier Prime','Courier New',monospace;letter-spacing:1px;text-decoration:underline;text-underline-offset:3px;cursor:pointer;box-shadow:none}
.hts-skip-guide:hover,.hts-skip-guide:focus-visible{color:#00ffff;outline:1px dashed rgba(0,255,255,.6);outline-offset:2px}

/* Phone / portrait: same breakpoint the game uses in CBDstyles.css: (max-width: 640px), (orientation: portrait).
   js/howToSlides.js picks the phone shot set with this exact query. */
@media (max-width: 640px), (orientation: portrait) {
  .cbd-hts .hts-wrap{padding-left:8px;padding-right:8px;gap:8px}
  .cbd-hts .hts-title{letter-spacing:2px}
  .cbd-hts .hts-coach{min-height:0;gap:6px}
  .cbd-hts .hts-bot{width:62px;height:70px}
  .cbd-hts .hts-bubble{padding:10px 12px 11px;border-radius:14px}
  .cbd-hts .hts-bubble::before{left:-9px;bottom:16px;width:16px;height:16px}
  .cbd-hts .hts-ring span, .cbd-hts .hts-ring.guide span{font-size:10px}
  .cbd-hts .hts-btn{padding:9px 12px;font-size:12px}
  .cbd-hts .hts-dots{gap:3px;max-width:none;flex-wrap:nowrap}
  .cbd-hts .hts-dot{width:6px;height:6px}
  .cbd-hts .hts-nav{gap:8px}
  .cbd-hts .hts-hint{display:none}
  .cbd-hts .hts-skip{padding:5px 9px;font-size:10px}
  .cbd-hts .hts-meter{font-size:10px;padding:2px 6px;letter-spacing:1px}
  .hts-guide-ring.hts-defeat-ring span{font-size:10px;bottom:auto;top:100%;margin:5px 0 0}
  .hts-skip-guide{margin-top:30px;font-size:11px}
  .hts-tour{gap:5px;width:calc(100vw - 16px)}
  .hts-tour .hts-bot{width:30px;height:34px}
  .hts-tour-bubble{padding:7px 10px 7px;border-radius:6px}
  .hts-tour-bubble::before{left:-6px;bottom:10px;width:9px;height:9px}
  .hts-tour-title{font-size:11px;letter-spacing:1.2px}
  .hts-tour-meter{font-size:9px}
  .hts-tour-text{font-size:12.5px;line-height:1.38;margin:5px 0 6px}
  .hts-tour .hts-btn{padding:7px 12px;font-size:11px}
  .hts-tour .hts-tour-skip{padding:6px 9px;font-size:10px}
  .hts-guide-ring.hts-tour-ring span{font-size:10px}
}
/* Short landscape phones: same query as css/mobile-hud.css. */
@media (max-width: 920px) and (max-height: 540px) and (orientation: landscape) {
  .cbd-hts .hts-coach{min-height:0}
  .cbd-hts .hts-bot{width:60px;height:68px}
  .cbd-hts .hts-bubble p{min-height:0}
  .cbd-hts .hts-hint{display:none}
  .hts-tour{width:min(460px,calc(100vw - 16px));gap:5px}
  .hts-tour .hts-bot{width:30px;height:34px}
  .hts-tour-bubble{padding:6px 10px 6px}
  .hts-tour-bubble::before{left:-6px;bottom:10px;width:9px;height:9px}
  .hts-tour-title{font-size:11px}
  .hts-tour-text{font-size:12px;margin:4px 0 5px}
  .hts-tour .hts-btn{padding:5px 11px;font-size:11px}
}
@media (prefers-reduced-motion: reduce) {
  .cbd-hts, .cbd-hts *, .hts-guide-ring, .hts-guide-ring::after, .hts-tour, .hts-tour *{animation:none!important;transition:none!important}
  .cbd-hts .hts-ring{opacity:1}
}