/* codex, card inspect sheet, hero picker, card anatomy */

/* screen entrance: every view slides in a few pixels and fades */
#app > section, #app > .board, #app > .tray { animation: enter var(--t-mid) var(--ease) both; }
@keyframes enter { from { opacity: 0; transform: translateY(8px); } }
#app > .board { animation-name: enter-board; }
@keyframes enter-board { from { opacity: 0; } }
#app > .tray { animation-name: enter-tray; animation-duration: .34s; }
@keyframes enter-tray { from { opacity: 0; transform: translateY(40px); } }
#app[data-fresh="0"] > section, #app[data-fresh="0"] > .board, #app[data-fresh="0"] > .tray { animation: none; }

/* tabs with a sliding ink bar */
.tabs { position: relative; display: flex; gap: 2px; border-bottom: 1px solid var(--line-2); }
.tab { position: relative; padding: 10px 14px; background: transparent; border: 0; color: var(--muted); cursor: pointer; letter-spacing: .06em; font-size: calc(12px * var(--fs)); transition: color var(--t-fast); }
.tab:hover { color: var(--paper-2); }
.tab.on { color: var(--paper); }
.tab-ink { position: absolute; left: 0; bottom: -1px; height: 2px; width: 0; background: linear-gradient(90deg, var(--violet-hot), var(--red-hot)); box-shadow: 0 0 10px var(--violet-hot); transition: transform .3s var(--ease), width .3s var(--ease); }

