/* ═══════════════════════════════════════════════════════════
   DIGGY'S DUGOUT — Telegram Mini App + standalone browser game.
   Official palette only:
   #F5D4AD #E8B981 #BB8956  ·  #5AD0CF teal  ·  #FFD2D9 pink
   ═══════════════════════════════════════════════════════════ */
:root{
  --tan-1:#F5D4AD; --tan-2:#E8B981; --tan-3:#BB8956;
  --teal:#5AD0CF; --teal-d:#3FB3B2; --pink:#FFD2D9; --pink-d:#FFB9C4;
  --ink:#271C00; --cream:#FFF6E8;
  --bd:3px solid var(--ink);
  --sh:5px 5px 0 var(--ink);
  --ease:cubic-bezier(.34,1.56,.64,1);
  --font:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;font-family:var(--font);color:var(--ink);background:var(--teal);
  overflow:hidden;overscroll-behavior:none;user-select:none;-webkit-user-select:none;
  -webkit-tap-highlight-color:transparent;
}
#app{
  position:relative;height:100dvh;display:flex;flex-direction:column;
  padding:calc(env(safe-area-inset-top) + 10px) 12px calc(env(safe-area-inset-bottom) + 10px);
  gap:8px;max-width:640px;margin:0 auto;
}
body::before{
  content:"";position:fixed;inset:-40%;z-index:-1;
  background:repeating-conic-gradient(from 0deg,var(--teal) 0deg 12deg,var(--teal-d) 12deg 24deg);
  opacity:.22;animation:spin 70s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── head ── */
.d-head{display:flex;align-items:center;gap:10px}
.d-brand{display:flex;align-items:center;gap:10px;min-width:0}
.d-brand-lot{width:48px;height:48px;flex:none}
.d-head h1{margin:0;font-size:clamp(19px,5.4vw,27px);font-weight:900;letter-spacing:-.035em;
  color:var(--cream);-webkit-text-stroke:2.5px var(--ink);paint-order:stroke fill;white-space:nowrap}
.d-tag{margin:1px 0 0;font-size:11.5px;font-weight:700;opacity:.65}
.d-icon{margin-left:auto;width:40px;height:40px;flex:none;border:var(--bd);border-radius:12px;
  background:var(--cream);box-shadow:3px 3px 0 var(--ink);font-size:17px;font-weight:900;
  color:var(--ink);cursor:pointer;transition:transform .15s var(--ease)}
.d-icon:active{transform:translate(3px,3px);box-shadow:none}

/* ── hud ── */
.d-hud{display:flex;align-items:center;gap:8px}
.d-stat{background:var(--cream);border:var(--bd);border-radius:99px;box-shadow:3px 3px 0 var(--ink);
  padding:5px 15px;display:flex;align-items:baseline;gap:7px}
.d-stat small{font-size:11px;letter-spacing:.13em;text-transform:uppercase;opacity:.55;font-weight:800}
.d-stat b{font-size:19px;font-weight:900}
.d-best{background:var(--tan-2)}
.d-stat.pump{animation:pump .35s var(--ease)}
@keyframes pump{0%{transform:scale(1)}45%{transform:scale(1.22) rotate(-3deg)}100%{transform:scale(1)}}
.d-strikes{margin-left:auto;display:flex;gap:6px}
.d-strikes i{width:20px;height:20px;border:var(--bd);border-radius:50%;background:var(--cream);
  transition:background .2s,transform .2s var(--ease)}
.d-strikes i.on{background:#ED2F42;transform:scale(1.16) rotate(-8deg)}

/* ── field ── */
.d-field{position:relative;flex:1;min-height:210px;border:var(--bd);border-radius:22px;
  box-shadow:var(--sh);overflow:hidden;cursor:pointer;touch-action:manipulation}
.d-sky{position:absolute;inset:0 0 42% 0;background:var(--pink)}
.d-dirt{position:absolute;inset:58% 0 0 0;background:var(--tan-1);
  border-top:4px solid var(--ink)}
.d-dirt::after{content:"";position:absolute;inset:0;opacity:.3;
  background-image:radial-gradient(circle at 2px 2px,var(--tan-3) 1.5px,transparent 0);
  background-size:16px 16px}
.d-field.shake{animation:shake .3s}
@keyframes shake{0%,100%{transform:translate(0,0)}
  25%{transform:translate(-7px,4px) rotate(-.7deg)}
  50%{transform:translate(6px,-3px) rotate(.6deg)}
  75%{transform:translate(-4px,-2px)}}
.d-zone{position:absolute;left:20%;top:12%;bottom:16%;width:64px;transform:translateX(-50%);
  border:3px dashed var(--ink);border-radius:12px;opacity:.26;pointer-events:none}
.d-zone.live{opacity:.9;background:rgba(255,255,255,.4);animation:zpop .16s var(--ease)}
@keyframes zpop{from{transform:translateX(-50%) scale(.85)}to{transform:translateX(-50%) scale(1)}}
.d-plate{position:absolute;left:20%;bottom:7%;width:72px;height:15px;border:var(--bd);
  border-radius:5px;background:var(--cream);transform:translateX(-50%) skewX(-14deg)}
.d-batter{position:absolute;left:20%;bottom:1%;width:38%;max-width:190px;aspect-ratio:1;
  transform:translateX(-52%);z-index:3;pointer-events:none}
.d-batter.swing{animation:lunge .3s var(--ease)}
@keyframes lunge{0%{transform:translateX(-52%) rotate(0) scale(1)}
  40%{transform:translateX(-43%) rotate(-14deg) scale(1.14)}
  100%{transform:translateX(-52%) rotate(0) scale(1)}}

.d-ball{position:absolute;width:32px;height:32px;border-radius:50%;background:var(--cream);
  border:var(--bd);box-shadow:2px 2px 0 var(--ink);z-index:2;will-change:transform;
  display:grid;place-items:center;font-size:14px;top:0;left:0}
.d-ball::before,.d-ball::after{content:"";position:absolute;width:24px;height:24px;
  border:2px solid transparent;border-left-color:var(--tan-3);border-radius:50%;left:2px;top:2px}
.d-ball::after{transform:rotate(180deg)}
.d-ball.dead{transition:transform .55s ease-out,opacity .55s;opacity:0}

.d-pop{position:absolute;z-index:6;font-weight:900;font-size:clamp(22px,6vw,34px);
  color:var(--cream);-webkit-text-stroke:3px var(--ink);paint-order:stroke fill;
  pointer-events:none;white-space:nowrap;animation:popup .85s ease-out forwards}
@keyframes popup{0%{transform:translate(-50%,0) scale(.5) rotate(-8deg);opacity:0}
  25%{transform:translate(-50%,-20px) scale(1.15) rotate(4deg);opacity:1}
  100%{transform:translate(-50%,-80px) scale(1) rotate(-3deg);opacity:0}}
.d-spark{position:absolute;width:11px;height:11px;border-radius:50%;background:var(--tan-2);
  border:2px solid var(--ink);z-index:5;pointer-events:none}

/* little crowd of stickers along the fence */
.d-crowd{position:absolute;left:0;right:0;top:2%;height:56px;display:flex;gap:2%;
  justify-content:flex-end;padding-right:3%;pointer-events:none;opacity:.9}
.d-crowd div{width:52px;height:52px;animation:cheer 2.4s ease-in-out infinite}
.d-crowd div:nth-child(2){animation-delay:.5s}
.d-crowd div:nth-child(3){animation-delay:1s}
@keyframes cheer{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-9px) rotate(4deg)}}

