.mbg-game-shell,
.mbg-game-shell * { box-sizing: border-box; }
.mbg-game-shell {
  width: 100%;
  margin: 0 auto;
  font-family: Inter, ui-rounded, "Arial Rounded MT Bold", system-ui, sans-serif;
  color: #fff;
  user-select: none;
  -webkit-user-select: none;
}
.mbg-stage {
  --mbg-ground: none;
  position: relative;
  width: min(100%, 980px);
  min-height: 760px;
  aspect-ratio: 9 / 16;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 28px;
  background-image: linear-gradient(rgba(17,25,46,.02),rgba(17,25,46,.08)), var(--mbg-ground);
  background-size: cover;
  background-position: center;
  box-shadow: 0 28px 80px rgba(7,13,28,.28);
  touch-action: manipulation;
  cursor: crosshair;
}
.mbg-prop {
  position: absolute;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 10px 10px rgba(33,20,16,.18));
  z-index: 18;
}
.mbg-prop-sleep { left: 2%; top: 26%; width: 27%; }
.mbg-prop-tool { left: 27%; top: 28%; width: 29%; }
.mbg-prop-snack { left: 55%; top: 25%; width: 28%; }
.mbg-prop-monitor { right: 1%; top: 31%; width: 23%; z-index: 20; }
.mbg-prop-pad { right: -5%; top: 42%; width: 53%; z-index: 16; }
.mbg-prop-ship { right: 2%; top: 42%; width: 42%; z-index: 19; }
.mbg-prop-power { left: 25%; top: 61%; width: 25%; z-index: 25; }
.mbg-prop-bush { left: 51%; top: 65%; width: 24%; z-index: 26; }
.mbg-prop-crystal-a { left: -5%; top: 62%; width: 26%; z-index: 15; }
.mbg-prop-crystal-b { right: -6%; top: 69%; width: 25%; z-index: 14; }
.mbg-prop-scrap { left: 48%; top: 76%; width: 27%; z-index: 20; }

.mbg-character {
  position: absolute;
  left: 49%;
  top: 57%;
  width: clamp(105px, 18%, 190px);
  transform: translate(-50%, -50%);
  transform-origin: 50% 62%;
  z-index: 75;
  pointer-events: none;
  will-change: left, top;
}
.mbg-character > img {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
}
.mbg-flame-layer { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.mbg-flame {
  position: absolute;
  width: 28px;
  height: 90px;
  transform-origin: 50% 0;
  border-radius: 50% 50% 68% 68% / 18% 18% 82% 82%;
  background: radial-gradient(ellipse at 50% 14%,
      rgba(255,255,255,.98) 0 8%,
      rgba(194,250,255,.98) 12%,
      rgba(73,225,255,.94) 31%,
      rgba(36,138,255,.75) 56%,
      rgba(15,62,178,.34) 70%,
      transparent 82%);
  filter: drop-shadow(0 0 8px rgba(70,224,255,.78));
  animation: mbgFlameFlicker .17s ease-in-out infinite alternate;
}
@keyframes mbgFlameFlicker { from { margin-top: 0; filter: drop-shadow(0 0 6px rgba(70,224,255,.62)); } to { margin-top: 2px; filter: drop-shadow(0 0 11px rgba(70,224,255,.92)); } }

.mbg-top-ui {
  position: absolute;
  z-index: 150;
  top: 1.1%;
  left: 1.6%;
  right: 1.6%;
  display: grid;
  grid-template-columns: 1.15fr 1fr 1fr 1.08fr 46px;
  align-items: start;
  gap: .7%;
  pointer-events: auto;
}
.mbg-hud-panel,
.mbg-mini-timer {
  position: relative;
  min-width: 0;
  background: transparent;
  border: 0;
  padding: 0;
  color: #fff;
  overflow: visible;
}
.mbg-panel-skin {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
  z-index: 0;
}
.mbg-hud-content {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  min-width: 0;
}
.mbg-level-widget {
  height: 54px;
  cursor: pointer;
}
.mbg-level-widget .mbg-hud-content {
  padding: 5px 10px 5px 6px;
  gap: 5px;
}
.mbg-star-wrap {
  position: relative;
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  margin-left: -5px;
}
.mbg-star-wrap img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.mbg-star-wrap strong {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #1f2942;
  font-size: 18px;
  font-weight: 950;
  text-shadow: 0 1px #fff4a8;
}
.mbg-xp-track {
  position: relative;
  display: block;
  flex: 1;
  height: 10px;
  min-width: 18px;
  border-radius: 999px;
  background: #0b152b;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.75);
  overflow: hidden;
}
.mbg-xp-track i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(180deg,#75f0ff,#1fb8e8);
  box-shadow: 0 0 8px #43dfff;
  transition: width .25s ease;
}
.mbg-hud-stack {
  position: relative;
  min-width: 0;
  height: 54px;
}
.mbg-hud-stack > .mbg-resource-widget {
  position: absolute;
  inset: 0;
}
.mbg-resource-widget {
  height: 54px;
}
.mbg-resource-widget .mbg-hud-content {
  padding: 5px 5px 5px 7px;
  gap: 3px;
}
.mbg-resource-icon {
  width: 34px;
  height: 34px;
  object-fit: contain;
  flex: 0 0 34px;
}
.mbg-resource-widget strong {
  flex: 1;
  min-width: 0;
  text-align: center;
  font-size: clamp(10px, 1.55vw, 16px);
  font-weight: 900;
  white-space: nowrap;
  text-shadow: 0 2px 3px rgba(0,0,0,.55);
}
.mbg-plus-btn {
  width: 25px;
  height: 25px;
  flex: 0 0 25px;
  border-radius: 50%;
  border: 2px solid #8b744f;
  background: linear-gradient(180deg,#34446c,#182440);
  color: #ffd548;
  font-weight: 950;
  font-size: 17px;
  line-height: 18px;
  padding: 0;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(255,225,134,.2), 0 2px 5px rgba(0,0,0,.35);
}
.mbg-plus-btn:active { transform: translateY(1px) scale(.97); }
.mbg-mini-timer {
  position: absolute;
  z-index: 4;
  left: 33%;
  right: 19%;
  top: 49px;
  height: 26px;
  display: grid;
  place-items: center;
}
.mbg-mini-timer strong {
  position: relative;
  z-index: 1;
  font-size: 12px;
  font-weight: 900;
  text-shadow: 0 1px 3px rgba(0,0,0,.7);
}
.mbg-day-widget {
  height: 54px;
}
.mbg-day-widget .mbg-hud-content {
  padding: 5px 8px;
  gap: 5px;
}
.mbg-day-icon {
  width: 34px;
  height: 34px;
  object-fit: contain;
  flex: 0 0 34px;
}
.mbg-day-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.02;
}
.mbg-day-copy strong {
  font-size: clamp(10px, 1.55vw, 16px);
  font-weight: 950;
  white-space: nowrap;
}
.mbg-day-copy small {
  margin-top: 4px;
  font-size: clamp(8px, 1.25vw, 12px);
  color: #e9f1ff;
  white-space: nowrap;
}
.mbg-settings-btn {
  width: 46px;
  height: 46px;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
}
.mbg-settings-btn img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.mbg-settings-popover {
  position: absolute;
  z-index: 220;
  top: 6.7%;
  right: 2%;
  width: min(230px, 62%);
  padding: 12px;
  border-radius: 18px;
  background: rgba(18,29,53,.96);
  border: 2px solid #8e7758;
  box-shadow: 0 10px 30px rgba(0,0,0,.4), inset 0 0 0 1px rgba(255,225,160,.2);
}
.mbg-settings-popover[hidden] { display: none !important; }
.mbg-settings-popover strong { display:block; margin-bottom:8px; }
.mbg-settings-popover button {
  width: 100%;
  margin-top: 6px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.18);
  background: #e8efff;
  color: #17233e;
  font-weight: 800;
  cursor: pointer;
}
.mbg-game-shell.is-mbg-paused .mbg-flame { animation-play-state: paused; }

