/*
  ============================================================
  BRUNO'S HONEY MAYHEM — GAME STYLES
  ============================================================
  Loaded after styles.css (color tokens/buttons) and game-shell.css
  (shared chrome: topbar, sound toggle, .completion-overlay/.completion-card
  used here for every screen, .game-character + .char-* expression
  keyframes). This file only adds what's genuinely new for a
  side-scrolling level: the HUD, the scrolling world/ground/sky, the
  level objects (honey/bees/puddles/obstacles/finish), the on-screen
  touch controls, and the handful of Bruno-specific animations
  (continuous run-jiggle, honey-slip spin, giant-jar wobble) that don't
  already exist in game-shell.css's shared char-* set.
  ============================================================
*/

/* ---------- HUD ---------- */
.honey-hud{
  position:relative; z-index:20; display:flex; align-items:center; justify-content:center;
  gap:14px; flex-wrap:wrap; padding:0 14px 8px; font-weight:800; font-size:0.92rem; color:var(--ink-soft);
}
.honey-hud-item{ display:inline-flex; align-items:center; gap:4px; white-space:nowrap; }
.honey-hud-level{ color:var(--ink); }
.honey-pause-btn{
  display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px;
  border-radius:999px; background:var(--surface); border:2px solid var(--line); cursor:pointer;
  font-size:1rem; box-shadow:0 3px 0 var(--line); margin-left:4px;
}
.honey-pause-btn:hover{ transform:translateY(-1px); }

