/* Cinematic 4:5 stage — 1080 × 1350 CSS px, typography sized for phone-viewed social video. */

.film-host { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 18px; height: 100%; }
.film-host.is-render { position: fixed; left: 0; top: 0; width: 1080px; height: 1350px; padding: 0; z-index: 100; background: var(--c-bg); overflow: hidden; }
.fs-fit { position: relative; flex: 0 0 auto; }
.film-stage {
  position: absolute; left: 0; top: 0; width: 1080px; height: 1350px; overflow: hidden; transform-origin: 0 0;
  background:
    radial-gradient(ellipse 70% 52% at 50% 34%, rgba(74, 33, 67, 0.42), rgba(27, 7, 24, 0) 70%),
    linear-gradient(rgba(244, 240, 228, 0.03) 1px, transparent 1px) 0 0 / 40px 40px,
    linear-gradient(90deg, rgba(244, 240, 228, 0.03) 1px, transparent 1px) 0 0 / 40px 40px,
    var(--c-bg);
}
.film-stage *, .film-stage *::before, .film-stage *::after { animation: none !important; transition: none !important; }
.is-render .fs-fit { width: 1080px; height: 1350px; }

.fs-world { position: absolute; inset: 0; transform-origin: 50% 42%; }

.fs-head { position: absolute; left: 0; right: 0; top: 0; height: 92px; display: flex; align-items: center; justify-content: space-between; padding: 0 38px; border-bottom: 1px solid var(--c-line-hi); background: linear-gradient(180deg, rgba(33, 9, 30, 0.97), rgba(27, 7, 24, 0.9)); }
.fs-head::after { content: ''; position: absolute; left: 38px; bottom: -1px; width: 90px; height: 3px; background: var(--c-lime); }
.fs-wm .wm-cf { font-size: 27px; }
.fs-wm .wm-by { font-size: 16px; }
.fs-wm .wm-k { font-size: 16px; }
.fs-head-r { display: flex; align-items: center; gap: 16px; }
.fs-org { font-size: 17px; color: rgba(244, 240, 228, 0.72); }
.fs-head .chip { height: 28px; font-size: 14px; padding: 0 10px; }
.fs-clock { font-size: 20px; color: var(--c-ivory); min-width: 200px; text-align: right; white-space: nowrap; }

.fs-orgbox { position: absolute; left: 0; right: 0; top: 92px; height: 640px; transform-origin: 50% 48%; }
.fs-world > .fs-head { z-index: 2; }
.fs-org-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.fs-market { position: absolute; left: 36px; top: 26px; display: flex; flex-direction: column; gap: 4px; }
.fs-m-sym { font-size: 16px; letter-spacing: 0.18em; color: rgba(244, 240, 228, 0.62); }
.fs-m-px { font-size: 46px; font-weight: 500; color: var(--c-ivory); line-height: 1.05; }
.fs-m-chg { font-size: 18px; color: var(--c-lime); }
.fs-market .chip { height: 26px; font-size: 14px; align-self: flex-start; margin-top: 4px; }
.fs-m-spark { width: 230px; height: 46px; margin-top: 6px; }
.fs-status { position: absolute; right: 36px; top: 26px; text-align: right; display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }
.fs-status .t-caption { font-size: 13px; }
.fs-status-v { font-size: 22px; font-weight: 700; letter-spacing: 0.1em; color: var(--c-ivory); }
.fs-status-s { font-size: 14px; color: var(--c-lime); }
.fs-stage-line { font-size: 16px; color: var(--c-gold); margin-top: 6px; max-width: 330px; }

.fs-chain { position: absolute; left: 24px; right: 24px; top: 740px; height: 86px; z-index: 2; }
.fs-chain .chain-map { height: 100%; padding: 0; }
.fs-chain .cm-info { display: none; }
.fs-chain .cm-cell { padding: 9px 10px; gap: 3px 6px; }
.fs-chain .cm-n { font-size: 13px; }
.fs-chain .cm-label { font-size: 14px; letter-spacing: 0.03em; font-stretch: 100%; }
.fs-chain .cm-state { font-size: 13px; }
.fs-chain .cm-time { display: none; }
.fs-chain .cm-arrow { width: 8px; flex-basis: 8px; }

