/* FastFingerType — Typing Games (Bubble Burst + Rocket Dash + Rewards) */
.fft-g{--ink:#072e5e;--dim:#5b769c;--line:#d5e8f6;--accent:#0fa8e9;--grad:linear-gradient(135deg,#059fe0,#52c2f3);--coral:#e0245e;--mint:#0aa04c;position:relative;max-width:980px;margin:0 auto;font-family:'Roboto',system-ui,sans-serif;color:var(--ink)}
.fft-g,.fft-g *{box-sizing:border-box;margin:0;padding:0}
.fft-g button{font-family:inherit;cursor:pointer}

/* top bar */
.fft-g__bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.fft-g__stat{background:#fff;border:1px solid var(--line);border-radius:999px;padding:8px 16px;font-size:13.5px;font-weight:600;color:var(--dim);box-shadow:0 8px 20px -14px rgba(7,46,94,.5)}
.fft-g__stat b{font-family:'Roboto Mono',monospace;color:var(--ink);font-weight:700;margin-left:4px}
.fft-g__spacer{flex:1}
.fft-g__coins{background:linear-gradient(135deg,#fff7e0,#ffefc2);border:1px solid #f3d98b;border-radius:999px;padding:8px 16px;font-size:14px;font-weight:700;color:#8a6d1a}
.fft-g__coins b{font-family:'Roboto Mono',monospace}
.fft-g__char{width:44px;height:44px;border-radius:50%;border:2px solid var(--line);background:#fff;font-size:22px;line-height:1;transition:.15s;box-shadow:0 8px 20px -12px rgba(7,46,94,.5)}
.fft-g__char:hover{border-color:var(--accent);transform:translateY(-2px)}
.fft-g__icon{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:#fff;font-size:17px;color:var(--ink);transition:.15s}
.fft-g__icon:hover{border-color:var(--accent)}

/* stage */
.fft-g__stage{position:relative;height:clamp(420px,60vh,560px);border-radius:24px;border:1px solid var(--line);background:linear-gradient(180deg,#f3fbff 0%,#dbf1ff 55%,#bfe6fb 100%);overflow:hidden;box-shadow:0 30px 70px -40px rgba(7,46,94,.5);cursor:text}
.fft-g__field{position:absolute;inset:0}
.fft-g__in{position:absolute;inset:0;width:100%;height:100%;opacity:0;border:0;background:transparent;color:transparent;caret-color:transparent;z-index:6;font-size:16px;cursor:text}

/* bubbles */
.fft-bub{position:absolute;bottom:-80px;transform:translateX(-50%);background:radial-gradient(circle at 30% 25%,rgba(255,255,255,.95),rgba(224,244,255,.75) 60%,rgba(180,225,250,.65));border:2px solid rgba(255,255,255,.9);border-radius:999px;padding:14px 20px;font-family:'Roboto Mono',monospace;font-weight:700;font-size:19px;color:var(--ink);box-shadow:inset -6px -8px 16px rgba(15,168,233,.18),0 10px 24px -12px rgba(7,46,94,.35);white-space:nowrap;will-change:transform;z-index:2}
.fft-bub .c.hit{color:var(--accent)}
.fft-bub.target{border-color:var(--accent);box-shadow:0 0 0 3px rgba(15,168,233,.25),inset -6px -8px 16px rgba(15,168,233,.18)}
.fft-bub.pop{animation:fftPop .28s ease forwards}
@keyframes fftPop{60%{transform:translateX(-50%) scale(1.25);opacity:.9}100%{transform:translateX(-50%) scale(1.55);opacity:0}}
.fft-part{position:absolute;width:8px;height:8px;border-radius:50%;background:var(--accent);pointer-events:none;z-index:3;animation:fftPart .5s ease-out forwards}
@keyframes fftPart{to{transform:translate(var(--dx),var(--dy)) scale(.2);opacity:0}}

.fft-g__buddy{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);font-size:46px;line-height:1;z-index:4;filter:drop-shadow(0 10px 14px rgba(7,46,94,.3));transition:transform .12s;pointer-events:none}
.fft-g__buddy.bounce{transform:translateX(-50%) scale(1.25) rotate(-8deg)}
.fft-g__typed{position:absolute;bottom:72px;left:50%;transform:translateX(-50%);min-width:90px;text-align:center;background:rgba(255,255,255,.85);border:1px solid var(--line);border-radius:999px;padding:7px 18px;font-family:'Roboto Mono',monospace;font-weight:700;font-size:17px;color:var(--accent);z-index:4;pointer-events:none}
.fft-g__typed:empty{opacity:.35}
.fft-g__wave{position:absolute;top:38%;left:50%;transform:translate(-50%,-50%);font-size:clamp(28px,5vw,44px);font-weight:800;color:var(--ink);z-index:5;opacity:0;pointer-events:none}
.fft-g__wave.show{animation:fftWave 1.1s ease forwards}
@keyframes fftWave{15%{opacity:1;transform:translate(-50%,-50%) scale(1.06)}80%{opacity:1}100%{opacity:0}}
.fft-g__lives{font-size:18px;letter-spacing:2px}

/* race */
.fft-g__lanes{position:absolute;left:0;right:0;top:14px;display:flex;flex-direction:column;gap:10px;padding:0 16px;z-index:2}
.fft-lane{display:flex;align-items:center;gap:10px}
.fft-lane__name{width:86px;font-size:12.5px;font-weight:700;color:var(--dim);text-align:right;white-space:nowrap}
.fft-lane__track{position:relative;flex:1;height:34px;background:rgba(255,255,255,.55);border:1px solid rgba(213,232,246,.9);border-radius:999px}
.fft-lane__track::after{content:"🏁";position:absolute;right:8px;top:50%;transform:translateY(-50%);font-size:16px}
.fft-lane__racer{position:absolute;left:0;top:50%;transform:translate(0,-50%);font-size:24px;line-height:1;transition:left .12s linear;filter:drop-shadow(0 4px 8px rgba(7,46,94,.3))}
.fft-lane.me .fft-lane__track{background:rgba(255,255,255,.85);border-color:#9ed7f5}
.fft-lane.me .fft-lane__name{color:var(--ink)}
.fft-g__wordpanel{position:absolute;left:0;right:0;bottom:0;padding:18px 16px 22px;background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.92) 30%);text-align:center;z-index:3}
.fft-g__word{font-family:'Roboto Mono',monospace;font-weight:700;font-size:clamp(26px,4.4vw,38px);letter-spacing:.04em;color:rgba(7,46,94,.4)}
.fft-g__word .c.ok{color:var(--ink)}
.fft-g__word .c.bad{color:var(--coral);background:rgba(224,36,94,.12);border-radius:4px}
.fft-g__word .c.cur{box-shadow:inset 0 -3px 0 var(--accent)}
.fft-g__next{margin-top:8px;font-family:'Roboto Mono',monospace;font-size:14.5px;color:rgba(7,46,94,.4)}
.fft-g__count{position:absolute;top:44%;left:50%;transform:translate(-50%,-50%);font-size:clamp(50px,9vw,84px);font-weight:800;color:var(--ink);z-index:5;pointer-events:none;text-shadow:0 6px 20px rgba(255,255,255,.8)}

/* overlay panels */
.fft-g__overlay{position:absolute;inset:0;z-index:7;display:grid;place-items:center;background:rgba(243,251,255,.72);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);padding:16px}
.fft-g__overlay.is-hidden{display:none}
.fft-g__panel{background:#fff;border:1px solid var(--line);border-radius:20px;padding:clamp(22px,4vw,34px);width:min(460px,100%);text-align:center;box-shadow:0 34px 80px -34px rgba(7,46,94,.55);max-height:96%;overflow:auto}
.fft-g__panel h3{font-size:clamp(22px,3vw,28px);font-weight:800;margin-bottom:8px}
.fft-g__panel .big{font-size:52px;line-height:1.1;margin:4px 0 8px}
.fft-g__panel p{color:var(--dim);font-size:15px;line-height:1.6;margin-bottom:14px}
.fft-g__panel .fft-g__meta{display:flex;justify-content:center;gap:18px;margin:12px 0 16px;flex-wrap:wrap}
.fft-g__panel .fft-g__meta div{font-family:'Roboto Mono',monospace}
.fft-g__panel .fft-g__meta b{display:block;font-size:24px;font-weight:800;color:var(--ink)}
.fft-g__panel .fft-g__meta span{font-size:10.5px;text-transform:uppercase;letter-spacing:.12em;color:var(--dim)}
.fft-g__play{display:inline-flex;align-items:center;gap:10px;background:var(--grad);color:#fff;border:0;border-radius:999px;padding:14px 34px;font-size:17px;font-weight:800;box-shadow:0 12px 28px rgba(15,168,233,.4);transition:transform .15s}
.fft-g__play:hover{transform:translateY(-2px)}
.fft-g__ghostbtn{display:inline-flex;align-items:center;gap:8px;background:#fff;color:var(--ink);border:1.5px solid var(--line);border-radius:999px;padding:12px 24px;font-size:15px;font-weight:700;margin:6px 4px 0;transition:.15s}
.fft-g__ghostbtn:hover{border-color:var(--accent);color:#0784c7}
.fft-g__diff{display:flex;gap:8px;justify-content:center;margin:6px 0 16px;flex-wrap:wrap}
.fft-g__diff button{background:#f2f9fe;border:1px solid var(--line);border-radius:999px;padding:9px 20px;font-weight:700;font-size:14px;color:var(--dim);transition:.15s}
.fft-g__diff button.on{background:var(--grad);color:#fff;border-color:transparent}
.fft-g__earn{margin-top:6px;font-weight:800;color:#8a6d1a;background:linear-gradient(135deg,#fff7e0,#ffefc2);border:1px solid #f3d98b;display:inline-block;border-radius:999px;padding:8px 18px}

/* character shop */
.fft-g__shop{position:absolute;inset:0;z-index:8;display:grid;place-items:center;background:rgba(7,30,60,.45);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);padding:16px}
.fft-g__shop[hidden]{display:none}
.fft-shop{background:#fff;border-radius:20px;padding:22px;width:min(560px,100%);max-height:94%;overflow:auto;box-shadow:0 34px 80px -30px rgba(7,46,94,.6)}
.fft-shop h3{font-weight:800;font-size:20px;margin-bottom:4px}
.fft-shop .sub{color:var(--dim);font-size:13.5px;margin-bottom:14px}
.fft-shop__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:12px}
.fft-shop__item{border:2px solid var(--line);border-radius:16px;padding:14px 8px;text-align:center;background:#fbfdff;transition:.15s}
.fft-shop__item .e{font-size:36px;line-height:1.15;filter:drop-shadow(0 6px 8px rgba(7,46,94,.2))}
.fft-shop__item .n{font-weight:700;font-size:13px;margin:6px 0 8px}
.fft-shop__item button{width:100%;border:0;border-radius:999px;padding:7px 8px;font-weight:700;font-size:12.5px}
.fft-shop__item .buy{background:linear-gradient(135deg,#fff1c4,#ffe08a);color:#7a5d10}
.fft-shop__item .buy:disabled{opacity:.45;cursor:not-allowed}
.fft-shop__item .pick{background:#eaf6fe;color:var(--ink)}
.fft-shop__item.sel{border-color:var(--accent);background:#f2faff}
.fft-shop__item.sel .pick{background:var(--grad);color:#fff}
.fft-shop__close{margin-top:16px;width:100%;background:#f2f9fe;border:1px solid var(--line);border-radius:12px;padding:11px;font-weight:700;color:var(--ink)}

@media (max-width:640px){
  .fft-g__stage{height:clamp(380px,70vh,480px)}
  .fft-g__bar{gap:7px}
  .fft-g__stat{padding:7px 12px;font-size:12px}
  .fft-bub{font-size:16px;padding:11px 15px}
  .fft-lane__name{width:64px;font-size:11px}
  .fft-g__buddy{font-size:38px}
}

/* hub cards + step grids */
.fft-gcards{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:26px!important;width:100%!important}
@media (max-width:820px){.fft-gcards{grid-template-columns:1fr!important}}
.fft-gcard{background:#fff;border:1px solid #d5e8f6;border-radius:24px;overflow:hidden;box-shadow:0 24px 55px -34px rgba(7,46,94,.5);transition:transform .18s ease,box-shadow .18s ease}
.fft-gcard:hover{transform:translateY(-6px);box-shadow:0 34px 70px -30px rgba(7,46,94,.6)}
.fft-gcard__emoji{font-size:86px;line-height:1;text-align:center;filter:drop-shadow(0 14px 18px rgba(7,46,94,.28));animation:fftFloat 5s ease-in-out infinite;margin:0}
.fft-gmeta{display:flex;gap:8px;flex-wrap:wrap;margin:0}
.fft-gmeta span{background:#f2f9fe;border:1px solid #d5e8f6;border-radius:999px;padding:6px 13px;font-size:12.5px;font-weight:700;color:#40628f}
.fft-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin:0}
@media (max-width:900px){.fft-steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:540px){.fft-steps{grid-template-columns:1fr}}
.fft-step{background:#fff;border:1px solid #d5e8f6;border-radius:16px;padding:20px;text-align:center;box-shadow:0 16px 40px -32px rgba(7,46,94,.45)}
.fft-step .n{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#059fe0,#52c2f3);color:#fff;font-weight:800;display:inline-flex;align-items:center;justify-content:center;margin-bottom:10px}
.fft-step h4{font-size:15.5px;font-weight:800;color:#072e5e;margin:0 0 6px}
.fft-step p{font-size:13.5px;color:#5b769c;line-height:1.55;margin:0}
.fft-gback{color:#5b769c;text-decoration:none;font-weight:700;font-size:14px}
.fft-gback:hover{color:#0fa8e9}