/* Jelly City: the 3D game's HUD (full screen) and the Play tab's city lobby.
   Look: the jellyball "cartoony" skin. Solid frames, containers, 3D buttons and bars from the Cartoony UI Pack
   (public/jellyball/ui/cartoony, 9-sliced with border-image) and Vector Icon Pack Pro pictograms (hud.js ICON table).
   Solid, outlined pieces instead of the old translucent dark glass so the HUD stays readable over the bright city.
   Pack palette (outline / lip / face): white #5d7c8c/#d3dee3/#fff, grey-lighter #5d7c8c/#abc0c9/#d3dee3,
   red #b30039/#e62e49/#f5535c, blue #0049c7/#1778ff/#37b9ff, yellow #f15a24/#fc9504/#fdaf18, ink #1b2d38. */

/* ---------------------------------------------------------------- game shell */
.jc-host {
  position: fixed; inset: 0; z-index: 2000; background: #bfe0ff;
  font-family: var(--jui-font, Inter), var(--font-sys, system-ui), sans-serif; color: #fff;
  -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; overscroll-behavior: none; touch-action: none;
}
body.jc-playing { overflow: hidden; }
/* mobile agent (owner, Nov 1: "if I have two hands on the screen, it highlights some text in the background"): while
   playing, nothing of the page behind the game can be selected, called out, zoomed, scrolled or pulled to refresh,
   and the page itself is hidden (the game covers it anyway) */
