915 lines
72 KiB
CSS
915 lines
72 KiB
CSS
* { box-sizing: border-box; }
|
|
|
|
:root {
|
|
--ink-950: #182127;
|
|
--ink-840: #26343a;
|
|
--ink-700: #425159;
|
|
--mist-050: #f3f6f2;
|
|
--mist-120: #e8eeeb;
|
|
--mist-180: #d7e0dd;
|
|
--white: #fff;
|
|
--route-teal: #13818a;
|
|
--work-gold: #d6a72e;
|
|
--safe-jade: #27845e;
|
|
--danger-coral: #c94e52;
|
|
--uncertain-cobalt: #3969a8;
|
|
--neutral-silver: #88969b;
|
|
--focus-white: #fff;
|
|
--line: rgba(24, 33, 39, 0.17);
|
|
--line-strong: rgba(24, 33, 39, 0.36);
|
|
--shadow: 0 14px 34px rgba(24, 33, 39, 0.14);
|
|
--sidebar: 264px;
|
|
--topbar: 58px;
|
|
color-scheme: light;
|
|
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
|
font-synthesis: none;
|
|
}
|
|
|
|
html { min-width: 320px; background: var(--mist-050); }
|
|
body { margin: 0; color: var(--ink-950); background: var(--mist-050); letter-spacing: 0; }
|
|
body[data-text-scale="115"] { font-size: 115%; }
|
|
body[data-text-scale="130"] { font-size: 130%; }
|
|
button, input { font: inherit; letter-spacing: 0; }
|
|
button { cursor: pointer; }
|
|
button:focus-visible, input:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--uncertain-cobalt); outline-offset: 2px; }
|
|
button:disabled { cursor: not-allowed; opacity: 0.48; }
|
|
img { display: block; max-width: 100%; }
|
|
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
|
|
.skip-link { position: fixed; z-index: 100; left: 12px; top: -60px; padding: 10px 14px; color: var(--white); background: var(--ink-950); }
|
|
.skip-link:focus { top: 12px; }
|
|
|
|
.app-shell { min-height: 100vh; display: grid; grid-template-columns: var(--sidebar) minmax(0, 1fr); }
|
|
.sidebar { position: sticky; top: 0; z-index: 40; height: 100vh; display: flex; flex-direction: column; color: var(--mist-050); background: var(--ink-950); border-right: 1px solid #33444a; }
|
|
.brand-block { min-height: 84px; display: grid; grid-template-columns: 44px 1fr; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid rgba(255,255,255,.13); }
|
|
.brand-mark { width: 42px; height: 42px; display: grid; place-items: center; color: var(--ink-950); font-size: 14px; font-weight: 900; background: var(--work-gold); border: 2px solid #f0d980; border-radius: 4px; }
|
|
.brand-block strong, .brand-block span { display: block; }
|
|
.brand-block strong { font-size: 14px; }
|
|
.brand-block div > span { margin-top: 4px; color: #aebdc1; font-size: 11px; }
|
|
.primary-nav { display: grid; gap: 2px; padding: 16px 10px; }
|
|
.nav-item { min-height: 52px; display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 10px; padding: 9px 12px; color: #b9c6c9; text-align: left; background: transparent; border: 1px solid transparent; border-radius: 4px; }
|
|
.nav-item:hover { color: var(--white); background: rgba(255,255,255,.06); }
|
|
.nav-item.is-active { color: var(--white); background: #304047; border-color: #52676e; box-shadow: inset 4px 0 var(--work-gold); }
|
|
.nav-item > span { color: var(--work-gold); font-size: 11px; font-weight: 900; }
|
|
.nav-item b { font-size: 13px; }
|
|
.nav-item em { min-width: 28px; padding: 3px 5px; color: #c8d3d5; font-size: 10px; font-style: normal; text-align: center; border: 1px solid #52646a; border-radius: 3px; }
|
|
.sidebar-footer { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 15px 18px; border-top: 1px solid rgba(255,255,255,.13); }
|
|
.sidebar-footer strong, .sidebar-footer span { display: block; }
|
|
.sidebar-footer strong { font-size: 10px; }
|
|
.sidebar-footer div span { margin-top: 3px; color: #9dafb4; font-size: 10px; }
|
|
.status-dot { width: 9px; height: 9px; background: var(--work-gold); border-radius: 50%; box-shadow: 0 0 0 4px rgba(214,167,46,.15); }
|
|
|
|
.page-shell { min-width: 0; }
|
|
.topbar { position: sticky; top: 0; z-index: 30; min-height: var(--topbar); display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 8px 22px; background: rgba(255,255,255,.96); border-bottom: 1px solid var(--line); backdrop-filter: blur(12px); }
|
|
.breadcrumbs { min-width: 0; display: flex; align-items: center; gap: 9px; font-size: 12px; }
|
|
.breadcrumbs span { color: var(--ink-700); white-space: nowrap; }
|
|
.breadcrumbs b { color: var(--neutral-silver); }
|
|
.breadcrumbs strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
.top-actions { display: flex; align-items: center; gap: 8px; }
|
|
.icon-button { width: 40px; height: 40px; display: inline-grid; place-items: center; color: var(--ink-950); font-size: 19px; background: var(--white); border: 1px solid var(--line-strong); border-radius: 4px; }
|
|
.icon-button:hover { background: var(--mist-120); }
|
|
.locale-control { display: flex; padding: 2px; background: var(--mist-120); border: 1px solid var(--line); border-radius: 4px; }
|
|
.locale-control button { min-height: 32px; padding: 4px 9px; color: var(--ink-700); background: transparent; border: 0; border-radius: 2px; }
|
|
.locale-control button.is-active { color: var(--white); background: var(--ink-840); }
|
|
.evidence-badge { padding: 6px 9px; color: #7d5410; font-size: 10px; font-weight: 800; background: #fff4ce; border: 1px solid #e4c969; border-radius: 3px; }
|
|
.mobile-only { display: none; }
|
|
|
|
main { min-width: 0; padding: 24px; }
|
|
.view { width: min(100%, 1500px); margin: 0 auto; }
|
|
.view-heading { min-height: 78px; display: flex; align-items: start; justify-content: space-between; gap: 24px; margin-bottom: 18px; }
|
|
.view-heading h1 { margin: 4px 0 5px; font-size: 28px; line-height: 1.18; }
|
|
.view-heading p { max-width: 760px; margin: 0; color: var(--ink-700); font-size: 13px; line-height: 1.5; }
|
|
.eyebrow, .stage-kicker { display: block; color: var(--route-teal); font-size: 10px; font-weight: 900; text-transform: uppercase; }
|
|
.heading-badges { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
|
|
.heading-badges span { padding: 6px 8px; color: var(--ink-700); font-size: 10px; font-weight: 800; background: var(--white); border: 1px solid var(--line); border-radius: 3px; }
|
|
.loading-state, .empty-state { padding: 48px; text-align: center; background: var(--white); border: 1px solid var(--line); }
|
|
|
|
.stage-wrap { width: min(100%, 1240px); margin: 0 auto; background: #0c1519; box-shadow: var(--shadow); }
|
|
.game-stage { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; color: var(--mist-050); background: #23353b; container-name: stage; container-type: inline-size; isolation: isolate; }
|
|
.stage-art { position: absolute; inset: 0; z-index: -3; width: 100%; height: 100%; object-fit: cover; }
|
|
.stage-wash { position: absolute; inset: 0; z-index: -2; background: linear-gradient(90deg, rgba(9,20,24,.84) 0%, rgba(18,34,38,.42) 46%, rgba(8,16,20,.76) 100%); }
|
|
.stage-body { position: absolute; inset: 48px 0 0; }
|
|
.game-hud { position: absolute; z-index: 7; inset: 0 0 auto; height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 10px; background: rgba(18,33,38,.92); border-bottom: 1px solid rgba(255,255,255,.22); }
|
|
.hud-left, .hud-right { display: flex; align-items: center; gap: 8px; min-width: 0; }
|
|
.hud-left strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
|
|
.stage-icon { width: 30px; height: 30px; display: inline-grid; flex: 0 0 auto; place-items: center; color: inherit; font-size: 13px; font-weight: 900; background: rgba(243,246,242,.11); border: 1px solid rgba(255,255,255,.34); border-radius: 3px; }
|
|
.stage-icon:hover { background: rgba(243,246,242,.2); }
|
|
.screen-stamp { padding: 4px 6px; color: #1c2c32; font-size: 9px; font-weight: 900; background: var(--work-gold); border-radius: 2px; }
|
|
.resource, .save-state { font-size: 9px; white-space: nowrap; }
|
|
.resource { padding: 4px 6px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); border-radius: 2px; }
|
|
.save-state { color: #a9e0c3; }
|
|
.concept-label { position: absolute; z-index: 8; left: 8px; bottom: 7px; padding: 3px 5px; color: #2c363a; font-size: 8px; font-weight: 800; background: rgba(255,255,255,.88); border-left: 3px solid var(--work-gold); }
|
|
.action-dock { position: absolute; z-index: 6; right: 12px; bottom: 10px; display: flex; align-items: center; gap: 7px; }
|
|
.stage-primary, .stage-secondary { min-height: 34px; padding: 7px 12px; font-size: 10px; font-weight: 900; border-radius: 3px; }
|
|
.stage-primary { color: var(--ink-950); background: var(--work-gold); border: 1px solid #f1d067; box-shadow: inset 0 -3px rgba(117,76,0,.28); }
|
|
.stage-secondary { color: var(--mist-050); background: rgba(24,33,39,.88); border: 1px solid rgba(255,255,255,.36); }
|
|
.sheet-row { min-height: 30px; display: flex; align-items: center; padding: 6px 8px; color: var(--ink-950); font-size: 10px; background: var(--mist-050); border-bottom: 1px solid var(--line); }
|
|
|
|
/* Opening company */
|
|
.opening-composition, .creation-review, .contract-composition { height: 100%; padding: 2.2% 3.5% 5%; }
|
|
.opening-title { max-width: 54%; }
|
|
.opening-title h2, .contract-sheet h3, .creation-review h2 { margin: 3px 0; font-size: 20px; line-height: 1.15; }
|
|
.opening-title p { margin: 0; color: #d3e0e1; font-size: 10px; }
|
|
.offer-grid { height: 58%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
|
|
.recruit-offer { min-width: 0; display: grid; grid-template-rows: minmax(0, .9fr) auto auto; color: var(--ink-950); background: rgba(243,246,242,.94); border: 2px solid transparent; border-radius: 5px; overflow: hidden; }
|
|
.recruit-offer.is-selected { border-color: var(--work-gold); box-shadow: inset 0 0 0 2px var(--ink-950); }
|
|
.offer-figure { min-height: 0; display: grid; place-items: center; position: relative; background: linear-gradient(150deg, #cfe5df, #7eb5b2); }
|
|
.offer-figure > span { width: 48px; height: 60px; display: grid; place-items: center; color: var(--white); font-size: 14px; font-weight: 900; background: var(--ink-840); border: 4px solid #60757a; border-radius: 45% 45% 18% 18%; }
|
|
.offer-figure small { position: absolute; left: 6px; bottom: 4px; font-size: 8px; font-weight: 900; }
|
|
.offer-copy { min-width: 0; padding: 5px 7px; }
|
|
.offer-copy strong { display: block; overflow-wrap: anywhere; font-size: 11px; }
|
|
.profession-seal { display: inline-block; margin-top: 2px; padding: 2px 4px; color: var(--white); font-size: 8px; font-weight: 800; background: var(--route-teal); border-radius: 2px; }
|
|
.offer-copy p { margin: 3px 0 0; color: var(--ink-700); font-size: 8px; line-height: 1.25; }
|
|
.offer-actions { min-height: 29px; display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 3px; padding: 4px 5px; border-top: 1px solid var(--line); }
|
|
.offer-actions > span { font-size: 7px; font-weight: 800; }
|
|
.offer-actions > button:not(.stage-icon) { min-height: 23px; padding: 3px 5px; color: var(--ink-950); font-size: 8px; font-weight: 900; background: var(--white); border: 1px solid var(--line-strong); border-radius: 2px; }
|
|
.offer-actions .stage-icon { width: 23px; height: 23px; color: var(--ink-950); background: var(--mist-120); border-color: var(--line); }
|
|
.opening-footer { min-height: 41px; display: flex; align-items: center; justify-content: flex-end; gap: 7px; margin-top: 8px; }
|
|
.selection-count { margin-right: auto; display: flex; align-items: center; gap: 8px; }
|
|
.selection-count span { font-size: 9px; font-weight: 800; }
|
|
.selection-count strong { min-width: 46px; padding: 6px 8px; color: var(--ink-950); font-size: 14px; text-align: center; background: var(--work-gold); border-radius: 3px; }
|
|
.contract-composition { display: grid; grid-template-columns: 1.15fr .85fr; align-items: center; gap: 5%; }
|
|
.region-signal { align-self: end; padding-bottom: 10%; }
|
|
.region-signal span { display: inline-block; padding: 4px 6px; color: var(--ink-950); font-size: 9px; font-weight: 900; background: var(--work-gold); }
|
|
.region-signal h2 { margin: 5px 0; font-size: 27px; }
|
|
.region-signal p { max-width: 390px; margin: 0; font-size: 11px; }
|
|
.contract-sheet, .creation-review, .battle-sheet, .outcome-sheet { color: var(--ink-950); background: rgba(243,246,242,.96); border-left: 5px solid var(--route-teal); box-shadow: var(--shadow); }
|
|
.contract-sheet { padding: 16px; }
|
|
.contract-sheet dl { margin: 9px 0; }
|
|
.contract-sheet dl > div { display: grid; grid-template-columns: .8fr 1.2fr; gap: 8px; padding: 5px 0; font-size: 9px; border-bottom: 1px solid var(--line); }
|
|
.contract-sheet dt { color: var(--ink-700); }
|
|
.contract-sheet dd { margin: 0; font-weight: 800; }
|
|
.creation-review { width: 76%; min-height: 76%; margin: 0 auto; padding: 14px 18px; }
|
|
.chosen-pair { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 8px 0; }
|
|
.recruit-marker { min-width: 0; display: flex; align-items: center; gap: 7px; padding: 6px; color: var(--ink-950); background: var(--mist-120); border: 1px solid var(--line); border-radius: 4px; }
|
|
.recruit-marker.is-selected { border-color: var(--work-gold); }
|
|
.recruit-silhouette, .large-figure { width: 38px; height: 45px; display: grid; flex: 0 0 auto; place-items: center; color: var(--white); font-size: 10px; font-weight: 900; background: var(--ink-840); border: 3px solid var(--route-teal); border-radius: 45% 45% 18% 18%; }
|
|
.recruit-marker small, .recruit-marker strong, .recruit-marker em { display: block; }
|
|
.recruit-marker small { font-size: 7px; }
|
|
.recruit-marker strong { font-size: 10px; }
|
|
.recruit-marker em { color: var(--ink-700); font-size: 8px; font-style: normal; }
|
|
.unchosen-strip { display: grid; grid-template-columns: repeat(2, 1fr); gap: 5px; }
|
|
.unchosen-strip span { display: grid; grid-template-columns: auto 1fr auto; gap: 4px; padding: 4px 6px; color: var(--ink-700); font-size: 8px; border: 1px dashed var(--neutral-silver); }
|
|
.unchosen-strip em { font-style: normal; font-weight: 900; }
|
|
.creation-ledger, .operation-state, .receipt-state { margin-top: 8px; padding: 7px 9px; background: var(--white); border: 1px solid var(--line); }
|
|
.creation-ledger { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 8px; }
|
|
.operation-state, .receipt-state { display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; align-items: center; }
|
|
.operation-state strong, .receipt-state strong { font-size: 11px; }
|
|
.operation-state small, .receipt-state small { grid-column: 2; font-size: 8px; }
|
|
.operation-spinner { width: 18px; height: 18px; grid-row: 1 / 3; border: 3px solid var(--mist-180); border-top-color: var(--route-teal); border-radius: 50%; animation: spin .9s linear infinite; }
|
|
.receipt-state b { grid-row: 1 / 3; padding: 8px; color: var(--white); font-size: 9px; background: var(--safe-jade); }
|
|
.receipt-state strong i { color: var(--neutral-silver); font-style: normal; }
|
|
.review-actions { display: flex; justify-content: flex-end; gap: 7px; margin-top: 8px; }
|
|
|
|
/* Market and roster */
|
|
.market-composition, .market-review, .item-review, .roster-composition, .dismissal-review { height: 100%; position: relative; padding: 2.4% 3.2% 5.2%; }
|
|
.market-heading { display: flex; justify-content: space-between; align-items: end; gap: 12px; }
|
|
.market-heading h2 { margin: 3px 0 0; font-size: 19px; }
|
|
.company-meter { display: flex; align-items: baseline; gap: 5px; padding: 6px 9px; background: rgba(24,33,39,.88); border: 1px solid rgba(255,255,255,.3); }
|
|
.company-meter span { font-size: 8px; }
|
|
.company-meter strong { color: var(--work-gold); font-size: 16px; }
|
|
.company-meter i { color: var(--neutral-silver); }
|
|
.market-tabs { height: 29px; display: flex; gap: 1px; margin-top: 8px; }
|
|
.market-tabs button { padding: 5px 11px; color: #dce6e5; font-size: 8px; font-weight: 800; background: rgba(24,33,39,.84); border: 0; border-bottom: 3px solid transparent; }
|
|
.market-tabs button.is-active { color: var(--white); border-bottom-color: var(--work-gold); }
|
|
.market-surface { height: 61%; display: grid; grid-template-columns: 1.2fr .8fr; gap: 8px; }
|
|
.market-list { min-height: 0; display: grid; gap: 3px; padding: 7px; background: rgba(232,238,235,.94); }
|
|
.market-row { min-height: 0; display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 7px; padding: 5px 7px; color: var(--ink-950); text-align: left; background: var(--white); border: 1px solid var(--line); border-left: 4px solid transparent; }
|
|
.market-row.is-focused { border-left-color: var(--work-gold); box-shadow: inset 0 0 0 1px var(--ink-950); }
|
|
.row-avatar { width: 31px; height: 35px; display: grid; place-items: center; color: var(--white); font-size: 9px; font-weight: 900; background: var(--ink-840); border-radius: 40% 40% 15% 15%; }
|
|
.market-row small, .market-row strong, .market-row em { display: block; }
|
|
.market-row small { color: var(--route-teal); font-size: 7px; }
|
|
.market-row strong { font-size: 9px; }
|
|
.market-row em { color: var(--ink-700); font-size: 7px; font-style: normal; }
|
|
.market-row > b { font-size: 13px; }
|
|
.market-inspect { padding: 10px; color: var(--ink-950); background: rgba(255,255,255,.95); border-top: 4px solid var(--work-gold); }
|
|
.market-inspect h3 { margin: 3px 0; font-size: 15px; }
|
|
.market-inspect p { margin: 4px 0; font-size: 8px; line-height: 1.35; }
|
|
.fit-read { display: flex; justify-content: space-between; padding: 4px 0; font-size: 8px; border-bottom: 1px solid var(--line); }
|
|
.market-inspect .stage-primary { width: 100%; margin-top: 8px; }
|
|
.market-footer { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 5px; font-size: 8px; }
|
|
.market-footer span { margin-right: auto; }
|
|
.market-review { display: grid; grid-template-columns: .72fr 1.3fr .8fr; gap: 10px; align-items: stretch; }
|
|
.review-figure, .review-facts, .party-impact { min-width: 0; padding: 11px; color: var(--ink-950); background: rgba(243,246,242,.95); }
|
|
.review-figure { display: grid; place-items: center; position: relative; }
|
|
.review-figure .recruit-marker { width: 100%; }
|
|
.trait-glyph { position: absolute; right: 12px; top: 12px; color: var(--route-teal); font-size: 22px; }
|
|
.review-facts h2 { margin: 3px 0; font-size: 21px; }
|
|
.review-facts h3 { margin: 0 0 7px; color: var(--route-teal); font-size: 11px; }
|
|
.review-facts p { font-size: 9px; line-height: 1.4; }
|
|
.stat-radar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; }
|
|
.stat-radar span { padding: 5px; font-size: 7px; background: var(--mist-120); }
|
|
.stat-radar b { display: block; margin-top: 2px; font-size: 12px; }
|
|
.party-impact { border-left: 4px solid var(--work-gold); }
|
|
.party-impact > span, .party-impact > strong, .party-impact > small { display: block; }
|
|
.party-impact > span { font-size: 8px; font-weight: 900; }
|
|
.party-impact > strong { margin: 7px 0; color: var(--safe-jade); font-size: 16px; }
|
|
.party-impact p, .party-impact small { font-size: 8px; line-height: 1.35; }
|
|
.item-review { display: grid; grid-template-columns: .55fr 1.2fr .8fr; gap: 10px; color: var(--ink-950); }
|
|
.item-review > div, .item-review > aside { padding: 14px; background: rgba(243,246,242,.96); }
|
|
.item-object { display: grid; place-items: center; color: var(--route-teal); font-size: 64px; }
|
|
.item-object small { display: block; color: var(--ink-700); font-size: 9px; }
|
|
.item-review h2 { margin: 4px 0; font-size: 19px; }
|
|
.item-review p, .item-review aside { font-size: 9px; line-height: 1.4; }
|
|
.item-review aside b, .item-review aside span { display: block; margin-bottom: 5px; }
|
|
.delta-row { display: flex; justify-content: space-between; gap: 8px; padding: 6px; font-size: 8px; background: #e4f2ec; border-left: 3px solid var(--safe-jade); }
|
|
.delta-row + .delta-row { margin-top: 4px; }
|
|
.delta-row.danger { background: #f7e7e5; border-left-color: var(--danger-coral); }
|
|
.roster-composition { display: grid; grid-template-columns: 1.15fr .85fr; gap: 9px; }
|
|
.roster-list, .recruit-detail { color: var(--ink-950); background: rgba(243,246,242,.95); }
|
|
.roster-list { padding: 8px; }
|
|
.roster-row { width: 100%; min-height: 44px; display: grid; grid-template-columns: 1fr auto; align-items: center; color: var(--ink-950); background: var(--white); border: 1px solid var(--line); }
|
|
.roster-row + .roster-row { margin-top: 3px; }
|
|
.roster-row.is-focused { box-shadow: inset 4px 0 var(--work-gold); }
|
|
.roster-row .recruit-marker { border: 0; background: transparent; }
|
|
.roster-row > span { padding-right: 8px; font-size: 8px; }
|
|
.recruit-detail { padding: 13px; border-left: 5px solid var(--route-teal); }
|
|
.recruit-detail .large-figure { width: 58px; height: 72px; }
|
|
.recruit-detail h2 { margin: 5px 0; font-size: 18px; }
|
|
.recruit-detail p { margin: 0 0 7px; font-size: 9px; }
|
|
.detail-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; }
|
|
.detail-grid span { padding: 5px; font-size: 7px; background: var(--mist-120); }
|
|
.detail-grid b { display: block; margin-top: 2px; font-size: 9px; }
|
|
.recruit-detail > button { margin: 8px 4px 0 0; }
|
|
.dismissal-review { display: grid; grid-template-columns: .7fr 1.3fr; gap: 10px; }
|
|
.dismissal-review > div { padding: 15px; color: var(--ink-950); background: rgba(243,246,242,.96); }
|
|
.dismissal-review h2 { margin: 4px 0 9px; font-size: 20px; }
|
|
.dismissal-review p { font-size: 9px; }
|
|
|
|
/* Equipment, party and artifacts */
|
|
.equipment-composition { height: 100%; display: grid; grid-template-columns: .9fr .62fr 1fr; gap: 8px; padding: 2.5% 3.2% 5%; color: var(--ink-950); }
|
|
.equipment-list, .equipment-wearer, .equipment-delta { min-width: 0; padding: 9px; background: rgba(243,246,242,.95); }
|
|
.equipment-list { display: grid; align-content: start; gap: 3px; }
|
|
.equipment-row { min-height: 43px; display: flex; align-items: center; gap: 8px; color: var(--ink-950); text-align: left; background: var(--white); border: 1px solid var(--line); }
|
|
.equipment-row.is-focused { border-left: 4px solid var(--work-gold); }
|
|
.equipment-row > span { width: 36px; font-size: 20px; text-align: center; }
|
|
.equipment-row strong, .equipment-row small { display: block; }
|
|
.equipment-row strong { font-size: 8px; }
|
|
.equipment-row small { font-size: 7px; }
|
|
.equipment-wearer { display: grid; place-items: center; align-content: center; text-align: center; }
|
|
.equipment-wearer .large-figure { width: 68px; height: 86px; font-size: 16px; }
|
|
.equipment-wearer strong { margin-top: 5px; font-size: 12px; }
|
|
.equipment-wearer small { font-size: 8px; }
|
|
.equipped-slot { margin-top: 8px; padding: 5px; font-size: 7px; background: var(--mist-120); }
|
|
.equipment-delta { border-top: 4px solid var(--safe-jade); }
|
|
.equipment-delta h2 { margin: 4px 0 8px; font-size: 14px; }
|
|
.equipment-delta p { font-size: 8px; line-height: 1.35; }
|
|
.equipment-delta .stage-primary { width: 100%; }
|
|
.party-composition { height: 100%; position: relative; padding: 2.5% 3.2% 5%; }
|
|
.party-title h2 { margin: 3px 0; font-size: 19px; }
|
|
.party-title h2 i { color: var(--work-gold); font-style: normal; }
|
|
.party-title p { margin: 0; font-size: 9px; }
|
|
.relation-layer { position: absolute; left: 16%; right: 23%; top: 27%; height: 32px; }
|
|
.relation { position: absolute; padding: 3px 6px; font-size: 7px; font-weight: 900; background: var(--mist-050); border-radius: 2px; }
|
|
.relation.protection { left: 40%; color: var(--route-teal); border-bottom: 3px solid var(--route-teal); }
|
|
.relation.reach { left: 5%; top: 20px; color: var(--uncertain-cobalt); border-bottom: 3px dashed var(--uncertain-cobalt); }
|
|
.party-cord { position: absolute; left: 6%; right: 6%; top: 40%; height: 105px; display: flex; align-items: center; justify-content: center; gap: 12px; }
|
|
.party-cord::before { content: ""; position: absolute; left: 7%; right: 7%; top: 61px; height: 3px; background: #d7e0dd; border: 1px solid var(--ink-950); }
|
|
.party-actor { position: relative; z-index: 2; min-width: 74px; height: 93px; display: grid; grid-template-columns: 1fr auto; grid-template-rows: 1fr auto auto; align-items: end; padding: 4px; color: var(--ink-950); background: rgba(243,246,242,.94); border: 2px solid var(--route-teal); border-radius: 4px; }
|
|
.party-actor.is-front { border-color: var(--danger-coral); }
|
|
.actor-figure { grid-column: 1 / 3; justify-self: center; align-self: center; width: 38px; height: 46px; display: grid; place-items: center; color: var(--white); font-size: 9px; font-weight: 900; background: var(--ink-840); border: 3px solid #739196; border-radius: 46% 46% 16% 16%; }
|
|
.party-actor > b { width: 20px; height: 20px; display: grid; place-items: center; color: var(--white); font-size: 9px; background: var(--ink-950); border-radius: 2px; }
|
|
.party-actor > strong { justify-self: end; font-size: 8px; }
|
|
.party-actor > em { grid-column: 1 / 3; color: var(--ink-700); font-size: 7px; font-style: normal; }
|
|
.cord-label { z-index: 2; width: 62px; font-size: 8px; font-weight: 900; text-align: center; }
|
|
.cord-label.rear { color: #b7e6e0; }
|
|
.cord-label.front { color: #ffc1bc; }
|
|
.party-read { position: absolute; right: 3.2%; top: 20%; width: 24%; display: grid; gap: 3px; padding: 8px; color: var(--ink-950); background: rgba(243,246,242,.96); border-left: 4px solid var(--work-gold); }
|
|
.party-read strong { font-size: 9px; }
|
|
.party-read span { font-size: 7px; }
|
|
.party-tools { position: absolute; right: 3.2%; bottom: 8%; display: flex; gap: 6px; }
|
|
.artifact-composition { height: 100%; display: grid; grid-template-columns: 1.25fr .75fr; grid-template-rows: auto 1fr; gap: 8px; padding: 2.5% 3.2% 5%; color: var(--ink-950); }
|
|
.artifact-heading { grid-column: 1 / 3; color: var(--mist-050); }
|
|
.artifact-heading h2 { margin: 3px 0; font-size: 19px; }
|
|
.artifact-ledger, .artifact-inspect { padding: 9px; background: rgba(243,246,242,.96); }
|
|
.artifact-row { width: 100%; min-height: 52px; display: grid; grid-template-columns: 42px 1fr auto; gap: 7px; align-items: center; color: var(--ink-950); text-align: left; background: var(--white); border: 1px solid var(--line); }
|
|
.artifact-row + .artifact-row { margin-top: 4px; }
|
|
.artifact-row.is-focused { border-left: 4px solid var(--work-gold); }
|
|
.artifact-emblem { font-size: 24px; text-align: center; }
|
|
.artifact-row small, .artifact-row strong, .artifact-row p { display: block; margin: 0; }
|
|
.artifact-row small { color: var(--route-teal); font-size: 7px; }
|
|
.artifact-row strong { font-size: 9px; }
|
|
.artifact-row p { font-size: 7px; }
|
|
.artifact-row em { font-size: 8px; font-style: normal; }
|
|
.artifact-inspect { border-top: 4px solid var(--route-teal); }
|
|
.artifact-inspect h3 { margin: 3px 0; font-size: 15px; }
|
|
.artifact-inspect p, .artifact-inspect span, .artifact-inspect small, .artifact-inspect b { display: block; margin: 5px 0; font-size: 8px; line-height: 1.4; }
|
|
|
|
/* Risk and battle */
|
|
.risk-board, .risk-review { height: 100%; padding: 2.5% 3.2% 5%; }
|
|
.risk-heading h2 { margin: 3px 0; font-size: 19px; }
|
|
.risk-options { height: 58%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 8px; }
|
|
.risk-option { min-width: 0; display: grid; align-content: start; gap: 4px; padding: 10px; color: var(--ink-950); text-align: left; background: rgba(243,246,242,.94); border: 2px solid transparent; border-radius: 4px; }
|
|
.risk-option.is-selected { border-color: var(--work-gold); }
|
|
.risk-option > span { width: 25px; height: 25px; display: grid; place-items: center; color: var(--white); font-size: 9px; background: var(--ink-840); }
|
|
.risk-option strong { font-size: 11px; }
|
|
.risk-option small, .risk-option em, .risk-option b { font-size: 8px; }
|
|
.risk-option div { margin-top: auto; display: flex; justify-content: space-between; gap: 5px; padding-top: 5px; border-top: 1px solid var(--line); }
|
|
.risk-option em { color: var(--safe-jade); font-style: normal; }
|
|
.risk-compare { min-height: 39px; display: flex; align-items: center; gap: 10px; margin-top: 7px; padding: 5px 7px; color: var(--ink-950); font-size: 8px; background: rgba(243,246,242,.94); }
|
|
.risk-compare span { font-weight: 900; }
|
|
.risk-compare .stage-primary { margin-left: auto; }
|
|
.risk-review { width: 82%; margin: 0 auto; color: var(--ink-950); background: rgba(243,246,242,.96); border-left: 5px solid var(--danger-coral); }
|
|
.risk-review h2 { margin: 4px 0; font-size: 21px; }
|
|
.threat-band { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
|
|
.threat-band span { padding: 6px; font-size: 7px; background: var(--mist-120); }
|
|
.threat-band b { display: block; margin-top: 3px; font-size: 9px; }
|
|
.mini-party-line { display: flex; justify-content: center; gap: 5px; margin: 7px 0; padding: 6px; background: var(--ink-840); }
|
|
.mini-party-line .party-actor { min-width: 48px; height: 61px; }
|
|
.mini-party-line .actor-figure { width: 24px; height: 29px; }
|
|
.mini-party-line .party-actor > em { display: none; }
|
|
.risk-review p { max-width: 70%; font-size: 8px; }
|
|
.battle-composition, .battle-static { height: 100%; position: relative; padding: 2% 2.8% 4.8%; }
|
|
.battle-objective { max-width: 50%; }
|
|
.battle-objective h2 { margin: 3px 0; font-size: 17px; }
|
|
.battle-objective p { margin: 0; font-size: 8px; }
|
|
.playback-tools { position: absolute; right: 2.8%; top: 2%; display: flex; gap: 5px; }
|
|
.speed-control { display: flex; background: rgba(24,33,39,.9); border: 1px solid rgba(255,255,255,.3); }
|
|
.speed-control button { min-width: 30px; color: #dce7e6; font-size: 8px; background: transparent; border: 0; border-right: 1px solid rgba(255,255,255,.2); }
|
|
.speed-control button.is-active { color: var(--ink-950); background: var(--work-gold); }
|
|
.battle-line { position: absolute; left: 2.8%; right: 2.8%; top: 25%; bottom: 17%; display: grid; grid-template-columns: 1.12fr .32fr .72fr; align-items: end; gap: 5px; }
|
|
.battle-line::after { content: ""; position: absolute; left: 0; right: 0; bottom: 22px; height: 4px; background: rgba(243,246,242,.84); border: 1px solid var(--ink-950); }
|
|
.allied-line { z-index: 2; display: flex; align-items: end; justify-content: flex-end; gap: 4px; }
|
|
.allied-line .party-actor { min-width: 52px; height: 76px; }
|
|
.allied-line .actor-figure { width: 30px; height: 38px; }
|
|
.allied-line .edge-label { width: 42px; color: #d4e9e7; font-size: 7px; font-weight: 900; text-align: center; }
|
|
.action-gap { z-index: 3; align-self: center; }
|
|
.forecast-arrow { display: block; padding: 5px; color: var(--white); font-size: 7px; font-weight: 900; text-align: center; background: var(--danger-coral); border: 2px solid #ffb8b3; clip-path: polygon(0 0, 90% 0, 100% 50%, 90% 100%, 0 100%); }
|
|
.enemy-line { z-index: 2; display: flex; align-items: end; gap: 5px; }
|
|
.enemy-actor { min-width: 48px; height: 64px; display: grid; place-items: center; align-content: center; color: var(--white); font-size: 11px; font-weight: 900; background: #713c3e; border: 3px solid #d27978; border-radius: 48% 48% 20% 20%; }
|
|
.enemy-actor.elite { min-width: 67px; height: 88px; background: #4c5263; border-color: #a7b4d2; }
|
|
.enemy-actor small { display: block; margin-top: 3px; font-size: 6px; font-weight: 700; text-align: center; }
|
|
.battle-event-log { position: absolute; left: 2.8%; bottom: 5%; display: flex; gap: 4px; max-width: 65%; }
|
|
.battle-event-log span, .battle-event-log b { padding: 4px 5px; font-size: 6px; background: rgba(24,33,39,.9); border: 1px solid rgba(255,255,255,.25); }
|
|
.battle-event-log b { border-color: var(--work-gold); }
|
|
.caption-line { position: absolute; right: 2.8%; bottom: 5%; max-width: 31%; padding: 5px; color: var(--ink-950); font-size: 7px; background: rgba(243,246,242,.94); }
|
|
.inspect-sheet { position: absolute; z-index: 5; right: 2.8%; top: 18%; bottom: 12%; width: 32%; padding: 10px; color: var(--ink-950); background: rgba(243,246,242,.97); border-left: 4px solid var(--uncertain-cobalt); }
|
|
.inspect-sheet h3 { margin: 4px 0; font-size: 13px; }
|
|
.inspect-sheet dl { margin: 5px 0; }
|
|
.inspect-sheet dl > div { display: grid; grid-template-columns: .7fr 1.3fr; gap: 5px; padding: 3px 0; font-size: 7px; border-bottom: 1px solid var(--line); }
|
|
.inspect-sheet dd { margin: 0; font-weight: 800; }
|
|
.inspect-sheet .stage-primary { width: 100%; }
|
|
.battle-static .battle-line { opacity: .52; }
|
|
.battle-sheet { position: absolute; z-index: 5; right: 3%; top: 7%; width: 36%; padding: 12px; }
|
|
.battle-sheet h2 { margin: 4px 0 8px; font-size: 16px; }
|
|
.battle-sheet .speed-control { min-height: 30px; margin-top: 7px; }
|
|
.battle-composition.is-paused .battle-line { opacity: .7; }
|
|
|
|
/* Outcomes */
|
|
.result-composition, .loss-composition, .reward-composition, .recovery-composition, .outcome-sheet { height: 100%; position: relative; padding: 2.5% 3.2% 5%; color: var(--ink-950); background: rgba(232,238,235,.95); }
|
|
.result-title { display: grid; grid-template-columns: 90px 1fr; gap: 11px; }
|
|
.outcome-seal { display: grid; place-items: center; color: var(--white); font-size: 13px; font-weight: 900; background: var(--safe-jade); border: 4px double #b7e4cd; }
|
|
.result-title h2 { margin: 3px 0; font-size: 18px; }
|
|
.result-title p { margin: 0; font-size: 8px; }
|
|
.causal-timeline { position: relative; margin-top: 9px; padding: 8px; background: var(--white); }
|
|
.expected-track, .actual-track { display: grid; grid-template-columns: 70px repeat(3, 1fr); gap: 4px; align-items: center; }
|
|
.actual-track { margin-top: 5px; }
|
|
.expected-track b, .actual-track b { font-size: 7px; }
|
|
.expected-track span, .actual-track span { min-height: 28px; display: grid; place-items: center; padding: 4px; font-size: 7px; text-align: center; background: var(--mist-120); border: 1px solid var(--line); }
|
|
.actual-track span.is-divergence { color: var(--white); background: var(--danger-coral); border-color: #8d2c30; }
|
|
.causal-timeline svg { position: absolute; inset: 8px 0; width: 100%; height: calc(100% - 16px); pointer-events: none; }
|
|
.causal-timeline path { fill: none; stroke: var(--danger-coral); stroke-width: 1.2; }
|
|
.result-effects { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin-top: 7px; }
|
|
.result-effects span { padding: 6px; font-size: 7px; background: var(--white); }
|
|
.result-effects b { display: block; margin-bottom: 2px; color: var(--route-teal); }
|
|
.loss-composition { display: grid; grid-template-columns: .65fr 1.35fr; gap: 12px; }
|
|
.fallen-figure { display: grid; place-items: center; align-content: center; background: #dce1de; border: 1px solid var(--line); }
|
|
.fallen-figure span { width: 90px; height: 115px; display: grid; place-items: center; color: #bbc4c2; font-size: 24px; font-weight: 900; background: #4c595d; border: 5px solid #7d8a8d; border-radius: 45% 45% 16% 16%; filter: grayscale(1); }
|
|
.fallen-figure i { margin-top: 7px; color: var(--danger-coral); font-size: 10px; font-style: normal; font-weight: 900; }
|
|
.loss-record { padding: 12px; background: var(--white); border-left: 5px solid var(--danger-coral); }
|
|
.loss-record h2 { margin: 4px 0; font-size: 21px; }
|
|
.loss-record > p, .loss-record > small { font-size: 8px; }
|
|
.loss-row { display: flex; justify-content: space-between; padding: 6px; font-size: 8px; border-bottom: 1px solid var(--line); }
|
|
.reward-heading h2, .recovery-heading h2 { margin: 3px 0; font-size: 19px; }
|
|
.reward-options, .recovery-paths { height: 61%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 8px; }
|
|
.reward-option, .recovery-path { min-width: 0; display: grid; align-content: start; gap: 3px; padding: 9px; color: var(--ink-950); text-align: left; background: var(--white); border: 2px solid transparent; border-radius: 4px; }
|
|
.reward-option.is-selected, .recovery-path.is-selected { border-color: var(--work-gold); }
|
|
.reward-object { display: grid; place-items: center; height: 45px; color: var(--route-teal); font-size: 32px; }
|
|
.reward-option small, .reward-option strong, .reward-option p, .reward-option em, .recovery-path span, .recovery-path strong, .recovery-path small, .recovery-path p { margin: 0; }
|
|
.reward-option small, .recovery-path small { color: var(--route-teal); font-size: 7px; }
|
|
.reward-option strong, .recovery-path strong { font-size: 10px; }
|
|
.reward-option p, .recovery-path p { font-size: 7px; line-height: 1.35; }
|
|
.reward-option em { margin-top: auto; padding-top: 4px; font-size: 7px; font-style: normal; font-weight: 900; border-top: 1px solid var(--line); }
|
|
.recovery-heading p { max-width: 70%; margin: 0; font-size: 8px; }
|
|
.recovery-path > span { width: 23px; height: 23px; display: grid; place-items: center; color: var(--white); font-size: 8px; background: var(--ink-840); }
|
|
.outcome-sheet { width: 74%; height: auto; min-height: 70%; margin: 0 auto; border-left-color: var(--danger-coral); }
|
|
.outcome-sheet h2 { margin: 5px 0 8px; font-size: 20px; }
|
|
.outcome-sheet p { font-size: 9px; line-height: 1.4; }
|
|
|
|
/* Guild, system, progress, settings */
|
|
.guild-composition, .forecast-composition, .system-workspace, .progress-composition, .records-composition, .settings-composition, .generic-composition { height: 100%; position: relative; padding: 2.5% 3.2% 5%; }
|
|
.guild-pressure { max-width: 48%; }
|
|
.guild-pressure h2 { margin: 3px 0; font-size: 19px; }
|
|
.guild-pressure p { margin: 0; font-size: 9px; }
|
|
.guild-destinations { position: absolute; left: 3.2%; right: 3.2%; top: 27%; display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; }
|
|
.guild-destinations button { min-height: 52px; display: grid; padding: 8px; color: var(--ink-950); font-size: 9px; font-weight: 900; text-align: left; background: rgba(243,246,242,.94); border: 1px solid var(--line); border-bottom: 4px solid var(--route-teal); }
|
|
.guild-destinations button.is-primary { border-bottom-color: var(--work-gold); }
|
|
.guild-destinations b { margin-top: auto; font-size: 7px; }
|
|
.muster-strip { position: absolute; left: 12%; right: 12%; bottom: 11%; display: flex; justify-content: center; gap: 5px; }
|
|
.muster-strip .party-actor { min-width: 56px; height: 67px; }
|
|
.muster-strip .actor-figure { width: 27px; height: 31px; }
|
|
.receipt-strip { position: absolute; right: 3.2%; bottom: 4%; display: flex; gap: 7px; padding: 5px 7px; color: var(--ink-950); font-size: 7px; background: var(--mist-050); border-left: 4px solid var(--safe-jade); }
|
|
.forecast-horizon { display: flex; align-items: center; gap: 6px; color: var(--white); font-size: 8px; font-weight: 900; }
|
|
.forecast-horizon i { flex: 1; height: 2px; background: var(--work-gold); }
|
|
.forecast-sheets { height: 67%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
|
|
.forecast-sheets article { padding: 11px; color: var(--ink-950); background: rgba(243,246,242,.95); border-top: 4px solid var(--route-teal); }
|
|
.forecast-sheets article.uncertain { border-top-style: dashed; border-top-color: var(--uncertain-cobalt); }
|
|
.forecast-sheets span, .forecast-sheets b { font-size: 7px; }
|
|
.forecast-sheets h3 { margin: 4px 0; font-size: 13px; }
|
|
.forecast-sheets p { font-size: 8px; line-height: 1.4; }
|
|
.title-composition { height: 100%; display: grid; grid-template-columns: 1.15fr .85fr; align-items: end; gap: 6%; padding: 4% 5% 8%; }
|
|
.title-brand span, .title-brand strong { display: block; }
|
|
.title-brand span { font-size: 17px; }
|
|
.title-brand strong { color: var(--work-gold); font-size: 46px; line-height: .95; }
|
|
.title-brand small { display: block; margin-top: 8px; font-size: 10px; }
|
|
.run-summary { display: grid; gap: 5px; padding: 13px; color: var(--ink-950); background: rgba(243,246,242,.95); border-left: 5px solid var(--work-gold); }
|
|
.run-summary b, .run-summary span { font-size: 8px; }
|
|
.run-summary strong { font-size: 12px; }
|
|
.title-tools { position: absolute; right: 3%; top: 3%; display: flex; gap: 5px; }
|
|
.boot-composition { height: 100%; display: grid; place-items: center; align-content: center; color: var(--mist-050); text-align: center; background: radial-gradient(circle at center, #395c62, #182127 65%); }
|
|
.boot-mark { position: relative; width: 72px; height: 72px; display: grid; place-items: center; margin-bottom: 6px; }
|
|
.boot-mark i { position: absolute; inset: 0; border: 3px solid var(--work-gold); transform: rotate(45deg); }
|
|
.boot-mark span { font-size: 22px; font-weight: 900; }
|
|
.boot-composition h2 { margin: 5px 0; font-size: 22px; }
|
|
.verification-track { width: 260px; height: 6px; margin: 8px 0; overflow: hidden; background: #617177; }
|
|
.verification-track i { display: block; height: 100%; background: var(--work-gold); }
|
|
.boot-composition strong, .boot-composition small { font-size: 8px; }
|
|
.system-workspace { display: grid; grid-template-columns: 1fr .55fr; grid-template-rows: auto 1fr; gap: 8px; color: var(--ink-950); background: rgba(232,238,235,.95); }
|
|
.system-workspace > .stage-kicker, .system-workspace > h2 { grid-column: 1 / 3; }
|
|
.system-workspace > h2 { margin: -3px 0 0; font-size: 19px; }
|
|
.system-list { display: grid; gap: 4px; }
|
|
.system-row { min-height: 46px; display: grid; grid-template-columns: 32px 1fr auto; gap: 7px; align-items: center; color: var(--ink-950); text-align: left; background: var(--white); border: 1px solid var(--line); }
|
|
.system-row.is-focused { box-shadow: inset 4px 0 var(--work-gold); }
|
|
.system-row span { font-size: 8px; text-align: center; }
|
|
.system-row strong { font-size: 9px; }
|
|
.system-row em { padding-right: 8px; font-size: 7px; font-style: normal; }
|
|
.system-workspace aside { padding: 10px; background: var(--white); border-left: 4px solid var(--route-teal); }
|
|
.system-workspace aside b, .system-workspace aside p { font-size: 8px; }
|
|
.progress-composition { color: var(--ink-950); background: rgba(232,238,235,.96); }
|
|
.progress-heading { max-width: 70%; }
|
|
.progress-heading h2 { margin: 3px 0; font-size: 19px; }
|
|
.progress-heading p { margin: 0; font-size: 8px; }
|
|
.progress-path { display: flex; align-items: center; margin: 12px 0; }
|
|
.progress-path i { flex: 1; height: 3px; background: var(--neutral-silver); }
|
|
.path-node { min-width: 76px; padding: 8px; font-size: 8px; font-weight: 900; text-align: center; background: var(--white); border: 2px solid var(--neutral-silver); }
|
|
.path-node.is-complete { color: var(--white); background: var(--safe-jade); border-color: var(--safe-jade); }
|
|
.path-node.is-current { border-color: var(--work-gold); box-shadow: inset 0 -4px var(--work-gold); }
|
|
.progress-details { width: 62%; display: grid; gap: 3px; }
|
|
.records-composition { display: grid; grid-template-columns: .55fr 1.1fr .75fr; gap: 8px; color: var(--ink-950); background: rgba(232,238,235,.96); }
|
|
.records-categories, .record-grid, .record-inspect { padding: 8px; background: var(--white); }
|
|
.records-categories { display: grid; align-content: start; gap: 3px; }
|
|
.records-categories > strong { margin-bottom: 5px; font-size: 9px; }
|
|
.records-categories button { min-height: 29px; display: flex; justify-content: space-between; align-items: center; color: var(--ink-950); font-size: 8px; background: var(--mist-120); border: 1px solid transparent; }
|
|
.records-categories button.is-active { border-left: 4px solid var(--work-gold); }
|
|
.record-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
|
|
.record-tile { min-width: 0; display: grid; place-items: center; align-content: center; padding: 4px; color: var(--ink-950); background: var(--mist-120); border: 1px solid var(--line); }
|
|
.record-tile.is-focused { border-color: var(--work-gold); }
|
|
.record-tile > span { width: 31px; height: 34px; display: grid; place-items: center; color: var(--white); font-size: 8px; background: var(--ink-840); }
|
|
.record-tile small, .record-tile strong, .record-tile em { font-size: 7px; font-style: normal; text-align: center; }
|
|
.record-inspect .large-figure { width: 65px; height: 78px; }
|
|
.record-inspect h2 { margin: 5px 0; font-size: 15px; }
|
|
.record-inspect p, .record-inspect b, .record-inspect span { display: block; margin: 4px 0; font-size: 8px; }
|
|
.settings-composition { display: grid; grid-template-columns: .6fr 1.35fr .7fr; gap: 1px; padding: 0; color: var(--ink-950); background: var(--line-strong); }
|
|
.settings-rail, .settings-workspace, .settings-preview { padding: 11px; background: var(--mist-050); }
|
|
.settings-rail { display: grid; align-content: start; gap: 3px; }
|
|
.settings-rail strong { margin-bottom: 5px; font-size: 10px; }
|
|
.settings-rail button { min-height: 28px; color: var(--ink-700); font-size: 8px; text-align: left; background: transparent; border: 0; border-left: 3px solid transparent; }
|
|
.settings-rail button.is-active { color: var(--ink-950); background: var(--mist-180); border-left-color: var(--work-gold); }
|
|
.settings-workspace h2 { margin: 3px 0 7px; font-size: 17px; }
|
|
.setting-control { min-height: 44px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px; border-bottom: 1px solid var(--line); }
|
|
.setting-control strong, .setting-control small { display: block; }
|
|
.setting-control strong { font-size: 8px; }
|
|
.setting-control small { color: var(--ink-700); font-size: 7px; }
|
|
.segmented-control { display: flex; }
|
|
.segmented-control button, .menu-control { min-height: 26px; padding: 4px 6px; color: var(--ink-950); font-size: 7px; background: var(--white); border: 1px solid var(--line); }
|
|
.segmented-control button.is-active { color: var(--white); background: var(--ink-840); }
|
|
.switch { width: 34px; height: 20px; padding: 2px; background: var(--neutral-silver); border: 0; border-radius: 10px; }
|
|
.switch i { display: block; width: 16px; height: 16px; background: var(--white); border-radius: 50%; transform: translateX(0); }
|
|
.switch.is-on { background: var(--safe-jade); }
|
|
.switch.is-on i { transform: translateX(14px); }
|
|
.settings-actions { display: flex; justify-content: flex-end; gap: 6px; margin-top: 7px; }
|
|
.settings-preview { align-self: stretch; background: #dbe9e5; }
|
|
.settings-preview > span { font-size: 8px; font-weight: 900; }
|
|
.preview-target { margin-top: 12px; padding: 7px; color: var(--white); font-size: 7px; background: var(--danger-coral); border-left: 5px solid var(--ink-950); }
|
|
.preview-target b { display: block; font-size: 9px; }
|
|
.settings-preview p, .settings-preview strong { font-size: 8px; }
|
|
.generic-composition { display: grid; grid-template-columns: .7fr 1.3fr; gap: 10px; }
|
|
.generic-subject { display: grid; place-items: center; align-content: center; background: rgba(19,129,138,.82); border: 2px solid #9cdbda; }
|
|
.generic-subject span { font-size: 48px; font-weight: 900; }
|
|
.generic-subject strong { font-size: 10px; }
|
|
.generic-decision { padding: 13px; color: var(--ink-950); background: rgba(243,246,242,.96); }
|
|
.generic-decision h2 { margin: 4px 0; font-size: 18px; }
|
|
.generic-decision p { font-size: 8px; line-height: 1.4; }
|
|
|
|
/* State variants */
|
|
.state-variant-overlay { position: absolute; z-index: 20; inset: 0; display: grid; place-items: center; padding: 5%; background: rgba(12,22,26,.68); }
|
|
.state-variant-overlay.loading { background: rgba(12,22,26,.52); }
|
|
.variant-sheet { width: min(72%, 620px); padding: 16px; color: var(--ink-950); background: var(--mist-050); border-left: 6px solid var(--uncertain-cobalt); box-shadow: 0 18px 50px rgba(0,0,0,.35); }
|
|
.state-variant-overlay.error .variant-sheet { border-left-color: var(--danger-coral); }
|
|
.state-variant-overlay.return .variant-sheet { border-left-color: var(--safe-jade); }
|
|
.variant-sheet h2 { margin: 4px 0; font-size: 18px; }
|
|
.variant-sheet p { font-size: 9px; line-height: 1.45; }
|
|
.variant-sheet > div { display: flex; justify-content: flex-end; gap: 6px; }
|
|
|
|
/* Gallery controls */
|
|
.firstplay-controls { min-height: 52px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; margin-top: 12px; }
|
|
.page-command { min-height: 42px; padding: 8px 12px; color: var(--ink-950); font-size: 11px; font-weight: 800; background: var(--white); border: 1px solid var(--line-strong); border-radius: 4px; }
|
|
.page-command.is-primary { background: var(--work-gold); border-color: #b98717; }
|
|
.flow-progress { display: flex; justify-content: center; gap: 3px; overflow-x: auto; scrollbar-width: thin; }
|
|
.flow-progress button { width: 22px; height: 28px; flex: 0 0 auto; padding: 0; color: var(--ink-700); font-size: 8px; background: var(--white); border: 1px solid var(--line); border-radius: 2px; }
|
|
.flow-progress button.is-complete { color: var(--white); background: var(--safe-jade); }
|
|
.flow-progress button.is-active { color: var(--ink-950); background: var(--work-gold); border-color: var(--ink-950); }
|
|
.screen-tools { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; margin-bottom: 12px; }
|
|
.filter-scroll, .variant-control, .catalog-tabs, .region-tabs { display: flex; gap: 3px; overflow-x: auto; scrollbar-width: thin; }
|
|
.filter-scroll button, .variant-control button { min-height: 34px; flex: 0 0 auto; padding: 6px 9px; color: var(--ink-700); font-size: 9px; background: var(--white); border: 1px solid var(--line); border-radius: 3px; }
|
|
.filter-scroll button.is-active, .variant-control button.is-active { color: var(--white); background: var(--ink-840); }
|
|
.screen-browser { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 16px; align-items: start; }
|
|
.screen-index { position: sticky; top: calc(var(--topbar) + 16px); max-height: calc(100vh - var(--topbar) - 48px); overflow: auto; background: var(--white); border: 1px solid var(--line); }
|
|
.screen-index button { width: 100%; min-height: 49px; display: grid; grid-template-columns: 58px 1fr; gap: 2px 7px; align-items: center; padding: 6px 8px; color: var(--ink-950); text-align: left; background: var(--white); border: 0; border-bottom: 1px solid var(--line); border-left: 4px solid transparent; }
|
|
.screen-index button.is-active { background: var(--mist-120); border-left-color: var(--work-gold); }
|
|
.screen-index span { color: var(--route-teal); font-size: 9px; font-weight: 900; }
|
|
.screen-index strong { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
|
|
.screen-index em { grid-column: 2; color: var(--safe-jade); font-size: 7px; font-style: normal; font-weight: 900; }
|
|
.screen-inspection { min-width: 0; }
|
|
.screen-pager { display: flex; justify-content: space-between; gap: 8px; margin-top: 10px; }
|
|
.screen-pager button { min-height: 38px; padding: 7px 10px; color: var(--ink-950); font-size: 9px; background: var(--white); border: 1px solid var(--line); border-radius: 3px; }
|
|
.authority-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 10px; background: var(--line); border: 1px solid var(--line); }
|
|
.authority-summary > div { min-height: 105px; padding: 11px; background: var(--white); }
|
|
.authority-summary span { color: var(--route-teal); font-size: 8px; font-weight: 900; text-transform: uppercase; }
|
|
.authority-summary p { margin: 5px 0 0; font-size: 10px; line-height: 1.45; }
|
|
|
|
.region-tabs { margin-bottom: 12px; }
|
|
.region-tabs button { min-width: 126px; min-height: 45px; display: grid; padding: 6px 8px; color: var(--ink-700); text-align: left; background: var(--white); border: 1px solid var(--line); border-bottom: 3px solid transparent; }
|
|
.region-tabs button.is-active { color: var(--ink-950); border-bottom-color: var(--work-gold); }
|
|
.region-tabs span { font-size: 8px; font-weight: 900; }
|
|
.region-tabs strong { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
|
|
.region-stage { position: relative; width: 100%; aspect-ratio: 16/7.2; overflow: hidden; color: var(--white); background: var(--ink-840); box-shadow: var(--shadow); }
|
|
.region-stage > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
|
|
.region-stage::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(16,29,33,.86), rgba(16,29,33,.2) 58%, rgba(16,29,33,.55)); }
|
|
.region-stage .concept-label { z-index: 3; }
|
|
.region-title { position: absolute; z-index: 2; left: 4%; top: 12%; width: 38%; }
|
|
.region-title span { color: var(--work-gold); font-size: 11px; font-weight: 900; }
|
|
.region-title h2 { margin: 4px 0; font-size: 32px; }
|
|
.region-title p { font-size: 11px; line-height: 1.45; }
|
|
.region-route { position: absolute; z-index: 2; left: 35%; right: 4%; bottom: 16%; display: flex; align-items: center; }
|
|
.region-route i { flex: 1; height: 3px; background: var(--route-teal); border: 1px solid var(--white); }
|
|
.region-route button { min-width: 88px; min-height: 42px; color: var(--ink-950); font-size: 9px; font-weight: 900; background: var(--mist-050); border: 2px solid var(--route-teal); border-radius: 3px; }
|
|
.region-intel { display: grid; grid-template-columns: 1fr 1fr 1.25fr; gap: 1px; margin-top: 12px; background: var(--line); border: 1px solid var(--line); }
|
|
.region-intel article { min-height: 155px; padding: 14px; background: var(--white); }
|
|
.region-intel article > span { color: var(--route-teal); font-size: 9px; font-weight: 900; text-transform: uppercase; }
|
|
.region-intel p { font-size: 10px; line-height: 1.5; }
|
|
.identity-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-top: 8px; }
|
|
.identity-strip b { min-width: 0; padding: 6px; font-size: 8px; background: var(--mist-120); border-left: 3px solid var(--route-teal); }
|
|
.identity-strip b.boss { border-left-color: var(--danger-coral); }
|
|
.identity-strip small { display: block; overflow: hidden; margin-top: 2px; font-size: 7px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
|
|
|
|
.catalog-tabs { margin-bottom: 10px; }
|
|
.catalog-tabs button { min-width: 126px; min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 9px; padding: 7px 9px; color: var(--ink-700); text-transform: capitalize; background: var(--white); border: 1px solid var(--line); border-bottom: 3px solid transparent; }
|
|
.catalog-tabs button.is-active { color: var(--ink-950); border-bottom-color: var(--work-gold); }
|
|
.catalog-tabs b { font-size: 10px; }
|
|
.catalog-toolbar { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
|
|
.search-control { min-width: min(360px, 42vw); min-height: 38px; display: flex; align-items: center; gap: 7px; padding: 0 10px; background: var(--white); border: 1px solid var(--line-strong); border-radius: 4px; }
|
|
.search-control input { width: 100%; min-width: 0; border: 0; outline: 0; }
|
|
.catalog-layout { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 16px; align-items: start; }
|
|
.catalog-art { position: sticky; top: calc(var(--topbar) + 16px); background: var(--white); border: 1px solid var(--line); }
|
|
.catalog-art > img { width: 100%; aspect-ratio: 1; object-fit: contain; }
|
|
.catalog-art { position: sticky; }
|
|
.catalog-art .concept-label { bottom: auto; top: 8px; }
|
|
.catalog-art > div { padding: 12px; border-top: 1px solid var(--line); }
|
|
.catalog-art strong { font-size: 13px; }
|
|
.catalog-art p { margin: 5px 0 0; color: var(--ink-700); font-size: 10px; line-height: 1.45; }
|
|
.catalog-list { display: grid; gap: 5px; }
|
|
.catalog-entry { min-height: 74px; display: grid; grid-template-columns: minmax(165px, .38fr) 1fr 32px; gap: 12px; align-items: center; padding: 11px; background: var(--white); border: 1px solid var(--line); border-left: 4px solid var(--mist-180); border-radius: 3px; }
|
|
.catalog-entry:hover { border-left-color: var(--work-gold); }
|
|
.catalog-entry small, .catalog-entry strong, .catalog-entry em { display: block; }
|
|
.catalog-entry small { color: var(--route-teal); font-size: 8px; font-weight: 900; }
|
|
.catalog-entry strong { margin-top: 2px; font-size: 11px; }
|
|
.catalog-entry em { margin-top: 3px; color: var(--ink-700); font-size: 8px; font-style: normal; }
|
|
.catalog-entry p { margin: 0; font-size: 9px; line-height: 1.45; }
|
|
.catalog-entry .stage-icon { color: var(--ink-950); background: var(--mist-120); border-color: var(--line); }
|
|
.catalog-more { padding: 12px; color: var(--ink-700); font-size: 10px; text-align: center; background: var(--mist-120); }
|
|
|
|
.review-groups { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
|
|
.review-groups article { min-height: 106px; display: grid; grid-template-columns: 56px 1fr auto; gap: 18px; align-items: center; padding: 14px 18px; background: var(--white); }
|
|
.review-groups article > span { display: grid; place-items: center; width: 48px; height: 48px; color: var(--white); font-size: 14px; font-weight: 900; background: var(--route-teal); border-radius: 4px; }
|
|
.review-groups small { color: var(--route-teal); font-size: 8px; font-weight: 900; }
|
|
.review-groups h2 { margin: 3px 0; font-size: 16px; }
|
|
.review-groups p { margin: 0; color: var(--ink-700); font-size: 10px; line-height: 1.45; }
|
|
.review-boundary { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-top: 12px; background: var(--line); border: 1px solid var(--line); }
|
|
.review-boundary div { padding: 14px; background: var(--white); }
|
|
.review-boundary span, .review-boundary strong { display: block; }
|
|
.review-boundary span { color: var(--route-teal); font-size: 8px; font-weight: 900; text-transform: uppercase; }
|
|
.review-boundary strong { margin-top: 5px; font-size: 10px; line-height: 1.5; }
|
|
|
|
/* Viewer */
|
|
.stage-dialog { width: min(98vw, 1780px); height: min(96vh, 1080px); max-width: none; max-height: none; padding: 0; color: var(--white); background: #0b1114; border: 1px solid #53646b; }
|
|
.stage-dialog::backdrop { background: rgba(5,9,11,.88); }
|
|
.viewer-toolbar { height: 50px; display: flex; align-items: center; justify-content: space-between; padding: 5px 9px 5px 15px; background: #142127; border-bottom: 1px solid #53646b; }
|
|
.viewer-toolbar > span { font-size: 11px; font-weight: 900; }
|
|
.viewer-toolbar > div { display: flex; gap: 5px; }
|
|
.viewer-toolbar .icon-button { color: var(--white); background: #25343a; border-color: #52656c; }
|
|
.viewer-zoom { min-width: 58px; color: var(--white); background: #25343a; border: 1px solid #52656c; border-radius: 3px; }
|
|
.viewer-viewport { height: calc(100% - 50px); overflow: auto; display: grid; place-items: center; padding: 12px; }
|
|
#dialog-stage { min-width: 560px; margin: auto; transition: width .15s ease; }
|
|
#dialog-stage .game-stage, #dialog-stage .region-stage { width: 100%; }
|
|
.nav-scrim { position: fixed; inset: 0; z-index: 35; background: rgba(8,14,17,.66); }
|
|
|
|
@keyframes spin { to { transform: rotate(360deg); } }
|
|
|
|
@container stage (max-width: 760px) {
|
|
.game-hud { height: 38px; padding: 4px 7px; }
|
|
.stage-body { inset: 38px 0 0; }
|
|
.stage-icon { width: 24px; height: 24px; font-size: 10px; }
|
|
.resource { display: none; }
|
|
.stage-primary, .stage-secondary { min-height: 26px; padding: 4px 7px; font-size: 8px; }
|
|
.opening-title h2, .market-heading h2, .party-title h2, .risk-heading h2, .result-title h2, .reward-heading h2, .recovery-heading h2 { font-size: 14px; }
|
|
.opening-title p, .party-title p, .battle-objective p, .region-signal p { display: none; }
|
|
.offer-grid { height: 62%; gap: 4px; margin-top: 5px; }
|
|
.offer-copy p { display: none; }
|
|
.offer-figure > span { width: 32px; height: 37px; font-size: 9px; border-width: 2px; }
|
|
.offer-actions > span { display: none; }
|
|
.offer-actions { grid-template-columns: 1fr auto; }
|
|
.offer-copy strong { font-size: 8px; }
|
|
.profession-seal { font-size: 6px; }
|
|
.opening-footer { min-height: 29px; margin-top: 3px; }
|
|
.selection-count strong { min-width: 34px; padding: 3px 5px; font-size: 10px; }
|
|
.market-surface { height: 66%; }
|
|
.market-heading .stage-kicker, .market-footer, .party-read { display: none; }
|
|
.market-row { grid-template-columns: 27px 1fr auto; padding: 3px; }
|
|
.row-avatar { width: 24px; height: 27px; }
|
|
.market-inspect { padding: 6px; }
|
|
.market-inspect p { display: none; }
|
|
.party-cord { left: 2%; right: 2%; top: 32%; gap: 4px; }
|
|
.party-actor { min-width: 45px; height: 67px; }
|
|
.actor-figure { width: 26px; height: 31px; border-width: 2px; }
|
|
.party-tools { bottom: 6%; }
|
|
.relation-layer { display: none; }
|
|
.risk-options { height: 65%; }
|
|
.risk-option { padding: 5px; }
|
|
.risk-option small { display: none; }
|
|
.battle-objective { max-width: 62%; }
|
|
.battle-objective h2 { font-size: 12px; }
|
|
.battle-line { top: 23%; bottom: 18%; grid-template-columns: 1.1fr .35fr .7fr; }
|
|
.allied-line .party-actor { min-width: 37px; height: 58px; }
|
|
.allied-line .actor-figure { width: 21px; height: 26px; }
|
|
.allied-line .party-actor > strong, .allied-line .party-actor > em { display: none; }
|
|
.enemy-actor { min-width: 36px; height: 47px; font-size: 8px; }
|
|
.enemy-actor.elite { min-width: 45px; height: 63px; }
|
|
.enemy-actor small, .edge-label { display: none; }
|
|
.battle-event-log span { display: none; }
|
|
.battle-event-log b { display: block; }
|
|
.inspect-sheet { width: 40%; }
|
|
.inspect-sheet dl > div:nth-child(n+3) { display: none; }
|
|
.result-title { grid-template-columns: 65px 1fr; }
|
|
.result-effects span:nth-child(2) { display: none; }
|
|
.result-effects { grid-template-columns: repeat(2, 1fr); }
|
|
.reward-options, .recovery-paths { height: 66%; }
|
|
.reward-object { height: 28px; font-size: 19px; }
|
|
.reward-option p, .recovery-path p { display: none; }
|
|
.settings-preview { display: none; }
|
|
.settings-composition { grid-template-columns: .55fr 1.45fr; }
|
|
.setting-control { min-height: 34px; }
|
|
.generic-subject span { font-size: 30px; }
|
|
}
|
|
|
|
@container stage (max-width: 480px) {
|
|
.game-hud { height: 32px; }
|
|
.stage-body { inset: 32px 0 0; }
|
|
.hud-left strong, .save-state, .concept-label { display: none; }
|
|
.opening-composition, .creation-review, .contract-composition, .market-composition, .market-review, .item-review, .party-composition, .risk-board, .risk-review, .battle-composition, .battle-static, .result-composition, .loss-composition, .reward-composition, .recovery-composition, .guild-composition, .forecast-composition, .system-workspace, .progress-composition, .records-composition, .generic-composition { padding: 2% 2.5% 3%; }
|
|
.opening-title { max-width: 80%; }
|
|
.opening-title .stage-kicker { display: none; }
|
|
.opening-title h2 { font-size: 10px; }
|
|
.offer-grid { grid-template-columns: repeat(4, 1fr); height: 68%; gap: 2px; }
|
|
.offer-copy { padding: 2px; }
|
|
.offer-copy strong { font-size: 6px; }
|
|
.profession-seal { font-size: 5px; }
|
|
.offer-actions { min-height: 19px; padding: 1px; }
|
|
.offer-actions > button:not(.stage-icon) { min-height: 17px; padding: 1px 2px; font-size: 5px; }
|
|
.offer-actions .stage-icon { display: none; }
|
|
.offer-actions { grid-template-columns: 1fr; }
|
|
.opening-footer .stage-secondary { display: none; }
|
|
.selection-count span { display: none; }
|
|
.contract-sheet dl > div:nth-child(n+3) { display: none; }
|
|
.creation-review { width: 90%; min-height: 90%; padding: 6px 8px; }
|
|
.unchosen-strip { display: none; }
|
|
.recruit-marker { padding: 2px; }
|
|
.recruit-silhouette { width: 25px; height: 29px; }
|
|
.market-composition { padding-bottom: 3%; }
|
|
.market-heading h2 { font-size: 9px; }
|
|
.company-meter { padding: 3px; }
|
|
.company-meter span { display: none; }
|
|
.company-meter strong { font-size: 10px; }
|
|
.market-tabs { height: 20px; margin-top: 2px; }
|
|
.market-tabs button { padding: 2px 4px; font-size: 5px; }
|
|
.market-surface { height: 72%; grid-template-columns: 1.25fr .75fr; gap: 2px; }
|
|
.market-list { padding: 2px; }
|
|
.market-row { min-height: 0; }
|
|
.market-row em, .fit-read { display: none; }
|
|
.market-inspect h3 { font-size: 8px; }
|
|
.market-inspect .stage-primary { min-height: 18px; font-size: 5px; }
|
|
.market-review { grid-template-columns: .6fr 1fr .7fr; gap: 2px; }
|
|
.review-figure, .review-facts, .party-impact { padding: 4px; }
|
|
.review-facts h2 { font-size: 10px; }
|
|
.review-facts h3, .party-impact p, .party-impact small, .review-facts p { display: none; }
|
|
.stat-radar { grid-template-columns: repeat(2, 1fr); }
|
|
.party-impact > strong { font-size: 9px; }
|
|
.item-review { gap: 2px; }
|
|
.item-review > div, .item-review > aside { padding: 5px; }
|
|
.item-object { font-size: 30px; }
|
|
.item-review h2 { font-size: 9px; }
|
|
.item-review p, .item-review aside span { display: none; }
|
|
.equipment-composition { grid-template-columns: .9fr .55fr 1fr; gap: 2px; padding: 2%; }
|
|
.equipment-list, .equipment-wearer, .equipment-delta { padding: 4px; }
|
|
.equipment-row { min-height: 28px; }
|
|
.equipment-row:nth-of-type(n+4) { display: none; }
|
|
.equipment-wearer .large-figure { width: 36px; height: 44px; }
|
|
.equipment-wearer strong { font-size: 7px; }
|
|
.equipped-slot, .equipment-delta p { display: none; }
|
|
.equipment-delta h2 { font-size: 8px; }
|
|
.party-title .stage-kicker, .party-title p, .cord-label { display: none; }
|
|
.party-title h2 { font-size: 9px; }
|
|
.party-cord { top: 24%; height: 74px; }
|
|
.party-cord::before { top: 48px; }
|
|
.party-actor { min-width: 34px; height: 55px; padding: 2px; }
|
|
.actor-figure { width: 20px; height: 24px; }
|
|
.party-actor > strong, .party-actor > em { display: none; }
|
|
.party-tools .stage-icon { display: none; }
|
|
.party-tools { right: 2%; bottom: 3%; }
|
|
.risk-heading h2 { font-size: 9px; }
|
|
.risk-options { height: 70%; gap: 2px; margin-top: 3px; }
|
|
.risk-option { padding: 3px; }
|
|
.risk-option > span { width: 17px; height: 17px; font-size: 6px; }
|
|
.risk-option strong { font-size: 7px; }
|
|
.risk-option div b { display: none; }
|
|
.risk-compare { min-height: 24px; margin-top: 2px; padding: 2px; }
|
|
.risk-compare b:nth-of-type(n+2) { display: none; }
|
|
.risk-review { width: 92%; }
|
|
.risk-review h2 { font-size: 10px; }
|
|
.risk-review p { display: none; }
|
|
.threat-band span:nth-child(n+3) { display: none; }
|
|
.threat-band { grid-template-columns: repeat(2, 1fr); }
|
|
.mini-party-line { margin: 3px 0; padding: 2px; }
|
|
.battle-objective .stage-kicker, .playback-tools .stage-icon { display: none; }
|
|
.battle-objective h2 { font-size: 8px; }
|
|
.battle-line { top: 20%; bottom: 15%; gap: 1px; }
|
|
.allied-line { gap: 1px; }
|
|
.allied-line .party-actor { min-width: 26px; height: 42px; padding: 1px; }
|
|
.allied-line .actor-figure { width: 16px; height: 19px; }
|
|
.enemy-line { gap: 1px; }
|
|
.enemy-actor { min-width: 25px; height: 35px; }
|
|
.enemy-actor.elite { min-width: 31px; height: 45px; }
|
|
.forecast-arrow { padding: 2px; font-size: 5px; }
|
|
.caption-line { display: none; }
|
|
.inspect-sheet { top: 7%; bottom: 4%; width: 43%; padding: 4px; }
|
|
.inspect-sheet h3 { font-size: 8px; }
|
|
.inspect-sheet .stage-kicker, .inspect-sheet dl > div:nth-child(n+2) { display: none; }
|
|
.battle-sheet { top: 3%; width: 43%; padding: 5px; }
|
|
.battle-sheet h2 { font-size: 8px; }
|
|
.result-title { grid-template-columns: 45px 1fr; }
|
|
.result-title h2 { font-size: 9px; }
|
|
.result-title p { display: none; }
|
|
.outcome-seal { font-size: 7px; border-width: 2px; }
|
|
.causal-timeline { margin-top: 3px; padding: 3px; }
|
|
.expected-track, .actual-track { grid-template-columns: 42px repeat(3, 1fr); gap: 1px; }
|
|
.expected-track span, .actual-track span { min-height: 20px; padding: 1px; font-size: 5px; }
|
|
.result-effects { margin-top: 2px; }
|
|
.loss-composition { gap: 3px; }
|
|
.fallen-figure span { width: 44px; height: 57px; font-size: 12px; }
|
|
.loss-record { padding: 5px; }
|
|
.loss-record h2 { font-size: 10px; }
|
|
.loss-record > p, .loss-record > small { display: none; }
|
|
.reward-heading h2, .recovery-heading h2 { font-size: 9px; }
|
|
.recovery-heading p { display: none; }
|
|
.reward-options, .recovery-paths { height: 72%; gap: 2px; margin-top: 3px; }
|
|
.reward-option, .recovery-path { padding: 3px; }
|
|
.guild-pressure h2 { font-size: 9px; }
|
|
.guild-pressure p { display: none; }
|
|
.guild-destinations { top: 20%; gap: 2px; }
|
|
.guild-destinations button { min-height: 34px; padding: 3px; font-size: 6px; }
|
|
.muster-strip { bottom: 5%; }
|
|
.muster-strip .party-actor { min-width: 32px; height: 40px; }
|
|
.receipt-strip { display: none; }
|
|
.forecast-sheets { height: 74%; margin-top: 4px; gap: 2px; }
|
|
.forecast-sheets article { padding: 4px; }
|
|
.forecast-sheets h3 { font-size: 8px; }
|
|
.forecast-sheets p { display: none; }
|
|
.system-workspace { gap: 2px; }
|
|
.system-workspace > h2 { font-size: 10px; }
|
|
.system-row { min-height: 28px; }
|
|
.system-workspace aside { padding: 4px; }
|
|
.system-workspace aside p { display: none; }
|
|
.records-composition { gap: 2px; }
|
|
.records-categories, .record-grid, .record-inspect { padding: 3px; }
|
|
.records-categories button:nth-child(n+6) { display: none; }
|
|
.record-inspect p, .record-inspect b, .record-inspect span:not(.large-figure) { display: none; }
|
|
.settings-rail, .settings-workspace { padding: 4px; }
|
|
.settings-rail button { min-height: 20px; font-size: 5px; }
|
|
.settings-workspace h2 { font-size: 9px; }
|
|
.setting-control { min-height: 26px; }
|
|
.setting-control small { display: none; }
|
|
.generic-decision { padding: 5px; }
|
|
.generic-decision h2 { font-size: 9px; }
|
|
.generic-decision p { display: none; }
|
|
.variant-sheet { width: 90%; padding: 6px; }
|
|
.variant-sheet h2 { font-size: 9px; }
|
|
.variant-sheet p { font-size: 6px; }
|
|
}
|
|
|
|
@media (max-width: 1160px) {
|
|
:root { --sidebar: 226px; }
|
|
main { padding: 18px; }
|
|
.screen-browser { grid-template-columns: 180px minmax(0, 1fr); gap: 12px; }
|
|
.catalog-layout { grid-template-columns: 260px minmax(0, 1fr); }
|
|
.region-title h2 { font-size: 26px; }
|
|
}
|
|
|
|
@media (max-width: 880px) {
|
|
:root { --sidebar: 272px; --topbar: 54px; }
|
|
.app-shell { display: block; }
|
|
.sidebar { position: fixed; left: 0; top: 0; width: var(--sidebar); transform: translateX(-102%); transition: transform .18s ease; box-shadow: 12px 0 32px rgba(0,0,0,.28); }
|
|
.sidebar.is-open { transform: translateX(0); }
|
|
.mobile-only { display: inline-grid; }
|
|
.brand-block { grid-template-columns: 34px 42px 1fr; }
|
|
.brand-block > .icon-button { width: 34px; height: 34px; color: var(--white); background: transparent; border-color: #60727a; }
|
|
.topbar { padding: 6px 12px; }
|
|
main { padding: 16px; }
|
|
.view-heading h1 { font-size: 23px; }
|
|
.screen-browser { grid-template-columns: 1fr; }
|
|
.screen-index { position: static; display: flex; max-height: none; overflow-x: auto; }
|
|
.screen-index button { min-width: 155px; border-left: 0; border-bottom: 4px solid transparent; }
|
|
.screen-index button.is-active { border-bottom-color: var(--work-gold); }
|
|
.catalog-layout { grid-template-columns: 1fr; }
|
|
.catalog-art { position: static; display: grid; grid-template-columns: minmax(180px, .7fr) 1fr; }
|
|
.catalog-art > img { aspect-ratio: 16/9; }
|
|
.catalog-art > div { border-top: 0; border-left: 1px solid var(--line); }
|
|
.region-intel { grid-template-columns: 1fr 1fr; }
|
|
.region-intel article:last-child { grid-column: 1 / 3; }
|
|
}
|
|
|
|
@media (max-width: 620px) {
|
|
.evidence-badge, .breadcrumbs > span, .breadcrumbs > b { display: none; }
|
|
.top-actions { gap: 4px; }
|
|
.locale-control button { min-height: 30px; padding: 3px 7px; font-size: 10px; }
|
|
main { padding: 12px; }
|
|
.view-heading { min-height: 58px; margin-bottom: 10px; }
|
|
.view-heading h1 { font-size: 19px; }
|
|
.view-heading p { display: none; }
|
|
.heading-badges span:nth-child(n+2) { display: none; }
|
|
.firstplay-controls { grid-template-columns: 1fr 1fr; gap: 8px; }
|
|
.flow-progress { grid-column: 1 / 3; grid-row: 1; justify-content: start; }
|
|
.page-command { min-height: 40px; }
|
|
.screen-tools { grid-template-columns: 1fr; }
|
|
.screen-index button { min-width: 132px; }
|
|
.authority-summary { grid-template-columns: 1fr; }
|
|
.authority-summary > div { min-height: auto; }
|
|
.region-stage { aspect-ratio: 16/9; }
|
|
.region-title { width: 62%; }
|
|
.region-title h2 { font-size: 19px; }
|
|
.region-title p { display: none; }
|
|
.region-route { left: 20%; }
|
|
.region-route button { min-width: 58px; min-height: 32px; font-size: 7px; }
|
|
.region-intel { grid-template-columns: 1fr; }
|
|
.region-intel article, .region-intel article:last-child { grid-column: auto; min-height: auto; }
|
|
.catalog-toolbar { display: grid; }
|
|
.search-control { min-width: 0; }
|
|
.catalog-art { display: block; }
|
|
.catalog-entry { grid-template-columns: 1fr 30px; gap: 7px; }
|
|
.catalog-entry > p { grid-column: 1 / 3; }
|
|
.review-groups article { grid-template-columns: 42px 1fr; gap: 10px; }
|
|
.review-groups article > span { width: 38px; height: 38px; }
|
|
.review-groups .page-command { grid-column: 2; justify-self: start; }
|
|
.review-boundary { grid-template-columns: 1fr; }
|
|
#dialog-stage { min-width: 520px; }
|
|
}
|
|
|
|
@media (orientation: landscape) and (max-height: 560px) and (max-width: 920px) {
|
|
:root { --topbar: 44px; }
|
|
.topbar { min-height: 44px; }
|
|
.topbar .icon-button { width: 34px; height: 34px; }
|
|
main { padding: 7px 10px; }
|
|
.view-heading { min-height: 31px; align-items: center; margin-bottom: 5px; }
|
|
.view-heading .eyebrow, .view-heading p, .heading-badges { display: none; }
|
|
.view-heading h1 { margin: 0; font-size: 14px; }
|
|
.firstplay-view .stage-wrap, .screens-view .stage-wrap { width: min(100%, calc((100svh - 118px) * 16 / 9)); }
|
|
.firstplay-controls { min-height: 38px; grid-template-columns: auto 1fr auto; margin-top: 4px; }
|
|
.flow-progress { grid-column: auto; grid-row: auto; }
|
|
.flow-progress button { height: 22px; }
|
|
.page-command { min-height: 32px; padding: 4px 8px; font-size: 8px; }
|
|
.screen-tools { grid-template-columns: 1fr auto; margin-bottom: 4px; }
|
|
.filter-scroll button, .variant-control button { min-height: 27px; padding: 3px 6px; }
|
|
.screen-browser { display: block; }
|
|
.screen-index { display: none; }
|
|
.screen-pager, .authority-summary { display: none; }
|
|
.regions-view .view-heading, .catalog-view .view-heading, .review-view .view-heading { display: none; }
|
|
.region-tabs, .catalog-tabs { margin-bottom: 4px; }
|
|
.region-tabs button, .catalog-tabs button { min-height: 34px; }
|
|
}
|
|
|
|
.high-contrast { --ink-950: #090d0f; --ink-840: #111b1f; --mist-050: #fff; --mist-120: #eef5f3; --line: rgba(0,0,0,.34); --line-strong: rgba(0,0,0,.62); }
|
|
.low-power .stage-art { filter: saturate(.7) contrast(.92); }
|
|
.reduced-motion * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .001ms !important; }
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
* { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .001ms !important; }
|
|
}
|