/* ---------- the scrolling scene ---------- */
.honey-stage{
  background:linear-gradient(180deg, #FFE7A6 0%, #FFD98C 38%, #F8C572 70%, #E9AE5C 100%);
}
.honey-stage.env-bees{
  background:linear-gradient(180deg, #FFEFB8 0%, #FCD988 35%, #E9B85F 68%, #C98F3E 100%);
}
.honey-stage.env-giant{
  background:linear-gradient(180deg, #FFE39A 0%, #F6C471 32%, #E2A24E 64%, #B87A2E 100%);
}
.honey-sky{ position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden; }
.honey-ground{
  position:absolute; left:0; right:0; bottom:0; height:64px; z-index:2;
  background:linear-gradient(180deg, #C98A3E 0%, #A5691F 100%);
  border-top:6px solid #7A4E16;
  box-shadow:inset 0 3px 0 rgba(255,255,255,0.15);
}
.honey-world{
  position:absolute; left:0; top:0; bottom:0; width:1px; z-index:3;
  will-change:transform;
}

/* ---------- Bruno ---------- */
.honey-stage .game-character{
  width:110px; height:165px; position:absolute; left:0; bottom:64px; z-index:8;
}
.honey-stage .game-character img{ width:100%; height:100%; object-fit:contain; }

/* Continuous run cycle -- a belly jiggle while grounded and moving.
   Kept OFF the shared char-* list in game-shell.css/dialogue.js on
   purpose: those states are one-shot reactions that auto-revert to
   "idle" after a fixed timer, which is the wrong default for a
   character that is running most of the time. This file's own JS
   toggles .char-run directly instead of going through
   DodoDialogue.setExpression() for locomotion (reactions like
   collecting honey / a bee scare still reuse the shared char-happy /
   char-surprised / char-oops / char-excited / char-celebrate /
   char-confused states exactly as-is). */
.char-run img{ animation:bruno-run-jiggle 0.32s ease-in-out infinite; }
@keyframes bruno-run-jiggle{
  0%,100%{ transform:scaleY(1) scaleX(1) translateY(0); }
  50%{ transform:scaleY(0.94) scaleX(1.04) translateY(3px); }
}
.char-stand img{ animation:char-bob 3.6s ease-in-out infinite; }

/* Honey puddle slip: Bruno's approved art has no separate "arms out"
   pose, so this communicates the slip the same way game-shell.css
   communicates every other reaction -- a transform-only animation on
   the existing approved image (a fast wobble/spin), not a redraw of
   the character. This is the one required animation moment ("arms
   spinning, eyes wide") the static art can't literally show; the spin
   + tilt is the closest honest substitute. */
.char-slip img{ animation:bruno-slip .9s ease; }
@keyframes bruno-slip{
  0%{ transform:rotate(0deg) scale(1); }
  20%{ transform:rotate(-16deg) scale(1.04,0.94); }
  40%{ transform:rotate(14deg) scale(0.96,1.05); }
  60%{ transform:rotate(-10deg) scale(1.03,0.96); }
  80%{ transform:rotate(6deg) scale(0.98,1.02); }
  100%{ transform:rotate(0deg) scale(1); }
}

/* Giant honey jar wobble: only used in the last few steps of Level 3,
   right before the finish -- a slow, heavy side-to-side tilt. */
.char-wobble img{ animation:bruno-wobble 1.3s ease-in-out infinite; }
@keyframes bruno-wobble{
  0%,100%{ transform:rotate(-6deg) translateY(0); }
  50%{ transform:rotate(6deg) translateY(-4px); }
}

@media (prefers-reduced-motion:reduce){
  .char-run img, .char-slip img, .char-wobble img, .char-stand img{ animation:none; }
}

/* ---------- level objects (all absolutely positioned inside .honey-world,
   world-space coordinates set once per object via inline left/bottom) ---------- */
.honey-obstacle{
  position:absolute; z-index:4; border-radius:10px 10px 4px 4px;
  background:linear-gradient(180deg,#8A5A2B,#6B4420); box-shadow:0 4px 0 rgba(0,0,0,0.2);
}
.honey-puddle{
  position:absolute; z-index:2; bottom:0; height:14px; border-radius:50%;
  background:radial-gradient(ellipse at center, #FFD24A 0%, #E8A82A 70%, transparent 100%);
  opacity:0.85;
}
.honey-jar-wrap{ position:absolute; z-index:5; width:40px; height:44px; }
.honey-jar{
  width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  font-size:1.8rem; filter:drop-shadow(0 3px 3px rgba(0,0,0,0.25));
  animation:honey-jar-float 2.6s ease-in-out infinite;
}
.honey-jar-wrap.is-golden .honey-jar{ filter:drop-shadow(0 0 8px #FFD24A) drop-shadow(0 3px 3px rgba(0,0,0,0.25)); }
@keyframes honey-jar-float{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-8px); } }
.honey-jar-wrap.is-collected{ animation:honey-jar-collected .4s ease forwards; pointer-events:none; }
@keyframes honey-jar-collected{ to{ transform:scale(1.6) translateY(-30px); opacity:0; } }
@media (prefers-reduced-motion:reduce){
  .honey-jar{ animation:none; }
}

.honey-bee-wrap{ position:absolute; z-index:6; width:38px; height:34px; }
.honey-bee{
  width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  font-size:1.6rem; animation:honey-bee-flutter 0.5s ease-in-out infinite;
  filter:drop-shadow(0 3px 3px rgba(0,0,0,0.2));
}
@keyframes honey-bee-flutter{ 0%,100%{ transform:translateY(0) rotate(-4deg); } 50%{ transform:translateY(-5px) rotate(4deg); } }
@media (prefers-reduced-motion:reduce){
  .honey-bee{ animation:none; }
}

/* Bee "types" -- same 🐝 glyph, recolored with a CSS filter (a color
   emoji glyph ignores the `color` property, but filter is pixel-level
   post-processing on the rendered glyph so it works). Purely visual;
   each type's actual difficulty (speed, patrol range) is set per-bee
   in the level data in brunos-honey-mayhem.js. */
.honey-bee-wrap.bee-red .honey-bee{
  filter:hue-rotate(310deg) saturate(2.6) brightness(0.95) drop-shadow(0 3px 3px rgba(0,0,0,0.25));
}
.honey-bee-wrap.bee-black .honey-bee{
  filter:grayscale(1) brightness(0.32) drop-shadow(0 3px 3px rgba(0,0,0,0.35));
}

.honey-finish{
  position:absolute; z-index:5; bottom:0; width:60px; display:flex; flex-direction:column; align-items:center;
}
.honey-finish-pole{ width:6px; height:150px; background:#7A4E16; border-radius:4px; }
/* left:27px, not 6px -- .honey-finish centers its flex children (the pole)
   in its 60px width, so the pole's actual left edge sits at (60-6)/2=27px,
   not at the container's own left edge. The flag was anchored to left:6px
   (as if the pole were flush against the container's left side), leaving
   its flat/mounting edge floating ~21px away from the pole it's supposed
   to attach to -- the flagpole looked disconnected/misaligned. Anchoring
   the flag's flat edge at the pole's real x position fixes that. */
.honey-finish-flag{
  position:absolute; top:6px; left:27px; width:0; height:0;
  border-style:solid; border-width:16px 0 16px 34px; border-color:transparent transparent transparent #FF5247;
  animation:honey-flag-wave 1.6s ease-in-out infinite;
  transform-origin:0% 50%;
}
@keyframes honey-flag-wave{ 0%,100%{ transform:skewY(0deg); } 50%{ transform:skewY(6deg); } }

.honey-giant-jar{
  position:absolute; z-index:5; bottom:0; width:110px; height:150px; display:flex; align-items:center; justify-content:center;
  font-size:5.5rem; filter:drop-shadow(0 6px 8px rgba(0,0,0,0.3));
  animation:honey-giant-glow 2.2s ease-in-out infinite;
}
@keyframes honey-giant-glow{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.04); } }
@media (prefers-reduced-motion:reduce){
  .honey-finish-flag, .honey-giant-jar{ animation:none; }
}

/* ---------- on-screen touch controls (touch/coarse-pointer devices only) ---------- */
.honey-controls{
  position:absolute; z-index:25; inset:auto 0 0 0; display:none;
  justify-content:space-between; align-items:flex-end; padding:0 16px 16px; pointer-events:none;
}
@media (hover:none), (pointer:coarse){
  .honey-controls:not([hidden]){ display:flex; }
}
.honey-ctrl-btn{
  pointer-events:auto; width:64px; height:64px; border-radius:999px; border:3px solid var(--line);
  background:color-mix(in srgb, var(--surface) 88%, transparent); color:var(--ink); font-size:1.6rem;
  font-weight:800; box-shadow:0 4px 0 var(--line); touch-action:none; -webkit-tap-highlight-color:transparent;
  display:flex; align-items:center; justify-content:center;
}
.honey-ctrl-btn:active{ transform:translateY(3px); box-shadow:none; }
.honey-ctrl-left, .honey-ctrl-right{ margin-bottom:4px; }
.honey-ctrl-jump{ width:74px; height:74px; font-size:1.8rem; }
.honey-move-group{ display:flex; gap:14px; }

/* ---------- bee-hit feedback ---------- */
/* A bee collision already plays a "wrong" SFX, a brief char-oops shake,
   and a short knockback/stun -- testing showed that combination alone
   reads as "nothing happened" during fast play, since char-oops-shake
   (game-shell.css) is a subtle ±6px wiggle easy to miss on a small,
   constantly-moving sprite. This full-stage red flash is the same
   "unmistakable hit" pattern used in most kids' platformers: impossible
   to miss, but gone almost instantly and never a violent/scary visual. */
.honey-hit-flash{
  position:absolute; inset:0; z-index:15; pointer-events:none;
  background:rgba(255,50,50,0.001); opacity:0;
}
.honey-hit-flash.is-flashing{ animation:honey-hit-flash-pulse .4s ease-out; }
@keyframes honey-hit-flash-pulse{
  0%{ background:rgba(255,50,50,0.001); opacity:0; }
  15%{ background:rgba(255,40,40,0.32); opacity:1; }
  100%{ background:rgba(255,40,40,0.32); opacity:0; }
}
@media (prefers-reduced-motion:reduce){
  .honey-hit-flash.is-flashing{ animation:none; }
}

/* ---------- start / how-to-play / stats ---------- */
.honey-start-card{ max-width:380px; }
.honey-start-bruno{
  width:120px; height:auto; margin:0 auto 10px; display:block; filter:drop-shadow(0 8px 10px rgba(0,0,0,0.25));
}
.honey-howto-card{ max-width:420px; text-align:left; }
.honey-howto-list{ list-style:none; margin:0 0 20px; padding:0; display:flex; flex-direction:column; gap:12px; }
.honey-howto-list li{ display:flex; align-items:flex-start; gap:10px; font-weight:700; font-size:0.95rem; line-height:1.35; }
.honey-howto-icon{ flex:none; font-size:1.15rem; }
.honey-stats{
  display:flex; flex-direction:column; gap:6px; margin:0 0 20px; font-weight:800; color:var(--ink);
  background:var(--surface-alt); border-radius:16px; padding:14px 18px;
}
.honey-stats-row{ display:flex; justify-content:space-between; gap:16px; font-size:0.95rem; }
.honey-stats-row span:last-child{ color:var(--coral-ink); }

@media (max-width:600px){
  .honey-hud{ font-size:0.8rem; gap:8px; padding:0 10px 6px; }
  .honey-start-bruno{ width:96px; }
  .honey-ctrl-btn{ width:56px; height:56px; font-size:1.4rem; }
  .honey-ctrl-jump{ width:64px; height:64px; }
}

@media (max-height:700px){
  .honey-hud{ padding:0 10px 4px; gap:6px; }
  .honey-stage .game-character{ width:96px; height:144px; }
  .honey-controls{ padding:0 12px 10px; }
}