:root {
  --ink: #1a1720;
  --cream: #fff7d6;
  --honey: #f6c445;
  --amber: #e99924;
  --orange: #ef6d32;
  --red: #e83d4f;
  --blue: #49cbea;
  --green: #68be67;
  --stage-bottom: 48px;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: #16121d; color: var(--ink); font-family: "IBM Plex Mono", ui-monospace, monospace; overflow: hidden; }
body { min-height: 100dvh; touch-action: none; overscroll-behavior: none; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
.game-shell {
  min-height: 100dvh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 8px;
  padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
  background:
    radial-gradient(circle at 18% 14%, rgba(246,196,69,.18), transparent 28%),
    linear-gradient(145deg, #25172b, #11131d 72%);
}
.hud {
  z-index: 20;
  min-height: 54px;
  display: grid;
  grid-template-columns: auto 1fr 64px;
  grid-template-areas: "back score wave" "stings stings stings";
  gap: 6px;
  align-items: center;
}
.back {
  grid-area: back;
  align-self: stretch;
  display: grid;
  place-items: center;
  min-width: 70px;
  border: 2px solid var(--honey);
  color: var(--cream);
  text-decoration: none;
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
  background: rgba(17,19,29,.72);
}
.hud-card, .sting-card {
  border: 2px solid var(--ink);
  background: var(--cream);
  box-shadow: 3px 3px 0 var(--ink);
  padding: 5px 8px;
  text-transform: uppercase;
}
.hud-card span, .sting-card > span { display: block; font-size: 7px; letter-spacing: .16em; opacity: .72; }
.hud-card strong { display: block; font-family: "Black Han Sans", sans-serif; font-size: 18px; line-height: 1; font-weight: 400; }
.score-card { grid-area: score; }
.wave-card { grid-area: wave; text-align: center; background: var(--honey); }
.sting-card {
  grid-area: stings;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 8px;
  padding-block: 4px;
}
.sting-pips { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 3px; }
.sting-pips i {
  height: 8px;
  border: 2px solid var(--ink);
  background: #d7d2ba;
  transform: skewX(-14deg);
  transition: transform .15s ease, background .15s ease;
}
.sting-pips i.on { background: var(--red); transform: skewX(-14deg) scaleY(1.35); box-shadow: 0 0 9px rgba(232,61,79,.7); }
.stage-wrap { min-height: 0; position: relative; }
.stage {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 320px;
  overflow: hidden;
  border: 4px solid var(--ink);
  border-radius: 14px;
  background:
    linear-gradient(rgba(255,255,255,.24), rgba(255,255,255,0) 34%),
    linear-gradient(#67d8ef 0 65%, #a6df72 65% 100%);
  box-shadow: 7px 7px 0 #05050a;
  isolation: isolate;
}
.stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: .18;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(26,23,32,.22) 3px 4px);
}
.stage::after { content: ""; position: absolute; inset: 0; z-index: 23; pointer-events: none; opacity: 0; background: white; }
.stage.scene-changing::after { animation: scene-wipe .62s ease-in-out; }
@keyframes scene-wipe { 0%,100% { opacity: 0; } 45%,55% { opacity: .92; } }
.level-scenery { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; transition: opacity .32s ease; }
.level-scenery i { position: absolute; display: block; }
.stage.theme-1 { background: linear-gradient(rgba(255,255,255,.24), rgba(255,255,255,0) 34%), linear-gradient(#67d8ef 0 65%, #a6df72 65% 100%); }
.stage.theme-1 .level-scenery i { display: none; }
.stage.theme-2 { background: linear-gradient(#ffb781 0 58%, #f29a65 58% 65%, #77aa58 65% 100%); }
.stage.theme-2 .scene-a, .stage.theme-2 .scene-b { bottom: var(--stage-bottom); width: 34px; height: 150px; border: 4px solid var(--ink); background: #6e4329; }
.stage.theme-2 .scene-a { left: 12%; } .stage.theme-2 .scene-b { right: 17%; height: 125px; }
.stage.theme-2 .scene-a::before, .stage.theme-2 .scene-b::before { content: ""; position: absolute; left: 50%; top: -62px; width: 120px; height: 98px; transform: translateX(-50%); border: 4px solid var(--ink); border-radius: 50%; background: #5d9c4f; box-shadow: 35px 18px 0 -8px #78b95d, -38px 20px 0 -10px #78b95d; }
.stage.theme-2 .scene-c { left: 42%; bottom: calc(var(--stage-bottom) + 7px); width: 96px; height: 22px; border: 4px solid var(--ink); border-radius: 50%; background: #d94f42; }
.stage.theme-3 { background: linear-gradient(#8ee3f2 0 62%, #e4d489 62% 68%, #78bd61 68% 100%); }
.stage.theme-3 .scene-a { left: 10%; bottom: calc(var(--stage-bottom) + 2px); width: 145px; height: 82px; border: 4px solid var(--ink); background: repeating-conic-gradient(#fff 0 25%, #e84f5e 0 50%) 50% / 32px 32px; transform: skewX(-8deg); }
.stage.theme-3 .scene-b { right: 12%; bottom: calc(var(--stage-bottom) + 3px); width: 88px; height: 55px; border: 4px solid var(--ink); border-radius: 8px 8px 16px 16px; background: #8a542f; }
.stage.theme-3 .scene-b::before { content: ""; position: absolute; left: 11px; right: 11px; top: -24px; height: 27px; border: 4px solid var(--ink); border-bottom: 0; border-radius: 24px 24px 0 0; }
.stage.theme-3 .scene-c { right: 4%; top: 19%; width: 72px; height: 72px; border-radius: 50%; background: #fff4be; opacity: .65; }
.stage.theme-4 { background: linear-gradient(#315b50 0 63%, #243e39 63% 68%, #416b45 68% 100%); }
.stage.theme-4 .sun { opacity: .3; background: #f0e6b2; }
.stage.theme-4 .cloud { opacity: .18; }
.stage.theme-4 .scene-a, .stage.theme-4 .scene-b, .stage.theme-4 .scene-c { bottom: var(--stage-bottom); width: 70px; height: 82%; background: #18372f; clip-path: polygon(50% 0,100% 28%,72% 28%,100% 54%,70% 54%,100% 82%,62% 82%,62% 100%,38% 100%,38% 82%,0 82%,30% 54%,0 54%,28% 28%,0 28%); }
.stage.theme-4 .scene-a { left: -12px; } .stage.theme-4 .scene-b { left: 38%; height: 66%; opacity: .7; } .stage.theme-4 .scene-c { right: -8px; height: 91%; }
.stage.theme-5 { background: radial-gradient(ellipse at 50% 78%, #6f6658 0 18%, #3c3a3d 45%, #17171d 100%); }
.stage.theme-5 .sun, .stage.theme-5 .cloud, .stage.theme-5 .honeycomb, .stage.theme-5 .hive { opacity: 0; }
.stage.theme-5 .floor { background: repeating-linear-gradient(135deg, #4a4540 0 13px, #5b554e 13px 26px); }
.stage.theme-5 .scene-a, .stage.theme-5 .scene-b, .stage.theme-5 .scene-c { top: 0; width: 24%; height: 36%; background: #27262a; clip-path: polygon(0 0,100% 0,80% 48%,64% 24%,48% 76%,26% 36%,10% 64%); }
.stage.theme-5 .scene-a { left: 0; } .stage.theme-5 .scene-b { left: 38%; transform: scaleX(-1); } .stage.theme-5 .scene-c { right: 0; }
.stage.theme-6 { background: radial-gradient(circle at 75% 18%, #fff3b5 0 7%, transparent 7.5%), linear-gradient(#554081 0 62%, #372d5d 62% 68%, #44614f 68% 100%); }
.stage.theme-6 .sun { opacity: 0; }
.stage.theme-6 .cloud { opacity: .25; filter: hue-rotate(170deg); }
.stage.theme-6 .scene-a { inset: 0; background-image: radial-gradient(circle, white 0 2px, transparent 2.5px); background-size: 54px 47px; opacity: .55; }
.stage.theme-6 .scene-b { left: 8%; bottom: var(--stage-bottom); width: 95px; height: 140px; background: #25213e; clip-path: polygon(0 100%,12% 44%,24% 70%,38% 22%,51% 63%,68% 0,80% 54%,100% 100%); }
.stage.theme-6 .scene-c { right: 8%; bottom: calc(var(--stage-bottom) + 10px); width: 110px; height: 35px; border-radius: 50%; background: rgba(255,255,255,.22); }
.sun { position: absolute; right: 8%; top: 7%; width: 72px; height: 72px; border: 4px solid var(--ink); border-radius: 50%; background: var(--honey); box-shadow: 0 0 0 9px rgba(255,247,214,.5); }
.cloud { position: absolute; width: 110px; height: 32px; border: 3px solid var(--ink); border-radius: 28px; background: var(--cream); opacity: .8; }
.cloud::before, .cloud::after { content: ""; position: absolute; bottom: -3px; border: 3px solid var(--ink); border-bottom: 0; border-radius: 50% 50% 0 0; background: var(--cream); }
.cloud::before { left: 18px; width: 38px; height: 36px; }
.cloud::after { right: 16px; width: 45px; height: 46px; }
.cloud-a { left: -24px; top: 16%; transform: scale(.74); }
.cloud-b { left: 38%; top: 8%; transform: scale(.54); opacity: .55; }
.honeycomb { position: absolute; opacity: .13; width: 130px; height: 112px; background-size: 30px 52px; background-image: linear-gradient(30deg, var(--ink) 12%, transparent 12.5%, transparent 87%, var(--ink) 87.5%, var(--ink)), linear-gradient(150deg, var(--ink) 12%, transparent 12.5%, transparent 87%, var(--ink) 87.5%, var(--ink)), linear-gradient(30deg, var(--ink) 12%, transparent 12.5%, transparent 87%, var(--ink) 87.5%, var(--ink)), linear-gradient(150deg, var(--ink) 12%, transparent 12.5%, transparent 87%, var(--ink) 87.5%, var(--ink)); background-position: 0 0, 0 0, 15px 26px, 15px 26px; }
.honeycomb-a { left: 5%; top: 34%; }
.honeycomb-b { right: 4%; top: 29%; transform: rotate(8deg); }
.hive { position: absolute; right: 5%; bottom: var(--stage-bottom); width: 84px; height: 98px; z-index: 3; filter: drop-shadow(5px 6px 0 rgba(26,23,32,.34)); }
.hive i { position: absolute; left: 50%; transform: translateX(-50%); border: 3px solid var(--ink); border-radius: 50%; background: var(--amber); }
.hive i:nth-child(1) { bottom: 2px; width: 82px; height: 42px; }
.hive i:nth-child(2) { bottom: 28px; width: 70px; height: 45px; }
.hive i:nth-child(3) { bottom: 55px; width: 54px; height: 38px; }
.hive span { position: absolute; z-index: 2; left: 50%; bottom: 10px; width: 28px; height: 20px; transform: translateX(-50%); border: 3px solid var(--ink); border-radius: 50% 50% 0 0; background: #21161d; }
.floor { position: absolute; z-index: 5; left: 0; right: 0; bottom: 0; height: var(--stage-bottom); border-top: 4px solid var(--ink); background: repeating-linear-gradient(135deg, #5ba75e 0 13px, #72c96d 13px 26px); }
.floor span { position: absolute; left: 0; right: 0; top: -12px; height: 12px; background: repeating-linear-gradient(80deg, transparent 0 8px, #397c48 8px 11px, transparent 11px 16px); }
.bee-layer, .fx-layer { position: absolute; inset: 0; z-index: 8; pointer-events: none; }
.bee {
  position: absolute;
  width: var(--bee-size, 44px);
  height: calc(var(--bee-size, 44px) * .68);
  transform-origin: 50% 50%;
  will-change: transform;
  filter: drop-shadow(3px 4px 0 rgba(26,23,32,.36));
}
.bee .body { position: absolute; left: 20%; top: 18%; width: 64%; height: 62%; border: 3px solid var(--ink); border-radius: 50%; overflow: hidden; background: repeating-linear-gradient(90deg, var(--honey) 0 22%, var(--ink) 22% 36%); }
.bee .body::before { content: ""; position: absolute; left: 5%; top: 20%; width: 7px; height: 7px; border-radius: 50%; background: white; box-shadow: 1px 1px 0 var(--ink); }
.bee .wing { position: absolute; top: -3%; width: 42%; height: 54%; border: 3px solid var(--ink); border-radius: 65% 35% 60% 40%; background: rgba(255,255,255,.74); transform-origin: 80% 90%; animation: wing .09s linear infinite alternate; }
.bee .wing-a { left: 12%; transform: rotate(-22deg); }
.bee .wing-b { right: 12%; transform: scaleX(-1) rotate(-22deg); }
.bee .stinger { position: absolute; right: 4%; top: 40%; width: 18%; height: 18%; background: var(--ink); clip-path: polygon(0 0,100% 50%,0 100%); }
.bee.hornet .body { background: repeating-linear-gradient(90deg, #f59f2f 0 18%, var(--ink) 18% 42%); }
.bee.hornet { filter: drop-shadow(3px 4px 0 rgba(180,45,39,.45)); }
.bee.bumble .body { border-width: 4px; background: repeating-linear-gradient(90deg, #ffd454 0 24%, #34202c 24% 44%); }
.bee.scout .wing { animation-duration: .055s; }
.bee.angry { filter: drop-shadow(0 0 8px var(--red)) drop-shadow(3px 4px 0 rgba(26,23,32,.36)); }
.bee.winding .body { animation: bee-windup .08s linear infinite alternate; }
.bee.winding .wing { animation-duration: .045s; }
@keyframes bee-windup { to { transform: translate(2px,-2px); } }
.bee.dead { filter: grayscale(.75) drop-shadow(3px 4px 0 rgba(26,23,32,.28)); }
.bee.dead .wing { animation: none; opacity: .3; }
.bee.dead .body::before { display: none; }
.poof { position: absolute; z-index: 19; width: 10px; height: 10px; border: 2px solid var(--ink); border-radius: 2px; background: var(--cream); transform: rotate(20deg); animation: poof-fly .5s ease-out forwards; pointer-events: none; }
@keyframes poof-fly { to { transform: translate(var(--dx, 0), var(--dy, -30px)) rotate(170deg) scale(.15); opacity: 0; } }
@keyframes wing { to { transform: rotate(28deg) scaleY(.55); } }
.bear-break {
  position: absolute;
  z-index: 24;
  left: 0;
  right: 0;
  bottom: var(--stage-bottom);
  height: min(58%, 300px);
  pointer-events: none;
  opacity: 0;
}
.bear-break.show { opacity: 1; }
.flirty-bear {
  position: absolute;
  bottom: 0;
  width: clamp(118px, 31vw, 184px);
  height: clamp(150px, 39vw, 220px);
  transition: transform .52s cubic-bezier(.18,.88,.28,1.08);
  filter: drop-shadow(7px 8px 0 rgba(26,23,32,.3));
}
.bear-break.from-left .flirty-bear { left: 0; transform: translateX(-112%); }
.bear-break.from-right .flirty-bear { right: 0; transform: translateX(112%) scaleX(-1); }
.bear-break.from-left.show .flirty-bear { transform: translateX(4%); }
.bear-break.from-right.show .flirty-bear { transform: translateX(-4%) scaleX(-1); }
.bear-break.from-left.leaving .flirty-bear { transform: translateX(-118%); }
.bear-break.from-right.leaving .flirty-bear { transform: translateX(118%) scaleX(-1); }
.bear-body { position: absolute; left: 16%; bottom: 0; width: 68%; height: 62%; border: 5px solid var(--ink); border-radius: 48% 48% 22% 22%; background: #8d5634; }
.bear-head { position: absolute; left: 13%; top: 4%; width: 74%; height: 58%; border: 5px solid var(--ink); border-radius: 48%; background: #a86b42; }
.bear-ear { position: absolute; z-index: -1; top: 1%; width: 31%; height: 25%; border: 5px solid var(--ink); border-radius: 50%; background: #a86b42; }
.bear-ear::after { content: ""; position: absolute; inset: 22%; border-radius: 50%; background: #ef9b7d; }
.bear-ear.ear-a { left: 7%; } .bear-ear.ear-b { right: 7%; }
.bear-eye { position: absolute; top: 34%; width: 8%; height: 8%; border-radius: 50%; background: var(--ink); }
.bear-eye.eye-a { left: 28%; } .bear-eye.eye-b { right: 28%; }
.bear-muzzle { position: absolute; left: 31%; top: 47%; width: 38%; height: 31%; border: 4px solid var(--ink); border-radius: 50%; background: #d89a6e; }
.bear-nose { position: absolute; left: 43%; top: 49%; width: 16%; height: 12%; border-radius: 50%; background: var(--ink); }
.bear-arm { position: absolute; right: 0; bottom: 23%; width: 37%; height: 22%; border: 5px solid var(--ink); border-radius: 45%; background: #a86b42; transform-origin: 15% 50%; transform: rotate(-22deg); }
.handkerchief { position: absolute; right: -18px; top: -26px; width: 38px; height: 34px; border: 3px solid var(--ink); border-radius: 4px 14px 5px 12px; background: white; transform: rotate(14deg); box-shadow: inset -7px -7px 0 #e9f0f2; opacity: 0; }
.handkerchief::after { content: ""; position: absolute; right: -10px; bottom: -7px; width: 19px; height: 16px; border: 3px solid var(--ink); border-left: 0; border-top: 0; background: white; transform: skew(-18deg); }
.bear-break.waving .bear-arm { animation: bear-wave .34s ease-in-out infinite alternate; }
.bear-break.waving .handkerchief { opacity: 1; animation: hanky-flutter .16s ease-in-out infinite alternate; }
.bear-kiss { position: absolute; z-index: 4; left: 72%; top: 30%; color: #ef3c63; font: 400 34px "Black Han Sans"; opacity: 0; -webkit-text-stroke: 2px var(--ink); text-shadow: 3px 3px 0 white; }
.bear-break.kissing .bear-kiss { animation: bear-kiss .92s ease-out forwards; }
.bear-break.kissing .bear-head { animation: bear-pucker .32s ease-in-out 2 alternate; }
@keyframes bear-wave { to { transform: rotate(-62deg) translateY(-7px); } }
@keyframes hanky-flutter { to { transform: rotate(-12deg) skewY(7deg) scale(.92,1.08); } }
@keyframes bear-kiss { 0% { opacity: 0; transform: translate(0,0) scale(.35) rotate(-12deg); } 18% { opacity: 1; } 100% { opacity: 0; transform: translate(86px,-62px) scale(1.45) rotate(18deg); } }
@keyframes bear-pucker { to { transform: rotate(-4deg) scale(1.03); } }
.bear-break.chasing .bear-line { opacity: 0 !important; }
.bear-break.chase-right .flirty-bear { animation: bear-chase-right 1.45s ease-in forwards; }
.bear-break.chase-left .flirty-bear { animation: bear-chase-left 1.45s ease-in forwards; }
@keyframes bear-chase-right { from { transform: translateX(4%); } to { transform: translateX(calc(100vw + 120px)) rotate(5deg); } }
@keyframes bear-chase-left { from { transform: translateX(-4%) scaleX(-1); } to { transform: translateX(calc(-100vw - 120px)) scaleX(-1) rotate(5deg); } }
.bear-line {
  position: absolute;
  z-index: 2;
  top: 4%;
  left: 50%;
  width: min(68%, 430px);
  transform: translate(-50%, 10px) rotate(-1deg);
  border: 4px solid var(--ink);
  border-radius: 18px;
  padding: 10px 13px;
  background: white;
  color: var(--ink);
  box-shadow: 6px 6px 0 var(--red);
  font: 400 clamp(13px, 3.7vw, 20px) "Black Han Sans";
  line-height: 1.15;
  text-align: center;
  opacity: 0;
}
.bear-break.talking .bear-line { animation: bear-line-pop .2s ease-out forwards; }
@keyframes bear-line-pop { to { opacity: 1; transform: translate(-50%,0) rotate(-1deg); } }
.parker {
  --parker-width: 96px;
  --parker-height: 132px;
  position: absolute;
  z-index: 10;
  left: 0;
  bottom: var(--stage-bottom);
  width: var(--parker-width);
  height: var(--parker-height);
  transform: translate3d(0,0,0);
  transform-origin: 50% 100%;
  will-change: transform;
}
.parker-shadow { position: absolute; left: 18%; bottom: -5px; width: 64%; height: 14px; border-radius: 50%; background: rgba(26,23,32,.28); transition: transform .12s ease, opacity .12s ease; }
.parker .torso { position: absolute; left: 23%; bottom: 30px; width: 54%; height: 60px; border: 4px solid var(--ink); border-radius: 24px 24px 14px 14px; background: var(--blue); transform: rotate(-1deg); }
.shirt-mark { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%) rotate(3deg); color: white; font: 400 26px "Black Han Sans"; -webkit-text-stroke: 2px var(--ink); }
.parker .head { position: absolute; left: 22%; top: 0; width: 58%; height: 65px; border: 4px solid var(--ink); border-radius: 46% 46% 43% 43%; background: #eaa270; }
.parker .ear { position: absolute; top: 29px; width: 12px; height: 18px; border: 3px solid var(--ink); border-radius: 50%; background: #eaa270; }
.parker .ear-left { left: -10px; } .parker .ear-right { right: -10px; }
.hair { position: absolute; left: 10px; right: 8px; top: -4px; height: 22px; border-radius: 50% 50% 35% 35%; background: #40261f; }
.straw-hat {
  position: absolute;
  z-index: 18;
  left: 13px;
  top: -18px;
  width: 74px;
  height: 18px;
  border: 4px solid var(--ink);
  border-radius: 50%;
  background: #f4d067;
  box-shadow: inset 0 -4px 0 rgba(233,153,36,.55);
  transform: translate3d(0,0,0) rotateZ(-4deg);
  transform-origin: 50% 50%;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  will-change: transform;
  pointer-events: none;
}
.straw-hat .brim { position: absolute; left: 9px; right: 9px; top: -13px; height: 26px; border: 4px solid var(--ink); border-radius: 50%; background: #f8df87; box-shadow: inset 0 -5px 0 rgba(233,153,36,.45); }
.straw-hat .band { position: absolute; left: 16px; right: 16px; top: -2px; height: 8px; border-radius: 8px; background: #7f4a1f; }
.eye { position: absolute; top: 31px; width: 6px; height: 8px; border-radius: 50%; background: var(--ink); }
.eye-left { left: 17px; } .eye-right { right: 17px; }
.brow { position: absolute; top: 24px; width: 15px; height: 4px; border-radius: 4px; background: var(--ink); }
.brow-left { left: 11px; transform: rotate(10deg); } .brow-right { right: 11px; transform: rotate(-10deg); }
.nose { position: absolute; left: 50%; top: 37px; width: 7px; height: 8px; border: 2px solid var(--ink); border-left: 0; border-top: 0; transform: translateX(-50%) rotate(20deg); }
.mouth { position: absolute; left: 50%; bottom: 7px; width: 22px; height: 8px; border: 3px solid var(--ink); border-top: 0; border-radius: 0 0 50% 50%; transform: translateX(-50%); }
.leg { position: absolute; bottom: 7px; width: 24px; height: 38px; border: 4px solid var(--ink); border-radius: 12px; background: #48507d; transform-origin: 50% 0; }
.leg i { position: absolute; bottom: -7px; width: 33px; height: 15px; border: 4px solid var(--ink); border-radius: 12px 18px 8px 8px; background: white; }
.leg-left { left: 23px; transform: rotate(3deg); } .leg-right { right: 23px; transform: rotate(-3deg); }
.leg-left i { left: -13px; } .leg-right i { right: -13px; transform: scaleX(-1); }
.arm { position: absolute; top: 65px; width: 22px; height: 57px; border: 4px solid var(--ink); border-radius: 15px; background: #eaa270; transform-origin: 50% 10%; }
.arm i { position: absolute; z-index: 2; bottom: -9px; left: -5px; width: 30px; height: 25px; border: 4px solid var(--ink); border-radius: 50%; background: #eaa270; }
.arm-left { left: 5px; transform: rotate(13deg); } .arm-right { right: 5px; transform: rotate(-13deg); }
.swat-arc { position: absolute; right: -48px; top: 32px; width: 94px; height: 94px; border: 12px solid transparent; border-right-color: rgba(255,255,255,.9); border-top-color: var(--honey); border-radius: 50%; opacity: 0; transform: rotate(20deg) scale(.45); }
.parker.swat-right .arm-right, .parker.swat-left .arm-left { z-index: 20; }
.parker.swat-right .arm-right i, .parker.swat-left .arm-left i { z-index: 23; }
.parker.swat-right .arm-right { animation: arm-grab-swat-right .44s cubic-bezier(.3,.62,.22,1) both; }
.parker.swat-left .arm-left { animation: arm-grab-swat-left .44s cubic-bezier(.3,.62,.22,1) both; }
.parker.swat-right .straw-hat { animation: hat-brim-swat-right .44s cubic-bezier(.3,.62,.22,1) both; }
.parker.swat-left .straw-hat { animation: hat-brim-swat-left .44s cubic-bezier(.3,.62,.22,1) both; }
.parker.swatting .swat-arc { animation: swat-arc-right .44s ease-out both; }
.parker.swat-left .swat-arc { left: -48px; right: auto; animation-name: swat-arc-left; }
.parker.jumping .parker-shadow { transform: scale(.62); opacity: .45; }
.parker.hit { animation: parker-hit .34s steps(2); }
.parker.swelling { animation: parker-swell .86s ease-out forwards; }
.parker.swelling .torso, .parker.swelling .head { transform: scale(1.1,1.08); }
.parker.defeated { animation: parker-fall .72s cubic-bezier(.3,.8,.3,1) forwards; }
@keyframes arm-grab-swat-right {
  0% { transform: rotate(-13deg); }
  17% { transform: rotate(-142deg) translate(0,-2px); }
  28% { transform: rotate(-142deg) translate(0,-2px); }
  47% { transform: rotate(-92deg) translate(3px,-4px); }
  68% { transform: rotate(-48deg) translate(5px,-2px); }
  80% { transform: rotate(-86deg) translate(3px,-3px); }
  93% { transform: rotate(-142deg) translate(0,-2px); }
  100% { transform: rotate(-13deg); }
}
@keyframes arm-grab-swat-left {
  0% { transform: rotate(13deg); }
  17% { transform: rotate(142deg) translate(0,-2px); }
  28% { transform: rotate(142deg) translate(0,-2px); }
  47% { transform: rotate(92deg) translate(-3px,-4px); }
  68% { transform: rotate(48deg) translate(-5px,-2px); }
  80% { transform: rotate(86deg) translate(-3px,-3px); }
  93% { transform: rotate(142deg) translate(0,-2px); }
  100% { transform: rotate(13deg); }
}
@keyframes hat-brim-swat-right {
  0%,20% { transform: translate3d(0,0,0) rotateZ(-4deg); }
  28% { transform: translate3d(5px,4px,0) rotateZ(-2deg); }
  43% { transform: translate3d(30px,30px,0) rotateZ(2deg); }
  63% { transform: translate3d(76px,42px,0) rotateZ(7deg); }
  70% { transform: translate3d(96px,38px,0) rotateZ(8deg); }
  82% { transform: translate3d(47px,30px,0) rotateZ(3deg); }
  93% { transform: translate3d(6px,4px,0) rotateZ(-2deg); }
  100% { transform: translate3d(0,0,0) rotateZ(-4deg); }
}
@keyframes hat-brim-swat-left {
  0%,20% { transform: translate3d(0,0,0) rotateZ(-4deg); }
  28% { transform: translate3d(-5px,4px,0) rotateZ(-6deg); }
  43% { transform: translate3d(-30px,30px,0) rotateZ(-9deg); }
  63% { transform: translate3d(-76px,42px,0) rotateZ(-13deg); }
  70% { transform: translate3d(-96px,38px,0) rotateZ(-14deg); }
  82% { transform: translate3d(-47px,30px,0) rotateZ(-8deg); }
  93% { transform: translate3d(-6px,4px,0) rotateZ(-5deg); }
  100% { transform: translate3d(0,0,0) rotateZ(-4deg); }
}
@keyframes swat-arc-right { 0%,16% { opacity: 0; } 30% { opacity: .35; } 52% { opacity: .95; } 100% { opacity: 0; transform: rotate(-38deg) scale(1.16); } }
@keyframes swat-arc-left { 0%,16% { opacity: 0; } 30% { opacity: .35; } 52% { opacity: .95; } 100% { opacity: 0; transform: rotate(218deg) scale(1.16); } }
.parker.air-swat .straw-hat, .parker.air-swat .arm { animation-timing-function: cubic-bezier(.26,.6,.22,1); }
.parker.air-swat .swat-arc { filter: blur(.2px); }
.parker.bear-chased.chase-right { animation: parker-chase-right 1.38s ease-in forwards; }
.parker.bear-chased.chase-left { animation: parker-chase-left 1.38s ease-in forwards; }
.parker.bear-chased .leg-left { animation: chase-leg-a .14s linear infinite alternate; }
.parker.bear-chased .leg-right { animation: chase-leg-b .14s linear infinite alternate; }
.parker.bear-chased .straw-hat { animation: chase-hat .18s ease-in-out infinite alternate; }
@keyframes parker-chase-right { from { transform: translate3d(var(--chase-start),0,0); } to { transform: translate3d(var(--chase-end),0,0); } }
@keyframes parker-chase-left { from { transform: translate3d(var(--chase-start),0,0) scaleX(-1); } to { transform: translate3d(var(--chase-end),0,0) scaleX(-1); } }
@keyframes chase-leg-a { to { transform: rotate(-28deg); } }
@keyframes chase-leg-b { to { transform: rotate(28deg); } }
@keyframes chase-hat { to { transform: rotate(7deg) translateY(-2px); } }
@keyframes parker-hit { 25% { filter: brightness(2) saturate(2); } 50% { filter: hue-rotate(-25deg) saturate(3); } 75% { filter: brightness(1.7); } }
@keyframes parker-swell { 0% { transform: translate3d(var(--death-x,0),0,0) scale(1); } 35% { transform: translate3d(var(--death-x,0),0,0) scale(1.08,1.03); } 70% { transform: translate3d(var(--death-x,0),0,0) scale(1.18,1.1); filter: saturate(1.18); } 100% { transform: translate3d(var(--death-x,0),0,0) scale(1.24,1.16); filter: saturate(1.22); } }
@keyframes parker-fall { to { transform: translate3d(var(--death-x,0),0,0) rotate(-82deg) translateX(-28px); opacity: .2; } }
.banner { position: absolute; z-index: 16; top: 19%; left: 50%; width: 92%; transform: translate(-50%,-12px) scale(.92); text-align: center; opacity: 0; pointer-events: none; transition: .2s ease; }
.banner.show { opacity: 1; transform: translate(-50%,0) scale(1); }
.banner strong, .banner span { display: block; text-transform: uppercase; }
.banner strong { color: var(--honey); font: 400 clamp(32px, 11vw, 64px) "Black Han Sans"; line-height: .9; -webkit-text-stroke: 3px var(--ink); text-shadow: 5px 5px 0 var(--red); }
.banner span { margin-top: 7px; color: var(--ink); font-size: 9px; font-weight: 700; letter-spacing: .22em; }
.speech { position: absolute; z-index: 15; left: 50%; bottom: 45%; max-width: 80%; transform: translateX(-50%) rotate(-1deg); padding: 7px 10px; border: 3px solid var(--ink); background: white; box-shadow: 4px 4px 0 var(--ink); font: 400 13px "Black Han Sans"; opacity: 0; transition: .15s ease; pointer-events: none; }
.speech.show { opacity: 1; transform: translateX(-50%) translateY(-5px) rotate(-1deg); }
.pop { position: absolute; z-index: 20; color: white; font: 400 18px "Black Han Sans"; -webkit-text-stroke: 2px var(--ink); text-shadow: 3px 3px 0 var(--red); animation: pop-up .7s ease-out forwards; }
@keyframes pop-up { to { transform: translateY(-54px) scale(1.2); opacity: 0; } }
.grave-scene { position: absolute; z-index: 18; left: 50%; bottom: var(--stage-bottom); width: 190px; height: 190px; transform: translateX(-50%); pointer-events: none; }
.grave-scene[hidden] { display: none; }
.grave-scene .dirt { position: absolute; left: 3%; right: 3%; bottom: 0; height: 34px; border: 4px solid var(--ink); border-radius: 50%; background: #70472e; transform: scaleX(.25); animation: dirt-open .5s ease-out forwards; }
.grave { position: absolute; left: 50%; bottom: 14px; width: 126px; height: 150px; transform: translate(-50%,160px); border: 5px solid var(--ink); border-radius: 62px 62px 8px 8px; background: #9ca1a8; box-shadow: inset 0 0 0 5px #c8cbd0, 7px 7px 0 rgba(26,23,32,.4); animation: grave-rise .72s .18s cubic-bezier(.16,.88,.24,1.08) forwards; text-align: center; padding-top: 37px; }
.grave span, .grave strong, .grave small { display: block; }
.grave span { font: 400 28px "Black Han Sans"; }
.grave strong { font: 400 23px "Black Han Sans"; color: var(--red); -webkit-text-stroke: 1px var(--ink); }
.grave small { margin-top: 10px; font-size: 7px; letter-spacing: .12em; }
@keyframes grave-rise { to { transform: translate(-50%,0); } }
@keyframes dirt-open { to { transform: scaleX(1); } }
.damage-flash { position: absolute; inset: 0; z-index: 17; pointer-events: none; opacity: 0; background: radial-gradient(circle at 50% 55%, transparent 30%, rgba(232,61,79,.72)); transition: opacity .12s ease; }
.damage-flash.on { opacity: 1; }
.touch-controls {
  z-index: 30;
  min-height: 96px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding-top: 2px;
}
.move-pad, .action-pad { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.control-btn {
  min-width: 0;
  min-height: 82px;
  border: 4px solid var(--ink);
  border-radius: 15px;
  color: var(--ink);
  box-shadow: 5px 5px 0 #05050a;
  user-select: none;
  touch-action: none;
  cursor: pointer;
}
.control-btn:active, .control-btn.active { transform: translate(4px,4px); box-shadow: 1px 1px 0 #05050a; }
.move-btn { background: var(--cream); font: 400 30px "Black Han Sans"; }
.jump-btn { background: var(--blue); }
.swat-btn { background: var(--honey); }
.action-pad span { display: block; font-size: 9px; font-weight: 700; letter-spacing: .12em; }
.action-pad b { display: block; font-size: 27px; line-height: 1; }
.desktop-controls { display: none; }
.overlay { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; overflow: auto; padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); background: rgba(246,196,69,.97); transition: opacity .35s ease; }
.overlay.gone { opacity: 0; pointer-events: none; }
.overlay-card { width: min(100%, 560px); display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.eyebrow { margin: 0; font-size: 8px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.overlay h1 { margin: 0; color: white; font: 400 clamp(58px, 19vw, 105px) "Black Han Sans"; line-height: .67; letter-spacing: -.03em; text-transform: uppercase; -webkit-text-stroke: 4px var(--ink); text-shadow: 8px 8px 0 var(--red); transform: rotate(-2deg); }
.overlay h1 em { color: var(--honey); font-style: normal; }
.overlay p:not(.eyebrow) { margin: 0; max-width: 490px; font-size: 12px; line-height: 1.6; font-weight: 700; }
.parker-badge { display: flex; align-items: center; gap: 8px; border: 3px solid var(--ink); padding: 5px 10px; background: white; box-shadow: 4px 4px 0 var(--ink); transform: rotate(1deg); }
.parker-badge span { display: grid; place-items: center; width: 29px; height: 29px; border: 3px solid var(--ink); border-radius: 50%; background: var(--blue); color: white; font: 400 18px "Black Han Sans"; }
.parker-badge strong { font: 400 17px "Black Han Sans"; letter-spacing: .08em; }
.intro-controls { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.intro-controls span { border: 2px solid var(--ink); background: var(--cream); padding: 6px 8px; font-size: 8px; font-weight: 700; text-transform: uppercase; }
.overlay button { min-height: 56px; border: 4px solid var(--ink); background: var(--red); color: white; box-shadow: 6px 6px 0 var(--ink); padding: 12px 24px; font: 400 18px "Black Han Sans"; letter-spacing: .08em; cursor: pointer; }
.overlay button:active { transform: translate(4px,4px); box-shadow: 2px 2px 0 var(--ink); }
.overlay small { font-size: 8px; letter-spacing: .12em; text-transform: uppercase; opacity: .72; }
.game-over-overlay { background: rgba(30,25,36,.94); color: white; }
.game-over-overlay h1 em { color: var(--red); }
@media (min-width: 700px) {
  .game-shell { grid-template-rows: auto minmax(0, 1fr) auto; padding: 14px; gap: 12px; }
  .hud { grid-template-columns: auto minmax(180px, 260px) 86px minmax(250px, 1fr); grid-template-areas: "back score wave stings"; }
  .sting-card { grid-template-columns: auto 1fr; }
  .stage { min-height: 420px; }
  .parker { --parker-width: 114px; --parker-height: 158px; }
  .touch-controls { max-width: 690px; width: 100%; justify-self: center; }
  .control-btn { min-height: 92px; }
}
@media (hover: hover) and (pointer: fine) {
  .game-shell { grid-template-rows: auto minmax(0, 1fr) auto; }
  .touch-controls { display: none; }
  .desktop-controls { display: flex; justify-content: center; gap: 24px; color: var(--cream); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; padding: 2px 0; }
  .stage-wrap { width: min(1100px, 100%); justify-self: center; }
}
@media (orientation: landscape) and (max-height: 560px) and (pointer: coarse) {
  .game-shell { grid-template-rows: auto minmax(0,1fr); padding: max(5px, env(safe-area-inset-top)) max(128px, env(safe-area-inset-right)) max(5px, env(safe-area-inset-bottom)) max(128px, env(safe-area-inset-left)); gap: 5px; }
  .hud { position: fixed; top: max(5px, env(safe-area-inset-top)); left: 50%; width: min(520px, 58vw); transform: translateX(-50%); grid-template-columns: 1fr 60px; grid-template-areas: "score wave" "stings stings"; pointer-events: none; }
  .back { display: none; }
  .hud-card, .sting-card { box-shadow: 2px 2px 0 var(--ink); padding: 3px 6px; }
  .hud-card strong { font-size: 15px; }
  .stage-wrap { grid-row: 1 / -1; min-height: 0; }
  .stage { min-height: 0; height: calc(100dvh - 10px); }
  .touch-controls { position: fixed; inset: 0; z-index: 40; display: block; pointer-events: none; }
  .move-pad { position: fixed; left: max(12px, env(safe-area-inset-left)); bottom: max(16px, env(safe-area-inset-bottom)); width: 220px; pointer-events: auto; }
  .action-pad { position: fixed; right: max(12px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); width: 220px; pointer-events: auto; }
  .control-btn { min-height: 72px; background-color: color-mix(in srgb, currentColor 12%, transparent); backdrop-filter: blur(3px); }
  .move-btn { background: rgba(255,247,214,.72); }
  .jump-btn { background: rgba(73,203,234,.76); }
  .swat-btn { background: rgba(246,196,69,.8); }
  .parker { --parker-width: 88px; --parker-height: 122px; }
  .overlay { padding: max(7px, env(safe-area-inset-top)) 10px max(7px, env(safe-area-inset-bottom)); }
  .overlay-card { gap: 6px; width: min(100%, 700px); }
  .overlay h1 { font-size: clamp(42px, 20vh, 72px); }
  .overlay p:not(.eyebrow) { font-size: 9px; line-height: 1.35; }
  .parker-badge { padding: 3px 7px; }
  .overlay button { min-height: 42px; padding: 7px 18px; font-size: 14px; }
  .overlay small { display: none; }
}
@media (max-width: 370px) {
  .game-shell { padding-inline: 5px; }
  .hud { grid-template-columns: 58px 1fr 56px; }
  .back { min-width: 0; font-size: 7px; }
  .hud-card strong { font-size: 15px; }
  .stage { min-height: 290px; }
  .control-btn { min-height: 70px; }
  .touch-controls { min-height: 82px; gap: 7px; }
  .move-pad, .action-pad { gap: 5px; }
  .parker { --parker-width: 86px; --parker-height: 120px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

@media (orientation: landscape) and (max-height: 560px) and (pointer: coarse) {
  .bear-break { height: 82%; }
  .flirty-bear { width: min(22vw, 150px); height: min(52vh, 190px); }
  .bear-line { top: 2%; width: min(54%, 390px); font-size: 12px; padding: 7px 10px; }
}