/* Wild Tap GA — South Georgia trail runner (riktom.com) */
*{box-sizing:border-box;}
html{height:100%;}
body{
  height:100%; margin:0; overflow:hidden;
  display:flex; flex-direction:column;
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  background:#0c1f12; color:#fff;
  -webkit-tap-highlight-color:transparent;
}
.rk-nav{flex:0 0 auto;}

/* ---------- game stage ---------- */
#tt{
  position:relative; flex:1 1 auto; overflow:hidden;
  touch-action:none; user-select:none; -webkit-user-select:none;
  cursor:pointer;
}
#tt-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;}

/* ---------- floating score effects (DOM, positioned over canvas) ---------- */
.tt-flash{position:absolute;inset:0;pointer-events:none;z-index:20;}
.tt-burst{position:absolute;font-size:1.6rem;pointer-events:none;animation:tt-burst .55s ease-out forwards;}
@keyframes tt-burst{0%{transform:translate(-50%,-50%) scale(.5);opacity:1}100%{transform:translate(-50%,-150%) scale(1.2);opacity:0}}
.tt-pop{position:absolute;font-weight:900;font-size:1.3rem;pointer-events:none;
  text-shadow:0 2px 0 rgba(0,0,0,.35);animation:tt-pop .8s ease-out forwards;white-space:nowrap;}
