2244 lines
189 KiB
CSS
2244 lines
189 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%, 1840px); 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%, 1600px); 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); }
|
|
|
|
/* Phase 8 experience prototype */
|
|
.experience-shell { display: grid; gap: 12px; }
|
|
.experience-progress { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin: 0; padding: 0; list-style: none; background: var(--line); border: 1px solid var(--line); }
|
|
.experience-progress li { min-height: 48px; display: flex; align-items: center; gap: 9px; padding: 8px 12px; color: var(--ink-700); background: var(--white); }
|
|
.experience-progress li > span { width: 25px; height: 25px; display: grid; flex: 0 0 auto; place-items: center; color: var(--white); font-size: 9px; font-weight: 900; background: var(--neutral-silver); border-radius: 50%; }
|
|
.experience-progress li > strong { font-size: 11px; }
|
|
.experience-progress li.is-current { color: var(--ink-950); box-shadow: inset 0 -4px var(--work-gold); }
|
|
.experience-progress li.is-current > span { color: var(--ink-950); background: var(--work-gold); }
|
|
.experience-progress li.is-complete > span { background: var(--safe-jade); }
|
|
.package-roadmap { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; color: var(--ink-700); background: var(--line); border: 1px solid var(--line); }
|
|
.package-roadmap > * { min-width: 0; padding: 8px 10px; overflow: hidden; font-size: 9px; background: var(--white); text-overflow: ellipsis; white-space: nowrap; }
|
|
.package-roadmap strong { color: var(--ink-950); box-shadow: inset 4px 0 var(--work-gold); }
|
|
.experience-contract, .experience-offers, .experience-review, .experience-receipt { height: 100%; position: relative; padding: 2% 3.2% 4.4%; }
|
|
.experience-contract, .experience-review { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 7px; }
|
|
.experience-stage-title h2 { margin: 2px 0; font-size: 20px; line-height: 1.15; }
|
|
.experience-stage-title p { max-width: 720px; margin: 0; color: #d3e0e1; font-size: 9px; line-height: 1.35; }
|
|
.experience-stage-actions { min-height: 37px; display: flex; align-items: center; gap: 7px; color: var(--mist-050); }
|
|
.experience-stage-actions > span { min-width: 0; margin-right: auto; overflow: hidden; font-size: 8px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
|
|
.experience-stage-actions > span b { color: var(--work-gold); font-size: 13px; }
|
|
.experience-contract-grid { min-height: 0; display: grid; grid-template-columns: .82fr 1.18fr; grid-template-rows: .72fr 1.28fr; gap: 6px; }
|
|
.experience-contract-card, .experience-contract-read, .experience-difficulty { min-width: 0; color: var(--ink-950); background: rgba(243,246,242,.96); border: 2px solid transparent; }
|
|
.experience-contract-card { grid-row: 1 / 3; display: grid; align-content: center; gap: 5px; padding: 15px; text-align: left; border-left: 5px solid var(--neutral-silver); }
|
|
.experience-contract-card.is-selected { border-color: var(--work-gold); border-left-color: var(--work-gold); box-shadow: inset 0 0 0 1px var(--ink-950); }
|
|
.experience-contract-card > span, .experience-contract-read > span, .experience-difficulty > span, .experience-inspect > span, .experience-review-grid section > span, .experience-review-grid aside > span, .experience-receipt-grid > * > span { color: var(--route-teal); font-size: 7px; font-weight: 900; }
|
|
.experience-contract-card > strong { font-size: 19px; }
|
|
.experience-contract-card > em { color: var(--ink-700); font-size: 9px; font-style: normal; font-weight: 800; }
|
|
.experience-contract-card > p { margin: 0; font-size: 9px; line-height: 1.35; }
|
|
.experience-contract-card > small { width: max-content; padding: 4px 6px; color: var(--white); font-size: 7px; font-weight: 900; background: var(--route-teal); }
|
|
.experience-contract-read, .experience-difficulty { padding: 8px 10px; }
|
|
.experience-contract-read dl, .experience-review-grid dl, .experience-receipt-grid dl { margin: 4px 0 0; }
|
|
.experience-contract-read dl > div, .experience-review-grid dl > div, .experience-receipt-grid dl > div { display: grid; grid-template-columns: 78px 1fr; gap: 5px; padding: 4px 0; font-size: 7px; border-bottom: 1px solid var(--line); }
|
|
.experience-contract-read dt, .experience-review-grid dt, .experience-receipt-grid dt { color: var(--ink-700); }
|
|
.experience-contract-read dd, .experience-review-grid dd, .experience-receipt-grid dd { margin: 0; font-weight: 800; }
|
|
.experience-difficulty > div { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-top: 5px; }
|
|
.experience-difficulty button { min-width: 0; display: grid; align-content: start; gap: 3px; padding: 6px; color: var(--ink-950); text-align: left; background: var(--white); border: 1px solid var(--line); border-bottom: 4px solid var(--neutral-silver); }
|
|
.experience-difficulty button.is-selected { border-color: var(--work-gold); border-bottom-color: var(--work-gold); }
|
|
.experience-difficulty button strong { font-size: 8px; }
|
|
.experience-difficulty button small { font-size: 6px; line-height: 1.25; }
|
|
.experience-difficulty button em { color: var(--ink-700); font-size: 5px; font-style: normal; line-height: 1.25; }
|
|
|
|
.experience-offers { display: grid; grid-template-columns: minmax(0, 1fr) 25%; grid-template-rows: auto minmax(0, 1fr) auto; gap: 6px; }
|
|
.experience-offers .experience-stage-title, .experience-offers .experience-stage-actions { grid-column: 1 / 3; }
|
|
.experience-offer-grid { min-height: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
|
|
.experience-offer { min-width: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto auto auto auto; color: var(--ink-950); background: rgba(243,246,242,.97); border: 2px solid transparent; }
|
|
.experience-offer.is-selected { border-color: var(--work-gold); box-shadow: inset 0 0 0 1px var(--ink-950); }
|
|
.experience-offer.is-inspected { border-top-color: var(--route-teal); }
|
|
.experience-offer-art { min-height: 0; position: relative; display: grid; place-items: end center; overflow: hidden; background: #dce8e4; }
|
|
.experience-offer-art .offer-character { width: 90%; }
|
|
.experience-offer-art > span { position: absolute; left: 4px; top: 4px; padding: 2px 3px; font-size: 5px; font-weight: 900; background: rgba(255,255,255,.9); }
|
|
.experience-offer > div:nth-child(2) { min-width: 0; padding: 4px 5px 2px; }
|
|
.experience-offer > div:nth-child(2) strong, .experience-offer > div:nth-child(2) small, .experience-offer > div:nth-child(2) em { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
.experience-offer > div:nth-child(2) strong { font-size: 8px; }
|
|
.experience-offer > div:nth-child(2) small { color: var(--route-teal); font-size: 5px; }
|
|
.experience-offer > div:nth-child(2) em { color: var(--ink-700); font-size: 5px; font-style: normal; }
|
|
.experience-offer > p { margin: 0; padding: 1px 5px; font-size: 5px; line-height: 1.25; }
|
|
.experience-offer > p b { color: var(--safe-jade); }
|
|
.experience-offer > p:nth-of-type(2) b { color: var(--danger-coral); }
|
|
.experience-offer > footer { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; padding: 4px; }
|
|
.experience-offer > footer button { min-height: 23px; padding: 2px; color: var(--ink-950); font-size: 6px; font-weight: 900; background: var(--white); border: 1px solid var(--line-strong); }
|
|
.experience-offer > footer button:last-child { background: #fff4ce; }
|
|
.experience-inspect { min-width: 0; display: grid; align-content: center; gap: 5px; padding: 10px; color: var(--ink-950); background: rgba(243,246,242,.97); border-top: 4px solid var(--neutral-silver); }
|
|
.experience-inspect.has-recruit { border-top-color: var(--route-teal); }
|
|
.experience-inspect > strong { font-size: 11px; }
|
|
.experience-inspect > p, .experience-inspect > small { margin: 0; font-size: 7px; line-height: 1.4; }
|
|
.experience-inspect > small { padding: 5px; background: var(--mist-180); }
|
|
.experience-notice { position: absolute; z-index: 8; left: 50%; bottom: 12%; max-width: 70%; padding: 6px 9px; color: var(--white); font-size: 7px; font-weight: 800; background: var(--danger-coral); transform: translateX(-50%); }
|
|
|
|
.experience-review-grid { min-height: 0; display: grid; grid-template-columns: 1fr 1fr .82fr; gap: 6px; }
|
|
.experience-review-grid > * { min-width: 0; padding: 8px; color: var(--ink-950); background: rgba(243,246,242,.97); }
|
|
.experience-review-grid section > div { display: grid; gap: 4px; margin-top: 5px; }
|
|
.experience-review-grid .recruit-marker { padding: 4px; }
|
|
.experience-review-grid .recruit-marker:not(.is-selected) { opacity: .62; filter: grayscale(.7); }
|
|
.experience-review-grid aside { border-top: 4px solid var(--work-gold); }
|
|
|
|
.experience-receipt { display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; gap: 6px; }
|
|
.experience-receipt > header { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 9px; }
|
|
.experience-receipt > header h2 { margin: 1px 0; font-size: 19px; }
|
|
.experience-receipt > header p { margin: 0; font-size: 8px; }
|
|
.experience-receipt > header > b { padding: 5px 7px; font-size: 8px; background: var(--work-gold); }
|
|
.receipt-check { width: 35px; height: 35px; display: grid; place-items: center; color: var(--white); font-size: 18px; font-weight: 900; background: var(--safe-jade); }
|
|
.experience-receipt-grid { min-height: 0; display: grid; grid-template-columns: 1.1fr .8fr .8fr; gap: 6px; }
|
|
.experience-receipt-grid > * { min-width: 0; padding: 8px; color: var(--ink-950); background: rgba(243,246,242,.97); }
|
|
.experience-receipt-grid section:first-child { display: grid; align-content: start; gap: 4px; }
|
|
.experience-receipt-grid section:nth-child(2) p { display: grid; grid-template-columns: auto 1fr; gap: 5px; margin: 5px 0 0; padding: 5px; font-size: 7px; background: var(--mist-120); }
|
|
.experience-receipt-grid section:nth-child(2) p b { color: var(--route-teal); }
|
|
.experience-next-package { display: flex; align-items: center; gap: 8px; padding: 6px 9px; color: var(--ink-950); background: rgba(243,246,242,.94); border-left: 5px solid var(--neutral-silver); }
|
|
.experience-next-package span { padding: 3px 5px; color: var(--white); font-size: 6px; font-weight: 900; background: var(--neutral-silver); }
|
|
.experience-next-package strong { font-size: 7px; }
|
|
|
|
/* P8.2 Market preparation */
|
|
.p82-market, .p82-equipment-offer, .p82-equip-select, .p82-order { height: 100%; display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; gap: 5px; padding: 1.8% 2.8% 3.8%; }
|
|
.p82-market .experience-stage-title > div, .p82-equipment-offer .experience-stage-title > div { display: flex; align-items: end; justify-content: space-between; gap: 10px; }
|
|
.p82-resource { min-width: 158px; display: grid; grid-template-columns: auto auto; align-items: baseline; gap: 1px 7px; padding: 5px 8px; color: var(--ink-950); background: rgba(243,246,242,.95); border-left: 4px solid var(--work-gold); }
|
|
.p82-resource span { color: var(--ink-700); font-size: 6px; font-weight: 900; }
|
|
.p82-resource strong { font-size: 17px; }
|
|
.p82-resource i { grid-column: 1 / 3; font-size: 6px; font-style: normal; }
|
|
.p82-company-bench { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
|
|
.p82-company-bench article { min-width: 0; min-height: 44px; display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 5px; padding: 4px 6px; color: var(--ink-950); background: rgba(243,246,242,.96); border-bottom: 3px solid var(--route-teal); }
|
|
.p82-company-bench article > span { width: 36px; height: 37px; display: grid; place-items: end center; overflow: hidden; background: #dce8e4; }
|
|
.p82-company-bench article > div { min-width: 0; }
|
|
.p82-company-bench strong, .p82-company-bench small, .p82-company-bench em { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
.p82-company-bench strong { font-size: 7px; }
|
|
.p82-company-bench small, .p82-company-bench em { color: var(--ink-700); font-size: 5px; font-style: normal; }
|
|
.p82-company-bench article > b { width: 18px; height: 18px; display: grid; place-items: center; color: var(--white); font-size: 7px; background: var(--ink-950); }
|
|
.p82-company-bench article.is-empty { border-bottom-color: var(--neutral-silver); border-style: dashed; }
|
|
.p82-company-bench article.is-empty > span { color: var(--ink-700); font-size: 13px; }
|
|
.p82-offer-board { min-height: 0; display: grid; grid-template-columns: 1.25fr .75fr; gap: 5px; }
|
|
.p82-offers { min-height: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
|
|
.p82-offers > button { min-width: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; position: relative; padding: 0; color: var(--ink-950); text-align: left; background: rgba(243,246,242,.97); border: 2px solid transparent; border-bottom: 5px solid var(--neutral-silver); overflow: hidden; }
|
|
.p82-offers > button.is-focused { border-color: var(--work-gold); border-bottom-color: var(--work-gold); }
|
|
.p82-offers > button > span { min-height: 0; display: grid; place-items: end center; overflow: hidden; background: #dce8e4; }
|
|
.p82-offers .market-offer-art { width: 88%; height: 100%; object-fit: contain; object-position: center bottom; }
|
|
.p82-offers > button > div { min-width: 0; padding: 4px 6px 6px; }
|
|
.p82-offers small, .p82-offers strong, .p82-offers em, .p82-offers p, .p82-offers b { display: block; }
|
|
.p82-offers small { color: var(--route-teal); font-size: 5px; }
|
|
.p82-offers strong { font-size: 8px; }
|
|
.p82-offers em { color: var(--ink-700); font-size: 5px; font-style: normal; }
|
|
.p82-offers p { margin: 2px 0; font-size: 5px; line-height: 1.25; }
|
|
.p82-offers b { font-size: 5px; }
|
|
.p82-offers > button > i { position: absolute; right: 4px; top: 4px; min-width: 34px; padding: 4px; color: var(--ink-950); font-size: 11px; font-style: normal; font-weight: 900; text-align: center; background: var(--work-gold); }
|
|
.p82-offers > button > i small { color: var(--ink-950); font-size: 4px; }
|
|
.p82-offer-inspect { min-width: 0; display: grid; align-content: center; gap: 5px; padding: 10px; color: var(--ink-950); background: rgba(243,246,242,.97); border-top: 4px solid var(--route-teal); }
|
|
.p82-offer-inspect > span, .p82-transaction > span, .p82-hire-facts > span, .p82-equip-delta > span, .p82-order-read > span { color: var(--route-teal); font-size: 6px; font-weight: 900; }
|
|
.p82-offer-inspect > strong { font-size: 12px; }
|
|
.p82-offer-inspect > p, .p82-offer-inspect > small, .p82-offer-inspect > b { display: block; margin: 0; font-size: 7px; line-height: 1.35; }
|
|
.p82-offer-inspect > small { padding: 3px 5px; background: var(--mist-180); }
|
|
.p82-offer-inspect > b { margin-top: 3px; padding-top: 5px; border-top: 1px solid var(--line); }
|
|
|
|
.p82-hire-review, .p82-item-review { height: 100%; display: grid; grid-template-columns: .62fr 1.15fr .8fr; grid-template-rows: auto minmax(0, 1fr) auto; gap: 6px; padding: 2% 3% 4%; }
|
|
.p82-hire-review > header { grid-column: 1 / 4; }
|
|
.p82-hire-figure { min-height: 0; position: relative; display: grid; place-items: end center; overflow: hidden; background: rgba(220,232,228,.97); }
|
|
.p82-hire-figure .offer-character { width: 92%; }
|
|
.p82-hire-figure > span { position: absolute; left: 6px; top: 6px; padding: 3px 5px; color: var(--ink-950); font-size: 6px; font-weight: 900; background: var(--work-gold); }
|
|
.p82-hire-facts, .p82-transaction { min-width: 0; padding: 10px; color: var(--ink-950); background: rgba(243,246,242,.97); }
|
|
.p82-hire-facts h3 { margin: 3px 0; font-size: 17px; }
|
|
.p82-hire-facts h4 { margin: 0 0 7px; color: var(--route-teal); font-size: 9px; }
|
|
.p82-hire-facts > div { display: grid; grid-template-columns: .8fr 1.2fr; gap: 4px; padding: 5px; font-size: 7px; background: var(--mist-120); border-bottom: 1px solid var(--line); }
|
|
.p82-hire-facts > p { font-size: 8px; line-height: 1.4; }
|
|
.p82-transaction { border-top: 4px solid var(--work-gold); }
|
|
.p82-transaction dl { margin: 5px 0 0; }
|
|
.p82-transaction dl > div { display: grid; grid-template-columns: 65px 1fr; gap: 5px; padding: 5px 0; font-size: 7px; border-bottom: 1px solid var(--line); }
|
|
.p82-transaction dt { color: var(--ink-700); }
|
|
.p82-transaction dd { margin: 0; font-weight: 900; }
|
|
.p82-hire-review > footer, .p82-item-review > footer { grid-column: 1 / 4; }
|
|
|
|
.p82-simple-receipt { height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; gap: 6px; padding: 2.2% 3.2% 4%; }
|
|
.p82-simple-receipt > header, .p82-ready > header { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; }
|
|
.p82-simple-receipt > header > span, .p82-ready > header > span { width: 34px; height: 34px; display: grid; place-items: center; color: var(--white); font-size: 17px; font-weight: 900; background: var(--safe-jade); }
|
|
.p82-simple-receipt > header small, .p82-simple-receipt > header h2, .p82-ready > header small, .p82-ready > header h2 { display: block; margin: 0; }
|
|
.p82-simple-receipt > header small, .p82-ready > header small { color: #b8e7df; font-size: 6px; }
|
|
.p82-simple-receipt > header h2, .p82-ready > header h2 { font-size: 17px; }
|
|
.p82-simple-receipt > header > b, .p82-ready > header > b { padding: 5px 7px; color: var(--ink-950); font-size: 7px; background: var(--work-gold); }
|
|
.p82-simple-receipt > section { min-height: 0; }
|
|
.p82-simple-receipt > aside { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
|
|
.p82-simple-receipt > aside > div { padding: 6px 8px; color: var(--ink-950); background: rgba(243,246,242,.97); }
|
|
.p82-simple-receipt > aside span, .p82-simple-receipt > aside strong { display: block; }
|
|
.p82-simple-receipt > aside span { color: var(--route-teal); font-size: 6px; font-weight: 900; }
|
|
.p82-simple-receipt > aside strong { margin-top: 2px; font-size: 10px; }
|
|
.p82-inventory-receipt { display: grid; grid-template-columns: repeat(12, 1fr); gap: 3px; padding: 9px; background: rgba(243,246,242,.97); }
|
|
.p82-inventory-receipt > div { min-width: 0; display: grid; place-items: center; align-content: center; color: var(--ink-700); background: var(--mist-120); border: 1px solid var(--line); }
|
|
.p82-inventory-receipt > div:first-child { color: var(--ink-950); background: var(--white); border-bottom: 4px solid var(--route-teal); }
|
|
.p82-inventory-receipt img { width: 58%; max-height: 42px; object-fit: contain; }
|
|
.p82-inventory-receipt strong, .p82-inventory-receipt small { overflow: hidden; max-width: 100%; font-size: 5px; text-overflow: ellipsis; white-space: nowrap; }
|
|
|
|
.p82-equipment-offer { grid-template-rows: auto minmax(0, 1fr) auto; }
|
|
.p82-item-card { min-height: 0; display: grid; grid-template-columns: .62fr 1.2fr .55fr; gap: 6px; }
|
|
.p82-item-card > * { min-width: 0; padding: 12px; color: var(--ink-950); background: rgba(243,246,242,.97); }
|
|
.p82-item-card > div { position: relative; display: grid; place-items: center; }
|
|
.p82-item-card > div img { max-width: 72%; max-height: 76%; }
|
|
.p82-item-card > div span { position: absolute; left: 7px; top: 7px; color: var(--route-teal); font-size: 7px; font-weight: 900; }
|
|
.p82-item-card h3 { margin: 4px 0 10px; font-size: 19px; }
|
|
.p82-item-card p { padding: 6px; font-size: 8px; line-height: 1.4; background: var(--mist-120); border-left: 4px solid var(--safe-jade); }
|
|
.p82-item-card p:last-child { border-left-color: var(--danger-coral); }
|
|
.p82-item-card > aside { display: grid; place-items: center; align-content: center; text-align: center; border-top: 4px solid var(--work-gold); }
|
|
.p82-item-card > aside span, .p82-item-card > aside strong, .p82-item-card > aside small { display: block; }
|
|
.p82-item-card > aside span { font-size: 6px; }
|
|
.p82-item-card > aside strong { font-size: 18px; }
|
|
.p82-item-card > aside small { font-size: 7px; }
|
|
.p82-item-review > section { position: relative; display: grid; place-items: center; background: rgba(220,232,228,.97); }
|
|
.p82-item-review > section img { max-width: 68%; max-height: 72%; }
|
|
.p82-item-review > section span { position: absolute; left: 8px; top: 8px; color: var(--route-teal); font-size: 7px; font-weight: 900; }
|
|
.p82-item-review > article, .p82-item-review > aside { min-width: 0; padding: 12px; color: var(--ink-950); background: rgba(243,246,242,.97); }
|
|
.p82-item-review h2 { margin: 4px 0; font-size: 18px; }
|
|
.p82-item-review p { font-size: 8px; line-height: 1.4; }
|
|
.p82-item-review article > div { display: grid; grid-template-columns: 1fr 1.2fr; padding: 5px; font-size: 7px; background: var(--mist-120); }
|
|
.p82-item-review > aside { display: grid; place-items: center; align-content: center; text-align: center; border-top: 4px solid var(--work-gold); }
|
|
.p82-item-review > aside > * { display: block; margin: 3px 0; }
|
|
|
|
.p82-equip-select { grid-template-columns: 1.2fr .8fr; grid-template-rows: auto minmax(0, 1fr) auto; }
|
|
.p82-equip-select > header, .p82-equip-select > footer { grid-column: 1 / 3; }
|
|
.p82-equip-company { min-height: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; }
|
|
.p82-equip-company button { min-width: 0; display: grid; grid-template-columns: 55px 1fr; align-items: center; gap: 7px; padding: 6px; color: var(--ink-950); text-align: left; background: rgba(243,246,242,.97); border: 2px solid transparent; }
|
|
.p82-equip-company button.is-selected { border-color: var(--work-gold); }
|
|
.p82-equip-company button > span { height: 64px; display: grid; place-items: end center; overflow: hidden; background: #dce8e4; }
|
|
.p82-equip-company strong, .p82-equip-company small, .p82-equip-company em { display: block; }
|
|
.p82-equip-company strong { font-size: 8px; }
|
|
.p82-equip-company small, .p82-equip-company em { color: var(--ink-700); font-size: 6px; font-style: normal; }
|
|
.p82-equip-delta { min-width: 0; display: grid; align-content: center; gap: 5px; padding: 12px; color: var(--ink-950); background: rgba(243,246,242,.97); border-top: 4px solid var(--route-teal); }
|
|
.p82-equip-delta h3 { margin: 0; font-size: 16px; }
|
|
.p82-equip-delta p, .p82-equip-delta small { display: block; margin: 0; padding: 6px; font-size: 7px; line-height: 1.35; background: var(--mist-120); }
|
|
.p82-equip-delta p b { display: block; color: var(--route-teal); font-size: 6px; }
|
|
.p82-equip-receipt { display: grid; grid-template-columns: .7fr 1fr 1fr; gap: 5px; }
|
|
.p82-equip-receipt > * { min-width: 0; display: grid; place-items: center; align-content: center; gap: 4px; padding: 8px; color: var(--ink-950); text-align: center; background: rgba(243,246,242,.97); }
|
|
.p82-equip-receipt article img { max-height: 90px; }
|
|
.p82-equip-receipt > div img { max-height: 72px; }
|
|
.p82-equip-receipt span, .p82-equip-receipt strong, .p82-equip-receipt small { display: block; font-size: 7px; }
|
|
|
|
.p82-order { grid-template-columns: minmax(0, 1fr) 24%; grid-template-rows: auto auto minmax(0, 1fr) auto; }
|
|
.p82-order > header, .p82-order > .p82-order-direction, .p82-order > footer { grid-column: 1 / 3; }
|
|
.p82-order-direction { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; font-size: 7px; font-weight: 900; }
|
|
.p82-order-direction i { height: 2px; background: linear-gradient(90deg, var(--route-teal), var(--danger-coral)); }
|
|
.p82-order-line { min-height: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; align-items: center; }
|
|
.p82-order-line button { min-width: 0; height: 76%; display: grid; grid-template-columns: 1fr auto; grid-template-rows: minmax(0, 1fr) auto auto; align-items: end; padding: 5px; color: var(--ink-950); background: rgba(243,246,242,.97); border: 2px solid var(--route-teal); }
|
|
.p82-order-line button:first-child { border-color: var(--route-teal); }
|
|
.p82-order-line button:last-child { border-color: var(--danger-coral); }
|
|
.p82-order-line button.is-source { border-color: var(--work-gold); box-shadow: 0 0 0 3px rgba(214,167,46,.38); }
|
|
.p82-order-line button > span { grid-column: 1 / 3; min-height: 0; display: grid; place-items: end center; overflow: hidden; }
|
|
.p82-order-line button > b { width: 20px; height: 20px; display: grid; place-items: center; color: var(--white); font-size: 8px; background: var(--ink-950); }
|
|
.p82-order-line button > strong { justify-self: end; overflow: hidden; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
|
|
.p82-order-line button > small { grid-column: 1 / 3; color: var(--ink-700); font-size: 5px; }
|
|
.p82-order-read { min-width: 0; display: grid; align-content: center; gap: 6px; padding: 10px; color: var(--ink-950); background: rgba(243,246,242,.97); border-top: 4px solid var(--work-gold); }
|
|
.p82-order-read strong { font-size: 13px; }
|
|
.p82-order-read p, .p82-order-read small { margin: 0; font-size: 7px; line-height: 1.4; }
|
|
|
|
.p82-ready { height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto auto; gap: 5px; padding: 2% 3% 3.8%; }
|
|
.p82-ready-line { min-height: 0; display: grid; grid-template-columns: auto repeat(4, 1fr) auto; align-items: center; gap: 5px; }
|
|
.p82-ready-line > span { font-size: 6px; font-weight: 900; text-align: center; writing-mode: vertical-rl; }
|
|
.p82-ready-line article { min-width: 0; height: 100%; display: grid; grid-template-columns: 1fr auto; grid-template-rows: minmax(0, 1fr) auto auto; align-items: end; padding: 4px; color: var(--ink-950); background: rgba(243,246,242,.97); border-bottom: 4px solid var(--route-teal); }
|
|
.p82-ready-line article > div { grid-column: 1 / 3; min-height: 0; display: grid; place-items: end center; overflow: hidden; }
|
|
.p82-ready-line article > b { width: 18px; height: 18px; display: grid; place-items: center; color: var(--white); font-size: 7px; background: var(--ink-950); }
|
|
.p82-ready-line article > strong { justify-self: end; overflow: hidden; font-size: 6px; text-overflow: ellipsis; white-space: nowrap; }
|
|
.p82-ready-line article > small { grid-column: 1 / 3; color: var(--ink-700); font-size: 5px; }
|
|
.p82-ready-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
|
|
.p82-ready-facts article { min-width: 0; padding: 6px; color: var(--ink-950); background: rgba(243,246,242,.97); }
|
|
.p82-ready-facts span, .p82-ready-facts strong, .p82-ready-facts small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
.p82-ready-facts span { color: var(--route-teal); font-size: 5px; font-weight: 900; }
|
|
.p82-ready-facts strong { margin: 2px 0; font-size: 8px; }
|
|
.p82-ready-facts small { color: var(--ink-700); font-size: 5px; }
|
|
|
|
/* P8.3 Risk and automatic battle */
|
|
.p83-risk-board, .p83-opening { height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; grid-template-columns: minmax(0, 1fr) 27%; gap: 6px; padding: 1.8% 2.8% 3.8%; }
|
|
.p83-risk-board > header, .p83-risk-board > footer, .p83-opening > header, .p83-opening > .p83-life-rule, .p83-opening > footer { grid-column: 1 / 3; }
|
|
.p83-risk-board .experience-stage-title > div { display: flex; align-items: end; justify-content: space-between; gap: 10px; }
|
|
.p83-risk-options { min-height: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
|
|
.p83-risk-options button { min-width: 0; display: grid; grid-template-rows: auto auto auto auto auto minmax(0, 1fr) auto; gap: 5px; padding: 11px; color: var(--ink-950); text-align: left; background: rgba(243,246,242,.97); border: 2px solid transparent; border-bottom: 5px solid var(--neutral-silver); }
|
|
.p83-risk-options button.is-selected { border-color: var(--work-gold); border-bottom-color: var(--work-gold); }
|
|
.p83-risk-options button > span, .p83-risk-read > span, .p83-review-threat > span, .p83-review-company > span, .p83-review-terms > span, .p83-opening-intel > span { color: var(--route-teal); font-size: 6px; font-weight: 900; }
|
|
.p83-risk-options button > strong { font-size: 16px; }
|
|
.p83-risk-options button > em { width: max-content; padding: 3px 5px; color: var(--white); font-size: 6px; font-style: normal; font-weight: 900; background: var(--danger-coral); }
|
|
.p83-risk-options button > p { margin: 0; padding: 7px; font-size: 7px; line-height: 1.35; background: var(--mist-120); }
|
|
.p83-risk-options button > p b { display: block; margin-bottom: 2px; color: var(--route-teal); font-size: 5px; }
|
|
.p83-risk-options button > small { font-size: 7px; font-weight: 900; }
|
|
.p83-risk-read { min-width: 0; display: grid; align-content: center; gap: 6px; padding: 11px; color: var(--ink-950); background: rgba(243,246,242,.97); border-top: 4px solid var(--route-teal); }
|
|
.p83-risk-read h3 { margin: 0; font-size: 16px; }
|
|
.p83-risk-read > strong, .p83-risk-read > p, .p83-risk-read > small { font-size: 7px; line-height: 1.4; }
|
|
.p83-risk-read > div { display: grid; gap: 3px; }
|
|
.p83-risk-read > div p { display: grid; grid-template-columns: 25px 1fr; gap: 5px; margin: 0; padding: 5px; font-size: 7px; background: var(--mist-120); }
|
|
.p83-risk-read > div b { color: var(--route-teal); }
|
|
.p83-risk-mini { min-height: 0; display: flex; align-items: end; justify-content: center; gap: 4px; padding: 4px; background: linear-gradient(180deg, #e3ece9, #cbdcd7); }
|
|
.p83-risk-mini i { min-width: 0; flex: 1 1 0; display: grid; place-items: end center; color: var(--ink-950); font-size: 18px; font-style: normal; font-weight: 900; }
|
|
.p83-risk-mini img { width: 100%; max-height: 72px; object-fit: contain; object-position: center bottom; transform: scaleX(-1); }
|
|
.p83-risk-mini small { display: block; width: 100%; overflow: hidden; font-size: 4px; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
|
|
.p83-risk-mini i.is-unknown { align-self: stretch; place-items: center; border: 1px dashed var(--neutral-silver); }
|
|
.p83-prepared-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; }
|
|
.p83-prepared-facts b { padding: 5px; color: var(--ink-950); font-size: 6px; background: var(--mist-120); }
|
|
|
|
.p83-risk-review { height: 100%; display: grid; grid-template-columns: .72fr 1.35fr .8fr; grid-template-rows: auto minmax(0, 1fr) auto; gap: 6px; padding: 2% 3% 4%; }
|
|
.p83-risk-review > header, .p83-risk-review > footer { grid-column: 1 / 4; }
|
|
.p83-review-threat, .p83-review-company, .p83-review-terms { min-width: 0; padding: 11px; color: var(--ink-950); background: rgba(243,246,242,.97); }
|
|
.p83-review-threat { border-top: 4px solid var(--danger-coral); }
|
|
.p83-review-threat h3 { margin: 4px 0 8px; font-size: 15px; }
|
|
.p83-review-threat p { display: grid; grid-template-columns: 28px 1fr; gap: 5px; margin: 3px 0; padding: 6px; font-size: 7px; background: var(--mist-120); }
|
|
.p83-review-threat small { display: block; margin-top: 7px; font-size: 7px; line-height: 1.35; }
|
|
.p83-review-company { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
|
|
.p83-review-company > p { margin: 4px 0 0; padding: 6px; font-size: 7px; background: var(--mist-120); }
|
|
.p83-review-terms { border-top: 4px solid var(--work-gold); }
|
|
.p83-review-terms dl { margin: 6px 0; }
|
|
.p83-review-terms dl > div { display: grid; grid-template-columns: 62px 1fr; gap: 4px; padding: 5px 0; font-size: 7px; border-bottom: 1px solid var(--line); }
|
|
.p83-review-terms dt { color: var(--ink-700); }
|
|
.p83-review-terms dd { margin: 0; font-weight: 900; }
|
|
.p83-review-line, .p83-receipt-line, .p83-party-line, .p83-live-party { min-height: 0; display: grid; grid-template-columns: auto repeat(4, minmax(0, 1fr)) auto; align-items: end; gap: 4px; }
|
|
.p83-review-line > span, .p83-receipt-line > span, .p83-party-line > span, .p83-live-party > span { align-self: center; font-size: 5px; font-weight: 900; text-align: center; writing-mode: vertical-rl; }
|
|
.p83-review-line article, .p83-receipt-line article, .p83-party-line article, .p83-live-party article { min-width: 0; height: 100%; display: grid; grid-template-columns: 1fr auto; grid-template-rows: minmax(0, 1fr) auto auto; align-items: end; padding: 3px; background: var(--mist-050); border-bottom: 3px solid var(--route-teal); }
|
|
.p83-review-line article > div, .p83-receipt-line article > div, .p83-party-line article > div, .p83-live-party article > div { grid-column: 1 / 3; min-height: 0; display: grid; place-items: end center; overflow: hidden; }
|
|
.p83-party-actor { max-width: 100%; max-height: 100%; object-fit: contain; object-position: center bottom; }
|
|
.p83-review-line article > b, .p83-receipt-line article > b, .p83-party-line article > b, .p83-live-party article > b { width: 18px; height: 18px; display: grid; place-items: center; color: var(--white); font-size: 7px; background: var(--ink-950); }
|
|
.p83-review-line article > strong, .p83-receipt-line article > strong, .p83-party-line article > strong, .p83-live-party article > strong { justify-self: end; overflow: hidden; font-size: 5px; text-overflow: ellipsis; white-space: nowrap; }
|
|
.p83-review-line article > small, .p83-receipt-line article > small, .p83-party-line article > small, .p83-live-party article > small { grid-column: 1 / 3; color: var(--ink-700); font-size: 4px; }
|
|
|
|
.p83-receipt, .p83-resolved { height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; gap: 6px; padding: 2.2% 3.2% 4%; }
|
|
.p83-receipt > header, .p83-resolved > header { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; }
|
|
.p83-receipt > header > span, .p83-resolved > header > span { width: 34px; height: 34px; display: grid; place-items: center; color: var(--white); font-size: 17px; font-weight: 900; background: var(--safe-jade); }
|
|
.p83-receipt > header small, .p83-receipt > header h2, .p83-resolved > header small, .p83-resolved > header h2 { display: block; margin: 0; }
|
|
.p83-receipt > header small, .p83-resolved > header small { color: #b8e7df; font-size: 6px; }
|
|
.p83-receipt > header h2, .p83-resolved > header h2 { font-size: 17px; }
|
|
.p83-receipt > header > b, .p83-resolved > header > b { padding: 5px 7px; color: var(--ink-950); font-size: 7px; background: var(--work-gold); }
|
|
.p83-receipt > aside { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
|
|
.p83-receipt > aside > div, .p83-resolved > section article { padding: 6px 8px; color: var(--ink-950); background: rgba(243,246,242,.97); }
|
|
.p83-receipt > aside span, .p83-receipt > aside strong, .p83-resolved > section span, .p83-resolved > section strong, .p83-resolved > section small { display: block; }
|
|
.p83-receipt > aside span, .p83-resolved > section span { color: var(--route-teal); font-size: 6px; font-weight: 900; }
|
|
.p83-receipt > aside strong, .p83-resolved > section strong { margin-top: 2px; font-size: 9px; }
|
|
|
|
.p83-opening { grid-template-rows: auto minmax(0, 1fr) auto; }
|
|
.p83-life-rule { display: flex; gap: 5px; }
|
|
.p83-life-rule strong { padding: 5px 7px; color: var(--white); font-size: 7px; background: var(--danger-coral); }
|
|
.p83-opening-dynamic { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr) auto auto; }
|
|
.p83-opening-dynamic > header, .p83-opening-dynamic > footer { grid-column: 1; }
|
|
.p83-opening-dynamic > header { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 8px; }
|
|
.p83-opening-dynamic > header > div { display: flex; align-items: center; gap: 9px; }
|
|
.p83-opening-dynamic .p83-arena, .p83-opening-dynamic .p83-opening-intel { grid-column: 1; }
|
|
.p83-opening-dynamic .p83-opening-intel { display: grid; grid-template-columns: auto minmax(0, 1fr) 2fr; align-items: center; gap: 8px; padding: 5px 8px; border-top-width: 3px; }
|
|
.p83-opening-dynamic .p83-opening-intel > strong { font-size: 8px; }
|
|
.p83-opening-dynamic .p83-opening-intel > p { font-size: 6px; }
|
|
.p83-opening-lines { min-height: 0; display: grid; grid-template-columns: 1.2fr auto .9fr; align-items: stretch; gap: 5px; }
|
|
.p83-opening-lines > i { align-self: center; padding: 5px; color: var(--ink-950); font-size: 8px; font-style: normal; font-weight: 900; background: var(--work-gold); }
|
|
.p83-opening-intel { min-width: 0; display: grid; align-content: center; gap: 6px; padding: 10px; color: var(--ink-950); background: rgba(243,246,242,.97); border-top: 4px solid var(--danger-coral); }
|
|
.p83-opening-intel > strong { font-size: 13px; }
|
|
.p83-opening-intel > p, .p83-opening-intel > small { margin: 0; font-size: 7px; line-height: 1.4; }
|
|
.p83-enemy-line { min-height: 0; display: grid; grid-template-columns: auto repeat(3, minmax(0, 1fr)) auto; align-items: end; gap: 4px; direction: rtl; }
|
|
.p83-enemy-line > span { align-self: center; font-size: 5px; font-weight: 900; writing-mode: vertical-rl; }
|
|
.p83-enemy-line article { min-width: 0; height: 100%; display: grid; grid-template-columns: 1fr auto; grid-template-rows: minmax(0, 1fr) auto; align-items: end; padding: 3px; color: var(--ink-950); background: rgba(243,246,242,.97); border-bottom: 3px solid var(--danger-coral); direction: ltr; }
|
|
.p83-enemy-line article > div { grid-column: 1 / 3; min-height: 0; display: grid; place-items: end center; overflow: hidden; font-size: 30px; }
|
|
.p83-enemy-line article img { max-width: 100%; max-height: 100%; object-fit: contain; object-position: center bottom; transform: scaleX(-1); }
|
|
.p83-enemy-line article > b { width: 18px; height: 18px; display: grid; place-items: center; color: var(--white); font-size: 7px; background: var(--danger-coral); }
|
|
.p83-enemy-line article > strong { justify-self: end; overflow: hidden; font-size: 5px; text-overflow: ellipsis; white-space: nowrap; }
|
|
.p83-enemy-line article.is-unknown { border-style: dashed; }
|
|
|
|
.p83-battle { height: 100%; position: relative; display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto auto; gap: 4px; padding: 1.1% 2.3% 3%; }
|
|
.p83-battle > header { display: flex; align-items: start; justify-content: space-between; gap: 10px; }
|
|
.p83-battle > header h2 { margin: 2px 0; font-size: 17px; }
|
|
.p83-playback { display: flex; gap: 3px; }
|
|
.p83-playback button { min-width: 31px; height: 29px; padding: 3px 6px; color: var(--mist-050); font-size: 7px; font-weight: 900; background: var(--ink-840); border: 1px solid #6b7c82; }
|
|
.p83-playback button.is-active { color: var(--ink-950); background: var(--work-gold); }
|
|
.p83-battle-rules { display: flex; gap: 4px; align-items: center; }
|
|
.p83-battle-rules span, .p83-battle-rules b { padding: 3px 6px; color: var(--white); font-size: 6px; background: var(--danger-coral); }
|
|
.p83-battle-rules b { margin-left: auto; color: var(--ink-950); background: var(--work-gold); }
|
|
.p83-arena { min-height: 0; position: relative; overflow: hidden; background: linear-gradient(180deg, rgba(22,38,43,.05), rgba(14,27,31,.86)); border-top: 1px solid rgba(255,255,255,.25); border-bottom: 1px solid rgba(255,255,255,.25); isolation: isolate; }
|
|
.p83-arena::before { content: ""; position: absolute; inset: 0; z-index: -3; background: linear-gradient(90deg, rgba(20,117,113,.24), transparent 42%, transparent 58%, rgba(164,48,56,.22)); }
|
|
.p83-arena::after { content: ""; position: absolute; left: 7%; right: 7%; bottom: 17%; z-index: -1; height: 12%; background: radial-gradient(ellipse, rgba(0,0,0,.48), transparent 72%); filter: blur(4px); }
|
|
.p83-arena-depth { position: absolute; inset: 10% 0 18%; z-index: -2; overflow: hidden; opacity: .42; }
|
|
.p83-arena-depth i { position: absolute; width: 21%; height: 55%; bottom: 0; background: rgba(118,159,150,.24); clip-path: polygon(0 100%, 15% 34%, 28% 70%, 44% 8%, 63% 63%, 77% 27%, 100% 100%); }
|
|
.p83-arena-depth i:nth-child(1) { left: 2%; }
|
|
.p83-arena-depth i:nth-child(2) { left: 40%; transform: scale(.75); }
|
|
.p83-arena-depth i:nth-child(3) { right: -2%; transform: scaleX(-1); }
|
|
.p83-side-marker { position: absolute; z-index: 4; top: 5%; display: flex; align-items: center; gap: 5px; padding: 3px 5px; color: var(--white); font-size: 5px; font-weight: 900; background: rgba(14,28,33,.78); }
|
|
.p83-side-marker b { width: 18px; height: 18px; display: grid; place-items: center; color: var(--ink-950); background: var(--work-gold); }
|
|
.p83-side-marker.is-allied { left: 2%; border-left: 3px solid var(--route-teal); }
|
|
.p83-side-marker.is-hostile { right: 2%; border-right: 3px solid var(--danger-coral); }
|
|
.p83-ground-line { position: absolute; left: 3%; right: 3%; bottom: 17%; height: 8px; background: #17242a; border: 1px solid rgba(255,255,255,.5); box-shadow: 0 5px 0 rgba(16,30,34,.55), 0 -2px 12px rgba(231,192,81,.18); }
|
|
.p83-ground-line i { position: absolute; inset: 1px 0; background: repeating-linear-gradient(90deg, rgba(214,167,46,.65) 0 3%, transparent 3% 6%); opacity: .45; }
|
|
.p83-direction { position: absolute; bottom: 5%; z-index: 4; color: #d8e4df; font-size: 5px; font-weight: 900; }
|
|
.p83-direction.is-left { left: 3%; }
|
|
.p83-direction.is-right { right: 3%; }
|
|
.p83-fighter { position: absolute; left: var(--fighter-x); bottom: 17%; z-index: 2; width: 10.5%; height: 61%; transform: translateX(-50%); transition: filter .16s ease-out; }
|
|
.p83-fighter.is-enemy { width: 11%; }
|
|
.p83-fighter.is-translating { animation: p83-formation-close calc(.82s / var(--p83-speed, 1)) cubic-bezier(.22,.76,.3,1) both; }
|
|
.p83-fighter.is-fallen { z-index: 1; pointer-events: none; }
|
|
.p83-fighter.is-fallen .p83-fighter-state { opacity: 0; }
|
|
.p83-fighter.is-fallen .p83-fighter-body { transform: translate(48%, 14%) rotate(-78deg); transform-origin: center bottom; filter: grayscale(.4) brightness(.62); }
|
|
.p83-fighter-state { position: absolute; left: 50%; top: -1%; z-index: 4; width: 102%; padding: 3px 4px; color: var(--ink-950); background: rgba(243,246,242,.92); border-top: 3px solid var(--route-teal); transform: translateX(-50%); }
|
|
.p83-fighter.is-enemy .p83-fighter-state { border-top-color: var(--danger-coral); }
|
|
.p83-fighter-state span, .p83-fighter-state b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
.p83-fighter-state span { color: var(--route-teal); font-size: 4px; font-weight: 900; }
|
|
.p83-fighter-state b { font-size: 5px; }
|
|
.p83-fighter-state > i { display: block; height: 3px; margin-top: 2px; overflow: hidden; background: rgba(42,54,59,.25); }
|
|
.p83-fighter-state > i em { display: block; height: 100%; background: var(--safe-jade); transition: width .35s ease-out; }
|
|
.p83-fighter.is-enemy .p83-fighter-state > i em { background: var(--danger-coral); }
|
|
.p83-fighter-body { position: absolute; inset: 9% 0 0; display: grid; place-items: end center; transform-origin: center bottom; }
|
|
.p83-fighter-art { width: 100%; height: 100%; object-fit: contain; object-position: center bottom; filter: drop-shadow(0 4px 4px rgba(4,11,14,.52)); }
|
|
.p83-motion-sprite { position: relative; width: 100%; height: 100%; display: block; background-position: center bottom; background-repeat: no-repeat; background-size: contain; }
|
|
.p83-motion-sprite img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center bottom; opacity: 0; filter: drop-shadow(0 4px 4px rgba(4,11,14,.52)); animation-duration: calc(var(--motion-cycle) / var(--p83-speed, 1)); animation-timing-function: steps(1,end); animation-delay: var(--motion-delay); animation-iteration-count: infinite; }
|
|
.p83-motion-sprite img:first-child { opacity: 1; }
|
|
.p83-motion-sprite.frames-4 img { animation-name: p83-frame-4; }
|
|
.p83-motion-sprite.frames-6 img { animation-name: p83-frame-6; }
|
|
.p83-motion-sprite.frames-8 img { animation-name: p83-frame-8; }
|
|
.p83-fighter.is-enemy .p83-motion-sprite img { transform: scaleX(-1); }
|
|
.p83-battle.is-paused .p83-motion-sprite, .p83-arena.is-frozen .p83-motion-sprite { background-image: var(--motion-poster); }
|
|
.p83-battle.is-paused .p83-fighter.is-enemy .p83-motion-sprite, .p83-arena.is-frozen .p83-fighter.is-enemy .p83-motion-sprite { transform: scaleX(-1); }
|
|
.p83-battle.is-paused .p83-motion-sprite img, .p83-arena.is-frozen .p83-motion-sprite img { visibility: hidden; }
|
|
.p83-static-motion { width: 100%; height: 100%; display: grid; place-items: end center; transform-origin: center bottom; animation: p83-breathe calc(.95s / var(--p83-speed, 1)) ease-in-out infinite alternate; }
|
|
.p83-static-motion.is-advance { animation-name: p83-stride; }
|
|
.p83-static-motion.is-ranged { animation: p83-ranged calc(.5s / var(--p83-speed, 1)) ease-out infinite; }
|
|
.p83-static-motion.is-sustain { animation: p83-cast calc(.75s / var(--p83-speed, 1)) ease-in-out infinite; }
|
|
.p83-ground-shadow { position: absolute; left: 17%; right: 17%; bottom: -2px; height: 7px; z-index: -1; background: rgba(0,0,0,.42); border-radius: 50%; filter: blur(2px); }
|
|
.p83-unknown-body { width: 54%; aspect-ratio: 1; display: grid; place-items: center; margin-bottom: 10%; color: var(--white); font-size: 30px; font-weight: 900; background: rgba(52,34,71,.82); border: 2px dashed #d7b9f6; border-radius: 50%; }
|
|
.p83-fighter.motion-attack .p83-fighter-body { animation: p83-lunge calc(.46s / var(--p83-speed, 1)) ease-in-out infinite; }
|
|
.p83-fighter.motion-hit .p83-fighter-body { animation: p83-hit calc(.38s / var(--p83-speed, 1)) ease-out infinite; }
|
|
.p83-action-burst { position: absolute; z-index: 5; width: 10%; height: 28%; display: grid; place-items: center; animation: p83-burst calc(.65s / var(--p83-speed, 1)) ease-out infinite; }
|
|
.p83-action-burst img { max-width: 100%; max-height: 100%; }
|
|
.p83-action-burst.is-slash { left: 51%; bottom: 27%; }
|
|
.p83-action-burst.is-guard { left: 31%; bottom: 29%; }
|
|
.p83-action-burst.is-ranged-hit { right: 11%; bottom: 34%; }
|
|
.p83-projectile { position: absolute; left: 28%; bottom: 51%; z-index: 6; width: 9%; height: 3px; background: #f9dd6b; box-shadow: 0 0 9px #f7f0ad; animation: p83-projectile calc(.68s / var(--p83-speed, 1)) linear infinite; }
|
|
.p83-projectile::after { content: ""; position: absolute; right: -3px; top: -3px; border-width: 4px 0 4px 7px; border-style: solid; border-color: transparent transparent transparent #fff3b0; }
|
|
.p83-heal-link { position: absolute; left: 19%; bottom: 48%; z-index: 4; width: 18%; height: 3px; transform: rotate(-6deg); transform-origin: left; background: linear-gradient(90deg, rgba(90,223,174,.1), #80edbb); box-shadow: 0 0 8px #80edbb; }
|
|
.p83-heal-ring { position: absolute; left: 29%; bottom: 22%; z-index: 5; width: 14%; aspect-ratio: 1; border: 5px solid rgba(90,223,174,.72); border-radius: 50%; animation: p83-heal calc(.9s / var(--p83-speed, 1)) ease-out infinite; }
|
|
.p83-float-number { position: absolute; z-index: 7; padding: 2px 4px; font-size: 8px; background: rgba(15,25,29,.82); animation: p83-float calc(.8s / var(--p83-speed, 1)) ease-out infinite; }
|
|
.p83-float-number.is-enemy-hit { left: 56%; top: 31%; color: #ffaaa6; }
|
|
.p83-float-number.is-guarded { left: 34%; top: 29%; color: #ffe27a; }
|
|
.p83-float-number.is-rear-hit { right: 13%; top: 27%; color: #ffaaa6; }
|
|
.p83-float-number.is-heal { left: 34%; top: 34%; color: #95f3c7; }
|
|
.p83-float-number.is-spell-hit { left: 43%; top: 25%; color: #d8b6ff; }
|
|
.p83-equipment-trigger { position: absolute; left: 39%; top: 7%; z-index: 7; display: flex; align-items: center; gap: 4px; padding: 3px 5px; color: var(--ink-950); background: rgba(243,246,242,.94); border-left: 3px solid var(--work-gold); }
|
|
.p83-equipment-trigger img { width: 22px; height: 22px; object-fit: contain; }
|
|
.p83-equipment-trigger span { font-size: 5px; font-weight: 900; }
|
|
.p83-contact-marker { position: absolute; left: var(--contact-x); top: 14%; bottom: 16%; z-index: 1; width: 1px; border-left: 2px dashed rgba(255,226,122,.82); }
|
|
.p83-contact-marker i { position: absolute; left: -7px; bottom: 0; width: 12px; height: 12px; border: 2px solid var(--work-gold); background: #17242a; transform: rotate(45deg); }
|
|
.p83-contact-marker span { position: absolute; left: 0; top: 0; padding: 3px 5px; color: var(--ink-950); font-size: 5px; font-weight: 900; white-space: nowrap; background: var(--work-gold); transform: translateX(-50%); }
|
|
.p83-contact-marker.is-replacement span { color: var(--white); background: var(--danger-coral); }
|
|
.p83-no-respawn { position: absolute; left: 48%; bottom: 19%; z-index: 7; display: grid; gap: 1px; padding: 3px 5px; color: var(--white); background: rgba(131,38,46,.9); border-left: 3px solid #ffaaa6; }
|
|
.p83-no-respawn b, .p83-no-respawn span { font-size: 5px; }
|
|
.p83-spell-demo { position: absolute; right: 2%; top: 6%; z-index: 7; display: grid; gap: 1px; padding: 4px 6px; color: var(--white); background: rgba(54,35,80,.92); border-left: 3px solid #cda8ff; }
|
|
.p83-spell-demo b, .p83-spell-demo span { font-size: 5px; }
|
|
.p83-spell-sigil { position: absolute; left: 77%; bottom: 39%; z-index: 7; width: 30px; height: 30px; display: grid; place-items: center; color: #f0d8ff; font-size: 19px; border: 2px solid #cda8ff; transform: rotate(45deg); animation: p83-spell-charge calc(.72s / var(--p83-speed, 1)) ease-in-out infinite; }
|
|
.p83-spell-projectile { position: absolute; left: 76%; bottom: 51%; z-index: 7; width: 20px; height: 10px; border-radius: 50%; background: #e6c5ff; box-shadow: 0 0 6px 3px #a768e8, 0 0 15px #d8b6ff; animation: p83-spell-bolt calc(.72s / var(--p83-speed, 1)) cubic-bezier(.4,0,.7,1) infinite; }
|
|
.p83-spell-projectile::after { content: ""; position: absolute; right: 12px; top: 3px; width: 28px; height: 4px; background: linear-gradient(90deg, transparent, #cda8ff); }
|
|
.p83-spell-impact { position: absolute; left: 43%; bottom: 37%; z-index: 7; width: 35px; height: 35px; border: 4px double #d8b6ff; transform: rotate(45deg); animation: p83-spell-impact calc(.72s / var(--p83-speed, 1)) ease-out infinite; }
|
|
.p83-battle.speed-1, .p83-opening { --p83-speed: 1; }
|
|
.p83-battle.speed-2 { --p83-speed: 2; }
|
|
.p83-battle.speed-4 { --p83-speed: 4; }
|
|
.p83-battle.is-paused *, .p83-arena.is-frozen * { animation-play-state: paused !important; }
|
|
.p83-battle-read { display: grid; grid-template-columns: minmax(0, 1fr) 47%; align-items: center; gap: 6px; }
|
|
.p83-battle-read article { min-width: 0; padding: 5px 7px; color: var(--ink-950); background: rgba(243,246,242,.96); border-left: 4px solid var(--work-gold); }
|
|
.p83-battle-read article span, .p83-battle-read article strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
.p83-battle-read article span { color: var(--route-teal); font-size: 5px; font-weight: 900; }
|
|
.p83-battle-read article strong { font-size: 7px; }
|
|
.p83-battle-read article p { margin: 2px 0 0; overflow: hidden; font-size: 5px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
|
|
.p83-timeline { position: relative; display: grid; grid-template-columns: repeat(9, 1fr); gap: 2px; padding-top: 5px; }
|
|
.p83-timeline::before, .p83-timeline > i { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--neutral-silver); }
|
|
.p83-timeline > i { right: auto; width: var(--battle-progress); background: var(--work-gold); }
|
|
.p83-timeline button { min-width: 0; padding: 3px 1px 0; color: #b7c4c6; font-size: 5px; text-align: center; background: transparent; border: 0; }
|
|
.p83-timeline button.is-reached { color: var(--work-gold); }
|
|
.p83-timeline button.is-current { font-weight: 900; }
|
|
.p83-timeline button:disabled { opacity: .45; }
|
|
.p83-battle-finish { display: flex; align-items: center; justify-content: end; gap: 8px; font-size: 7px; }
|
|
.p83-cause-sheet { position: absolute; z-index: 8; right: 2.4%; top: 15%; bottom: 5%; width: 34%; display: grid; align-content: center; gap: 7px; padding: 13px; color: var(--ink-950); background: rgba(243,246,242,.99); border-top: 5px solid var(--work-gold); box-shadow: var(--shadow); }
|
|
.p83-cause-sheet > span { color: var(--route-teal); font-size: 7px; font-weight: 900; }
|
|
.p83-cause-sheet h3 { margin: 0; font-size: 16px; }
|
|
.p83-cause-sheet p { margin: 0; font-size: 8px; line-height: 1.45; }
|
|
.p83-cause-sheet dl { margin: 0; }
|
|
.p83-cause-sheet dl > div { display: grid; grid-template-columns: 80px 1fr; gap: 5px; padding: 5px 0; font-size: 7px; border-bottom: 1px solid var(--line); }
|
|
.p83-cause-sheet dd { margin: 0; font-weight: 900; }
|
|
.p83-resolved { grid-template-rows: auto auto minmax(0, 1fr) auto auto; }
|
|
.p83-resolved > section { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
|
|
.p83-resolved > section small { margin-top: 3px; color: var(--ink-700); font-size: 6px; }
|
|
.p83-resolved-line { min-height: 0; display: grid; grid-template-columns: 1.35fr .65fr; gap: 5px; }
|
|
.p83-resolved-line > aside { display: grid; align-content: center; gap: 5px; padding: 10px; color: var(--ink-950); background: rgba(243,246,242,.97); border-top: 4px solid var(--work-gold); }
|
|
.p83-resolved-line > aside span { color: var(--route-teal); font-size: 6px; font-weight: 900; }
|
|
.p83-resolved-line > aside b { padding: 5px; font-size: 7px; background: var(--mist-120); }
|
|
|
|
@keyframes p83-frame-4 { 0%, 24.99% { opacity: 1; } 25%, 100% { opacity: 0; } }
|
|
@keyframes p83-frame-6 { 0%, 16.65% { opacity: 1; } 16.66%, 100% { opacity: 0; } }
|
|
@keyframes p83-frame-8 { 0%, 12.49% { opacity: 1; } 12.5%, 100% { opacity: 0; } }
|
|
@keyframes p83-breathe { from { transform: translateY(0) scale(1); } to { transform: translateY(-2%) scale(1.01); } }
|
|
@keyframes p83-stride { from { transform: translate(-3%, 0) rotate(-1deg); } to { transform: translate(3%, -2%) rotate(1deg); } }
|
|
@keyframes p83-ranged { 0%, 30%, 100% { transform: translateX(0) rotate(0); } 45% { transform: translateX(5%) rotate(-3deg); } 62% { transform: translateX(-2%) rotate(2deg); } }
|
|
@keyframes p83-cast { 0%, 100% { transform: translateY(0); filter: drop-shadow(0 0 0 rgba(90,223,174,0)); } 50% { transform: translateY(-4%); filter: drop-shadow(0 0 8px rgba(90,223,174,.75)); } }
|
|
@keyframes p83-formation-close { from { left: var(--fighter-from-x); } to { left: var(--fighter-x); } }
|
|
@keyframes p83-lunge { 0%, 100% { transform: translateX(0); } 40% { transform: translateX(-8%); } 58% { transform: translateX(-18%); } }
|
|
@keyframes p83-hit { 0%, 100% { transform: translateX(0) rotate(0); filter: brightness(1); } 32% { transform: translateX(10%) rotate(4deg); filter: brightness(1.8); } }
|
|
@keyframes p83-burst { 0%, 100% { opacity: 0; transform: scale(.35) rotate(-10deg); } 38% { opacity: 1; transform: scale(1.1) rotate(3deg); } 72% { opacity: 0; transform: scale(1.35) rotate(8deg); } }
|
|
@keyframes p83-projectile { from { transform: translateX(0); opacity: 0; } 12% { opacity: 1; } 82% { opacity: 1; } to { transform: translateX(570%); opacity: 0; } }
|
|
@keyframes p83-heal { from { opacity: .9; transform: scale(.3); } to { opacity: 0; transform: scale(1.65); } }
|
|
@keyframes p83-float { 0% { opacity: 0; transform: translateY(5px); } 24% { opacity: 1; } 100% { opacity: 0; transform: translateY(-16px); } }
|
|
@keyframes p83-spell-charge { 0%, 100% { opacity: .35; transform: rotate(45deg) scale(.72); } 50% { opacity: 1; transform: rotate(135deg) scale(1.05); } }
|
|
@keyframes p83-spell-bolt { 0%, 18% { opacity: 0; transform: translate(0,0) scale(.7); } 28% { opacity: 1; } 78% { opacity: 1; } 100% { opacity: 0; transform: translate(-1550%, 18px) scale(1.2); } }
|
|
@keyframes p83-spell-impact { 0%, 65% { opacity: 0; transform: rotate(45deg) scale(.25); } 78% { opacity: 1; transform: rotate(100deg) scale(1); } 100% { opacity: 0; transform: rotate(145deg) scale(1.6); } }
|
|
|
|
/* 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: end center; position: relative; background: linear-gradient(160deg, #eff4ee, #b8d4d0); overflow: hidden; }
|
|
.offer-character { width: 88%; height: 100%; object-fit: contain; object-position: center bottom; filter: drop-shadow(0 5px 5px rgba(12,25,29,.26)); }
|
|
.offer-figure > .offer-role-mark { position: absolute; right: 6px; top: 6px; width: 27px; height: 27px; display: grid; place-items: center; color: var(--white); font-size: 8px; font-weight: 900; background: var(--ink-840); border: 2px solid var(--work-gold); border-radius: 50%; }
|
|
.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-loadout { display: flex; gap: 3px; margin-top: 3px; }
|
|
.offer-loadout span { min-width: 0; padding: 2px 3px; color: var(--ink-950); font-size: 6px; font-weight: 800; background: var(--mist-180); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
.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: #dce8e4; border: 2px solid var(--route-teal); border-radius: 3px; overflow: hidden; }
|
|
.recruit-marker-art, .recruit-detail-art, .equipment-wearer-art, .record-inspect-art { width: 100%; height: 100%; object-fit: contain; object-position: center bottom; }
|
|
.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: #dce8e4; border-radius: 3px; overflow: hidden; }
|
|
.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; }
|
|
.reference-informed-market { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 5px; }
|
|
.reference-informed-market .market-heading { align-items: center; }
|
|
.market-board { min-height: 0; display: grid; grid-template-columns: 62px minmax(0, 1fr); grid-template-rows: 64px minmax(0, 1fr) 62px; gap: 4px; }
|
|
.market-company-bench, .market-inventory { min-width: 0; display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 5px; padding: 5px; color: var(--ink-950); background: rgba(243,246,242,.96); border: 1px solid var(--line); }
|
|
.market-company-bench { grid-column: 2; grid-row: 1; }
|
|
.market-company-bench header, .market-inventory header { display: grid; align-content: center; gap: 2px; }
|
|
.market-company-bench header strong, .market-inventory header strong { font-size: 8px; }
|
|
.market-company-bench header span, .market-inventory header span { color: var(--ink-700); font-size: 6px; }
|
|
.market-company-bench > div { min-width: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3px; }
|
|
.bench-recruit { min-width: 0; display: grid; grid-template-columns: 26px 1fr; grid-template-rows: 1fr 1fr; gap: 0 5px; align-items: center; padding: 3px 5px; color: var(--ink-950); text-align: left; background: var(--white); border: 1px solid var(--line); border-bottom: 3px solid var(--route-teal); }
|
|
.bench-recruit > span { grid-row: 1 / 3; width: 25px; height: 29px; display: grid; place-items: center; color: var(--white); font-size: 7px; background: var(--ink-840); }
|
|
.bench-actor-art, .market-offer-art { width: 100%; height: 100%; object-fit: contain; object-position: center bottom; }
|
|
.bench-recruit strong, .bench-recruit small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
.bench-recruit strong { font-size: 7px; }
|
|
.bench-recruit small { color: var(--ink-700); font-size: 5px; }
|
|
.bench-recruit.is-empty { border-style: dashed; border-bottom-color: var(--neutral-silver); }
|
|
.bench-recruit.is-empty > span { color: var(--ink-700); background: var(--mist-180); }
|
|
.market-tool-rail { grid-column: 1; grid-row: 1 / 4; display: grid; grid-template-rows: repeat(4, 1fr); gap: 3px; }
|
|
.market-tool-rail button { min-height: 0; padding: 3px; color: var(--mist-050); font-size: 6px; font-weight: 900; background: rgba(24,33,39,.9); border: 1px solid rgba(255,255,255,.24); border-left: 3px solid transparent; }
|
|
.market-tool-rail button.is-active { color: var(--ink-950); background: var(--work-gold); border-left-color: var(--white); }
|
|
.market-offer-cards { min-height: 0; grid-column: 2; grid-row: 2; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
|
|
.market-offer-card { min-width: 0; display: grid; grid-template-columns: minmax(82px, .58fr) 1fr auto; gap: 8px; align-items: stretch; padding: 7px; color: var(--ink-950); text-align: left; background: rgba(255,255,255,.96); border: 2px solid var(--line); border-bottom: 5px solid var(--neutral-silver); }
|
|
.market-offer-card.is-focused { border-color: var(--work-gold); border-bottom-color: var(--work-gold); }
|
|
.market-offer-card .row-avatar { width: 100%; height: 100%; min-height: 86px; color: transparent; font-size: 17px; background: #e5eeea; border: 2px solid var(--mist-180); border-radius: 3px; }
|
|
.market-offer-card > div, .market-offer-card > b { align-self: center; }
|
|
.market-offer-card small, .market-offer-card strong, .market-offer-card em { display: block; }
|
|
.market-offer-card div > small { color: var(--route-teal); font-size: 6px; }
|
|
.market-offer-card strong { font-size: 9px; }
|
|
.market-offer-card em { color: var(--ink-700); font-size: 6px; font-style: normal; }
|
|
.market-offer-card p { margin: 3px 0 0; font-size: 6px; line-height: 1.25; }
|
|
.market-offer-card > b { color: var(--route-teal); font-size: 12px; text-align: right; }
|
|
.market-offer-card > b small { color: var(--ink-700); font-size: 5px; }
|
|
.market-inventory { grid-column: 2; grid-row: 3; }
|
|
.market-inventory > div { min-width: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2px; }
|
|
.inventory-slot { min-width: 0; display: grid; place-items: center; align-content: center; padding: 1px; color: var(--ink-700); background: var(--mist-120); border: 1px solid var(--line); }
|
|
.inventory-slot.is-filled { color: var(--ink-950); background: var(--white); border-bottom: 3px solid var(--route-teal); }
|
|
.inventory-item-art { width: min(70%, 38px); max-height: 34px; object-fit: contain; }
|
|
.inventory-slot span { font-size: 12px; }
|
|
.inventory-slot small { overflow: hidden; width: 100%; font-size: 4px; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
|
|
.reference-informed-market .market-footer { min-width: 0; margin: 0; }
|
|
.reference-informed-market .market-footer .stage-primary, .reference-informed-market .market-footer .stage-secondary { min-height: 25px; padding: 3px 6px; font-size: 6px; }
|
|
.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; }
|
|
.recruit-level-strip { display: grid; grid-template-columns: 1.1fr .65fr 1.4fr; gap: 3px; margin-bottom: 5px; }
|
|
.recruit-level-strip > * { padding: 4px; font-size: 6px; background: var(--mist-120); }
|
|
.recruit-level-strip strong { border-left: 3px solid var(--work-gold); }
|
|
.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; }
|
|
.level-progress { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 1px 7px; margin-bottom: 5px; padding: 6px 7px 10px; background: var(--mist-120); border-left: 4px solid var(--work-gold); }
|
|
.level-progress span { grid-column: 1 / 3; font-size: 6px; font-weight: 900; }
|
|
.level-progress strong { font-size: 13px; }
|
|
.level-progress b { align-self: end; font-size: 7px; }
|
|
.level-progress i { position: absolute; left: 7px; right: 7px; bottom: 4px; height: 3px; background: var(--mist-180); }
|
|
.level-progress i::after { content: ""; display: block; width: var(--xp); height: 100%; background: var(--safe-jade); }
|
|
.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-art { width: 34px; height: 34px; object-fit: contain; }
|
|
.equipment-row strong, .equipment-row small, .equipment-row em { display: block; }
|
|
.equipment-row strong { font-size: 8px; }
|
|
.equipment-row small { font-size: 7px; }
|
|
.equipment-row em { color: var(--ink-700); font-size: 6px; font-style: normal; }
|
|
.equipment-wearer { display: grid; place-items: center; align-content: center; text-align: center; }
|
|
.one-slot-badge { margin-bottom: 4px; padding: 3px 5px; color: var(--ink-950); font-size: 6px; font-weight: 900; background: var(--work-gold); }
|
|
.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); }
|
|
.equipped-slot b { display: block; margin-bottom: 2px; color: var(--route-teal); font-size: 6px; }
|
|
.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: transparent; }
|
|
.party-actor-art { width: 100%; height: 100%; object-fit: contain; object-position: center bottom; filter: drop-shadow(0 2px 2px rgba(12,25,29,.22)); }
|
|
.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 > strong small { display: block; color: var(--ink-700); font-size: 5px; font-weight: 700; text-align: right; }
|
|
.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; }
|
|
.battle-life-rule { display: inline-block; margin-top: 5px; padding: 3px 5px; color: var(--white); font-size: 7px; background: rgba(178,59,55,.92); border-left: 3px solid #ffb8b3; }
|
|
.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: 68px; height: 114px; background: transparent; border: 0; }
|
|
.allied-line .party-actor.is-front { border: 0; }
|
|
.allied-line .actor-figure { width: 64px; height: 88px; }
|
|
.allied-line .party-actor > b { align-self: end; }
|
|
.allied-line .party-actor > strong, .allied-line .party-actor > em { color: var(--white); text-shadow: 0 1px 3px var(--ink-950); }
|
|
.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 { position: relative; min-width: 62px; height: 96px; display: grid; place-items: end center; color: var(--white); font-size: 11px; font-weight: 900; background: transparent; }
|
|
.enemy-actor.elite { min-width: 72px; height: 112px; }
|
|
.enemy-actor img { width: 100%; height: 100%; object-fit: contain; object-position: center bottom; }
|
|
.enemy-actor small { display: block; margin-top: 3px; font-size: 6px; font-weight: 700; text-align: center; }
|
|
.enemy-actor small, .boss-actor small { position: absolute; left: 50%; bottom: -13px; transform: translateX(-50%); padding: 2px 4px; color: var(--white); background: rgba(24,33,39,.88); white-space: nowrap; }
|
|
.boss-actor { position: relative; width: 96px; height: 142px; display: grid; place-items: end center; }
|
|
.boss-actor > img:first-child { width: 100%; height: 100%; object-fit: contain; object-position: center bottom; }
|
|
.boss-vfx { position: absolute; left: 50%; top: -12px; width: 34px; height: 34px; transform: translateX(-50%); object-fit: contain; }
|
|
.battle-vfx { width: 36px; height: 36px; object-fit: contain; }
|
|
.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-actor-art { width: 78%; height: 76%; object-fit: contain; object-position: center bottom; filter: grayscale(1) saturate(.45); opacity: .72; }
|
|
.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-item-art, .reward-actor-art { width: 48px; height: 44px; object-fit: contain; }
|
|
.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; }
|
|
|
|
/* Production-specific system, closure and growth pages */
|
|
.run-ledger-composition, .resume-composition, .recovery-ledger-composition, .data-notice-composition,
|
|
.run-end-composition, .abandon-composition, .run-growth-composition {
|
|
height: 100%; position: relative; padding: 2.4% 3.2% 4.8%; color: var(--ink-950);
|
|
background: rgba(232,238,235,.97);
|
|
}
|
|
.run-ledger-composition { display: grid; grid-template-columns: 1.4fr .6fr; grid-template-rows: auto 1fr; gap: 8px; }
|
|
.run-ledger-composition > header { grid-column: 1 / 3; display: flex; align-items: end; justify-content: space-between; }
|
|
.run-ledger-composition h2, .resume-composition h2, .recovery-ledger-composition h2,
|
|
.data-notice-composition h2, .run-end-composition h2, .abandon-composition h2,
|
|
.run-growth-composition h2 { margin: 3px 0; font-size: 18px; line-height: 1.15; }
|
|
.run-slots { min-height: 0; display: grid; gap: 5px; }
|
|
.run-slot { min-width: 0; min-height: 65px; display: grid; grid-template-columns: 92px 30px 1fr auto; align-items: center; gap: 7px; padding: 5px; color: var(--ink-950); text-align: left; background: var(--white); border: 1px solid var(--line); }
|
|
.run-slot.is-focused { border-color: var(--work-gold); box-shadow: inset 5px 0 var(--work-gold); }
|
|
.run-slot > img { width: 92px; height: 52px; object-fit: cover; }
|
|
.run-slot > span { font-size: 12px; font-weight: 900; text-align: center; }
|
|
.run-slot small, .run-slot p, .run-slot em { margin: 0; font-size: 7px; font-style: normal; }
|
|
.run-slot strong { display: block; margin: 2px 0; font-size: 10px; }
|
|
.run-slot > em { padding: 4px; color: var(--safe-jade); border: 1px solid currentColor; }
|
|
.run-slot.is-empty { grid-template-columns: 30px 1fr auto; border-style: dashed; }
|
|
.run-ledger-composition > aside, .recovery-ledger-composition > aside { padding: 11px; background: var(--ink-840); color: var(--mist-050); border-top: 4px solid var(--work-gold); }
|
|
.run-ledger-composition > aside b, .run-ledger-composition > aside strong, .run-ledger-composition > aside p { display: block; margin: 4px 0; font-size: 8px; line-height: 1.4; }
|
|
|
|
.resume-composition { display: grid; grid-template-columns: 1.35fr .65fr; gap: 9px; }
|
|
.resume-composition > section, .resume-composition > aside { min-width: 0; padding: 12px; background: var(--white); }
|
|
.resume-composition > section > p { margin: 4px 0; font-size: 8px; }
|
|
.resume-timeline { display: flex; align-items: center; margin: 12px 0 8px; }
|
|
.resume-timeline span { padding: 6px; font-size: 7px; font-weight: 800; border: 2px solid var(--neutral-silver); }
|
|
.resume-timeline span.is-done { color: var(--white); background: var(--safe-jade); border-color: var(--safe-jade); }
|
|
.resume-timeline span.is-current { border-color: var(--work-gold); }
|
|
.resume-timeline i { flex: 1; height: 2px; background: var(--neutral-silver); }
|
|
.resume-party { display: flex; justify-content: center; gap: 5px; padding: 7px; background: var(--ink-840); }
|
|
.resume-party .party-actor { min-width: 55px; height: 70px; }
|
|
.resume-composition > aside { display: grid; align-content: start; gap: 5px; border-top: 4px solid var(--route-teal); }
|
|
.resume-composition > aside small, .resume-composition > aside strong { font-size: 8px; }
|
|
.resume-composition dl { display: grid; gap: 3px; margin: 5px 0; }
|
|
.resume-composition dl > div { display: flex; justify-content: space-between; gap: 6px; padding: 5px; font-size: 7px; background: var(--mist-120); }
|
|
.resume-composition dd { margin: 0; font-weight: 900; }
|
|
|
|
.recovery-ledger-composition { display: grid; grid-template-columns: 1.35fr .65fr; grid-template-rows: auto 1fr; gap: 8px; }
|
|
.recovery-ledger-composition > header { grid-column: 1 / 3; }
|
|
.recovery-ledger-composition header p { margin: 2px 0; font-size: 8px; }
|
|
.lineage-list { display: grid; gap: 5px; }
|
|
.lineage-row { display: grid; grid-template-columns: 62px 1fr auto; align-items: center; gap: 7px; padding: 8px; color: var(--ink-950); text-align: left; background: var(--white); border: 2px solid transparent; }
|
|
.lineage-row.is-focused { border-color: var(--work-gold); }
|
|
.lineage-row.is-conflict { border-color: var(--danger-coral); }
|
|
.lineage-row > span { font-size: 7px; font-weight: 900; }
|
|
.lineage-row strong { font-size: 9px; }
|
|
.lineage-row p, .lineage-row em { margin: 2px 0 0; font-size: 7px; font-style: normal; }
|
|
.recovery-ledger-composition > aside b, .recovery-ledger-composition > aside p { display: block; margin: 4px 0; font-size: 8px; line-height: 1.45; }
|
|
|
|
.data-notice-composition { display: grid; grid-template-columns: .45fr 1.1fr .45fr; grid-template-rows: auto 1fr; gap: 8px; }
|
|
.data-notice-composition > header { grid-column: 1 / 4; }
|
|
.data-notice-composition > nav { display: grid; align-content: start; gap: 4px; }
|
|
.data-notice-composition > nav button { min-height: 34px; color: var(--ink-700); text-align: left; background: var(--white); border: 0; border-left: 4px solid transparent; }
|
|
.data-notice-composition > nav button.is-active { color: var(--ink-950); border-left-color: var(--work-gold); }
|
|
.data-notice-composition > section { display: grid; gap: 5px; }
|
|
.data-notice-composition article { display: grid; grid-template-columns: 26px 1fr; gap: 2px 8px; padding: 7px; background: var(--white); }
|
|
.data-notice-composition article > span { grid-row: 1 / 3; font-size: 9px; font-weight: 900; }
|
|
.data-notice-composition article strong { font-size: 9px; }
|
|
.data-notice-composition article p { margin: 0; font-size: 7px; line-height: 1.4; }
|
|
.data-notice-composition > aside { display: grid; align-content: start; gap: 6px; padding: 9px; color: var(--mist-050); background: var(--ink-840); border-top: 4px solid var(--safe-jade); }
|
|
.data-notice-composition > aside b, .data-notice-composition > aside strong { font-size: 7px; }
|
|
|
|
.run-end-composition { display: grid; grid-template-rows: auto 1fr auto; gap: 7px; }
|
|
.run-end-composition > header { display: grid; grid-template-columns: 90px 1fr; align-items: center; gap: 10px; }
|
|
.run-end-company { position: absolute; right: 3.2%; top: 4%; display: flex; align-items: end; height: 72px; opacity: .62; }
|
|
.run-end-company > span { width: 38px; display: grid; place-items: end center; }
|
|
.run-end-actor { width: 42px; height: 60px; object-fit: contain; object-position: center bottom; filter: grayscale(.35); }
|
|
.run-end-company b { display: none; }
|
|
.run-end-ledger { display: grid; grid-template-columns: 1fr 1fr .9fr; gap: 7px; align-content: stretch; }
|
|
.run-end-ledger article, .run-end-ledger aside { display: grid; align-content: start; gap: 5px; padding: 11px; background: var(--white); border-top: 4px solid var(--safe-jade); }
|
|
.run-end-ledger article.is-cleared { border-top-color: var(--danger-coral); }
|
|
.run-end-ledger span, .run-end-ledger b { font-size: 7px; }
|
|
.run-end-ledger strong { font-size: 10px; }
|
|
.run-end-ledger aside { color: var(--mist-050); background: var(--ink-840); border-top-color: var(--work-gold); }
|
|
.run-end-ledger aside p { margin: 0; font-size: 8px; line-height: 1.45; }
|
|
|
|
.abandon-composition { display: grid; grid-template-columns: 1.2fr .8fr; gap: 10px; }
|
|
.abandon-composition > section, .abandon-composition > aside { padding: 12px; background: var(--white); }
|
|
.abandon-composition > section > p { max-width: 85%; margin: 4px 0 9px; font-size: 8px; line-height: 1.45; }
|
|
.abandon-impact { display: grid; gap: 5px; }
|
|
.abandon-impact span { padding: 7px; font-size: 8px; background: var(--mist-120); border-left: 4px solid var(--neutral-silver); }
|
|
.abandon-impact b { display: block; margin-bottom: 2px; }
|
|
.abandon-composition > aside { display: grid; place-items: center; align-content: center; gap: 8px; border: 2px solid var(--danger-coral); text-align: center; }
|
|
.abandon-composition > aside > span { font-size: 8px; }
|
|
.abandon-composition > aside > strong { color: var(--danger-coral); font-size: 16px; }
|
|
.hold-track { width: 82%; height: 10px; background: var(--mist-180); border: 1px solid var(--line-strong); }
|
|
.hold-track i { display: block; width: 42%; height: 100%; background: var(--danger-coral); }
|
|
.stage-danger { min-height: 34px; padding: 7px 12px; color: var(--white); font-size: 9px; font-weight: 900; background: var(--danger-coral); border: 1px solid #7d2528; }
|
|
|
|
.run-growth-composition { display: grid; grid-template-columns: 1.3fr .7fr; grid-template-rows: auto 1fr; gap: 8px; }
|
|
.run-growth-composition > header { grid-column: 1 / 3; display: flex; justify-content: space-between; align-items: start; }
|
|
.run-growth-composition header p { margin: 2px 0; font-size: 8px; }
|
|
.growth-level { min-width: 58px; padding: 8px; color: var(--ink-950); font-size: 15px; font-weight: 900; text-align: center; background: var(--work-gold); }
|
|
.growth-level small { display: block; margin-top: 2px; font-size: 6px; }
|
|
.growth-tree { min-height: 0; display: grid; grid-template-columns: .75fr 24px 1fr; grid-template-rows: 1fr 1fr; gap: 6px; }
|
|
.growth-origin { grid-row: 1 / 3; display: grid; place-items: center; align-content: center; padding: 8px; background: var(--white); border-top: 4px solid var(--route-teal); }
|
|
.growth-actor-art { width: 82px; height: 110px; object-fit: contain; object-position: center bottom; }
|
|
.growth-origin small, .growth-origin p { margin: 2px 0; font-size: 7px; text-align: center; }
|
|
.growth-origin strong { font-size: 11px; }
|
|
.growth-tree > i { grid-row: 1 / 3; align-self: center; height: 3px; background: var(--neutral-silver); }
|
|
.growth-choice { display: grid; align-content: center; gap: 3px; padding: 8px; color: var(--ink-950); text-align: left; background: var(--white); border: 2px solid var(--line); }
|
|
.growth-choice.is-selected { border-color: var(--work-gold); }
|
|
.growth-choice small, .growth-choice p, .growth-choice em { margin: 0; font-size: 7px; font-style: normal; }
|
|
.growth-choice strong { font-size: 10px; }
|
|
.growth-choice em { color: var(--route-teal); font-weight: 900; }
|
|
.run-growth-composition > aside { display: grid; align-content: start; gap: 4px; padding: 10px; background: var(--ink-840); color: var(--mist-050); border-top: 4px solid var(--work-gold); }
|
|
.run-growth-composition > aside > span { font-size: 7px; font-weight: 900; }
|
|
.run-growth-composition > aside .sheet-row { justify-content: space-between; color: var(--ink-950); font-size: 7px; }
|
|
|
|
/* Guild Charter and final-campaign decisions */
|
|
.charter-composition, .chronicle-composition, .oath-composition, .oath-result-composition { height: 100%; padding: 2.2% 3.2% 4.6%; color: var(--ink-950); background: rgba(232,238,235,.97); }
|
|
.charter-composition { display: grid; grid-template-rows: auto 58px minmax(0, 1fr); gap: 8px; }
|
|
.charter-heading, .oath-heading { display: flex; align-items: start; justify-content: space-between; gap: 14px; }
|
|
.charter-heading h2, .chronicle-heading h2, .oath-heading h2, .oath-result-composition h2 { margin: 2px 0; font-size: 18px; }
|
|
.charter-heading p, .chronicle-heading p, .oath-heading p, .oath-result-composition header p { max-width: 650px; margin: 0; font-size: 8px; line-height: 1.35; }
|
|
.renown-balance { min-width: 112px; display: grid; grid-template-columns: 1fr auto; gap: 1px 9px; padding: 7px 9px; color: var(--mist-050); background: var(--ink-840); border-left: 4px solid var(--work-gold); }
|
|
.renown-balance span, .renown-balance small { font-size: 7px; }
|
|
.renown-balance strong { grid-row: 1 / 3; grid-column: 2; align-self: center; color: var(--work-gold); font-size: 24px; }
|
|
.charter-track { min-width: 0; display: flex; align-items: center; overflow-x: auto; padding: 3px; background: var(--ink-840); scrollbar-width: thin; }
|
|
.charter-track > i { width: 16px; height: 3px; flex: 0 0 16px; background: var(--neutral-silver); }
|
|
.charter-seal { min-width: 83px; height: 48px; display: grid; align-content: center; gap: 1px; padding: 4px 5px; color: var(--mist-050); text-align: left; background: #34484f; border: 2px solid #66777d; border-radius: 3px; }
|
|
.charter-seal span, .charter-seal em { font-size: 5px; font-style: normal; }
|
|
.charter-seal strong { overflow: hidden; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
|
|
.charter-seal.is-complete { background: var(--safe-jade); border-color: #a8dec0; }
|
|
.charter-seal.is-current { color: var(--ink-950); background: var(--work-gold); border-color: var(--ink-950); }
|
|
.charter-workspace { min-height: 0; display: grid; grid-template-columns: 1.15fr .85fr; gap: 8px; }
|
|
.charter-packets { min-height: 0; display: grid; grid-template-rows: auto repeat(3, minmax(0, 1fr)); gap: 4px; }
|
|
.charter-section-title { display: grid; grid-template-columns: auto 1fr auto; align-items: end; gap: 7px; }
|
|
.charter-section-title span, .charter-section-title small { font-size: 6px; }
|
|
.charter-section-title strong { font-size: 10px; }
|
|
.charter-packet { min-height: 0; display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto 1fr; gap: 1px 8px; padding: 6px 8px; color: var(--ink-950); text-align: left; background: var(--white); border: 1px solid var(--line); border-left: 4px solid transparent; }
|
|
.charter-packet.is-selected { border-left-color: var(--work-gold); box-shadow: inset 0 0 0 1px var(--ink-950); }
|
|
.charter-packet span, .charter-packet small { font-size: 6px; }
|
|
.charter-packet strong { font-size: 9px; }
|
|
.charter-packet b { grid-row: 1 / 4; grid-column: 2; align-self: center; color: var(--route-teal); font-size: 8px; }
|
|
.charter-review { min-height: 0; display: grid; align-content: start; gap: 4px; padding: 9px; background: var(--white); border-top: 4px solid var(--work-gold); }
|
|
.charter-review h3 { margin: 0; font-size: 14px; }
|
|
.charter-review p { margin: 0; font-size: 8px; line-height: 1.35; }
|
|
.charter-review dl { display: grid; gap: 2px; margin: 2px 0; }
|
|
.charter-review dl > div { display: grid; grid-template-columns: 74px 1fr; gap: 5px; padding: 3px; font-size: 7px; background: var(--mist-120); }
|
|
.charter-review dt { font-weight: 900; }
|
|
.charter-review dd { margin: 0; }
|
|
.no-power-boundary, .no-carryover { padding: 5px 6px; color: var(--white); font-size: 7px; background: var(--safe-jade); border-left: 4px solid var(--ink-950); }
|
|
.charter-review > div:last-child { display: flex; justify-content: flex-end; gap: 4px; }
|
|
.charter-review .stage-primary, .charter-review .stage-secondary { min-height: 27px; padding: 4px 6px; font-size: 7px; }
|
|
|
|
.chronicle-composition { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; gap: 7px; }
|
|
.chronicle-heading { color: var(--ink-950); }
|
|
.archive-contract { display: flex; align-items: center; gap: 9px; padding: 6px 8px; color: var(--white); background: var(--ink-840); border-left: 5px solid var(--safe-jade); }
|
|
.archive-contract > span { width: 24px; height: 24px; display: grid; place-items: center; flex: 0 0 auto; color: var(--ink-950); background: var(--work-gold); border-radius: 50%; }
|
|
.archive-contract strong, .archive-contract p { margin: 0; font-size: 7px; }
|
|
.chronicle-choices { min-height: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
|
|
.chronicle-choice { min-width: 0; display: grid; grid-template-columns: 28px 1fr; grid-template-rows: auto auto 1fr; align-content: start; gap: 2px 8px; padding: 10px; color: var(--ink-950); text-align: left; background: var(--white); border: 2px solid var(--line-strong); }
|
|
.chronicle-choice > span { grid-row: 1 / 4; width: 28px; height: 28px; display: grid; place-items: center; color: var(--white); font-size: 8px; background: var(--ink-840); }
|
|
.chronicle-choice small { font-size: 6px; }
|
|
.chronicle-choice strong { font-size: 12px; }
|
|
.chronicle-choice p { margin: 3px 0 0; font-size: 8px; line-height: 1.3; }
|
|
.chronicle-choice.is-selected { border-color: var(--work-gold); box-shadow: inset 0 -5px var(--work-gold); }
|
|
.chronicle-review { display: grid; grid-template-columns: 1fr auto auto; align-items: end; gap: 6px; padding: 6px 8px; background: var(--mist-120); }
|
|
.chronicle-review > div { display: grid; gap: 1px; }
|
|
.chronicle-review span, .chronicle-review strong { font-size: 7px; }
|
|
.chronicle-review .stage-primary, .chronicle-review .stage-secondary { min-height: 29px; padding: 4px 7px; font-size: 7px; }
|
|
|
|
.oath-composition { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 8px; }
|
|
.oath-heading .stage-secondary { min-height: 30px; padding: 5px 7px; font-size: 7px; }
|
|
.oath-workspace { min-height: 0; display: grid; grid-template-columns: 1.2fr .8fr; gap: 8px; }
|
|
.oath-laws { min-height: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
|
|
.oath-law { min-width: 0; display: grid; align-content: start; gap: 4px; padding: 9px; color: var(--ink-950); text-align: left; background: var(--white); border: 2px solid var(--line); }
|
|
.oath-law > span, .oath-law em { font-size: 6px; font-style: normal; }
|
|
.oath-law strong { font-size: 10px; }
|
|
.oath-law p { margin: 0; font-size: 7px; line-height: 1.35; }
|
|
.oath-law em { align-self: end; padding: 4px; background: var(--mist-120); }
|
|
.oath-law.is-selected { border-color: var(--work-gold); box-shadow: inset 0 -5px var(--work-gold); }
|
|
.oath-review { min-height: 0; display: grid; align-content: start; gap: 4px; padding: 9px; background: var(--white); border-top: 4px solid var(--route-teal); }
|
|
.oath-review h3 { margin: 0; font-size: 14px; }
|
|
.oath-review .sheet-row { min-height: 24px; justify-content: space-between; padding: 4px 5px; font-size: 7px; }
|
|
.oath-review .stage-primary { min-height: 29px; margin-top: 2px; padding: 4px 6px; font-size: 7px; }
|
|
|
|
.oath-result-composition { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 8px; }
|
|
.oath-result-grid { min-height: 0; display: grid; grid-template-columns: 1fr 1fr .8fr; gap: 7px; }
|
|
.oath-result-grid article { min-width: 0; display: grid; align-content: start; gap: 3px; padding: 9px; background: var(--white); border-top: 4px solid var(--route-teal); }
|
|
.oath-result-grid article > span { width: 25px; height: 25px; display: grid; place-items: center; color: var(--white); font-size: 7px; background: var(--ink-840); }
|
|
.oath-result-grid article strong { font-size: 10px; }
|
|
.oath-result-grid article p { margin: 0; font-size: 7px; line-height: 1.35; }
|
|
.oath-result-grid .oath-receipts { border-top-color: var(--work-gold); }
|
|
.oath-result-composition footer { display: flex; align-items: center; justify-content: flex-end; gap: 5px; }
|
|
.oath-result-composition footer > strong { margin-right: auto; font-size: 7px; }
|
|
.oath-result-composition footer .stage-primary, .oath-result-composition footer .stage-secondary { min-height: 29px; padding: 4px 7px; font-size: 7px; }
|
|
.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: 38px; height: 45px; display: grid; place-items: center; color: var(--white); font-size: 8px; background: #dce8e4; overflow: hidden; }
|
|
.record-tile-art { width: 100%; height: 100%; object-fit: contain; object-position: center bottom; }
|
|
.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); }
|
|
|
|
/* Reference-to-original comparison */
|
|
.reference-selector { display: flex; gap: 4px; overflow-x: auto; margin-bottom: 16px; padding-bottom: 4px; scrollbar-width: thin; }
|
|
.reference-selector button { min-width: 154px; min-height: 58px; display: grid; grid-template-columns: auto 1fr; gap: 2px 7px; align-items: center; padding: 7px 9px; color: var(--ink-700); text-align: left; background: var(--white); border: 1px solid var(--line); border-bottom: 4px solid transparent; }
|
|
.reference-selector button.is-active { color: var(--ink-950); background: var(--mist-120); border-bottom-color: var(--work-gold); }
|
|
.reference-selector span { color: var(--route-teal); font-size: 8px; font-weight: 900; }
|
|
.reference-selector strong { overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
|
|
.reference-selector em { grid-column: 2; color: var(--ink-700); font-size: 7px; font-style: normal; }
|
|
.fidelity-comparison { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; align-items: start; }
|
|
.reference-panel, .adaptation-panel { min-width: 0; }
|
|
.reference-panel > header, .adaptation-panel > header { min-height: 72px; padding: 10px 12px; background: var(--white); border: 1px solid var(--line); border-bottom: 0; }
|
|
.reference-panel > header span, .adaptation-panel > header span { color: var(--route-teal); font-size: 8px; font-weight: 900; }
|
|
.reference-panel > header h2, .adaptation-panel > header h2 { margin: 3px 0; font-size: 16px; }
|
|
.reference-panel > header p, .adaptation-panel > header p { margin: 0; color: var(--ink-700); font-size: 9px; }
|
|
.reference-wireframe { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; color: var(--mist-050); background: #24343a; box-shadow: var(--shadow); }
|
|
.reference-wireframe > header { height: 12%; display: flex; align-items: center; gap: 8px; padding: 1.5% 2%; background: #17242a; border-bottom: 1px solid #53666d; }
|
|
.reference-wireframe > header span { padding: 3px 5px; color: var(--ink-950); font-size: 6px; font-weight: 900; background: var(--work-gold); }
|
|
.reference-wireframe > header strong { font-size: 7px; }
|
|
.reference-wireframe > header em { margin-left: auto; color: #a8dec0; font-size: 6px; font-style: normal; }
|
|
.wireframe-canvas { position: absolute; inset: 12% 0 9%; display: grid; grid-template-columns: 13% 1fr 18%; grid-template-rows: 18% 1fr 22% 14%; gap: 1.2%; padding: 1.7%; }
|
|
.wire-zone { min-width: 0; display: grid; place-items: center; align-content: center; gap: 3px; padding: 4px; color: #dce8e6; text-align: center; background: #34474e; border: 1px solid #64767c; }
|
|
.wire-zone > span { width: 18px; height: 18px; display: grid; place-items: center; color: var(--ink-950); font-size: 6px; background: var(--work-gold); border-radius: 50%; }
|
|
.wire-zone > strong { font-size: 7px; line-height: 1.2; }
|
|
.wire-zone.zone-top { grid-column: 2; grid-row: 1; }
|
|
.wire-zone.zone-main { grid-column: 2; grid-row: 2; border-color: var(--work-gold); box-shadow: inset 0 -4px var(--work-gold); }
|
|
.wire-zone.zone-lower { grid-column: 2; grid-row: 3; }
|
|
.wire-zone.zone-side { grid-column: 1; grid-row: 1 / 4; }
|
|
.wire-zone.zone-actions { grid-column: 2 / 4; grid-row: 4; }
|
|
.wire-zone.zone-main:nth-last-child(2) { grid-column: 3; }
|
|
.template-choice .zone-main { background: repeating-linear-gradient(90deg, #34474e 0 31%, #24343a 31% 34%); }
|
|
.template-battle .zone-main { background: linear-gradient(90deg, #3c665e 0 42%, #24343a 42% 58%, #6b4b50 58%); }
|
|
.template-graph .zone-main { background: repeating-linear-gradient(90deg, #34474e 0 10%, #24343a 10% 12%); }
|
|
.template-report .zone-main, .template-terminal .zone-main { background: repeating-linear-gradient(180deg, #34474e 0 19%, #24343a 19% 22%); }
|
|
.reference-wireframe > footer { position: absolute; left: 0; right: 0; bottom: 0; height: 9%; display: flex; align-items: center; padding: 0 2%; color: #bfd0ce; font-size: 6px; background: #17242a; }
|
|
.adaptation-panel .stage-wrap { width: 100%; }
|
|
.fidelity-decisions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 18px; background: var(--line); border: 1px solid var(--line); }
|
|
.fidelity-decisions article { min-height: 100px; padding: 13px; background: var(--white); }
|
|
.fidelity-decisions span { color: var(--route-teal); font-size: 8px; font-weight: 900; }
|
|
.fidelity-decisions article:nth-child(2) span { color: #765b11; }
|
|
.fidelity-decisions article:nth-child(3) span { color: var(--danger-coral); }
|
|
.fidelity-decisions p { margin: 6px 0 0; font-size: 10px; line-height: 1.5; }
|
|
|
|
.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; }
|
|
.experience-contract, .experience-offers, .experience-review, .experience-receipt { padding: 1.6% 2.2% 2.4%; }
|
|
.experience-stage-title h2 { font-size: 12px; }
|
|
.experience-stage-title p { display: none; }
|
|
.experience-stage-actions { min-height: 26px; }
|
|
.experience-stage-actions > span { font-size: 6px; }
|
|
.experience-contract-grid { grid-template-columns: .72fr 1.28fr; gap: 3px; }
|
|
.experience-contract-card { padding: 7px; }
|
|
.experience-contract-card > strong { font-size: 12px; }
|
|
.experience-contract-card > p { font-size: 6px; }
|
|
.experience-contract-read, .experience-difficulty { padding: 4px 6px; }
|
|
.experience-contract-read dl > div { padding: 2px 0; font-size: 5px; }
|
|
.experience-difficulty button { padding: 3px; }
|
|
.experience-difficulty button em { display: none; }
|
|
.experience-offers { grid-template-columns: minmax(0, 1fr) 22%; gap: 3px; }
|
|
.experience-offer-grid { gap: 2px; }
|
|
.experience-offer > div:nth-child(2) { padding: 2px 3px 1px; }
|
|
.experience-offer > p { padding: 0 3px; font-size: 4px; }
|
|
.experience-offer > footer { padding: 2px; }
|
|
.experience-offer > footer button { min-height: 18px; font-size: 5px; }
|
|
.experience-inspect { gap: 2px; padding: 5px; }
|
|
.experience-inspect > strong { font-size: 7px; }
|
|
.experience-inspect > p, .experience-inspect > small { font-size: 5px; }
|
|
.experience-review-grid { gap: 3px; }
|
|
.experience-review-grid > * { padding: 4px; }
|
|
.experience-review-grid .recruit-marker { padding: 2px; }
|
|
.experience-review-grid .recruit-silhouette { width: 27px; height: 31px; }
|
|
.experience-review-grid dl > div, .experience-receipt-grid dl > div { grid-template-columns: 46px 1fr; padding: 2px 0; font-size: 5px; }
|
|
.experience-receipt > header h2 { font-size: 12px; }
|
|
.experience-receipt > header p { display: none; }
|
|
.experience-receipt-grid { gap: 3px; }
|
|
.experience-receipt-grid > * { padding: 4px; }
|
|
.experience-next-package { padding: 3px 5px; }
|
|
.p82-market, .p82-equipment-offer, .p82-equip-select, .p82-order, .p82-ready, .p82-simple-receipt, .p82-hire-review, .p82-item-review { padding: 1.3% 2% 2.4%; gap: 3px; }
|
|
.p82-resource { min-width: 110px; padding: 3px 5px; }
|
|
.p82-resource strong { font-size: 11px; }
|
|
.p82-company-bench { gap: 2px; }
|
|
.p82-company-bench article { min-height: 31px; grid-template-columns: 26px 1fr auto; gap: 2px; padding: 2px 3px; }
|
|
.p82-company-bench article > span { width: 25px; height: 27px; }
|
|
.p82-company-bench strong { font-size: 5px; }
|
|
.p82-company-bench small, .p82-company-bench em { font-size: 4px; }
|
|
.p82-offer-board { gap: 3px; }
|
|
.p82-offers { gap: 2px; }
|
|
.p82-offers > button > div { padding: 2px 3px 3px; }
|
|
.p82-offers p { display: none; }
|
|
.p82-offers > button > i { padding: 2px; font-size: 7px; }
|
|
.p82-offer-inspect { gap: 2px; padding: 5px; }
|
|
.p82-offer-inspect > strong { font-size: 7px; }
|
|
.p82-offer-inspect > p, .p82-offer-inspect > small, .p82-offer-inspect > b { font-size: 5px; }
|
|
.p82-hire-figure > span { padding: 2px 3px; font-size: 4px; }
|
|
.p82-hire-facts, .p82-transaction { padding: 5px; }
|
|
.p82-hire-facts h3 { font-size: 10px; }
|
|
.p82-hire-facts h4 { font-size: 6px; }
|
|
.p82-hire-facts > div, .p82-transaction dl > div { padding: 2px; font-size: 5px; }
|
|
.p82-hire-facts > p { font-size: 5px; }
|
|
.p82-simple-receipt > header > span, .p82-ready > header > span { width: 24px; height: 24px; font-size: 12px; }
|
|
.p82-simple-receipt > header h2, .p82-ready > header h2 { font-size: 10px; }
|
|
.p82-simple-receipt > header > b, .p82-ready > header > b { padding: 3px; font-size: 5px; }
|
|
.p82-simple-receipt > aside > div { padding: 3px 5px; }
|
|
.p82-simple-receipt > aside span { font-size: 4px; }
|
|
.p82-simple-receipt > aside strong { font-size: 7px; }
|
|
.p82-inventory-receipt { gap: 1px; padding: 4px; }
|
|
.p82-inventory-receipt img { max-height: 28px; }
|
|
.p82-item-card { gap: 3px; }
|
|
.p82-item-card > * { padding: 6px; }
|
|
.p82-item-card h3 { margin: 2px 0 4px; font-size: 11px; }
|
|
.p82-item-card p { padding: 3px; font-size: 5px; }
|
|
.p82-item-card > aside strong { font-size: 11px; }
|
|
.p82-item-review > article, .p82-item-review > aside { padding: 6px; }
|
|
.p82-item-review h2 { font-size: 11px; }
|
|
.p82-item-review p, .p82-item-review article > div { font-size: 5px; }
|
|
.p82-equip-company { gap: 2px; }
|
|
.p82-equip-company button { grid-template-columns: 38px 1fr; gap: 3px; padding: 3px; }
|
|
.p82-equip-company button > span { height: 40px; }
|
|
.p82-equip-company strong { font-size: 6px; }
|
|
.p82-equip-company small, .p82-equip-company em { font-size: 4px; }
|
|
.p82-equip-delta { gap: 2px; padding: 6px; }
|
|
.p82-equip-delta h3 { font-size: 9px; }
|
|
.p82-equip-delta p, .p82-equip-delta small { padding: 3px; font-size: 5px; }
|
|
.p82-equip-receipt { gap: 3px; }
|
|
.p82-equip-receipt > * { padding: 4px; }
|
|
.p82-equip-receipt article img { max-height: 58px; }
|
|
.p82-equip-receipt > div img { max-height: 45px; }
|
|
.p82-order { grid-template-columns: minmax(0, 1fr) 21%; }
|
|
.p82-order-line { gap: 3px; }
|
|
.p82-order-line button { padding: 3px; }
|
|
.p82-order-read { gap: 3px; padding: 5px; }
|
|
.p82-order-read strong { font-size: 8px; }
|
|
.p82-order-read p, .p82-order-read small { font-size: 5px; }
|
|
.p82-ready-line { gap: 2px; }
|
|
.p82-ready-line article { padding: 2px; }
|
|
.p82-ready-facts { gap: 2px; }
|
|
.p82-ready-facts article { padding: 3px; }
|
|
.p83-risk-board, .p83-risk-review, .p83-receipt, .p83-opening, .p83-battle, .p83-resolved { padding: 1.3% 2% 2.4%; gap: 3px; }
|
|
.p83-risk-options { gap: 3px; }
|
|
.p83-risk-options button { gap: 2px; padding: 5px; }
|
|
.p83-risk-options button > strong { font-size: 9px; }
|
|
.p83-risk-options button > p { padding: 3px; font-size: 5px; }
|
|
.p83-risk-mini { padding: 2px; }
|
|
.p83-risk-mini img { max-height: 45px; }
|
|
.p83-risk-read { gap: 3px; padding: 6px; }
|
|
.p83-risk-read h3 { font-size: 9px; }
|
|
.p83-review-threat, .p83-review-company, .p83-review-terms { padding: 6px; }
|
|
.p83-review-threat h3 { font-size: 9px; }
|
|
.p83-review-threat p, .p83-review-threat small, .p83-review-company > p, .p83-review-terms dl > div { font-size: 5px; }
|
|
.p83-review-line article > b, .p83-receipt-line article > b, .p83-party-line article > b, .p83-live-party article > b, .p83-enemy-line article > b { width: 13px; height: 13px; font-size: 5px; }
|
|
.p83-receipt > header > span, .p83-resolved > header > span { width: 24px; height: 24px; font-size: 12px; }
|
|
.p83-receipt > header h2, .p83-resolved > header h2 { font-size: 10px; }
|
|
.p83-opening-intel { padding: 6px; }
|
|
.p83-opening-intel > strong { font-size: 8px; }
|
|
.p83-battle > header h2 { font-size: 10px; }
|
|
.p83-playback button { min-width: 24px; height: 22px; padding: 2px 4px; font-size: 5px; }
|
|
.p83-fighter { width: 11%; height: 63%; }
|
|
.p83-fighter.is-enemy { width: 11.5%; }
|
|
.p83-fighter-state { padding: 2px 3px; }
|
|
.p83-fighter-state b { font-size: 4px; }
|
|
.p83-battle-read article { padding: 3px 5px; }
|
|
.p83-battle-read article p { font-size: 4px; }
|
|
.p83-cause-sheet { padding: 7px; }
|
|
.p83-cause-sheet h3 { font-size: 10px; }
|
|
.p83-cause-sheet p, .p83-cause-sheet dl > div { font-size: 5px; }
|
|
.p83-resolved-line > aside { padding: 5px; }
|
|
.p83-resolved-line > aside b { padding: 3px; font-size: 5px; }
|
|
.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; }
|
|
.reference-informed-market { gap: 3px; }
|
|
.market-board { grid-template-columns: 48px minmax(0, 1fr); grid-template-rows: 48px minmax(0, 1fr) 45px; gap: 2px; }
|
|
.market-company-bench, .market-inventory { grid-template-columns: 82px minmax(0, 1fr); gap: 3px; padding: 3px; }
|
|
.bench-recruit { grid-template-columns: 21px 1fr; padding: 2px 3px; }
|
|
.bench-recruit > span { width: 20px; height: 24px; }
|
|
.market-offer-card { grid-template-columns: 28px 1fr auto; gap: 3px; padding: 3px; }
|
|
.market-offer-card .row-avatar { width: 27px; height: 33px; min-height: 0; }
|
|
.market-offer-card p { display: none; }
|
|
.inventory-slot span { font-size: 9px; }
|
|
.reference-informed-market .market-footer { gap: 3px; }
|
|
.charter-composition, .chronicle-composition, .oath-composition, .oath-result-composition { padding: 1.7% 2.3% 3%; }
|
|
.charter-composition { grid-template-rows: auto 43px minmax(0, 1fr); gap: 4px; }
|
|
.charter-heading h2, .chronicle-heading h2, .oath-heading h2, .oath-result-composition h2 { font-size: 12px; }
|
|
.charter-heading p, .chronicle-heading p, .oath-heading p, .oath-result-composition header p { display: none; }
|
|
.renown-balance { min-width: 82px; padding: 4px 5px; }
|
|
.renown-balance strong { font-size: 17px; }
|
|
.charter-seal { min-width: 65px; height: 35px; padding: 2px 3px; }
|
|
.charter-track > i { width: 8px; flex-basis: 8px; }
|
|
.charter-workspace { gap: 4px; }
|
|
.charter-packet { padding: 3px 4px; }
|
|
.charter-packet small { display: none; }
|
|
.charter-review { gap: 2px; padding: 5px; }
|
|
.charter-review h3 { font-size: 9px; }
|
|
.charter-review p { font-size: 6px; }
|
|
.charter-review dl > div { grid-template-columns: 55px 1fr; padding: 2px; font-size: 5px; }
|
|
.charter-review .stage-primary, .charter-review .stage-secondary { min-height: 20px; padding: 2px 4px; font-size: 5px; }
|
|
.archive-contract { padding: 3px 5px; }
|
|
.archive-contract > span { width: 18px; height: 18px; }
|
|
.chronicle-choice { padding: 6px; }
|
|
.chronicle-choice strong { font-size: 9px; }
|
|
.chronicle-choice p { font-size: 6px; }
|
|
.chronicle-review { padding: 3px 5px; }
|
|
.chronicle-review .stage-primary, .chronicle-review .stage-secondary { min-height: 21px; }
|
|
.oath-workspace { gap: 4px; }
|
|
.oath-laws { gap: 3px; }
|
|
.oath-law { padding: 5px; }
|
|
.oath-law strong { font-size: 8px; }
|
|
.oath-law p { font-size: 6px; }
|
|
.oath-review { gap: 2px; padding: 5px; }
|
|
.oath-review h3 { font-size: 9px; }
|
|
.oath-result-grid { gap: 3px; }
|
|
.oath-result-grid article { padding: 5px; }
|
|
.oath-result-composition footer .stage-primary, .oath-result-composition footer .stage-secondary { min-height: 21px; padding: 2px 4px; font-size: 5px; }
|
|
}
|
|
|
|
@container stage (max-width: 480px) {
|
|
.game-hud { height: 32px; }
|
|
.stage-body { inset: 32px 0 0; }
|
|
.hud-left strong, .save-state, .concept-label { display: none; }
|
|
.experience-stage-title .stage-kicker { display: none; }
|
|
.experience-stage-title h2 { font-size: 8px; }
|
|
.experience-stage-actions > span { max-width: 38%; font-size: 4px; }
|
|
.experience-stage-actions .stage-primary, .experience-stage-actions .stage-secondary { min-height: 19px; padding: 2px 4px; font-size: 5px; }
|
|
.experience-contract-grid { grid-template-columns: .62fr 1.38fr; grid-template-rows: .66fr 1.34fr; gap: 2px; }
|
|
.experience-contract-card { gap: 2px; padding: 4px; border-left-width: 3px; }
|
|
.experience-contract-card > span, .experience-contract-card > p, .experience-contract-card > small { display: none; }
|
|
.experience-contract-card > strong { font-size: 8px; }
|
|
.experience-contract-card > em { font-size: 5px; }
|
|
.experience-contract-read, .experience-difficulty { padding: 3px; }
|
|
.experience-contract-read > span, .experience-difficulty > span { font-size: 4px; }
|
|
.experience-contract-read dl > div { grid-template-columns: 35px 1fr; font-size: 4px; }
|
|
.experience-difficulty > div { gap: 1px; margin-top: 2px; }
|
|
.experience-difficulty button { padding: 2px; border-bottom-width: 2px; }
|
|
.experience-difficulty button strong { font-size: 4px; }
|
|
.experience-difficulty button small { font-size: 3px; }
|
|
.experience-offers { grid-template-columns: minmax(0, 1fr) 19%; grid-template-rows: auto minmax(0, 1fr) auto; gap: 2px; }
|
|
.experience-offer-art > span, .experience-offer > p, .experience-offer > div:nth-child(2) em { display: none; }
|
|
.experience-offer > div:nth-child(2) strong { font-size: 5px; }
|
|
.experience-offer > div:nth-child(2) small { font-size: 4px; }
|
|
.experience-offer > footer { grid-template-columns: 1fr; gap: 1px; padding: 1px; }
|
|
.experience-offer > footer button { min-height: 14px; padding: 1px; font-size: 4px; }
|
|
.experience-inspect { padding: 3px; }
|
|
.experience-inspect > span { font-size: 3px; }
|
|
.experience-inspect > strong { font-size: 5px; }
|
|
.experience-inspect > p { font-size: 4px; }
|
|
.experience-inspect > small { display: none; }
|
|
.experience-notice { bottom: 11%; padding: 3px 5px; font-size: 4px; }
|
|
.experience-review-grid { grid-template-columns: 1fr 1fr .72fr; gap: 2px; }
|
|
.experience-review-grid > * { padding: 2px; }
|
|
.experience-review-grid section > span, .experience-review-grid aside > span { font-size: 4px; }
|
|
.experience-review-grid section > div { gap: 1px; margin-top: 2px; }
|
|
.experience-review-grid .recruit-marker { gap: 2px; padding: 1px; }
|
|
.experience-review-grid .recruit-silhouette { width: 17px; height: 21px; }
|
|
.experience-review-grid .recruit-marker small, .experience-review-grid .recruit-marker em { display: none; }
|
|
.experience-review-grid .recruit-marker strong { font-size: 4px; }
|
|
.experience-review-grid dl > div { grid-template-columns: 28px 1fr; padding: 1px 0; font-size: 3px; }
|
|
.experience-receipt { gap: 2px; }
|
|
.experience-receipt > header { gap: 3px; }
|
|
.experience-receipt > header h2 { font-size: 8px; }
|
|
.experience-receipt > header > b { padding: 2px 3px; font-size: 4px; }
|
|
.receipt-check { width: 20px; height: 20px; font-size: 10px; }
|
|
.experience-receipt-grid { grid-template-columns: 1fr .7fr .7fr; gap: 2px; }
|
|
.experience-receipt-grid > * { padding: 2px; }
|
|
.experience-receipt-grid .recruit-marker { padding: 1px; }
|
|
.experience-receipt-grid .recruit-silhouette { width: 17px; height: 20px; }
|
|
.experience-receipt-grid .recruit-marker small, .experience-receipt-grid .recruit-marker em { display: none; }
|
|
.experience-receipt-grid .recruit-marker strong { font-size: 4px; }
|
|
.experience-receipt-grid section:nth-child(2) p { gap: 2px; margin: 2px 0 0; padding: 2px; font-size: 4px; }
|
|
.experience-receipt-grid dl > div { grid-template-columns: 28px 1fr; padding: 1px 0; font-size: 3px; }
|
|
.experience-next-package { padding: 2px 3px; }
|
|
.experience-next-package strong { font-size: 4px; }
|
|
.p82-market .experience-stage-title > div, .p82-equipment-offer .experience-stage-title > div { align-items: center; }
|
|
.p82-resource { min-width: 72px; padding: 2px 3px; }
|
|
.p82-resource span, .p82-resource i { font-size: 3px; }
|
|
.p82-resource strong { font-size: 8px; }
|
|
.p82-company-bench article { min-height: 22px; grid-template-columns: 18px 1fr auto; padding: 1px; border-bottom-width: 2px; }
|
|
.p82-company-bench article > span { width: 17px; height: 19px; }
|
|
.p82-company-bench strong { font-size: 4px; }
|
|
.p82-company-bench small { font-size: 3px; }
|
|
.p82-company-bench em { display: none; }
|
|
.p82-company-bench article > b { width: 12px; height: 12px; font-size: 4px; }
|
|
.p82-offer-board { grid-template-columns: 1.35fr .65fr; gap: 2px; }
|
|
.p82-offers > button { border-bottom-width: 2px; }
|
|
.p82-offers > button > div { padding: 1px 2px; }
|
|
.p82-offers strong { font-size: 4px; }
|
|
.p82-offers em, .p82-offers b { display: none; }
|
|
.p82-offers small { font-size: 3px; }
|
|
.p82-offers > button > i { right: 1px; top: 1px; min-width: 17px; font-size: 5px; }
|
|
.p82-offer-inspect { padding: 3px; }
|
|
.p82-offer-inspect > span { font-size: 3px; }
|
|
.p82-offer-inspect > strong { font-size: 5px; }
|
|
.p82-offer-inspect > p, .p82-offer-inspect > small { display: none; }
|
|
.p82-offer-inspect > b { font-size: 4px; }
|
|
.p82-hire-review, .p82-item-review { gap: 2px; }
|
|
.p82-hire-facts, .p82-transaction { padding: 3px; }
|
|
.p82-hire-facts > span, .p82-transaction > span { font-size: 3px; }
|
|
.p82-hire-facts h3 { font-size: 7px; }
|
|
.p82-hire-facts h4, .p82-hire-facts > p { display: none; }
|
|
.p82-hire-facts > div { grid-template-columns: 1fr; padding: 1px; font-size: 4px; }
|
|
.p82-transaction dl > div { grid-template-columns: 29px 1fr; padding: 1px; font-size: 3px; }
|
|
.p82-simple-receipt { gap: 2px; }
|
|
.p82-simple-receipt > header > span, .p82-ready > header > span { width: 18px; height: 18px; font-size: 9px; }
|
|
.p82-simple-receipt > header h2, .p82-ready > header h2 { font-size: 7px; }
|
|
.p82-simple-receipt > aside { gap: 1px; }
|
|
.p82-simple-receipt > aside > div { padding: 2px; }
|
|
.p82-simple-receipt > aside strong { font-size: 5px; }
|
|
.p82-inventory-receipt { padding: 2px; }
|
|
.p82-inventory-receipt img { max-height: 18px; }
|
|
.p82-inventory-receipt strong, .p82-inventory-receipt small { font-size: 3px; }
|
|
.p82-item-card { grid-template-columns: .42fr 1.3fr .45fr; gap: 2px; }
|
|
.p82-item-card > * { padding: 3px; }
|
|
.p82-item-card h3 { font-size: 7px; }
|
|
.p82-item-card p { margin: 2px 0; padding: 2px; font-size: 4px; border-left-width: 2px; }
|
|
.p82-item-card > aside span, .p82-item-card > aside small { font-size: 3px; }
|
|
.p82-item-card > aside strong { font-size: 7px; }
|
|
.p82-item-review > article, .p82-item-review > aside { padding: 3px; }
|
|
.p82-item-review h2 { font-size: 7px; }
|
|
.p82-item-review p { font-size: 4px; }
|
|
.p82-item-review article > div { padding: 2px; font-size: 3px; }
|
|
.p82-equip-company button { grid-template-columns: 24px 1fr; padding: 2px; }
|
|
.p82-equip-company button > span { height: 27px; }
|
|
.p82-equip-company strong { font-size: 4px; }
|
|
.p82-equip-company small { font-size: 3px; }
|
|
.p82-equip-company em { display: none; }
|
|
.p82-equip-delta { padding: 3px; }
|
|
.p82-equip-delta h3 { font-size: 6px; }
|
|
.p82-equip-delta p { padding: 2px; font-size: 3px; }
|
|
.p82-equip-delta small { display: none; }
|
|
.p82-equip-receipt article img { max-height: 35px; }
|
|
.p82-equip-receipt > div img { max-height: 27px; }
|
|
.p82-equip-receipt span, .p82-equip-receipt strong, .p82-equip-receipt small { font-size: 4px; }
|
|
.p82-order-direction { font-size: 4px; }
|
|
.p82-order-line { gap: 2px; }
|
|
.p82-order-line button { height: 82%; padding: 1px; }
|
|
.p82-order-line button > b { width: 13px; height: 13px; font-size: 5px; }
|
|
.p82-order-line button > strong { font-size: 4px; }
|
|
.p82-order-line button > small { font-size: 3px; }
|
|
.p82-order-read { padding: 3px; }
|
|
.p82-order-read > span { font-size: 3px; }
|
|
.p82-order-read strong { font-size: 5px; }
|
|
.p82-order-read p { font-size: 4px; }
|
|
.p82-order-read small { display: none; }
|
|
.p82-ready-line > span { font-size: 3px; }
|
|
.p82-ready-line article > b { width: 12px; height: 12px; font-size: 4px; }
|
|
.p82-ready-line article > strong, .p82-ready-line article > small { font-size: 3px; }
|
|
.p82-ready-facts article { padding: 2px; }
|
|
.p82-ready-facts span, .p82-ready-facts small { font-size: 3px; }
|
|
.p82-ready-facts strong { font-size: 4px; }
|
|
.p83-risk-board { grid-template-columns: minmax(0, 1fr) 22%; }
|
|
.p83-risk-options { gap: 2px; }
|
|
.p83-risk-options button { padding: 3px; }
|
|
.p83-risk-options button > span, .p83-risk-options button > em, .p83-risk-options button > p b { font-size: 3px; }
|
|
.p83-risk-options button > strong { font-size: 6px; }
|
|
.p83-risk-options button > p { padding: 2px; font-size: 3px; }
|
|
.p83-risk-options button > small { font-size: 4px; }
|
|
.p83-risk-mini { gap: 1px; padding: 1px; }
|
|
.p83-risk-mini img { max-height: 25px; }
|
|
.p83-risk-mini small { display: none; }
|
|
.p83-risk-read { padding: 3px; }
|
|
.p83-risk-read h3 { font-size: 5px; }
|
|
.p83-risk-read > strong, .p83-risk-read > p, .p83-risk-read > small, .p83-risk-read > div p { font-size: 3px; }
|
|
.p83-risk-review { grid-template-columns: .65fr 1.45fr .7fr; }
|
|
.p83-review-threat, .p83-review-company, .p83-review-terms { padding: 3px; }
|
|
.p83-review-threat h3 { font-size: 6px; }
|
|
.p83-review-threat p { padding: 2px; font-size: 3px; }
|
|
.p83-review-threat small, .p83-review-company > p { display: none; }
|
|
.p83-review-terms dl > div { grid-template-columns: 31px 1fr; padding: 1px; font-size: 3px; }
|
|
.p83-review-line article > strong, .p83-review-line article > small, .p83-receipt-line article > strong, .p83-receipt-line article > small, .p83-party-line article > strong, .p83-party-line article > small, .p83-live-party article > strong, .p83-live-party article > small { font-size: 3px; }
|
|
.p83-receipt > header > span, .p83-resolved > header > span { width: 18px; height: 18px; font-size: 9px; }
|
|
.p83-receipt > header h2, .p83-resolved > header h2 { font-size: 7px; }
|
|
.p83-receipt > aside > div, .p83-resolved > section article { padding: 3px; }
|
|
.p83-receipt > aside span, .p83-receipt > aside strong, .p83-resolved > section span, .p83-resolved > section strong, .p83-resolved > section small { font-size: 3px; }
|
|
.p83-life-rule strong { padding: 2px 3px; font-size: 3px; }
|
|
.p83-opening-intel { padding: 3px; }
|
|
.p83-opening-intel > strong { font-size: 5px; }
|
|
.p83-opening-intel > p, .p83-opening-intel > small { font-size: 3px; }
|
|
.p83-enemy-line article > div { font-size: 16px; }
|
|
.p83-enemy-line article > strong { font-size: 3px; }
|
|
.p83-battle > header h2 { font-size: 6px; }
|
|
.p83-playback button { min-width: 17px; height: 17px; padding: 1px 2px; font-size: 3px; }
|
|
.p83-battle-rules span { display: none; }
|
|
.p83-battle-rules b { padding: 2px 3px; font-size: 3px; }
|
|
.p83-opening-dynamic > header { grid-template-columns: 1fr; }
|
|
.p83-opening-dynamic > header > p { display: none; }
|
|
.p83-opening-dynamic > header > div { justify-content: space-between; }
|
|
.p83-fighter { width: 12%; height: 65%; }
|
|
.p83-fighter.is-enemy { width: 12.5%; }
|
|
.p83-fighter-state { top: 2%; padding: 1px 2px; border-top-width: 2px; }
|
|
.p83-fighter-state span { display: none; }
|
|
.p83-fighter-state b { font-size: 3px; }
|
|
.p83-side-marker { padding: 2px; font-size: 3px; }
|
|
.p83-side-marker b { width: 12px; height: 12px; }
|
|
.p83-direction { font-size: 3px; }
|
|
.p83-battle-read { grid-template-columns: minmax(0, 1fr) 55%; gap: 2px; }
|
|
.p83-battle-read article { padding: 2px 3px; }
|
|
.p83-battle-read article p { display: none; }
|
|
.p83-battle-read article span, .p83-battle-read article strong { font-size: 3px; }
|
|
.p83-timeline button { font-size: 3px; }
|
|
.p83-equipment-trigger span { display: none; }
|
|
.p83-float-number { font-size: 5px; }
|
|
.p83-cause-sheet { top: 10%; width: 42%; padding: 4px; }
|
|
.p83-cause-sheet h3 { font-size: 6px; }
|
|
.p83-cause-sheet p, .p83-cause-sheet dl > div { font-size: 3px; }
|
|
.p83-cause-sheet dl > div { grid-template-columns: 39px 1fr; padding: 2px 0; }
|
|
.p83-resolved-line { grid-template-columns: 1.45fr .55fr; gap: 2px; }
|
|
.p83-resolved-line > aside { padding: 3px; }
|
|
.p83-resolved-line > aside span { font-size: 3px; }
|
|
.p83-resolved-line > aside b { padding: 2px; font-size: 3px; }
|
|
.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, .charter-composition, .chronicle-composition, .oath-composition, .oath-result-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: 22px; gap: 2px; }
|
|
.equipment-row > span { width: 24px; }
|
|
.equipment-row-art { width: 22px; height: 22px; }
|
|
.equipment-row strong { font-size: 6px; }
|
|
.equipment-row small { font-size: 5px; }
|
|
.equipment-row em { display: none; }
|
|
.equipment-wearer .large-figure { width: 36px; height: 44px; }
|
|
.equipment-wearer strong { font-size: 7px; }
|
|
.equipment-wearer small { font-size: 5px; }
|
|
.one-slot-badge { padding: 2px; font-size: 4px; }
|
|
.equipped-slot { margin-top: 2px; padding: 2px; font-size: 5px; }
|
|
.equipped-slot b { font-size: 4px; }
|
|
.equipment-delta p { display: none; }
|
|
.equipment-delta h2 { font-size: 8px; }
|
|
.equipment-delta .delta-row { padding: 3px; font-size: 5px; }
|
|
.equipment-delta .delta-row:nth-of-type(n+3) { display: none; }
|
|
.equipment-delta .stage-primary { min-height: 20px; padding: 2px; font-size: 5px; }
|
|
.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-life-rule { margin-top: 2px; padding: 2px 3px; font-size: 5px; }
|
|
.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; }
|
|
.reference-informed-market { grid-template-rows: 26px minmax(0, 1fr) 21px; }
|
|
.reference-informed-market .market-heading .stage-kicker { display: none; }
|
|
.reference-informed-market .market-heading h2 { font-size: 7px; }
|
|
.reference-informed-market .company-meter { padding: 1px 3px; }
|
|
.reference-informed-market .company-meter span { display: none; }
|
|
.reference-informed-market .company-meter strong { font-size: 8px; }
|
|
.market-board { grid-template-columns: 30px minmax(0, 1fr); grid-template-rows: 31px minmax(0, 1fr) 28px; gap: 1px; }
|
|
.market-company-bench, .market-inventory { grid-template-columns: 1fr; padding: 1px; }
|
|
.market-company-bench > header, .market-inventory > header { display: none; }
|
|
.market-company-bench > div { gap: 1px; }
|
|
.bench-recruit { grid-template-columns: 15px 1fr; gap: 1px; padding: 1px; }
|
|
.bench-recruit > span { width: 14px; height: 18px; font-size: 4px; }
|
|
.bench-recruit strong { font-size: 4px; }
|
|
.bench-recruit small { display: none; }
|
|
.market-tool-rail { gap: 1px; }
|
|
.market-tool-rail button { padding: 1px; font-size: 3px; border-left-width: 1px; }
|
|
.market-offer-cards { gap: 1px; }
|
|
.market-offer-card { grid-template-columns: 17px 1fr auto; gap: 1px; padding: 1px 2px; border-width: 1px; border-bottom-width: 2px; }
|
|
.market-offer-card .row-avatar { width: 16px; height: 21px; min-height: 0; font-size: 4px; }
|
|
.market-offer-card div > small, .market-offer-card em, .market-offer-card p { display: none; }
|
|
.market-offer-card strong { font-size: 4px; }
|
|
.market-offer-card > b { font-size: 5px; }
|
|
.market-offer-card > b small { font-size: 3px; }
|
|
.market-inventory > div { gap: 1px; }
|
|
.inventory-slot { padding: 0; }
|
|
.inventory-slot span { font-size: 6px; }
|
|
.inventory-slot small { display: none; }
|
|
.reference-informed-market .market-footer { gap: 1px; font-size: 3px; }
|
|
.reference-informed-market .market-footer span { font-size: 3px; }
|
|
.reference-informed-market .market-footer .stage-primary, .reference-informed-market .market-footer .stage-secondary { min-height: 17px; padding: 1px 2px; font-size: 3px; }
|
|
.charter-composition { grid-template-rows: 24px 29px minmax(0, 1fr); gap: 2px; }
|
|
.charter-heading .stage-kicker, .charter-heading p, .renown-balance small { display: none; }
|
|
.charter-heading h2 { font-size: 8px; }
|
|
.renown-balance { min-width: 58px; grid-template-columns: 1fr auto; padding: 2px 3px; }
|
|
.renown-balance span { font-size: 5px; }
|
|
.renown-balance strong { font-size: 12px; }
|
|
.charter-track { padding: 1px; }
|
|
.charter-seal { min-width: 43px; height: 25px; padding: 1px 2px; }
|
|
.charter-seal strong, .charter-seal em { display: none; }
|
|
.charter-seal span { font-size: 5px; }
|
|
.charter-track > i { width: 3px; flex-basis: 3px; height: 1px; }
|
|
.charter-workspace { grid-template-columns: 1fr .85fr; gap: 2px; }
|
|
.charter-section-title { grid-template-columns: auto 1fr; gap: 2px; }
|
|
.charter-section-title small { display: none; }
|
|
.charter-section-title strong { font-size: 7px; }
|
|
.charter-packets { gap: 2px; }
|
|
.charter-packet { grid-template-columns: 1fr auto; padding: 2px; }
|
|
.charter-packet span { font-size: 4px; }
|
|
.charter-packet strong { font-size: 5px; }
|
|
.charter-packet b { font-size: 5px; }
|
|
.charter-review { padding: 3px; }
|
|
.charter-review .stage-kicker, .charter-review p, .charter-review dl > div:nth-child(1) { display: none; }
|
|
.charter-review h3 { font-size: 6px; }
|
|
.charter-review dl { margin: 0; }
|
|
.charter-review dl > div { grid-template-columns: 33px 1fr; font-size: 4px; }
|
|
.no-power-boundary, .no-carryover { padding: 2px; font-size: 4px; }
|
|
.charter-review > div:last-child .stage-secondary { display: none; }
|
|
.chronicle-composition { grid-template-rows: 22px 28px minmax(0, 1fr) 29px; gap: 2px; }
|
|
.chronicle-heading .stage-kicker { display: none; }
|
|
.chronicle-heading h2 { font-size: 8px; }
|
|
.archive-contract { padding: 2px 3px; }
|
|
.archive-contract p { overflow: hidden; font-size: 4px; white-space: nowrap; text-overflow: ellipsis; }
|
|
.archive-contract strong { font-size: 5px; }
|
|
.archive-contract > span { width: 14px; height: 14px; }
|
|
.chronicle-choices { gap: 2px; }
|
|
.chronicle-choice { grid-template-columns: 18px 1fr; gap: 1px 3px; padding: 3px; }
|
|
.chronicle-choice > span { width: 17px; height: 17px; font-size: 5px; }
|
|
.chronicle-choice small { font-size: 4px; }
|
|
.chronicle-choice strong { font-size: 6px; }
|
|
.chronicle-choice p { font-size: 4px; }
|
|
.chronicle-review { grid-template-columns: 1fr auto; gap: 2px; padding: 2px; }
|
|
.chronicle-review > div strong { display: none; }
|
|
.chronicle-review .stage-secondary { display: none; }
|
|
.chronicle-review .stage-primary { min-height: 20px; padding: 2px 4px; font-size: 5px; }
|
|
.oath-composition { gap: 2px; }
|
|
.oath-heading .stage-kicker, .oath-heading p { display: none; }
|
|
.oath-heading h2 { font-size: 8px; }
|
|
.oath-heading .stage-secondary { min-height: 20px; padding: 2px 4px; font-size: 5px; }
|
|
.oath-workspace { grid-template-columns: 1.3fr .7fr; gap: 2px; }
|
|
.oath-laws { gap: 2px; }
|
|
.oath-law { gap: 1px; padding: 2px; }
|
|
.oath-law > span, .oath-law em { font-size: 4px; }
|
|
.oath-law strong { font-size: 5px; }
|
|
.oath-law p { display: none; }
|
|
.oath-review { padding: 3px; }
|
|
.oath-review .stage-kicker { display: none; }
|
|
.oath-review h3 { font-size: 7px; }
|
|
.oath-review .sheet-row { min-height: 17px; padding: 1px 2px; font-size: 4px; }
|
|
.oath-review .stage-primary { min-height: 19px; font-size: 4px; }
|
|
.oath-result-composition { gap: 2px; }
|
|
.oath-result-composition header .stage-kicker, .oath-result-composition header p { display: none; }
|
|
.oath-result-composition h2 { font-size: 8px; }
|
|
.oath-result-grid { gap: 2px; }
|
|
.oath-result-grid article { gap: 1px; padding: 3px; }
|
|
.oath-result-grid article > span { width: 15px; height: 15px; font-size: 4px; }
|
|
.oath-result-grid article strong { font-size: 5px; }
|
|
.oath-result-grid article p { font-size: 4px; }
|
|
.oath-result-composition footer > strong { display: none; }
|
|
.variant-sheet { width: 90%; padding: 6px; }
|
|
.variant-sheet h2 { font-size: 9px; }
|
|
.variant-sheet p { font-size: 6px; }
|
|
}
|
|
|
|
@container stage (max-width: 760px) {
|
|
.boss-actor { width: 55px; height: 78px; }
|
|
.run-ledger-composition, .resume-composition, .recovery-ledger-composition,
|
|
.data-notice-composition, .run-end-composition, .abandon-composition,
|
|
.run-growth-composition { padding: 2% 2.5% 3.5%; gap: 4px; }
|
|
.run-ledger-composition h2, .resume-composition h2, .recovery-ledger-composition h2,
|
|
.data-notice-composition h2, .run-end-composition h2, .abandon-composition h2,
|
|
.run-growth-composition h2 { font-size: 12px; }
|
|
.run-slot { min-height: 47px; grid-template-columns: 68px 22px 1fr auto; padding: 3px; }
|
|
.run-slot > img { width: 68px; height: 39px; }
|
|
.run-slot strong { font-size: 8px; }
|
|
.run-slot p { display: none; }
|
|
.resume-party .party-actor { min-width: 42px; height: 56px; }
|
|
.resume-timeline { margin: 6px 0 4px; }
|
|
.resume-timeline span { padding: 4px; font-size: 6px; }
|
|
.data-notice-composition article { padding: 4px; }
|
|
.data-notice-composition article p { font-size: 6px; }
|
|
.run-end-company { display: none; }
|
|
.run-end-ledger article, .run-end-ledger aside { padding: 6px; }
|
|
.abandon-composition > section, .abandon-composition > aside { padding: 7px; }
|
|
.growth-actor-art { width: 58px; height: 76px; }
|
|
.growth-choice { padding: 5px; }
|
|
}
|
|
|
|
@container stage (max-width: 480px) {
|
|
.boss-actor { width: 38px; height: 54px; }
|
|
.boss-vfx { top: -8px; width: 22px; height: 22px; }
|
|
.battle-vfx { width: 24px; height: 24px; }
|
|
.run-ledger-composition { grid-template-columns: 1fr .55fr; }
|
|
.run-ledger-composition > header { align-items: center; }
|
|
.run-ledger-composition > header .stage-kicker { display: none; }
|
|
.run-slot { min-height: 35px; grid-template-columns: 19px 1fr auto; }
|
|
.run-slot > img, .run-slot > div > small, .run-slot > div > p { display: none; }
|
|
.run-slot strong { font-size: 6px; }
|
|
.run-slot > em { padding: 2px; font-size: 5px; }
|
|
.run-ledger-composition > aside, .recovery-ledger-composition > aside { padding: 5px; }
|
|
.run-ledger-composition > aside p, .recovery-ledger-composition > aside p { display: none; }
|
|
.resume-composition { grid-template-columns: 1.35fr .65fr; }
|
|
.resume-composition > section, .resume-composition > aside { padding: 5px; }
|
|
.resume-composition > section > p, .resume-composition dl > div:nth-child(n+3) { display: none; }
|
|
.resume-timeline span:nth-of-type(2), .resume-timeline i:nth-of-type(2) { display: none; }
|
|
.resume-party { padding: 2px; gap: 2px; }
|
|
.resume-party .party-actor { min-width: 29px; height: 40px; }
|
|
.recovery-ledger-composition { grid-template-columns: 1.35fr .65fr; }
|
|
.recovery-ledger-composition header p { display: none; }
|
|
.lineage-row { grid-template-columns: 42px 1fr auto; padding: 3px; }
|
|
.lineage-row p { display: none; }
|
|
.data-notice-composition { grid-template-columns: .42fr 1.1fr .48fr; }
|
|
.data-notice-composition > nav button { min-height: 25px; padding: 2px; font-size: 5px; }
|
|
.data-notice-composition article { grid-template-columns: 18px 1fr; gap: 1px 3px; }
|
|
.data-notice-composition article p { display: none; }
|
|
.data-notice-composition > aside { padding: 4px; gap: 3px; }
|
|
.run-end-ledger { grid-template-columns: 1fr 1fr .8fr; gap: 3px; }
|
|
.run-end-ledger strong { font-size: 6px; }
|
|
.run-end-ledger aside p { display: none; }
|
|
.abandon-composition > section > p { display: none; }
|
|
.abandon-impact span { padding: 4px; font-size: 6px; }
|
|
.abandon-composition > aside > strong { font-size: 9px; }
|
|
.run-growth-composition { grid-template-columns: 1.25fr .75fr; }
|
|
.run-growth-composition header p, .growth-origin p, .growth-choice p { display: none; }
|
|
.growth-level { min-width: 38px; padding: 4px; font-size: 9px; }
|
|
.growth-tree { grid-template-columns: .65fr 10px 1fr; gap: 2px; }
|
|
.growth-actor-art { width: 39px; height: 52px; }
|
|
.growth-choice { padding: 3px; }
|
|
.run-growth-composition > aside { padding: 4px; }
|
|
.run-growth-composition > aside .sheet-row:nth-of-type(n+3) { display: none; }
|
|
}
|
|
|
|
@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; }
|
|
.fidelity-comparison { gap: 14px; }
|
|
}
|
|
|
|
@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; }
|
|
.fidelity-comparison { grid-template-columns: 1fr; }
|
|
}
|
|
|
|
@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; }
|
|
.experience-progress li { min-height: 38px; padding: 5px; }
|
|
.experience-progress li > span { width: 21px; height: 21px; }
|
|
.experience-progress li > strong { font-size: 8px; }
|
|
.package-roadmap { grid-template-columns: 1fr; }
|
|
.package-roadmap > span { 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; }
|
|
.reference-selector button { min-width: 136px; }
|
|
.fidelity-decisions { grid-template-columns: 1fr; }
|
|
.fidelity-decisions article { min-height: auto; }
|
|
#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 - 132px) * 16 / 9)); }
|
|
.playtest-view .stage-wrap { width: min(100%, calc((100svh - 128px) * 16 / 9)); }
|
|
.playtest-view .view-heading { display: none; }
|
|
.experience-shell { gap: 3px; }
|
|
.experience-progress { width: min(100%, calc((100svh - 128px) * 16 / 9)); margin: 0 auto; }
|
|
.experience-progress li { min-height: 28px; padding: 2px 5px; }
|
|
.experience-progress li > span { width: 18px; height: 18px; font-size: 6px; }
|
|
.experience-progress li > strong { font-size: 6px; }
|
|
.package-roadmap { display: none; }
|
|
.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, .reference-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; }
|
|
.reference-selector { margin-bottom: 4px; }
|
|
.reference-selector button { min-height: 40px; }
|
|
.fidelity-comparison { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
|
|
.reference-panel > header, .adaptation-panel > header { min-height: 42px; padding: 4px 6px; }
|
|
.reference-panel > header h2, .adaptation-panel > header h2 { font-size: 10px; }
|
|
.reference-panel > header p, .adaptation-panel > header p { display: none; }
|
|
.fidelity-decisions { display: none; }
|
|
}
|
|
|
|
.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; }
|
|
}
|