.mbg-quest-card {
  position:absolute; z-index:145; left:2%; top:8.5%; width:33%; min-width:210px;
  display:grid; grid-template-columns:58px 1fr 10px; gap:9px; align-items:center;
  padding:9px 10px;
  border-radius:20px;
  background:linear-gradient(180deg,rgba(37,51,86,.96),rgba(24,35,61,.97));
  border:2px solid #706c85;
  box-shadow: inset 0 0 0 2px rgba(255,196,95,.16),0 6px 14px rgba(0,0,0,.25);
  pointer-events:auto;
}
.mbg-quest-icon { width:54px;height:54px;border-radius:50%;display:grid;place-items:center;background:#0d1930;border:3px solid #ffbd30;font-size:27px; }
.mbg-quest-card div:nth-child(2) { min-width:0; }
.mbg-quest-card strong { display:block; font-size:clamp(12px,1.8vw,18px); }
.mbg-quest-card span { display:block; color:#eef4ff; font-size:clamp(9px,1.35vw,14px); line-height:1.25; margin-top:2px; }
.mbg-quest-card i { width:10px;height:10px;border-radius:50%;background:#ffd229;align-self:start;box-shadow:0 0 6px #ffd229; }

.mbg-side-actions {
  position:absolute; z-index:145; right:1.3%; bottom:12%; display:flex; flex-direction:column; gap:7px; pointer-events:auto;
}
.mbg-side-actions button { position:relative; width:74px; height:80px; border:0; padding:0; background:transparent; }
.mbg-side-actions img { width:100%; height:100%; object-fit:contain; }
.mbg-side-actions span { position:absolute; left:0; right:0; bottom:8px; text-align:center; color:#1c2231; font-weight:900; font-size:11px; text-shadow:0 1px #fff2d4; }

.mbg-inventory {
  position:absolute; z-index:150; left:5%; right:8%; bottom:1.5%;
  padding:8px 10px 10px;
  border-radius:24px;
  border:3px solid #a36b35;
  background:linear-gradient(180deg,#f9d7a5,#eab678);
  box-shadow: inset 0 0 0 3px rgba(255,245,215,.55),0 8px 18px rgba(50,24,8,.28);
  color:#3a2a1c;
  pointer-events:auto;
}
.mbg-inventory > strong { display:block; margin:0 0 4px 12px; font-size:clamp(12px,2vw,20px); }
.mbg-inventory-slots { display:grid; grid-template-columns:repeat(7,1fr); gap:4px; }
.mbg-slot { position:relative; aspect-ratio:1; min-width:0; border:2px solid rgba(150,93,47,.46); border-radius:14px; background:rgba(255,235,197,.42); display:grid; place-items:center; }
.mbg-slot img { width:78%; height:78%; object-fit:contain; }
.mbg-slot span { position:absolute; right:5px; bottom:2px; font-weight:900; font-size:clamp(10px,1.8vw,17px); color:#1d1a17; text-shadow:0 1px #fff2d5; }

.mbg-click-hint { position:absolute; z-index:140; left:50%; top:18%; transform:translateX(-50%); padding:7px 12px; border-radius:999px; background:rgba(13,23,46,.7); border:1px solid rgba(255,255,255,.22); font-size:12px; pointer-events:none; transition:opacity .25s; }
.mbg-click-hint.is-hidden { opacity:0; }

@media (max-width: 720px) {
  .mbg-stage { width:100%; min-height:640px; border-radius:0; }
  .mbg-top-ui { grid-template-columns: 1.1fr 1fr 1fr; gap:4px; }
  .mbg-day-widget { grid-column:2 / span 1; grid-row:2; margin-top:-2px; }
  .mbg-settings-btn { grid-column:3; grid-row:2; justify-self:end; width:38px;height:38px; }
  .mbg-level-widget,.mbg-resource-widget,.mbg-day-widget { min-height:40px; border-radius:14px; }
  .mbg-level-widget { grid-template-columns:42px 1fr; padding-right:7px; }
  .mbg-star-wrap { width:44px;height:44px; }
  .mbg-resource-widget > img,.mbg-day-widget > img { width:28px;height:28px; }
  .mbg-resource-widget button { width:23px;height:23px;font-size:15px; }
  .mbg-quest-card { top:12%; width:46%; min-width:0; grid-template-columns:44px 1fr 8px; gap:5px; padding:7px; }
  .mbg-quest-icon { width:42px;height:42px;font-size:21px; }
  .mbg-side-actions { bottom:14%; right:.5%; gap:3px; }
  .mbg-side-actions button { width:62px;height:68px; }
  .mbg-side-actions span { font-size:9px; bottom:6px; }
  .mbg-inventory { left:2%; right:10%; padding:6px; border-radius:18px; }
  .mbg-inventory > strong { margin-left:7px; }
  .mbg-slot { border-radius:10px; }
  .mbg-character { width:clamp(88px,20%,142px); }
}

@media (max-width: 420px) {
  .mbg-stage { min-height:600px; }
  .mbg-top-ui { left:1%;right:1%; }
  .mbg-resource-widget { gap:2px; padding:3px; }
  .mbg-resource-widget strong { font-size:10px; }
  .mbg-quest-card span { display:none; }
  .mbg-inventory { right:14%; }
}


@media (max-width: 720px) {
  .mbg-top-ui {
    left: .8%;
    right: .8%;
    gap: 2px;
    grid-template-columns: 1.18fr 1fr 1fr 1.08fr 36px;
  }
  .mbg-level-widget,
  .mbg-resource-widget,
  .mbg-day-widget,
  .mbg-hud-stack { height: 44px; }
  .mbg-level-widget .mbg-hud-content { padding: 3px 5px 3px 3px; gap: 2px; }
  .mbg-star-wrap { width: 42px; height: 42px; flex-basis: 42px; margin-left: -3px; }
  .mbg-star-wrap strong { font-size: 14px; }
  .mbg-xp-track { height: 8px; }
  .mbg-resource-widget .mbg-hud-content { padding: 3px 3px 3px 4px; gap: 1px; }
  .mbg-resource-icon, .mbg-day-icon { width: 27px; height: 27px; flex-basis: 27px; }
  .mbg-resource-widget strong { font-size: 9px; }
  .mbg-plus-btn { width: 20px; height: 20px; flex-basis: 20px; font-size: 14px; line-height: 14px; border-width: 1px; }
  .mbg-mini-timer { top: 39px; height: 22px; left: 30%; right: 17%; }
  .mbg-mini-timer strong { font-size: 9px; }
  .mbg-day-widget .mbg-hud-content { padding: 3px 4px; gap: 2px; }
  .mbg-day-copy strong { font-size: 9px; }
  .mbg-day-copy small { font-size: 7px; margin-top: 2px; }
  .mbg-settings-btn { width: 36px; height: 36px; }
  .mbg-settings-popover { top: 7.5%; }
}

@media (max-width: 420px) {
  .mbg-top-ui { grid-template-columns: 1.16fr 1fr 1fr 1.05fr 32px; }
  .mbg-level-widget,
  .mbg-resource-widget,
  .mbg-day-widget,
  .mbg-hud-stack { height: 40px; }
  .mbg-star-wrap { width: 38px; height: 38px; flex-basis: 38px; }
  .mbg-resource-icon, .mbg-day-icon { width: 24px; height: 24px; flex-basis: 24px; }
  .mbg-plus-btn { width: 18px; height: 18px; flex-basis: 18px; font-size: 12px; }
  .mbg-mini-timer { top: 35px; height: 20px; }
  .mbg-resource-widget strong { font-size: 8px; }
  .mbg-day-copy strong { font-size: 8px; }
  .mbg-day-copy small { font-size: 6.5px; }
  .mbg-settings-btn { width: 32px; height: 32px; }
}

@media (max-width: 720px) {
  .mbg-day-widget,
  .mbg-settings-btn { grid-column: auto; grid-row: auto; margin-top: 0; }
  .mbg-level-widget { padding-right: 0; }
  .mbg-resource-widget > .mbg-panel-skin,
  .mbg-day-widget > .mbg-panel-skin { width: 100%; height: 100%; }
}
@media (max-width: 420px) {
  .mbg-resource-widget { padding: 0; gap: 0; }
}


/* ===== Moon-Bean v0.2 gameplay + hardened character frame animation ===== */
.mbg-character-frame { display:none !important; width:100%; height:auto; }
.mbg-character-frame.is-active { display:block !important; }
.mbg-character > img.mbg-character-frame { position:relative; z-index:2; pointer-events:none; }

.mbg-area-layer { position:absolute; inset:0; z-index:10; pointer-events:none; }
.mbg-area-layer[hidden] { display:none !important; }
.mbg-area-layer > * { pointer-events:auto; }
.mbg-stage[data-area="area1"]::after,
.mbg-stage[data-area="area2"]::after { content:""; position:absolute; inset:0; pointer-events:none; z-index:5; }
.mbg-stage[data-area="area1"]::after { background:linear-gradient(rgba(109,169,92,.035),rgba(69,104,61,.07)); }
.mbg-stage[data-area="area2"]::after { background:radial-gradient(circle at 55% 38%,rgba(42,196,255,.13),transparent 34%),linear-gradient(rgba(31,48,98,.12),rgba(36,24,79,.18)); }

.mbg-action-object,
.mbg-node { position:absolute; border:0; padding:0; background:transparent; cursor:pointer; filter:drop-shadow(0 10px 10px rgba(33,20,16,.18)); z-index:25; }
.mbg-action-object img,
.mbg-node > img { width:100%; height:100%; object-fit:contain; pointer-events:none; display:block; }
.mbg-action-object:hover,
.mbg-node:not(:disabled):hover { transform:translateY(-2px); }
.mbg-action-object:focus-visible,
.mbg-node:focus-visible { outline:3px solid #70ecff; outline-offset:4px; border-radius:18px; }

/* base building positions */
.mbg-base-sleep{left:2%;top:26%;width:27%;height:25%}.mbg-base-tool{left:27%;top:28%;width:29%;height:22%}.mbg-base-snack{left:55%;top:25%;width:28%;height:24%}.mbg-base-monitor{right:1%;top:31%;width:23%;height:27%;z-index:29}.mbg-base-pad{right:-5%;top:42%;width:53%;height:35%;z-index:16}.mbg-base-ship{right:2%;top:42%;width:42%;height:31%;z-index:24}.mbg-base-power{left:25%;top:61%;width:25%;height:21%;z-index:28}

/* resource node positions */
.mbg-node-a1-bush{left:12%;top:35%;width:28%;height:28%}.mbg-node-a1-scrap-a{left:58%;top:34%;width:26%;height:22%}.mbg-node-a1-scrap-b{left:52%;top:68%;width:28%;height:22%}.mbg-node-a1-machine{left:12%;top:65%;width:25%;height:21%}.mbg-node-a1-crystal-a{left:70%;top:58%;width:18%;height:17%}.mbg-node-a1-crystal-b{left:39%;top:24%;width:16%;height:15%}
.mbg-node-a2-crystal-a{left:8%;top:31%;width:30%;height:31%}.mbg-node-a2-crystal-b{right:5%;top:55%;width:28%;height:28%}.mbg-node-a2-wreck-a{left:47%;top:31%;width:32%;height:27%}.mbg-node-a2-wreck-b{left:18%;top:68%;width:30%;height:24%}.mbg-node-a2-fruit{right:10%;top:26%;width:18%;height:19%}.mbg-node-a2-energy{left:44%;top:64%;width:18%;height:19%}

.mbg-bush-node { overflow:visible; }
.mbg-bush-base { position:absolute !important; inset:0; width:100% !important; height:100% !important; object-fit:contain; }
.mbg-berry-layer { position:absolute; width:35%; height:35%; object-fit:contain; transition:opacity .18s,transform .18s; pointer-events:none; }
.mbg-berry-layer:nth-of-type(2){left:33%;top:3%}.mbg-berry-layer:nth-of-type(3){left:11%;top:29%}.mbg-berry-layer:nth-of-type(4){right:10%;top:31%}.mbg-berry-layer:nth-of-type(5){left:21%;bottom:5%}.mbg-berry-layer:nth-of-type(6){right:18%;bottom:5%}
.mbg-berry-layer.is-picked{opacity:0;transform:scale(.65)}
.mbg-node-count { position:absolute; right:2%; top:2%; min-width:28px; height:28px; display:grid; place-items:center; padding:0 7px; border-radius:999px; background:#18223e; border:2px solid #f4c75d; color:white; font-weight:900; font-size:12px; z-index:5; }
.mbg-node.is-depleted { opacity:.34; filter:grayscale(.7); cursor:not-allowed; }
.mbg-node.is-depleted .mbg-node-count { background:#363949; border-color:#8f8f9b; }

.mbg-area-chip { position:absolute; left:50%; top:8.7%; transform:translateX(-50%); z-index:142; padding:6px 11px; border-radius:999px; background:rgba(14,24,46,.78); border:1px solid rgba(255,255,255,.22); color:#f4f8ff; font-size:12px; font-weight:850; pointer-events:none; }

.mbg-toast { position:absolute; z-index:300; left:50%; top:16%; transform:translate(-50%,-10px); max-width:78%; padding:9px 14px; border-radius:999px; background:rgba(18,29,53,.95); border:2px solid #8e7758; color:#fff; font-weight:850; font-size:13px; opacity:0; pointer-events:none; transition:.2s ease; box-shadow:0 8px 22px rgba(0,0,0,.28); }
.mbg-toast.is-visible { opacity:1; transform:translate(-50%,0); }
.mbg-toast.is-success { border-color:#72ddba; }
.mbg-toast.is-error { border-color:#ff8f7b; }

.mbg-modal { position:absolute; inset:0; z-index:260; display:grid; place-items:center; padding:5%; background:rgba(8,14,28,.62); backdrop-filter:blur(5px); pointer-events:auto; }
.mbg-modal[hidden] { display:none !important; }
.mbg-modal-card { width:min(620px,96%); max-height:82%; overflow:auto; padding:17px; border-radius:24px; background:linear-gradient(180deg,#25365f,#15213d); border:2px solid #8d7657; box-shadow:0 20px 60px rgba(0,0,0,.45),inset 0 0 0 1px rgba(255,230,170,.17); color:white; }
.mbg-modal-head { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:12px; }
.mbg-modal-head h2 { margin:0; font-size:22px; }
.mbg-modal-close { width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,.2);background:#eef4ff;color:#18233d;font-weight:900;cursor:pointer; }
.mbg-area-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.mbg-area-card { min-width:0; min-height:145px; padding:12px; border-radius:18px; border:1px solid rgba(255,255,255,.17); background:rgba(255,255,255,.08); color:white; text-align:left; cursor:pointer; }
.mbg-area-card:disabled { opacity:.45; cursor:not-allowed; }
.mbg-area-card strong { display:block; font-size:16px; }.mbg-area-card span { display:block; margin-top:7px; font-size:12px; line-height:1.35; color:#d7e2f7; }
.mbg-map-current { margin:0 0 10px; color:#cfdbf2; font-size:13px; }

.mbg-recipe-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:9px; }
.mbg-recipe { min-height:108px; padding:11px; border-radius:16px; border:1px solid rgba(255,255,255,.17); background:rgba(255,255,255,.08); color:white; text-align:left; cursor:pointer; }
.mbg-recipe:disabled { opacity:.42; cursor:not-allowed; }
.mbg-recipe strong,.mbg-recipe span,.mbg-recipe small { display:block; }.mbg-recipe span { margin-top:5px; color:#d6e1f5; font-size:12px; }.mbg-recipe small { margin-top:4px; color:#7ee8ff; }
.mbg-bench-summary { display:flex; justify-content:space-between; gap:8px; align-items:center; margin-bottom:12px; padding:9px 10px; border-radius:14px; background:rgba(0,0,0,.18); }
.mbg-bench-upgrade { margin-top:11px; width:100%; padding:10px; border:0; border-radius:14px; background:#f5c767; color:#2b241c; font-weight:900; cursor:pointer; }.mbg-bench-upgrade:disabled{opacity:.4;cursor:not-allowed}

.mbg-inventory { left:3%; right:3%; }
.mbg-inventory-title-row { display:flex; align-items:center; justify-content:space-between; gap:8px; margin:0 8px 5px 10px; }
.mbg-inventory-title-row strong { font-size:clamp(12px,2vw,20px); }.mbg-inventory-title-row small { font-weight:800; }
.mbg-inventory-slots { grid-template-columns:repeat(5,1fr); }
.mbg-slot { border:2px solid rgba(150,93,47,.46); padding:0; cursor:pointer; }
.mbg-slot.is-empty { opacity:.45; cursor:default; }

.mbg-side-actions button { cursor:pointer; }
.mbg-quest-card { cursor:default; }

@media(max-width:720px){
  .mbg-area-grid{grid-template-columns:1fr}.mbg-recipe-grid{grid-template-columns:1fr}.mbg-modal-card{max-height:88%;padding:13px}
  .mbg-inventory-slots{grid-template-columns:repeat(5,1fr)}
  .mbg-node-count{min-width:22px;height:22px;font-size:10px}
  .mbg-area-chip{top:13.2%}
}

/* ===== Moon-Bean v0.2.1 frontend hardening ===== */
/* Mobile Chrome + some WordPress themes add colored tap/active button backgrounds.
   Disable those effects inside the game so pressing a building/resource never flashes red. */
.mbg-game-shell,
.mbg-game-shell * {
  -webkit-tap-highlight-color: transparent !important;
  -webkit-touch-callout: none;
}

/* Character frames are also hidden with native [hidden] and JS inline !important styles.
   These CSS rules provide a third safety layer for cached/hostile theme styles. */
.mbg-character-frame[hidden],
.mbg-character-frame:not(.is-active) {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}
.mbg-character-frame.is-active:not([hidden]) {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Reset WordPress-theme button states for transparent world hitboxes. */
.mbg-game-shell button.mbg-action-object,
.mbg-game-shell button.mbg-node,
.mbg-game-shell button.mbg-action-object:hover,
.mbg-game-shell button.mbg-node:hover,
.mbg-game-shell button.mbg-action-object:focus,
.mbg-game-shell button.mbg-node:focus,
.mbg-game-shell button.mbg-action-object:active,
.mbg-game-shell button.mbg-node:active,
.mbg-game-shell button.mbg-action-object:focus-visible,
.mbg-game-shell button.mbg-node:focus-visible {
  -webkit-appearance: none !important;
  appearance: none !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  text-shadow: none !important;
  -webkit-tap-highlight-color: transparent !important;
}
.mbg-game-shell button.mbg-action-object:focus:not(:focus-visible),
.mbg-game-shell button.mbg-node:focus:not(:focus-visible) {
  outline: none !important;
}
.mbg-game-shell button.mbg-action-object::before,
.mbg-game-shell button.mbg-action-object::after,
.mbg-game-shell button.mbg-node::before,
.mbg-game-shell button.mbg-node::after {
  content: none !important;
  display: none !important;
}

/* ===== Moon-Bean v0.3.0 ===== */
/* One frontend sprite only: no idle frame can remain underneath a moving frame. */
.mbg-character-sprite {
  display:block !important;
  position:relative !important;
  z-index:2 !important;
  width:100% !important;
  height:auto !important;
  visibility:visible !important;
  opacity:1 !important;
  pointer-events:none !important;
}

/* Home Camp: make room for the new Recycler. */
.mbg-base-sleep{left:2%;top:27%;width:23%;height:22%}
.mbg-base-tool{left:24%;top:29%;width:25%;height:20%}
.mbg-base-snack{left:50%;top:26%;width:24%;height:22%}
.mbg-base-recycler{left:3%;top:52%;width:22%;height:21%;z-index:28}
.mbg-base-monitor{right:1%;top:31%;width:20%;height:24%;z-index:29}
.mbg-base-pad{right:-5%;top:43%;width:50%;height:33%;z-index:16}
.mbg-base-ship{right:2%;top:44%;width:39%;height:29%;z-index:24}
.mbg-base-power{left:27%;top:61%;width:21%;height:19%;z-index:28}

.mbg-action-object.is-unbuilt > img { opacity:.38; filter:grayscale(.4) saturate(.65); }
.mbg-building-status {
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  z-index:8; padding:5px 9px; border-radius:999px; color:#1d2946;
  background:#ffd36b; border:2px solid #7f5b25; box-shadow:0 5px 12px rgba(0,0,0,.3);
  font-size:10px; font-weight:1000; letter-spacing:.06em;
}

/* Collect areas: readable resource nodes instead of oversized inventory icons. */
.mbg-node-a1-bush{left:8%;top:38%;width:23%;height:23%}
.mbg-node-a1-scrap-a{left:60%;top:38%;width:13%;height:13%}
.mbg-node-a1-scrap-b{left:58%;top:70%;width:14%;height:14%}
.mbg-node-a1-machine{left:14%;top:70%;width:16%;height:15%}
.mbg-node-a1-crystal-a{left:75%;top:61%;width:11%;height:11%}
.mbg-node-a1-crystal-b{left:43%;top:28%;width:10%;height:10%}

.mbg-node-a2-crystal-a{left:10%;top:35%;width:18%;height:18%}
.mbg-node-a2-crystal-b{right:7%;top:60%;width:17%;height:17%}
.mbg-node-a2-wreck-a{left:48%;top:35%;width:19%;height:18%}
.mbg-node-a2-wreck-b{left:20%;top:71%;width:16%;height:15%}
.mbg-node-a2-fruit{right:13%;top:30%;width:10%;height:11%}
.mbg-node-a2-energy{left:46%;top:68%;width:10%;height:11%}

.mbg-bush-base { inset:0 !important; width:100% !important; height:100% !important; }
.mbg-berry-layer { width:18% !important; height:18% !important; }
.mbg-berry-layer:nth-of-type(2){left:41%;top:10%}
.mbg-berry-layer:nth-of-type(3){left:22%;top:34%}
.mbg-berry-layer:nth-of-type(4){right:20%;top:37%}
.mbg-berry-layer:nth-of-type(5){left:31%;bottom:13%}
.mbg-berry-layer:nth-of-type(6){right:28%;bottom:11%}
.mbg-node-count { min-width:22px; height:22px; padding:0 5px; font-size:10px; border-width:1px; }

/* Build cards and v0.3 machine/ship UI. */
.mbg-build-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.mbg-build-card {
  min-width:0; min-height:190px; padding:10px; border-radius:18px;
  border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.08);
  color:#fff; cursor:pointer; text-align:center;
}
.mbg-build-card img { display:block; width:100%; height:120px; object-fit:contain; }
.mbg-build-card strong,.mbg-build-card span { display:block; }
.mbg-build-card span { margin-top:6px; color:#d6e1f5; font-size:11px; line-height:1.3; }
.mbg-build-card:disabled { opacity:.5; cursor:not-allowed; }
.mbg-primary-action {
  width:100%; border:0; border-radius:16px; padding:12px 14px; margin-top:12px;
  background:linear-gradient(180deg,#9ee676,#61b94a); color:#173222;
  font-weight:1000; cursor:pointer; box-shadow:inset 0 0 0 2px rgba(255,255,255,.25);
}
.mbg-primary-action:disabled { opacity:.4; cursor:not-allowed; }
.mbg-power-card > img { display:block; width:min(260px,70%); margin:0 auto; }
.mbg-power-value { display:block; text-align:center; font-size:28px; color:#6fe9ff; }
.mbg-power-card p { color:#d6e1f5; text-align:center; }
.mbg-ship-progress { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin:8px 0 14px; }
.mbg-ship-progress i { height:10px; border-radius:999px; background:rgba(255,255,255,.13); border:1px solid rgba(255,255,255,.15); }
.mbg-ship-progress i.is-complete { background:linear-gradient(90deg,#52d9ff,#6fe5ad); box-shadow:0 0 12px rgba(82,217,255,.42); }
.mbg-ship-card > strong { display:block; font-size:19px; }
.mbg-ship-card > p { color:#d6e1f5; }
.mbg-ship-costs { padding:10px; border-radius:14px; background:rgba(0,0,0,.2); color:#ffe39b; font-size:12px; line-height:1.45; }

/* Full-screen visual planet map based on the approved map reference. */
.mbg-map-modal { padding:0 !important; background:#0b1430 !important; backdrop-filter:none !important; }
.mbg-map-screen {
  --mbg-map-bg:none;
  position:relative; width:100%; height:100%; min-height:100%; overflow:hidden;
  background-image:linear-gradient(rgba(8,15,35,.08),rgba(8,15,35,.2)),var(--mbg-map-bg);
  background-size:cover; background-position:center;
}
.mbg-map-close {
  position:absolute; z-index:20; right:2.2%; top:1.5%; width:38px; height:38px;
  border-radius:50%; border:2px solid #8b765b; background:#172440; color:#fff; font-size:24px; font-weight:900; cursor:pointer;
}
.mbg-map-current {
  position:absolute; z-index:15; left:2.5%; top:1.8%; padding:6px 10px; border-radius:999px;
  background:rgba(15,27,52,.9); border:1px solid rgba(255,255,255,.2); color:#e7efff; font-size:11px; font-weight:850;
}
.mbg-map-node {
  position:absolute; z-index:10; min-width:115px; max-width:165px; padding:8px 10px;
  border-radius:14px; border:2px solid #685c58; background:linear-gradient(180deg,rgba(31,45,76,.96),rgba(16,27,51,.96));
  color:#fff; box-shadow:0 7px 16px rgba(0,0,0,.35); cursor:pointer; text-align:left;
}
.mbg-map-node img { float:left; width:34px; height:34px; object-fit:contain; margin-right:7px; }
.mbg-map-node strong { display:block; font-size:12px; line-height:1.15; }
.mbg-map-node small { display:block; margin-top:3px; color:#ffd05f; font-size:9px; }
.mbg-map-node > span[data-map-lock] { position:absolute; right:-7px; top:-9px; width:24px; height:24px; display:grid; place-items:center; border-radius:50%; background:#18223d; border:2px solid #8c795f; font-size:11px; }
.mbg-map-node.is-locked { filter:saturate(.6); opacity:.78; }
.mbg-map-node.is-selected { border-color:#ffd95d; box-shadow:0 0 0 3px rgba(255,217,93,.24),0 8px 18px rgba(0,0,0,.4); }
.mbg-map-node-north{left:43%;top:15%}.mbg-map-node-crystal{right:5%;top:27%}.mbg-map-node-ruins{left:6%;top:35%}.mbg-map-node-mushroom{left:37%;top:48%}.mbg-map-node-berry{right:6%;top:58%}.mbg-map-node-power{left:4%;top:67%}.mbg-map-node-home{left:38%;top:76%}.mbg-map-node-crash{right:6%;top:77%}
.mbg-map-destination {
  position:absolute; z-index:18; right:3%; bottom:2.2%; width:min(285px,44%); padding:11px 12px 12px;
  border-radius:18px; background:linear-gradient(180deg,rgba(30,44,75,.98),rgba(14,25,49,.98)); border:2px solid #786852; box-shadow:0 12px 28px rgba(0,0,0,.4);
}
.mbg-map-destination > span { display:block; color:#ffd365; font-size:9px; font-weight:900; letter-spacing:.08em; }
.mbg-map-destination > strong { display:block; margin-top:3px; font-size:16px; }
.mbg-map-destination > small { display:block; margin:4px 0 8px; color:#d1ddf2; font-size:9px; line-height:1.3; }
.mbg-map-destination button { width:75%; min-height:39px; border-radius:13px; border:2px solid #a8ef83; background:linear-gradient(#95e872,#5db847); color:#17341f; font-weight:1000; cursor:pointer; }
.mbg-map-destination button:disabled { filter:grayscale(.8); opacity:.6; cursor:not-allowed; }
.mbg-map-destination em { float:right; margin-top:10px; color:#fff; font-style:normal; font-weight:900; }

@media(max-width:720px){
  .mbg-build-grid{grid-template-columns:1fr}
  .mbg-build-card{min-height:125px;display:grid;grid-template-columns:100px 1fr;align-items:center;text-align:left}
  .mbg-build-card img{height:100px;grid-row:1/3}.mbg-build-card strong{font-size:15px}.mbg-build-card span{font-size:10px}
  .mbg-map-node{min-width:92px;max-width:126px;padding:6px 7px;border-radius:11px}
  .mbg-map-node img{width:26px;height:26px;margin-right:4px}.mbg-map-node strong{font-size:9px}.mbg-map-node small{font-size:7px}
  .mbg-map-node-north{left:40%;top:14%}.mbg-map-node-crystal{right:3%;top:27%}.mbg-map-node-ruins{left:3%;top:35%}.mbg-map-node-mushroom{left:35%;top:48%}.mbg-map-node-berry{right:3%;top:58%}.mbg-map-node-power{left:3%;top:67%}.mbg-map-node-home{left:35%;top:76%}.mbg-map-node-crash{right:3%;top:77%}
  .mbg-map-destination{width:47%;right:2%;bottom:1.5%;padding:8px}.mbg-map-destination>strong{font-size:12px}.mbg-map-destination>small{font-size:7px}.mbg-map-destination button{min-height:32px;font-size:11px}
  .mbg-base-recycler{left:2%;top:53%;width:21%;height:20%}
  .mbg-berry-layer{width:16% !important;height:16% !important}
}
.mbg-map-node > span[data-map-lock][hidden] { display:none !important; }


/* ===== Moon-Bean v0.3.1 hotfix ===== */
/* Character uses one CSS background frame. This is deliberately not an <img>, so
   lazy-loading/cache plugins cannot pin the frontend to char_idle. */
.mbg-character-sprite {
  display:block !important;
  position:relative !important;
  z-index:2 !important;
  width:100% !important;
  aspect-ratio:1 / 1 !important;
  height:auto !important;
  background-image:var(--mbg-character-image) !important;
  background-repeat:no-repeat !important;
  background-position:center !important;
  background-size:contain !important;
  visibility:visible !important;
  opacity:1 !important;
  pointer-events:none !important;
}

/* Collect-area items: larger than v0.3.0, but still proportioned as world props. */
.mbg-node-a1-bush{left:7%;top:36%;width:28%;height:27%}
.mbg-node-a1-scrap-a{left:59%;top:36%;width:18%;height:17%}
.mbg-node-a1-scrap-b{left:56%;top:68%;width:18%;height:17%}
.mbg-node-a1-machine{left:12%;top:67%;width:20%;height:19%}
.mbg-node-a1-crystal-a{left:73%;top:58%;width:15%;height:15%}
.mbg-node-a1-crystal-b{left:40%;top:24%;width:15%;height:15%}

.mbg-node-a2-crystal-a{left:8%;top:32%;width:23%;height:23%}
.mbg-node-a2-crystal-b{right:5%;top:57%;width:22%;height:22%}
.mbg-node-a2-wreck-a{left:45%;top:32%;width:24%;height:22%}
.mbg-node-a2-wreck-b{left:17%;top:68%;width:22%;height:20%}
.mbg-node-a2-fruit{right:10%;top:27%;width:15%;height:16%}
.mbg-node-a2-energy{left:43%;top:65%;width:15%;height:16%}

/* Map destinations now show the matching small settlement/biome artwork. */
.mbg-map-node {
  min-width:142px;
  max-width:190px;
  min-height:66px;
  padding:7px 9px;
  overflow:visible;
}
.mbg-map-node .mbg-map-art {
  float:left;
  width:64px;
  height:54px;
  object-fit:contain;
  margin:-2px 7px -2px -5px;
  filter:drop-shadow(0 5px 6px rgba(0,0,0,.45));
}
.mbg-map-node strong { padding-top:7px; }
.mbg-map-node small { white-space:nowrap; }
.mbg-map-node.is-locked .mbg-map-art { filter:grayscale(.35) saturate(.65) brightness(.8) drop-shadow(0 4px 5px rgba(0,0,0,.4)); }

@media(max-width:720px){
  .mbg-map-node{min-width:112px;max-width:144px;min-height:55px;padding:5px 6px}
  .mbg-map-node .mbg-map-art{width:47px;height:43px;margin:-1px 4px -1px -4px}
  .mbg-map-node strong{padding-top:5px;font-size:8.5px}
  .mbg-map-node small{font-size:6.5px}
  .mbg-node-a1-bush{width:29%;height:28%}
  .mbg-node-a1-scrap-a,.mbg-node-a1-scrap-b{width:19%;height:18%}
  .mbg-node-a1-machine{width:21%;height:20%}
  .mbg-node-a1-crystal-a,.mbg-node-a1-crystal-b{width:16%;height:16%}
}


/* ===== Moon-Bean v0.3.2: Backpack, equip slots and clearer quest navigation ===== */

/* Four right-side actions, including the new Backpack button. */
.mbg-side-actions {
  bottom: 11.5%;
  gap: 5px;
}
.mbg-side-actions .mbg-backpack-action {
  border-radius: 19px !important;
}
.mbg-backpack-action .mbg-action-skin {
  position:absolute !important;
  inset:2px !important;
  display:grid !important;
  place-items:center !important;
  border-radius:18px !important;
  background:linear-gradient(180deg,#ffe5b8,#e7b978) !important;
  border:2px solid #8e5f31 !important;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.5),0 5px 10px rgba(42,22,8,.28) !important;
}
.mbg-backpack-action .mbg-action-skin img {
  width:72% !important;
  height:72% !important;
  object-fit:contain !important;
  transform:translateY(-5%) !important;
}
.mbg-side-actions .mbg-backpack-action > span:last-child {
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  bottom:7px !important;
  z-index:4 !important;
  color:#2b2018 !important;
  font-weight:950 !important;
  font-size:10px !important;
  text-align:center !important;
  text-shadow:0 1px #fff1d1 !important;
}

/* Quick inventory remains compact at five visible slots; Backpack stores up to 10 initially. */
.mbg-slot.is-equipped::before {
  content:"★";
  position:absolute;
  left:4px;
  top:3px;
  z-index:4;
  color:#39e8f4;
  font-size:11px;
  text-shadow:0 1px 3px #143149;
}

/* Quest card: readable text, progress and tap-to-preview next quest. */
.mbg-quest-card {
  left:2%;
  top:9.2%;
  width:min(46%,430px);
  min-width:260px;
  grid-template-columns:60px 1fr 10px;
  gap:10px;
  padding:10px 11px;
  border-radius:22px;
}
.mbg-quest-icon {
  -webkit-appearance:none;
  appearance:none;
  padding:0;
  color:#fff;
  cursor:pointer;
  box-shadow:0 0 0 2px rgba(255,255,255,.08),0 5px 12px rgba(0,0,0,.25);
  transition:transform .12s ease,filter .12s ease;
}
.mbg-quest-icon:active { transform:scale(.93); filter:brightness(1.15); }
.mbg-quest-copy { min-width:0; }
.mbg-quest-copy small {
  display:block;
  margin-bottom:2px;
  color:#71e9ff;
  font-size:9px;
  line-height:1.1;
  letter-spacing:.08em;
  font-weight:950;
}
.mbg-quest-copy strong {
  white-space:normal;
  overflow-wrap:anywhere;
}
.mbg-quest-copy span {
  display:block !important;
  margin-top:3px;
  white-space:normal;
}
.mbg-quest-copy em {
  display:inline-block;
  margin-top:5px;
  padding:2px 7px;
  border-radius:999px;
  background:rgba(4,13,32,.42);
  color:#ffe395;
  font-size:10px;
  font-style:normal;
  font-weight:950;
}
.mbg-area-chip { top:18.4%; }
.mbg-click-hint { top:22.3%; }

/* Backpack modal using the approved panel art as the layout skin. */
.mbg-backpack-modal {
  padding:1.2% !important;
  background:rgba(5,10,20,.82) !important;
  backdrop-filter:blur(6px) !important;
}
.mbg-backpack-screen {
  position:relative;
  width:min(92%,720px);
  max-height:96%;
  aspect-ratio:1086 / 1448;
  color:#fff;
  filter:drop-shadow(0 18px 35px rgba(0,0,0,.5));
}
.mbg-backpack-panel-art {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  pointer-events:none;
}
.mbg-backpack-close {
  position:absolute;
  z-index:20;
  right:4.2%;
  top:2.1%;
  width:8.4%;
  aspect-ratio:1;
  border:0;
  border-radius:50%;
  background:transparent;
  color:transparent;
  cursor:pointer;
}
.mbg-backpack-tabs {
  position:absolute;
  z-index:8;
  left:10.3%;
  right:8.8%;
  top:8.7%;
  height:5.4%;
  display:grid;
  grid-template-columns:1.05fr .96fr 1.2fr .9fr;
  gap:1.5%;
}
.mbg-backpack-tabs button {
  min-width:0;
  border:1px solid rgba(34,19,10,.75);
  border-radius:12px;
  background:linear-gradient(180deg,rgba(73,47,30,.98),rgba(48,31,21,.98));
  color:#fff3dd;
  font-size:clamp(7px,1.5vw,13px);
  line-height:1;
  font-weight:900;
  white-space:nowrap;
  cursor:pointer;
  box-shadow:inset 0 0 0 1px rgba(255,220,165,.12);
}
.mbg-backpack-tabs button.is-active {
  background:linear-gradient(180deg,#38e5e6,#16b8c4);
  color:#072d35;
  border-color:#056d78;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.32),0 0 12px rgba(39,224,231,.25);
}

.mbg-backpack-grid {
  position:absolute;
  z-index:8;
  left:11.1%;
  right:9.2%;
  top:15.5%;
  height:47.4%;
  display:grid;
  grid-template-columns:repeat(5,1fr);
  grid-template-rows:repeat(4,1fr);
  column-gap:2.2%;
  row-gap:2.4%;
}
.mbg-backpack-slot {
  position:relative;
  min-width:0;
  min-height:0;
  border:0;
  border-radius:14px;
  background:transparent;
  display:grid;
  place-items:center;
  cursor:pointer;
  padding:4%;
  touch-action:none;
}
.mbg-backpack-slot img {
  width:82%;
  height:82%;
  object-fit:contain;
  filter:drop-shadow(0 4px 5px rgba(0,0,0,.28));
  pointer-events:none;
}
.mbg-backpack-count {
  position:absolute;
  right:6%;
  bottom:3%;
  min-width:20px;
  height:20px;
  padding:0 5px;
  display:grid;
  place-items:center;
  border-radius:999px;
  background:#142347;
  border:1px solid #efc66c;
  color:#fff;
  font-size:10px;
  font-weight:950;
}
.mbg-backpack-slot.is-selected {
  outline:3px solid #39e8ee;
  outline-offset:-4px;
  background:rgba(39,224,231,.12);
}
.mbg-backpack-slot.is-dragging { opacity:.45; }
.mbg-backpack-slot.is-locked {
  opacity:.72;
  background:rgba(12,8,5,.22);
}
.mbg-lock-mark {
  font-size:clamp(14px,3vw,25px);
  filter:drop-shadow(0 2px 2px rgba(0,0,0,.5));
}
.mbg-drag-ghost {
  position:fixed !important;
  z-index:999999 !important;
  width:72px !important;
  height:72px !important;
  transform:translate(-50%,-50%) !important;
  pointer-events:none !important;
  opacity:.88 !important;
  border-radius:15px !important;
  background:rgba(39,59,91,.78) !important;
  border:2px solid #47e9f3 !important;
}

.mbg-equipped-grid {
  position:absolute;
  z-index:8;
  left:11.1%;
  right:9.2%;
  top:69.0%;
  height:14.3%;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  column-gap:2.8%;
}
.mbg-equip-slot {
  position:relative;
  min-width:0;
  border:0;
  border-radius:14px;
  background:transparent;
  display:grid;
  place-items:center;
  padding:4%;
  cursor:pointer;
}
.mbg-equip-slot img {
  width:78%;
  height:78%;
  object-fit:contain;
  filter:drop-shadow(0 4px 5px rgba(0,0,0,.28));
  pointer-events:none;
}
.mbg-equip-slot.is-drop-target {
  outline:3px solid #42eff5;
  outline-offset:-4px;
  background:rgba(66,239,245,.16);
}
.mbg-equip-count {
  position:absolute;
  right:5%;
  bottom:3%;
  color:#fff6dd;
  font-size:10px;
  font-weight:950;
  text-shadow:0 1px 3px #000;
}
.mbg-equip-remove {
  position:absolute;
  right:3%;
  top:2%;
  width:20px;
  height:20px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#a94335;
  border:1px solid #ffd8a4;
  color:#fff;
  font-size:14px;
  line-height:1;
  font-weight:950;
  cursor:pointer;
}
.mbg-backpack-info {
  position:absolute;
  z-index:9;
  left:11.3%;
  right:9.3%;
  top:86.3%;
  bottom:3.7%;
  padding:2.2% 3%;
  overflow:hidden;
  pointer-events:none;
}
.mbg-backpack-info strong {
  display:block;
  color:#61eff3;
  font-size:clamp(10px,2vw,17px);
  line-height:1.1;
}
.mbg-backpack-info span {
  display:block;
  margin-top:3px;
  color:#ffe0a0;
  font-size:clamp(7px,1.25vw,11px);
  font-weight:850;
  letter-spacing:.05em;
}
.mbg-backpack-info p {
  margin:4px 0 0;
  color:#f6e8d4;
  font-size:clamp(7px,1.35vw,12px);
  line-height:1.25;
}
.mbg-backpack-capacity {
  position:absolute;
  z-index:10;
  right:9.5%;
  top:64.1%;
  padding:3px 7px;
  border-radius:999px;
  background:rgba(31,20,13,.76);
  color:#f6dfb7;
  font-size:clamp(7px,1.2vw,11px);
  font-weight:850;
}

@media (max-width:720px) {
  .mbg-side-actions { bottom:12.7%; right:.3%; gap:2px; }
  .mbg-side-actions button { width:58px; height:62px; }
  .mbg-side-actions .mbg-backpack-action > span:last-child { bottom:5px !important; font-size:8px !important; }

  .mbg-quest-card {
    top:10.7%;
    width:59%;
    min-width:0;
    grid-template-columns:48px 1fr 8px;
    gap:6px;
    padding:8px;
  }
  .mbg-quest-icon { width:46px; height:46px; font-size:22px; }
  .mbg-quest-copy small { font-size:7px; }
  .mbg-quest-copy strong { font-size:12px; line-height:1.12; }
  .mbg-quest-copy span { font-size:9px; line-height:1.18; }
  .mbg-quest-copy em { font-size:8px; margin-top:3px; }
  .mbg-area-chip { top:18.8%; }
  .mbg-click-hint { top:22.5%; font-size:10px; }

  .mbg-backpack-screen { width:min(98%,650px); max-height:98%; }
  .mbg-backpack-tabs button { border-radius:8px; }
  .mbg-backpack-slot,.mbg-equip-slot { border-radius:9px; }
  .mbg-backpack-count { min-width:16px; height:16px; font-size:8px; }
  .mbg-equip-remove { width:16px; height:16px; font-size:11px; }
}

@media (max-width:420px) {
  .mbg-quest-card { width:65%; top:11.1%; }
  .mbg-quest-copy span { display:block !important; font-size:8px; }
  .mbg-area-chip { top:19.4%; }
  .mbg-click-hint { top:23.2%; }
  .mbg-side-actions { bottom:13.4%; }
  .mbg-side-actions button { width:54px; height:58px; }
  .mbg-backpack-tabs button { font-size:6px; }
  .mbg-backpack-info p { font-size:7px; }
}


/* WordPress-theme hardening for v0.3.2 UI buttons. */
.mbg-game-shell button.mbg-quest-icon,
.mbg-game-shell button.mbg-backpack-action,
.mbg-game-shell .mbg-backpack-tabs button,
.mbg-game-shell button.mbg-backpack-slot,
.mbg-game-shell button.mbg-equip-slot,
.mbg-game-shell button.mbg-backpack-close {
  -webkit-appearance:none !important;
  appearance:none !important;
  text-transform:none !important;
  letter-spacing:normal;
  box-shadow:none;
}
.mbg-game-shell button.mbg-backpack-action {
  background:transparent !important;
  border:0 !important;
}


/* ===== Moon-Bean v0.3.3: compact quick bar, visible guidance, adaptive inventory panels ===== */

/* Bottom quick items: show only four useful shortcuts and leave the lower-right side free for MAP. */
.mbg-inventory {
  left:2.5% !important;
  right:auto !important;
  width:min(68%,560px) !important;
  bottom:1.6% !important;
  padding:7px 8px 9px !important;
}
.mbg-inventory-slots {
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:5px !important;
}
.mbg-inventory-title-row { margin:0 7px 5px 8px !important; }
.mbg-inventory-title-row strong { font-size:clamp(11px,1.75vw,18px) !important; }
.mbg-inventory-title-row small { font-size:clamp(8px,1.2vw,12px) !important; }
.mbg-side-actions { bottom:2.2% !important; }

/* The location chip and movement help now live below the quest card instead of behind it. */
.mbg-area-chip {
  top:23.4% !important;
  z-index:151 !important;
  background:rgba(14,24,46,.90) !important;
  box-shadow:0 4px 10px rgba(0,0,0,.2) !important;
}
.mbg-click-hint {
  top:27.1% !important;
  z-index:151 !important;
  max-width:72% !important;
  color:#fff !important;
  background:rgba(13,23,46,.92) !important;
  border:1px solid rgba(255,216,133,.48) !important;
  box-shadow:0 5px 12px rgba(0,0,0,.24) !important;
  font-weight:800 !important;
  text-align:center !important;
  white-space:nowrap !important;
}

/* Adaptive Backpack: 10-slot start panel, then a taller expanded skin when future upgrades exceed 10. */
.mbg-backpack-screen {
  width:min(96%,920px) !important;
  max-height:96% !important;
  filter:drop-shadow(0 18px 35px rgba(0,0,0,.52)) !important;
}
.mbg-backpack-screen.is-start { aspect-ratio:1536 / 1024 !important; }
.mbg-backpack-screen.is-expanded { width:min(92%,720px) !important; aspect-ratio:1086 / 1448 !important; }
.mbg-backpack-panel-art { display:none !important; object-fit:contain !important; }
.mbg-backpack-screen.is-start .mbg-backpack-panel-start,
.mbg-backpack-screen.is-expanded .mbg-backpack-panel-expanded { display:block !important; }

.mbg-backpack-title {
  position:absolute;
  z-index:12;
  left:14%;
  right:14%;
  top:3.6%;
  color:#3d2415;
  font-size:clamp(13px,2.3vw,26px);
  line-height:1;
  font-weight:1000;
  text-align:center;
  text-shadow:0 1px rgba(255,225,173,.7);
  pointer-events:none;
}
.mbg-equipped-label {
  position:absolute;
  z-index:10;
  color:#52edf1;
  font-weight:950;
  letter-spacing:.04em;
  text-shadow:0 2px 3px rgba(0,0,0,.55);
  pointer-events:none;
}

/* START / 10 slots */
.mbg-backpack-screen.is-start .mbg-backpack-close { right:4.1% !important; top:3.0% !important; width:7.0% !important; }
.mbg-backpack-screen.is-start .mbg-backpack-tabs {
  left:8.3% !important; right:8.3% !important; top:16.8% !important; height:7.2% !important;
}
.mbg-backpack-screen.is-start .mbg-backpack-grid {
  left:8.5% !important; right:8.5% !important; top:27.0% !important; height:28.6% !important;
  grid-template-columns:repeat(5,1fr) !important; grid-template-rows:repeat(2,1fr) !important;
  column-gap:1.7% !important; row-gap:4.8% !important;
}
.mbg-backpack-screen.is-start .mbg-equipped-label { left:9.0%; top:59.0%; font-size:clamp(8px,1.35vw,13px); }
.mbg-backpack-screen.is-start .mbg-equipped-grid {
  left:8.7% !important; right:8.7% !important; top:63.1% !important; height:11.8% !important;
  grid-template-columns:repeat(4,1fr) !important; column-gap:2.0% !important;
}
.mbg-backpack-screen.is-start .mbg-backpack-capacity { right:8.8% !important; top:58.0% !important; }
.mbg-backpack-screen.is-start .mbg-backpack-info {
  left:8.7% !important; right:8.7% !important; top:78.0% !important; bottom:5.7% !important;
  padding:1.8% 2.4% !important;
}

/* EXPANDED / future 11-20 slots */
.mbg-backpack-screen.is-expanded .mbg-backpack-title { top:2.7%; }
.mbg-backpack-screen.is-expanded .mbg-backpack-close { right:4.3% !important; top:2.2% !important; width:8.2% !important; }
.mbg-backpack-screen.is-expanded .mbg-backpack-tabs {
  left:10.0% !important; right:9.0% !important; top:8.8% !important; height:5.3% !important;
}
.mbg-backpack-screen.is-expanded .mbg-backpack-grid {
  left:10.4% !important; right:9.4% !important; top:16.0% !important; height:46.8% !important;
  grid-template-columns:repeat(5,1fr) !important; grid-template-rows:repeat(4,1fr) !important;
  column-gap:2.0% !important; row-gap:2.3% !important;
}
.mbg-backpack-screen.is-expanded .mbg-equipped-label { left:10.8%; top:64.9%; font-size:clamp(8px,1.4vw,13px); }
.mbg-backpack-screen.is-expanded .mbg-equipped-grid {
  left:10.5% !important; right:9.5% !important; top:68.5% !important; height:13.1% !important;
  grid-template-columns:repeat(4,1fr) !important; column-gap:2.5% !important;
}
.mbg-backpack-screen.is-expanded .mbg-backpack-capacity { right:9.5% !important; top:64.0% !important; }
.mbg-backpack-screen.is-expanded .mbg-backpack-info {
  left:10.5% !important; right:9.5% !important; top:85.0% !important; bottom:4.1% !important;
  padding:2.0% 2.7% !important;
}

/* We draw the grid ourselves on the new blank panels. */
.mbg-backpack-slot,
.mbg-equip-slot {
  -webkit-appearance:none !important;
  appearance:none !important;
  border:2px solid rgba(112,74,45,.92) !important;
  background:linear-gradient(180deg,rgba(61,43,31,.93),rgba(43,30,22,.96)) !important;
  box-shadow:inset 0 0 0 1px rgba(255,216,157,.12),0 2px 4px rgba(0,0,0,.22) !important;
  border-radius:12px !important;
  outline:none !important;
}
.mbg-backpack-slot.is-empty { opacity:.82 !important; }
.mbg-backpack-slot.is-locked {
  opacity:.74 !important;
  background:linear-gradient(180deg,rgba(38,30,25,.80),rgba(29,23,19,.88)) !important;
}
.mbg-backpack-slot:hover,
.mbg-backpack-slot:focus,
.mbg-backpack-slot:active,
.mbg-equip-slot:hover,
.mbg-equip-slot:focus,
.mbg-equip-slot:active {
  background:linear-gradient(180deg,rgba(66,48,34,.96),rgba(46,32,23,.98)) !important;
  box-shadow:inset 0 0 0 1px rgba(255,224,174,.16),0 2px 5px rgba(0,0,0,.24) !important;
}
.mbg-backpack-slot.is-selected {
  outline:3px solid #39e8ee !important;
  outline-offset:-4px !important;
  background:linear-gradient(180deg,rgba(52,78,72,.97),rgba(37,53,48,.98)) !important;
}

/* WordPress/theme hardening: never paint inventory buttons red on touch. */
.mbg-game-shell button.mbg-backpack-slot,
.mbg-game-shell button.mbg-equip-slot,
.mbg-game-shell button.mbg-slot {
  -webkit-tap-highlight-color:transparent !important;
  accent-color:transparent !important;
}
.mbg-game-shell button.mbg-backpack-slot::before,
.mbg-game-shell button.mbg-backpack-slot::after,
.mbg-game-shell button.mbg-equip-slot::before,
.mbg-game-shell button.mbg-equip-slot::after { display:none !important; content:none !important; }

@media (max-width:720px) {
  .mbg-inventory { width:72% !important; left:2% !important; bottom:1.2% !important; border-radius:18px !important; }
  .mbg-side-actions { right:.4% !important; bottom:1.4% !important; }
  .mbg-side-actions button { width:56px !important; height:60px !important; }
  .mbg-area-chip { top:24.0% !important; }
  .mbg-click-hint { top:27.8% !important; font-size:9px !important; padding:6px 10px !important; }

  .mbg-backpack-screen.is-start { width:min(98%,760px) !important; }
  .mbg-backpack-screen.is-start .mbg-backpack-title { top:3.2%; font-size:clamp(12px,3vw,22px); }
  .mbg-backpack-screen.is-start .mbg-backpack-tabs button { font-size:clamp(6px,1.75vw,10px) !important; }
  .mbg-backpack-screen.is-start .mbg-backpack-info strong { font-size:clamp(9px,2.2vw,14px) !important; }
  .mbg-backpack-screen.is-start .mbg-backpack-info p { font-size:clamp(6px,1.6vw,10px) !important; }
}
@media (max-width:420px) {
  .mbg-inventory { width:73% !important; }
  .mbg-side-actions { bottom:1.2% !important; }
  .mbg-side-actions button { width:52px !important; height:56px !important; }
  .mbg-area-chip { top:24.8% !important; font-size:10px !important; }
  .mbg-click-hint { top:28.6% !important; max-width:78% !important; font-size:8px !important; }
  .mbg-backpack-screen.is-start .mbg-backpack-tabs { gap:1% !important; }
  .mbg-backpack-screen.is-start .mbg-backpack-tabs button { border-radius:7px !important; font-size:5.7px !important; }
  .mbg-backpack-screen.is-start .mbg-backpack-slot,
  .mbg-backpack-screen.is-start .mbg-equip-slot { border-radius:8px !important; }
}

/* ===== Moon-Bean v0.4.0: large worlds + 9:16 camera viewport ===== */
/* The stage remains the fixed mobile viewport. The terrain is several viewport sizes
   larger and translated behind the fixed HUD while Moon-Bean moves in world pixels. */
.mbg-stage {
  background-color:#9e6c35;
  background-image:var(--mbg-ground);
  background-size:cover;
  background-position:center;
  isolation:isolate;
}
.mbg-world-terrain {
  --mbg-world-image:none;
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
  z-index:0;
  pointer-events:none;
  background-image:linear-gradient(rgba(13,24,44,.02),rgba(13,24,44,.06)),var(--mbg-world-image);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  transform:translate3d(0,0,0);
  transform-origin:0 0;
  will-change:transform;
  backface-visibility:hidden;
}
.mbg-area-layer {
  position:absolute !important;
  inset:0 !important;
  z-index:10 !important;
  overflow:visible !important;
  pointer-events:none !important;
}
.mbg-area-layer > * { pointer-events:auto !important; }
.mbg-action-object,
.mbg-node {
  transform:translate(-50%,-50%);
  transform-origin:50% 50%;
  will-change:left,top;
}
.mbg-action-object:hover,
.mbg-node:not(:disabled):hover { transform:translate(-50%,calc(-50% - 2px)); }
.mbg-action-object:active,
.mbg-node:not(:disabled):active { transform:translate(-50%,-50%) scale(.985); }

/* Fixed visual scale: enlarging the world never shrinks Moon-Bean or the props. */
.mbg-character {
  width:clamp(105px,18%,190px) !important;
  will-change:left,top,transform !important;
}

/* Compact live minimap. It shows the current terrain and Moon-Bean's normalized world position. */
.mbg-minimap {
  position:absolute;
  z-index:148;
  right:1.8%;
  top:8.4%;
  width:clamp(72px,11.5%,112px);
  aspect-ratio:1 / 1;
  border-radius:22%;
  overflow:hidden;
  border:2px solid rgba(227,193,126,.88);
  background:#162440;
  box-shadow:0 7px 18px rgba(0,0,0,.34),inset 0 0 0 2px rgba(255,255,255,.08);
  pointer-events:none;
}
.mbg-minimap-terrain {
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  filter:saturate(.92) brightness(.76);
  opacity:.94;
}
.mbg-minimap::after {
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at center,transparent 35%,rgba(7,14,31,.36) 100%);
  pointer-events:none;
}
.mbg-minimap-player {
  position:absolute;
  z-index:3;
  width:10px;
  height:10px;
  border-radius:50%;
  transform:translate(-50%,-50%);
  background:#6ff4ff;
  border:2px solid #fff5ad;
  box-shadow:0 0 0 3px rgba(19,44,79,.68),0 0 10px #63efff;
}
.mbg-minimap > span {
  position:absolute;
  z-index:4;
  left:4px;
  right:4px;
  bottom:4px;
  padding:2px 3px;
  border-radius:999px;
  background:rgba(10,20,42,.78);
  color:#f7fbff;
  font-size:clamp(6px,.85vw,9px);
  line-height:1.1;
  font-weight:950;
  text-align:center;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Keep quest/help information readable while the world scrolls behind it. */
.mbg-area-chip { z-index:152 !important; }
.mbg-click-hint { z-index:152 !important; }

@media (max-width:720px) {
  .mbg-minimap { right:1.2%; top:8.3%; width:72px; border-radius:18px; }
  .mbg-minimap-player { width:8px; height:8px; border-width:1px; }
  .mbg-minimap > span { font-size:6px; bottom:3px; }
}
@media (max-width:420px) {
  .mbg-minimap { width:64px; top:8.6%; right:1%; }
}

/* ===== Moon-Bean v0.5.0: Farezone Flight Run ===== */
.mbg-event-layer {
  position:absolute;
  inset:0;
  z-index:12;
  overflow:hidden;
  background:#07101f;
  pointer-events:none;
}
.mbg-event-layer[hidden] { display:none !important; }
.mbg-stage.is-farezone-event .mbg-world-terrain,
.mbg-stage.is-farezone-event .mbg-area-layer,
.mbg-stage.is-farezone-event .mbg-quest-card,
.mbg-stage.is-farezone-event .mbg-area-chip,
.mbg-stage.is-farezone-event .mbg-minimap,
.mbg-stage.is-farezone-event .mbg-side-actions,
.mbg-stage.is-farezone-event .mbg-inventory,
.mbg-stage.is-farezone-event .mbg-click-hint { display:none !important; }
.mbg-stage.is-farezone-event::after { display:none !important; }
.mbg-event-world {
  --mbg-event-world:none;
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
  z-index:1;
  background-image:linear-gradient(rgba(5,9,22,.06),rgba(4,8,20,.14)),var(--mbg-event-world);
  background-size:100% 100%;
  background-position:center top;
  background-repeat:no-repeat;
  transform:translate3d(0,0,0);
  transform-origin:0 0;
  will-change:transform;
  pointer-events:none;
}
.mbg-event-prop,
.mbg-event-orb,
.mbg-event-pickup,
.mbg-event-warning-prop,
.mbg-event-finish,
.mbg-event-loot {
  position:absolute;
  transform:translate(-50%,-50%);
  transform-origin:50% 50%;
  object-fit:contain;
  pointer-events:none;
  user-select:none;
  -webkit-user-drag:none;
  filter:drop-shadow(0 10px 12px rgba(0,0,0,.35));
}
.mbg-event-crystal-wall { width:28%; z-index:18; }
.mbg-event-wreck { width:23%; z-index:19; }
.mbg-event-steam { width:24%; z-index:24; transition:opacity .22s,filter .22s; }
.mbg-event-laser { width:44%; z-index:26; transition:opacity .18s,filter .18s; }
.mbg-event-rock-wall { width:30%; z-index:17; }
.mbg-event-ruin { width:18%; z-index:20; }
.mbg-event-prop.is-inactive { opacity:.33; filter:saturate(.55) brightness(.62) drop-shadow(0 8px 10px rgba(0,0,0,.35)); }
.mbg-event-prop.is-active[data-event-type="laser"] { animation:mbgEventLaserPulse .48s ease-in-out infinite alternate; }
.mbg-event-prop.is-active[data-event-type="steam"] { animation:mbgEventSteamPulse .74s ease-in-out infinite alternate; }
@keyframes mbgEventLaserPulse { from{filter:drop-shadow(0 0 7px rgba(255,66,53,.48))} to{filter:drop-shadow(0 0 18px rgba(255,32,28,.95)) brightness(1.12)} }
@keyframes mbgEventSteamPulse { from{filter:drop-shadow(0 6px 10px rgba(0,0,0,.35))} to{filter:drop-shadow(0 0 15px rgba(255,218,167,.46)) brightness(1.08)} }
.mbg-event-orb { width:10.5%; z-index:29; animation:mbgEventOrbSpin 1.8s linear infinite; }
.mbg-event-orb.is-danger-near { filter:drop-shadow(0 0 16px rgba(255,93,36,.95)); }
@keyframes mbgEventOrbSpin { from{transform:translate(-50%,-50%) rotate(0deg)} to{transform:translate(-50%,-50%) rotate(360deg)} }
.mbg-event-pickup {
  width:8.5%;
  aspect-ratio:1;
  border:0;
  padding:0;
  background:transparent;
  z-index:31;
  animation:mbgEventPickup 1.25s ease-in-out infinite alternate;
}
.mbg-event-pickup img { width:100%; height:100%; object-fit:contain; pointer-events:none; }
.mbg-event-pickup.is-collected { animation:mbgEventCollect .22s ease-out forwards; }
@keyframes mbgEventPickup { from{transform:translate(-50%,-50%) scale(.92);filter:drop-shadow(0 0 7px rgba(255,210,64,.55))} to{transform:translate(-50%,-56%) scale(1.05);filter:drop-shadow(0 0 17px rgba(92,224,255,.92))} }
@keyframes mbgEventCollect { to{transform:translate(-50%,-75%) scale(1.45);opacity:0} }
.mbg-event-warning-prop { width:8%; z-index:34; animation:mbgEventWarning .55s ease-in-out infinite alternate; }
@keyframes mbgEventWarning { from{opacity:.55;transform:translate(-50%,-50%) scale(.92)} to{opacity:1;transform:translate(-50%,-50%) scale(1.08)} }
.mbg-event-finish { width:28%; z-index:22; filter:drop-shadow(0 0 22px rgba(191,78,255,.7)); }
.mbg-event-loot { width:12%; z-index:34; animation:mbgEventLoot 1.5s ease-in-out infinite alternate; }
@keyframes mbgEventLoot { from{transform:translate(-50%,-50%) translateY(0)} to{transform:translate(-50%,-50%) translateY(-10px)} }

.mbg-event-hud {
  position:absolute;
  z-index:212;
  left:2.2%;
  right:2.2%;
  top:8.5%;
  display:grid;
  grid-template-columns:1.2fr 1fr 1fr auto;
  gap:6px;
  align-items:stretch;
  pointer-events:auto;
}
.mbg-event-hud > div,
.mbg-event-hud > button {
  min-height:44px;
  padding:6px 9px;
  border-radius:14px;
  border:1px solid rgba(232,195,126,.72);
  background:linear-gradient(180deg,rgba(29,47,83,.94),rgba(13,26,50,.94));
  box-shadow:0 6px 18px rgba(0,0,0,.35),inset 0 0 0 1px rgba(255,255,255,.06);
  color:#fff;
}
.mbg-event-hud small { display:block; color:#66ecff; font-size:8px; font-weight:950; letter-spacing:.11em; }
.mbg-event-hud strong { display:block; margin-top:1px; font-size:clamp(14px,2.2vw,22px); line-height:1.05; }
.mbg-event-hud > button { cursor:pointer; font-weight:950; color:#ffd166; }
.mbg-event-progress {
  position:absolute;
  z-index:211;
  left:3%;
  right:3%;
  top:14.5%;
  height:8px;
  border-radius:999px;
  overflow:hidden;
  background:rgba(5,12,27,.78);
  border:1px solid rgba(255,255,255,.18);
}
.mbg-event-progress i { display:block; width:0; height:100%; background:linear-gradient(90deg,#58e6ff,#b166ff,#ffd659); box-shadow:0 0 12px rgba(96,225,255,.8); transition:width .12s linear; }
.mbg-event-countdown {
  position:absolute;
  z-index:220;
  left:50%;
  top:42%;
  transform:translate(-50%,-50%);
  min-width:110px;
  padding:14px 20px;
  border-radius:26px;
  background:rgba(10,22,47,.86);
  border:2px solid rgba(255,213,91,.9);
  box-shadow:0 12px 40px rgba(0,0,0,.5),0 0 30px rgba(103,224,255,.35);
  color:#fff7c7;
  text-align:center;
  font-size:clamp(42px,10vw,88px);
  font-weight:1000;
  line-height:1;
  pointer-events:none;
}
.mbg-event-help {
  position:absolute;
  z-index:210;
  left:50%;
  top:17%;
  transform:translateX(-50%);
  width:min(92%,560px);
  padding:8px 12px;
  border-radius:999px;
  background:rgba(8,17,35,.78);
  border:1px solid rgba(255,255,255,.16);
  color:#f4f7ff;
  text-align:center;
  font-size:clamp(9px,1.4vw,13px);
  font-weight:800;
  pointer-events:none;
}
.mbg-event-hit-fx,
.mbg-event-boost-fx {
  position:absolute;
  z-index:205;
  transform:translate(-50%,-50%);
  pointer-events:none;
  object-fit:contain;
}
.mbg-event-hit-fx { width:clamp(120px,30%,250px); opacity:0; }
.mbg-event-hit-fx.is-playing { animation:mbgEventHitFx .6s ease-out forwards; }
@keyframes mbgEventHitFx { 0%{opacity:0;transform:translate(-50%,-50%) scale(.4)} 25%{opacity:1} 100%{opacity:0;transform:translate(-50%,-50%) scale(1.35)} }
.mbg-event-boost-fx { width:clamp(85px,18%,155px); opacity:.88; filter:drop-shadow(0 0 14px rgba(68,218,255,.9)); animation:mbgEventBoostFx .18s ease-in-out infinite alternate; }
@keyframes mbgEventBoostFx { from{transform:translate(-50%,-45%) scale(.88)} to{transform:translate(-50%,-45%) scale(1.08)} }
.mbg-character.is-event-hit { animation:mbgEventActorHit .5s ease-out; }
@keyframes mbgEventActorHit { 0%,100%{filter:none} 20%,60%{filter:brightness(1.35) saturate(1.5) drop-shadow(0 0 14px #ff4f32);transform:translate(-50%,-50%) scale(.92)} }

.mbg-event-result-card { text-align:center; width:min(560px,95%); }
.mbg-event-result-card > img { width:min(180px,42%); max-height:155px; object-fit:contain; margin:-10px auto 0; display:block; }
.mbg-event-result-card > small { color:#65e9ff; font-weight:950; letter-spacing:.13em; }
.mbg-event-result-card h2 { margin:5px 0 7px; font-size:clamp(24px,5vw,40px); }
.mbg-event-result-card p { color:#dce8ff; }
.mbg-event-result-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin:12px 0; }
.mbg-event-result-stats span { padding:9px 6px; border-radius:14px; background:rgba(5,14,31,.45); border:1px solid rgba(255,255,255,.12); color:#b8cae8; font-size:11px; }
.mbg-event-result-stats strong { display:block; margin-top:3px; color:#fff7b4; font-size:18px; }
.mbg-event-rewards { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; margin:12px 0; }
.mbg-event-rewards > span { min-height:52px; display:flex; align-items:center; gap:7px; padding:7px; border-radius:13px; background:rgba(12,24,48,.78); border:1px solid rgba(255,211,106,.24); text-align:left; color:#f4f7ff; font-size:11px; }
.mbg-event-rewards img { width:38px; height:38px; object-fit:contain; flex:0 0 auto; }
.mbg-event-result-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:12px; }
.mbg-event-result-actions button { min-height:44px; border:0; border-radius:14px; font-weight:950; cursor:pointer; }
.mbg-event-result-actions button:last-child { background:#e9effc; color:#17233e; }

.mbg-map-node-farezone { left:63%; top:8%; }
.mbg-map-node-farezone .mbg-map-art { filter:drop-shadow(0 0 9px rgba(183,81,255,.75)); }

@media(max-width:720px) {
  .mbg-event-hud { top:8.8%; gap:3px; }
  .mbg-event-hud > div,.mbg-event-hud > button { min-height:38px; padding:5px 6px; border-radius:10px; }
  .mbg-event-hud small { font-size:6px; }
  .mbg-event-hud strong { font-size:13px; }
  .mbg-event-progress { top:14.1%; height:6px; }
  .mbg-event-help { top:15.6%; font-size:8px; padding:6px 8px; }
  .mbg-event-crystal-wall { width:31%; }
  .mbg-event-laser { width:47%; }
  .mbg-event-steam { width:27%; }
  .mbg-event-orb { width:12%; }
  .mbg-event-pickup { width:10%; }
  .mbg-map-node-farezone { left:58%; top:8%; }
  .mbg-event-result-actions { grid-template-columns:1fr; }
}