/* The fullscreen showcase jupiter.art/#<name> (components/lunaris/ShowcasePlayer.tsx) – always dark, like a film. */

.jsc { position: fixed; inset: 0; z-index: 955; overflow: hidden; color: #f4efe9; background: #07060c; font-family: 'Plus Jakarta Sans', system-ui, sans-serif; cursor: pointer; user-select: none; }
.jsc a, .jsc button { cursor: pointer; }
.jsc-bg { position: absolute; inset: 0; background: url('/lunaris/jupiter/dark/background.jpg') top center / cover no-repeat, #0c0b13; }
.jsc-bg.is-art { background-size: cover; background-position: center; filter: blur(34px) saturate(1.25) brightness(.62); transform: scale(1.25); }
.jsc-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6, 5, 10, .35), rgba(6, 5, 10, .05) 30%, rgba(6, 5, 10, .25) 62%, rgba(6, 5, 10, .85)); pointer-events: none; }

.jsc-top { position: absolute; z-index: 4; left: 0; right: 0; top: 0; display: flex; align-items: center; justify-content: space-between; padding: max(20px, env(safe-area-inset-top)) 22px 0; }
.jsc-close { display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid rgba(255, 255, 255, .22); border-radius: 50%; background: rgba(20, 18, 28, .55); color: #fff; font-size: 18px; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }

/* the stage between the top line and the bottom bars */
.jsc-logo, .jsc-title, .jsc-slide, .jsc-end { position: absolute; z-index: 3; left: 0; right: 0; top: 0; bottom: calc(150px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 70px 22px 10px; text-align: center; }
.jsc-logo { padding: 0; }
.jsc-logo .jx-mark { width: min(56vw, 300px); color: #f2eeea; }

.jsc h1 { margin: 0; font-family: var(--jx-serif, Georgia, serif); font-size: clamp(36px, 10vw, 62px); font-weight: 400; line-height: 1.05; }
.jsc h2 { margin: 18px 0 0; font-family: var(--jx-serif, Georgia, serif); font-size: clamp(28px, 8vw, 48px); font-weight: 400; line-height: 1.1; text-shadow: 0 2px 20px rgba(0, 0, 0, .45); }
.jsc-line { margin: 8px 0 0; font-size: 15px; opacity: .85; }
.jsc-intro { margin: 26px 0 0; font-size: 16px; opacity: .9; }
.jsc-meta { margin: 8px 0 0; font-size: 16px; opacity: .9; }
.jsc-small { margin: 0 0 10px; font-size: 12px; letter-spacing: .3em; text-transform: uppercase; opacity: .8; }

/* paintings */
.jsc-pic { position: relative; display: block; overflow: hidden; width: 100%; background: #222; }
.jsc-pic img { display: block; width: 100%; height: 100%; object-fit: cover; }

.jsc-fan { position: relative; display: grid; place-items: center; width: min(78vw, 460px); height: min(48vh, 360px); margin-top: 26px; }
.jsc-fan__card { position: absolute; width: 58%; padding: 4px; background: linear-gradient(135deg, #e6cf98, #9c7a3f); box-shadow: 0 22px 44px rgba(0, 0, 0, .55); }
.jsc-fan__card .jsc-pic { aspect-ratio: 4 / 5 !important; }

.jsc-caption { margin: 0; font-size: clamp(13px, 3.6vw, 16px); letter-spacing: .14em; text-transform: uppercase; text-shadow: 0 1px 12px rgba(0, 0, 0, .5); }
.jsc-count { margin: 10px 0 18px; font-size: 15px; letter-spacing: .12em; opacity: .9; }
.jsc-frame { width: min(76vw, calc(46vh * var(--r, 1)), 560px); max-width: 76vw; padding: 3px; border: 1px solid rgba(240, 220, 170, .85); background: linear-gradient(135deg, #f1dfae, #a8844b); box-shadow: 0 30px 60px rgba(0, 0, 0, .5); }
.jsc-frame .jsc-pic { max-height: 46vh; border: 2px solid rgba(20, 16, 10, .55); }

.jsc-pill { display: inline-flex; align-items: center; gap: 10px; margin-top: 16px; padding: 11px 30px; border: 1px solid rgba(255, 255, 255, .55); border-radius: 99px; color: #fff !important; text-decoration: none !important; font-size: 16px; background: rgba(10, 10, 16, .2); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.jsc-pill:hover { background: rgba(255, 255, 255, .12); }
.jsc-pill--wide { padding: 13px 44px; }
.jsc-progress { display: flex; gap: 14px; width: min(76vw, 460px); margin-top: 24px; }
.jsc-progress i { position: relative; flex: 1; height: 3px; border-radius: 3px; overflow: hidden; background: rgba(255, 255, 255, .28); }
.jsc-progress i.is-done { background: #7fe0ee; }
.jsc-progress i b { position: absolute; left: 0; top: 0; bottom: 0; background: #7fe0ee; }

.jsc-row { display: flex; align-items: flex-end; justify-content: center; gap: 12px; margin: 26px 0 8px; width: min(86vw, 520px); }
.jsc-row__card { flex: 1; padding: 3px; background: linear-gradient(135deg, #e6cf98, #9c7a3f); box-shadow: 0 18px 34px rgba(0, 0, 0, .5); transform: translateY(14px); }
.jsc-row__card.is-mid { transform: translateY(-6px); }
.jsc-row__card .jsc-pic { aspect-ratio: 3 / 4 !important; }
.jsc-again { margin-top: 14px; padding: 6px 10px; border: 0; background: none; color: rgba(255, 255, 255, .7); font: inherit; font-size: 13px; }

@media (min-width: 900px) {
  .jsc-frame { width: min(46vw, calc(50vh * var(--r, 1)), 640px); }
  .jsc-frame .jsc-pic { max-height: 50vh; }
}
@media (prefers-reduced-motion: reduce) { .jsc * { transition-duration: .01s !important; animation-duration: .01s !important; } }
/* the slide always fits between the top line and the bars, also for tall paintings */
.jsc-frame { width: min(76vw, calc(36vh * var(--r, 1)), 560px); }
.jsc-frame .jsc-pic { max-height: 36vh; }
.jsc-count { margin: 8px 0 14px; }
.jsc h2 { margin-top: 14px; }
@media (min-height: 860px) { .jsc-frame { width: min(76vw, calc(42vh * var(--r, 1)), 560px); } .jsc-frame .jsc-pic { max-height: 42vh; } }
@media (min-width: 900px) { .jsc-frame { width: min(46vw, calc(46vh * var(--r, 1)), 640px); } .jsc-frame .jsc-pic { max-height: 46vh; } }

/* "Bild antippen" – the painting on a work slide opens its chapters */
.jsc-frame { cursor: zoom-in; }
.jsc-hint { order: 0; margin: 10px 0 0; font-size: 12px; letter-spacing: .08em; opacity: .85; }
.jsc-slide .jsc-hint { margin-top: 10px; }

/* ---------- the work's chapters inside the showcase (WorkStory.tsx) ---------- */
.jsw { position: absolute; inset: 0; z-index: 8; overflow: hidden; color: #f5efe7; background: #0b0a10; }
.jsw-bg { position: absolute; inset: 0; }
.jsw-bg img, .jsw-bg video { width: 100%; height: 100%; object-fit: cover; display: block; }
.jsw-shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(5, 4, 8, .55), rgba(5, 4, 8, .25) 30%, rgba(5, 4, 8, .35) 70%, rgba(5, 4, 8, .8)); }
.jsw.is-light { color: #1d1913; }
.jsw.is-light .jsw-shade { background: linear-gradient(180deg, rgba(255, 252, 247, .55), rgba(255, 252, 247, .15) 30%, rgba(255, 252, 247, .25) 70%, rgba(255, 252, 247, .75)); }

.jsw-top { position: absolute; z-index: 3; left: 0; right: 0; top: 0; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; padding: max(18px, env(safe-area-inset-top)) 16px 0; }
.jsw-back, .jsw-open { display: grid; place-items: center; min-width: 44px; height: 40px; padding: 0 14px; border: 1px solid rgba(255, 255, 255, .3); border-radius: 99px; background: rgba(15, 12, 20, .45); color: #fff !important; font: inherit; font-size: 14px; text-decoration: none !important; cursor: pointer; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.jsw-open { padding: 0; width: 40px; font-size: 18px; }
.jsw.is-light .jsw-back, .jsw.is-light .jsw-open { background: rgba(255, 255, 255, .6); border-color: rgba(0, 0, 0, .15); color: #1d1913 !important; }
.jsw-bars { display: flex; gap: 6px; }
.jsw-bars i { position: relative; flex: 1; height: 3px; border-radius: 3px; overflow: hidden; background: rgba(255, 255, 255, .3); }
.jsw-bars i.is-done { background: #7fe0ee; }
.jsw-bars b { position: absolute; left: 0; top: 0; bottom: 0; background: #7fe0ee; }
.jsw.is-light .jsw-bars i { background: rgba(0, 0, 0, .15); }
.jsw.is-light .jsw-bars i.is-done, .jsw.is-light .jsw-bars b { background: #a8854f; }

.jsw-body { position: absolute; z-index: 2; left: 0; right: 0; top: 70px; bottom: calc(150px + env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; align-items: center; justify-content: safe center; gap: 0; padding: 8px 24px 16px; text-align: center; scrollbar-width: none; }
.jsw-kicker { margin: 0; font-size: 12px; letter-spacing: .26em; text-transform: uppercase; opacity: .85; }
.jsw-kicker b { margin-right: 8px; font-weight: 600; color: #e9c46a; }
.jsw.is-light .jsw-kicker b { color: #a8854f; }
.jsw-h1 { margin: 10px 0 0; font-family: var(--jx-serif, Georgia, serif); font-size: clamp(32px, 9vw, 56px); font-weight: 400; line-height: 1.05; text-shadow: 0 2px 18px rgba(0, 0, 0, .35); }
.jsw-head h2 { margin: 10px 0 0; font-family: var(--jx-serif, Georgia, serif); font-size: clamp(28px, 7.6vw, 46px); font-weight: 400; line-height: 1.08; }
.jsw-sub { margin: 8px 0 0; font-size: 15px; opacity: .9; }
.jsw-frame { width: min(78vw, 520px); margin-top: 18px; padding: 3px; background: linear-gradient(135deg, #f1dfae, #a8844b); box-shadow: 0 26px 50px rgba(0, 0, 0, .45); }
.jsw-frame .la-art { display: block; max-height: 38vh; }
.jsw-frame--wall { width: min(70vw, 460px); padding: 6px; background: #2a2118; box-shadow: 0 30px 50px rgba(40, 30, 15, .35); }
.jsw-price { margin: 14px 0 0; font-family: var(--jx-serif, Georgia, serif); font-size: 20px; }
.jsw-price--big { font-size: 28px; margin-top: 6px; }
.jsw-caption { margin: 14px 0 0; font-family: var(--jx-serif, Georgia, serif); font-style: italic; font-size: 18px; }
.jsw-cta { display: inline-flex; align-items: center; gap: 10px; margin-top: 14px; padding: 12px 30px; border-radius: 99px; background: #1d1913; color: #fff !important; text-decoration: none !important; }

.jsw-zoom { display: block; width: min(80vw, 520px); margin-top: 16px; border: 2px solid rgba(233, 196, 106, .75); box-shadow: 0 18px 36px rgba(0, 0, 0, .4); }
.jsw-zoom img { transform: scale(var(--z, 1)); transform-origin: var(--spot, 50% 50%); }
.jsw-table { display: grid; gap: 0; width: min(80vw, 420px); margin: 18px 0 0; text-align: left; }
.jsw-table > div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 2px; border-bottom: 1px solid rgba(255, 255, 255, .22); }
.jsw-table dt { opacity: .75; }
.jsw-table dd { margin: 0; font-weight: 600; }
.jsw-pair { display: grid; grid-template-columns: 1.1fr 1fr; gap: 14px; align-items: center; width: min(88vw, 560px); margin-top: 16px; text-align: left; }
.jsw-pair.is-rev { grid-template-columns: 1fr 1.1fr; }
.jsw-pair.is-rev > :first-child { order: 2; }
.jsw-pair .jsw-zoom { width: 100%; margin: 0; }
.jsw-pair h3 { margin: 0; font-family: var(--jx-serif, Georgia, serif); font-size: 19px; font-weight: 400; }
.jsw-pair p { margin: 6px 0 0; font-size: 14px; line-height: 1.5; opacity: .9; }

.jsw-loading { position: absolute; inset: 0; display: grid; place-items: center; }
.jsw-loading i { width: 34px; height: 34px; border: 2px solid rgba(255, 255, 255, .25); border-top-color: #fff; border-radius: 50%; animation: jsw-spin 0.9s linear infinite; }
@keyframes jsw-spin { to { transform: rotate(360deg); } }
.jsw--empty { display: grid; place-content: center; gap: 16px; text-align: center; padding: 30px; }

/* ---------- "Als Video speichern" (ShowcaseExport.tsx) ---------- */
.jsc-save { margin-left: auto; margin-right: 10px; }
.jsc-pill--save { margin-top: 12px; border-color: rgba(233, 196, 106, .7); color: #f3e3bd !important; background: rgba(60, 46, 20, .35); cursor: pointer; font: inherit; font-size: 15px; }
.jsx { position: absolute; inset: 0; z-index: 12; display: grid; place-items: center; padding: 20px 16px calc(200px + env(safe-area-inset-bottom)); background: rgba(5, 4, 9, .72); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); cursor: default; }
@media (min-width: 1100px) { .jsx { padding-bottom: 20px; } }
.jsx-box { position: relative; width: min(460px, 100%); max-height: 100%; overflow-y: auto; padding: 26px 22px 22px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 22px; background: rgba(22, 20, 30, .96); color: #f4efe9; text-align: left; box-shadow: 0 30px 70px rgba(0, 0, 0, .5); }
.jsx-close { position: absolute; right: 14px; top: 14px; width: 36px; height: 36px; border: 1px solid rgba(255, 255, 255, .2); border-radius: 50%; background: none; color: #fff; cursor: pointer; }
.jsx-close:disabled { opacity: .3; cursor: default; }
.jsx-kicker { margin: 0; font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: #e9c46a; }
.jsx-box h2 { margin: 8px 40px 18px 0; font-family: var(--jx-serif, Georgia, serif); font-size: 26px; font-weight: 400; line-height: 1.15; }
.jsx-opt { display: grid; gap: 4px; width: 100%; margin-top: 10px; padding: 16px 18px; border: 1px solid rgba(255, 255, 255, .18); border-radius: 16px; background: rgba(255, 255, 255, .05); color: inherit; font: inherit; text-align: left; cursor: pointer; transition: border-color .2s, background-color .2s; }
.jsx-opt:hover { border-color: #e9c46a; background: rgba(233, 196, 106, .08); }
.jsx-opt strong { font-family: var(--jx-serif, Georgia, serif); font-size: 20px; font-weight: 400; }
.jsx-opt span { font-size: 13.5px; line-height: 1.45; opacity: .8; }
.jsx-note { margin: 14px 0 0; font-size: 13px; opacity: .7; }
.jsx-progress { display: grid; gap: 10px; }
.jsx-progress > p:first-child { margin: 0; font-size: 15px; }
.jsx-bar { display: block; height: 6px; border-radius: 6px; overflow: hidden; background: rgba(255, 255, 255, .15); }
.jsx-bar i { display: block; height: 100%; background: linear-gradient(90deg, #7fe0ee, #e9c46a); transition: width .3s; }
.jsx-pct { margin: 0; font-family: var(--jx-serif, Georgia, serif); font-size: 30px; }
.jsx-done { display: grid; gap: 12px; }
.jsx-video { width: 100%; max-height: 46vh; border-radius: 12px; background: #000; }
.jsx-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.jsx-primary { display: inline-flex; align-items: center; justify-content: center; padding: 12px 22px; border-radius: 12px; background: linear-gradient(120deg, #e9c46a, #c9a463); color: #1b150a !important; font-weight: 700; text-decoration: none !important; }
.jsx-ghost { display: inline-flex; align-items: center; justify-content: center; padding: 11px 18px; border: 1px solid rgba(255, 255, 255, .3); border-radius: 12px; background: none; color: inherit; font: inherit; cursor: pointer; justify-self: start; }
.jsx-chapters { display: grid; gap: 8px; padding-top: 6px; border-top: 1px solid rgba(255, 255, 255, .12); }
.jsx-chapters p { margin: 0; font-size: 13px; opacity: .8; }
.jsx-chapters textarea { width: 100%; padding: 10px 12px; border: 1px solid rgba(255, 255, 255, .15); border-radius: 10px; background: rgba(0, 0, 0, .3); color: inherit; font: 12.5px/1.5 ui-monospace, Menlo, monospace; resize: vertical; }
.jsx-link { justify-self: start; padding: 0; border: 0; background: none; color: #e9c46a; font: inherit; font-size: 14px; text-decoration: underline; cursor: pointer; }