.d-hint{margin:0;text-align:center;font-size:12.5px;font-weight:800;opacity:.6}

/* ── overlays ── */
.d-over{position:fixed;inset:0;z-index:40;display:grid;place-items:center;padding:16px;
  background:rgba(90,208,207,.94);backdrop-filter:blur(4px);animation:fade .3s ease both}
.d-over[hidden]{display:none}
@keyframes fade{from{opacity:0}to{opacity:1}}
.d-card{background:var(--cream);border:var(--bd);border-radius:24px;box-shadow:var(--sh);
  padding:22px 22px 20px;width:min(400px,92vw);text-align:center;
  animation:cardin .4s var(--ease) both;max-height:88dvh;overflow:auto}
.d-card-wide{width:min(460px,94vw)}
@keyframes cardin{from{transform:translateY(22px) scale(.94);opacity:0}to{transform:none;opacity:1}}
.d-card-lot{width:110px;height:110px;margin:-6px auto 2px}
.d-card h2{margin:0;font-size:clamp(24px,6.5vw,34px);font-weight:900;letter-spacing:-.03em;line-height:1.05}
.d-card h2::first-letter{color:var(--tan-3)}
.d-card p{margin:8px 0 0;font-size:14.5px;font-weight:600;opacity:.78;line-height:1.5}
.d-sub{opacity:.6!important;font-size:13px!important}
.d-score{margin:14px 0 4px;display:flex;flex-direction:column;align-items:center}
.d-score b{font-size:58px;line-height:1;font-weight:900;color:var(--tan-3);
  -webkit-text-stroke:3px var(--ink);paint-order:stroke fill}
.d-score span{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;opacity:.55;margin-top:3px}
.d-record{margin:6px 0 0;font-weight:900;font-size:15px;background:var(--tan-2);
  border:var(--bd);border-radius:99px;padding:6px 14px;display:inline-block;animation:pump .5s var(--ease)}
.d-btn{margin-top:11px;width:100%;font-family:inherit;font-weight:900;font-size:16px;
  border:var(--bd);border-radius:99px;padding:12px 18px;background:var(--tan-2);color:var(--ink);
  box-shadow:var(--sh);cursor:pointer;transition:transform .14s var(--ease),box-shadow .14s}
.d-btn:active{transform:translate(4px,4px);box-shadow:1px 1px 0 var(--ink)}
.d-btn-go{background:var(--tan-2)}
.d-btn-ghost{background:var(--cream);font-size:14px;padding:9px 16px;box-shadow:3px 3px 0 var(--ink)}

/* ── leaderboard ── */
.d-board{list-style:none;margin:14px 0 0;padding:0;text-align:left;display:flex;
  flex-direction:column;gap:6px;max-height:46dvh;overflow:auto}
.d-board li{display:flex;align-items:center;gap:10px;background:var(--tan-1);
  border:2px solid var(--ink);border-radius:14px;padding:8px 12px;font-weight:800;font-size:14.5px}
.d-board li.me{background:var(--pink)}
.d-board .rank{width:26px;font-size:15px;font-weight:900;color:var(--tan-3);
  -webkit-text-stroke:1.2px var(--ink);paint-order:stroke fill}
.d-board .who{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.d-board .n{font-size:18px;font-weight:900}
.d-board .empty{opacity:.6;font-weight:700;justify-content:center}

@media (max-height:620px){
  .d-brand-lot{width:38px;height:38px}
  .d-card-lot{width:78px;height:78px}
  .d-crowd{display:none}
}