@font-face{font-family:'Fredoka';font-weight:300 700;font-style:normal;font-display:block;src:url(fonts/f1.woff2) format('woff2')}
@font-face{font-family:'Nunito Sans';font-weight:600;font-style:normal;font-display:block;src:url(fonts/f2.woff) format('woff')}
@font-face{font-family:'Nunito Sans';font-weight:800;font-style:normal;font-display:block;src:url(fonts/f3.woff) format('woff')}
@font-face{font-family:'HFT Letters';font-weight:100 900;font-style:normal;font-display:block;src:url(fonts/f4.woff) format('woff')}
/* HFT Games engine — shared UI. Brand tokens match the havefunteaching.com homepage. */
:root{
  --hft-navy:#1B437D; --hft-pink:#D6337B; --hft-yellow:#FBB915; --hft-cream:#FBF5EC;
  --hft-ink:#231F20; --hft-green:#34B26A; --hft-sky:#0758A1; --hft-white:#fff;
  --hft-head:"Fredoka","HFT Letters",system-ui,-apple-system,"Segoe UI",sans-serif;
  --hft-body:"Nunito Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  /* per-game theme (game.json "theme", engine applyTheme) — these are the brand defaults */
  --th-ui:#fff; --th-ui-fg:#1B437D; --th-ui-lip:#c9d3e3; --th-ui-border:transparent; --th-radius:50%;
  --th-accent:#D6337B; --th-accent-fg:#fff; --th-accent-lip:#a4235c; --th-pill:#1B437D; --th-pill-fg:#fff;
  --th-prog-a:#FBB915; --th-prog-b:#D6337B; --th-prog-track:rgba(255,255,255,.85);
  --th-card:rgba(255,255,255,.94); --th-card-fg:#1B437D; --th-card-border:transparent; --th-card-border-w:0px;
  --th-card-head:#1B437D; --th-btn:#D6337B; --th-btn-lip:#a4235c; --th-card-dots:rgba(27,67,125,.06); --th-font:"Fredoka","HFT Letters",system-ui,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;width:100%;height:100%;overflow:hidden;background:var(--hft-cream);
  -webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent;overscroll-behavior:none}