.fs-deck { position: absolute; left: 24px; right: 24px; top: 842px; bottom: 60px; display: grid; grid-template-columns: 560px minmax(0, 1fr); gap: 14px; }
.fs-inspector { position: relative; display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.fs-caption { font-size: 14px; letter-spacing: 0.13em; color: var(--c-gold); height: 22px; white-space: nowrap; }
.fs-slots { position: relative; flex: 1 1 auto; }
.fs-slot { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 10px; }
.fs-slot > .panel { flex: 1 1 auto; min-height: 0; }
.fs-slot-evidence > .p-evidence { flex: 1.15 1 0; }
.fs-slot-evidence > .p-validation { flex: 1 1 0; }
.fs-proof { display: flex; min-height: 0; }
.fs-proof > .panel { flex: 1 1 auto; }

/* panel typography in the film (phone legible) */
.film-stage .panel-h { height: 42px; flex-basis: 42px; padding: 0 14px; }
.film-stage .panel-h .acc { width: 9px; height: 9px; flex-basis: 9px; }
.film-stage .panel-title { font-size: 15px; letter-spacing: 0.14em; }
.film-stage .panel-code { display: none; }
.film-stage .info { display: none; }
.film-stage .chip { height: 26px; font-size: 13.5px; padding: 0 9px; }
.film-stage .panel-b { padding: 12px 16px 14px; gap: 10px; }
.film-stage .t-caption { font-size: 12px; }
.film-stage .kv-v { font-size: 17px; }
.film-stage .ck { font-size: 16px; min-height: 30px; grid-template-columns: 14px minmax(0, 1.25fr) minmax(0, 1fr) 76px; padding: 3px 8px; }
.film-stage .ck-mark { width: 12px; height: 12px; }
.film-stage .ck-v { font-size: 15px; }
.film-stage .ck-lim { display: none; }
.film-stage .ck-s { font-size: 13px; }
.film-stage .ra-verdict { padding: 10px 14px; }
.film-stage .ra-word { font-size: 26px; }
.film-stage .ra-sub { font-size: 14px; }
.film-stage .ra-scan { width: 30px; height: 30px; flex-basis: 30px; }
.film-stage .ra-size, .film-stage .ra-hist { font-size: 13.5px; }
.film-stage .pm-step { font-size: 13px; padding: 7px 0; }
.film-stage .pm-tid { font-size: 16px; }
.film-stage .pm-tstate { font-size: 15px; }
.film-stage .pm-trows { font-size: 13.5px; }
.film-stage .sx-banner { font-size: 14px; padding: 7px 10px; }
.film-stage .sx-head { font-size: 17px; }
.film-stage .sx-notice, .film-stage .mi-notice, .film-stage .pl-notice, .film-stage .pv-foot, .film-stage .ev-bundle { font-size: 12.5px; }
.film-stage .kv { grid-template-columns: minmax(150px, auto) 1fr; }
.film-stage .p-market .mi-px { font-size: 40px; }
.film-stage .p-market .mi-sym { font-size: 14px; }
.film-stage .p-market .mi-chg { font-size: 15px; }
.film-stage .p-market .mi-chart { min-height: 190px; }
.film-stage .p-market .mi-kv .kv-v { font-size: 15px; }
.film-stage .p-market .mi-spark { display: none; }
.film-stage .ev-g, .film-stage .ev-gauge { width: 190px; height: 118px; }
.film-stage .ev-g { flex-basis: 190px; }
.film-stage .ev-gv { top: 40px; }
.film-stage .ev-score { font-size: 38px; }
.film-stage .ev-score-l { font-size: 12px; }
.film-stage .ev-quorum { font-size: 17px; }
.film-stage .ev-c { grid-template-columns: 180px 1fr 54px; font-size: 15.5px; }
.film-stage .ev-bar { height: 9px; }
.film-stage .ev-cv { font-size: 15.5px; }
.film-stage .pl-list { gap: 6px; overflow: hidden; }
.film-stage .pl-row { grid-template-columns: 28px 74px minmax(0, 1fr); font-size: 15px; padding: 5px 8px; }
.film-stage .pl-t, .film-stage .pl-hash { display: none; }
.film-stage .pl-seq { font-size: 14px; }
.film-stage .pl-stage { font-size: 13px; }
.film-stage .pl-sum { white-space: normal; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.film-stage .pl-root { font-size: 13.5px; }

.fs-outcome { flex: 1 1 auto; }
.fs-oc-word { font-size: 24px; font-weight: 800; letter-spacing: 0.08em; color: var(--c-lime); line-height: 1.25; }
.fs-oc-lines { font-size: 16px; color: rgba(244, 240, 228, 0.82); white-space: pre-line; line-height: 1.6; }

.fs-eco-wrap { position: absolute; inset: 0 0 48px 0; background: var(--c-bg); }
.fs-eco { position: absolute; inset: 0; width: 100%; height: 100%; }
.fs-eco-title { position: absolute; left: 0; right: 0; top: 64px; text-align: center; }
.fs-eco-title .t-display { font-size: 44px; font-weight: 800; letter-spacing: 0.09em; color: var(--c-ivory); }
.fs-eco-title .t-mono { font-size: 17px; color: rgba(244, 240, 228, 0.62); margin-top: 10px; letter-spacing: 0.06em; }

.fs-brand {
  position: absolute; inset: 0 0 48px 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  background: radial-gradient(ellipse 72% 52% at 50% 48%, rgba(22, 5, 20, 0.93), rgba(22, 5, 20, 0.55));
}
.fs-b-cf { font-family: var(--font-display); font-stretch: 125%; font-weight: 800; font-size: 86px; letter-spacing: 0.09em; color: var(--c-ivory); margin-right: -0.09em; }
.fs-b-by { display: flex; align-items: baseline; gap: 14px; }
.fs-b-by span:first-child { font-family: var(--font-ui); font-size: 26px; color: rgba(244, 240, 228, 0.72); }
.fs-b-k { font-family: var(--font-display); font-stretch: 125%; font-weight: 700; font-size: 36px; letter-spacing: 0.28em; color: var(--c-ivory); margin-right: -0.28em; }
.fs-b-rule { width: 120px; height: 3px; background: var(--c-lime); margin: 8px 0; }
.fs-b-tag { font-family: var(--font-display); font-stretch: 125%; font-weight: 600; font-size: 25px; letter-spacing: 0.3em; color: var(--c-gold); margin-right: -0.3em; }
.fs-b-note { font-size: 15px; color: rgba(244, 240, 228, 0.55); margin-top: 18px; }

.fs-foot { position: absolute; left: 0; right: 0; bottom: 0; height: 48px; display: flex; align-items: center; justify-content: space-between; padding: 0 30px; background: rgba(24, 6, 21, 0.97); border-top: 1px solid var(--c-line-hi); font-size: 14px; color: rgba(244, 240, 228, 0.78); }
.fs-foot span { display: flex; align-items: center; gap: 10px; }
.fs-foot .bb-sq { width: 9px; height: 9px; }

.fs-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; }
.fs-scrub { width: 420px; accent-color: var(--c-lime); }
.fs-tc { font-size: 12px; color: rgba(244, 240, 228, 0.65); min-width: 120px; }

body[data-view='film'] .main { overflow: hidden; }