/* codex screen */
.codex-screen { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 34px 5vw 0; gap: 18px; }
.codex-head { display: grid; grid-template-columns: auto 1fr auto; align-items: end; gap: 34px; }
.codex-head h1 { font-size: calc(46px * var(--fs)); line-height: 1; margin-top: 6px; text-shadow: 3px 0 0 rgba(255,43,60,.5), -3px 0 0 rgba(31,182,209,.3); }
.codex-head .tabs { align-self: end; }
.codex-body { flex: 1; overflow: auto; padding: 8px 2px 60px; -webkit-mask-image: linear-gradient(transparent, #000 16px); mask-image: linear-gradient(transparent, #000 16px); }
.codex-body.in > * { animation: enter .3s var(--ease) both; }
.codex-note { max-width: 90ch; font-size: calc(12px * var(--fs)); margin: 4px 0 16px; }
.codex-grid { display: flex; flex-wrap: wrap; gap: 18px 16px; }
.codex-grid > .card { animation: deal .36s var(--ease) both; animation-delay: calc(var(--i, 0) * 18ms); }
@keyframes deal { from { opacity: 0; transform: translateY(18px) rotate(-2deg) scale(.96); } }
.codex-grid > .card.pickable:hover { transform: translateY(-8px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
.codex-body h3 { font-size: calc(15px * var(--fs)); margin: 30px 0 12px; color: var(--paper); }

.filters { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0 18px; }
.filters .fl { font-size: calc(9px * var(--fs)); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin: 0 4px 0 12px; }
.filters .fl:first-child { margin-left: 0; }
.chip { padding: 5px 10px; font-size: calc(11px * var(--fs)); background: var(--ink-1); border: 1px solid var(--line-2); color: var(--paper-2); cursor: pointer; transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast); }
.chip:hover { border-color: var(--paper-2); color: var(--paper); }
.chip.on { border-color: var(--violet-hot); color: var(--paper); background: var(--violet-deep); }
.chip[class*="st-"].on { border-color: var(--stc); box-shadow: inset 0 -2px 0 var(--stc); }

.enc-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.enc { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 10px 12px; border: 1px solid var(--line); background: var(--ink-1); font-size: calc(12px * var(--fs)); }
.enc b { color: var(--paper); font-family: var(--brand); }
.enc span { grid-column: 1; color: var(--paper-2); font-size: calc(11px * var(--fs)); }
.enc em { grid-column: 2; grid-row: 1 / 3; align-self: center; font-style: normal; font-size: calc(10px * var(--fs)); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.enc.t-elite { border-color: rgba(255,43,60,.35); }
.enc.t-boss { border-color: var(--red-hot); box-shadow: 0 0 18px rgba(255,43,60,.18); }

.tool-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.tool { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 14px; border: 1px solid rgba(167,123,255,.35); background: var(--ink-1); animation: deal .36s var(--ease) both; animation-delay: calc(var(--i, 0) * 40ms); }
.tool pre { margin: 0 0 4px; font-size: calc(7px * var(--fs)); line-height: 1; color: rgba(167,123,255,.35); overflow: hidden; }
.tool pre .a2 { color: var(--violet-hot); } .tool pre .a3 { color: var(--paper); }
.tool .glyph { position: absolute; right: 12px; top: 10px; font-size: calc(22px * var(--fs)); color: var(--violet-hot); text-shadow: 0 0 10px var(--violet-hot); }
.tool b { font-family: var(--brand); font-size: calc(15px * var(--fs)); text-transform: lowercase; }
.tool p { margin: 0; font-size: calc(12px * var(--fs)); color: var(--paper-2); line-height: 1.5; }
.tool small { color: var(--muted); font-size: calc(11px * var(--fs)); }
.tool em { font-style: normal; font-weight: 800; font-size: calc(12px * var(--fs)); color: var(--paper-2); }
.tool i { position: absolute; right: 12px; bottom: 10px; font-style: normal; font-size: calc(10px * var(--fs)); letter-spacing: .12em; text-transform: uppercase; color: var(--cyan); }
.tool.own { border-color: var(--cyan); }

/* inspect sheet: big tilting card on the left, the parameter grid on the right */
.inspect-ov { animation: fadein .16s ease; }
.inspect-ov.out { animation: fadeout .16s ease forwards; }
@keyframes fadeout { to { opacity: 0; } }
.inspect { position: relative; width: min(1120px, 94vw); max-height: 90vh; overflow: auto; display: grid; grid-template-columns: auto 1fr; gap: 44px; padding: 34px 54px; background: rgba(12,10,17,.96); border: 1px solid var(--line-2); box-shadow: 0 40px 100px -30px #000, 0 0 0 1px rgba(167,123,255,.08); animation: pop-in .24s var(--ease); }
.inspect.from-r { animation: slide-r .22s var(--ease); }
.inspect.from-l { animation: slide-l .22s var(--ease); }
@keyframes pop-in { from { opacity: 0; transform: scale(.97); } }
@keyframes slide-r { from { opacity: .3; transform: translateX(26px); } }
@keyframes slide-l { from { opacity: .3; transform: translateX(-26px); } }
.inspect .close { position: absolute; right: 14px; top: 10px; background: transparent; border: 0; color: var(--muted); font-size: calc(26px * var(--fs)); cursor: pointer; }
.ins-stage { display: flex; flex-direction: column; align-items: center; gap: 18px; perspective: 900px; }
.ins-card .card { animation: rise .42s var(--ease); }
@keyframes rise { from { transform: translateY(24px) rotateX(18deg); opacity: 0; } }
.ins-up { font-size: calc(12px * var(--fs)); padding: 9px 14px; }
.ins-up.on { border-color: var(--red-hot); color: var(--paper); }
.ins-text h2 { font-family: var(--brand); font-size: calc(34px * var(--fs)); margin: 6px 0 10px; }
.ins-text .plus { color: var(--red-hot); }
.ins-rule { font-size: calc(16px * var(--fs)); color: var(--paper); line-height: 1.5; margin: 0 0 6px; }
.ins-flavor { color: var(--muted); font-style: italic; margin: 0 0 14px; }
.ins-week { font-size: calc(13px * var(--fs)); color: var(--paper-2); line-height: 1.55; border-left: 2px solid var(--stc, var(--violet)); padding-left: 10px; max-width: 66ch; }
.ins-week b { color: var(--paper); font-weight: 500; margin-right: 6px; text-transform: lowercase; }
.pgrid { display: grid; grid-template-columns: 150px 1fr; border-top: 1px solid var(--line); margin-top: 16px; font-size: calc(12px * var(--fs)); }
.pgrid > div { padding: 9px 8px; border-bottom: 1px solid var(--line); }
.pg-k { color: var(--muted); font-size: calc(10px * var(--fs)); letter-spacing: .12em; text-transform: uppercase; padding-top: 11px !important; }
.pg-v { color: var(--paper-2); line-height: 1.5; }
.pg-v b { color: var(--paper); font-size: calc(15px * var(--fs)); }
.pg-v small { display: block; margin-top: 2px; color: var(--muted); font-size: calc(11px * var(--fs)); }
.pg-v code { color: var(--paper); font-size: calc(11px * var(--fs)); }
.pg-v .arr { color: var(--muted); font-style: normal; margin: 0 4px; }
.pg-v b.up { color: var(--red-hot); font-size: calc(12px * var(--fs)); }
.pg-v .kwc { color: var(--violet-hot); }
.pg-v .mini-ring { vertical-align: middle; }
.stc { color: var(--stc); font-weight: 500; }
.lvl-word.sig { color: var(--hc, var(--violet-hot)); } .lvl-word.l0 { color: var(--paper-2); } .lvl-word.l1 { color: var(--paper); } .lvl-word.l2 { color: var(--violet-hot); } .lvl-word.l3 { color: var(--red-hot); }
.ins-nav { position: absolute; top: 50%; width: 38px; height: 64px; margin-top: -32px; background: rgba(5,4,7,.6); border: 1px solid var(--line-2); color: var(--paper-2); font-size: calc(28px * var(--fs)); cursor: pointer; }
.ins-nav:hover { color: var(--paper); border-color: var(--paper-2); }
.ins-nav.prev { left: 8px; } .ins-nav.next { right: 8px; }

/* hero picker */
.hero-screen { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px; padding: 30px 4vw; }
.hero-screen h1 { font-size: clamp(34px, 4vw, 56px); text-shadow: 3px 0 0 rgba(255,43,60,.5), -3px 0 0 rgba(31,182,209,.3); }
.hero-screen .lede { text-align: center; margin: 0; }
.hero-row { display: flex; gap: 18px; flex-wrap: wrap; justify-content: center; }
.hero { position: relative; flex: 1 1 250px; max-width: 300px; min-width: 0; display: flex; flex-direction: column; gap: 10px; padding: 18px 18px 20px; text-align: left; color: var(--paper); background: linear-gradient(180deg, rgba(42,29,68,.45), var(--ink-1) 55%); border: 1px solid rgba(167,123,255,.4); box-shadow: 0 30px 60px -30px #000; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform var(--t-mid) var(--ease), border-color var(--t-fast), box-shadow var(--t-mid); animation: deal .42s var(--ease) both; animation-delay: calc(var(--i, 0) * 70ms); font: inherit; }
button.hero { cursor: pointer; }
button.hero:hover { border-color: var(--paper); box-shadow: 0 0 0 1px var(--violet-hot), 0 0 40px -10px var(--violet-hot), 0 30px 60px -30px #000; transform: translateY(-8px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
.hero-art { margin: 0; font-size: calc(7.5px * var(--fs)); line-height: 1; color: rgba(167,123,255,.35); text-align: center; border: 1px solid var(--line); background: radial-gradient(80% 80% at 50% 50%, rgba(42,29,68,.8), var(--ink-0)); padding: 6px 0; }
.hero-art .a1 { color: rgba(255,43,60,.45); } .hero-art .a2 { color: var(--violet-hot); } .hero-art .a3 { color: var(--paper); text-shadow: 0 0 8px var(--red-hot); }
.hero-k { font-size: calc(9px * var(--fs)); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.hero-name { font-family: var(--brand); font-size: calc(22px * var(--fs)); line-height: 1.05; text-transform: lowercase; }
.hero-part span { display: block; font-size: calc(9px * var(--fs)); letter-spacing: .14em; text-transform: uppercase; color: var(--violet-hot); margin-bottom: 3px; }
.hero-part.ab span { color: var(--red-hot); }
.hero-part p { margin: 0; font-size: calc(12px * var(--fs)); line-height: 1.45; color: var(--paper-2); }
.hero-part p b { color: var(--paper); font-weight: 500; }
.hero-flavor { color: var(--muted); font-size: calc(11px * var(--fs)); font-style: italic; }
.hero.h-founder { border-color: rgba(255,43,60,.45); }
.hero.h-architect { border-color: rgba(31,182,209,.45); }
.seed-row { display: flex; align-items: center; gap: 8px; font-size: calc(12px * var(--fs)); color: var(--muted); }
.seed-row input { width: 130px; background: transparent; border: 0; border-bottom: 1px solid var(--line-2); color: var(--paper); font: inherit; padding: 3px 0; outline: none; }
.dice .pips5 { display: block; width: 14px; height: 14px; border: 1.5px solid currentColor; border-radius: 3px;
  --d: radial-gradient(circle, currentColor 1.3px, transparent 1.6px);
  background: var(--d) 1px 1px / 5px 5px no-repeat, var(--d) 7px 1px / 5px 5px no-repeat, var(--d) 4px 4px / 5px 5px no-repeat, var(--d) 1px 7px / 5px 5px no-repeat, var(--d) 7px 7px / 5px 5px no-repeat; }
.dice { height: 28px; min-width: 28px; padding: 0 8px; background: var(--ink-1); border: 1px solid var(--line-2); color: var(--paper); cursor: pointer; font-size: calc(14px * var(--fs)); transition: transform var(--t-mid) var(--ease), border-color var(--t-fast); }
.dice:hover { border-color: var(--violet-hot); }
.dice.roll { animation: roll .4s var(--ease); }
@keyframes roll { 40% { transform: rotate(200deg) scale(1.15); } to { transform: rotate(360deg); } }

/* anatomy */
.anatomy { display: grid; grid-template-columns: auto 1fr; gap: 50px; align-items: center; margin-top: 10px; }
.anat-card { position: relative; margin: 30px 30px 0; }
.anat-card .co { transform: translate(0, -50%); }
.anat-card .co[style*="left:50%"] { transform: translate(-50%, 0); }
.anat-card .co { position: absolute; }
.co { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--red); color: var(--paper); font-style: normal; font-size: calc(11px * var(--fs)); font-weight: 800; box-shadow: 0 0 0 2px var(--ink-0), 0 0 12px rgba(255,43,60,.6); z-index: 10; }
.anat-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; max-width: 64ch; }
.anat-list li { display: grid; grid-template-columns: 28px 160px 1fr; gap: 10px; align-items: baseline; font-size: calc(12px * var(--fs)); color: var(--paper-2); line-height: 1.5; }
.anat-list b { color: var(--paper); font-weight: 500; }
.card-path { display: flex; align-items: stretch; gap: 8px; flex-wrap: wrap; }
.card-path > div { flex: 1 1 150px; padding: 12px; border: 1px solid var(--line-2); background: var(--ink-1); font-size: calc(11px * var(--fs)); color: var(--paper-2); line-height: 1.45; animation: deal .36s var(--ease) both; animation-delay: calc(var(--i, 0) * 60ms); }
.card-path b { display: block; font-family: var(--brand); color: var(--paper); font-size: calc(14px * var(--fs)); margin-bottom: 4px; text-transform: lowercase; }
.card-path > i { align-self: center; color: var(--red-hot); font-style: normal; }
.pm-wrap { overflow: auto; border: 1px solid var(--line); }
table.pm { width: 100%; border-collapse: collapse; font-size: calc(11.5px * var(--fs)); }
table.pm th { position: sticky; top: 0; background: var(--ink-2); text-align: left; font-weight: 400; font-size: calc(9px * var(--fs)); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding: 7px 8px; }
table.pm td { padding: 6px 8px; border-top: 1px solid var(--line); color: var(--paper-2); white-space: nowrap; }
table.pm td:first-child { color: var(--paper); }
table.pm tr:hover td { background: rgba(167,123,255,.06); }
table.pm td.l1 { color: var(--paper); } table.pm td.l2 { color: var(--violet-hot); } table.pm td.l3 { color: var(--red-hot); }

/* influence grid: card × station and meter */
table.ig { border-collapse: collapse; font-size: calc(11px * var(--fs)); width: 100%; }
table.ig th { font-weight: 500; color: var(--muted); padding: 6px 4px; text-align: center; white-space: nowrap; border-bottom: 1px solid var(--line-2); }
table.ig th[class^="st-"] { color: var(--stc); }
table.ig td { border-bottom: 1px solid var(--line); padding: 4px; text-align: center; height: 22px; }
table.ig td:first-child { text-align: left; white-space: nowrap; color: var(--paper); }
table.ig td:first-child small { margin-left: 6px; color: var(--muted); font-size: calc(9px * var(--fs)); }
table.ig td:first-child small.l2 { color: var(--violet-hot); }
table.ig td:first-child small.l3 { color: var(--red-hot); }
table.ig tbody tr:hover td { background: rgba(167,123,255,.06); }
.ig-c i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--stc, var(--paper-2)); box-shadow: 0 0 8px var(--stc, transparent); }
.ig-c i.home { width: 12px; height: 12px; }
.ig-c.m-crisis i { background: var(--red-hot); box-shadow: 0 0 8px rgba(255,43,60,.6); }
.ig-c.m-noise i { background: transparent; border: 1.5px solid var(--red); }
.ig-c.m-energy i { background: #ff5a6a; }
.ig-c.m-trust i { background: var(--violet-hot); }
.ig-c.m-capital i { background: #e9e4d6; }
.ig-c.m-draw i { background: var(--paper-2); border-radius: 1px; }
table.ig tfoot td { color: var(--muted); border-bottom: 0; padding-top: 8px; }
.ig-key { font-size: calc(11px * var(--fs)); margin-top: 8px; }

/* title: links out to the project board and the apps showcase */
.title-links { position: absolute; left: 28px; bottom: 26px; display: flex; gap: 18px; font-size: calc(11px * var(--fs)); letter-spacing: .04em; }
.title-links a { color: var(--paper-2); text-decoration: none; border-bottom: 1px solid var(--line-2); padding-bottom: 2px; transition: color var(--t-fast), border-color var(--t-fast); }
.title-links a:hover { color: var(--paper); border-color: var(--violet-hot); }
/* a short window (the demo frame on the landing, a small laptop): the links go up into the empty corner above the title */
@media (max-height: 760px) { .title-links { bottom: auto; top: 14px; } }

/* ---------- v0.3 hero picker: roster on the left, dossier with a live portrait on the right ---------- */
.h-founder { --hc: #ff2b3c; } .h-operator { --hc: #1fb6d1; } .h-architect { --hc: #a77bff; } .h-facilitator { --hc: #e9c98f; } .h-none { --hc: #7b55ad; }
.hero-screen { justify-content: flex-start; padding-top: 5vh; gap: 18px; }
.hero-pick { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 22px; width: min(1220px, 100%); align-items: start; }
.roster { display: flex; flex-direction: column; gap: 8px; }
.ro { display: flex; align-items: center; gap: 12px; padding: 8px 12px 8px 8px; text-align: left; font: inherit; color: var(--paper-2); background: rgba(14,9,24,.7); border: 1px solid var(--line); cursor: pointer; transition: border-color var(--t-fast), background var(--t-fast), transform var(--t-mid) var(--ease); animation: deal .42s var(--ease) both; animation-delay: calc(var(--i, 0) * 60ms); }
.ro canvas { flex: none; background: radial-gradient(circle at 50% 40%, rgba(42,29,68,.9), #07040c 75%); }
.ro b { display: block; font-family: var(--brand); font-size: calc(14px * var(--fs)); color: var(--paper); text-transform: lowercase; line-height: 1.1; }
.ro small { display: block; margin-top: 3px; font-size: calc(10px * var(--fs)); letter-spacing: .08em; color: var(--muted); }
.ro:hover { transform: translateX(3px); }
.ro.on { border-color: var(--hc, var(--violet-hot)); background: linear-gradient(90deg, color-mix(in srgb, var(--hc) 18%, transparent), rgba(14,9,24,.7)); }
.ro.on small { color: var(--hc); }
.dossier { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 26px; padding: 22px 24px; min-height: 380px; border: 1px solid color-mix(in srgb, var(--hc) 45%, transparent); background: linear-gradient(135deg, color-mix(in srgb, var(--hc) 9%, rgba(14,9,24,.85)), rgba(7,4,12,.92) 60%); box-shadow: 0 40px 80px -40px #000, inset 0 0 0 1px rgba(255,255,255,.02); animation: dossier-in .32s var(--ease) both; }
.dossier::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--hc); box-shadow: 0 0 18px var(--hc); }
@keyframes dossier-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.hd-portrait { position: relative; align-self: start; padding: 10px; border: 1px solid var(--line); background: radial-gradient(70% 60% at 50% 38%, color-mix(in srgb, var(--hc) 16%, #120a20), #05030a 80%); }
.hd-portrait canvas { display: block; }
.hd-role { position: absolute; left: 10px; top: 10px; padding: 3px 8px; font-size: calc(10px * var(--fs)); letter-spacing: .16em; text-transform: uppercase; color: #07040c; background: var(--hc); }
.hd-diff { position: absolute; right: 10px; bottom: 8px; font-size: calc(10px * var(--fs)); letter-spacing: .1em; color: var(--hc); }
.hd-body { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.hd-name { margin: 0; font-family: var(--brand); font-size: clamp(26px, 2.6vw, 38px); line-height: 1; text-transform: lowercase; color: var(--paper); text-shadow: 2px 0 0 color-mix(in srgb, var(--hc) 55%, transparent); }
.hd-home { font-size: calc(11px * var(--fs)); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.hd-home i { font-style: normal; color: var(--stc); margin-left: 6px; text-transform: none; letter-spacing: 0; }
.hd-bio { margin: 0; font-size: calc(13px * var(--fs)); line-height: 1.55; color: var(--paper-2); max-width: 60ch; }
.hd-style { margin: 0; font-size: calc(12px * var(--fs)); color: var(--hc); }
.hd-sw { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.hd-sw ul { margin: 0; padding: 0; list-style: none; font-size: calc(11.5px * var(--fs)); line-height: 1.45; color: var(--paper-2); }
.hd-sw li { padding-left: 16px; position: relative; margin-bottom: 3px; }
.hd-plus li::before { content: '+'; position: absolute; left: 0; color: var(--hc); }
.hd-minus li::before { content: '−'; position: absolute; left: 0; color: var(--muted); }
.hd-quote { margin: 4px 0 0; padding-left: 12px; border-left: 2px solid var(--hc); font-size: calc(12px * var(--fs)); font-style: italic; color: var(--muted); }
.hd-sig { display: flex; flex-direction: column; gap: 8px; align-items: center; }
.title-foot .btn.primary { border-color: var(--red-hot); color: var(--paper); }
/* narrower: the signature card goes under the portrait, the text keeps the whole right column */
@media (max-width: 1100px) { .dossier { grid-template-columns: auto minmax(0, 1fr); } .hd-body { grid-row: 1 / span 2; grid-column: 2; } .hd-sig { grid-column: 1; grid-row: 2; flex-direction: row; align-items: flex-start; } }
@media (max-width: 1100px) and (max-height: 820px) { .dossier .hd-portrait canvas { max-height: 180px; } .hs-setup { gap: 4px 18px; } .hs-setup .ladder-row .lk { display: none; } .hd-bio { -webkit-line-clamp: 4; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; } }
@media (max-width: 760px) { .hero-pick { grid-template-columns: 1fr; } .roster { flex-direction: row; overflow-x: auto; } .ro small { display: none; } .dossier { grid-template-columns: 1fr; } }
.hero .hero-portrait { position: relative; display: grid; place-items: center; padding: 6px 0; border: 1px solid var(--line); background: radial-gradient(70% 60% at 50% 40%, color-mix(in srgb, var(--hc, #7b55ad) 16%, #120a20), #05030a 80%); }
.hero .hero-k i { font-style: normal; color: var(--stc); letter-spacing: 0; text-transform: none; }
.hero .hero-style { margin: 0; font-size: calc(11.5px * var(--fs)); color: var(--hc, var(--violet-hot)); }
.hero { border-color: color-mix(in srgb, var(--hc, #a77bff) 45%, transparent); }
.hero-screen { overflow-y: auto; padding-bottom: 28px; }
.hero-screen h1 { font-size: clamp(28px, 3.4vw, 50px); }
.dossier { min-height: 0; }
/* the deck and the pressure ladder share one line under the dossier */
.hs-setup { width: min(1220px, 100%); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 34px; }
.hs-setup .deck-row, .hs-setup .ladder-row { margin: 0; }
/* a short screen (the site under its header, a 13-inch laptop): a slimmer roster and dossier, so the plots and the start fit */
@media (max-height: 940px) {
  .hero-screen { gap: 12px; padding-top: 2.5vh; }
  .hero-screen h1 { font-size: clamp(26px, 2.8vw, 40px); }
  .hd-portrait canvas { max-height: 250px; width: auto !important; }
  .roster { gap: 6px; }
  .ro { padding: 5px 10px 5px 5px; }
  .ro canvas { width: 46px !important; height: auto !important; }
  .dossier { padding: 16px 20px; gap: 20px; }
  .hd-body { gap: 7px; }
  .hd-bio { font-size: calc(12.5px * var(--fs)); line-height: 1.5; }
  .hd-quote { display: none; }
  .plot-card { padding: 9px 14px 9px 9px; }
  .plot-card .pc-art { width: 96px; height: 58px; }
  .plot-card .pc-art pre { font-size: 3.4px; }
  .pc-co { -webkit-line-clamp: 1; }
  .pc-log { -webkit-line-clamp: 3; }
}
/* the card's levels in the full view: steps already taken are dimmed */
.pg-v .lv-step { display: inline-block; margin: 1px 0; }
.pg-v .lv-step i { font-style: normal; font-size: calc(10px * var(--fs)); color: #bfa6ff; margin-right: 4px; letter-spacing: .06em; }
.pg-v .lv-step.done { opacity: .5; }

/* the world tab: the act's world on the left, the five sides on the right */
.world-tab { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 36px; max-width: 1180px; }
.world-tab h2 { font-family: var(--brand); font-size: calc(30px * var(--fs)); margin: 6px 0 10px; color: var(--paper); }
.world-tab .lede { font-size: calc(15px * var(--fs)); color: var(--paper); }
.world-tab p { font-size: calc(13px * var(--fs)); line-height: 1.65; max-width: 62ch; }
.wt-heard { margin-top: 22px; color: var(--muted); font-size: calc(12px * var(--fs)); }
.wt-heard b { color: var(--violet-hot, #a77bff); font-family: var(--brand); font-size: calc(18px * var(--fs)); }
.wt-fac { display: grid; gap: 8px; align-content: start; }
.wt-fac .fac { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-left: 3px solid var(--fc, #a77bff); background: rgba(12, 10, 17, .55); }
.wt-fac .fac b { color: var(--fc, #a77bff); font-size: calc(11px * var(--fs)); letter-spacing: .1em; text-transform: uppercase; font-weight: 500; }
.wt-fac .fac p { margin: 0; font-size: calc(12px * var(--fs)); line-height: 1.5; }
.wt-fac .f-team { --fc: #ff2b3c; } .wt-fac .f-members { --fc: #1fb6d1; } .wt-fac .f-partners { --fc: #ffb02e; } .wt-fac .f-agents { --fc: #a77bff; } .wt-fac .f-market { --fc: #e9e4d6; }
@media (max-width: 900px) { .world-tab { grid-template-columns: 1fr; } .wt-fac .fac { grid-template-columns: 1fr; gap: 4px; } }

/* the cards tab in sections: each station's processes under a line about what the station is for */
.codex-sec { margin: 22px 0 10px; padding: 8px 12px; border-left: 3px solid var(--stc, var(--paper-2)); background: linear-gradient(90deg, color-mix(in srgb, var(--stc, var(--paper-2)) 14%, transparent), transparent 70%); }
.codex-sec .cs-h { display: flex; align-items: baseline; gap: 8px; font-size: calc(14px * var(--fs)); color: var(--paper); }
.codex-sec .cs-h b { color: var(--stc, var(--paper)); font-weight: 700; }
.codex-sec .cs-n { margin-left: auto; color: var(--muted); font-size: calc(11px * var(--fs)); }
.codex-sec .cs-d { font-size: calc(11.5px * var(--fs)); color: var(--paper-2); margin-top: 2px; }
.codex-sec.k-action { --stc: var(--paper-2); }
.codex-sec.k-status { --stc: #6b6675; }

/* the kinds of cards: rule and story (kinds.js) */
.codex-kinds { margin: 4px 0 14px; border: 1px solid var(--line-2); padding: 8px 12px; }
.codex-kinds summary { cursor: pointer; color: var(--paper-2); letter-spacing: .04em; }
.ck-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px 18px; margin-top: 10px; }
.ck { display: flex; flex-direction: column; gap: 3px; font-size: calc(12px * var(--fs)); line-height: 1.45; }
.ck b { color: var(--paper); } .ck span { color: var(--paper-2); } .ck i { color: var(--muted); }
.ck .ki-g { color: #bfa6ff; }
/* the tool's reading inside its codex card: the «у тебя» badge rule must not move the row labels */
.tool .tool-help { margin: 2px 0 4px; }
.tool .tool-help i { position: static; font-size: inherit; letter-spacing: .04em; text-transform: lowercase; color: var(--violet-hot); }