/* MAN BUBBLE BLAST — premium neon arcade (yellow / blue / purple), its lobby card theme. */
.jv-gc--bubble {
  --gc-bg: linear-gradient(160deg, #0c1640 0%, #1b1060 55%, #2a0f5c 100%); --gc-ink: #fffbe6; --gc-sub: #b9d6ff;
  --gc-accent: #ffd400; --gc-accent-ink: #120a35; --gc-glow: rgba(34, 167, 255, 0.55);
  --gc-art-bg: radial-gradient(circle at 30% 30%, rgba(34, 167, 255, 0.22), transparent 60%), radial-gradient(circle at 80% 70%, rgba(155, 92, 255, 0.25), transparent 55%), #070a22;
  border-color: rgba(34, 167, 255, 0.5);
}
.jv-gc--bubble .jv-gc-badge { background: #22a7ff; color: #fff; }

.mb-root { --gold: #ffd400; --blue: #22a7ff; --purple: #9b5cff; --mag: #ff3df0; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 10px 8px 14px; color: #e8ecf4; font-family: ui-rounded, 'SF Pro Rounded', 'Noto Sans Thai', system-ui, sans-serif; overscroll-behavior: contain; }
.mb-hud { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; width: min(100%, 480px); }
.mb-hud div { text-align: center; padding: 5px 4px; border: 1px solid rgba(34, 167, 255, 0.35); border-radius: 10px; background: rgba(7, 10, 34, 0.9); box-shadow: inset 0 0 12px rgba(155, 92, 255, 0.15); min-width: 0; }
.mb-hud span { display: block; font: 700 9px ui-monospace, monospace; letter-spacing: 0.14em; color: var(--blue); }
.mb-hud b { display: block; font: 800 16px ui-monospace, monospace; color: var(--gold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-shadow: 0 0 10px rgba(255, 212, 0, 0.4); }
.mb-screen { position: relative; height: var(--mb-h, min(70vh, 760px)); aspect-ratio: 360 / 600; max-width: 100%; border: 2px solid rgba(155, 92, 255, 0.6); border-radius: 14px; overflow: hidden; background: #03040c;
  box-shadow: 0 0 34px rgba(34, 167, 255, 0.25), 0 0 0 1px rgba(255, 212, 0, 0.25) inset; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.mb-canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: crosshair; }
.mb-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 14px; background: rgba(3, 4, 12, 0.66); backdrop-filter: blur(2px); overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; }
.mb-overlay[hidden] { display: none; }
.mb-overlay:has(.mb-save) { align-items: flex-start; }
.mb-card { width: 100%; max-width: 300px; margin: auto 0; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.mb-title { font: 900 22px ui-monospace, Menlo, monospace; letter-spacing: 0.12em; color: #fff; line-height: 1.3; }
.mb-title b { display: block; font-size: 26px; color: var(--gold); text-shadow: 0 0 16px rgba(255, 212, 0, 0.65), 2px 2px 0 var(--purple); }
.mb-title.mb-red { color: #ff4d6d; font-size: 28px; text-shadow: 0 0 16px rgba(255, 77, 109, 0.6), 2px 2px 0 #3a0010; }
.mb-title.mb-win { color: var(--gold); font-size: 30px; text-shadow: 0 0 18px rgba(255, 212, 0, 0.7), 2px 2px 0 var(--blue); }
.mb-sub { font: 800 14px ui-monospace, monospace; letter-spacing: 0.12em; color: var(--blue); }
.mb-help { margin: 0; font-size: 12.5px; line-height: 1.7; color: #c9d3ea; }
.mb-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 10px; font-size: 11.5px; color: #b9c2d6; }
.mb-stats { display: flex; gap: 6px; justify-content: center; }
.mb-stats div { padding: 5px 10px; border: 1px solid rgba(34, 167, 255, 0.4); border-radius: 8px; background: rgba(6, 7, 20, 0.88); }
.mb-stats span { display: block; font: 700 9px ui-monospace, monospace; letter-spacing: 0.12em; color: var(--blue); }
.mb-stats b { font: 800 16px ui-monospace, monospace; color: var(--gold); }
.mb-new { font: 900 13px ui-monospace, monospace; letter-spacing: 0.14em; color: var(--mag); animation: mb-blink 0.8s steps(2) infinite; }
@keyframes mb-blink { 50% { opacity: 0.3; } }
.mb-btn { font: inherit; font-size: 13px; background: #0b0f1f; border: 1px solid rgba(155, 92, 255, 0.45); color: #e8ecf4; padding: 9px 14px; border-radius: 10px; cursor: pointer; touch-action: manipulation; min-height: 40px; }
.mb-btn:hover { border-color: var(--gold); }
.mb-btn:disabled { opacity: 0.5; cursor: wait; }
.mb-primary { background: var(--gold); color: #120a35; border-color: var(--gold); font-weight: 900; letter-spacing: 0.08em; padding: 11px 26px; box-shadow: 0 0 18px rgba(255, 212, 0, 0.4); }
.mb-bar { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.mb-bar [aria-pressed="false"] { color: #7b8496; }
/* save score + TOP 10 */
.mb-save { width: 100%; display: flex; flex-direction: column; gap: 5px; }
.mb-save-lbl { font: 700 9.5px ui-monospace, monospace; letter-spacing: 0.16em; color: var(--blue); text-align: left; }
.mb-save-row { display: flex; gap: 6px; }
.mb-name { flex: 1; min-width: 0; min-height: 42px; padding: 0 10px; border-radius: 8px; border: 1px solid rgba(34, 167, 255, 0.55); background: rgba(6, 7, 20, 0.92); color: #fff; font: 700 15px ui-monospace, Menlo, 'Noto Sans Thai', monospace; touch-action: manipulation; }
.mb-name:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 12px rgba(255, 212, 0, 0.35); }
.mb-save-btn { color: var(--gold); border-color: rgba(255, 212, 0, 0.6); font-weight: 900; white-space: nowrap; }
.mb-msg { margin: 0; min-height: 1.2em; font-size: 11.5px; color: #b9c2d6; }
.mb-msg.mb-err { color: #ff4d6d; }
.mb-saved .mb-msg { color: #4ade80; }
.mb-board { width: 100%; display: flex; flex-direction: column; gap: 6px; }
.mb-rank { font: 900 15px ui-monospace, monospace; letter-spacing: 0.1em; color: #fff; }
.mb-rank b { color: var(--gold); font-size: 22px; text-shadow: 0 0 12px rgba(255, 212, 0, 0.6), 2px 2px 0 var(--purple); }
.mb-rank small { color: #8f9ab0; font-size: 10.5px; }
.mb-top-h { font: 900 11px ui-monospace, monospace; letter-spacing: 0.2em; color: var(--mag); }
.mb-top { list-style: none; margin: 0; padding: 4px; border: 1px solid rgba(34, 167, 255, 0.4); border-radius: 8px; background: rgba(6, 7, 20, 0.9); display: grid; gap: 1px; }
.mb-top li { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 6px; align-items: center; padding: 3px 6px; border-radius: 5px; font: 12px ui-monospace, Menlo, 'Noto Sans Thai', monospace; text-align: left; }
.mb-top li:nth-child(1) .mb-rk { color: var(--gold); } .mb-top li:nth-child(2) .mb-rk { color: #e8ecf4; } .mb-top li:nth-child(3) .mb-rk { color: #ff8a1f; }
.mb-rk { font-weight: 900; color: var(--blue); text-align: right; }
.mb-nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mb-top b { color: var(--gold); }
.mb-top li.me { background: rgba(155, 92, 255, 0.3); box-shadow: inset 0 0 0 1px var(--gold); color: #fff; font-weight: 700; }
.mb-top li.mb-gap { display: block; text-align: center; color: #5b6478; padding: 0; }
@media (max-width: 480px) { .mb-hud b { font-size: 14px; } .mb-hud span { font-size: 8px; } .mb-btn { font-size: 12px; padding: 8px 10px; } }
@media (orientation: landscape) and (max-height: 520px) {
  .mb-root { flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: flex-start; }
  .mb-hud { grid-template-columns: 1fr; width: 110px; order: 0; }
  .mb-screen { order: 1; }
  .mb-bar { order: 2; flex-direction: column; width: 150px; }
}
@media (prefers-reduced-motion: reduce) { .mb-new { animation: none; } }