/* ======================================================================
   jellyball.io site shell: the cartoony game-UI skin for the top bar, home, and the Explore / Play / Create frame.
   Frames, containers and 3D buttons are the Cartoony UI Pack's own SVGs used as 9-slice border-images. They're
   loaded from public/jellyball/ui/skin/: copies of public/jellyball/ui/cartoony/ files with only
   width/height added. The pack's files only have a viewBox, and an SVG with no size of its own is drawn at the size of
   the box it borders, so the slice numbers land in the wrong place (corners and lips grow with the box); pictograms are Vector Icon Pack Pro files (client-src/04e-jellyball.js JX_PACK).
   Everything is scoped to html[data-brand="jellyball"]; chideout.com never matches.
   Not here: 2D level player/editor/campaign cards (.jl-*, .jx-levels, .jx-run*), Jelly City (.jc-*).
   ====================================================================== */
html[data-brand="jellyball"] {
  --jxs-ink: #1b2d38;        /* the pack's darkest outline: text on white panels */
  --jxs-ink-2: #476475;      /* secondary text on white */
  --jxs-red: #e62e49; --jxs-blue: #1778ff; --jxs-yellow: #fc9504; --jxs-purple: #aa00ff;
  --jxs-ui: '';              /* (paths are spelled out below: url() can't be assembled from variables) */
}

/* ---------- the 3D button: pack "button-square-3d-2.5" (160×64; slice 7 7 17 7, pressed 13 7 11 7) ----------
   --s scales the outline/lip; the face moves down onto its lip on :active (same total border, no layout jump). */
html[data-brand="jellyball"] :where(.jh-action, .jx-tab.is-on, .topbar .signup-cta, .jx-page .jb-card .btn, .jxs-btn) {
  --s: 1;
  --b-std: url('/jellyball/ui/skin/buttons/3d/square/red/button-square-3d-2.5-red-regular_standard.svg');
  --b-hov: url('/jellyball/ui/skin/buttons/3d/square/red/button-square-3d-2.5-red-regular_hover.svg');
  --b-prs: url('/jellyball/ui/skin/buttons/3d/square/red/button-square-3d-2.5-red-regular_pressed.svg');
  --b-ink: #800046;
  border-style: solid !important;
  border-color: transparent !important;
  border-width: calc(7px * var(--s)) calc(7px * var(--s)) calc(17px * var(--s)) !important;
  border-image-source: var(--b-std) !important;
  border-image-slice: 7 7 17 7 fill !important;
  border-image-width: 1 !important;
  border-image-repeat: stretch !important;
  border-radius: calc(9px * var(--s)) !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  color: #fff !important;
  text-shadow: 0 calc(2px * var(--s)) 0 var(--b-ink), 0 0 2px var(--b-ink);
  font-weight: 800 !important;
  cursor: pointer;
  transition: filter 0.12s, transform 0.12s !important;
}
html[data-brand="jellyball"] :where(.jh-action, .jx-tab.is-on, .topbar .signup-cta, .jx-page .jb-card .btn, .jxs-btn):hover {
  border-image-source: var(--b-hov) !important;
  transform: none !important;
}
html[data-brand="jellyball"] :where(.jh-action, .topbar .signup-cta, .jx-page .jb-card .btn, .jxs-btn):active {
  border-image-source: var(--b-prs) !important;
  border-image-slice: 13 7 11 7 fill !important;
  border-width: calc(13px * var(--s)) calc(7px * var(--s)) calc(11px * var(--s)) !important;
  transform: none !important;
}
html[data-brand="jellyball"] :is(.jh-action, .jx-tab, .topbar .signup-cta, .jx-page .jb-card .btn, .jx-card, .jxs-btn, .topbar .persona-btn, .topbar .icon-btn):focus-visible {
  outline: 3px solid #fff !important; outline-offset: 2px !important;
  box-shadow: 0 0 0 6px var(--jxs-ink) !important;
}
/* colours */
html[data-brand="jellyball"] :is(.jh-action--blue, .jxs-btn--blue) {
  --b-std: url('/jellyball/ui/skin/buttons/3d/square/blue/button-square-3d-2.5-blue-regular_standard.svg');
  --b-hov: url('/jellyball/ui/skin/buttons/3d/square/blue/button-square-3d-2.5-blue-regular_hover.svg');
  --b-prs: url('/jellyball/ui/skin/buttons/3d/square/blue/button-square-3d-2.5-blue-regular_pressed.svg');
  --b-ink: #0018ab;
}
html[data-brand="jellyball"] :is(.jh-action--yellow, .jxs-btn--yellow) {
  --b-std: url('/jellyball/ui/skin/buttons/3d/square/yellow/button-square-3d-2.5-yellow-regular_standard.svg');
  --b-hov: url('/jellyball/ui/skin/buttons/3d/square/yellow/button-square-3d-2.5-yellow-regular_hover.svg');
  --b-prs: url('/jellyball/ui/skin/buttons/3d/square/yellow/button-square-3d-2.5-yellow-regular_pressed.svg');
  --b-ink: #c6263d;
}
html[data-brand="jellyball"] :is(.jx-page .jb-card .btn:not(.btn-brand), .jxs-btn--white) {
  --b-std: url('/jellyball/ui/skin/buttons/3d/square/white/button-square-3d-2.5-white_standard.svg');
  --b-hov: url('/jellyball/ui/skin/buttons/3d/square/white/button-square-3d-2.5-white_hover.svg');
  --b-prs: url('/jellyball/ui/skin/buttons/3d/square/white/button-square-3d-2.5-white_pressed.svg');
  color: var(--jxs-ink) !important; text-shadow: none;
}
html[data-brand="jellyball"] .jx-pi { display: block; flex: none; object-fit: contain; user-select: none; -webkit-user-drag: none; }
html[data-brand="jellyball"] .jx-pi-btn { width: 22px; height: 22px; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.25)); }