body{font-family:var(--hft-body);color:var(--hft-ink);user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
#hft-root{position:fixed;top:0;right:0;bottom:0;left:0;inset:0;overflow:hidden;touch-action:none}
#hft-canvas{position:absolute;top:0;right:0;bottom:0;left:0;inset:0;width:100%;height:100%;display:block;touch-action:none}
.hft-layer{position:absolute;top:0;right:0;bottom:0;left:0;inset:0;display:flex;align-items:center;justify-content:center;
  padding:max(16px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}
.hft-hidden{display:none!important}
button{font:inherit;cursor:pointer;border:0;-webkit-appearance:none;appearance:none}
.hft-btn{font-family:var(--hft-body);font-weight:800;font-size:clamp(18px,2.6vmin,26px);border-radius:999px;
  padding:.8em 1.8em;background:var(--hft-pink);color:#fff;box-shadow:0 6px 0 #a4235c,0 10px 24px rgba(27,67,125,.25);
  transition:transform .12s ease,box-shadow .12s ease;display:inline-flex;align-items:center;gap:.5em;text-decoration:none;line-height:1.1}
.hft-btn:active{transform:translateY(4px);box-shadow:0 2px 0 #a4235c,0 4px 10px rgba(27,67,125,.2)}
.hft-btn.big{font-size:clamp(24px,4.2vmin,40px);padding:.7em 2em}
.hft-btn.ghost{background:#fff;color:var(--hft-navy);box-shadow:0 5px 0 #c9d3e3,0 8px 20px rgba(27,67,125,.15);border:3px solid var(--hft-navy)}
.hft-btn.yellow{background:var(--hft-yellow);color:var(--hft-navy);box-shadow:0 6px 0 #c98f00,0 10px 24px rgba(27,67,125,.2)}
.hft-btn:focus-visible{outline:4px solid var(--hft-yellow);outline-offset:3px}

/* Title + end cards */
.hft-card{background:rgba(255,255,255,.94);border-radius:32px;padding:clamp(18px,4vmin,40px) clamp(20px,5vmin,56px);
  text-align:center;box-shadow:0 20px 60px rgba(27,67,125,.25);max-width:min(760px,94vw);max-height:92%;overflow:auto;
  display:flex;flex-direction:column;align-items:center;gap:clamp(8px,1.8vmin,18px);animation:hftPop .45s cubic-bezier(.2,1.4,.4,1)}
.hft-title{font-family:var(--hft-head);font-weight:700;color:var(--hft-navy);font-size:clamp(34px,7.5vmin,76px);line-height:1;margin:0;letter-spacing:.5px}
.hft-title .accent{color:var(--hft-pink)}
.hft-chips{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.hft-chip{font-weight:800;font-size:clamp(12px,1.8vmin,16px);padding:.35em .9em;border-radius:999px;background:var(--hft-cream);color:var(--hft-navy)}
.hft-chip.pink{background:#FDE3EE;color:#a4235c}.hft-chip.yellow{background:#FFF1C9;color:#7a5600}
.hft-funzy{height:clamp(110px,26vmin,260px);width:auto;animation:hftFloat 2.4s ease-in-out infinite;filter:drop-shadow(0 10px 10px rgba(27,67,125,.18))}
.hft-sub{font-size:clamp(16px,2.4vmin,22px);font-weight:600;margin:0;color:#3b4a63}
.hft-row{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;align-items:center}
.hft-stars{display:flex;gap:clamp(6px,1.4vmin,14px)}
.hft-star{width:clamp(48px,10vmin,96px);height:clamp(48px,10vmin,96px);opacity:.25;transform:scale(.6);transition:all .4s cubic-bezier(.2,1.6,.4,1)}
.hft-star.on{opacity:1;transform:scale(1)}
.hft-score{font-family:var(--hft-head);font-weight:700;font-size:clamp(22px,4vmin,40px);color:var(--hft-navy);margin:0}
.hft-brandline{font-size:13px;font-weight:700;color:#6b7890;display:flex;align-items:center;gap:6px}
.hft-brandline img{height:18px;width:auto}

/* HUD */
#hft-hud{position:absolute;left:0;right:0;top:0;display:flex;align-items:center;gap:10px;pointer-events:none;
  padding:max(10px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) 0 max(12px,env(safe-area-inset-left))}
.hft-ic{pointer-events:auto;width:clamp(44px,7vmin,60px);height:clamp(44px,7vmin,60px);border-radius:var(--th-radius);background:var(--th-ui);color:var(--th-ui-fg);
  border:3px solid var(--th-ui-border);
  display:flex;align-items:center;justify-content:center;box-shadow:0 4px 0 var(--th-ui-lip),0 6px 14px rgba(27,67,125,.18);flex:0 0 auto}
.hft-ic svg{width:55%;height:55%}
.hft-ic:active{transform:translateY(3px);box-shadow:0 1px 0 var(--th-ui-lip)}
#hft-prog{flex:1;height:clamp(16px,2.6vmin,24px);background:var(--th-prog-track);border:2px solid var(--th-ui-border);border-radius:999px;overflow:hidden;box-shadow:inset 0 2px 4px rgba(0,0,0,.12)}
#hft-prog i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--th-prog-a),var(--th-prog-b));border-radius:999px;transition:width .35s ease}
#hft-count{pointer-events:none;font-family:var(--th-font);font-weight:700;color:var(--th-ui-fg);background:var(--th-ui);border-radius:999px;border:3px solid var(--th-ui-border);
  padding:.25em .8em;font-size:clamp(16px,2.8vmin,26px);box-shadow:0 4px 0 var(--th-ui-lip);display:flex;align-items:center;gap:.3em}
#hft-count svg{width:1em;height:1em}
#hft-prompt{position:absolute;left:50%;transform:translateX(-50%);top:calc(max(10px,env(safe-area-inset-top)) + clamp(58px,9vmin,76px));
  background:var(--th-pill);color:var(--th-pill-fg);font-family:var(--th-font);font-weight:600;font-size:clamp(18px,3.4vmin,34px);
  padding:.31em 1.1em .39em;line-height:1.21;border-radius:999px;box-shadow:0 6px 18px rgba(27,67,125,.3);white-space:nowrap;max-width:94vw;overflow:hidden;text-overflow:ellipsis;
  pointer-events:auto;cursor:pointer;display:flex;align-items:center;gap:.4em}
#hft-prompt svg{width:1em;height:1em;flex:0 0 auto;position:relative;top:.04em}
/* Mark 2026-10-07: the directions text sat LOW in the pill — Fredoka's line box (974/-236) puts the mixed-case ink below the
 * middle; .31em top / .39em bottom centres the caps + x-height band (render_video.js centres canvas text on its cap height) */

/* Intro (download build) */
#hft-intro{background:var(--hft-cream);flex-direction:column;gap:3vmin;cursor:pointer}
#hft-intro .logo{width:min(70vw,560px);opacity:0;transform:scale(.7);animation:hftLogo 1s .25s cubic-bezier(.2,1.4,.4,1) forwards}
#hft-intro .presents{font-family:var(--hft-head);font-weight:600;font-size:clamp(18px,3.2vmin,30px);color:var(--hft-navy);opacity:0;animation:hftFade .6s 1.3s forwards}
#hft-intro .gname{font-family:var(--hft-head);font-weight:700;font-size:clamp(34px,7vmin,70px);color:var(--hft-pink);opacity:0;animation:hftPop .6s 1.9s cubic-bezier(.2,1.4,.4,1) forwards}
#hft-intro .fz{position:absolute;bottom:6vmin;height:22vmin;opacity:0;animation:hftFlyIn 1s 1.1s cubic-bezier(.2,1.2,.4,1) forwards}
#hft-intro .skip{position:absolute;bottom:max(14px,env(safe-area-inset-bottom));right:18px;font-size:14px;font-weight:700;color:#8a93a6}
#hft-intro .dot{position:absolute;border-radius:50%;opacity:.9}

/* Membership gate (web build, non-members) */
#hft-gate{background:rgba(27,67,125,.55);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);z-index:50}
.hft-gate-card{position:relative;background:var(--hft-navy);color:#fff;border-radius:32px;max-width:min(880px,96vw);max-height:94%;overflow:auto;
  display:grid;grid-template-columns:1fr auto;gap:clamp(12px,3vmin,30px);align-items:center;padding:clamp(20px,4.5vmin,48px);
  box-shadow:0 30px 80px rgba(0,0,0,.35);animation:hftPop .5s cubic-bezier(.2,1.4,.4,1)}
.hft-gate-card:before,.hft-gate-card:after{content:"";position:absolute;border-radius:50%;background:rgba(255,255,255,.07);pointer-events:none}
.hft-gate-card:before{width:220px;height:220px;right:-70px;bottom:-90px}.hft-gate-card:after{width:140px;height:140px;left:-50px;top:-60px}
.hft-eyebrow{font-weight:800;letter-spacing:.12em;font-size:clamp(11px,1.6vmin,14px);color:var(--hft-yellow);text-transform:uppercase;margin:0}
.hft-gate-card h2{font-family:var(--hft-head);font-weight:700;font-size:clamp(28px,5.4vmin,48px);line-height:1.05;margin:.2em 0 .25em}
.hft-gate-card p.lead{margin:0 0 .6em;font-size:clamp(15px,2.2vmin,19px);line-height:1.45;color:#e8eef8}
.hft-checks{list-style:none;padding:0;margin:0 0 1em;display:grid;gap:.45em}
.hft-checks li{display:flex;gap:.6em;align-items:center;font-weight:700;font-size:clamp(14px,2vmin,17px)}
.hft-checks li:before{content:"✓";flex:0 0 auto;width:1.4em;height:1.4em;border-radius:50%;background:var(--hft-yellow);color:var(--hft-navy);
  font-weight:900;display:flex;align-items:center;justify-content:center;font-size:.85em}
.hft-gate-cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.hft-gate-cta .fine{font-size:13px;color:#c9d6ea;width:100%}
.hft-gate-links{margin-top:.9em;font-size:clamp(13px,1.9vmin,15px);color:#dbe5f3;display:flex;gap:1.2em;flex-wrap:wrap}
.hft-gate-links a{color:var(--hft-yellow);font-weight:800;text-decoration:none}
.hft-gate-fz{height:clamp(140px,34vmin,300px);animation:hftFloat 2.6s ease-in-out infinite;filter:drop-shadow(0 16px 16px rgba(0,0,0,.25))}
.hft-price{display:inline-block;background:var(--hft-yellow);color:var(--hft-navy);font-weight:800;border-radius:999px;padding:.3em .9em;font-size:14px;margin-bottom:.6em}
@media (max-aspect-ratio:1/1){.hft-gate-card{grid-template-columns:1fr;text-align:left}.hft-gate-fz{display:none}}

/* Pause */
#hft-pause{background:rgba(27,67,125,.45);z-index:40}

@keyframes hftPop{0%{opacity:0;transform:scale(.8)}100%{opacity:1;transform:scale(1)}}
@keyframes hftFade{to{opacity:1}}
@keyframes hftFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes hftLogo{to{opacity:1;transform:scale(1)}}
@keyframes hftFlyIn{0%{opacity:0;transform:translateY(40vh) rotate(-10deg)}100%{opacity:1;transform:translateY(0) rotate(0)}}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important}}

/* v1.1 — title card logo + skill art, round pill, music toggle */
.hft-logo{height:clamp(44px,8vmin,72px);width:auto;max-width:80%;display:block}
.hft-titleart{display:flex;align-items:center;justify-content:center;gap:clamp(6px,1.5vmin,16px);min-height:clamp(90px,20vmin,200px)}
.hft-titleart img{height:clamp(80px,18vmin,180px);width:auto;filter:drop-shadow(0 8px 10px rgba(27,67,125,.18));animation:hftFloat 2.6s ease-in-out infinite}
.hft-titleart img:nth-child(2){animation-delay:.4s}.hft-titleart img:nth-child(3){animation-delay:.8s}.hft-titleart img:nth-child(4){animation-delay:1.2s}
.hft-tballoon{position:relative;width:clamp(70px,14vmin,130px);height:clamp(84px,17vmin,156px);border-radius:50%;display:flex;align-items:center;justify-content:center;
  font:700 clamp(44px,9vmin,86px)/1 "HFT Letters",Fredoka,system-ui,sans-serif;color:#fff;-webkit-text-stroke:0;text-shadow:0 0 0 #1B437D,0 3px 0 rgba(27,67,125,.55),0 0 6px rgba(27,67,125,.35);
  box-shadow:inset -10px -14px 0 rgba(0,0,0,.10),inset 10px 12px 0 rgba(255,255,255,.25);animation:hftFloat 2.4s ease-in-out infinite}
.hft-tballoon:after{content:"";position:absolute;bottom:-26px;left:50%;width:2px;height:26px;background:rgba(60,60,80,.45)}
.hft-tballoon:nth-child(2){animation-delay:.5s}.hft-tballoon:nth-child(3){animation-delay:1s}
#hft-round{pointer-events:none;font-family:var(--th-font);font-weight:700;color:var(--th-accent-fg);background:var(--th-accent);border-radius:999px;
  padding:.28em .9em;font-size:clamp(15px,2.6vmin,24px);box-shadow:0 4px 0 var(--th-accent-lip);white-space:nowrap;flex:0 0 auto}
#hft-round small{font-size:.75em;opacity:.9}
#hft-round.pop{animation:hftPop .45s cubic-bezier(.2,1.6,.4,1)}
#hft-mus[aria-pressed="false"]{color:#8a93a6}
.hft-gate-card h2{text-wrap:balance}
.hft-gate-cta .hft-btn{font-size:clamp(16px,2.2vmin,20px);padding:.75em 1.5em}
.hft-logo{height:clamp(56px,10vmin,92px)}
/* phones: HUD on two rows (buttons on top, round + progress below) */
@media (max-width:560px){
  #hft-hud{flex-wrap:wrap;row-gap:8px}
  .hft-ic{width:42px;height:42px}
  #hft-fs{display:none}
  #hft-round{order:5;font-size:15px}
  #hft-prog{order:6;flex:1 1 60%;min-width:120px}
  #hft-count{margin-left:auto}
  #hft-prompt{top:calc(max(10px,env(safe-area-inset-top)) + 100px);font-size:17px;white-space:normal;text-align:center;max-width:92vw}
}

/* v1.2 — correct-answer celebration: flying star + counter pop */
.hft-flystar{position:absolute;width:clamp(54px,8vmin,84px);height:clamp(54px,8vmin,84px);pointer-events:none;z-index:30;filter:drop-shadow(0 0 10px rgba(251,185,21,.9))}
.hft-flystar svg,.hft-spark svg{width:100%;height:100%}
.hft-spark{position:absolute;width:26px;height:26px;pointer-events:none;z-index:31}
#hft-count.bump{animation:hftBump .6s cubic-bezier(.2,1.8,.4,1)}
@keyframes hftBump{0%{transform:scale(1)}30%{transform:scale(1.55) rotate(-6deg);box-shadow:0 0 0 6px rgba(251,185,21,.55),0 0 30px 10px rgba(251,185,21,.8);background:#FFF6D6}
  60%{transform:scale(.92) rotate(3deg)}100%{transform:scale(1)}}

/* v1.3 — 5-star end card in the style of the title card */
.hft-endcard .hft-star{width:clamp(40px,8vmin,78px);height:clamp(40px,8vmin,78px)}
.hft-tally{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;font-weight:800;font-size:clamp(15px,2.3vmin,20px)}
.hft-tally span{padding:.35em .9em;border-radius:999px;display:inline-flex;align-items:center;gap:.35em}
.hft-tally svg{width:1.1em;height:1.1em}
.hft-tally .ok{background:#E6F6EC;color:#1d7a45}.hft-tally .oops{background:#FDE3EE;color:#a4235c}.hft-tally .pct{background:#FFF1C9;color:#7a5600}
.hft-title{letter-spacing:-.02em}

/* "turn your phone" screen (phone_orientation) */
#hft-rotate{background:var(--hft-cream);z-index:60;flex-direction:column;gap:22px;text-align:center}
#hft-rotate b{font-family:var(--hft-head);font-weight:700;color:var(--hft-navy);font-size:clamp(22px,6vmin,34px);max-width:80vw}
.hft-rot-phone{width:70px;height:120px;border:8px solid var(--hft-navy);border-radius:16px;position:relative;animation:hftRot 1.8s ease-in-out infinite}
.hft-rot-phone:after{content:"";position:absolute;bottom:6px;left:50%;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:var(--hft-pink)}
@keyframes hftRot{0%,25%{transform:rotate(90deg)}60%,100%{transform:rotate(0deg)}}
#hft-rotate.land .hft-rot-phone{animation-name:hftRotL}
@keyframes hftRotL{0%,25%{transform:rotate(0deg)}60%,100%{transform:rotate(90deg)}}

/* pause card: breathing room between Keep Playing / Start Over / Exit Game (phones stack them tight) */
#hft-pause .hft-row + .hft-row{margin-top:clamp(12px,2.2vmin,18px)}

/* directions pill → "?" help button */
.hft-help{font-family:var(--hft-head);font-weight:700;font-size:clamp(24px,4vmin,34px);color:var(--th-pill-fg)!important;background:var(--th-pill)!important;box-shadow:0 4px 0 rgba(0,0,0,.3),0 6px 14px rgba(27,67,125,.25)!important;line-height:1}
.hft-help.pop{animation:hftPop .45s cubic-bezier(.2,1.6,.4,1)}
.hft-prompt-ghost{position:absolute;z-index:25;pointer-events:none;background:var(--hft-navy);color:#fff;border-radius:999px;display:flex;align-items:center;justify-content:center;
  overflow:hidden;white-space:nowrap;font-family:var(--hft-head);font-weight:600;font-size:clamp(18px,3.4vmin,34px);transform-origin:50% 50%;
  transition:transform .6s cubic-bezier(.55,-0.2,.35,1),opacity .6s ease-in;box-shadow:0 6px 18px rgba(27,67,125,.3)}
.hft-prompt-ghost svg{width:1em;height:1em}
.hft-endhead{font-size:clamp(26px,5vmin,46px)!important;text-wrap:balance}
.hft-endline{font-family:var(--hft-head);font-weight:600;color:var(--hft-pink);font-size:clamp(18px,3vmin,26px)}

/* HUD always on top (title, play, pause, end, gate): exit + volume always reachable. Cards leave room for it. */
#hft-hud{z-index:55}
#hft-title,#hft-end,#hft-pause,#hft-gate{padding-top:calc(max(10px,env(safe-area-inset-top)) + clamp(66px,9vmin,84px))}
@media (max-width:560px){#hft-title,#hft-end,#hft-pause,#hft-gate{padding-top:calc(max(10px,env(safe-area-inset-top)) + 112px)}}

/* condensed intro card after Play (logo · skill graphic · title) */
.hft-introcard{animation:hftPop .45s cubic-bezier(.2,1.4,.4,1)}
.hft-introcard .hft-title{margin-bottom:.1em}

/* Cards always fit and stay centred (Mark, 2026-09-25): the layer scrolls if a screen is tiny, the card is
   centred with margin:auto (safe centring — never pushed off the top), and everything shrinks with the
   screen HEIGHT so the buttons stay inside the card on short phones/tablets. */
#hft-title,#hft-end,#hft-pause,#hft-introcard,#hft-gate{overflow-y:auto;align-items:flex-start;-webkit-overflow-scrolling:touch}
.hft-layer>.hft-card,.hft-layer>.hft-gate-card{margin:auto;max-width:min(92vw,720px)}
@media (max-height:900px){
  .hft-card{gap:clamp(6px,1.4vh,16px);padding:clamp(14px,2.6vh,34px) clamp(18px,4vmin,48px)}
  .hft-logo{height:clamp(30px,6vh,72px)}
  .hft-titleart{min-height:clamp(56px,12vh,160px)}
  .hft-titleart img{height:clamp(52px,11vh,150px)}
  .hft-tballoon{width:clamp(46px,9vh,120px);height:clamp(56px,11vh,144px);font-size:clamp(30px,6.4vh,84px)}
  .hft-tballoon:after{bottom:-14px;height:14px}
  .hft-endcard .hft-star{width:clamp(30px,6.5vh,72px);height:clamp(30px,6.5vh,72px)}
  .hft-endhead{font-size:clamp(22px,4.4vh,44px)!important}
  .hft-endline{font-size:clamp(15px,2.6vh,24px)}
  .hft-btn.big{font-size:clamp(18px,3.6vh,38px);padding:.55em 1.6em}
  .hft-btn{font-size:clamp(15px,2.4vh,20px)}
  .hft-tally{font-size:clamp(13px,2vh,19px)}
}
/* the card never clips its own buttons: no inner scroll; centred on the whole screen (bottom padding mirrors
   the HUD space at the top); very short screens shrink further */
.hft-layer>.hft-card{max-height:none;overflow:visible}
#hft-title,#hft-end,#hft-pause,#hft-introcard{padding-bottom:calc(max(10px,env(safe-area-inset-top)) + clamp(66px,9vmin,84px))}
@media (max-width:560px){#hft-title,#hft-end,#hft-pause,#hft-introcard{padding-bottom:calc(max(10px,env(safe-area-inset-top)) + 112px)}}
@media (max-height:640px){
  #hft-title,#hft-end,#hft-pause,#hft-introcard{padding-bottom:16px}
  .hft-card{gap:6px;padding:12px 16px}
  .hft-logo{height:26px}
  .hft-titleart{min-height:0}
  .hft-titleart img{height:44px}
  .hft-tballoon{width:40px;height:48px;font-size:26px}
  .hft-tballoon:after{display:none}
  .hft-endcard .hft-star{width:26px;height:26px}
  .hft-endhead{font-size:20px!important}
  .hft-endline{font-size:14px}
  .hft-btn.big{font-size:18px;padding:.5em 1.4em}
  .hft-tally{font-size:12px}
}
/* phones held upright: tighter card so it fits between the two-row HUD space and the bottom */
@media (max-width:560px) and (min-height:641px){
  .hft-card{gap:8px;padding:16px 18px}
  .hft-logo{height:clamp(30px,5vh,46px)}
  .hft-titleart{min-height:0}
  .hft-titleart img{height:clamp(56px,9vh,90px)}
  .hft-tballoon{width:clamp(48px,7.5vh,72px);height:clamp(58px,9vh,86px);font-size:clamp(32px,5vh,48px)}
  .hft-tballoon:after{bottom:-10px;height:10px}
  .hft-endcard .hft-star{width:clamp(30px,5vh,46px);height:clamp(30px,5vh,46px)}
  .hft-endhead{font-size:clamp(22px,3.4vh,30px)!important}
  .hft-endline{font-size:clamp(14px,2.1vh,18px)}
  .hft-btn.big{font-size:clamp(18px,2.8vh,24px)}
}

/* per-game themed end card (Mark, 2026-09-26) — the stars stay gold; only the card dresses up for the game's world */
.hft-endcard{background-color:var(--th-card);color:var(--th-card-fg);border:var(--th-card-border-w) solid var(--th-card-border)}
.hft-endcard .hft-endhead,.hft-endcard .hft-endline{color:var(--th-card-head);font-family:var(--th-font)}
[data-th-card="dots"] .hft-endcard{background-image:radial-gradient(var(--th-card-dots) 3px,transparent 3.5px);background-size:28px 28px}
[data-th-card="stripes"] .hft-endcard{background-image:repeating-linear-gradient(45deg,var(--th-card-dots) 0 12px,transparent 12px 28px)}
[data-th-card="waves"] .hft-endcard{background-image:radial-gradient(circle at 50% 120%,transparent 18px,var(--th-card-dots) 19px 24px,transparent 25px);background-size:44px 26px}
[data-th-card="grid"] .hft-endcard{background-image:linear-gradient(var(--th-card-dots) 2px,transparent 2px),linear-gradient(90deg,var(--th-card-dots) 2px,transparent 2px);background-size:32px 32px}
[data-th-card="checks"] .hft-endcard{background-image:conic-gradient(var(--th-card-dots) 25%,transparent 0 50%,var(--th-card-dots) 0 75%,transparent 0);background-size:40px 40px}
[data-th-ui="rounded"] .hft-ic{border-radius:28%}
[data-th-ui="square"] .hft-ic{border-radius:14%}
.hft-endcard .hft-btn:not(.ghost){background:var(--th-btn);box-shadow:0 6px 0 var(--th-btn-lip),0 10px 24px rgba(27,67,125,.25)}

/* square letter tile on the title/end card (no balloon string) — Letter A Sound Game, 2026-09-28 */
.hft-tballoon.hft-ttile{border-radius:24%}.hft-tballoon.hft-ttile:after{display:none}

/* end card = plain like the title card (Mark 2026-09-28: the patterned card was too busy) */
.hft-endcard{background:rgba(255,255,255,.94)!important;background-image:none!important;border:0!important}

/* gate headline 2 lines (Mark 2026-09-29): each half on its own line, never wrapped inside */
.hft-gate-card h2{font-size:clamp(22px,4.4vmin,40px)}.hft-gate-card h2 span{display:block;white-space:nowrap}

/* hint speech bubble beside the featured circle (2026-10-02) */
.hft-hint{position:absolute;z-index:22;pointer-events:none;background:var(--th-pill,#1B437D);color:var(--th-pill-fg,#fff);
  font:600 clamp(15px,2.6vmin,24px)/1.25 var(--hft-head);padding:.55em .95em;border-radius:22px;box-shadow:0 6px 18px rgba(0,0,0,.25);
  opacity:0;transform:translateY(-4px);transition:opacity .2s,transform .2s;width:max-content}
.hft-hint.on{opacity:.96;transform:none}
.hft-hint:before{content:"";position:absolute;left:-12px;top:16px;border:9px solid transparent;border-right:12px solid var(--th-pill,#1B437D);border-left:0}

/* Worksheet-game layer CSS (Pop-Ups engine). Captions come out of the Funzy's mouth (wg-layer.js), so the engine's
 * directions pill is hidden; its "?" button (replay the directions) stays. */
#hft-prompt { visibility: hidden !important; }
#wg-cap { position: fixed; left: 0; top: 0; z-index: 40; max-width: min(46vw, 560px); padding: .65em 1.15em .7em;
  background: #fff; color: #2B2140; border-radius: 34px; font: 600 clamp(15px, 2.1vw, 24px)/1.25 Fredoka, system-ui, sans-serif;
  box-shadow: 0 6px 0 rgba(90,35,133,.22), 0 10px 24px rgba(30,15,60,.22); border: 3px solid #8F78C4;
  opacity: 0; pointer-events: none; transition: opacity .12s ease; will-change: transform; }
#wg-cap.on { opacity: 1; }
#wg-cap.dir { pointer-events: auto; cursor: pointer; }
#wg-cap.dir:hover { border-color: #5A2385; }
#wg-cap .wg-cap-spk { width: 1.05em; height: 1.05em; vertical-align: -0.16em; margin-right: .4em; color: #5A2385; }
#wg-cap-tail { position: fixed; left: 0; top: 0; z-index: 41; pointer-events: none; opacity: 0; transition: opacity .12s ease; overflow: visible; }
#wg-cap-tail.on { opacity: 1; }
#wg-cap-tail .f { fill: #fff; }
#wg-cap-tail .s { fill: none; stroke: #8F78C4; stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
@media (max-width: 700px) { #wg-cap { font-size: 15px; padding: .55em .95em .6em; border-radius: 26px; } }
/* title art (Mark 2026-10-07): the theme's paper cut-out pictures, BIG — rain (cause) → umbrella (effect) */
.wg-tart { display: flex; align-items: center; justify-content: center; gap: clamp(6px, 2vw, 22px); margin: 2px 0 4px; }
.wg-tfig { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.wg-tfig img { display: block; height: clamp(90px, min(30vh, 34vw), 300px); width: auto; filter: drop-shadow(0 6px 8px rgba(40,20,70,.18)); }
.wg-tw { color: #fff; padding: .14em .5em .2em; border-radius: .4em; font: 700 clamp(18px, min(3.4vh, 4.6vw), 34px)/1.1 Fredoka, sans-serif; box-shadow: 0 .14em 0 rgba(0,0,0,.18); }
.wg-tarrow svg { width: clamp(40px, min(9vh, 10vw), 90px); height: auto; display: block; margin-bottom: 1.6em; }
/* visitor preview: unlock card after the free questions */
.wg-gate { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 16px;
  background: rgba(40, 20, 70, .45); }
.wg-gatecard { background: #fff; border-radius: 26px; padding: 26px 24px 22px; max-width: 440px; width: 100%; text-align: center;
  box-shadow: 12px 12px 0 #B9A6E0, 0 18px 40px rgba(0,0,0,.25); font: 600 17px/1.4 'Nunito Sans', system-ui, sans-serif; color: #2B2140; }
.wg-gatecard h2 { font: 700 26px/1.15 Fredoka, sans-serif; color: #5A2385; margin: 6px 0 8px; }
.wg-gatecard p { margin: 0 0 16px; }
.wg-gk { display: inline-block; font: 800 12px/1 'Nunito Sans', sans-serif; letter-spacing: .1em; text-transform: uppercase; color: #D6337B;
  background: #FBE8F1; padding: 6px 10px; border-radius: 99px; }
.wg-gbtn { display: block; width: 100%; margin: 8px 0 0; border: 0; border-radius: 14px; padding: 14px; min-height: 50px; cursor: pointer;
  font: 800 17px 'Nunito Sans', sans-serif; background: #D6337B; color: #fff; box-shadow: 0 5px 0 #A61F5C; }
.wg-gbtn.ghost { background: #fff; color: #1B437D; border: 2px solid #1B437D; box-shadow: none; }

/* end card (Mark 2026-10-07): must fit the screen with no scrolling — the title pictures shrink there */
.hft-endcard .wg-tfig img { height: clamp(48px, min(12vh, 16vw), 120px); }
.hft-endcard .wg-tw { font-size: clamp(13px, min(2.2vh, 3.4vw), 20px); }
.hft-endcard .wg-tarrow svg { width: clamp(26px, 5vh, 52px); margin-bottom: 1.2em; }
.hft-endcard .wg-tfig { gap: 3px; }
/* short landscape screens (phones on their side): smaller title pictures so the title card fits */
@media (max-height: 500px) { .wg-tfig img { height: clamp(48px, 17vh, 90px); } .wg-tw { font-size: 14px; } .wg-tarrow svg { width: 34px; margin-bottom: 1em; } }
/* Mark 2026-10-07 (round 3): during the Funzy's hello the intro card fades away (the Funzy comes to the centre — engine patch "hello centre") */
#hft-introcard { transition: opacity .55s ease; }
#hft-introcard.wg-hello { opacity: 0; pointer-events: none; }
/* round 4: the bubble glides from top centre to beside the featured circle (and back) */
#wg-cap.moved { transition: opacity .12s ease, transform .4s cubic-bezier(.3,.9,.3,1); }