:root {
  color-scheme: dark;
  --ink: #e8f1f6;
  --muted: #8fa6b4;
  --faint: #5b7282;
  --navy-0: #050b14;
  --navy-1: #081321;
  --navy-2: #0c1b2b;
  --navy-3: #10283a;
  --line: rgba(147, 190, 212, .16);
  --line-bright: rgba(147, 210, 228, .34);
  --cyan: #6de4e5;
  --cyan-dim: #2caab7;
  --amber: #f6bd70;
  --red: #ff6e78;
  --green: #7bdfa2;
  --shadow: 0 22px 80px rgba(0, 0, 0, .42);
  --radius: 12px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: var(--navy-0); }
body { color: var(--ink); font-size: 13px; letter-spacing: .01em; }
button, input, select { font: inherit; }
button { color: inherit; }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

.app-shell { width: 100%; height: 100%; display: flex; flex-direction: column; background: radial-gradient(circle at 16% 12%, rgba(28, 84, 112, .18), transparent 34%), var(--navy-0); }
.topbar { height: 76px; min-height: 76px; border-bottom: 1px solid var(--line); background: rgba(7, 17, 29, .96); display: flex; align-items: center; justify-content: space-between; padding: 0 22px 0 24px; position: relative; z-index: 4; }
.brand-lockup, .topbar-actions, .station-readout, .command-group, .menu-footer, .panel-footer, .modal-actions { display: flex; align-items: center; }
.brand-lockup { gap: 12px; min-width: 280px; }
.brand-mark { width: 25px; height: 29px; display: flex; gap: 3px; align-items: end; transform: skewY(-17deg); }
.brand-mark span { display: block; width: 6px; border-radius: 2px 2px 0 0; background: var(--cyan); box-shadow: 0 0 16px rgba(109, 228, 229, .3); }
.brand-mark span:nth-child(1) { height: 14px; opacity: .55; }.brand-mark span:nth-child(2) { height: 23px; }.brand-mark span:nth-child(3) { height: 29px; opacity: .8; }
.brand-title { font-weight: 700; letter-spacing: .15em; font-size: 13px; }.brand-title b { color: var(--cyan); font-weight: 800; }
.brand-subtitle { color: var(--faint); font-size: 8px; letter-spacing: .23em; margin-top: 5px; }.brand-subtitle i { color: var(--cyan-dim); font-style: normal; padding: 0 5px; }
.station-readout { height: 100%; gap: 36px; margin-left: auto; margin-right: 34px; }
.readout-block { display: flex; flex-direction: column; gap: 5px; min-width: 66px; }.readout-label, .eyebrow { color: var(--faint); font-size: 9px; letter-spacing: .18em; font-weight: 700; }.readout-block strong { font-size: 13px; letter-spacing: .08em; }.readout-block:nth-child(1) strong { color: var(--cyan); font-variant-numeric: tabular-nums; }
.topbar-actions { gap: 18px; }.offline-badge { color: var(--green); font-size: 9px; letter-spacing: .13em; white-space: nowrap; }.offline-badge span, .status-led, .hud-dot { width: 6px; height: 6px; display: inline-block; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; margin-right: 7px; }.icon-button { width: 31px; height: 31px; border: 1px solid var(--line-bright); border-radius: 7px; background: rgba(27, 53, 69, .38); cursor: pointer; color: var(--cyan); font-size: 17px; line-height: 1; }

