/* Joint cavitation. All rules scoped under .jc-* (the app inlines only this file). */

/* 0. the x-ray finger */
.jc-xray { position: relative; flex: 1; min-height: 300px; display: flex; align-items: center; justify-content: center; background: radial-gradient(90% 70% at 50% 45%, #10203a, #04060c 75%); touch-action: none; cursor: grab; }
.jc-xray svg { width: 100%; max-width: 330px; max-height: 100%; height: auto; overflow: visible; }
.jc-skin { fill: rgba(120,165,230,.13); stroke: rgba(160,200,255,.42); stroke-width: 1.5; }
.jc-bone { fill: rgba(225,238,255,.88); filter: drop-shadow(0 0 6px rgba(160,205,255,.75)); }
.jc-meta rect { fill: rgba(225,238,255,.35); }
.jc-hitf { fill: transparent; cursor: pointer; }
.jc-thumb { fill: none !important; stroke: rgba(225,238,255,.8); stroke-width: 11; stroke-linecap: round; }
.jc-bub { fill: #02030a; stroke: #9fd0ff; stroke-width: 2.5; filter: drop-shadow(0 0 6px #9fd0ff); }
.jc-tag { font: 700 14px var(--sans); fill: #cfe3ff; }
.jc-lead { stroke: rgba(207,227,255,.6); stroke-width: 1.2; }
.jc-xray.cracked { animation: jcJolt .25s ease-out; }
@keyframes jcJolt { 0% { transform: translateX(0); } 30% { transform: translateX(-4px); } 60% { transform: translateX(3px); } 100% { transform: none; } }

/* 1. the soda */
.jc-soda { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.jc-soda svg { width: 150px; height: auto; overflow: visible; }
.jc-drink { fill: rgba(200,120,60,.55); }
.jc-glassb { fill: rgba(255,255,255,.06); stroke: rgba(255,255,255,.75); stroke-width: 3; stroke-linejoin: round; }
.jc-hitcap { fill: transparent; cursor: pointer; }
.jc-capbody { fill: #d84b3a; stroke: #fff; stroke-width: 2; transition: transform .45s cubic-bezier(.3,.6,.2,1), opacity .45s; }
.jc-soda.open .jc-capbody { transform: translate(40px, -40px) rotate(35deg); opacity: 0; }
.jc-b { fill: rgba(255,255,255,.85); opacity: 0; animation: jcRise 1.6s ease-in infinite; }
@keyframes jcRise { 0% { opacity: 0; transform: translateY(0); } 15% { opacity: 1; } 100% { opacity: 0; transform: translateY(-120px); } }
.jc-soda-said { font: 800 15px var(--sans); color: var(--text); }

/* 2-3. the joint, inside */
.jc-joint { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.jc-joint svg { width: 100%; max-width: 300px; height: auto; overflow: hidden; }
.jc-bag { fill: none; stroke: #ff9db0; stroke-width: 3; }
.jc-fl { fill: #c99a3e; }
.jc-gas { fill: #fff; opacity: var(--gas, 1); transition: opacity .3s; }
.jc-joint.popped { --gas: .2; }
.jc-bone2 { fill: #efe3c8; }
.jc-cart { fill: none; stroke: #9fd3ff; stroke-width: 6; stroke-linecap: round; }
.jc-bubble { fill: rgba(10,14,26,.85); stroke: #fff; stroke-width: 2.5; }
.jc-lab { font: 700 18px var(--sans); fill: var(--dim); }
.jc-labf { fill: var(--gold); }
.jc-gauge { width: 100%; max-width: 280px; }
.jc-joint.popped svg { animation: jcJolt .25s ease-out; }
.jc-clock { display: flex; align-items: baseline; gap: 6px; }
.jc-clock b { font: 800 28px var(--sans); color: #fff; min-width: 34px; text-align: right; }
.jc-clock span { font: 700 14px var(--sans); color: var(--dim); }
.jc-joint.drag svg { touch-action: none; cursor: grab; }
.jc-joint.mini svg { max-width: 220px; }
.jc-joint.mini .jc-gauge { display: none; }

/* the MRI */
.jc-mri { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; }
.jc-mripair { display: flex; gap: 8px; width: 100%; max-width: 360px; }
.jc-mripair figure { margin: 0; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.jc-mripair img { display: block; width: 100%; max-height: 260px; object-fit: cover; border-radius: 10px; }
.jc-mripair figcaption { font: 800 13px var(--sans); color: #fff; }
.jc-mri em { font: 600 13px var(--sans); font-style: normal; color: var(--dim); text-align: center; }

/* 6. the back */
.jc-pic img { display: block; max-width: 100%; max-height: 220px; margin: 0 auto; }
.jc-pic.jc-small img { max-height: 150px; }

/* 7. Unger's hands */
.jc-unger { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.jc-hands { position: relative; width: 100%; max-width: 340px; }
.jc-hands img { display: block; width: 100%; }
.jc-left { all: unset; position: absolute; left: 6%; top: 0; width: 42%; height: 100%; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.jc-hl, .jc-hr { position: absolute; bottom: -4px; display: flex; flex-direction: column; align-items: center; width: 44%; padding: 3px 0; border-radius: 10px; background: rgba(10,14,26,.78); pointer-events: none; }
.jc-hl { left: 4%; } .jc-hr { right: 4%; }
.jc-hl b, .jc-hr b { font: 800 13px var(--sans); color: #fff; }
.jc-hl span, .jc-hr span { font: 800 18px var(--sans); color: var(--gold); }
.jc-hr span { color: var(--dim); }
.jc-hl em, .jc-hr em { font: 600 12px var(--sans); font-style: normal; color: var(--dim); }
.jc-years { font: 700 15px var(--sans); color: var(--dim); }
.jc-years b { font: 800 22px var(--sans); color: #fff; }
.jc-pops { position: absolute; left: 50%; top: 40%; width: 60px; height: 60px; margin: -30px; border-radius: 50%; border: 3px solid var(--gold); opacity: 0; }
.jc-unger.running .jc-pops { animation: jcPop .23s ease-out infinite; }
@keyframes jcPop { from { opacity: .9; transform: scale(.3); } to { opacity: 0; transform: scale(1.3); } }

@media (max-height: 700px) {
  .jc-joint svg { max-width: 250px; }
  .jc-soda svg { width: 120px; }
  .jc-pic img { max-height: 180px; }
  .jc-mripair img { max-height: 200px; }
  .jc-hands { max-width: 290px; }
}