html:has(body.jc-playing) { overflow: hidden; overscroll-behavior: none; }
body.jc-playing { overscroll-behavior: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
body.jc-playing > :not(.jc-host):not(script):not(style) { visibility: hidden !important; }
.jc-host, .jc-host * { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
.jc-host img, .jc-host svg { -webkit-user-drag: none; pointer-events: none; }
.jc-root { position: absolute; inset: 0; overflow: hidden; }
.jc-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; outline: none; }
.jc-root.is-preview .jc-canvas { pointer-events: none; }

.jc-hud {
  position: absolute; inset: 0; pointer-events: none; --ink: var(--jui-ink, #1b2d38); --ink-2: #476475;
  --safe-t: max(10px, env(safe-area-inset-top)); --safe-r: max(12px, env(safe-area-inset-right)); --safe-b: max(12px, env(safe-area-inset-bottom)); --safe-l: max(12px, env(safe-area-inset-left));
}
.jc-hud button { pointer-events: auto; }
.jc-hud .jc-ic { pointer-events: none; }
/* the skin pieces float over a bright 3D city: a soft drop under each so they sit on it */
.jc-hud .jc-stat, .jc-hud .jc-timer, .jc-hud .jc-board, .jc-hud .jc-mm, .jc-hud .jc-rbtn, .jc-hud .jc-hint { filter: drop-shadow(0 3px 4px rgba(20, 40, 70, 0.25)); }

.jc-top { position: absolute; left: 0; right: 0; top: 0; display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: var(--safe-t) var(--safe-r) 0 var(--safe-l); }
.jc-topleft, .jc-topright { display: flex; gap: 10px; align-items: flex-start; }

/* round 3D buttons (skin .jui-btn--round.jui-btn--icon): exit red, mute / zoom white, boost yellow, jump blue */
.jc-hud .jc-rbtn { --jui-s: 0.8; flex: none; }
.jc-hud .jc-rbtn .jc-ic { width: calc(30px * var(--jui-s)); height: calc(30px * var(--jui-s)); }
.jc-hud .jc-exit .jc-ic { filter: drop-shadow(0 2px 0 #b30039); }
.jc-hud .jc-jump .jc-ic { filter: drop-shadow(0 2px 0 #0049c7); }
/* the yellow bolt on a yellow face needs an outline to read */
.jc-hud .jc-boost .jc-ic { filter: drop-shadow(1.5px 0 0 #b33a00) drop-shadow(-1.5px 0 0 #b33a00) drop-shadow(0 1.5px 0 #b33a00) drop-shadow(0 -1.5px 0 #b33a00); }

/* mass card: paper in a light-blue frame, big outlined number, rank badge, yellow "next" bar */
.jc-hud .jc-stat { --jui-s: 0.42; min-width: 172px; padding: 3px 7px 9px; color: var(--ink); }   /* 9px: owner, Nov 1: room under the Next bar (a margin on .jc-next loses to .jui-frame > :last-child) */
.jc-stat-mass { display: flex; align-items: baseline; gap: 7px; }
.jc-mass { font-size: 2.1rem; display: inline-block; transform-origin: 30% 70%; }
.jc-mass.is-bump { animation: jc-bump 0.28s ease-out; }
@keyframes jc-bump { 0% { transform: scale(1); } 40% { transform: scale(1.18); } 100% { transform: scale(1); } }
.jc-stat-mass span { font-size: 0.74rem; color: var(--ink-2); font-weight: 900; text-transform: uppercase; letter-spacing: 0.08em; }
.jc-stat-sub { margin-top: 4px; display: flex; gap: 7px; align-items: center; font-size: 0.78rem; font-weight: 750; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.jc-hud .jc-rank { --jui-s: 0.78; }
.jc-rank small { font-size: 0.72em; font-weight: 800; opacity: 0.9; margin-left: 1px; }
.jc-next { margin-top: 6px; }
.jc-next-l { display: block; font-size: 0.72rem; font-weight: 800; color: var(--ink-2); margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 172px; }
.jc-hud .jc-next-bar { --jui-s: 0.85; }

/* round timer: the pack's thin yellow frame; red and pulsing in the last 30 s */
.jc-hud .jc-timer {
  --jui-s: 0.4; position: absolute; left: 50%; transform: translateX(-50%); top: var(--safe-t);
  display: flex; flex-direction: column; align-items: center; padding: 1px 9px 2px;
}
.jc-timer-row { display: flex; align-items: center; gap: 6px; }
.jc-timer-ic { width: 24px; height: 24px; }
.jc-timer-t { font-size: 1.55rem; font-weight: 900; font-variant-numeric: tabular-nums; letter-spacing: 0.01em; line-height: 1.1; display: inline-block; }
.jc-room { font-size: 0.64rem; color: var(--ink-2); text-transform: uppercase; letter-spacing: 0.09em; font-weight: 850; white-space: nowrap; }
.jc-room[hidden] { display: none; }
.jc-timer.is-ending .jc-timer-t { animation: jc-pulse 1s infinite; text-shadow: 0 2px 0 #800046; }
.jc-timer.is-ending .jc-room { color: #ffd0d4; }
@keyframes jc-pulse { 50% { transform: scale(1.14); } }

/* top-10 board: white 3D container; each row a little container (your row red, the leader gold) */
.jc-hud .jc-board { --jui-s: 0.55; list-style: none; margin: 0; min-width: 214px; padding: 2px; font-size: 0.82rem; color: var(--ink); display: grid; gap: 3px; }
.jc-board:empty { display: none; }
.jc-board li { display: grid; grid-template-columns: 18px 14px 1fr auto; gap: 6px; align-items: center; padding: 2px 8px 4px 5px; border-radius: 8px; font-weight: 800; background: #eef3f6; box-shadow: inset 0 -3px 0 #d3dee3; }
.jc-board li.is-you { background: #f5535c; color: #fff; box-shadow: inset 0 -3px 0 #e62e49, 0 0 0 2px #b30039; text-shadow: 0 1px 0 #b30039; }
.jc-b-n { color: var(--ink-2); font-variant-numeric: tabular-nums; text-align: right; font-size: 0.76rem; font-weight: 900; }
.jc-board li.is-first:not(.is-you) { background: #fff6c2; box-shadow: inset 0 -3px 0 #fec92b; }
.jc-board li.is-first .jc-b-n { color: #f15a24; }
.jc-board li.is-you .jc-b-n { color: #fff; }
.jc-b-dot { width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff 0 14%, var(--c) 46%); box-shadow: 0 0 0 2px var(--ink); }
.jc-board li.is-you .jc-b-dot { box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px #b30039; }
.jc-b-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 124px; }
.jc-b-m { font-variant-numeric: tabular-nums; font-weight: 900; }

/* minimap in a white frame */
.jc-hud .jc-mm { --jui-s: 0.4; position: absolute; left: var(--safe-l); bottom: var(--safe-b); width: 168px; height: 168px; padding: 0; background: #7b97a6; background-clip: padding-box; }
.jc-minimap { display: block; width: 100%; height: 100%; border-radius: 3px; }

.jc-labels { position: absolute; inset: 0; overflow: hidden; }
.jc-label { position: absolute; left: 0; top: 0; will-change: transform; transition: opacity 0.2s; }
/* "+1" / "+40" / "+300" numbers where your ball ate (hud.gainPop / killPop, #70): a light, bright green (not the pack's
   money green) with a soft dark-green outline, readable on grey streets and on grass; drawn at 56px and scaled down by
   hud.updatePops (16-40 px on screen, phones 14-30) */
.jc-pop { position: absolute; left: 0; top: 0; will-change: transform, opacity; pointer-events: none; white-space: nowrap; font-size: 56px; line-height: 1; font-weight: 900; transform-origin: 50% 50%; contain: layout style; }
.jui-title.jc-pop.is-gain { --jt-f: #a6ff8a; --jt-o: #1d5a26; --jt-w: 0.055em; text-shadow: 0 0.06em 0 #1d5a26, 0 0.1em 0.22em rgba(10, 30, 15, 0.35); }
.jui-title.jc-pop.is-kill { --jt-f: #fee854; --jt-o: #8a3a00; --jt-w: 0.055em; text-shadow: 0 0.06em 0 #8a3a00, 0 0.1em 0.22em rgba(30, 15, 0, 0.35); }
.jc-label span { display: inline-block; color: #000; font-weight: 800; font-size: 0.85rem; white-space: nowrap; line-height: 1; background: none; border: 0; padding: 0; }
.jc-label.is-danger span { color: #d4142c; }   /* can eat you */
.jc-label.is-prey span { color: #7dff6a; text-shadow: 0 1px 0 #0b4a1c, 1px 0 0 #0b4a1c, -1px 0 0 #0b4a1c, 0 -1px 0 #0b4a1c, 0 2px 3px rgba(0, 0, 0, 0.35); }     /* you can eat them: light green (owner: readable on the grey streets) */

/* toasts: the skin's chunky toast. good (you ate / new round / caffeine) yellow, kill purple + gold, eaten / hurt red,
   info blue. Owner, Nov 1: stacked compactly at the very left (under the mass card, above the minimap), never over the
   play area in the middle; only the caffeine-rush banner stays centred. Newest at the bottom. */
/* mobile agent (owner, Nov 1): toasts in the FAR bottom-left corner, newest at the bottom, stacked upward; under them
   the status-icon row (caffeine rush + power-ups, hud.setStatus). Desktop: just above the minimap; phones: just above
   the joystick ring. */
.jc-corner { position: absolute; left: var(--safe-l); bottom: calc(var(--safe-b) + 168px + 10px); display: flex; flex-direction: column; align-items: flex-start; gap: 6px; max-width: min(300px, 34vw); pointer-events: none; }
.jc-toasts { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; max-width: 100%; pointer-events: none; }
.jc-hud .jc-toast { --jui-s: 0.5; white-space: nowrap; max-width: 100%; font-size: 0.8rem; gap: 5px; }
.jc-hud .jc-toast .jc-toast-ic { width: 20px; height: 20px; }
.jc-toast-t { overflow: hidden; text-overflow: ellipsis; }
.jc-toast b { font-weight: 900; }
.jc-hud .jc-toast.is-kill { --jui-s: 0.55; font-size: 0.86rem; }
.jc-toast.is-kill b, .jc-toast.is-hurt b:last-child, .jc-plus { color: #fee854; }
.jc-plus { font-weight: 900; margin-left: 4px; }
.jc-toast.is-plain .jc-plus, .jc-toast.is-good .jc-plus { color: #b33a00; }
.jc-toast.is-hurt { animation: jui-toast-in 0.32s cubic-bezier(.2,1.5,.5,1) both, jc-shake 0.32s 0.12s; }
@keyframes jc-shake { 25% { transform: translateX(-4px); } 50% { transform: translateX(4px); } 75% { transform: translateX(-2px); } }

/* combo "+42" */
.jc-center-msg { position: absolute; left: 50%; top: 38%; transform: translate(-50%, -50%) scale(0.6); font-size: 2.9rem; opacity: 0; pointer-events: none; transition: opacity 0.25s, transform 0.35s cubic-bezier(0.2, 1.6, 0.4, 1); }
.jc-center-msg.is-on { opacity: 1; transform: translate(-50%, -50%) scale(1); }

/* first-seconds controls hint */
.jc-hud .jc-hint { --jui-s: 0.5; position: absolute; left: 50%; bottom: calc(var(--safe-b) + 6px); transform: translateX(-50%); padding: 1px 8px 0; font-size: 0.84rem; font-weight: 700; color: var(--ink); transition: opacity 0.8s; white-space: nowrap; }
.jc-hint.is-gone { opacity: 0; }
.jc-hint b { font-weight: 900; }
.jc-hud .jc-kbd { --jui-s: 0.58; min-width: 26px; margin: 0 1px; font-size: 0.72rem; }

/* touch controls: big round 3D buttons (yellow boost with the bolt, blue jump with chevrons), white zoom */
.jc-joy, .jc-boost, .jc-jump, .jc-zoombtn { display: none !important; }
/* joystick (mobile agent, owner Nov 1): the big ring lives bottom-left inside the safe areas, a faint outline at rest;
   input.js moves the knob with the finger, drags the ring along only past its rim, and lets it spring home on release */
.jc-hud.is-touch .jc-joy {
  display: block !important; position: absolute; left: calc(var(--safe-l) + 14px); bottom: calc(var(--safe-b) + 14px); width: 132px; height: 132px; box-sizing: border-box; border-radius: 50%;
  background: rgba(255, 255, 255, 0.08); border: 3px solid rgba(255, 255, 255, 0.55); box-shadow: 0 0 0 2px rgba(93, 124, 140, 0.35);
  opacity: 0.75; transition: transform 0.32s cubic-bezier(0.2, 1.5, 0.4, 1), opacity 0.2s, background-color 0.2s, border-color 0.2s;
}
.jc-hud.is-touch .jc-joy.is-on { opacity: 1; background: rgba(255, 255, 255, 0.22); border-color: #fff; box-shadow: 0 0 0 3px rgba(93, 124, 140, 0.8); transition: opacity 0.12s, background-color 0.12s, border-color 0.12s; }
.jc-joy i { position: absolute; left: 50%; top: 50%; width: 54px; height: 54px; margin: -27px 0 0 -27px; box-sizing: border-box; border-radius: 50%; background: rgba(255, 255, 255, 0.55); border: 3px solid rgba(93, 124, 140, 0.6); transition: transform 0.25s cubic-bezier(0.2, 1.5, 0.4, 1), background-color 0.2s; }
.jc-joy.is-on i { background: #fff; border: 4px solid #5d7c8c; box-shadow: inset 0 -6px 0 #d3dee3, 0 4px 10px rgba(0, 0, 0, 0.25); transition: none; }
/* phones: toasts and status icons sit just above the joystick ring */
.jc-hud.is-touch .jc-corner { bottom: calc(var(--safe-b) + 14px + 132px + 12px); max-width: 62vw; }
.jc-hud.is-touch .jc-boost, .jc-hud.is-touch .jc-jump { display: inline-flex !important; flex-direction: column; gap: 0; position: absolute; touch-action: none; }
.jc-hud.is-touch .jc-boost { --jui-s: 1.15; --bsh: #c6263d; right: calc(var(--safe-r) + 96px); bottom: var(--safe-b); }
.jc-hud.is-touch .jc-jump { --jui-s: 1.38; --bsh: #0049c7; right: var(--safe-r); bottom: calc(var(--safe-b) + 24px); }
.jc-hud .jc-boost .jc-ic, .jc-hud .jc-jump .jc-ic { width: calc(30px * var(--jui-s)); height: calc(30px * var(--jui-s)); }
.jc-cap {
  font-weight: 900; font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.06em; line-height: 1; margin-top: 1px; color: #fff;
  text-shadow: 1.5px 0 0 var(--bsh), -1.5px 0 0 var(--bsh), 0 1.5px 0 var(--bsh), 0 -1.5px 0 var(--bsh), 0 2.5px 0 var(--bsh);
}
.jc-hud .jc-zoombtn { position: absolute; right: var(--safe-r); bottom: var(--safe-b); }
.jc-hud:not(.is-touch) .jc-zoombtn, .jc-hud.is-touch .jc-zoombtn { display: inline-flex !important; }
.jc-hud.is-touch .jc-zoombtn { --jui-s: 0.75; right: calc(var(--safe-r) + 112px); bottom: calc(var(--safe-b) + 86px); }
.jc-hud.is-touch .jc-mm { width: 116px; height: 116px; left: auto; right: var(--safe-r); bottom: auto; top: calc(var(--safe-t) + 60px); }
.jc-hud.is-touch .jc-hint { bottom: auto; top: calc(var(--safe-t) + 200px); white-space: normal; text-align: center; width: min(86vw, 420px); }   /* clear of the notifications above the stick */

/* overlays: framed cards with a round badge on the top edge, 3D buttons */
.jc-overlay { overscroll-behavior: contain; touch-action: pan-y; }   /* a card that scrolls never pulls the page to refresh */
.jc-overlay { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: auto; background: rgba(120, 190, 255, 0.38); animation: jc-fade 0.25s; padding: 16px; color: var(--ink); overflow-y: auto; }
.jc-overlay.hidden { display: none; }
.jc-ov-respawn { background: rgba(128, 0, 70, 0.18); pointer-events: none; }
.jc-ov-loading { background: linear-gradient(180deg, #7cc4ff, #cde8ff); }
@keyframes jc-fade { from { opacity: 0; } }
.jc-hud .jc-ov-card { --jui-s: 0.72; position: relative; width: min(420px, 100%); padding: 32px 10px 4px; margin-top: 34px; text-align: center; filter: drop-shadow(0 12px 22px rgba(20, 30, 60, 0.35)); animation: jc-pop 0.35s cubic-bezier(0.2, 1.4, 0.4, 1); }
@keyframes jc-pop { from { transform: scale(0.85); opacity: 0; } }
.jc-hud .jc-ov-small { width: min(340px, 100%); }
/* the badge: the skin's white round button art as a medallion on the frame's top edge */
.jc-ov-badge {
  position: absolute; left: 50%; top: calc(-27px * var(--jui-s)); transform: translate(-50%, -56%); width: 72px; height: 72px; display: grid; place-items: center; padding-bottom: 11px; box-sizing: border-box;
  background: url('/jellyball/ui/skin/buttons/3d/round/white/button-round-3d-1-white_standard.svg') center / 100% 100% no-repeat;
}
.jc-ov-badge .jc-ic { width: 40px; height: 40px; }
.jc-ov-card h2 { margin: 0 0 4px; font-size: 1.5rem; font-weight: 900; letter-spacing: -0.01em; color: var(--ink); line-height: 1.15; }
.jc-ov-card p { margin: 6px 0 0; color: var(--ink-2); font-weight: 650; line-height: 1.4; }
.jc-ov-card p.jc-ov-back { font-weight: 850; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.78rem; }
.jc-ov-respawn .jc-ov-count { display: block; font-size: 3.3rem; margin: 2px 0 8px; }
.jc-ov-card p.jc-ov-kicker { text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.74rem; font-weight: 900; color: #f15a24; margin: 0 0 2px; }
.jc-ov-top { list-style: none; margin: 12px 0 6px; padding: 0; text-align: left; display: grid; gap: 4px; }
.jc-ov-top li { display: grid; grid-template-columns: 30px 1fr auto; gap: 8px; align-items: center; padding: 2px 10px 5px 6px; border-radius: 10px; font-weight: 800; background: #eef3f6; box-shadow: inset 0 -3px 0 #d3dee3; min-height: 32px; box-sizing: border-box; }
.jc-ov-top li.is-first { background: #fff6c2; box-shadow: inset 0 -3px 0 #fec92b, 0 0 0 2px #fc9504; }
.jc-ov-top li.is-you { background: #f5535c; color: #fff; box-shadow: inset 0 -3px 0 #e62e49, 0 0 0 2px #b30039; text-shadow: 0 1px 0 #b30039; }
.jc-ov-top em { font-style: normal; font-size: 0.66rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.06em; padding: 1px 6px 2px; border-radius: 6px; background: #fff; color: #e62e49; margin-left: 4px; vertical-align: 2px; text-shadow: none; }
.jc-ov-pos { width: 30px; height: 26px; display: grid; place-items: center; font-size: 0.86rem; font-weight: 900; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.jc-ov-top li.is-you .jc-ov-pos { color: #fff; }
.jc-ov-pos .jc-ic { width: 28px; height: 28px; margin-top: -2px; }
.jc-ov-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jc-ov-mass { font-variant-numeric: tabular-nums; font-weight: 900; }
.jc-ov-card p.jc-ov-next { display: flex; align-items: center; justify-content: center; gap: 6px; }
.jc-ov-next b { color: var(--ink); font-size: 1.15em; font-weight: 900; }
.jc-ov-next-ic { width: 22px; height: 22px; }
.jc-ov-btns { display: flex; gap: 10px; justify-content: center; margin-top: 14px; flex-wrap: wrap; }
.jc-hud .jc-btn { --jui-s: 0.85; min-width: 128px; }

.jc-loading { display: grid; justify-items: center; gap: 16px; }
.jc-hud .jc-loading-t { --jui-s: 0.6; padding: 2px 10px 1px; font-weight: 850; font-size: 1.02rem; color: var(--ink); }
/* the loading ball: the site's cartoon jelly ball (the same as the Play cards and the logo), hopping */
.jc-spin { display: block; width: 64px; height: 62px; animation: jc-hop 0.7s cubic-bezier(.3,0,.6,1) infinite alternate; transform-origin: 50% 100%; }
.jc-spin svg { display: block; width: 100%; height: 100%; filter: drop-shadow(0 3px 0 rgba(122,4,24,.25)); }
.jc-spin-shadow { display: block; width: 56px; height: 10px; margin-top: -14px; border-radius: 50%; background: radial-gradient(closest-side, rgba(61,0,18,.35), rgba(61,0,18,0)); animation: jc-hop-shadow 0.7s cubic-bezier(.3,0,.6,1) infinite alternate; }
@keyframes jc-hop { 0% { transform: translateY(-34px) scale(.97,1.03); } 85% { transform: translateY(0) scale(1,1); } 100% { transform: translateY(0) scale(1.12,.86); } }
@keyframes jc-hop-shadow { 0% { transform: scale(.55); opacity: .5; } 100% { transform: scale(1.05); opacity: 1; } }

/* status icons (hud.setStatus): caffeine rush (owner, Nov 1: "a small icon, not a huge banner") and power-up badges.
   A white disc with the effect's pack icon, a coloured countdown ring that empties clockwise, a gentle pulse. */
.jc-status { display: flex; gap: 6px; align-items: center; pointer-events: none; }
.jc-status:empty { display: none; }
.jc-badge { --c: #fdaf18; position: relative; width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px #5d7c8c, 0 3px 0 2px #abc0c9, 0 4px 8px rgba(20, 40, 70, 0.3); animation: jc-badge-in 0.3s cubic-bezier(0.2, 1.5, 0.4, 1) both, jc-badge-pulse 1.2s 0.3s ease-in-out infinite alternate; }
.jc-badge.is-low { animation: jc-badge-in 0.3s both, jc-badge-pulse 0.35s ease-in-out infinite alternate; }
.jc-badge.is-leaving { animation: jc-badge-out 0.25s ease-in both; }
.jc-badge-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg) scaleY(-1); }
.jc-badge-track { fill: none; stroke: #d3dee3; stroke-width: 4; }
.jc-badge-arc { fill: none; stroke: var(--c); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 100 100; transition: stroke-dashoffset 0.12s linear; }
.jc-hud .jc-badge-ic { position: relative; width: 24px; height: 24px; }
.jc-badge[data-key="caffeine"] .jc-badge-ic { filter: drop-shadow(1px 0 0 #b33a00) drop-shadow(-1px 0 0 #b33a00) drop-shadow(0 1px 0 #b33a00) drop-shadow(0 -1px 0 #b33a00); }
@keyframes jc-badge-in { from { opacity: 0; transform: scale(0.4); } }
@keyframes jc-badge-out { to { opacity: 0; transform: scale(0.5); } }
@keyframes jc-badge-pulse { from { transform: scale(1); } to { transform: scale(1.07); } }
.jc-hud.is-touch .jc-boost.is-caf { animation: jc-caf-ico 0.5s ease-in-out infinite alternate; filter: drop-shadow(0 0 10px rgba(254, 201, 43, 0.95)) drop-shadow(0 3px 4px rgba(20, 40, 70, 0.28)); }
@keyframes jc-caf-ico { from { transform: scale(1); } to { transform: scale(1.08); } }

/* phones: compact, nothing over the middle of the screen */
@media (max-width: 640px) {
  .jc-hud { --safe-t: max(8px, env(safe-area-inset-top)); --safe-r: max(8px, env(safe-area-inset-right)); --safe-l: max(8px, env(safe-area-inset-left)); --safe-b: max(10px, env(safe-area-inset-bottom)); }
  .jc-top { gap: 6px; }
  .jc-topleft, .jc-topright { gap: 5px; }
  .jc-hud .jc-rbtn { --jui-s: 0.72; }  /* 46 px */
  .jc-hud .jc-stat { --jui-s: 0.34; min-width: 0; padding: 1px 4px 6px; }
  .jc-stat-mass { gap: 4px; }
  .jc-mass { font-size: 1.45rem; }
  .jc-stat-mass span { font-size: 0.6rem; }
  .jc-stat-sub { font-size: 0.66rem; gap: 4px; margin-top: 2px; }
  .jc-hud .jc-rank { --jui-s: 0.62; }
  .jc-size { display: none; }
  .jc-next { margin-top: 3px; }
  .jc-next-l { font-size: 0.62rem; margin-bottom: 1px; max-width: 96px; }
  .jc-hud .jc-next-bar { --jui-s: 0.7; }
  .jc-hud .jc-board { --jui-s: 0.42; min-width: 0; max-width: 152px; font-size: 0.7rem; padding: 1px; gap: 2px; }
  .jc-board li { grid-template-columns: 14px 10px minmax(0, 1fr) auto; gap: 4px; padding: 1px 5px 3px 3px; border-radius: 6px; }
  .jc-board li:nth-child(n+4):not(.is-you) { display: none; }
  .jc-b-dot { width: 9px; height: 9px; box-shadow: 0 0 0 1.5px var(--ink); }
  .jc-b-n { font-size: 0.66rem; }
  .jc-b-name { max-width: 76px; }
  .jc-hud .jc-timer { --jui-s: 0.32; top: calc(100% + 6px); padding: 0 5px 1px; } /* under the top row (.jc-top is its box) */
  .jc-timer-t { font-size: 1.08rem; }
  .jc-timer-ic { width: 17px; height: 17px; }
  .jc-timer-row { gap: 4px; }
  .jc-room { display: none; }
  /* mute sits under the exit button (no room for it in the top row) */
  .jc-hud .jc-topright .jc-mutebtn { position: absolute; left: var(--safe-l); top: calc(var(--safe-t) + 52px); }
  .jc-hud:not(.is-touch) .jc-corner { bottom: calc(var(--safe-b) + 96px + 8px); max-width: 60vw; }   /* above the small minimap */
  .jc-badge { width: 34px; height: 34px; }
  .jc-hud .jc-badge-ic { width: 20px; height: 20px; }
  .jc-hud .jc-toast { --jui-s: 0.42; font-size: 0.68rem; gap: 4px; }
  .jc-hud .jc-toast .jc-toast-ic { width: 16px; height: 16px; }
  .jc-hud .jc-toast.is-kill { --jui-s: 0.46; font-size: 0.74rem; }
  .jc-hud .jc-mm { --jui-s: 0.32; width: 96px; height: 96px; left: var(--safe-l); }
  .jc-hud.is-touch .jc-mm { top: calc(var(--safe-t) + 150px); bottom: auto; left: auto; right: var(--safe-r); width: 88px; height: 88px; }
  .jc-label span { font-size: 0.75rem; }
  .jc-hud.is-touch .jc-boost { --jui-s: 1.08; right: calc(var(--safe-r) + 88px); }
  .jc-hud.is-touch .jc-jump { --jui-s: 1.3; }
  .jc-hud.is-touch .jc-zoombtn { --jui-s: 0.7; right: calc(var(--safe-r) + 100px); bottom: calc(var(--safe-b) + 80px); }
  .jc-hud .jc-ov-card { --jui-s: 0.58; padding: 30px 4px 2px; }
  .jc-ov-card h2 { font-size: 1.3rem; }
  .jc-ov-top li { min-height: 28px; padding: 1px 8px 4px 4px; }
  .jc-ov-pos .jc-ic { width: 24px; height: 24px; }
  .jc-hud .jc-btn { --jui-s: 0.8; min-width: 112px; }
}
@media (max-height: 520px) { /* phones on their side: the notifications sit at the bottom, just right of the joystick */
  .jc-hud.is-touch .jc-corner { left: calc(var(--safe-l) + 14px + 132px + 12px); bottom: var(--safe-b); max-width: 40vw; }
}
@media (max-height: 520px) and (min-width: 641px) { /* phones on their side */
  .jc-board li:nth-child(n+6):not(.is-you) { display: none; }
  .jc-hud .jc-mm { width: 110px; height: 110px; }
}
@media (prefers-reduced-motion: reduce) {
  .jc-timer.is-ending .jc-timer-t, .jc-toast.is-hurt, .jc-badge, .jc-hud.is-touch .jc-boost.is-caf, .jc-spin, .jc-spin-shadow { animation: none; }
}

/* speed streaks: faint radial lines that fade in at full speed */
.jc-speed { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 0.25s;
  background:
    radial-gradient(ellipse at center, transparent 52%, rgba(255, 255, 255, 0.10) 78%, rgba(255, 255, 255, 0.22) 100%),
    repeating-conic-gradient(from 0deg at 50% 55%, rgba(255, 255, 255, 0) 0deg 5deg, rgba(255, 255, 255, 0.16) 5.4deg 5.9deg, rgba(255, 255, 255, 0) 6.3deg 11deg);
  -webkit-mask-image: radial-gradient(ellipse at 50% 55%, transparent 40%, #000 85%); mask-image: radial-gradient(ellipse at 50% 55%, transparent 40%, #000 85%);
  animation: jc-speed-flicker 0.18s steps(2) infinite; }
@keyframes jc-speed-flicker { 50% { transform: rotate(2deg) scale(1.02); } }
@media (prefers-reduced-motion: reduce) { .jc-speed { display: none; } }

/* ---------------------------------------------------------------- lobby (Play tab) */
/* "Jelly City (online)" | "City levels" segment: skin container + flat skin tabs (active one blue) */
.jc-seg { --jui-s: 0.5; display: inline-flex; flex-wrap: nowrap; padding: 1px; gap: 4px; margin: 0 0 16px; }
.jc-seg .jc-seg-btn { flex: 0 1 auto; gap: 7px; }
.jc-seg-live { width: 10px; height: 10px; border-radius: 50%; background: #8cc936; box-shadow: 0 0 0 2px #006837; flex: none; }
.jc-seg-btn.is-on .jc-seg-live { box-shadow: 0 0 0 2px #fff; }

.jc-lobby { position: relative; border-radius: 28px; overflow: hidden; min-height: min(640px, calc(100dvh - 190px)); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45); background: linear-gradient(180deg, #6db8ff 0%, #bfe1ff 55%, #e9dccd 100%); isolation: isolate; }
.jc-lobby-stage { position: absolute; inset: 0; z-index: 0; }
.jc-lobby-stage .jc-root { position: absolute; inset: 0; }
/* a light wash at the top only (behind the tab bar); the solid skin buttons need no dark pool behind them */
.jc-lobby-shade { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(27, 45, 56, 0.28) 0%, rgba(27, 45, 56, 0) 22%); }
.jc-lobby-body { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center; gap: 18px; padding: clamp(24px, 5vw, 56px); max-width: 560px; min-height: inherit; }
.jc-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.jc-lobby .jui-btn, .jc-lobby .jc-link-box { filter: drop-shadow(0 8px 12px rgba(10, 20, 40, 0.3)); }
.jc-lic { width: 1.45em; height: 1.45em; flex: none; }

/* Play 3D (red) / Play 2D (blue): big skin 3D buttons with their illustrated icons */
.jc-play-txt { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; text-align: left; }
.jc-play-name { --jt-o: var(--jts); font-size: 1em; line-height: 1; }
.jc-play-txt small { font-size: 0.48em; font-weight: 850; line-height: 1.1; letter-spacing: 0; }
/* the mode icons (inline SVG from 04h-jellycity.js): the 3D jelly squishes on its floor, the 2D one hops */
.jc-play-ic { flex: none; width: 124px; height: 124px; filter: drop-shadow(0 4px 0 rgba(20, 0, 40, 0.25)); }
.jc-play-ic .jc-ic { display: block; width: 100%; height: 100%; overflow: visible; }
.jc-ic-squish { transform-box: fill-box; transform-origin: 50% 100%; animation: jc-wobble 2.4s ease-in-out infinite; }
.jc-ic-hop { transform-box: fill-box; transform-origin: 50% 100%; animation: jc-hop 1.6s ease-in-out infinite; }
.jc-play:hover .jc-ic-squish { animation-duration: 1.2s; }
.jc-play:hover .jc-ic-hop { animation-duration: 0.9s; }
@keyframes jc-wobble { 0%, 100% { transform: scale(1, 1); } 30% { transform: scale(1.08, 0.92); } 60% { transform: scale(0.95, 1.05); } }
@keyframes jc-hop { 0%, 100% { transform: translateY(0) scale(1, 1); } 40% { transform: translateY(-4px) scale(0.97, 1.03); } 60% { transform: translateY(-3px) scale(1, 1); } 92% { transform: translateY(0) scale(1.06, 0.94); } }

/* join with a code: a white inset field next to a blue skin button */
.jc-join { display: flex; gap: 10px; align-items: center; }
.jc-join input {
  width: 150px; box-sizing: border-box; padding: 12px 14px; border-radius: 14px; border: 4px solid #5d7c8c; background: #fff; color: #1b2d38; font: 900 1rem/1 var(--jui-font, inherit);
  box-shadow: inset 0 4px 0 #d3dee3, 0 6px 0 rgba(27, 45, 56, 0.35); letter-spacing: 0.18em; text-transform: uppercase; -webkit-user-select: text; user-select: text;
}
.jc-join input::placeholder { color: #7b97a6; letter-spacing: 0.04em; text-transform: none; font-weight: 750; }
.jc-join input:focus { outline: none; border-color: #1778ff; box-shadow: inset 0 4px 0 #cceeff, 0 0 0 3px #fff, 0 6px 0 rgba(27, 45, 56, 0.35); }
/* room link: a skin frame with the address and copy / go buttons */
.jc-link-box { --jui-s: 0.55; display: none; align-items: center; gap: 8px; font-size: 0.95rem; font-weight: 750; padding: 4px 6px 2px; }
.jc-link-box.is-on { display: flex; flex-wrap: wrap; }
.jc-link-box > span { flex: 1 1 100%; display: flex; align-items: center; gap: 8px; }
.jc-link-box > span .jc-lic { width: 26px; height: 26px; }
.jc-link-box b { font-weight: 900; letter-spacing: 0.08em; color: #0049c7; }
.jc-link-url { flex: 1 1 100%; padding: 9px 11px; border-radius: 10px; background: #eef3f6; box-shadow: inset 0 3px 0 #d3dee3; border: 2px solid #abc0c9; font: 700 0.88rem/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; color: #1b2d38; overflow-wrap: anywhere; -webkit-user-select: all; user-select: all; }
.jc-link-box .jui-btn { flex: 1 1 auto; }
.jc-sub-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: center; }
.jc-note { margin: 0; font-size: 0.86rem; color: rgba(255, 255, 255, 0.85); }

/* The Play screen is the whole page: the live city fills the window behind the tab bar, with no frame, margins or
   anything under it (the Explore / Play / Create switch floats over it). */
html:has(#view-jellyball:not(.hidden) .jc-lobby), html:has(#view-jellyball:not(.hidden) .jc-lobby) body { background: #0b1020 !important; overflow: hidden; overscroll-behavior: none; }
html:has(#view-jellyball:not(.hidden) .jc-lobby) .layout { max-width: none !important; padding: 0 !important; }
html:has(#view-jellyball:not(.hidden) .jc-lobby) .center { padding: 0 !important; min-height: 0 !important; }
.jx-page:has(.jc-lobby) { padding: 0; }
.jx-page:has(.jc-lobby) .jx-backdrop { display: none; }
.jx-page:has(.jc-lobby) .jx-tabs { position: fixed; z-index: 3; top: calc(var(--topbar-h, 64px) + 14px); left: 50%; transform: translateX(-50%); margin: 0; }
.jx-page .jc-lobby { position: fixed; inset: 0; z-index: 0; min-height: 0; border: 0; border-radius: 0; box-shadow: none; }
/* the buttons sit in the middle of the screen, a little above centre (the preview's jelly rolls in the band below) */
.jx-page .jc-lobby-body {
  height: 100%; min-height: 0; box-sizing: border-box; max-width: 980px; margin: 0 auto; align-items: center; justify-content: center;
  padding: calc(var(--topbar-h, 64px) + 70px) clamp(24px, 5vw, 64px) clamp(40px, 12vh, 140px); gap: 28px;
}
.jc-lobby .jc-link-box { max-width: 520px; width: 100%; }
.jx-page .jc-lobby .jc-modes {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
  gap: 12px;
}
.jc-play-stack {
  position: relative;
  display: grid;
  grid-template-areas: "playcard";
  width: 100%;
  max-width: 460px;
}
.jc-play-stack .jc-play {
  grid-area: playcard;
  --jui-s: 1.5;
  width: 100%;
  max-width: 460px;
  justify-content: flex-start;
  gap: 18px;
  padding: 4px 22px 4px 4px;
  font-size: clamp(2rem, 3.4vw, 2.8rem);
  box-sizing: border-box;
  transition: opacity 0.28s cubic-bezier(0.2, 0.8, 0.2, 1),
              transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1),
              visibility 0.28s;
  will-change: opacity, transform;
}
/* 3D state: Play 3D visible, Play 2D precisely behind and invisible */
.jc-modes.is-3d .jc-play-3d {
  z-index: 2;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: scale(1);
}
.jc-modes.is-3d .jc-play-2d {
  z-index: 1;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: scale(0.96);
}
/* 2D state: Play 2D visible, Play 3D behind and invisible */
.jc-modes.is-2d .jc-play-3d {
  z-index: 1;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: scale(0.96);
}
.jc-modes.is-2d .jc-play-2d {
  z-index: 2;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: scale(1);
}
.jc-modes.is-3d .jc-play-3d:hover,
.jc-modes.is-2d .jc-play-2d:hover {
  transform: translateY(-3px) scale(1);
}
.jc-modes.is-3d .jc-play-3d:active,
.jc-modes.is-2d .jc-play-2d:active {
  transform: translateY(1px) scale(0.99);
}

/* Semi-discreet slider toggle below the button */
.jc-mode-slider {
  display: inline-flex;
  align-items: center;
  position: relative;
  width: 148px;
  height: 34px;
  border-radius: 999px;
  background: rgba(14, 20, 36, 0.52);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4), 0 4px 14px rgba(0, 0, 0, 0.25);
  box-sizing: border-box;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  cursor: pointer;
  outline: none;
  padding: 0;
  margin-top: 2px;
}
.jc-mode-slider:focus-visible {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4), 0 0 0 3px rgba(255, 255, 255, 0.45);
}
.jc-mode-slider__track {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 3px;
  box-sizing: border-box;
}
.jc-mode-slider__thumb {
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 3px;
  width: calc(50% - 3px);
  border-radius: 999px;
  z-index: 1;
  pointer-events: none;
  transition: transform 0.24s cubic-bezier(0.25, 1, 0.5, 1),
              background 0.24s ease,
              box-shadow 0.24s ease;
}
.jc-mode-slider.is-3d .jc-mode-slider__thumb {
  transform: translateX(0);
  background: linear-gradient(180deg, #ff4968 0%, #d8163a 100%);
  box-shadow: 0 2px 8px rgba(216, 22, 58, 0.55), inset 0 1px 1px rgba(255, 255, 255, 0.45);
}
.jc-mode-slider.is-2d .jc-mode-slider__thumb {
  transform: translateX(100%);
  background: linear-gradient(180deg, #388dff 0%, #105bd4 100%);
  box-shadow: 0 2px 8px rgba(16, 91, 212, 0.55), inset 0 1px 1px rgba(255, 255, 255, 0.45);
}
.jc-mode-slider__opt {
  position: relative;
  z-index: 2;
  flex: 1 1 0;
  height: 100%;
  border: none;
  background: transparent;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  font-size: 13px;
  font-weight: 850;
  letter-spacing: 0.6px;
  color: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  transition: color 0.2s ease;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}
.jc-mode-slider.is-3d .jc-mode-slider__opt[data-jc-dim="3d"],
.jc-mode-slider.is-2d .jc-mode-slider__opt[data-jc-dim="2d"] {
  color: #ffffff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}
.jx-page .jc-lobby .jc-sub-actions { gap: 14px; }
.jx-page .jc-lobby .jc-sub-actions .jui-btn { --jui-s: 1.12; }
.jx-page .jc-lobby .jc-join input { width: 230px; height: 62px; padding: 0 18px; border-radius: 16px; font-size: 1.2rem; }
@media (max-width: 760px) {
  .jc-lobby { min-height: calc(100dvh - 200px); border-radius: 22px; }
  .jc-lobby-body { justify-content: flex-end; padding: 20px 18px 22px; gap: 14px; }
  .jc-join { width: 100%; }
  .jc-join input { flex: 1; width: auto; min-width: 0; }
  .jc-seg { display: flex; }
  .jc-seg .jc-seg-btn { flex: 1 1 0; padding-left: 8px; padding-right: 8px; font-size: 13px; }
  .jx-page:has(.jc-lobby) .jx-tabs { left: 12px; right: 12px; transform: none; width: auto; }
  .jc-sub-actions { width: 100%; }
  .jx-page .jc-lobby-body { gap: 16px; padding-left: 16px; padding-right: 16px; padding-bottom: max(80px, calc(env(safe-area-inset-bottom) + 10vh)); }
  .jx-page .jc-lobby .jc-modes { flex-direction: column; gap: 10px; max-width: none; width: 100%; }
  .jc-play-stack { width: 100%; max-width: none; }
  .jc-play-stack .jc-play { --jui-s: 1.2; padding: 2px 16px 2px 2px; gap: 12px; font-size: 2rem; max-width: none; }
  .jc-lobby .jc-play-ic { width: 92px; height: 92px; }
  .jx-page .jc-lobby .jc-sub-actions .jui-btn { --jui-s: 1; }
  .jx-page .jc-lobby .jc-sub-actions .jc-friends { flex: 1 1 100%; }
  .jx-page .jc-lobby .jc-join input { height: 56px; font-size: 1.1rem; }
}
/* a room link is showing: the mode cards shrink so everything fits under the tab bar */
@media (max-width: 760px) {
  .jx-page .jc-lobby-body:has(.jc-link-box.is-on) { gap: 12px; padding-bottom: max(16px, env(safe-area-inset-bottom)); }
  .jx-page .jc-lobby-body:has(.jc-link-box.is-on) .jc-modes { flex-direction: column; gap: 10px; max-width: 100%; }
  .jx-page .jc-lobby-body:has(.jc-link-box.is-on) .jc-play-stack .jc-play { --jui-s: 1; font-size: 1.35rem; gap: 4px; padding: 2px 8px; }
  .jx-page .jc-lobby-body:has(.jc-link-box.is-on) .jc-mode-slider { display: none; }
  .jx-page .jc-lobby-body:has(.jc-link-box.is-on) .jc-play-ic { width: 52px; height: 52px; }
  .jx-page .jc-lobby-body:has(.jc-link-box.is-on) .jc-play-txt small { display: none; }
  .jx-page .jc-lobby-body:has(.jc-link-box.is-on) .jc-sub-actions .jc-friends { display: none; }
}
@media (max-height: 760px) and (min-width: 761px) {
  .jx-page .jc-lobby-body { padding-top: calc(var(--topbar-h, 64px) + 62px); padding-bottom: clamp(28px, 7vh, 70px); gap: 24px; }
  .jc-lobby .jc-play-ic { width: 108px; height: 108px; }
}
@media (prefers-reduced-motion: reduce) {
  .jc-ic-squish, .jc-ic-hop { animation: none; }
}