.game-layout { display: grid; grid-template-columns: minmax(0, 1fr) 370px; gap: 0; min-height: 0; flex: 1; }
.viewport-column { min-width: 0; display: flex; flex-direction: column; padding: 16px 16px 14px 18px; background: linear-gradient(150deg, rgba(10, 25, 39, .5), rgba(4, 11, 19, .25)); }
.canvas-frame { min-height: 0; flex: 1; position: relative; overflow: hidden; border: 1px solid var(--line-bright); border-radius: 10px; background: #08121d; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25), 0 8px 28px rgba(0,0,0,.22); }
#gameCanvas { display: block; width: 100%; height: 100%; image-rendering: auto; cursor: grab; }.canvas-frame.dragging #gameCanvas { cursor: grabbing; }
.canvas-hud { position: absolute; top: 13px; left: 14px; right: 14px; display: flex; justify-content: space-between; pointer-events: none; }.hud-chip { padding: 7px 9px; background: rgba(4, 12, 21, .75); border: 1px solid rgba(147, 210, 228, .2); border-radius: 5px; color: #b6cad3; font-size: 9px; letter-spacing: .13em; backdrop-filter: blur(7px); }.hud-dot.live { color: var(--green); }.hud-icon { color: var(--cyan); margin-right: 5px; }
.toast-stack { position: absolute; right: 15px; bottom: 16px; width: min(290px, 42%); display: flex; flex-direction: column; align-items: stretch; gap: 8px; pointer-events: none; }.toast { padding: 10px 12px; background: rgba(8, 20, 32, .94); border: 1px solid var(--line-bright); border-left: 2px solid var(--cyan); border-radius: 6px; box-shadow: 0 8px 24px rgba(0,0,0,.28); animation: toast-in .25s ease both; }.toast.warning { border-left-color: var(--amber); }.toast.danger { border-left-color: var(--red); }.toast-title { display: block; font-size: 10px; font-weight: 700; letter-spacing: .08em; }.toast-text { color: var(--muted); font-size: 11px; display: block; margin-top: 3px; line-height: 1.4; }@keyframes toast-in { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: translateX(0); } }
.command-bar { height: auto; min-height: 46px; padding-top: 8px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 10px; }.command-group { gap: 6px; flex-wrap: wrap; }.command-group.right { justify-content: flex-end; }.command-button { border: 1px solid var(--line); background: rgba(12, 29, 44, .72); border-radius: 5px; color: var(--muted); cursor: pointer; height: 30px; padding: 0 10px; font-size: 9px; font-weight: 700; letter-spacing: .11em; transition: background .16s, border-color .16s, color .16s, transform .16s; }.command-button:hover { color: var(--ink); background: rgba(30, 65, 80, .72); border-color: var(--line-bright); }.command-button:active { transform: translateY(1px); }.command-button.primary { color: var(--navy-0); background: var(--cyan); border-color: var(--cyan); }.command-button.primary:hover { background: #a3f3ed; }.button-glyph { font-size: 13px; margin-right: 5px; }.speed-button.active { color: var(--cyan); border-color: var(--cyan-dim); background: rgba(34, 105, 113, .25); }.command-hint { color: var(--faint); font-size: 9px; white-space: nowrap; }.keycap { display: inline-block; color: #a5beca; border: 1px solid var(--line); border-bottom-color: var(--line-bright); border-radius: 3px; padding: 2px 4px; margin: 0 3px; font-size: 8px; letter-spacing: .08em; }

.command-panel { min-width: 0; min-height: 0; overflow: hidden; display: flex; flex-direction: column; border-left: 1px solid var(--line); background: linear-gradient(180deg, rgba(12, 28, 43, .97), rgba(6, 16, 27, .97)); }.panel-heading { display: flex; justify-content: space-between; align-items: center; padding: 25px 22px 17px; }.panel-heading h1 { margin: 7px 0 0; font-size: 17px; font-weight: 550; letter-spacing: -.02em; }.alert-orb { width: 30px; height: 30px; border: 1px solid rgba(246, 189, 112, .35); border-radius: 50%; display: grid; place-items: center; }.alert-orb span { width: 8px; height: 8px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 14px var(--amber); }.alert-orb.quiet { border-color: var(--line); }.alert-orb.quiet span { background: var(--green); box-shadow: 0 0 12px var(--green); }
.panel-tabs { display: flex; flex-wrap: wrap; gap: 0; padding: 0 16px; border-bottom: 1px solid var(--line); }.panel-tab { border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--faint); padding: 10px 7px 11px; cursor: pointer; font-size: 9px; letter-spacing: .08em; font-weight: 700; white-space: nowrap; }.panel-tab:hover { color: var(--muted); }.panel-tab.active { color: var(--cyan); border-bottom-color: var(--cyan); }.panel-tab em { font-style: normal; display: inline-grid; place-items: center; min-width: 15px; height: 15px; border-radius: 10px; background: rgba(109, 228, 229, .12); color: var(--cyan); font-size: 8px; margin-left: 3px; }
.panel-content { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; padding: 17px 17px 15px; scrollbar-width: thin; scrollbar-color: #244050 transparent; }.panel-content::-webkit-scrollbar { width: 5px; }.panel-content::-webkit-scrollbar-thumb { background: #244050; border-radius: 5px; }.panel-section-title { display: flex; justify-content: space-between; align-items: center; color: var(--faint); font-size: 9px; letter-spacing: .15em; font-weight: 800; margin: 2px 3px 10px; }.panel-section-title span:last-child { color: var(--cyan-dim); font-size: 8px; letter-spacing: .08em; }.roster-heading-actions { display: inline-flex; align-items: center; gap: 8px; }.roster-heading-actions b { color: var(--cyan-dim); font-size: 8px; letter-spacing: .08em; }.roster-heading-actions .mini-button { flex: 0 0 auto; padding: 6px 7px; }
.incident-card, .employee-card, .report-card, .case-card, .activity-entry, .empty-card { border: 1px solid var(--line); background: rgba(17, 39, 55, .45); border-radius: 7px; margin-bottom: 9px; }.incident-card { padding: 12px 12px 11px; border-left: 2px solid var(--amber); }.incident-card.critical { border-left-color: var(--red); }.incident-card.low { border-left-color: var(--cyan-dim); }.card-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; }.incident-code { color: var(--cyan); font-size: 9px; letter-spacing: .12em; font-weight: 800; }.priority-pill, .status-pill, .role-pill { padding: 3px 6px; border-radius: 3px; font-size: 8px; line-height: 1; letter-spacing: .1em; font-weight: 800; }.priority-pill { color: var(--amber); background: rgba(246, 189, 112, .1); }.priority-pill.critical { color: var(--red); background: rgba(255, 110, 120, .1); }.priority-pill.low { color: var(--cyan); background: rgba(109, 228, 229, .1); }.incident-name { color: var(--ink); font-size: 13px; font-weight: 650; margin-top: 9px; }.incident-meta { color: var(--muted); font-size: 10px; line-height: 1.55; margin-top: 6px; }.incident-meta strong { color: #c8d8df; font-weight: 550; }.status-pill { color: var(--green); background: rgba(123, 223, 162, .1); }.status-pill.responding, .status-pill.pending { color: var(--amber); background: rgba(246, 189, 112, .1); }.status-pill.resolved { color: var(--faint); background: rgba(143, 166, 180, .08); }.status-pill.interview, .status-pill.in-transit, .status-pill.in-interview { color: var(--amber); background: rgba(246,189,112,.1); }.status-pill.arrested { color: var(--red); background: rgba(255,110,120,.1); }.status-pill.in-holding { color: var(--amber); background: rgba(246,189,112,.1); }.card-actions { display: flex; gap: 6px; margin-top: 11px; }.mini-button { flex: 1; border: 1px solid var(--line); background: rgba(5, 15, 25, .42); color: var(--muted); padding: 7px 8px; border-radius: 4px; cursor: pointer; font-size: 8px; font-weight: 750; letter-spacing: .1em; }.mini-button:hover { color: var(--cyan); border-color: var(--cyan-dim); }.mini-button.accent { color: var(--cyan); border-color: rgba(109, 228, 229, .35); background: rgba(109, 228, 229, .08); }.mini-button.danger { color: var(--red); }
.employee-card { padding: 11px; }.employee-identity { display: flex; align-items: center; gap: 9px; }.avatar { width: 31px; height: 31px; border-radius: 50%; display: grid; place-items: center; color: #08131d; font-weight: 800; font-size: 10px; border: 2px solid rgba(255,255,255,.18); }.avatar.blue { background: linear-gradient(145deg, #7ae4e8, #2c92a7); }.avatar.gold { background: linear-gradient(145deg, #f8d28e, #b77e47); }.avatar.violet { background: linear-gradient(145deg, #c7a7ed, #7355a2); }.avatar.rose { background: linear-gradient(145deg, #f2a8ad, #a65168); }.employee-name { font-size: 12px; font-weight: 650; }.employee-role { color: var(--muted); font-size: 9px; margin-top: 3px; }.employee-status { margin-left: auto; text-align: right; }.employee-status strong { display: block; color: var(--cyan); font-size: 9px; letter-spacing: .08em; }.employee-status small { display: block; color: var(--faint); font-size: 8px; margin-top: 3px; }.need-bars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-top: 11px; }.need-label { color: var(--faint); display: flex; justify-content: space-between; font-size: 8px; margin-bottom: 4px; }.need-track { height: 3px; background: rgba(255,255,255,.08); border-radius: 4px; overflow: hidden; }.need-fill { height: 100%; border-radius: inherit; background: var(--cyan); }.need-fill.warm { background: var(--amber); }.need-fill.hot { background: var(--red); }.employee-footer { display: flex; align-items: center; gap: 7px; color: var(--faint); font-size: 9px; margin-top: 10px; }.employee-footer .status-led { color: var(--green); width: 5px; height: 5px; margin-right: 0; }.employee-footer button { margin-left: auto; }
.report-card, .case-card { padding: 11px 12px; }.report-card h3, .case-card h3 { margin: 7px 0 4px; font-size: 12px; font-weight: 650; }.report-card p, .case-card p { color: var(--muted); margin: 0; font-size: 10px; line-height: 1.5; }.report-tag { color: var(--faint); font-size: 8px; letter-spacing: .1em; }.case-card { border-left: 2px solid #9c7dea; }.case-card .case-tag { color: #bfa9ed; font-size: 8px; letter-spacing: .12em; font-weight: 800; }.activity-entry { padding: 9px 10px 9px 12px; position: relative; }.activity-entry:before { content: ""; position: absolute; left: -1px; top: 11px; width: 3px; height: 3px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 7px var(--cyan); }.activity-time { color: var(--faint); font-size: 8px; letter-spacing: .08em; }.activity-text { color: var(--muted); font-size: 10px; line-height: 1.4; margin-top: 4px; }.activity-text strong { color: var(--ink); font-weight: 600; }.empty-card { text-align: center; padding: 28px 18px; color: var(--faint); }.empty-card strong { display: block; color: var(--muted); font-size: 11px; margin-bottom: 6px; }.empty-card p { margin: 0; font-size: 10px; line-height: 1.5; }
.panel-footer { height: 34px; min-height: 34px; padding: 0 20px; border-top: 1px solid var(--line); color: var(--faint); font-size: 8px; letter-spacing: .12em; }.panel-footer .status-led { color: var(--green); width: 5px; height: 5px; margin-right: 8px; }.footer-divider { padding: 0 8px; color: #304957; }

.screen-overlay { position: fixed; inset: 0; z-index: 20; display: none; place-items: center; background: rgba(2, 7, 13, .82); backdrop-filter: blur(8px); }.screen-overlay.visible { display: grid; }.subtle-overlay { z-index: 12; background: rgba(2, 7, 13, .62); }.menu-backdrop-art { position: absolute; inset: 0; overflow: hidden; background: radial-gradient(circle at 70% 30%, rgba(20, 89, 110, .2), transparent 29%), linear-gradient(135deg, #060d17, #0a1a2a 52%, #06101b); }.radar-ring { position: absolute; border: 1px solid rgba(109, 228, 229, .12); border-radius: 50%; width: 650px; height: 650px; right: -95px; top: -110px; }.ring-two { width: 420px; height: 420px; right: 20px; top: 5px; border-color: rgba(109, 228, 229, .16); }.radar-sweep { position: absolute; right: 230px; top: -80px; width: 1px; height: 720px; transform: rotate(34deg); transform-origin: 50% 50%; background: linear-gradient(transparent, rgba(109, 228, 229, .5), transparent); box-shadow: 0 0 44px 13px rgba(109, 228, 229, .08); animation: sweep 7s linear infinite; }.cityline { position: absolute; inset: auto 0 0; height: 29%; opacity: .27; background: linear-gradient(90deg, transparent 0 5%, #0f2e3c 5% 7%, transparent 7% 11%, #15394a 11% 14%, transparent 14% 18%, #0b2835 18% 25%, transparent 25% 27%, #15394a 27% 32%, transparent 32% 38%, #0c2b3b 38% 43%, transparent 43% 49%, #123747 49% 56%, transparent 56% 60%, #0d2c3a 60% 66%, transparent 66% 72%, #14394b 72% 80%, transparent 80% 85%, #0b2838 85% 90%, transparent 90%); clip-path: polygon(0 100%, 0 58%, 6% 58%, 6% 44%, 10% 44%, 10% 65%, 14% 65%, 14% 29%, 19% 29%, 19% 57%, 25% 57%, 25% 42%, 31% 42%, 31% 67%, 36% 67%, 36% 20%, 41% 20%, 41% 59%, 47% 59%, 47% 36%, 53% 36%, 53% 61%, 60% 61%, 60% 26%, 66% 26%, 66% 52%, 72% 52%, 72% 33%, 78% 33%, 78% 63%, 84% 63%, 84% 42%, 90% 42%, 90% 56%, 100% 56%, 100% 100%); }
@keyframes sweep { from { transform: rotate(34deg); } to { transform: rotate(394deg); } }
.main-menu-card { position: relative; width: min(470px, calc(100vw - 34px)); margin-right: 0; padding: 35px 38px 22px; text-align: center; background: linear-gradient(145deg, rgba(11, 31, 46, .94), rgba(5, 14, 25, .96)); border: 1px solid rgba(147, 210, 228, .26); border-radius: 12px; box-shadow: var(--shadow), inset 0 1px rgba(255,255,255,.06); }.menu-kicker { color: var(--cyan-dim); font-size: 8px; letter-spacing: .17em; font-weight: 800; display: flex; align-items: center; gap: 8px; justify-content: center; }.kicker-line { height: 1px; width: 29px; background: var(--cyan-dim); opacity: .65; }.menu-emblem { position: relative; width: 77px; height: 67px; margin: 20px auto 14px; display: grid; place-items: center; }.shield { clip-path: polygon(50% 0, 90% 15%, 84% 69%, 50% 100%, 16% 69%, 10% 15%); width: 52px; height: 59px; display: grid; place-items: center; background: linear-gradient(145deg, #9df1ea, #328b9e); color: #09202c; font-size: 20px; box-shadow: 0 0 34px rgba(109,228,229,.2); }.emblem-wings { position: absolute; height: 9px; width: 23px; background: rgba(109, 228, 229, .7); top: 31px; }.emblem-wings.left { left: 0; transform: skewY(-19deg); }.emblem-wings.right { right: 0; transform: skewY(19deg); }.menu-title { font-size: 27px; font-weight: 300; letter-spacing: .15em; }.menu-title strong { color: var(--cyan); font-weight: 800; }.menu-description { color: var(--muted); font-size: 11px; margin: 8px 0 22px; }.menu-actions { display: grid; gap: 7px; text-align: left; }.menu-button { width: 100%; min-height: 49px; border: 1px solid var(--line); border-radius: 6px; background: rgba(18, 43, 59, .56); cursor: pointer; text-align: left; padding: 9px 13px; position: relative; transition: border-color .16s, background .16s, transform .16s; }.menu-button:hover { border-color: var(--cyan-dim); background: rgba(28, 73, 88, .58); transform: translateY(-1px); }.menu-button span { display: block; color: var(--ink); font-size: 10px; font-weight: 800; letter-spacing: .13em; }.menu-button small { display: block; color: var(--faint); margin-top: 4px; font-size: 9px; }.menu-button b { position: absolute; right: 13px; top: 15px; color: var(--cyan); font-size: 17px; font-weight: 400; }.menu-button.featured { background: linear-gradient(100deg, rgba(56, 155, 162, .35), rgba(19, 66, 83, .5)); border-color: rgba(109,228,229,.43); }.menu-button.compact { min-height: 39px; padding: 11px 13px; }.menu-button.compact span { font-size: 9px; }.menu-button.compact b { top: 10px; font-size: 14px; }.menu-button.muted span, .menu-button.muted b { color: var(--faint); }.menu-split { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }.menu-footer { justify-content: space-between; color: var(--faint); font-size: 7px; letter-spacing: .13em; margin-top: 24px; }.pause-card { width: min(390px, calc(100vw - 34px)); padding: 30px; background: rgba(9, 25, 39, .98); border: 1px solid var(--line-bright); border-radius: 10px; box-shadow: var(--shadow); }.pause-card h2 { margin: 10px 0 8px; font-size: 22px; font-weight: 500; }.pause-card p { color: var(--muted); line-height: 1.6; font-size: 12px; }.modal-actions { gap: 8px; margin-top: 22px; }.solid-button, .outline-button { border-radius: 5px; height: 35px; padding: 0 13px; cursor: pointer; border: 1px solid var(--cyan); font-size: 9px; font-weight: 800; letter-spacing: .1em; }.solid-button { background: var(--cyan); color: #06131d; }.outline-button { background: transparent; color: var(--muted); border-color: var(--line-bright); }.outline-button:hover { color: var(--ink); border-color: var(--cyan-dim); }

.modal-root { position: fixed; inset: 0; z-index: 30; display: none; align-items: center; justify-content: center; padding: 18px; background: rgba(2, 7, 13, .7); backdrop-filter: blur(6px); }.modal-root.visible { display: flex; }.modal-card { width: min(650px, 100%); max-height: min(760px, calc(100vh - 36px)); overflow: auto; border: 1px solid var(--line-bright); border-radius: 10px; background: linear-gradient(145deg, #0e2638, #071421); box-shadow: var(--shadow); }.modal-card.wide { width: min(800px, 100%); }.modal-header { display: flex; justify-content: space-between; align-items: start; padding: 22px 24px 16px; border-bottom: 1px solid var(--line); }.modal-header h2 { margin: 6px 0 0; font-weight: 550; font-size: 19px; }.modal-header p { color: var(--muted); font-size: 11px; margin: 7px 0 0; }.close-modal { width: 28px; height: 28px; border: 1px solid var(--line); background: transparent; color: var(--muted); border-radius: 5px; cursor: pointer; font-size: 16px; }.close-modal:hover { color: var(--ink); border-color: var(--cyan-dim); }.modal-body { padding: 18px 24px 24px; }.modal-body p, .modal-body li { color: var(--muted); font-size: 11px; line-height: 1.65; }.modal-body h3 { font-size: 11px; color: var(--cyan); letter-spacing: .1em; text-transform: uppercase; margin: 18px 0 8px; }.modal-body h3:first-child { margin-top: 0; }.save-grid, .candidate-grid, .setting-grid { display: grid; gap: 9px; }.save-grid { grid-template-columns: repeat(2, 1fr); }.save-slot { min-height: 82px; border: 1px solid var(--line); border-radius: 7px; background: rgba(17, 39, 55, .5); padding: 12px; cursor: pointer; text-align: left; }.save-slot:hover { border-color: var(--cyan-dim); }.save-slot:disabled { cursor: not-allowed; opacity: .55; }.save-slot:disabled:hover { border-color: var(--line); }.save-slot strong { display: block; color: var(--ink); font-size: 11px; }.save-slot span { display: block; color: var(--faint); font-size: 9px; margin-top: 7px; }.save-slot small { color: var(--cyan); font-size: 8px; letter-spacing: .1em; display: block; margin-top: 7px; }.candidate-grid { grid-template-columns: repeat(2, 1fr); }.candidate-card { border: 1px solid var(--line); border-radius: 7px; padding: 12px; background: rgba(17, 39, 55, .5); }.candidate-card .candidate-top { display: flex; gap: 9px; align-items: center; }.candidate-card h3 { margin: 0; font-size: 12px; font-weight: 650; }.candidate-card p { margin: 3px 0 0; color: var(--muted); font-size: 9px; }.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5px 12px; margin: 12px 0; }.stat-line { display: flex; justify-content: space-between; color: var(--faint); font-size: 8px; }.stat-line b { color: var(--muted); font-weight: 650; }.candidate-card button { width: 100%; }.setting-grid { grid-template-columns: 1fr 1fr; }.setting-item { border: 1px solid var(--line); padding: 12px; border-radius: 7px; background: rgba(17, 39, 55, .45); }.setting-item label { color: var(--muted); font-size: 10px; display: flex; justify-content: space-between; margin-bottom: 10px; }.setting-item output { color: var(--cyan); }.setting-item input[type="range"] { width: 100%; accent-color: var(--cyan); }.toggle-row { display: flex; align-items: center; justify-content: space-between; }.toggle { width: 34px; height: 19px; border-radius: 12px; background: #203c4a; border: 1px solid var(--line-bright); padding: 2px; cursor: pointer; }.toggle span { display: block; width: 13px; height: 13px; background: var(--faint); border-radius: 50%; transition: transform .15s, background .15s; }.toggle.on { background: rgba(109,228,229,.2); }.toggle.on span { background: var(--cyan); transform: translateX(14px); }.interrogation-dialogue { border: 1px solid var(--line); border-radius: 7px; padding: 12px; background: rgba(4, 13, 22, .35); max-height: 260px; overflow: auto; }.dialogue-line { padding: 8px 0; border-bottom: 1px solid rgba(147,190,212,.09); }.dialogue-line:last-child { border-bottom: 0; }.dialogue-line strong { color: var(--cyan); font-size: 9px; letter-spacing: .08em; }.dialogue-line p { margin: 4px 0 0; color: var(--muted); }.approach-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; margin-top: 12px; }.approach-button { border: 1px solid var(--line); border-radius: 5px; padding: 9px 6px; background: rgba(17,39,55,.5); color: var(--muted); cursor: pointer; font-size: 8px; font-weight: 700; letter-spacing: .06em; }.approach-button:hover { color: var(--cyan); border-color: var(--cyan-dim); }.notification-copy { color: var(--muted); font-size: 11px; line-height: 1.55; }.danger-copy { color: var(--red); }

.case-requirement { display: inline-block; margin-top: 5px; color: var(--red); font-size: 8px; letter-spacing: .08em; font-weight: 800; }
.status-pill.interview-required { color: var(--red); background: rgba(255,110,120,.1); }

.court-overdue-badge { color: var(--red) !important; background: rgba(255,110,120,.12) !important; border: 1px solid rgba(255,110,120,.28); }.court-overdue-badge.empty { display: none; }.court-docket-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 7px; margin: 0 3px 11px; }.court-docket-control { display: grid; gap: 4px; min-width: 0; }.court-docket-control span { color: var(--faint); font-size: 7px; font-weight: 800; letter-spacing: .1em; }.court-docket-control select { width: 100%; min-width: 0; padding: 6px 7px; border: 1px solid var(--line-bright); border-radius: 4px; background: rgba(8,23,36,.85); color: var(--muted); font-family: inherit; font-size: 8px; letter-spacing: .04em; outline: none; }.court-docket-control select:focus { border-color: var(--cyan-dim); color: var(--ink); }.court-docket-overdue-count { display: flex; align-items: center; justify-content: center; align-self: end; gap: 4px; min-width: 57px; height: 28px; padding: 0 6px; border: 1px solid rgba(255,110,120,.28); border-radius: 4px; color: var(--red); background: rgba(255,110,120,.08); }.court-docket-overdue-count span { font-size: 7px; font-weight: 800; letter-spacing: .08em; }.court-docket-overdue-count b { font-size: 11px; line-height: 1; }.court-docket-overdue-count.empty { color: var(--faint); border-color: var(--line); background: rgba(17,39,55,.28); }.court-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 12px; }.court-summary > div { border: 1px solid rgba(109,228,229,.14); border-radius: 5px; padding: 8px; background: rgba(17,39,55,.38); }.court-summary span, .court-facts span, .court-choice span, .court-reasoning > span { display: block; color: var(--faint); font-size: 7px; letter-spacing: .1em; }.court-summary b { display: block; color: var(--cyan); font-size: 13px; margin-top: 3px; }.court-card { padding: 12px; border-left: 2px solid var(--violet, #bca2eb); }.court-card.pending { border-left-color: var(--amber); }.court-card h3 { margin: 8px 0 3px; font-size: 13px; }.court-tag { color: #bfa9ed; font-size: 8px; letter-spacing: .1em; font-weight: 800; }.court-charges { color: var(--muted); font-size: 9px; margin: 0; line-height: 1.45; }.court-hearing { display: grid; gap: 4px; margin-top: 12px; padding: 10px; border: 1px solid rgba(246,189,112,.2); border-radius: 5px; background: rgba(246,189,112,.06); }.court-hearing strong, .court-verdict span, .court-impact strong { color: var(--amber); font-size: 8px; letter-spacing: .1em; }.court-hearing span { color: var(--ink); font-size: 10px; }.court-hearing small { color: var(--faint); font-size: 9px; line-height: 1.4; }.court-verdict { display: grid; gap: 4px; margin-top: 12px; padding: 10px; border: 1px solid rgba(123,223,162,.22); border-left: 3px solid var(--green); border-radius: 5px; background: rgba(123,223,162,.06); }.court-verdict strong { color: var(--green); font-size: 11px; line-height: 1.35; }.court-verdict b { color: var(--ink); font-size: 10px; font-weight: 600; }.court-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 11px; }.court-facts div { border-top: 1px solid rgba(147,190,212,.1); padding-top: 6px; }.court-facts b { display: block; color: var(--muted); font-size: 9px; margin-top: 3px; }.court-choice, .court-reasoning, .court-impact { margin-top: 11px; border-top: 1px solid rgba(147,190,212,.1); padding-top: 8px; }.court-choice b { display: block; color: var(--amber); font-size: 9px; line-height: 1.45; margin-top: 4px; }.court-reasoning ul { margin: 5px 0 0; padding-left: 17px; color: var(--muted); font-size: 9px; line-height: 1.45; }.court-impact { padding: 9px; border: 1px solid rgba(109,228,229,.15); border-radius: 5px; background: rgba(109,228,229,.04); }.court-impact strong { color: var(--cyan); }.court-impact p { color: var(--muted); font-size: 9px; line-height: 1.45; margin: 5px 0; }.court-impact small { color: var(--faint); font-size: 8px; letter-spacing: .06em; }

.victim-report { margin-top: 12px; padding: 10px; border: 1px solid rgba(246,189,112,.2); border-left: 3px solid var(--amber); border-radius: 5px; background: rgba(246,189,112,.045); }.victim-report-heading { display: flex; justify-content: space-between; align-items: start; gap: 8px; }.victim-report-heading strong { color: var(--amber); font-size: 8px; letter-spacing: .1em; }.victim-report-heading span { color: var(--red); font-size: 7px; letter-spacing: .06em; font-weight: 800; text-align: right; }.victim-report-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 9px; }.victim-report-facts div { border-top: 1px solid rgba(147,190,212,.1); padding-top: 6px; }.victim-report-facts span { display: block; color: var(--faint); font-size: 7px; letter-spacing: .08em; }.victim-report-facts b { display: block; color: var(--muted); font-size: 9px; line-height: 1.35; margin-top: 3px; }.victim-report p { color: var(--muted); font-size: 9px; line-height: 1.45; margin: 9px 0 0; }.victim-report p strong { color: var(--ink); font-size: 8px; letter-spacing: .08em; }.victim-report > small { display: block; color: var(--faint); font-size: 8px; line-height: 1.4; margin-top: 9px; }.victim-report-section { margin-top: 12px; border-top: 1px solid rgba(147,190,212,.1); padding-top: 9px; }.victim-report-section-title { color: var(--cyan); font-size: 8px; font-weight: 800; letter-spacing: .1em; margin-bottom: 7px; }.contact-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 9px; }.contact-actions .mini-button { min-width: 0; width: 100%; padding: 5px 3px; font-size: 6px; line-height: 1.1; letter-spacing: .06em; white-space: nowrap; }.contact-log-list { display: grid; gap: 6px; }.contact-log-entry { display: grid; grid-template-columns: 52px 1fr; gap: 8px; padding: 7px; border: 1px solid rgba(147,190,212,.1); border-radius: 5px; background: rgba(17,39,55,.3); }.contact-log-entry strong { display: block; color: var(--ink); font-size: 8px; letter-spacing: .04em; }.contact-log-entry p { margin: 4px 0 0; font-size: 8px; line-height: 1.4; color: var(--muted); }.contact-log-entry small { display: block; color: var(--faint); font-size: 7px; margin-top: 4px; }.contact-log-type { align-self: start; padding: 3px 5px; border-radius: 3px; background: rgba(109,228,229,.12); color: var(--cyan); font-size: 7px; font-weight: 800; letter-spacing: .06em; text-align: center; }.contact-log-type.statement { background: rgba(246,189,112,.14); color: var(--amber); }.contact-log-type.meet { background: rgba(123,223,162,.13); color: var(--green); }.contact-action-form { display: grid; gap: 12px; }.form-field { display: grid; gap: 6px; }.form-field span { color: var(--faint); font-size: 8px; font-weight: 800; letter-spacing: .1em; }.form-field select, .form-field textarea { width: 100%; background: rgba(8, 23, 36, .85); border: 1px solid var(--line-bright); border-radius: 5px; color: var(--ink); padding: 8px 9px; font-size: 10px; font-family: inherit; outline: none; }.form-field select:focus, .form-field textarea:focus { border-color: var(--cyan-dim); }.form-field textarea { resize: vertical; min-height: 72px; line-height: 1.5; }.victim-contact-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }.victim-contact-card, .impact-statement { min-width: 0; padding: 8px; border: 1px solid rgba(147,190,212,.12); border-radius: 5px; background: rgba(17,39,55,.34); }.victim-contact-head, .case-update-head { display: flex; align-items: start; justify-content: space-between; gap: 7px; }.victim-contact-head strong, .case-update-head strong { color: var(--amber); font-size: 7px; letter-spacing: .08em; }.victim-contact-head span, .case-update-head span { color: var(--faint); font-size: 7px; font-weight: 800; letter-spacing: .04em; text-align: right; }.victim-contact-card > b { display: block; color: var(--ink); font-size: 10px; margin-top: 7px; }.victim-contact-card > small, .impact-statement > small, .case-update > small, .support-followup > small { display: block; color: var(--faint); font-size: 7px; line-height: 1.4; margin-top: 5px; }.victim-contact-card p, .impact-statement p, .case-update p { margin: 6px 0 0; font-size: 8px; line-height: 1.4; }.impact-statement-list { display: grid; gap: 7px; }.impact-statement .victim-contact-head span { color: var(--green); }.case-update-list { display: grid; gap: 8px; }.case-update { display: grid; grid-template-columns: 9px 1fr; gap: 7px; position: relative; }.case-update:not(:last-child)::before { content: ""; position: absolute; left: 3px; top: 9px; bottom: -9px; width: 1px; background: rgba(109,228,229,.25); }.case-update-dot { width: 7px; height: 7px; margin-top: 3px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 8px rgba(109,228,229,.4); z-index: 1; }.support-followup { margin-top: 12px; padding: 9px; border: 1px solid rgba(109,228,229,.16); border-radius: 5px; background: rgba(109,228,229,.04); }.support-followup.overdue { border-color: rgba(255,110,120,.42); border-left: 3px solid var(--red); background: rgba(255,110,120,.055); }.support-followup.upcoming { border-color: rgba(246,189,112,.34); border-left: 3px solid var(--amber); background: rgba(246,189,112,.045); }.support-followup.overdue.acknowledged { border-color: rgba(246,189,112,.34); border-left-color: var(--amber); background: rgba(246,189,112,.045); }.support-followup .victim-contact-head strong { color: var(--cyan); }.support-followup-alert { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 9px; padding: 6px 7px; border: 1px solid rgba(147,190,212,.12); border-radius: 4px; font-size: 7px; letter-spacing: .06em; }.support-followup-alert-copy { display: grid; gap: 2px; flex: 1; min-width: 0; }.support-followup-alert strong { font-size: 7px; letter-spacing: .1em; }.support-followup-alert span { color: var(--muted); font-size: 7px; text-align: left; }.support-followup-alert .support-followup-acknowledge { flex: 0 0 auto; padding: 5px 7px; font-size: 7px; }.support-followup-alert.overdue { border-color: rgba(255,110,120,.28); background: rgba(255,110,120,.08); }.support-followup-alert.overdue strong, .support-followup-review-fact.overdue b { color: var(--red); }.support-followup-alert.overdue.acknowledged { border-color: rgba(246,189,112,.24); background: rgba(246,189,112,.07); }.support-followup-alert.overdue.acknowledged strong { color: var(--amber); }.support-followup-review-fact.overdue.acknowledged b { color: var(--amber); }.support-followup-alert.upcoming { border-color: rgba(246,189,112,.24); background: rgba(246,189,112,.07); }.support-followup-alert.upcoming strong, .support-followup-review-fact.upcoming b { color: var(--amber); }.support-followup > p { margin-top: 7px; }.support-followup-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 9px; }.support-followup-facts div { border-top: 1px solid rgba(147,190,212,.1); padding-top: 6px; }.support-followup-facts span { display: block; color: var(--faint); font-size: 7px; letter-spacing: .08em; }.support-followup-facts b { display: block; color: var(--muted); font-size: 8px; line-height: 1.35; margin-top: 3px; }.support-service-list { display: grid; gap: 4px; margin-top: 9px; }.support-service { display: flex; justify-content: space-between; gap: 8px; padding: 5px 7px; border-top: 1px solid rgba(147,190,212,.08); color: var(--muted); font-size: 8px; }.support-service b { color: var(--amber); font-size: 7px; letter-spacing: .05em; }.support-followup-items { display: grid; gap: 5px; margin-top: 9px; }.support-followup-item { display: flex; align-items: center; gap: 8px; padding: 6px 7px; border: 1px solid rgba(109,228,229,.14); border-radius: 4px; background: rgba(8,23,36,.36); }.support-followup-item > span { flex: 1; color: var(--muted); font-size: 8px; line-height: 1.4; }.support-followup-item .mini-button { flex: 0 0 auto; padding: 5px 7px; font-size: 7px; }.support-followup-completed { display: block; color: var(--green); font-size: 7px; line-height: 1.4; margin-top: 8px; }.support-followup-history { margin-top: 10px; padding-top: 8px; border-top: 1px solid rgba(147,190,212,.1); }.support-followup-history-title { color: var(--cyan); font-size: 7px; font-weight: 800; letter-spacing: .1em; margin-bottom: 6px; }.support-followup-history-list { display: grid; gap: 5px; }.support-followup-history-entry { display: grid; grid-template-columns: 63px 1fr; gap: 7px; padding: 6px 7px; border: 1px solid rgba(147,190,212,.1); border-radius: 4px; background: rgba(17,39,55,.28); }.support-followup-history-entry > span { align-self: start; padding: 3px 4px; border-radius: 3px; background: rgba(246,189,112,.12); color: var(--amber); font-size: 6px; font-weight: 800; letter-spacing: .06em; text-align: center; }.support-followup-history-entry strong { display: block; color: var(--ink); font-size: 8px; line-height: 1.35; }.support-followup-history-entry small { display: block; color: var(--faint); font-size: 7px; margin-top: 3px; }.outcome-empty { padding: 8px; border: 1px dashed rgba(147,190,212,.15); color: var(--faint); font-size: 8px; line-height: 1.4; }

/* Custody, booking, and interview presentation. */
.fast-forward-button { color: var(--amber); border-color: rgba(246,189,112,.34); }.fast-forward-button.active { color: #08131c; background: var(--amber); border-color: var(--amber); }.next-day-button { color: var(--cyan); border-color: rgba(109,228,229,.34); }
.custody-card { border-left: 2px solid var(--amber); padding: 12px; }.custody-card.in-interview { border-left-color: var(--red); }.custody-card h3 { margin: 8px 0 4px; font-size: 13px; }.custody-card p { color: var(--muted); font-size: 10px; line-height: 1.5; margin: 0; }.custody-tag { color: var(--amber); font-size: 8px; letter-spacing: .13em; font-weight: 800; }.custody-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; margin: 11px 0; }.custody-detail-grid span { color: var(--faint); font-size: 8px; }.custody-detail-grid b { color: var(--muted); display: block; font-size: 9px; margin-top: 2px; font-weight: 600; }.custody-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }.mini-button.danger { color: var(--red); border-color: rgba(255,110,120,.3); }.mini-button.amber { color: var(--amber); border-color: rgba(246,189,112,.35); }
.interrogation-modal { width: min(1120px, 100%) !important; max-height: min(870px, calc(100vh - 28px)); }.interrogation-modal .modal-body { padding: 18px 22px 23px; }.interrogation-layout { display: grid; grid-template-columns: 226px minmax(0, 1fr); gap: 18px; align-items: start; }.suspect-profile { border: 1px solid rgba(246,189,112,.24); border-radius: 8px; padding: 12px; background: linear-gradient(150deg, rgba(41,42,53,.72), rgba(10,19,29,.55)); position: sticky; top: 0; }.suspect-profile h3 { color: var(--ink); margin: 11px 0 2px; font-size: 15px; letter-spacing: -.01em; }.suspect-profile .profile-role { color: var(--amber); font-size: 8px; letter-spacing: .12em; font-weight: 800; }.profile-photo { height: 148px; border-radius: 5px; overflow: hidden; position: relative; display: grid; place-items: end center; background: radial-gradient(circle at 50% 34%, rgba(238,191,160,.88) 0 15%, transparent 15.5%), linear-gradient(150deg, #526a75 0 36%, #202b35 36% 100%); border: 1px solid rgba(255,255,255,.16); box-shadow: inset 0 0 28px rgba(0,0,0,.34); }.profile-photo:before { content: ""; position: absolute; width: 66px; height: 76px; top: 29px; border-radius: 48% 48% 42% 42%; background: var(--suspect-skin, #d99a74); box-shadow: 0 -15px 0 4px var(--suspect-hair, #241b1a), 0 39px 0 22px rgba(48,58,67,.95); }.profile-photo:after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(255,255,255,.025) 4px), linear-gradient(90deg, rgba(255,255,255,.07), transparent 30% 70%, rgba(0,0,0,.16)); pointer-events: none; }.profile-photo-label { position: relative; z-index: 1; width: 100%; padding: 5px 7px; background: rgba(5,12,18,.75); color: #dce8e7; font-size: 7px; letter-spacing: .12em; }.profile-photo-initials { position: relative; z-index: 1; margin-bottom: 29px; color: rgba(255,255,255,.8); font-size: 17px; font-weight: 800; letter-spacing: .08em; text-shadow: 0 1px 4px #000; }.profile-metadata { display: grid; gap: 7px; margin-top: 12px; }.profile-metadata div { border-top: 1px solid rgba(147,190,212,.1); padding-top: 6px; }.profile-metadata span { display: block; color: var(--faint); font-size: 7px; letter-spacing: .1em; }.profile-metadata b { display: block; color: var(--muted); font-size: 9px; line-height: 1.35; margin-top: 2px; font-weight: 600; }.interrogation-main { min-width: 0; }.interrogation-main .card-row { margin-bottom: 10px; }.interrogation-dialogue { max-height: 390px; min-height: 190px; }.dialogue-line { padding: 10px 5px; }.dialogue-line:nth-child(even) { padding-left: 22px; }.dialogue-line:nth-child(even) strong { color: var(--amber); }.confession-banner { padding: 12px 14px; margin-top: 12px; border: 1px solid rgba(255,110,120,.48); border-left: 3px solid var(--red); border-radius: 6px; background: rgba(255,110,120,.09); color: #ffd8da; font-size: 11px; line-height: 1.5; }.confession-banner strong { display: block; color: var(--red); font-size: 9px; letter-spacing: .12em; margin-bottom: 4px; }.interrogation-actions { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }.profile-stat-grid { grid-template-columns: 1fr 1fr; margin: 10px 0 0; }.profile-stat-grid .stat-line { font-size: 8px; }.profile-stat-grid b { color: var(--amber); }
@media (max-width: 760px) { .interrogation-layout { grid-template-columns: 1fr; }.suspect-profile { position: static; display: grid; grid-template-columns: 100px 1fr; gap: 10px; }.suspect-profile .profile-photo { grid-row: span 3; height: 130px; }.profile-metadata { grid-column: 2; }.custody-actions { grid-template-columns: 1fr; }.victim-contact-grid { grid-template-columns: 1fr; }.command-hint { display: none; } }

@media (max-width: 1050px) { .game-layout { grid-template-columns: minmax(0, 1fr) 320px; }.station-readout { gap: 16px; margin-right: 14px; }.command-hint { display: none; }.main-menu-card { margin-right: 0; } }
@media (max-width: 790px) { html, body { overflow: auto; }.app-shell { min-height: 100%; height: auto; }.topbar { padding: 0 13px; }.brand-lockup { min-width: 0; }.brand-subtitle, .station-readout, .offline-badge { display: none; }.game-layout { display: block; }.viewport-column { min-height: 64vh; height: 64vh; padding: 9px; }.command-panel { height: 520px; border-left: 0; border-top: 1px solid var(--line); }.command-bar { height: auto; min-height: 42px; padding-bottom: 8px; }.command-button { padding: 0 7px; }#fitButton { display: none; }.main-menu-card { margin: 0; padding: 28px 22px 19px; }.menu-title { font-size: 21px; }.modal-body { padding: 16px; }.candidate-grid, .setting-grid { grid-template-columns: 1fr; }.save-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 430px) { .command-group .speed-button:nth-child(4) { display: none; }.command-button { font-size: 8px; }.panel-tabs { padding: 0 8px; }.panel-tab { padding-left: 5px; padding-right: 5px; }.main-menu-card { width: calc(100vw - 22px); }.menu-footer { font-size: 6px; }.save-grid { grid-template-columns: 1fr; } }

/* Keep live controls stable while the simulation refreshes around them. */
button { -webkit-tap-highlight-color: transparent; touch-action: manipulation; user-select: none; }
button:disabled { cursor: not-allowed; opacity: .55; }
.mini-button, .approach-button, .solid-button, .outline-button, .icon-button, .close-modal, .panel-tab { transition: background-color .14s ease, border-color .14s ease, color .14s ease, opacity .14s ease, transform .08s ease; }
.mini-button:active:not(:disabled), .approach-button:active:not(:disabled), .solid-button:active:not(:disabled), .outline-button:active:not(:disabled), .icon-button:active:not(:disabled), .close-modal:active:not(:disabled), .panel-tab:active:not(:disabled) { transform: translateY(1px); }
.approach-button:hover { color: var(--cyan); border-color: var(--cyan-dim); background: rgba(34, 105, 113, .22); }
.solid-button:hover { background: #a3f3ed; border-color: #a3f3ed; }

/* AAA procedural mugshot: layered facial geometry, lens glare, skin shading, hair texture, and ID-camera treatment. */
.profile-photo.photo-real { display: block; isolation: isolate; overflow: hidden; background: #18232d; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), inset 0 -28px 42px rgba(0,0,0,.34), 0 8px 18px rgba(0,0,0,.18); }
.profile-photo.photo-real:before, .profile-photo.photo-real:after { content: none; }
.photo-real > span { position: absolute; display: block; pointer-events: none; }
.portrait-backdrop { inset: 0; z-index: 0; background: radial-gradient(ellipse at 50% 42%, rgba(122,164,174,.28), transparent 44%), linear-gradient(135deg, #607985, #283945 57%, #111c25); }
.portrait-backdrop:before { content: ""; position: absolute; inset: 0; opacity: .2; background: repeating-linear-gradient(90deg, transparent 0 17px, rgba(255,255,255,.09) 18px, transparent 19px), linear-gradient(115deg, transparent 35%, rgba(255,255,255,.16) 48%, transparent 57%); }
.portrait-shoulders { z-index: 2; left: 50%; bottom: -19px; width: 142px; height: 78px; transform: translateX(-50%); clip-path: polygon(31% 0, 69% 0, 100% 37%, 100% 100%, 0 100%, 0 37%); background: linear-gradient(110deg, rgba(255,255,255,.2), transparent 16% 72%, rgba(0,0,0,.34)), var(--suspect-uniform, #494153); border-top: 1px solid rgba(255,255,255,.25); }
.portrait-shoulders:before, .portrait-shoulders:after { content: ""; position: absolute; top: 5px; width: 34px; height: 45px; border: 1px solid rgba(255,255,255,.17); }
.portrait-shoulders:before { left: 34px; transform: skewX(-18deg); border-top: 0; }.portrait-shoulders:after { right: 34px; transform: skewX(18deg); border-top: 0; }
.portrait-neck { z-index: 3; top: 86px; left: 50%; width: 27px; height: 43px; transform: translateX(-50%); background: linear-gradient(90deg, rgba(65,31,31,.28), transparent 36% 62%, rgba(0,0,0,.22)), var(--suspect-skin, #d99a74); border-radius: 5px 5px 10px 10px; }
.portrait-head { z-index: 4; top: 28px; left: 50%; width: 75px; height: 88px; transform: translateX(-50%); border-radius: 48% 48% 46% 46%; background: radial-gradient(circle at 33% 27%, rgba(255,255,255,.25), transparent 13%), radial-gradient(circle at 66% 73%, rgba(75,29,28,.14), transparent 33%), linear-gradient(105deg, rgba(74,33,32,.2), transparent 34% 65%, rgba(0,0,0,.2)), var(--suspect-skin, #d99a74); box-shadow: inset -7px -5px 10px rgba(45,18,24,.18), inset 7px 5px 10px rgba(255,255,255,.13), 0 2px 5px rgba(0,0,0,.28); }
.portrait-head:before { content: ""; position: absolute; inset: 42px 10px 6px; opacity: .18; border-radius: 50%; background: radial-gradient(circle at 20% 45%, #4e2830 0 1px, transparent 1.5px), radial-gradient(circle at 36% 63%, #4e2830 0 1px, transparent 1.5px), radial-gradient(circle at 57% 58%, #4e2830 0 1px, transparent 1.5px), radial-gradient(circle at 78% 47%, #4e2830 0 1px, transparent 1.5px); background-size: 11px 9px, 13px 11px, 9px 12px, 12px 10px; }
.portrait-hair { z-index: 6; top: 18px; left: 50%; width: 82px; height: 49px; transform: translateX(-50%); border-radius: 51% 51% 30% 30%; background: linear-gradient(110deg, rgba(255,255,255,.15), transparent 22% 66%, rgba(0,0,0,.42)), var(--suspect-hair, #241b1a); box-shadow: inset 0 5px 8px rgba(255,255,255,.08), 0 2px 4px rgba(0,0,0,.28); }
.portrait-hair:before { content: ""; position: absolute; inset: 5px 8px 18px; border-radius: 50%; background: repeating-linear-gradient(105deg, transparent 0 5px, rgba(255,255,255,.11) 6px, transparent 8px); opacity: .65; }.portrait-hair:after { content: ""; position: absolute; left: 3px; right: 3px; bottom: -5px; height: 22px; border-radius: 0 0 48% 48%; background: linear-gradient(90deg, var(--suspect-hair, #241b1a), transparent 22% 78%, var(--suspect-hair, #241b1a)); }
.hair-style-1 .portrait-hair { border-radius: 48% 48% 20% 30%; height: 42px; }.hair-style-1 .portrait-hair:after { left: -1px; right: -1px; bottom: -11px; height: 30px; }.hair-style-2 .portrait-hair { height: 40px; border-radius: 44% 44% 34% 34%; }.hair-style-2 .portrait-hair:before { border-radius: 55%; box-shadow: -17px 3px 0 -3px var(--suspect-hair, #241b1a), 17px 3px 0 -3px var(--suspect-hair, #241b1a); }
.portrait-ear { z-index: 3; top: 66px; width: 13px; height: 22px; border-radius: 50%; background: var(--suspect-skin, #d99a74); box-shadow: inset 2px 0 3px rgba(76,30,32,.22); }.portrait-ear-left { left: calc(50% - 43px); }.portrait-ear-right { right: calc(50% - 43px); }
.portrait-brow { z-index: 7; top: 62px; width: 22px; height: 4px; border-radius: 50%; background: var(--suspect-hair, #241b1a); opacity: .82; }.portrait-brow-left { left: calc(50% - 33px); transform: rotate(-7deg); }.portrait-brow-right { right: calc(50% - 33px); transform: rotate(7deg); }
.portrait-eye { z-index: 8; top: 68px; width: 19px; height: 9px; border-radius: 50%; background: rgba(238,244,239,.92); box-shadow: 0 1px 0 rgba(55,26,28,.38); }.portrait-eye-left { left: calc(50% - 31px); }.portrait-eye-right { right: calc(50% - 31px); }.portrait-eye:after { content: ""; position: absolute; left: -2px; right: -2px; top: 1px; height: 1px; background: rgba(32,20,27,.65); }.portrait-eye i { position: absolute; top: 2px; left: 7px; width: 6px; height: 6px; border-radius: 50%; background: #263139; box-shadow: 0 0 0 2px rgba(24,27,31,.12), 1px 1px 0 #060b10; }
.portrait-nose { z-index: 8; top: 75px; left: 50%; width: 10px; height: 23px; transform: translateX(-50%); border-right: 1px solid rgba(83,35,35,.36); border-bottom: 2px solid rgba(83,35,35,.46); border-radius: 0 0 60% 40%; }.portrait-nose:after { content: ""; position: absolute; bottom: -2px; left: -5px; width: 4px; height: 2px; border-radius: 50%; background: rgba(76,30,31,.46); box-shadow: 10px 0 rgba(76,30,31,.46); }
.portrait-cheek { z-index: 7; top: 83px; width: 22px; height: 13px; border-radius: 50%; background: rgba(212,91,94,.12); filter: blur(2px); }.portrait-cheek-left { left: calc(50% - 34px); }.portrait-cheek-right { right: calc(50% - 34px); }
.portrait-mouth { z-index: 9; top: 101px; left: 50%; width: 27px; height: 11px; transform: translateX(-50%); border-bottom: 2px solid rgba(83,28,35,.75); border-radius: 0 0 50% 50%; }.portrait-mouth:before { content: ""; position: absolute; left: 3px; right: 3px; top: -2px; height: 4px; border-top: 1px solid rgba(255,210,192,.35); border-radius: 50%; }.portrait-mouth:after { content: ""; position: absolute; left: 7px; right: 7px; bottom: 0; height: 2px; border-radius: 50%; background: rgba(45,18,24,.35); }
.portrait-photo-glare { z-index: 10; inset: 0; background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(255,255,255,.025) 4px), linear-gradient(112deg, transparent 22%, rgba(255,255,255,.17) 33%, transparent 41% 77%, rgba(0,0,0,.16)); box-shadow: inset 0 0 22px rgba(0,0,0,.28); }.portrait-photo-glare:before, .portrait-photo-glare:after { content: ""; position: absolute; width: 13px; height: 13px; border-color: rgba(209,237,232,.55); }.portrait-photo-glare:before { left: 8px; top: 8px; border-left: 1px solid; border-top: 1px solid; }.portrait-photo-glare:after { right: 8px; bottom: 31px; border-right: 1px solid; border-bottom: 1px solid; }
.profile-photo.photo-real .profile-photo-initials { z-index: 11; position: absolute; right: 9px; top: 9px; margin: 0; color: rgba(232,241,246,.54); font-size: 8px; letter-spacing: .14em; }.profile-photo.photo-real .profile-photo-label { z-index: 12; position: absolute; left: 0; bottom: 0; }
@media (max-width: 760px) { .profile-photo.photo-real { height: 130px !important; }.profile-photo.photo-real .portrait-head { top: 24px; transform: translateX(-50%) scale(.86); }.profile-photo.photo-real .portrait-hair { top: 14px; transform: translateX(-50%) scale(.86); }.profile-photo.photo-real .portrait-neck { top: 76px; transform: translateX(-50%) scale(.86); }.profile-photo.photo-real .portrait-shoulders { transform: translateX(-50%) scale(.86); transform-origin: bottom center; } }