.tt-pop.good{color:#ffe14d;}
.tt-pop.bad{color:#ff6b5e;}
@keyframes tt-pop{0%{transform:translate(-50%,0) scale(.7);opacity:0}15%{opacity:1;transform:translate(-50%,-10px) scale(1.1)}100%{transform:translate(-50%,-64px) scale(1);opacity:0}}
#tt.shake{animation:tt-shake .3s;}
@keyframes tt-shake{0%,100%{transform:translate(0,0)}20%{transform:translate(-7px,3px)}40%{transform:translate(6px,-3px)}60%{transform:translate(-5px,2px)}80%{transform:translate(4px,-2px)}}
.tt-redflash{position:absolute;inset:0;pointer-events:none;z-index:21;background:radial-gradient(circle at center,transparent 38%,rgba(200,30,20,.55));
  animation:tt-red .4s ease-out forwards;}
@keyframes tt-red{from{opacity:1}to{opacity:0}}

/* ---------- HUD ---------- */
.tt-hud{position:absolute;top:0;left:0;right:0;display:flex;align-items:flex-start;justify-content:space-between;
  gap:.5rem;padding:.55rem .7rem;z-index:30;pointer-events:none;
  font-variant-numeric:tabular-nums;}
.tt-hud button{pointer-events:auto;}
.tt-stat{background:rgba(12,31,18,.6);backdrop-filter:blur(3px);border-radius:10px;padding:.25rem .6rem;margin-bottom:.35rem;display:inline-flex;flex-direction:column;line-height:1.05;min-width:62px;}
.tt-k{font-size:.58rem;letter-spacing:.08em;color:#bfe0b0;font-weight:700;}
.tt-stat b{font-size:1.15rem;}
.tt-hud-left{display:flex;gap:.4rem;}
.tt-hud-right{display:flex;align-items:center;gap:.4rem;}
.tt-lives{font-size:1.15rem;letter-spacing:1px;background:rgba(12,31,18,.6);border-radius:10px;padding:.25rem .5rem;min-height:30px;}
.tt-icon{background:rgba(12,31,18,.6);border:none;color:#fff;font-size:1rem;width:38px;height:38px;border-radius:10px;cursor:pointer;}
.tt-icon:active{transform:scale(.92);}
.tt-combo{text-align:center;font-weight:900;color:#ffe14d;font-size:1.5rem;text-shadow:0 2px 0 rgba(0,0,0,.4);min-height:1.5rem;transition:transform .1s;}
.tt-combo.bump{transform:scale(1.35);}

/* ---------- steer hint ---------- */
.tt-hint{position:absolute;bottom:14%;left:50%;transform:translateX(-50%);z-index:28;pointer-events:none;
  background:rgba(12,31,18,.7);color:#fff;font-weight:700;border-radius:999px;padding:.5rem 1.1rem;font-size:1rem;
  animation:tt-hintpulse 1.3s ease-in-out infinite;}
.tt-hint[hidden]{display:none;}
@keyframes tt-hintpulse{0%,100%{opacity:.55}50%{opacity:1}}

/* ---------- banner ---------- */
.tt-banner{position:absolute;top:32%;left:50%;transform:translateX(-50%);z-index:35;pointer-events:none;
  background:rgba(12,31,18,.92);border:2px solid #a5d6a7;border-radius:14px;padding:.8rem 1.3rem;text-align:center;
  font-weight:800;box-shadow:0 10px 30px rgba(0,0,0,.4);max-width:88vw;animation:tt-banner 2.4s ease both;}
.tt-banner .big{display:block;font-size:1.5rem;color:#ffe14d;}
.tt-banner .small{display:block;font-size:.85rem;color:#dff0d6;font-weight:600;margin-top:.2rem;}
@keyframes tt-banner{0%{opacity:0;transform:translateX(-50%) translateY(-12px) scale(.9)}12%,80%{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}100%{opacity:0;transform:translateX(-50%) translateY(-8px) scale(.96)}}

/* ---------- screens (start / over / pause) ---------- */
.tt-screen[hidden],.tt-hud[hidden]{display:none!important;}
.tt-screen{position:absolute;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;padding:1rem;
  background:radial-gradient(circle at center,rgba(12,31,18,.55),rgba(12,31,18,.82));}
.tt-card{background:linear-gradient(#ffffff,#f3f7ef);color:#1c2b1c;border-radius:20px;padding:1.6rem 1.4rem;max-width:360px;width:100%;
  text-align:center;box-shadow:0 18px 50px rgba(0,0,0,.45);border:1px solid #d9e4cf;}
.tt-logo{font-size:3.4rem;line-height:1;filter:drop-shadow(0 4px 6px rgba(0,0,0,.2));}
.tt-card h1{margin:.3rem 0 .4rem;font-size:1.9rem;line-height:1.05;color:#1b5e20;letter-spacing:-.5px;}
.tt-card h2{margin:.1rem 0 .6rem;font-size:1.7rem;color:#1b5e20;}
.tt-sub{margin:.2rem 0;color:#46563f;font-size:.95rem;}
.tt-rule{margin:.7rem 0;font-size:.85rem;color:#5a4a2a;background:#fbf3da;border:1px solid #ecdfb0;border-radius:10px;padding:.5rem .7rem;}
.tt-btn{display:block;width:100%;margin:.6rem 0 0;padding:.85rem 1rem;border:none;border-radius:12px;
  background:#2e7d32;color:#fff;font-size:1.1rem;font-weight:800;cursor:pointer;box-shadow:0 4px 0 #1b5e20;transition:transform .06s;}
.tt-btn:active{transform:translateY(2px);box-shadow:0 2px 0 #1b5e20;}
.tt-btn-ghost{background:#eef3e8;color:#1b5e20;box-shadow:0 4px 0 #c7d8b6;}
.tt-hi{margin:.8rem 0 0;color:#46563f;font-size:.95rem;}
.tt-fineprint{margin:.9rem 0 0;font-size:.78rem;color:#8a9a80;}
.tt-fineprint a,.tt-hi a{color:#2e7d32;}
.tt-final{margin:.4rem 0;display:flex;flex-direction:column;}
.tt-final b{font-size:3rem;color:#1b5e20;line-height:1;font-variant-numeric:tabular-nums;}
.tt-final-row{display:flex;justify-content:center;gap:1.4rem;margin:.4rem 0 .2rem;}
.tt-final-row b{font-size:1.4rem;color:#2e7d32;}
.tt-newbest{color:#c98a00;font-weight:800;margin:.3rem 0;}

@media (prefers-reduced-motion: reduce){
  #tt.shake{animation:none!important;}
}
@media (min-width:760px){ .tt-card{max-width:420px;} }