/* ======================================================================
   TOP BAR (every Jelly page): brand chip, "Create account", the account button, the bell
   ====================================================================== */
html[data-brand="jellyball"] .topbar .jb-name .jb-jelly { color: inherit !important; -webkit-text-stroke: 0; text-shadow: none; }
html[data-brand="jellyball"] .topbar .jb-name .jb-ball { color: inherit !important; -webkit-text-stroke: 0; text-shadow: none; }
html[data-brand="jellyball"] .topbar .brand-word { text-shadow: none !important; }
html[data-brand="jellyball"] .topbar .brand {
  border-style: solid; border-color: transparent;
  border-width: 7px 8px 13px 8px;
  border-image: url('/jellyball/ui/skin/containers/3d/white/container-3d-white.svg') 12 12 22 12 fill / 7px 8px 13px 8px stretch;
  padding: 1px 8px 1px 2px; min-height: 48px; border-radius: 12px;
  background: transparent;
}
html[data-brand="jellyball"] .topbar .brand .brand-mark { filter: none !important; }
html[data-brand="jellyball"] .topbar .signup-cta {
  --s: 0.8; padding: 4px 14px !important; min-height: 46px; display: inline-flex !important; align-items: center;
  font-size: 0.98rem !important; letter-spacing: 0.01em;
}
html[data-brand="jellyball"] .topbar .persona-btn {
  border-style: solid !important; border-color: transparent !important;
  border-width: 6px 7px 12px 7px !important;
  border-image: url('/jellyball/ui/skin/containers/3d/white/container-3d-white.svg') 12 12 22 12 fill / 6px 7px 12px 7px stretch !important;
  border-radius: 12px !important; background: transparent !important; box-shadow: none !important;
  color: var(--jxs-ink) !important; min-height: 48px;
}
html[data-brand="jellyball"] .topbar .persona-btn:hover { filter: brightness(1.03); }
html[data-brand="jellyball"] .topbar .persona-btn .persona-btn-sub { color: var(--jxs-ink-2) !important; }
html[data-brand="jellyball"] .topbar .icon-btn:not(.nav-toggle) {
  width: 48px; height: 48px; min-width: 48px; padding: 0 !important;
  border-style: solid !important; border-color: transparent !important;
  border-width: 5px 5px 12px !important;
  border-image: url('/jellyball/ui/skin/buttons/3d/square/white/button-square-3d-1-white_standard.svg') 7 7 17 7 fill / 5px 5px 12px stretch !important;
  border-radius: 10px !important; background: transparent !important; box-shadow: none !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  color: var(--jxs-ink) !important; display: inline-grid; place-items: center;
}
html[data-brand="jellyball"] .topbar .icon-btn:not(.nav-toggle):hover { border-image-source: url('/jellyball/ui/skin/buttons/3d/square/white/button-square-3d-1-white_hover.svg') !important; }
html[data-brand="jellyball"] .topbar #notif-btn > .ic { display: none; }
html[data-brand="jellyball"] .topbar #notif-btn::before {
  content: ''; width: 26px; height: 26px; background: url('/jellyball/ui/icons/ui/bell/bell.svg') center / contain no-repeat;
}
/* the bar on the inner pages: a solid game bar, not glass */
html[data-brand="jellyball"]:has(#view-jellyball:not(.hidden) > .jx-page) .topbar {
  background: #fff !important;
  border-bottom: 4px solid #d3dee3 !important;
  box-shadow: 0 2px 0 #5d7c8c !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  height: 68px;
}
html[data-brand="jellyball"][data-theme="dark"]:has(#view-jellyball:not(.hidden) > .jx-page) .topbar {
  background: #324652 !important; border-bottom-color: #1b2d38 !important; box-shadow: 0 2px 0 #0f1c24 !important;
}
/* "ball" stays black inside the white chip in both themes; the dark-theme rule in jellyball-home.css made it white */
html[data-brand="jellyball"][data-theme="dark"] .topbar .jb-name .jb-ball { color: inherit !important; -webkit-text-stroke: 0; text-shadow: none; }
html[data-brand="jellyball"][data-theme="dark"] .topbar .jb-name .jb-jelly { color: inherit !important; -webkit-text-stroke: 0; text-shadow: none; }
/* the home's bar floats over the photo: no glass behind the chips */
html[data-brand="jellyball"]:has(#view-jellyball:not(.hidden) > .jh-home) .topbar .signup-cta { color: #fff !important; }

/* ======================================================================
   HOME ("/"): the photo stage stays; the UI over it becomes chunky game parts
   ====================================================================== */
html[data-brand="jellyball"] .jh-tagline {
  border-style: solid; border-color: transparent;
  border-width: 8px 9px 16px;
  border-image: url('/jellyball/ui/skin/containers/3d/white/container-3d-white.svg') 12 12 22 12 fill / 8px 9px 16px stretch;
  background: transparent; border-radius: 14px;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  color: var(--jxs-ink); text-shadow: none; font-weight: 650;
  padding: 6px 16px 4px;
}
html[data-brand="jellyball"] .jh-actions {
  gap: 12px;
  width: 100%;
  max-width: 260px;
  margin: auto auto;
  align-items: center;
  justify-content: center;
}
html[data-brand="jellyball"] .jh-action {
  --s: 1.0;
  width: 100%;
  min-height: 54px;
  padding: 4px 18px 4px 14px !important;
  gap: 12px;
  border-radius: 14px !important;
  justify-content: center;
  align-items: center;
  text-align: center;
}
html[data-brand="jellyball"] .jh-action-ic {
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.9); border: 2.5px solid var(--b-ink);
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.12);
  display: grid; place-items: center; flex: none;
}
html[data-brand="jellyball"] .jh-action-ic .jx-pi { width: 24px; height: 24px; }
html[data-brand="jellyball"] .jh-action-text {
  display: flex; align-items: center; justify-content: center; text-align: center;
}
html[data-brand="jellyball"] .jh-action-label {
  font-size: 1.4rem; font-weight: 900; letter-spacing: 0.01em; line-height: 1; text-align: center;
}
html[data-brand="jellyball"] .jh-action-sub { display: none; }
html[data-brand="jellyball"] .jh-action:hover .jh-action-ic .jx-pi { transform: rotate(-8deg) scale(1.06); }
html[data-brand="jellyball"] .jh-action-ic .jx-pi { transition: transform 0.18s cubic-bezier(.2, .8, .2, 1.5); }
/* the scene caption: a small dark frame instead of loose text */
html[data-brand="jellyball"] .jh-foot { margin-top: 12px; align-items: end; }
html[data-brand="jellyball"] .jh-caption {
  justify-self: start; max-width: 100%;
  border-style: solid; border-color: transparent;
  border-width: 5px 6px 9px;
  border-image: url('/jellyball/ui/skin/containers/3d/white/container-3d-white.svg') 12 12 22 12 fill / 5px 6px 9px stretch;
  border-radius: 10px; padding: 3px 10px 2px; color: var(--jxs-ink); text-shadow: none;
}
html[data-brand="jellyball"] .jh-caption-title { font-weight: 800; color: var(--jxs-ink); }
html[data-brand="jellyball"] .jh-caption-note { color: var(--jxs-ink-2); font-weight: 600; }
html[data-brand="jellyball"] .jh-dot { width: 14px; height: 14px; border: 3px solid var(--jxs-ink); background: #fff; box-sizing: border-box; }
html[data-brand="jellyball"] .jh-dot.is-on { width: 34px; background: var(--jxs-red); }
html[data-brand="jellyball"] .jh-scene-dots { gap: 10px; padding: 15px 4px; } /* ≥44 px tall hit row */
html[data-brand="jellyball"] .jh-credit { color: #fff; font-weight: 700; text-shadow: 0 2px 0 var(--jxs-ink), 0 0 2px var(--jxs-ink); padding: 12px 0; }

@media (max-width: 680px) {
  html[data-brand="jellyball"] .jh-actions { gap: 8px; }
  html[data-brand="jellyball"] .jh-action { --s: 1.05; min-height: 0; padding: 8px 4px 2px !important; gap: 4px; flex-direction: column; text-align: center; }
  html[data-brand="jellyball"] .jh-action-ic { width: 52px; height: 52px; border-width: 3px; }
  html[data-brand="jellyball"] .jh-action-ic .jx-pi { width: 34px; height: 34px; }
  html[data-brand="jellyball"] .jh-action-label { font-size: 1.12rem; }
  html[data-brand="jellyball"] .jh-tagline { font-size: 0.95rem; padding: 4px 12px 2px; }
  html[data-brand="jellyball"] .topbar .brand { min-height: 44px; padding-right: 6px; }
  html[data-brand="jellyball"] .topbar .brand .brand-mark { width: 28px; height: 28px; }
  html[data-brand="jellyball"] .topbar .brand-word.jb-name { font-size: 1.25rem; }
  html[data-brand="jellyball"] .topbar .signup-cta { --s: 0.7; padding: 2px 10px !important; font-size: 0.9rem !important; min-height: 44px; }
  html[data-brand="jellyball"] .jh-caption { padding: 2px 8px 1px; }
}

/* ======================================================================
   EXPLORE / PLAY / CREATE frame (jxFrame): the segmented tab bar
   ====================================================================== */
html[data-brand="jellyball"] .jx-page { --jx-text: var(--jxs-ink); --jx-strong: var(--jxs-ink); --jx-dim: var(--jxs-ink-2); }
html[data-brand="jellyball"][data-theme="dark"] .jx-page { --jx-text: #fff; --jx-strong: #fff; --jx-dim: #d3dee3; }
html[data-brand="jellyball"] .jx-tabs {
  gap: 6px; padding: 4px 4px 2px; border-radius: 16px;
  border-style: solid; border-color: transparent;
  border-width: 8px 8px 15px;
  border-image: url('/jellyball/ui/skin/containers/3d/white/container-3d-white.svg') 12 12 22 12 fill / 8px 8px 15px stretch;
  background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none;
  margin-bottom: 30px;
}
html[data-brand="jellyball"][data-theme="dark"] .jx-tabs {
  border-image-source: url('/jellyball/ui/skin/containers/3d/grey/container-3d-grey-darker.svg');
}
html[data-brand="jellyball"] .jx-tab {
  min-height: 52px; padding: 4px 18px 14px 12px; gap: 9px;
  border: 0; border-radius: 10px; background: transparent;
  color: var(--jxs-ink); font-family: inherit; font-weight: 800; font-size: 1.02rem; line-height: 1; letter-spacing: 0.01em;
}
html[data-brand="jellyball"][data-theme="dark"] .jx-tab { color: #fff; }
html[data-brand="jellyball"] .jx-tab:not(.is-on):hover { background: rgba(93, 124, 140, 0.14); color: var(--jxs-ink); }
html[data-brand="jellyball"][data-theme="dark"] .jx-tab:not(.is-on):hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
html[data-brand="jellyball"] .jx-tab.is-on { --s: 0.85; min-height: 52px; padding: 0 16px 0 10px; }
html[data-brand="jellyball"] .jx-tab-ic { display: block; }
html[data-brand="jellyball"] .jx-tab-ic .jx-pi { width: 30px; height: 30px; }
html[data-brand="jellyball"] .jx-tab-ic svg { display: none; }
html[data-brand="jellyball"] .jx-tab:not(.is-on) .jx-tab-ic .jx-pi { filter: saturate(0.85); }

/* headings */
html[data-brand="jellyball"] .jx-h1 { font-weight: 900; letter-spacing: -0.01em; color: var(--jx-strong); }
html[data-brand="jellyball"] .jx-sub { color: var(--jx-dim); font-weight: 500; }
/* "New match" / "Choose a photo" are shared .jui-btn buttons; only their placement is set here */
html[data-brand="jellyball"] .jx-head-cta.jui-btn, html[data-brand="jellyball"] .jx-card-cta.jui-btn { gap: 8px; }

/* ======================================================================
   EXPLORE: each section is a white pack container with a titled header and a pack icon
   ====================================================================== */
html[data-brand="jellyball"] .jx-section {
  margin-top: 22px;
  border-style: solid; border-color: transparent;
  border-width: 10px 10px 19px;
  border-image: url('/jellyball/ui/skin/containers/3d/white/container-3d-white.svg') 12 12 22 12 fill / 10px 10px 19px stretch;
  border-radius: 18px; padding: 8px 12px 10px;
}
html[data-brand="jellyball"][data-theme="dark"] .jx-section { border-image-source: url('/jellyball/ui/skin/containers/3d/grey/container-3d-grey-dark.svg'); }
html[data-brand="jellyball"] .jx-section-head { align-items: center; margin-bottom: 10px; }
html[data-brand="jellyball"] .jx-section-head h2 { display: flex; align-items: center; gap: 10px; font-size: 1.28rem; font-weight: 900; color: var(--jx-strong); }
html[data-brand="jellyball"] .jx-section-head h2 > span { font-size: inherit; color: inherit; }
html[data-brand="jellyball"] .jx-pi-head { width: 34px; height: 34px; }
html[data-brand="jellyball"] .jx-count {
  font-weight: 800; font-size: 0.82rem; color: #fff !important; padding: 3px 10px; border-radius: 8px;
  background: var(--jxs-blue); border: 3px solid #0049c7; box-shadow: inset 0 -3px 0 #0049c7;
}
html[data-brand="jellyball"] .jx-section--live .jx-count { background: var(--jxs-red); border-color: #b30039; box-shadow: inset 0 -3px 0 #b30039; }
html[data-brand="jellyball"] .jx-live-dot {
  width: 12px; height: 12px; border-radius: 50%; background: #f5535c; border: 2px solid #b30039;
  animation: jxs-live 1.2s ease-in-out infinite;
}
@keyframes jxs-live { 50% { transform: scale(0.7); opacity: 0.6; } }
html[data-brand="jellyball"] .jx-empty {
  display: flex; align-items: center; gap: 14px; margin: 0; padding: 12px 16px;
  border-radius: 12px; border: 3px dashed #abc0c9; background: #f3f7f9;
  color: var(--jx-dim); font-weight: 600;
}
html[data-brand="jellyball"][data-theme="dark"] .jx-empty { background: #324652; border-color: #5d7c8c; color: #d3dee3; }
html[data-brand="jellyball"] .jx-empty p { margin: 0; }
html[data-brand="jellyball"] .jx-pi-empty { width: 44px; height: 44px; }
html[data-brand="jellyball"] .jx-link { color: var(--jxs-red); font-weight: 800; padding: 10px 0; }
html[data-brand="jellyball"][data-theme="dark"] .jx-link { color: #ffa38c; }

/* match cards in the Explore lists (the match canvas itself is untouched) */
html[data-brand="jellyball"] .jx-page .jb-card {
  border-style: solid; border-color: transparent;
  border-width: 6px 6px 12px;
  border-image: url('/jellyball/ui/skin/containers/3d/white/container-3d-white.svg') 12 12 22 12 fill / 6px 6px 12px stretch;
  background: transparent; box-shadow: none; border-radius: 14px; color: var(--jxs-ink);
}
html[data-brand="jellyball"][data-theme="dark"] .jx-page .jb-card { border-image-source: url('/jellyball/ui/skin/containers/3d/grey/container-3d-grey-darker.svg'); color: #fff; }
html[data-brand="jellyball"] .jx-page .jb-card .btn { --s: 0.62; min-height: 44px; padding: 0 12px !important; font-size: 0.88rem !important; }
html[data-brand="jellyball"] .jx-page .jb-pool-bar { height: 12px; border-radius: 6px; border: 3px solid #324652; background: #1778ff; box-sizing: content-box; }
html[data-brand="jellyball"] .jx-page .jb-pool-bar span { background: #e62e49; }

/* ======================================================================
   CREATE: the photo panel is a red pack frame, the other three are white containers you press
   ====================================================================== */
html[data-brand="jellyball"] .jx-card {
  border-style: solid; border-color: transparent;
  border-width: 9px 9px 17px;
  border-image: url('/jellyball/ui/skin/containers/3d/white/container-3d-white.svg') 12 12 22 12 fill / 9px 9px 17px stretch;
  background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none;
  border-radius: 16px; padding: 12px 16px 10px;
  flex-direction: row; align-items: center; gap: 16px;
  transition: transform 0.14s cubic-bezier(.2, .8, .2, 1.4);
}
html[data-brand="jellyball"][data-theme="dark"] .jx-card { border-image-source: url('/jellyball/ui/skin/containers/3d/grey/container-3d-grey-dark.svg'); }
html[data-brand="jellyball"] .jx-card:hover { transform: translateY(-3px); background: transparent; }
html[data-brand="jellyball"] .jx-card:active { transform: translateY(2px); }
html[data-brand="jellyball"] .jx-card-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
html[data-brand="jellyball"] .jx-card-ic {
  flex: none; width: 64px; height: 64px; margin: 0; border-radius: 14px;
  background: #eef3f6; border: 3px solid #abc0c9; box-shadow: inset 0 -5px 0 #d3dee3;
}
html[data-brand="jellyball"][data-theme="dark"] .jx-card-ic { background: #324652; border-color: #1b2d38; box-shadow: inset 0 -5px 0 #1b2d38; }
html[data-brand="jellyball"] .jx-card-ic .jx-pi { width: 42px; height: 42px; }
html[data-brand="jellyball"] .jx-card-title { font-weight: 900; color: var(--jx-strong); }
html[data-brand="jellyball"] .jx-card-text { color: var(--jx-dim); }
html[data-brand="jellyball"] .jx-card-main {
  flex-direction: column; align-items: flex-start; justify-content: center; gap: 8px;
  border-width: 18px 18px 22px;
  border-image: url('/jellyball/ui/skin/frames/basic/red/frame-basic-red-regular.svg') 27 22 32 22 / 18px 18px 22px stretch;
  background: #fff padding-box; border-radius: 22px;
  padding: 26px 28px;
}
html[data-brand="jellyball"][data-theme="dark"] .jx-card-main { background: #324652 padding-box; border-image-source: url('/jellyball/ui/skin/frames/basic/red/frame-basic-red-regular.svg'); }
html[data-brand="jellyball"] .jx-card-main:hover { transform: none; }
html[data-brand="jellyball"] .jx-card-main .jx-card-ic { width: 84px; height: 84px; border-radius: 18px; background: #fff0ed; border-color: #ffa38c; box-shadow: inset 0 -6px 0 #ffc9bd; }
html[data-brand="jellyball"][data-theme="dark"] .jx-card-main .jx-card-ic { background: #1b2d38; border-color: #e62e49; box-shadow: inset 0 -6px 0 #800046; }
html[data-brand="jellyball"] .jx-card-main .jx-card-ic .jx-pi { width: 56px; height: 56px; }
html[data-brand="jellyball"] .jx-card-main .jx-card-title { font-size: 1.6rem; }
html[data-brand="jellyball"] .jx-card-cta.jui-btn { margin-top: 10px; pointer-events: none; }
html[data-brand="jellyball"] .jx-card-hint { color: var(--jx-dim); font-weight: 600; }
html[data-brand="jellyball"] .jx-drop:focus-within { outline: 3px solid var(--jxs-ink); outline-offset: 2px; }

@media (max-width: 520px) {
  html[data-brand="jellyball"] .jx-tabs { width: 100%; }
  html[data-brand="jellyball"] .jx-tab { padding: 4px 6px; gap: 6px; font-size: 0.95rem; justify-content: center; }
  html[data-brand="jellyball"] .jx-tab.is-on { padding: 0 8px; }
  html[data-brand="jellyball"] .jx-tab-ic { display: block; }
  html[data-brand="jellyball"] .jx-tab-ic .jx-pi { width: 24px; height: 24px; }
  html[data-brand="jellyball"] .jx-section { padding: 6px 6px 8px; }
  html[data-brand="jellyball"] .jx-section-head h2 { font-size: 1.12rem; }
  html[data-brand="jellyball"] .jx-pi-head { width: 28px; height: 28px; }
  html[data-brand="jellyball"] .jx-empty { padding: 10px 12px; gap: 10px; font-size: 0.92rem; }
  html[data-brand="jellyball"] .jx-pi-empty { width: 36px; height: 36px; }
  html[data-brand="jellyball"] .jx-card { padding: 10px 12px 8px; gap: 12px; }
  html[data-brand="jellyball"] .jx-card-ic { width: 54px; height: 54px; }
  html[data-brand="jellyball"] .jx-card-ic .jx-pi { width: 36px; height: 36px; }
  html[data-brand="jellyball"] .jx-card-main { padding: 18px 16px; }
  html[data-brand="jellyball"] .jx-head-cta.jui-btn { justify-content: center; }
}

/* ======================================================================
   "Post a level" dialog (client-src/04h-levelpost.js): level rows as pack containers, the pick in red,
   a pack radio, status chips
   ====================================================================== */
html[data-brand="jellyball"] .lp-card {
  border-style: solid; border-color: transparent; border-width: 5px 5px 10px;
  border-image: url('/jellyball/ui/skin/containers/3d/white/container-3d-white.svg') 12 12 22 12 fill / 5px 5px 10px stretch;
  background: transparent; border-radius: 12px; color: var(--jxs-ink); min-height: 64px;
}
html[data-brand="jellyball"][data-theme="dark"] .lp-card { border-image-source: url('/jellyball/ui/skin/containers/3d/grey/container-3d-grey-dark.svg'); color: #fff; }
html[data-brand="jellyball"] .lp-card:hover { border-color: transparent; }
html[data-brand="jellyball"] .lp-card.is-on {
  border-image-source: url('/jellyball/ui/skin/containers/3d/red/container-3d-red-lighter.svg');
  background: transparent; box-shadow: none; color: #fff;
}
html[data-brand="jellyball"] .lp-card.is-on .lp-status, html[data-brand="jellyball"] .lp-card.is-on .lp-meta { color: #fff; }
html[data-brand="jellyball"] .lp-radio {
  width: 28px; height: 28px; border: 0; border-radius: 0; color: transparent;
  background: url('/jellyball/ui/skin/widgets/radio-buttons/grey/radio-off-grey.svg') center / contain no-repeat;
}
html[data-brand="jellyball"] .lp-radio .ic { display: none; }
html[data-brand="jellyball"] .lp-card.is-on .lp-radio { background: url('/jellyball/ui/skin/widgets/radio-buttons/red/radio-on-red.svg') center / contain no-repeat; border: 0; }
html[data-brand="jellyball"] .lp-status {
  align-self: flex-start; padding: 1px 7px; border-radius: 6px; font-weight: 700;
  background: #eef3f6; border: 2px solid #abc0c9;
}
html[data-brand="jellyball"] .lp-status.is-ok { color: #006837; background: #e6f6d4; border-color: #8cc936; }
html[data-brand="jellyball"] .lp-card.is-on .lp-status.is-ok { color: #006837; }
html[data-brand="jellyball"] .lp-go { border: 2px solid #abc0c9; border-radius: 8px; font-weight: 800; background: #fff; color: var(--jxs-ink); box-shadow: inset 0 -3px 0 #d3dee3; }
html[data-brand="jellyball"] .lp-new { border-image-source: url('/jellyball/ui/skin/containers/flat/white/container-flat-white.svg'); outline: 3px dashed #abc0c9; outline-offset: -3px; }
html[data-brand="jellyball"] .lp-new-ic { color: var(--jxs-red); background: #fff0ed; border: 3px solid #ffa38c; }
html[data-brand="jellyball"] .lp-thumb { border: 3px solid #324652; box-sizing: border-box; }
html[data-brand="jellyball"] .lp-h { color: var(--jxs-ink-2); font-weight: 900; }

/* ======================================================================
   The ad box under Explore / Create / Play: a plain white pack container with its label as a chip
   ====================================================================== */
html[data-brand="jellyball"] .jx-ad {
  border-style: solid; border-color: transparent; border-width: 8px 8px 15px;
  border-image: url('/jellyball/ui/skin/containers/3d/white/container-3d-white.svg') 12 12 22 12 fill / 8px 8px 15px stretch;
  background: transparent !important; border-radius: 14px; padding: 6px 10px 8px; box-shadow: none;
}
html[data-brand="jellyball"][data-theme="dark"] .jx-ad { border-image-source: url('/jellyball/ui/skin/containers/3d/grey/container-3d-grey-dark.svg'); }
html[data-brand="jellyball"] .jx-ad .ad-label {
  display: inline-block; margin-bottom: 6px; padding: 1px 8px; border-radius: 6px;
  font-size: 0.7rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--jxs-ink-2); background: #eef3f6; border: 2px solid #abc0c9;
}

@media (prefers-reduced-motion: reduce) {
  html[data-brand="jellyball"] .jx-live-dot { animation: none; }
  html[data-brand="jellyball"] :is(.jh-action, .jx-card, .jh-action-ic .jx-pi) { transition: none !important; }
}

/* Nov 1 (owner): the Jelly Ball name is gold everywhere on the site, like the default gold ball:
   the header wordmark, the game titles (.jb-wordmark) and the nav/tab labels. A dark-amber outline keeps it readable on white. */
html[data-brand="jellyball"] .jb-name .jb-jelly,
html[data-brand="jellyball"] .jb-name .jb-ball,
html[data-brand="jellyball"] .jb-wordmark {
  color: inherit !important; -webkit-text-stroke: 0; text-shadow: none;
}


/* Nov 1 (owner): the JELLYBALL name is translucent red jelly, no outline, letters spaced a little, gently animated:
   a glossy highlight slides across it and the word squishes softly like jelly. Same on the game titles (.jb-wordmark). */
html[data-brand="jellyball"] .jb-name,
html[data-brand="jellyball"] .jb-wordmark {
  letter-spacing: 0.09em !important;
  -webkit-text-stroke: 0 !important; text-shadow: none !important;
  background: linear-gradient(105deg, rgba(214, 22, 52, 0.78) 0%, rgba(255, 64, 92, 0.8) 38%, rgba(255, 196, 206, 0.92) 47%, rgba(255, 64, 92, 0.8) 56%, rgba(214, 22, 52, 0.78) 100%) 0 0 / 260% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent !important; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 2px rgba(160, 10, 35, 0.28));
  display: inline-block; transform-origin: 50% 85%;
  animation: jb-name-shine 3.6s ease-in-out infinite, jb-name-wobble 3.6s ease-in-out infinite;
}
html[data-brand="jellyball"] .jb-name .jb-jelly,
html[data-brand="jellyball"] .jb-name .jb-ball { color: transparent !important; -webkit-text-fill-color: transparent; -webkit-text-stroke: 0 !important; text-shadow: none !important; }
@keyframes jb-name-shine { 0% { background-position: 100% 0; } 55%, 100% { background-position: 0% 0; } }
@keyframes jb-name-wobble { 0%, 60%, 100% { transform: scale(1, 1); } 68% { transform: scale(1.04, 0.95); } 76% { transform: scale(0.98, 1.03); } 84% { transform: scale(1.01, 0.99); } }
@media (prefers-reduced-motion: reduce) { html[data-brand="jellyball"] .jb-name, html[data-brand="jellyball"] .jb-wordmark { animation: none; background-position: 50% 0; } }