/* South Georgia Deer Hunt — game styles */
*{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 ---------- */
#dh{
  position:relative; flex:1 1 auto; overflow:hidden;
  touch-action:manipulation; user-select:none; -webkit-user-select:none;
  cursor:crosshair;
}

/* parallax scene layers (back -> front) */
.dh-sky{position:absolute;inset:0;background:linear-gradient(#8fd0e8 0%,#bfe3ec 38%,#e9f3df 60%,#cfe6a8 78%,#a9d27e 100%);}
.dh-sun{position:absolute;top:6%;right:12%;width:64px;height:64px;border-radius:50%;
  background:radial-gradient(circle,#fff6c8,#ffe27a 60%,rgba(255,226,122,0) 72%);
  filter:drop-shadow(0 0 24px rgba(255,230,140,.7));}
.dh-clouds{position:absolute;top:8%;left:0;width:200%;height:30%;opacity:.85;
  background:
    radial-gradient(40px 20px at 12% 30%,#fff,transparent 70%),
    radial-gradient(60px 28px at 18% 40%,#fff,transparent 70%),
    radial-gradient(46px 22px at 24% 26%,#fff,transparent 70%),
    radial-gradient(40px 20px at 62% 50%,#fff,transparent 70%),
    radial-gradient(64px 30px at 70% 60%,#fff,transparent 70%),
    radial-gradient(44px 22px at 78% 44%,#fff,transparent 70%);
  animation:dh-clouds 90s linear infinite;}
@keyframes dh-clouds{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.dh-hills{position:absolute;left:-2%;right:-2%;bottom:26%;height:26%;
  background:radial-gradient(120% 100% at 30% 100%,#6fae5e,#5b9a4d);
  border-radius:50% 50% 0 0/100% 100% 0 0;opacity:.85;}
.dh-treeline{position:absolute;left:0;right:0;bottom:24%;height:13%;opacity:.9;
  background:
    repeating-linear-gradient(95deg,#2f6b39 0 14px,#357040 14px 28px);
  -webkit-mask:repeating-linear-gradient(90deg,#000 0 18px,transparent 18px 22px,#000 22px 40px);
          mask:repeating-linear-gradient(90deg,#000 0 18px,transparent 18px 22px,#000 22px 40px);}
.dh-trees{position:absolute;left:0;right:0;bottom:22%;height:24%;
  background:
    radial-gradient(48px 70px at 8% 100%,#2c6b37 60%,transparent 62%),
    radial-gradient(60px 90px at 22% 100%,#2a6435 60%,transparent 62%),
    radial-gradient(44px 64px at 38% 100%,#2f6b39 60%,transparent 62%),
    radial-gradient(64px 96px at 56% 100%,#28602f 60%,transparent 62%),
    radial-gradient(48px 72px at 72% 100%,#2f6b39 60%,transparent 62%),
    radial-gradient(58px 88px at 88% 100%,#2a6435 60%,transparent 62%);
  background-repeat:no-repeat;}
/* the play field — where deer run */
.dh-field{position:absolute;left:0;right:0;bottom:8%;height:46%;}
.dh-grass{position:absolute;left:0;right:0;bottom:0;height:18%;
  background:linear-gradient(#7fb85f,#5e9a45 60%,#4c8439);
  box-shadow:inset 0 6px 12px rgba(255,255,255,.12);}
.dh-grass::before{content:"";position:absolute;left:0;right:0;top:-8px;height:16px;
  background:repeating-linear-gradient(80deg,transparent 0 8px,rgba(40,90,40,.45) 8px 10px);
  -webkit-mask:linear-gradient(#000,transparent);mask:linear-gradient(#000,transparent);}

/* ---------- deer / critters ---------- */
.dh-deer{position:absolute;bottom:0;left:0;will-change:transform;cursor:crosshair;
  filter:drop-shadow(0 6px 5px rgba(0,0,0,.28));}
.dh-deer svg{display:block;height:var(--h);width:auto;overflow:visible;pointer-events:none;}
.dh-deer .legA,.dh-deer .legB{transform-box:fill-box;transform-origin:50% 0;}
.dh-deer.run .legA{animation:dh-step .26s linear infinite;}
.dh-deer.run .legB{animation:dh-step .26s linear infinite reverse;}
.dh-deer.run .body{animation:dh-bound .26s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 100%;}
@keyframes dh-step{0%,100%{transform:rotate(-26deg)}50%{transform:rotate(26deg)}}
@keyframes dh-bound{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
/* inner wrapper carries facing-independent hit/flee (container handles the cross) */
.dh-fig{transform-origin:50% 100%;}
.dh-fig.hit{animation:dh-fall .5s ease-in forwards;}
@keyframes dh-fall{to{transform:translateY(28px) rotate(20deg);opacity:0;}}
.dh-fig.flee{animation:dh-flee .42s ease-in forwards;}
@keyframes dh-flee{to{transform:translateY(-12px) scale(.55);opacity:0;}}

/* ---------- effects ---------- */
.dh-flash{position:absolute;inset:0;pointer-events:none;}
.dh-shot{position:absolute;width:54px;height:54px;margin:-27px 0 0 -27px;border-radius:50%;
  background:radial-gradient(circle,#fff,#ffd76a 40%,rgba(255,170,60,0) 70%);
  animation:dh-shot .22s ease-out forwards;pointer-events:none;}
@keyframes dh-shot{from{transform:scale(.3);opacity:1}to{transform:scale(1.4);opacity:0}}
.dh-burst{position:absolute;font-size:1.6rem;pointer-events:none;animation:dh-burst .55s ease-out forwards;}
@keyframes dh-burst{0%{transform:translate(-50%,-50%) scale(.5);opacity:1}100%{transform:translate(-50%,-150%) scale(1.2);opacity:0}}
.dh-pop{position:absolute;font-weight:900;font-size:1.3rem;pointer-events:none;
  text-shadow:0 2px 0 rgba(0,0,0,.35);animation:dh-pop .8s ease-out forwards;white-space:nowrap;}
.dh-pop.good{color:#ffe14d;}
.dh-pop.bad{color:#ff6b5e;}
@keyframes dh-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}}
#dh.shake{animation:dh-shake .3s;}
@keyframes dh-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)}}
.dh-redflash{position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at center,transparent 40%,rgba(200,30,20,.5));
  animation:dh-red .4s ease-out forwards;}
@keyframes dh-red{from{opacity:1}to{opacity:0}}

/* ---------- HUD ---------- */
.dh-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;}
.dh-hud button{pointer-events:auto;}
.dh-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;}
.dh-k{font-size:.58rem;letter-spacing:.08em;color:#bfe0b0;font-weight:700;}
.dh-stat b{font-size:1.15rem;}
.dh-hud-left{display:flex;gap:.4rem;}
.dh-hud-right{display:flex;align-items:center;gap:.4rem;}
.dh-time{background:#1b5e20;border:2px solid #a5d6a7;border-radius:10px;padding:.2rem .55rem;font-size:1.3rem;font-weight:900;min-width:48px;text-align:center;}
.dh-time.low{background:#b3261e;border-color:#ff8a7d;animation:dh-pulse .6s ease-in-out infinite;}
@keyframes dh-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
.dh-icon{background:rgba(12,31,18,.6);border:none;color:#fff;font-size:1rem;width:38px;height:38px;border-radius:10px;cursor:pointer;}
.dh-icon:active{transform:scale(.92);}
.dh-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;}
.dh-combo.bump{transform:scale(1.35);}
.dh-strikes{font-size:1rem;letter-spacing:2px;min-width:20px;}

/* ---------- banner ---------- */
.dh-banner{position:absolute;top:38%;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:dh-banner 2.4s ease both;}
.dh-banner .big{display:block;font-size:1.5rem;color:#ffe14d;}
.dh-banner .small{display:block;font-size:.85rem;color:#dff0d6;font-weight:600;margin-top:.2rem;}
@keyframes dh-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) ---------- */
.dh-screen[hidden],.dh-hud[hidden]{display:none!important;}
.dh-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));}
.dh-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;}
.dh-logo{font-size:3.4rem;line-height:1;filter:drop-shadow(0 4px 6px rgba(0,0,0,.2));}
.dh-card h1{margin:.3rem 0 .4rem;font-size:1.9rem;line-height:1.05;color:#1b5e20;letter-spacing:-.5px;}
.dh-card h2{margin:.1rem 0 .6rem;font-size:1.7rem;color:#1b5e20;}
.dh-sub{margin:.2rem 0;color:#46563f;font-size:.95rem;}
.dh-rule{margin:.7rem 0;font-size:.85rem;color:#5a4a2a;background:#fbf3da;border:1px solid #ecdfb0;border-radius:10px;padding:.5rem .7rem;}
.dh-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;}
.dh-btn:active{transform:translateY(2px);box-shadow:0 2px 0 #1b5e20;}
.dh-btn-ghost{background:#eef3e8;color:#1b5e20;box-shadow:0 4px 0 #c7d8b6;}
.dh-hi{margin:.8rem 0 0;color:#46563f;font-size:.95rem;}
.dh-fineprint{margin:.9rem 0 0;font-size:.78rem;color:#8a9a80;}
.dh-fineprint a,.dh-hi a{color:#2e7d32;}
.dh-final{margin:.4rem 0;display:flex;flex-direction:column;}
.dh-final b{font-size:3rem;color:#1b5e20;line-height:1;font-variant-numeric:tabular-nums;}
.dh-final-row{display:flex;justify-content:center;gap:2rem;margin:.4rem 0 .2rem;}
.dh-final-row b{font-size:1.5rem;color:#2e7d32;}
.dh-newbest{color:#c98a00;font-weight:800;margin:.3rem 0;}

@media (prefers-reduced-motion: reduce){
  .dh-clouds,.dh-deer.run .body{animation:none!important;}
  #dh.shake{animation:none!important;}
}
@media (min-width:760px){ .dh-card{max-width:420px;} }