@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@600;800;900&family=Baloo+2:wght@600;700;800&display=swap');

.csg-wrap{
  --panel:#0f3b45;
  --panel-2:#144a56;
  --yellow:#ffd54d;
  --yellow-dark:#e8a411;
  --coral:#ff6f59;
  --coral-dark:#d94a36;
  --mint:#5be6c9;
  --cream:#fff6e2;
  --sky-a:#8fe3ff;--sky-b:#b9edff;--sky-c:#dff8ff;--sky-d:#f6d38c;--sky-e:#e8b96a;--sky-glow:rgba(255,244,190,.95);
  width:100%;max-width:1100px;margin:24px auto;border-radius:28px;overflow:hidden;
  background:var(--panel);color:#fff;
  font-family:'Nunito',system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  user-select:none;box-shadow:0 20px 0 rgba(0,0,0,.12),0 30px 60px rgba(0,0,0,.28);
  border:5px solid #0a2b32;
}
.csg-hud{min-height:74px;display:flex;align-items:center;gap:10px;padding:12px 16px;
  background:linear-gradient(180deg,var(--panel-2),var(--panel));position:relative;z-index:5;
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.18);
}
.csg-title{font-family:'Baloo 2',cursive;font-weight:800;letter-spacing:.3px;margin-right:auto;
  font-size:22px;color:var(--yellow);text-shadow:0 3px 0 rgba(0,0,0,.35);
  display:flex;align-items:center;gap:6px;
}
.csg-stat{min-width:78px;padding:7px 12px;border-radius:14px;background:rgba(255,255,255,.09);
  text-align:center;border:2px solid rgba(255,255,255,.08);transition:transform .18s ease;
}
.csg-stat span{display:block;font-size:9px;opacity:.7;font-weight:800;letter-spacing:.4px;text-transform:uppercase}
.csg-stat strong{display:block;font-family:'Baloo 2',cursive;font-size:19px;line-height:1.25;color:#fff}
.csg-stat.csg-bump{animation:csg-bump .3s ease}
@keyframes csg-bump{0%{transform:scale(1)}40%{transform:scale(1.22)}100%{transform:scale(1)}}
.csg-stat.csg-level strong{color:var(--mint)}
.csg-stop{display:none;margin-left:4px;border:0;border-radius:14px;padding:9px 14px;font-family:'Nunito',sans-serif;
  font-weight:800;font-size:12px;letter-spacing:.3px;cursor:pointer;color:#fff;
  background:rgba(255,255,255,.1);border:2px solid rgba(255,255,255,.14);transition:transform .12s ease,background .15s ease;
}
.csg-stop:hover{background:rgba(255,255,255,.18)}
.csg-stop:active{transform:translateY(2px)}

.csg-canvas-wrap{
  height:min(68vw,620px);min-height:360px;position:relative;overflow:hidden;cursor:none;touch-action:none;
  background:
    radial-gradient(120% 55% at 50% 0%, var(--sky-glow), rgba(255,244,190,0) 62%),
    linear-gradient(180deg,var(--sky-a) 0%,var(--sky-b) 30%,var(--sky-c) 38%,var(--sky-d) 41%,var(--sky-e) 100%);
  transition:background 1.1s ease;
}
.csg-canvas{display:block;width:100%;height:100%}

.csg-center-message{
  position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%);z-index:8;text-align:center;
  padding:26px 30px;border-radius:32px 32px 34px 34px/38px 38px 30px 30px;
  background:var(--cream);color:#3a2b1c;backdrop-filter:blur(4px);min-width:min(88%,420px);
  box-shadow:0 4px 0 #e7d4a6,0 18px 40px rgba(0,0,0,.28);border:4px solid #fff;
  animation:csg-pop-in .38s cubic-bezier(.34,1.56,.64,1);
}
@keyframes csg-pop-in{0%{opacity:0;transform:translate(-50%,-50%) scale(.6) rotate(-3deg)}100%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(0)}}
.csg-message-title{font-family:'Baloo 2',cursive;font-size:clamp(24px,4vw,38px);font-weight:800;margin-bottom:8px;color:var(--coral-dark)}
.csg-message-sub{opacity:.85;margin-bottom:18px;font-weight:700}
.csg-start{border:0;border-radius:999px;padding:14px 32px;font-family:'Baloo 2',cursive;font-weight:700;
  font-size:17px;cursor:pointer;color:#3a2b1c;letter-spacing:.3px;
  background:linear-gradient(180deg,#ffe27a,var(--yellow));
  box-shadow:0 6px 0 var(--yellow-dark),0 10px 18px rgba(232,164,17,.35);
  transition:transform .12s ease;
}
.csg-start:hover{transform:translateY(-2px)}
.csg-start:active{transform:translateY(4px);box-shadow:0 2px 0 var(--yellow-dark)}

.csg-slipper-hit{position:absolute;left:50%;top:50%;width:110px;height:190px;
  transform:translate(-50%,-50%) rotate(16deg);z-index:7;border:0;background:transparent;
  cursor:none;display:none;touch-action:none;pointer-events:none;
}
.csg-slipper-hit:before{
  content:"";position:absolute;inset:0;border-radius:46% 54% 40% 44%/22% 24% 74% 72%;
  background:linear-gradient(120deg,#ff9d8a,var(--coral) 48%,var(--coral-dark));
  filter:drop-shadow(2.5px 0 0 #3a2013) drop-shadow(-2.5px 0 0 #3a2013) drop-shadow(0 2.5px 0 #3a2013) drop-shadow(0 -2.5px 0 #3a2013) drop-shadow(0 16px 10px rgba(0,0,0,.28));
}
.csg-slipper-hit:after{
  content:"";position:absolute;left:24px;top:22px;width:58px;height:78px;
  border:14px solid var(--mint);border-bottom:0;border-radius:50% 50% 0 0;transform:rotate(-7deg);
  filter:drop-shadow(1.5px 0 0 #3a2013) drop-shadow(-1.5px 0 0 #3a2013) drop-shadow(0 1.5px 0 #3a2013);
}
.csg-slipper-hit .csg-flower{
  position:absolute;left:50%;top:28%;width:20px;height:20px;transform:translate(-50%,-50%);z-index:2;
  background:radial-gradient(circle at 50% 50%,#fff 0 35%,var(--yellow) 36% 100%);
  border-radius:50%;box-shadow:0 0 0 3px #fff, 0 0 0 4.5px #3a2013;
}
.csg-slipper-hit .csg-weapon-icon{
  position:absolute;inset:0;display:none;align-items:center;justify-content:center;
  font-size:104px;line-height:1;filter:drop-shadow(0 8px 6px rgba(0,0,0,.32));
}
.csg-slipper-hit.csg-emoji-mode:before,
.csg-slipper-hit.csg-emoji-mode:after,
.csg-slipper-hit.csg-emoji-mode .csg-flower{display:none}
.csg-slipper-hit.csg-emoji-mode .csg-weapon-icon{display:flex}
.csg-slipper-hit.slam{animation:csg-slam .28s cubic-bezier(.2,.8,.2,1)}
@keyframes csg-slam{
  0%{transform:translate(-50%,-50%) rotate(16deg)}
  35%{transform:translate(-50%,15%) rotate(8deg) scale(1.08)}
  60%{transform:translate(-50%,-45%) rotate(13deg) scale(.97)}
  100%{transform:translate(-50%,-50%) rotate(16deg)}
}

.csg-hit-text,.csg-miss-text{
  position:absolute;left:50%;top:45%;z-index:10;font-family:'Baloo 2',cursive;
  font-size:clamp(38px,7.5vw,84px);font-weight:800;transform:translate(-50%,-50%) scale(.4);
  opacity:0;pointer-events:none;-webkit-text-stroke:3px #3a2013;paint-order:stroke fill;
}
.csg-hit-text.show,.csg-miss-text.show{animation:csg-pop .6s ease-out forwards}
.csg-hit-text{color:var(--yellow)}
.csg-miss-text{color:#fff}
@keyframes csg-pop{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.4) rotate(-8deg)}
  30%{opacity:1;transform:translate(-50%,-50%) scale(1.18) rotate(4deg)}
  100%{opacity:0;transform:translate(-50%,-74%) scale(1)}
}

.csg-pointer-hint{position:absolute;z-index:9;pointer-events:none;font-size:52px;left:50%;top:50%;
  transform:translate(-50%,-50%);display:none;filter:drop-shadow(0 8px 5px rgba(0,0,0,.25));
}

.csg-shop-btn{position:absolute;left:12px;top:12px;z-index:9;display:none;align-items:center;gap:6px;
  border:0;border-radius:999px;padding:9px 16px 9px 12px;cursor:pointer;
  font-family:'Baloo 2',cursive;font-weight:700;font-size:14px;color:#3a2b1c;letter-spacing:.2px;
  background:linear-gradient(180deg,#ffe27a,var(--yellow));
  box-shadow:0 4px 0 var(--yellow-dark),0 8px 16px rgba(0,0,0,.25);
  transition:transform .12s ease;touch-action:manipulation;
}
.csg-shop-btn:hover{transform:translateY(-2px)}
.csg-shop-btn:active{transform:translateY(2px);box-shadow:0 1px 0 var(--yellow-dark)}
.csg-shop-btn .csg-shop-btn-icon{font-size:18px}

.csg-shop-panel{position:absolute;left:12px;top:58px;z-index:13;width:min(88%,290px);
  background:var(--cream);color:#3a2b1c;border-radius:20px;border:4px solid #fff;
  box-shadow:0 4px 0 #e7d4a6,0 16px 34px rgba(0,0,0,.32);
  opacity:0;transform:translateY(-10px) scale(.96);pointer-events:none;
  transition:opacity .18s ease,transform .18s ease;overflow:hidden;
}
.csg-shop-panel.open{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}
.csg-shop-header{display:flex;align-items:center;justify-content:space-between;
  padding:12px 14px;background:rgba(0,0,0,.06);font-family:'Baloo 2',cursive;font-weight:800;font-size:14px;
}
.csg-shop-close{border:0;background:rgba(0,0,0,.1);color:#3a2b1c;width:24px;height:24px;border-radius:50%;
  cursor:pointer;font-weight:800;line-height:1;font-size:13px;
}
.csg-shop-items{display:flex;flex-direction:column;gap:8px;padding:10px;max-height:min(48vh,320px);overflow-y:auto}
.csg-shop-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:14px;
  background:rgba(255,255,255,.6);border:2px solid rgba(0,0,0,.06);
}
.csg-shop-item-icon{font-size:30px;line-height:1;width:36px;text-align:center;flex:0 0 auto}
.csg-shop-item-info{flex:1;min-width:0}
.csg-shop-item-name{font-family:'Baloo 2',cursive;font-weight:700;font-size:13px}
.csg-shop-item-price{font-size:11px;opacity:.75;font-weight:700}
.csg-shop-item-btn{flex:0 0 auto;border:0;border-radius:999px;padding:7px 12px;font-weight:800;font-size:11px;
  cursor:pointer;color:#3a2b1c;background:linear-gradient(180deg,#ffe27a,var(--yellow));
  box-shadow:0 3px 0 var(--yellow-dark);transition:transform .1s ease;white-space:nowrap;
}
.csg-shop-item-btn:active{transform:translateY(2px);box-shadow:0 1px 0 var(--yellow-dark)}
.csg-shop-item-btn:disabled{cursor:not-allowed;opacity:.45;box-shadow:none;background:#cfcfcf}
.csg-shop-item-btn.equipped{background:linear-gradient(180deg,#8fe3ff,var(--mint));box-shadow:0 3px 0 #2fae91}
.csg-shop-item-btn.owned{background:linear-gradient(180deg,#bfe9ff,#8fd0ff);box-shadow:0 3px 0 #4a9fe0}

.csg-poop-layer{position:absolute;inset:0;z-index:12;pointer-events:none;overflow:hidden}
.csg-poop{position:absolute;left:0;top:0;font-size:30px;line-height:1;
  transform:translate(-50%,-50%) scale(.5) rotate(0deg);opacity:1;
  animation:csg-poop-fly .5s cubic-bezier(.32,.55,.28,1) forwards;
  filter:drop-shadow(0 4px 4px rgba(0,0,0,.35));
}
@keyframes csg-poop-fly{
  0%{transform:translate(-50%,-50%) scale(.5) rotate(0deg);opacity:1}
  65%{transform:translate(calc(-50% + var(--dx)*.88),calc(-50% + var(--dy)*.88)) scale(2.5) rotate(480deg);opacity:1}
  100%{transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(3.1) rotate(560deg);opacity:0}
}
.csg-splat{position:absolute;left:50%;top:58%;width:230px;height:230px;transform:translate(-50%,-50%) scale(.3);
  border-radius:48% 52% 55% 45%/50% 45% 55% 50%;opacity:0;
  background:radial-gradient(circle at 45% 40%,rgba(94,62,22,.6) 0%,rgba(94,62,22,.4) 42%,rgba(94,62,22,0) 74%);
  animation:csg-splat-pop .45s ease-out forwards;
}
@keyframes csg-splat-pop{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.3)}
  30%{opacity:1;transform:translate(-50%,-50%) scale(1.15)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.35)}
}
.csg-splat-text{position:absolute;left:50%;top:52%;transform:translate(-50%,-50%) scale(.5) rotate(-6deg);
  font-family:'Baloo 2',cursive;font-size:clamp(20px,4vw,32px);font-weight:800;color:#fff;
  -webkit-text-stroke:3px #5e3e16;paint-order:stroke fill;opacity:0;
  animation:csg-splat-text-pop .55s ease-out forwards;white-space:nowrap;
}
@keyframes csg-splat-text-pop{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.3) rotate(-6deg)}
  35%{opacity:1;transform:translate(-50%,-50%) scale(1.1) rotate(3deg)}
  100%{opacity:0;transform:translate(-50%,-72%) scale(1) rotate(0)}
}

.csg-upgrade-toast{
  position:absolute;left:50%;top:14px;transform:translate(-50%,-140%);z-index:11;text-align:center;
  padding:10px 22px;border-radius:999px;background:linear-gradient(180deg,#fff6e2,#ffe9b8);color:#3a2b1c;
  box-shadow:0 4px 0 #e7d4a6,0 12px 26px rgba(0,0,0,.3);border:3px solid #fff;pointer-events:none;opacity:0;
  min-width:220px;
}
.csg-upgrade-toast.show{animation:csg-upgrade-pop 2.4s cubic-bezier(.22,.8,.3,1) forwards}
@keyframes csg-upgrade-pop{
  0%{opacity:0;transform:translate(-50%,-140%) scale(.7)}
  12%{opacity:1;transform:translate(-50%,0) scale(1.05)}
  20%{transform:translate(-50%,0) scale(1)}
  85%{opacity:1;transform:translate(-50%,0) scale(1)}
  100%{opacity:0;transform:translate(-50%,-90%) scale(.9)}
}
.csg-upgrade-title{font-family:'Baloo 2',cursive;font-weight:800;font-size:17px;color:var(--coral-dark)}
.csg-upgrade-sub{font-size:12px;font-weight:700;opacity:.85;margin-top:1px}

.csg-bottom{display:flex;justify-content:space-between;gap:12px;padding:12px 16px;
  background:linear-gradient(180deg,var(--panel),#0a2b32);color:rgba(255,255,255,.8);font-size:13px;font-weight:700;
}
.csg-bottom b{color:var(--yellow)}

.csg-wrap.csg-shake .csg-canvas-wrap{animation:csg-shake .22s linear}
@keyframes csg-shake{0%,100%{transform:translate(0)}25%{transform:translate(5px,-3px)}50%{transform:translate(-5px,3px)}75%{transform:translate(3px,2px)}}

@media(max-width:650px){
  .csg-hud{flex-wrap:wrap}
  .csg-title{width:100%;margin-right:0}
  .csg-stat{flex:1;min-width:0}
  .csg-bottom{flex-direction:column;text-align:center}
  .csg-slipper-hit{width:84px;height:148px}
  .csg-pointer-hint{display:block}
  .csg-stop{flex:0 0 auto}
  .csg-upgrade-toast{min-width:180px;padding:8px 16px}
  .csg-upgrade-title{font-size:14px}
  .csg-shop-btn{padding:8px 12px 8px 10px;font-size:12px}
  .csg-shop-panel{top:52px;width:min(90%,260px)}
}