@font-face { font-family: kenvector; src: url("assets/Assets/Kenneys/2Dassets/UI%20Space%20Pack/Fonts/kenvector_future.ttf"); }
@font-face { font-family: kenvector-thin; src: url("assets/Assets/Kenneys/2Dassets/UI%20Space%20Pack/Fonts/kenvector_future_thin.ttf"); }
@font-face { font-family: liberation; src: url("assets/Assets/TextMesh%20Pro/Fonts/LiberationSans.ttf"); }
/* GENERATED by Tools/UIPrototype/generate.py from Assets/UI - do not edit. */
/* ---- Assets/UI/Theme/tokens.uss (theme) ---- */
:root { --color-bg: #0a0f14; --color-strip: #05080b; --color-sheet: #0d1319; --color-panel: #11181f; --color-panel-2: #141b22; --color-border: #22303a; --color-border-dark: #1a232c; --color-cyan: #35E0F0; --color-cyan-hover: #6eeafc; --color-cyan-dim: #1f3b41; --color-green: #2fd35a; --color-green-hover: #5be87f; --color-red: #e0322a; --color-amber: #f0a020; --color-yellow: #f2d21b; --color-purple: #c85cf0; --color-muted: #8a9aa6; --color-muted-2: #5a6570; --color-mute-ring: #3a4652; --color-text: #e6edf2; --color-text-2: #c9d2d9; --color-text-3: #b8c2c9; --color-ink: #06141a; --color-white: #ffffff; --color-camera: #1c2024; --color-toast-ok: #1f8a3a; --color-scrim: rgba(5, 8, 11, 0.851); --color-scrim-strong: rgba(5, 8, 11, 0.924); --scrim-70: rgba(5, 8, 11, 0.914); --scrim-75: rgba(5, 8, 11, 0.938); --scrim-80: rgba(5, 8, 11, 0.958); --scrim-90: rgba(5, 8, 11, 0.986); --scrim-92: rgba(5, 8, 11, 0.990); --tint-amber-12: rgba(240, 160, 32, 0.016); --tint-amber-20: rgba(240, 160, 32, 0.038); --tint-black-30: rgba(0, 0, 0, 0.552); --tint-black-35: rgba(0, 0, 0, 0.620); --tint-black-75: rgba(0, 0, 0, 0.949); --tint-camera: rgba(255, 255, 255, 0.2); --tint-cyan-12: rgba(53, 224, 240, 0.019); --tint-cyan-15: rgba(53, 224, 240, 0.027); --tint-cyan-20: rgba(53, 224, 240, 0.043); --tint-cyan-28: rgba(53, 224, 240, 0.077); --tint-cyan-40: rgba(53, 224, 240, 0.151); --tint-cyan-50: rgba(53, 224, 240, 0.234); --tint-cyan-55: rgba(53, 224, 240, 0.284); --tint-grid: rgba(255, 255, 255, 0.1); --tint-muted-10: rgba(138, 154, 166, 0.019); --tint-red-12: rgba(224, 50, 42, 0.017); --tint-white-12: rgba(255, 255, 255, 0.015); --tint-white-75: rgba(255, 255, 255, 0.529); --tint-yellow-12: rgba(242, 210, 27, 0.016); --color-frame: #35E0F0; --marker-me: #35E0F0; --marker-remote: #e0322a; --marker-station: #f2d21b; --marker-tracked: #ff7800; --font-display: url("assets/Assets/UI/Theme/kenvector_future.asset"); --font-display-family: kenvector; --font-body: url("assets/Assets/TextMesh%20Pro/Fonts/LiberationSans.ttf"); --font-body-family: liberation; --space-xs: 4px; --space-s: 6px; --space-m: 10px; --space-l: 16px; --space-xl: 22px; --space-card-y: 12px; --space-card-x: 14px; --radius-s: 3px; --radius-m: 8px; --font-size-kicker: 9px; --font-size-small: 11px; --font-size-button: 14px; --font-size-body: 14px; --font-size-heading: 16px; --font-size-title: 20px; --color-text-muted: #8a9aa6; --color-panel-dark: #0d1319; --color-teal: #35E0F0; --color-teal-text: #06141a; --color-slate: #8a9aa6; --color-olive: #f2d21b; --color-danger: #e0322a; --color-green-border: #5be87f; --color-field: #11181f; --color-field-text: #e6edf2 }
/* ---- Assets/UI/Theme/base.uss (theme) ---- */
.unity-ui-document__root { position: absolute; left: 0; top: 0; right: 0; bottom: 0 }
.app-root { background-color: var(--color-bg); color: var(--color-text) }
.app-root.app-root-camera { background-color: rgba(0, 0, 0, 0) }
.screen-root { flex-grow: 1 }
ui-label { font-family: var(--font-body-family); color: var(--color-text); font-size: var(--font-size-body); white-space: pre-line }
.font-display { font-family: kenvector }
.font-body { font-family: liberation }
ui-button,
.btn-primary { font-family: var(--font-display-family); background-color: rgba(0, 0, 0, 0); background-image: url("assets/Assets/UI/Theme/Sprites/chamfer_tl_br.png"); --spr: url("generated/assets/Assets/UI/Theme/Sprites/chamfer_tl_br.png"); --slice-left: 20; --slice-top: 20; --slice-right: 20; --slice-bottom: 20; --slice-scale: 0.6; --tint: var(--color-cyan); color: var(--color-ink); border-width: 0; border-radius: 0; text-align: center; justify-content: center; --text-v: middle; white-space: pre-line; font-size: var(--font-size-button); letter-spacing: 1.5px; padding-top: 16px; padding-bottom: 16px; padding-left: var(--space-m); padding-right: var(--space-m); margin-top: 0; margin-bottom: 0; margin-left: 0; margin-right: 0 }
@media (hover: hover) { ui-button:hover,
.btn-primary:hover { --tint: var(--color-cyan-hover) } }
ui-button:active,
.btn-primary:active { --tint: var(--color-cyan-hover) }
ui-button[data-disabled],
.btn-primary[data-disabled] { --tint: var(--color-border); color: var(--color-muted-2); opacity: 1 }
ui-textfield { font-size: 24px; margin-top: 0; margin-bottom: 0; margin-left: 0; margin-right: 0 }
ui-textfield,
.field { background-color: var(--color-panel); border-color: var(--color-border); border-width: 1px; border-bottom-color: var(--color-cyan); border-bottom-width: 2px; padding-top: var(--space-card-y); padding-bottom: var(--space-card-y); padding-left: var(--space-card-x); padding-right: var(--space-card-x) }
ui-textfield > .unity-base-text-field__input { font-family: var(--font-body-family); background-color: rgba(0, 0, 0, 0); background-image: none; --spr: none; border-width: 0; border-radius: 0; padding-top: 0; padding-bottom: 0; padding-left: 0; padding-right: 0; margin-top: 0; margin-bottom: 0; margin-left: 0; margin-right: 0; color: var(--color-white); font-size: 24px; font-weight: bold; font-style: normal }
ui-textfield > .unity-base-text-field__input > .unity-text-element { color: var(--color-white) }
.field-code { border-bottom-color: var(--color-border); border-bottom-width: 1px; padding-top: 10px; padding-bottom: 10px; padding-left: 8px; padding-right: 8px }
.field-code > .unity-base-text-field__input { font-family: var(--font-display-family); font-size: 24px; letter-spacing: 4px; text-align: center; justify-content: center; --text-v: middle }
.btn-go { --tint: var(--color-green); font-size: 15px }
@media (hover: hover) { .btn-go:hover { --tint: var(--color-green-hover) } }
.btn-outline { background-image: none; --spr: none; background-color: rgba(0, 0, 0, 0); border-width: 1px; border-color: var(--color-cyan); color: var(--color-cyan); font-size: 13px; padding-top: 15px; padding-bottom: 15px }
@media (hover: hover) { .btn-outline:hover { background-color: var(--tint-cyan-12) } }
.btn-outline-muted { background-image: none; --spr: none; background-color: rgba(0, 0, 0, 0); border-width: 1px; border-color: var(--color-border); color: var(--color-muted); font-size: 13px; padding-top: 15px; padding-bottom: 15px }
@media (hover: hover) { .btn-outline-muted:hover { background-color: var(--tint-muted-10) } }
.btn-ghost { background-image: none; --spr: none; background-color: rgba(0, 0, 0, 0); border-width: 0; color: var(--color-muted); font-size: 11px; letter-spacing: 1px; padding-top: var(--space-m); padding-bottom: var(--space-m) }
@media (hover: hover) { .btn-ghost:hover { color: var(--color-text-2) } }
.btn-square { background-image: none; --spr: none; background-color: var(--color-panel); border-width: 1px; border-color: var(--color-border); width: 40px; height: 40px; padding-top: 0; padding-bottom: 0; padding-left: 0; padding-right: 0; align-items: center; justify-content: center; color: var(--color-cyan); font-size: 13px }
@media (hover: hover) { .btn-square:hover { background-color: var(--color-panel-2) } }
.btn-close-mark { font-family: var(--font-body-family); font-size: 20px }
.chevron-left { width: 9px; height: 9px; border-left-width: 2px; border-bottom-width: 2px; border-color: var(--color-cyan); rotate: 45deg; translate: 2px 0 }
.btn-small-chamfer { --slice-scale: 0.5; font-size: 11px; padding-top: 11px; padding-bottom: 11px; padding-left: var(--space-l); padding-right: var(--space-l) }
.header { flex-direction: row; align-items: center; justify-content: space-between; height: 40px; margin-top: 12px; margin-left: var(--space-l); margin-right: var(--space-l); flex-shrink: 0 }
.header-title { font-family: var(--font-display-family); flex-grow: 1; font-size: 13px; letter-spacing: 1.5px; color: var(--color-white); text-align: center; justify-content: center; --text-v: middle }
.header-slot { width: 40px; height: 40px; flex-shrink: 0 }
.kicker { font-family: var(--font-display-family); font-size: var(--font-size-kicker); letter-spacing: 1px; color: var(--color-muted) }
.card { background-color: var(--color-panel); border-width: 1px; border-color: var(--color-border); padding-top: var(--space-card-y); padding-bottom: var(--space-card-y); padding-left: var(--space-card-x); padding-right: var(--space-card-x) }
.card-inset { background-color: var(--color-panel-2); border-width: 1px; border-color: var(--color-border) }
.divider { height: 1px; background-color: var(--color-border) }
.row { flex-direction: row }
.row-item { flex-grow: 1; flex-basis: 0; margin-right: var(--space-m) }
.wizard-bar { flex-direction: row; height: 3px; flex-shrink: 0 }
.wizard-seg { flex-grow: 1; flex-basis: 0; height: 3px; background-color: var(--color-border); margin-right: var(--space-s) }
.wizard-seg.on { background-color: var(--color-cyan) }
.switch { width: 44px; height: 24px; border-radius: 12px; background-color: var(--color-mute-ring); flex-shrink: 0 }
.switch.on { background-color: var(--color-cyan) }
.switch-knob { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 9px; background-color: var(--color-white) }
.switch.on > .switch-knob { left: 23px }
.chip { font-family: var(--font-body-family); border-width: 1px; border-color: var(--color-border); color: var(--color-text-2); font-size: 12px; padding-top: 3px; padding-bottom: 3px; padding-left: 9px; padding-right: 9px }
.chip-lg { font-size: 13px; padding-top: 5px; padding-bottom: 5px; padding-left: 11px; padding-right: 11px }
.chip-cyan { border-color: var(--color-cyan); color: var(--color-cyan) }
.sheet-overlay { position: absolute; left: 0; top: 0; right: 0; bottom: 0 }
.sheet-scrim { position: absolute; left: 0; top: 0; right: 0; bottom: 0; background-color: var(--color-scrim) }
.sheet { position: absolute; left: 0; right: 0; top: 278px; bottom: 0; background-color: var(--color-sheet); border-top-width: 2px; border-top-color: var(--color-cyan) }
.sheet-header { flex-direction: row; align-items: center; justify-content: space-between; height: 50px; padding-left: var(--space-l); padding-right: var(--space-l); flex-shrink: 0 }
.sheet-title { font-family: var(--font-display-family); font-size: 13px; letter-spacing: 1.5px; color: var(--color-white) }
.scrim { position: absolute; left: 0; top: 0; right: 0; bottom: 0; background-color: var(--color-scrim-strong) }
.grid-bg { background-image: url("assets/Assets/UI/Theme/Sprites/grid_tile.png"); --spr: url("generated/assets/Assets/UI/Theme/Sprites/grid_tile.png"); background-repeat: repeat; background-size: 26px 26px; --tint: var(--tint-grid) }
.camera-window { background-color: var(--color-camera); background-image: url("assets/Assets/UI/Theme/Sprites/camera_grid_tile.png"); --spr: url("generated/assets/Assets/UI/Theme/Sprites/camera_grid_tile.png"); background-repeat: repeat; background-size: 26px 26px; --tint: var(--tint-camera) }
.reticle { position: absolute }
.reticle-corner { position: absolute; width: 18px; height: 18px; border-color: var(--color-cyan) }
.reticle-24 > .reticle-corner { width: 24px; height: 24px }
.reticle-34 > .reticle-corner { width: 34px; height: 34px }
.reticle-tl { left: 0; top: 0; border-left-width: 2px; border-top-width: 2px }
.reticle-tr { right: 0; top: 0; border-right-width: 2px; border-top-width: 2px }
.reticle-bl { left: 0; bottom: 0; border-left-width: 2px; border-bottom-width: 2px }
.reticle-br { right: 0; bottom: 0; border-right-width: 2px; border-bottom-width: 2px }
.glow { background-image: url("assets/Assets/UI/Theme/Sprites/soft_glow.png"); --spr: url("generated/assets/Assets/UI/Theme/Sprites/soft_glow.png") }
.dot { background-image: url("assets/Assets/UI/Theme/Sprites/circle.png"); --spr: url("generated/assets/Assets/UI/Theme/Sprites/circle.png") }
.unity-scroller--vertical { background-color: rgba(0, 0, 0, 0); border-width: 0; width: 4px }
.unity-scroller--vertical > .unity-scroller__low-button,
.unity-scroller--vertical > .unity-scroller__high-button { display: none }
.unity-scroller--vertical .unity-base-slider__tracker { background-color: rgba(0, 0, 0, 0); border-width: 0 }
.unity-scroller--vertical .unity-base-slider__dragger { background-color: var(--color-border); border-width: 0; border-radius: 2px; width: 4px; margin-left: 0 }
.app-root.tablet > .safe-frame > [data-name="screen-container"] { max-width: 480px; width: 100%; align-self: center }
.app-root.tablet > .safe-frame > [data-name="overlay-layer"] { max-width: 480px; width: 100%; align-self: center }
.app-root.tablet > .safe-frame > [data-name="popup-layer"] { max-width: 480px; width: 100%; align-self: center }
.title { font-family: var(--font-display-family); font-size: var(--font-size-title); color: var(--color-white); margin-bottom: var(--space-l) }
.heading { font-family: var(--font-display-family); font-size: var(--font-size-heading); color: var(--color-white); text-align: center; justify-content: center; --text-v: middle; margin-top: var(--space-s); margin-bottom: var(--space-m) }
.muted { color: var(--color-muted); font-size: 12px }
.separator { height: 1px; margin-top: var(--space-m); margin-bottom: var(--space-m); background-color: var(--color-border) }
.back-button { background-image: none; --spr: none; background-color: var(--color-panel); border-width: 1px; border-color: var(--color-border); color: var(--color-cyan); width: 40px; height: 40px; font-size: 13px; padding-top: 0; padding-bottom: 0 }
.button-slate { --tint: var(--color-muted); font-size: 13px }
.button-olive { --tint: var(--color-yellow); font-size: 13px }
.button-green { --tint: var(--color-green); font-size: 15px }
.name-field .unity-base-text-field__input { text-align: center; justify-content: center; --text-v: middle }
.location-dropdown .unity-base-popup-field__input { background-color: var(--color-panel); color: var(--color-text); border-radius: 0; border-width: 1px; border-color: var(--color-border); min-height: 44px; font-size: var(--font-size-body); padding-left: var(--space-m); padding-right: var(--space-m) }
.unity-scroll-view,
.unity-scroll-view__content-viewport { overflow: hidden }
/* ---- Assets/UI/AppRoot.uss (scoped: AppRoot, HomePreview) ---- */
:where([data-scope~="AppRoot"], [data-scope~="HomePreview"]) .app-root { flex-grow: 1; width: 100% }
:where([data-scope~="AppRoot"], [data-scope~="HomePreview"]) .frame-grid { position: absolute; left: 0; top: 0; right: 0; bottom: 0 }
:where([data-scope~="AppRoot"], [data-scope~="HomePreview"]) .frame-border { position: absolute; left: 0; top: 0; right: 0; bottom: 0; border-width: 2px; border-color: var(--color-frame); opacity: 0.791 }
:where([data-scope~="AppRoot"], [data-scope~="HomePreview"]) .frame-brackets { position: absolute; left: 0; top: 0; right: 0; bottom: 0 }
:where([data-scope~="AppRoot"], [data-scope~="HomePreview"]) .frame-bracket { position: absolute; width: 18px; height: 18px; border-color: var(--color-frame) }
:where([data-scope~="AppRoot"], [data-scope~="HomePreview"]) .frame-bracket-tl { left: 0; top: 0; border-left-width: 3px; border-top-width: 3px }
:where([data-scope~="AppRoot"], [data-scope~="HomePreview"]) .frame-bracket-tr { right: 0; top: 0; border-right-width: 3px; border-top-width: 3px }
:where([data-scope~="AppRoot"], [data-scope~="HomePreview"]) .frame-bracket-bl { left: 0; bottom: 0; border-left-width: 3px; border-bottom-width: 3px }
:where([data-scope~="AppRoot"], [data-scope~="HomePreview"]) .frame-bracket-br { right: 0; bottom: 0; border-right-width: 3px; border-bottom-width: 3px }
:where([data-scope~="AppRoot"], [data-scope~="HomePreview"]) .safe-frame { position: absolute; left: 0; top: 0; right: 0; bottom: 0 }
:where([data-scope~="AppRoot"], [data-scope~="HomePreview"]) .status-strip { height: 28px; flex-shrink: 0; margin-left: 2px; margin-right: 2px; flex-direction: row; align-items: center; background-color: var(--color-strip); border-bottom-width: 1px; border-bottom-color: var(--color-border-dark); padding-left: var(--space-card-x); padding-right: var(--space-card-x) }
:where([data-scope~="AppRoot"], [data-scope~="HomePreview"]) .strip-wordmark { font-family: var(--font-display-family); font-size: var(--font-size-small); font-weight: normal; font-style: italic; color: var(--color-white); letter-spacing: 0.5px }
:where([data-scope~="AppRoot"], [data-scope~="HomePreview"]) .strip-label { position: absolute; left: 0; right: 0; font-family: var(--font-display-family); font-size: var(--font-size-kicker); letter-spacing: 1px; color: var(--color-cyan); text-align: center; justify-content: center; --text-v: middle }
:where([data-scope~="AppRoot"], [data-scope~="HomePreview"]) .status-strip--ears > .strip-wordmark,
:where([data-scope~="AppRoot"], [data-scope~="HomePreview"]) .status-strip--ears > .strip-label { position: absolute; text-align: center; justify-content: center; --text-v: middle; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-left: var(--space-s); padding-right: var(--space-s) }
:where([data-scope~="AppRoot"], [data-scope~="HomePreview"]) .screen-container { flex-grow: 1; overflow: hidden }
:where([data-scope~="AppRoot"], [data-scope~="HomePreview"]) .tutorial-bar { height: 22px; flex-shrink: 0; background-image: none; --spr: none; background-color: var(--color-yellow); border-width: 0; border-radius: 0; font-family: var(--font-display-family); color: var(--color-ink); font-size: var(--font-size-kicker); letter-spacing: 1px; text-align: center; justify-content: center; --text-v: middle; white-space: nowrap; padding-top: 0; padding-bottom: 0; padding-left: 0; padding-right: 0; display: none }
@media (hover: hover) { :where([data-scope~="AppRoot"], [data-scope~="HomePreview"]) .tutorial-bar:hover { background-color: #ffe14a } }
:where([data-scope~="AppRoot"], [data-scope~="HomePreview"]) .layer { position: absolute; left: 0; top: 0; right: 0; bottom: 0 }
:where([data-scope~="AppRoot"], [data-scope~="HomePreview"]) .layer > * { position: absolute; left: 0; top: 0; right: 0; bottom: 0 }
/* ---- Assets/UI/Components/Loading.uss (scoped: Loading) ---- */
:where([data-scope~="Loading"]) .loading-scrim { position: absolute; left: 0; top: 0; right: 0; bottom: 0; align-items: center; justify-content: center; background-color: var(--scrim-80) }
:where([data-scope~="Loading"]) .loading-spinner { width: 48px; height: 48px; margin-bottom: 18px }
:where([data-scope~="Loading"]) .loading-ring { position: absolute; left: 0; top: 0; right: 0; bottom: 0 }
:where([data-scope~="Loading"]) .loading-text { font-size: 18px; color: var(--color-white); text-align: center; justify-content: center; --text-v: middle; margin-left: var(--space-l); margin-right: var(--space-l) }
/* ---- Assets/UI/Components/Popup.uss (scoped: Popup) ---- */
:where([data-scope~="Popup"]) .popup-scrim { justify-content: center }
:where([data-scope~="Popup"]) .popup-box { margin-left: var(--space-xl); margin-right: var(--space-xl); background-color: var(--color-sheet); border-width: 1px; border-color: var(--color-cyan); padding-top: var(--space-xl); padding-bottom: 18px; padding-left: 18px; padding-right: 18px; align-items: center }
:where([data-scope~="Popup"]) .popup-accent { position: absolute; width: 16px; height: 16px; border-color: var(--color-cyan) }
:where([data-scope~="Popup"]) .popup-accent-tl { left: -1px; top: -1px; border-left-width: 3px; border-top-width: 3px }
:where([data-scope~="Popup"]) .popup-accent-br { right: -1px; bottom: -1px; border-right-width: 3px; border-bottom-width: 3px }
:where([data-scope~="Popup"]) .popup-role-block { align-items: center; align-self: stretch; display: none }
:where([data-scope~="Popup"]) .popup-role-kicker { letter-spacing: 1.5px; margin-bottom: 12px; text-align: center; justify-content: center; --text-v: middle }
:where([data-scope~="Popup"]) .popup-role-mark { width: 78px; height: 78px; border-radius: 39px; border-width: 2px; border-color: var(--color-cyan); align-items: center; justify-content: center; margin-bottom: var(--space-m) }
:where([data-scope~="Popup"]) .popup-role-glyph { width: 26px; height: 26px; background-color: var(--color-cyan); rotate: 45deg }
:where([data-scope~="Popup"]) .popup-role-label { font-family: var(--font-display-family); font-size: 26px; letter-spacing: 2px; color: var(--color-cyan); text-align: center; justify-content: center; --text-v: middle; margin-bottom: 12px }
:where([data-scope~="Popup"]) .popup-title { font-family: var(--font-display-family); font-size: 12px; letter-spacing: 1.5px; color: var(--color-cyan); text-align: center; justify-content: center; --text-v: middle; margin-bottom: var(--space-m); display: none }
:where([data-scope~="Popup"]) .popup-text { font-size: 16px; color: var(--color-text); text-align: center; justify-content: center; --text-v: middle; align-self: stretch; margin-bottom: 18px }
:where([data-scope~="Popup"]) .popup-extra { font-size: 15px; color: var(--color-muted); text-align: center; justify-content: center; --text-v: middle; align-self: stretch; margin-top: -12px; margin-bottom: 18px; display: none }
:where([data-scope~="Popup"]) .popup-qr { width: 128px; height: 128px; margin-bottom: 18px; background-size: contain; display: none }
:where([data-scope~="Popup"]) .popup-ok-button { align-self: stretch; padding-top: 14px; padding-bottom: 14px; padding-left: 24px; padding-right: 24px; font-size: 13px }
:where([data-scope~="Popup"]) .popup-cancel-button { align-self: stretch; margin-top: var(--space-m); padding-top: 13px; padding-bottom: 13px; padding-left: 24px; padding-right: 24px; font-size: 13px; font-family: var(--font-display-family); letter-spacing: 1.5px; display: none }
:where([data-scope~="Popup"]) .popup-box.popup-accent-red { border-color: var(--color-red) }
:where([data-scope~="Popup"]) .popup-accent-red > .popup-accent { border-color: var(--color-red) }
:where([data-scope~="Popup"]) .popup-accent-red > .popup-title { color: var(--color-red) }
:where([data-scope~="Popup"]) .popup-accent-red > .popup-ok-button { --tint: var(--color-red) }
:where([data-scope~="Popup"]) .popup-box.popup-accent-green { border-color: var(--color-green) }
:where([data-scope~="Popup"]) .popup-accent-green > .popup-accent { border-color: var(--color-green) }
:where([data-scope~="Popup"]) .popup-accent-green > .popup-title { color: var(--color-green) }
:where([data-scope~="Popup"]) .popup-accent-green > .popup-ok-button { --tint: var(--color-green) }
:where([data-scope~="Popup"]) .popup-box.popup-qr-large { margin-left: 0; margin-right: 0; padding-left: 4px; padding-right: 4px; padding-top: 14px; padding-bottom: 4px }
:where([data-scope~="Popup"]) .popup-qr-large > .popup-qr { width: auto; align-self: stretch; height: 360px; margin-bottom: 0 }
:where([data-scope~="Popup"]) .popup-qr-large > .popup-text { font-size: 14px; margin-left: 10px; margin-right: 10px; margin-bottom: 10px }
/* ---- Assets/UI/Components/Toast.uss (scoped: Toast) ---- */
:where([data-scope~="Toast"]) .toast-root { position: absolute; left: 0; top: 0; right: 0; bottom: 0 }
:where([data-scope~="Toast"]) .toast-banner { position: absolute; left: var(--space-l); right: var(--space-l); top: 40px; flex-direction: row; align-items: center; background-color: var(--color-red); padding-top: var(--space-card-y); padding-bottom: var(--space-card-y); padding-left: var(--space-card-x); padding-right: var(--space-card-x); display: none }
:where([data-scope~="Toast"]) .toast-banner.ok { background-color: var(--color-toast-ok) }
:where([data-scope~="Toast"]) .toast-glyph { font-family: var(--font-display-family); font-size: 12px; color: var(--color-white); margin-right: var(--space-m); flex-shrink: 0; white-space: nowrap }
:where([data-scope~="Toast"]) .toast-text { font-size: 14px; color: var(--color-white) }
/* ---- Assets/UI/Screens/MapView.uss (scoped: InGameScreen, VotingScreen) ---- */
:where([data-scope~="InGameScreen"], [data-scope~="VotingScreen"]) .map-overlay { position: absolute; left: 0; top: 0; right: 0; bottom: 0; display: none; background-color: var(--color-panel-2); background-image: url("assets/Assets/UI/Theme/Sprites/grid_tile.png"); --spr: url("generated/assets/Assets/UI/Theme/Sprites/grid_tile.png"); background-repeat: repeat; background-size: 26px 26px; --tint: var(--tint-grid) }
:where([data-scope~="InGameScreen"], [data-scope~="VotingScreen"]) .map-viewport { position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden }
:where([data-scope~="InGameScreen"], [data-scope~="VotingScreen"]) .map-header { position: absolute; left: var(--space-l); right: var(--space-l); top: var(--space-l); flex-direction: row; justify-content: space-between; align-items: center }
:where([data-scope~="InGameScreen"], [data-scope~="VotingScreen"]) .map-title { font-family: var(--font-display-family); font-size: 12px; letter-spacing: 1.5px; color: var(--color-white); white-space: nowrap }
:where([data-scope~="InGameScreen"], [data-scope~="VotingScreen"]) .map-mode { font-family: var(--font-display-family); font-size: 9px; letter-spacing: 1px; color: var(--color-muted); white-space: nowrap }
:where([data-scope~="InGameScreen"], [data-scope~="VotingScreen"]) .map-legend { position: absolute; left: var(--space-l); right: var(--space-l); bottom: 92px; flex-direction: row; justify-content: center; align-items: center }
:where([data-scope~="InGameScreen"], [data-scope~="VotingScreen"]) .map-legend-item { flex-direction: row; align-items: center; margin-left: 7px; margin-right: 7px }
:where([data-scope~="InGameScreen"], [data-scope~="VotingScreen"]) .map-legend-dot { width: 9px; height: 9px; border-radius: 5px; margin-right: var(--space-xs) }
:where([data-scope~="InGameScreen"], [data-scope~="VotingScreen"]) .map-legend-dot-me { background-color: var(--marker-me) }
:where([data-scope~="InGameScreen"], [data-scope~="VotingScreen"]) .map-legend-dot-agent { background-color: var(--marker-remote) }
:where([data-scope~="InGameScreen"], [data-scope~="VotingScreen"]) .map-legend-dot-station { background-color: var(--marker-station) }
:where([data-scope~="InGameScreen"], [data-scope~="VotingScreen"]) .map-legend-label { font-family: var(--font-body-family); font-size: 11px; color: var(--color-text-2); white-space: nowrap }
:where([data-scope~="InGameScreen"], [data-scope~="VotingScreen"]) .map-close-button { position: absolute; left: var(--space-l); right: var(--space-l); bottom: 26px; margin: 0; padding: 15px 10px; background-color: rgba(0, 0, 0, 0); background-image: none; --spr: none; border-width: 1px; border-color: var(--color-cyan); border-radius: 0; color: var(--color-cyan); font-family: var(--font-display-family); font-size: 13px; letter-spacing: 1.5px; text-align: center; justify-content: center; --text-v: middle }
@media (hover: hover) { :where([data-scope~="InGameScreen"], [data-scope~="VotingScreen"]) .map-close-button:hover { background-color: var(--tint-cyan-12) } }
:where([data-scope~="InGameScreen"], [data-scope~="VotingScreen"]) .map-close-button:active { background-color: var(--tint-cyan-20) }
:where([data-scope~="InGameScreen"], [data-scope~="VotingScreen"]) .map-node { position: absolute; width: 0; height: 0 }
:where([data-scope~="InGameScreen"], [data-scope~="VotingScreen"]) .map-node-dot { position: absolute; left: -8px; top: -8px; width: 16px; height: 16px; border-radius: 8px; border-width: 2px; border-color: var(--color-strip) }
:where([data-scope~="InGameScreen"], [data-scope~="VotingScreen"]) .map-node-glow { position: absolute; left: -20px; top: -20px; width: 40px; height: 40px; opacity: 0.456; background-image: url("assets/Assets/UI/Theme/Sprites/soft_glow.png"); --spr: url("generated/assets/Assets/UI/Theme/Sprites/soft_glow.png") }
:where([data-scope~="InGameScreen"], [data-scope~="VotingScreen"]) .map-node-arrow-pivot { position: absolute; left: 0; top: 0; width: 0; height: 0 }
:where([data-scope~="InGameScreen"], [data-scope~="VotingScreen"]) .map-node-arrow { position: absolute; left: -6px; top: -22px; width: 12px; height: 12px; background-image: url("assets/Assets/Kenneys/2Dassets/UI%20Space%20Pack/PNG/cursor_pointerFlat.png"); --spr: url("generated/assets/Assets/Kenneys/2Dassets/UI%20Space%20Pack/PNG/cursor_pointerFlat.png") }
:where([data-scope~="InGameScreen"], [data-scope~="VotingScreen"]) .map-node-me > .map-node-dot { background-color: var(--marker-me) }
:where([data-scope~="InGameScreen"], [data-scope~="VotingScreen"]) .map-node-me > .map-node-glow,
:where([data-scope~="InGameScreen"], [data-scope~="VotingScreen"]) .map-node-me > .map-node-arrow-pivot > .map-node-arrow { --tint: var(--marker-me) }
:where([data-scope~="InGameScreen"], [data-scope~="VotingScreen"]) .map-node-agent > .map-node-dot { background-color: var(--marker-remote) }
:where([data-scope~="InGameScreen"], [data-scope~="VotingScreen"]) .map-node-agent > .map-node-glow,
:where([data-scope~="InGameScreen"], [data-scope~="VotingScreen"]) .map-node-agent > .map-node-arrow-pivot > .map-node-arrow { --tint: var(--marker-remote) }
:where([data-scope~="InGameScreen"], [data-scope~="VotingScreen"]) .map-node-station > .map-node-dot { background-color: var(--marker-station) }
:where([data-scope~="InGameScreen"], [data-scope~="VotingScreen"]) .map-node-station > .map-node-glow,
:where([data-scope~="InGameScreen"], [data-scope~="VotingScreen"]) .map-node-station > .map-node-arrow-pivot > .map-node-arrow { --tint: var(--marker-station) }
:where([data-scope~="InGameScreen"], [data-scope~="VotingScreen"]) .map-node-spy { position: absolute; left: -12px; top: -12px; width: 24px; height: 24px; background-image: url("assets/Assets/Textures/TEMP/sleuth-or-spy-emoji-by-twitter.png"); --spr: url("generated/assets/Assets/Textures/TEMP/sleuth-or-spy-emoji-by-twitter.png") }
:where([data-scope~="InGameScreen"], [data-scope~="VotingScreen"]) .map-node-bomb { position: absolute; left: -12px; top: -12px; width: 24px; height: 24px; background-image: url("assets/Assets/Textures/TEMP/bomb.png"); --spr: url("generated/assets/Assets/Textures/TEMP/bomb.png") }
:where([data-scope~="InGameScreen"], [data-scope~="VotingScreen"]) .map-node-skull { position: absolute; left: -12px; top: -12px; width: 24px; height: 24px; background-image: url("assets/Assets/TEMP/skull-and-crossbones_2620-fe0f.png"); --spr: url("generated/assets/Assets/TEMP/skull-and-crossbones_2620-fe0f.png") }
:where([data-scope~="InGameScreen"], [data-scope~="VotingScreen"]) .map-node-label { position: absolute; left: -70px; top: 9px; width: 140px; text-align: center; justify-content: flex-start; --text-v: upper; white-space: nowrap; font-family: var(--font-body-family); font-size: 11px; color: var(--color-white); text-shadow: 0px 1px 2px rgba(5, 8, 11, 0.9) }
:where([data-scope~="InGameScreen"], [data-scope~="VotingScreen"]) .map-level-layer { position: absolute; left: 0; top: 0; right: 0; bottom: 0 }
:where([data-scope~="InGameScreen"], [data-scope~="VotingScreen"]) .map-level-label { position: absolute; width: 30px; text-align: right; justify-content: flex-start; --text-v: upper; white-space: nowrap; font-family: var(--font-display-family); font-size: 10px; color: var(--color-cyan) }
:where([data-scope~="InGameScreen"], [data-scope~="VotingScreen"]) .map-node-level { position: absolute; left: -24px; top: -19px; width: 22px; text-align: right; justify-content: flex-start; --text-v: upper; white-space: nowrap; font-family: var(--font-body-family); font-size: 8px; color: var(--color-muted) }
/* ---- Assets/UI/Tasks/Minigames.uss (scoped: TaskWindow) ---- */
:where([data-scope~="TaskWindow"]) .task-root { position: absolute; left: 0; top: 0; right: 0; bottom: 0 }
:where([data-scope~="TaskWindow"]) .task-scrim { position: absolute; left: 0; top: 0; right: 0; bottom: 0; background-color: var(--color-scrim) }
:where([data-scope~="TaskWindow"]) .task-sheet { position: absolute; left: 0; right: 0; top: 33%; bottom: 0; background-color: var(--color-sheet); border-top-width: 2px; border-top-color: var(--color-cyan) }
:where([data-scope~="TaskWindow"]) .mg-landscape .task-sheet { top: 4%; bottom: 4%; left: 14%; right: 14%; border-width: 2px; border-color: var(--color-cyan) }
:where([data-scope~="TaskWindow"]) .mg-full .task-sheet { top: 0; bottom: 0; left: 0; right: 0; border-width: 0 }
:where([data-scope~="TaskWindow"]) .mg-transparent .task-scrim { background-color: rgba(0, 0, 0, 0) }
:where([data-scope~="TaskWindow"]) .mg-transparent .task-sheet { background-color: rgba(0, 0, 0, 0) }
:where([data-scope~="TaskWindow"]) .task-header { flex-direction: row; align-items: center; justify-content: space-between; height: 50px; flex-shrink: 0; padding-left: var(--space-l); padding-right: 8px; border-bottom-width: 1px; border-bottom-color: var(--color-border); background-color: var(--color-sheet) }
:where([data-scope~="TaskWindow"]) .task-titles { flex-grow: 1; overflow: hidden }
:where([data-scope~="TaskWindow"]) .task-title { font-family: var(--font-display-family); font-size: 13px; letter-spacing: 1.5px; color: var(--color-white); white-space: nowrap; text-overflow: ellipsis; overflow: hidden }
:where([data-scope~="TaskWindow"]) .task-hint { font-size: var(--font-size-small); color: var(--color-muted); margin-top: 2px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden }
:where([data-scope~="TaskWindow"]) .task-close-button { flex-shrink: 0; margin-left: var(--space-m); color: var(--color-white); font-size: 16px; letter-spacing: 0 }
:where([data-scope~="TaskWindow"]) .task-content { flex-grow: 1; padding: var(--space-l); overflow: hidden }
:where([data-scope~="TaskWindow"]) .mg-full .task-content { padding: 0 }
:where([data-scope~="TaskWindow"]) .mg-content { flex-grow: 1 }
:where([data-scope~="TaskWindow"]) .mg-content-overlay { position: absolute; left: 0; top: 0; right: 0; bottom: 0 }
:where([data-scope~="TaskWindow"]) .mg-row { flex-direction: row; align-items: center }
:where([data-scope~="TaskWindow"]) .mg-col { flex-direction: column }
:where([data-scope~="TaskWindow"]) .mg-grow { flex-grow: 1; flex-shrink: 1 }
:where([data-scope~="TaskWindow"]) .mg-center { align-items: center; justify-content: center }
:where([data-scope~="TaskWindow"]) .mg-fill { position: absolute; left: 0; top: 0; right: 0; bottom: 0 }
:where([data-scope~="TaskWindow"]) .mg-card { background-color: var(--color-panel); border-width: 1px; border-color: var(--color-border); padding-top: var(--space-card-y); padding-bottom: var(--space-card-y); padding-left: var(--space-card-x); padding-right: var(--space-card-x) }
:where([data-scope~="TaskWindow"]) .mg-line { font-size: var(--font-size-body); color: var(--color-text-2); white-space: pre-line }
:where([data-scope~="TaskWindow"]) .mg-kicker { font-family: var(--font-display-family); font-size: var(--font-size-kicker); letter-spacing: 2px; color: var(--color-muted) }
:where([data-scope~="TaskWindow"]) .mg-big { font-family: var(--font-display-family); color: var(--color-white); letter-spacing: 4px; text-align: center; justify-content: center; --text-v: middle }
:where([data-scope~="TaskWindow"]) .mg-btn { min-height: 44px; font-size: 13px }
:where([data-scope~="TaskWindow"]) .mg-btn-go { --tint: var(--color-green) }
:where([data-scope~="TaskWindow"]) .mg-btn-danger { --tint: var(--color-red); color: var(--color-white) }
:where([data-scope~="TaskWindow"]) .mg-btn-warn { --tint: var(--color-amber) }
:where([data-scope~="TaskWindow"]) .mg-btn-yellow { --tint: var(--color-yellow) }
:where([data-scope~="TaskWindow"]) .mg-btn-ghost { background-image: none; --spr: none; background-color: var(--color-panel); border-width: 1px; border-color: var(--color-border); color: var(--color-white) }
@media (hover: hover) { :where([data-scope~="TaskWindow"]) .mg-btn-ghost:hover { border-color: var(--color-cyan) } }
:where([data-scope~="TaskWindow"]) .mg-btn-selected { border-width: 2px; border-color: var(--color-cyan) }
:where([data-scope~="TaskWindow"]) .mg-btn-icon { flex-direction: row; align-items: center; justify-content: center }
:where([data-scope~="TaskWindow"]) .mg-btn-icon-text { font-family: var(--font-display-family); font-size: 13px; letter-spacing: 1.5px }
:where([data-scope~="TaskWindow"]) .mg-grid { flex-direction: column; row-gap: 8px }
:where([data-scope~="TaskWindow"]) .mg-grid-row { flex-direction: row; column-gap: 8px }
:where([data-scope~="TaskWindow"]) .mg-grid-cell { flex-grow: 1; flex-basis: 0; min-height: 52px }
:where([data-scope~="TaskWindow"]) .mg-grid-spacer { visibility: hidden }
:where([data-scope~="TaskWindow"]) .mg-keypad { flex-shrink: 0 }
:where([data-scope~="TaskWindow"]) .mg-pin-display { background-color: var(--color-panel); border-width: 1px; border-color: var(--color-border); font-family: var(--font-display-family); font-size: 28px; letter-spacing: 8px; color: var(--color-white); text-align: center; justify-content: center; --text-v: middle; padding-top: 12px; padding-bottom: 10px; margin-bottom: 10px }
:where([data-scope~="TaskWindow"]) .mg-pin-error { border-color: var(--color-red); color: var(--color-red) }
:where([data-scope~="TaskWindow"]) .mg-keypad-row { flex-direction: row; column-gap: 6px; margin-bottom: 6px }
:where([data-scope~="TaskWindow"]) .mg-key { flex-grow: 1; flex-basis: 0; background-image: none; --spr: none; background-color: var(--color-panel); border-width: 1px; border-color: var(--color-border); font-family: var(--font-body-family); font-size: 24px; color: var(--color-white); padding: 11px 0; min-height: 48px; align-items: center; justify-content: center }
@media (hover: hover) { :where([data-scope~="TaskWindow"]) .mg-key:hover { border-color: var(--color-cyan) } }
:where([data-scope~="TaskWindow"]) .mg-key:active { background-color: var(--color-border-dark) }
:where([data-scope~="TaskWindow"]) .mg-key-ok { background-color: var(--color-cyan); border-color: var(--color-cyan) }
:where([data-scope~="TaskWindow"]) .mg-meter { background-color: var(--color-border-dark); flex-shrink: 0 }
:where([data-scope~="TaskWindow"]) .mg-meter-fill { height: 100%; width: 0 }
:where([data-scope~="TaskWindow"]) .mg-swatch { align-items: center; justify-content: center; flex-shrink: 0 }
:where([data-scope~="TaskWindow"]) .mg-station-tile { align-items: center; justify-content: center; flex-shrink: 0 }
:where([data-scope~="TaskWindow"]) .mg-station-badge { position: absolute; right: -6px; bottom: -6px; background-color: var(--color-ink); color: var(--color-white); font-size: 11px; padding: 1px 4px; font-family: var(--font-display-family) }
:where([data-scope~="TaskWindow"]) .mg-badge { position: absolute; right: -6px; top: -6px; width: 26px; height: 26px; border-radius: 13px; align-items: center; justify-content: center }
:where([data-scope~="TaskWindow"]) .mg-badge-good { background-color: var(--color-green) }
:where([data-scope~="TaskWindow"]) .mg-badge-bad { background-color: var(--color-red) }
:where([data-scope~="TaskWindow"]) .mg-face { flex-shrink: 0 }
:where([data-scope~="TaskWindow"]) .mg-pad { border-width: 1px; border-color: var(--color-border); border-radius: 999px; background-color: var(--color-panel-2); flex-shrink: 0 }
:where([data-scope~="TaskWindow"]) .mg-pad-puck { position: absolute; border-radius: 999px; background-color: var(--color-green) }
:where([data-scope~="TaskWindow"]) .mg-lookaround { flex-grow: 1 }
:where([data-scope~="TaskWindow"]) .mg-overlay { position: absolute; left: 0; top: 0; right: 0; bottom: 0 }
:where([data-scope~="TaskWindow"]) .mg-toast { position: absolute; left: 16px; right: 16px; top: 70px; padding: 10px 12px; background-color: var(--color-panel); border-width: 1px; border-color: var(--color-border); border-left-width: 3px; border-left-color: var(--color-cyan); color: var(--color-text); font-size: 14px; font-weight: bold; font-style: normal; white-space: pre-line }
:where([data-scope~="TaskWindow"]) .mg-toast-good { border-left-color: var(--color-green) }
:where([data-scope~="TaskWindow"]) .mg-toast-bad { border-left-color: var(--color-red) }
:where([data-scope~="TaskWindow"]) .mg-finger { position: absolute; width: 40px; height: 40px; margin-left: -20px; margin-top: -20px; border-radius: 20px; background-color: rgba(255, 255, 255, 0.85); border-width: 3px; border-color: var(--color-ink) }
:where([data-scope~="TaskWindow"]) .mg-finger-ring { position: absolute; left: -14px; top: -14px; width: 62px; height: 62px; border-radius: 31px; border-width: 3px; border-color: var(--color-cyan) }
:where([data-scope~="TaskWindow"]) .mg-finger-holdring { position: absolute; left: -16px; top: -16px; width: 66px; height: 66px }
:where([data-scope~="TaskWindow"]) .mg-fanfare { position: absolute; left: 0; top: 0; right: 0; bottom: 0; background-color: var(--color-strip) }
:where([data-scope~="TaskWindow"]) .mg-fanfare-col { position: absolute; left: 0; top: 0; right: 0; bottom: 0; align-items: center; justify-content: center }
:where([data-scope~="TaskWindow"]) .mg-fanfare-ring { width: 132px; height: 132px; border-radius: 66px; border-width: 6px; border-color: var(--color-green); align-items: center; justify-content: center; margin-bottom: 22px }
:where([data-scope~="TaskWindow"]) .mg-fanfare-stamp { border-width: 4px; border-color: var(--color-green); padding: 10px 16px 8px 16px; rotate: -7deg; background-color: var(--color-strip); align-items: center }
:where([data-scope~="TaskWindow"]) .mg-fanfare-stamp-title { font-family: var(--font-display-family); font-size: 30px; letter-spacing: 4px; color: var(--color-green); text-align: center; justify-content: center; --text-v: middle }
:where([data-scope~="TaskWindow"]) .mg-fanfare-stamp-sub { font-family: var(--font-display-family); font-size: 11px; letter-spacing: 3px; color: var(--color-white); margin-top: 6px; text-align: center; justify-content: center; --text-v: middle }
:where([data-scope~="TaskWindow"]) .mg-fanfare-note { margin-top: 22px; font-size: 16px; color: var(--color-text); font-weight: bold; font-style: normal; text-align: center; justify-content: center; --text-v: middle; white-space: pre-line; max-width: 300px }
:where([data-scope~="TaskWindow"]) .mg-fanfare-intel { margin-top: 18px; max-width: 320px; padding: 12px 16px; background-color: rgba(6, 20, 26, 0.92); border-width: 1px; border-left-width: 4px; border-color: var(--color-amber) }
:where([data-scope~="TaskWindow"]) .mg-fanfare-intel-title { font-family: var(--font-display-family); font-size: 10px; letter-spacing: 3px; color: var(--color-amber); margin: 0 0 6px 0; padding: 0 }
:where([data-scope~="TaskWindow"]) .mg-fanfare-intel-text { font-size: 17px; color: var(--color-white); font-weight: bold; font-style: italic; white-space: pre-line; margin: 0; padding: 0 }
:where([data-scope~="TaskWindow"]) .mg-fanfare-tap { position: absolute; left: 0; right: 0; bottom: 26px; font-family: var(--font-display-family); font-size: 9px; letter-spacing: 3px; color: var(--color-muted); text-align: center; justify-content: center; --text-v: middle }
:where([data-scope~="TaskWindow"]) .mg-tv-layer { position: absolute; top: 12px; right: 12px; bottom: 12px; width: 38%; flex-direction: column; justify-content: flex-start; row-gap: 10px }
:where([data-scope~="TaskWindow"]) .mg-tv-card { flex-grow: 1; flex-shrink: 1; max-height: 50%; min-height: 180px; background-color: var(--color-sheet); border-width: 2px; border-color: var(--color-cyan); overflow: hidden }
:where([data-scope~="TaskWindow"]) .mg-tv-card-head { flex-direction: row; align-items: center; justify-content: space-between; padding: 6px 10px; background-color: var(--color-panel); border-bottom-width: 1px; border-color: var(--color-border) }
:where([data-scope~="TaskWindow"]) .mg-tv-card-title { font-family: var(--font-display-family); font-size: 16px; letter-spacing: 2px; color: var(--color-cyan) }
:where([data-scope~="TaskWindow"]) .mg-tv-card-members { flex-direction: row; column-gap: 10px }
:where([data-scope~="TaskWindow"]) .mg-tv-agent { font-family: var(--font-display-family); font-size: 13px; letter-spacing: 1px; color: var(--color-text); border-left-width: 6px; padding-left: 6px }
:where([data-scope~="TaskWindow"]) .mg-tv-card-body { flex-grow: 1; padding: 8px }
:where([data-scope~="TaskWindow"]) .mg-tv-inline { flex-grow: 1; flex-shrink: 1; min-height: 120px; background-color: #0a1116; border-width: 2px; border-color: var(--color-border); border-radius: 6px; overflow: hidden }
:where([data-scope~="TaskWindow"]) .mg-tv-inline.mg-tv-compact { flex-grow: 0; flex-shrink: 0; min-height: 0; border-width: 1px; border-radius: 4px; align-self: center }
:where([data-scope~="TaskWindow"]) .mg-tv-cue { flex-direction: row; align-items: center; justify-content: center; column-gap: 6px; padding: 4px 10px }
:where([data-scope~="TaskWindow"]) .mg-tv-cue-warn { background-color: var(--tint-amber-20) }
:where([data-scope~="TaskWindow"]) .mg-tv-cue-warn > ui-label { color: var(--color-amber) }
/* ---- Assets/UI/Screens/Home/HomeScreen.uss (scoped: HomePreview, HomeScreen) ---- */
:where([data-scope~="HomePreview"], [data-scope~="HomeScreen"]) .screen { flex-grow: 1 }
:where([data-scope~="HomePreview"], [data-scope~="HomeScreen"]) .subview { flex-grow: 1 }
:where([data-scope~="HomePreview"], [data-scope~="HomeScreen"]) [data-name="join-view"],
:where([data-scope~="HomePreview"], [data-scope~="HomeScreen"]) [data-name="create-view"],
:where([data-scope~="HomePreview"], [data-scope~="HomeScreen"]) [data-name="settings-view"] { display: none }
:where([data-scope~="HomePreview"], [data-scope~="HomeScreen"]) .body { margin-top: 20px; margin-left: var(--space-l); margin-right: var(--space-l) }
:where([data-scope~="HomePreview"], [data-scope~="HomeScreen"]) .block-top-s { margin-top: var(--space-s) }
:where([data-scope~="HomePreview"], [data-scope~="HomeScreen"]) .block-top-m { margin-top: var(--space-m) }
:where([data-scope~="HomePreview"], [data-scope~="HomeScreen"]) .block-top-l { margin-top: var(--space-l) }
:where([data-scope~="HomePreview"], [data-scope~="HomeScreen"]) .block-top-xl { margin-top: var(--space-xl) }
:where([data-scope~="HomePreview"], [data-scope~="HomeScreen"]) .screen-scroll { flex-grow: 1 }
:where([data-scope~="HomePreview"], [data-scope~="HomeScreen"]) .scroll-body { flex-shrink: 0; padding-top: 20px; padding-left: var(--space-l); padding-right: var(--space-l); padding-bottom: var(--space-l) }
:where([data-scope~="HomePreview"], [data-scope~="HomeScreen"]) .bottom-action { flex-shrink: 0; margin-top: var(--space-m); margin-left: var(--space-l); margin-right: var(--space-l); margin-bottom: 26px; padding-top: 17px; padding-bottom: 17px }
:where([data-scope~="HomePreview"], [data-scope~="HomeScreen"]) .chevron-down { width: 8px; height: 8px; flex-shrink: 0; border-left-width: 2px; border-bottom-width: 2px; border-color: var(--color-cyan); rotate: 315deg; translate: 0 -2px }
:where([data-scope~="HomePreview"], [data-scope~="HomeScreen"]) .chevron-down.open { rotate: 135deg; translate: 0 2px }
:where([data-scope~="HomePreview"], [data-scope~="HomeScreen"]) .menu-spacer-top { height: 92px; min-height: 24px }
:where([data-scope~="HomePreview"], [data-scope~="HomeScreen"]) .menu-spacer-mid { height: 60px; min-height: var(--space-l) }
:where([data-scope~="HomePreview"], [data-scope~="HomeScreen"]) .menu-spacer { flex-grow: 1 }
:where([data-scope~="HomePreview"], [data-scope~="HomeScreen"]) .menu-wordmark-block { flex-shrink: 0; align-items: center }
:where([data-scope~="HomePreview"], [data-scope~="HomeScreen"]) .menu-glow { position: absolute; left: 45px; right: 45px; top: -18px; height: 110px; --tint: var(--tint-cyan-55) }
:where([data-scope~="HomePreview"], [data-scope~="HomeScreen"]) .menu-wordmark { font-family: var(--font-display-family); font-size: 56px; font-weight: normal; font-style: italic; color: var(--color-white); letter-spacing: 1px; white-space: nowrap }
:where([data-scope~="HomePreview"], [data-scope~="HomeScreen"]) .menu-tagline { font-family: var(--font-display-family); font-size: 10px; letter-spacing: 1.5px; color: var(--color-cyan); margin-top: var(--space-m); white-space: nowrap }
:where([data-scope~="HomePreview"], [data-scope~="HomeScreen"]) .menu-how { flex-shrink: 0; margin-left: var(--space-l); margin-right: var(--space-l); padding-top: 14px; padding-bottom: 14px; padding-left: var(--space-l); padding-right: var(--space-l) }
:where([data-scope~="HomePreview"], [data-scope~="HomeScreen"]) .menu-how-row { flex-direction: row; align-items: center; margin-top: var(--space-m) }
:where([data-scope~="HomePreview"], [data-scope~="HomeScreen"]) .menu-how-num { flex-shrink: 0; width: 24px; height: 24px; border-width: 1px; border-color: var(--color-cyan); color: var(--color-cyan); font-family: var(--font-display-family); font-size: 10px; text-align: center; justify-content: center; --text-v: middle; margin-right: 12px }
:where([data-scope~="HomePreview"], [data-scope~="HomeScreen"]) .menu-buttons { flex-shrink: 0; margin-left: var(--space-l); margin-right: var(--space-l); margin-bottom: 26px }
:where([data-scope~="HomePreview"], [data-scope~="HomeScreen"]) .menu-button { margin-bottom: 8px }
:where([data-scope~="HomePreview"], [data-scope~="HomeScreen"]) .menu-button-last { margin-bottom: 0 }
:where([data-scope~="HomePreview"], [data-scope~="HomeScreen"]) .join-scan-button { font-size: 13px; margin-top: 8px }
:where([data-scope~="HomePreview"], [data-scope~="HomeScreen"]) .or-row { flex-direction: row; align-items: center; margin-top: 8px }
:where([data-scope~="HomePreview"], [data-scope~="HomeScreen"]) .or-line { flex-grow: 1; height: 1px; background-color: var(--color-border) }
:where([data-scope~="HomePreview"], [data-scope~="HomeScreen"]) .or-text { color: var(--color-muted); font-size: 12px; margin-left: var(--space-m); margin-right: var(--space-m); white-space: nowrap }
:where([data-scope~="HomePreview"], [data-scope~="HomeScreen"]) .join-code-row { flex-direction: row; margin-top: 8px }
:where([data-scope~="HomePreview"], [data-scope~="HomeScreen"]) .join-code-holder { flex-grow: 1 }
:where([data-scope~="HomePreview"], [data-scope~="HomeScreen"]) .join-code-field { flex-grow: 1 }
:where([data-scope~="HomePreview"], [data-scope~="HomeScreen"]) .join-code-placeholder { position: absolute; left: 0; top: 0; right: 0; bottom: 0; font-family: var(--font-display-family); font-size: 24px; letter-spacing: 4px; color: var(--color-muted-2); text-align: center; justify-content: center; --text-v: middle }
:where([data-scope~="HomePreview"], [data-scope~="HomeScreen"]) .join-code-button { flex-shrink: 0; margin-left: var(--space-s); font-size: 12px; padding-top: 0; padding-bottom: 0; padding-left: 18px; padding-right: 18px }
:where([data-scope~="HomePreview"], [data-scope~="HomeScreen"]) .create-help-button { font-size: 14px }
:where([data-scope~="HomePreview"], [data-scope~="HomeScreen"]) .space-picker { font-family: var(--font-body-family); text-align: left; justify-content: flex-start; --text-v: upper; letter-spacing: 0; background-image: none; --spr: none; background-color: var(--color-panel); border-width: 1px; border-color: var(--color-border); padding-top: var(--space-m); padding-bottom: var(--space-card-y); padding-left: var(--space-m); padding-right: var(--space-m); flex-shrink: 0 }
@media (hover: hover) { :where([data-scope~="HomePreview"], [data-scope~="HomeScreen"]) .space-picker:hover,
:where([data-scope~="HomePreview"], [data-scope~="HomeScreen"]) .space-picker:active { background-color: var(--color-panel-2); border-color: var(--color-cyan) } }
:where([data-scope~="HomePreview"], [data-scope~="HomeScreen"]) .space-preview { height: 190px; background-color: var(--color-bg); border-width: 1px; border-color: var(--color-border-dark); margin-bottom: var(--space-m); justify-content: center; align-items: center; overflow: hidden }
:where([data-scope~="HomePreview"], [data-scope~="HomeScreen"]) .space-preview-empty { position: absolute; color: var(--color-muted); font-size: 12px; text-align: center; justify-content: center; --text-v: middle; padding-left: var(--space-l); padding-right: var(--space-l) }
:where([data-scope~="HomePreview"], [data-scope~="HomeScreen"]) .space-preview-map { position: absolute; left: 0; top: 0; right: 0; bottom: 0 }
:where([data-scope~="HomePreview"], [data-scope~="HomeScreen"]) .floorplan-station-label { position: absolute; white-space: nowrap; font-size: var(--font-size-small); color: var(--color-white) }
:where([data-scope~="HomePreview"], [data-scope~="HomeScreen"]) .floorplan-level-label { position: absolute; white-space: nowrap; font-family: var(--font-display-family); font-size: var(--font-size-kicker); letter-spacing: 1px; color: var(--color-cyan) }
:where([data-scope~="HomePreview"], [data-scope~="HomeScreen"]) .create-rules-note { color: var(--color-muted); font-size: 12px }
:where([data-scope~="HomePreview"], [data-scope~="HomeScreen"]) .space-overlay { display: none; position: absolute; left: 0; top: 0; right: 0; bottom: 0 }
:where([data-scope~="HomePreview"], [data-scope~="HomeScreen"]) .space-sheet { position: absolute; left: 0; right: 0; top: 14%; bottom: 0; background-color: var(--color-sheet); border-top-width: 2px; border-top-color: var(--color-cyan) }
:where([data-scope~="HomePreview"], [data-scope~="HomeScreen"]) .space-sheet-close { width: 44px; height: 44px }
:where([data-scope~="HomePreview"], [data-scope~="HomeScreen"]) .space-sheet-scroll { flex-grow: 1 }
:where([data-scope~="HomePreview"], [data-scope~="HomeScreen"]) .space-sheet-scroll > .unity-scroll-view__content-and-vertical-scroll-container > .unity-scroll-view__content-viewport > .unity-scroll-view__content-container { width: 100%; flex-grow: 0; flex-shrink: 0 }
:where([data-scope~="HomePreview"], [data-scope~="HomeScreen"]) .space-sheet-list { padding-left: var(--space-l); padding-right: var(--space-l); padding-bottom: var(--space-xl) }
:where([data-scope~="HomePreview"], [data-scope~="HomeScreen"]) .space-row { flex-direction: row; align-items: center; flex-shrink: 0; font-family: var(--font-body-family); text-align: left; justify-content: center; --text-v: middle; letter-spacing: 0; background-image: none; --spr: none; background-color: var(--color-panel); border-width: 1px; border-color: var(--color-border); padding-top: var(--space-s); padding-bottom: var(--space-s); padding-left: var(--space-s); padding-right: var(--space-m); margin-bottom: var(--space-s) }
@media (hover: hover) { :where([data-scope~="HomePreview"], [data-scope~="HomeScreen"]) .space-row:hover { background-color: var(--color-panel-2) } }
:where([data-scope~="HomePreview"], [data-scope~="HomeScreen"]) .space-row-selected { border-color: var(--color-cyan); background-color: var(--tint-cyan-15) }
:where([data-scope~="HomePreview"], [data-scope~="HomeScreen"]) .space-row-thumb { width: 112px; height: 84px; flex-shrink: 0; background-color: var(--color-bg); border-width: 1px; border-color: var(--color-border-dark); margin-right: var(--space-m); overflow: hidden }
:where([data-scope~="HomePreview"], [data-scope~="HomeScreen"]) .space-row-text { flex-grow: 1; flex-shrink: 1 }
:where([data-scope~="HomePreview"], [data-scope~="HomeScreen"]) .space-row-name { font-size: 16px; color: var(--color-white); font-weight: bold; font-style: normal }
:where([data-scope~="HomePreview"], [data-scope~="HomeScreen"]) .space-row-summary { font-size: 12px; color: var(--color-muted); margin-top: 2px }
:where([data-scope~="HomePreview"], [data-scope~="HomeScreen"]) .space-top-row { flex-direction: row; align-items: center; justify-content: space-between }
:where([data-scope~="HomePreview"], [data-scope~="HomeScreen"]) .space-names { flex-grow: 1 }
:where([data-scope~="HomePreview"], [data-scope~="HomeScreen"]) .space-name { font-size: 20px; color: var(--color-white); font-weight: bold; font-style: normal }
:where([data-scope~="HomePreview"], [data-scope~="HomeScreen"]) .space-summary { font-size: 12px; color: var(--color-muted); margin-top: 2px }
:where([data-scope~="HomePreview"], [data-scope~="HomeScreen"]) .change-chip { flex-shrink: 0; flex-direction: row; align-items: center; justify-content: center; border-width: 1px; border-color: var(--color-border); padding-top: var(--space-s); padding-bottom: var(--space-s); padding-left: 8px; padding-right: 8px; margin-left: var(--space-m) }
:where([data-scope~="HomePreview"], [data-scope~="HomeScreen"]) .change-chip-label { font-family: var(--font-display-family); font-size: var(--font-size-kicker); letter-spacing: 1px; color: var(--color-cyan); white-space: nowrap }
:where([data-scope~="HomePreview"], [data-scope~="HomeScreen"]) .change-chip-caret { width: 7px; height: 7px; flex-shrink: 0; border-left-width: 2px; border-bottom-width: 2px; border-color: var(--color-cyan); rotate: 315deg; translate: 0 -2px; margin-left: 8px }
:where([data-scope~="HomePreview"], [data-scope~="HomeScreen"]) .space-buttons { flex-direction: row; margin-top: var(--space-m) }
:where([data-scope~="HomePreview"], [data-scope~="HomeScreen"]) .space-button { flex-grow: 1; flex-basis: 0; font-size: 10px; padding-top: 11px; padding-bottom: 11px; padding-left: var(--space-s); padding-right: var(--space-s); margin-right: var(--space-s) }
:where([data-scope~="HomePreview"], [data-scope~="HomeScreen"]) .space-button-last { margin-right: 0 }
:where([data-scope~="HomePreview"], [data-scope~="HomeScreen"]) .settings-card { padding-top: var(--space-m); padding-bottom: var(--space-xs) }
:where([data-scope~="HomePreview"], [data-scope~="HomeScreen"]) .kicker-cyan { color: var(--color-cyan); margin-bottom: var(--space-xs) }
:where([data-scope~="HomePreview"], [data-scope~="HomeScreen"]) .settings-row { flex-direction: row; align-items: center; justify-content: space-between; padding-top: 11px; padding-bottom: 11px; border-top-width: 1px; border-top-color: var(--color-border-dark) }
:where([data-scope~="HomePreview"], [data-scope~="HomeScreen"]) .settings-row-text { flex-grow: 1; margin-right: var(--space-m) }
:where([data-scope~="HomePreview"], [data-scope~="HomeScreen"]) .settings-row-label { font-size: 15px; color: var(--color-white) }
:where([data-scope~="HomePreview"], [data-scope~="HomeScreen"]) .settings-row-sub { font-size: 12px; color: var(--color-muted); margin-top: 1px }
:where([data-scope~="HomePreview"], [data-scope~="HomeScreen"]) .settings-toggle { display: none }
/* ---- Assets/UI/Screens/InGame/InGameScreen.uss (scoped: InGameScreen) ---- */
:where([data-scope~="InGameScreen"]) .ingame-root { flex-grow: 1 }
:where([data-scope~="InGameScreen"]) .ingame-content { flex-grow: 1 }
:where([data-scope~="InGameScreen"]) .hud-camera { height: 250px; flex-shrink: 0; overflow: hidden }
:where([data-scope~="InGameScreen"]) .ingame-root.ingame-camera-live .hud-camera { background-color: rgba(0, 0, 0, 0); background-image: none; --spr: none }
:where([data-scope~="InGameScreen"]) .hud-divider { height: 2px; flex-shrink: 0; background-color: var(--color-cyan) }
:where([data-scope~="InGameScreen"]) .hud-scan-row { position: absolute; left: 12px; top: 12px; flex-direction: row; align-items: center }
:where([data-scope~="InGameScreen"]) .hud-chip { background-image: none; --spr: none; background-color: var(--scrim-75); border-width: 1px; border-color: var(--color-cyan); flex-direction: row; align-items: center; padding-top: 6px; padding-bottom: 6px; padding-left: var(--space-m); padding-right: var(--space-m) }
@media (hover: hover) { :where([data-scope~="InGameScreen"]) .hud-chip:hover { background-color: var(--tint-cyan-20) } }
:where([data-scope~="InGameScreen"]) .hud-chip:active { background-color: var(--tint-cyan-28) }
:where([data-scope~="InGameScreen"]) .hud-chip-text { font-family: var(--font-display-family); font-size: 10px; letter-spacing: 1.5px; color: var(--color-cyan); white-space: nowrap }
:where([data-scope~="InGameScreen"]) .hud-scan-dot { width: 8px; height: 8px; border-radius: 4px; background-color: var(--color-cyan); margin-right: var(--space-s); flex-shrink: 0 }
:where([data-scope~="InGameScreen"]) .hud-nfc-chip { margin-left: var(--space-s); display: none }
:where([data-scope~="InGameScreen"]) .hud-nfc-chip > .hud-chip-text { font-size: 9px }
:where([data-scope~="InGameScreen"]) .hud-role-chip { position: absolute; right: 48px; top: 12px }
:where([data-scope~="InGameScreen"]) .hud-quit-button { position: absolute; right: 12px; top: 12px; width: 28px; height: 28px; background-image: none; --spr: none; background-color: var(--scrim-75); border-width: 1px; border-color: var(--color-cyan); color: var(--color-cyan); font-size: 18px; text-align: center; justify-content: center; --text-v: middle; padding-top: 0; padding-bottom: 0; padding-left: 0; padding-right: 0 }
@media (hover: hover) { :where([data-scope~="InGameScreen"]) .hud-quit-button:hover { background-color: var(--tint-cyan-20) } }
:where([data-scope~="InGameScreen"]) .hud-quit-button:active { background-color: var(--tint-cyan-28) }
:where([data-scope~="InGameScreen"]) .hud-reticle-centre { position: absolute; left: 0; top: 0; right: 0; bottom: 0; align-items: center; justify-content: center }
:where([data-scope~="InGameScreen"]) .hud-reticle { position: relative; width: 90px; height: 90px; opacity: 0.456 }
:where([data-scope~="InGameScreen"]) .hud-camera-hint { position: absolute; left: 12px; right: 12px; bottom: 14px; font-size: 12px; color: var(--tint-white-75); -webkit-text-stroke-width: 0.6px; -webkit-text-stroke-color: var(--tint-black-75) }
:where([data-scope~="InGameScreen"]) .hud-map-button { position: absolute; right: 12px; bottom: 12px; display: none }
:where([data-scope~="InGameScreen"]) .hud-body { flex-grow: 1; margin-top: 12px; margin-bottom: var(--space-l); margin-left: var(--space-l); margin-right: var(--space-l); overflow: hidden }
:where([data-scope~="InGameScreen"]) .hud-progress { flex-shrink: 0; margin-bottom: var(--space-m) }
:where([data-scope~="InGameScreen"]) .hud-progress-row { flex-direction: row; justify-content: space-between; align-items: center; margin-bottom: 5px }
:where([data-scope~="InGameScreen"]) .hud-progress-count { font-family: var(--font-display-family); font-size: 12px; color: var(--color-white); white-space: nowrap }
:where([data-scope~="InGameScreen"]) .hud-progress-track { height: 6px; background-color: var(--color-border-dark); overflow: hidden }
:where([data-scope~="InGameScreen"]) .hud-progress-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background-color: var(--color-cyan) }
:where([data-scope~="InGameScreen"]) .hud-alarm { flex-shrink: 0; display: none; margin-bottom: var(--space-m) }
:where([data-scope~="InGameScreen"]) .hud-alarm-bar { flex-direction: row; align-items: center; justify-content: space-between; background-color: var(--color-red); padding-top: 9px; padding-bottom: 9px; padding-left: 12px; padding-right: 12px }
:where([data-scope~="InGameScreen"]) .hud-alarm-text { flex-grow: 1; min-width: 0; margin-right: var(--space-m) }
:where([data-scope~="InGameScreen"]) .hud-alarm-name { font-family: var(--font-display-family); font-size: 10px; letter-spacing: 1px; color: var(--color-white); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
:where([data-scope~="InGameScreen"]) .hud-alarm-fix { font-size: 12px; color: var(--color-white) }
:where([data-scope~="InGameScreen"]) .hud-alarm-timer { font-family: var(--font-display-family); font-size: 20px; color: var(--color-white); flex-shrink: 0; white-space: nowrap }
:where([data-scope~="InGameScreen"]) .hud-alarm-warn > .hud-alarm-bar { background-color: var(--color-amber) }
:where([data-scope~="InGameScreen"]) .hud-alarm-warn > .hud-alarm-bar > .hud-alarm-text > .hud-alarm-name,
:where([data-scope~="InGameScreen"]) .hud-alarm-warn > .hud-alarm-bar > .hud-alarm-text > .hud-alarm-fix,
:where([data-scope~="InGameScreen"]) .hud-alarm-warn > .hud-alarm-bar > .hud-alarm-timer { color: var(--color-ink) }
:where([data-scope~="InGameScreen"]) .hud-alarm-extra { font-size: 12px; color: var(--color-text-2); margin-top: var(--space-xs); display: none }
:where([data-scope~="InGameScreen"]) .hud-poison { flex-shrink: 0; display: none; font-size: 12px; color: var(--color-red); margin-bottom: var(--space-m) }
:where([data-scope~="InGameScreen"]) .role-text { flex-shrink: 0; font-size: 15px; color: var(--color-text); margin-bottom: var(--space-m) }
:where([data-scope~="InGameScreen"]) .tasks-text { display: none }
:where([data-scope~="InGameScreen"]) .hud-task-scroll { flex-grow: 1; min-height: 0; margin-bottom: var(--space-m) }
:where([data-scope~="InGameScreen"]) .hud-task-scroll > .unity-scroll-view__content-and-vertical-scroll-container > .unity-scroll-view__vertical-scroller { width: 0; min-width: 0; opacity: 0 }
:where([data-scope~="InGameScreen"]) .hud-task-scroll > .unity-scroll-view__content-and-vertical-scroll-container > .unity-scroll-view__content-viewport > .unity-scroll-view__content-container { flex-grow: 0 }
:where([data-scope~="InGameScreen"]) .hud-task-card { flex-direction: row; align-items: center; background-color: var(--color-panel); border-width: 1px; border-color: var(--color-border); padding-top: 8px; padding-bottom: 8px; padding-left: var(--space-m); padding-right: var(--space-m); margin-bottom: 5px }
:where([data-scope~="InGameScreen"]) .hud-task-card:active { border-color: var(--color-cyan) }
:where([data-scope~="InGameScreen"]) .hud-task-card-done { border-color: var(--color-border-dark); opacity: 0.222 }
:where([data-scope~="InGameScreen"]) .hud-task-check { width: 20px; height: 20px; flex-shrink: 0; border-width: 1px; border-color: var(--color-mute-ring); align-items: center; justify-content: center; margin-right: var(--space-m) }
:where([data-scope~="InGameScreen"]) .hud-task-card-done > .hud-task-check { border-color: var(--color-green); background-color: var(--color-green) }
:where([data-scope~="InGameScreen"]) .hud-task-tick { width: 5px; height: 9px; border-right-width: 2px; border-bottom-width: 2px; border-color: var(--color-ink); rotate: 45deg; translate: 0 -1px; display: none }
:where([data-scope~="InGameScreen"]) .hud-task-card-done > .hud-task-check > .hud-task-tick { display: flex }
:where([data-scope~="InGameScreen"]) .hud-task-main { flex-direction: row; align-items: center; flex-grow: 1; min-width: 0 }
:where([data-scope~="InGameScreen"]) .hud-task-name-wrap { min-width: 0 }
:where([data-scope~="InGameScreen"]) .hud-task-name { font-size: 14px; color: var(--color-white); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
:where([data-scope~="InGameScreen"]) .hud-task-strike { position: absolute; left: 0; right: 0; top: 9px; height: 1px; background-color: var(--color-white); display: none }
:where([data-scope~="InGameScreen"]) .hud-task-card-done > .hud-task-main > .hud-task-name-wrap > .hud-task-strike { display: flex }
:where([data-scope~="InGameScreen"]) .hud-task-count { font-size: 12px; color: var(--color-muted); flex-shrink: 0; margin-left: 5px; white-space: nowrap; display: none }
:where([data-scope~="InGameScreen"]) .hud-task-room { flex-shrink: 0; max-width: 120px; margin-left: var(--space-m); font-size: 11px; color: var(--color-cyan); border-width: 1px; border-color: var(--color-cyan-dim); padding-top: 2px; padding-bottom: 2px; padding-left: 7px; padding-right: 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
:where([data-scope~="InGameScreen"]) .hud-nearby { flex-shrink: 0 }
:where([data-scope~="InGameScreen"]) .hud-nearby-header { flex-direction: row; justify-content: space-between; align-items: center; margin-bottom: var(--space-s) }
:where([data-scope~="InGameScreen"]) .hud-nearby-hint { font-size: 11px; color: var(--color-muted); min-width: 0; margin-left: var(--space-s); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: right; justify-content: center; --text-v: middle }
:where([data-scope~="InGameScreen"]) .nearby-list { flex-direction: row; justify-content: space-between; align-items: flex-start }
:where([data-scope~="InGameScreen"]) .rail-item { flex-grow: 1; flex-basis: 0; align-items: center; margin-left: 3px; margin-right: 3px }
:where([data-scope~="InGameScreen"]) .rail-item-ring { width: 42px; height: 42px; flex-shrink: 0 }
:where([data-scope~="InGameScreen"]) .rail-item-disc { position: absolute; left: 3px; top: 3px; width: 36px; height: 36px; align-items: center; justify-content: center; background-image: url("assets/Assets/UI/Theme/Sprites/circle.png"); --spr: url("generated/assets/Assets/UI/Theme/Sprites/circle.png"); --tint: var(--color-panel) }
:where([data-scope~="InGameScreen"]) .rail-item-initial { font-family: var(--font-display-family); font-size: 13px; color: var(--color-white); white-space: nowrap }
:where([data-scope~="InGameScreen"]) .rail-item-badge { position: absolute; right: -4px; top: -4px; width: 14px; height: 14px; border-radius: 7px; background-color: var(--color-cyan); align-items: center; justify-content: center; display: none }
:where([data-scope~="InGameScreen"]) .rail-item-badge-arrow { width: 5px; height: 5px; border-color: var(--color-ink); rotate: 45deg }
:where([data-scope~="InGameScreen"]) .rail-item-badge-up { border-left-width: 2px; border-top-width: 2px; translate: 0 1px }
:where([data-scope~="InGameScreen"]) .rail-item-badge-down { border-right-width: 2px; border-bottom-width: 2px; translate: 0 -1px }
:where([data-scope~="InGameScreen"]) .rail-item-label { margin-top: var(--space-xs); font-size: 10px; color: var(--color-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; text-align: center; justify-content: flex-start; --text-v: upper }
:where([data-scope~="InGameScreen"]) .rail-item-label-reach { color: var(--color-green) }
:where([data-scope~="InGameScreen"]) .rail-item-label-away { color: var(--color-muted) }
:where([data-scope~="InGameScreen"]) .sheet-layer { position: absolute; left: 0; top: 0; right: 0; bottom: 0; display: none }
:where([data-scope~="InGameScreen"]) .sheet-layer > .sheet-template { position: absolute; left: 0; top: 0; right: 0; bottom: 0 }
/* ---- Assets/UI/Screens/InGame/InGameSheets.uss (scoped: InGameSheets) ---- */
:where([data-scope~="InGameSheets"]) [data-name="ingame-sheet"] { top: 250px; overflow: hidden }
:where([data-scope~="InGameSheets"]) [data-name="ingame-sheet-header"] { padding-right: 8px; border-bottom-width: 1px; border-bottom-color: var(--color-border) }
:where([data-scope~="InGameSheets"]) [data-name="ingame-sheet-title"] { color: var(--color-cyan) }
:where([data-scope~="InGameSheets"]) [data-name="ingame-sheet-close"] { color: var(--color-white); font-size: 16px; letter-spacing: 0 }
:where([data-scope~="InGameSheets"]) .sheet-scroll { flex-grow: 1; min-height: 0 }
:where([data-scope~="InGameSheets"]) .sheet-scroll > .unity-scroll-view__content-and-vertical-scroll-container > .unity-scroll-view__vertical-scroller { width: 0; min-width: 0; opacity: 0 }
:where([data-scope~="InGameSheets"]) .sheet-scroll > .unity-scroll-view__content-and-vertical-scroll-container > .unity-scroll-view__content-viewport > .unity-scroll-view__content-container { flex-grow: 0 }
:where([data-scope~="InGameSheets"]) .sheet-body { display: none }
:where([data-scope~="InGameSheets"]) .sheet-blurb { font-size: 15px; color: var(--color-text-2); text-align: center; justify-content: center; --text-v: middle; margin-bottom: 14px }
:where([data-scope~="InGameSheets"]) .sheet-plant { padding-top: var(--space-xl); padding-bottom: var(--space-xl); padding-left: var(--space-l); padding-right: var(--space-l); align-items: center }
:where([data-scope~="InGameSheets"]) .plant-target { flex-direction: row; align-items: center; margin-bottom: 14px }
:where([data-scope~="InGameSheets"]) .plant-avatar { width: 48px; height: 48px; border-radius: 24px; background-color: var(--color-panel); border-width: 2px; border-color: var(--color-red); align-items: center; justify-content: center; margin-right: 12px; flex-shrink: 0 }
:where([data-scope~="InGameSheets"]) .plant-initial { font-family: var(--font-display-family); font-size: 16px; color: var(--color-white); text-align: center; justify-content: center; --text-v: middle }
:where([data-scope~="InGameSheets"]) .kicker.plant-kicker { color: var(--color-red); letter-spacing: 1.5px; margin-bottom: 2px }
:where([data-scope~="InGameSheets"]) .plant-name { font-size: 22px; font-weight: bold; font-style: normal; color: var(--color-white) }
:where([data-scope~="InGameSheets"]) .plant-fuses { flex-direction: row; width: 100%; margin-top: var(--space-s) }
:where([data-scope~="InGameSheets"]) .fuse-tile { flex-grow: 1; flex-basis: 0; height: 112px; background-color: var(--color-panel); border-width: 2px; border-color: var(--color-red); align-items: center; justify-content: center; margin-right: var(--space-m) }
:where([data-scope~="InGameSheets"]) .fuse-tile-last { margin-right: 0 }
:where([data-scope~="InGameSheets"]) .fuse-tile:active { background-color: #2a1515 }
:where([data-scope~="InGameSheets"]) .fuse-value { font-family: var(--font-display-family); font-size: 24px; color: var(--color-white); text-align: center; justify-content: center; --text-v: middle; margin-bottom: var(--space-xs) }
:where([data-scope~="InGameSheets"]) .fuse-note { font-size: 11px; color: var(--color-muted); text-align: center; justify-content: center; --text-v: middle }
:where([data-scope~="InGameSheets"]) .sheet-emergency { padding-top: var(--space-xl); padding-bottom: var(--space-xl); padding-left: var(--space-l); padding-right: var(--space-l); align-items: center }
:where([data-scope~="InGameSheets"]) .emergency-call { font-family: var(--font-display-family); background-image: none; --spr: none; background-color: var(--color-red); width: 210px; height: 210px; border-radius: 105px; border-width: 6px; border-color: #ff7a70; color: var(--color-white); font-size: 15px; letter-spacing: 1px; white-space: pre-line; text-align: center; justify-content: center; --text-v: middle; padding-top: 0; padding-bottom: 0; padding-left: 24px; padding-right: 24px; margin-bottom: 18px; flex-shrink: 0 }
@media (hover: hover) { :where([data-scope~="InGameSheets"]) .emergency-call:hover { background-color: #ff4a40; --tint: rgba(0, 0, 0, 0) } }
:where([data-scope~="InGameSheets"]) .emergency-call[data-disabled] { background-color: var(--color-panel); border-color: var(--color-border); color: var(--color-muted-2); --tint: rgba(0, 0, 0, 0); opacity: 1 }
:where([data-scope~="InGameSheets"]) .emergency-status { font-size: 12px; color: var(--color-muted); text-align: center; justify-content: center; --text-v: middle }
:where([data-scope~="InGameSheets"]) .sheet-role-agent { padding-top: 20px; padding-bottom: 20px; padding-left: var(--space-l); padding-right: var(--space-l) }
:where([data-scope~="InGameSheets"]) .sheet-role-spy { padding-top: 12px; padding-bottom: 20px; padding-left: var(--space-l); padding-right: var(--space-l) }
:where([data-scope~="InGameSheets"]) .role-head { flex-direction: row; align-items: center; margin-bottom: 14px }
:where([data-scope~="InGameSheets"]) .role-ring { background-image: url("assets/Assets/UI/Theme/Sprites/ring.png"); --spr: url("generated/assets/Assets/UI/Theme/Sprites/ring.png"); align-items: center; justify-content: center; flex-shrink: 0 }
:where([data-scope~="InGameSheets"]) .role-ring-lg { width: 56px; height: 56px; margin-right: 14px }
:where([data-scope~="InGameSheets"]) .role-ring-sm { width: 40px; height: 40px; margin-right: 12px; --tint: var(--color-red) }
:where([data-scope~="InGameSheets"]) .role-mark { rotate: 45deg }
:where([data-scope~="InGameSheets"]) .role-mark-lg { width: 18px; height: 18px; border-width: 2px }
:where([data-scope~="InGameSheets"]) .role-mark-sm { width: 12px; height: 12px; background-color: var(--color-red) }
:where([data-scope~="InGameSheets"]) .role-name { font-family: var(--font-display-family); font-size: 22px; letter-spacing: 2px; margin-top: 2px }
:where([data-scope~="InGameSheets"]) .role-goal { font-size: 15px; color: var(--color-text); margin-bottom: 14px }
:where([data-scope~="InGameSheets"]) .role-desc { font-size: 13px; color: var(--color-muted); margin-bottom: 14px }
:where([data-scope~="InGameSheets"]) .role-reminder { flex-direction: row; align-items: flex-start; margin-bottom: 8px }
:where([data-scope~="InGameSheets"]) .role-reminder-last { margin-bottom: 0 }
:where([data-scope~="InGameSheets"]) .role-bullet { width: 6px; height: 6px; border-top-width: 2px; border-right-width: 2px; border-color: var(--color-muted); rotate: 45deg; margin-top: 5px; margin-right: var(--space-m); flex-shrink: 0 }
:where([data-scope~="InGameSheets"]) .role-reminder-text { font-size: 13px; color: var(--color-text-2); flex-grow: 1 }
:where([data-scope~="InGameSheets"]) .role-action { display: none; margin-top: var(--space-l) }
:where([data-scope~="InGameSheets"]) .spy-kicker-row { flex-direction: row; flex-wrap: wrap; align-items: center }
:where([data-scope~="InGameSheets"]) .kicker.spy-kicker-word { color: var(--color-red); margin-left: var(--space-xs) }
:where([data-scope~="InGameSheets"]) .kicker.spy-kicker-post { margin-left: var(--space-xs) }
:where([data-scope~="InGameSheets"]) .spy-blurb { font-size: 13px; color: var(--color-text-2); margin-top: 2px }
:where([data-scope~="InGameSheets"]) .sabotage-status { font-size: 12px; color: var(--color-muted); margin-bottom: var(--space-s) }
:where([data-scope~="InGameSheets"]) .sabotage-grid { flex-direction: row; flex-wrap: wrap; justify-content: space-between }
:where([data-scope~="InGameSheets"]) .sabotage-card { width: 49%; flex-direction: row; align-items: center; background-color: var(--color-panel); border-width: 1px; border-color: var(--color-border); border-left-width: 3px; padding-top: 9px; padding-bottom: 9px; padding-left: var(--space-m); padding-right: var(--space-m); margin-bottom: var(--space-s) }
:where([data-scope~="InGameSheets"]) .sabotage-card:active { background-color: var(--color-border-dark) }
:where([data-scope~="InGameSheets"]) .sabotage-card-disabled { opacity: 0.140 }
:where([data-scope~="InGameSheets"]) .sabotage-mark { width: 22px; height: 30px; align-items: center; justify-content: center; flex-shrink: 0; margin-right: var(--space-m) }
:where([data-scope~="InGameSheets"]) .sabotage-mark-diamond { width: 12px; height: 12px; border-width: 2px; rotate: 45deg }
:where([data-scope~="InGameSheets"]) .sabotage-card-text { flex-grow: 1; overflow: hidden }
:where([data-scope~="InGameSheets"]) .sabotage-name { font-size: 13px; font-weight: bold; font-style: normal; color: var(--color-white); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
:where([data-scope~="InGameSheets"]) .sabotage-meta { font-family: var(--font-display-family); font-size: 8px; letter-spacing: 0.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px }
:where([data-scope~="InGameSheets"]) .sabotage-card-crisis { border-left-color: var(--color-red) }
:where([data-scope~="InGameSheets"]) .sabotage-card-crisis > .sabotage-mark > .sabotage-mark-diamond { border-color: var(--color-red) }
:where([data-scope~="InGameSheets"]) .sabotage-card-crisis > .sabotage-card-text > .sabotage-meta { color: var(--color-red) }
:where([data-scope~="InGameSheets"]) .sabotage-card-disruption { border-left-color: var(--color-amber) }
:where([data-scope~="InGameSheets"]) .sabotage-card-disruption > .sabotage-mark > .sabotage-mark-diamond { border-color: var(--color-amber) }
:where([data-scope~="InGameSheets"]) .sabotage-card-disruption > .sabotage-card-text > .sabotage-meta { color: var(--color-amber) }
:where([data-scope~="InGameSheets"]) .sabotage-card-trap { border-left-color: var(--color-purple) }
:where([data-scope~="InGameSheets"]) .sabotage-card-trap > .sabotage-mark > .sabotage-mark-diamond { border-color: var(--color-purple) }
:where([data-scope~="InGameSheets"]) .sabotage-card-trap > .sabotage-card-text > .sabotage-meta { color: var(--color-purple) }
:where([data-scope~="InGameSheets"]) .sabotage-card-decoy { border-left-color: var(--color-cyan) }
:where([data-scope~="InGameSheets"]) .sabotage-card-decoy > .sabotage-mark > .sabotage-mark-diamond { border-color: var(--color-cyan) }
:where([data-scope~="InGameSheets"]) .sabotage-card-decoy > .sabotage-card-text > .sabotage-meta { color: var(--color-cyan) }
:where([data-scope~="InGameSheets"]) .sabotage-card-legacy { border-left-color: var(--color-muted) }
:where([data-scope~="InGameSheets"]) .sabotage-card-legacy > .sabotage-mark > .sabotage-mark-diamond { border-color: var(--color-muted) }
:where([data-scope~="InGameSheets"]) .sabotage-card-legacy > .sabotage-card-text > .sabotage-meta { color: var(--color-muted) }
/* ---- Assets/UI/Screens/Lobby/LobbyScreen.uss (scoped: LobbyScreen) ---- */
:where([data-scope~="LobbyScreen"]) .lobby-root { flex-grow: 1; padding-left: var(--space-l); padding-right: var(--space-l) }
:where([data-scope~="LobbyScreen"]) .lobby-scroll { flex-grow: 1; flex-shrink: 1; min-height: 0; overflow: hidden }
:where([data-scope~="LobbyScreen"]) .lobby-scroll > .unity-scroll-view__content-and-vertical-scroll-container > .unity-scroll-view__content-viewport > .unity-scroll-view__content-container { width: 100%; flex-grow: 0; flex-shrink: 0 }
:where([data-scope~="LobbyScreen"]) .lobby-scroll > .unity-scroll-view__content-and-vertical-scroll-container > .unity-scroll-view__content-viewport > .unity-scroll-view__content-container > *,
:where([data-scope~="LobbyScreen"]) .lobby-agents > *,
:where([data-scope~="LobbyScreen"]) .lobby-map-ready > *,
:where([data-scope~="LobbyScreen"]) .lobby-rules > *,
:where([data-scope~="LobbyScreen"]) .lobby-section-body > *,
:where([data-scope~="LobbyScreen"]) .lobby-options > *,
:where([data-scope~="LobbyScreen"]) .lobby-option-block > *,
:where([data-scope~="LobbyScreen"]) .lobby-option-text > *,
:where([data-scope~="LobbyScreen"]) .lobby-resolve-panel > * { flex-shrink: 0 }
:where([data-scope~="LobbyScreen"]) .lobby-top-row { flex-direction: column; align-items: center; flex-shrink: 0; margin-top: var(--space-m); margin-bottom: var(--space-m) }
:where([data-scope~="LobbyScreen"]) .lobby-qr { width: 100%; height: 358px; flex-shrink: 0; background-color: var(--color-white); padding-top: var(--space-s); padding-bottom: var(--space-s); padding-left: var(--space-s); padding-right: var(--space-s) }
:where([data-scope~="LobbyScreen"]) .lobby-qr-image { flex-grow: 1; background-color: var(--color-white) }
:where([data-scope~="LobbyScreen"]) .lobby-code-col { width: 100%; align-items: center; margin-bottom: 12px }
:where([data-scope~="LobbyScreen"]) .lobby-code-line { flex-direction: row; align-items: center; justify-content: center }
:where([data-scope~="LobbyScreen"]) .lobby-game-id { font-family: var(--font-display-family); color: var(--color-cyan); font-size: 25px; letter-spacing: 2px; white-space: nowrap; margin-left: var(--space-m) }
:where([data-scope~="LobbyScreen"]) .lobby-code-hint { color: var(--color-text-3); font-size: 13px; text-align: center; justify-content: center; --text-v: middle }
:where([data-scope~="LobbyScreen"]) .lobby-section-head { flex-direction: row; align-items: center; justify-content: space-between; margin-bottom: var(--space-s) }
:where([data-scope~="LobbyScreen"]) .lobby-count { font-family: var(--font-display-family); color: var(--color-white); font-size: 12px; letter-spacing: 0.5px }
:where([data-scope~="LobbyScreen"]) .lobby-agents { margin-bottom: 12px }
:where([data-scope~="LobbyScreen"]) .lobby-players { flex-direction: row; flex-wrap: wrap; justify-content: space-between }
:where([data-scope~="LobbyScreen"]) .lobby-player-chip { width: 49%; min-height: 44px; justify-content: center; background-image: none; --spr: none; background-color: var(--color-panel-2); border-width: 1px; border-color: var(--color-border); padding-top: var(--space-s); padding-bottom: var(--space-s); padding-left: var(--space-m); padding-right: var(--space-m); margin-bottom: var(--space-s); flex-shrink: 0 }
:where([data-scope~="LobbyScreen"]) .lobby-player-chip-host { border-color: var(--color-cyan); background-color: var(--tint-cyan-15) }
:where([data-scope~="LobbyScreen"]) .lobby-player-chip-me { border-color: var(--color-cyan-dim) }
:where([data-scope~="LobbyScreen"]) .lobby-player-meta { flex-direction: row; flex-wrap: wrap; align-items: center; margin-top: 3px }
:where([data-scope~="LobbyScreen"]) .lobby-player-tag { font-family: var(--font-display-family); font-size: var(--font-size-kicker); letter-spacing: 1px; color: var(--color-cyan); white-space: nowrap; margin-right: var(--space-s) }
:where([data-scope~="LobbyScreen"]) .lobby-players-hint { color: var(--color-muted); font-size: 11px; margin-top: var(--space-xs) }
:where([data-scope~="LobbyScreen"]) .lobby-map-ready { display: none; margin-bottom: 12px }
:where([data-scope~="LobbyScreen"]) .lobby-card-head { flex-direction: row; align-items: center; justify-content: space-between; margin-bottom: 8px }
:where([data-scope~="LobbyScreen"]) .lobby-card-title { flex-shrink: 1; color: var(--color-white); font-size: var(--font-size-heading); font-weight: bold; font-style: normal }
:where([data-scope~="LobbyScreen"]) .lobby-check-status { font-family: var(--font-display-family); font-size: 11px; letter-spacing: 0.5px; color: var(--color-yellow); flex-shrink: 0; margin-left: var(--space-m); white-space: nowrap }
:where([data-scope~="LobbyScreen"]) .lobby-check-status-pass { color: var(--color-green) }
:where([data-scope~="LobbyScreen"]) .lobby-map-ready-hint { color: var(--color-text-3); font-size: 13px; margin-bottom: 8px }
:where([data-scope~="LobbyScreen"]) .lobby-station-chips { flex-direction: row; flex-wrap: wrap; margin-bottom: 4px }
:where([data-scope~="LobbyScreen"]) .lobby-station-chip { flex-direction: row; align-items: center; background-image: none; --spr: none; margin-right: 4px; margin-bottom: 4px; flex-shrink: 0 }
:where([data-scope~="LobbyScreen"]) .lobby-chip-label { font-size: 12px; color: var(--color-muted); white-space: nowrap; letter-spacing: 0 }
:where([data-scope~="LobbyScreen"]) .lobby-chip-tick { width: 5px; height: 9px; border-right-width: 2px; border-bottom-width: 2px; border-top-width: 0; border-left-width: 0; border-color: var(--color-green); rotate: 45deg; margin-right: var(--space-s); translate: 0 -1px; flex-shrink: 0 }
:where([data-scope~="LobbyScreen"]) .lobby-station-chip-ok { border-color: var(--color-green) }
:where([data-scope~="LobbyScreen"]) .lobby-station-chip-ok > .lobby-chip-label { color: var(--color-green) }
:where([data-scope~="LobbyScreen"]) .lobby-station-chip-warn { border-color: var(--color-yellow) }
:where([data-scope~="LobbyScreen"]) .lobby-station-chip-warn > .lobby-chip-label { color: var(--color-yellow) }
@media (hover: hover) { :where([data-scope~="LobbyScreen"]) .lobby-station-chip-warn:hover { background-color: var(--tint-yellow-12) } }
:where([data-scope~="LobbyScreen"]) .lobby-station-chip-dim { opacity: 0.222 }
:where([data-scope~="LobbyScreen"]) .lobby-btn-small { font-size: 11px; letter-spacing: 1.5px }
:where([data-scope~="LobbyScreen"]) .lobby-walk-button { padding-top: 12px; padding-bottom: 12px; margin-top: var(--space-xs) }
:where([data-scope~="LobbyScreen"]) .lobby-resolve-panel { display: none; background-color: var(--color-panel-2); border-width: 1px; border-color: var(--color-border); padding-top: var(--space-m); padding-bottom: var(--space-m); padding-left: 12px; padding-right: 12px; margin-top: var(--space-m) }
:where([data-scope~="LobbyScreen"]) .lobby-resolve-title { color: var(--color-text-3); font-size: 13px; margin-bottom: 8px }
:where([data-scope~="LobbyScreen"]) .lobby-resolve-button { padding-top: var(--space-m); padding-bottom: var(--space-m); margin-bottom: var(--space-s) }
:where([data-scope~="LobbyScreen"]) .lobby-resolve-cancel { padding-top: var(--space-s); padding-bottom: var(--space-s) }
:where([data-scope~="LobbyScreen"]) .lobby-rules { margin-bottom: 12px }
:where([data-scope~="LobbyScreen"]) .lobby-rules-summary { font-family: var(--font-display-family); font-size: 11px; letter-spacing: 1px; color: var(--color-text-2) }
:where([data-scope~="LobbyScreen"]) .lobby-section-toggle { flex-direction: row; align-items: center; justify-content: space-between; min-height: 52px; background-image: none; --spr: none; font-family: var(--font-body-family); text-align: left; justify-content: center; --text-v: middle; letter-spacing: 0; padding-top: var(--space-m); padding-bottom: var(--space-m); padding-left: 0; padding-right: 0 }
@media (hover: hover) { :where([data-scope~="LobbyScreen"]) .lobby-section-toggle:hover { --tint: rgba(0, 0, 0, 0); background-color: var(--tint-muted-10) } }
:where([data-scope~="LobbyScreen"]) .lobby-section-title { font-family: var(--font-display-family); font-size: 12px; letter-spacing: 1.5px; color: var(--color-cyan) }
:where([data-scope~="LobbyScreen"]) .lobby-chevron { width: 8px; height: 8px; flex-shrink: 0; border-left-width: 2px; border-bottom-width: 2px; border-color: var(--color-cyan); rotate: 315deg; translate: 0 -2px; margin-right: var(--space-xs) }
:where([data-scope~="LobbyScreen"]) .lobby-chevron.open { rotate: 135deg; translate: 0 2px }
:where([data-scope~="LobbyScreen"]) .lobby-section-body { display: none; padding-bottom: var(--space-s) }
:where([data-scope~="LobbyScreen"]) .lobby-rules-row { flex-direction: row; align-items: center; justify-content: space-between; min-height: 44px; padding-top: var(--space-s); padding-bottom: var(--space-s) }
:where([data-scope~="LobbyScreen"]) .lobby-stepper { flex-shrink: 0; flex-direction: row; align-items: center }
:where([data-scope~="LobbyScreen"]) .lobby-stepper-button { width: 40px; height: 40px; flex-shrink: 0; border-color: var(--color-border); font-size: 16px; letter-spacing: 0; padding-top: 0; padding-bottom: 0; padding-left: 0; padding-right: 0 }
:where([data-scope~="LobbyScreen"]) .lobby-stepper-button[data-disabled] { border-color: var(--color-border-dark); color: var(--color-muted-2) }
:where([data-scope~="LobbyScreen"]) .lobby-stepper-value { font-family: var(--font-display-family); font-size: 15px; min-width: 52px; text-align: center; justify-content: center; --text-v: middle; margin-left: var(--space-s); margin-right: var(--space-s); white-space: nowrap }
:where([data-scope~="LobbyScreen"]) .lobby-options { display: none; padding-top: var(--space-xs); padding-bottom: var(--space-xs); margin-bottom: 12px }
:where([data-scope~="LobbyScreen"]) .lobby-option-row { flex-direction: row; align-items: center; justify-content: space-between; background-image: none; --spr: none; padding-top: 9px; padding-bottom: 9px; padding-left: 0; padding-right: 0 }
:where([data-scope~="LobbyScreen"]) .lobby-option-divided { border-top-width: 1px; border-top-color: var(--color-border-dark) }
:where([data-scope~="LobbyScreen"]) .lobby-option-text { flex-grow: 1; margin-right: var(--space-m) }
:where([data-scope~="LobbyScreen"]) .lobby-option-title { color: var(--color-white) }
:where([data-scope~="LobbyScreen"]) .lobby-option-sub { color: var(--color-muted); font-size: 11px; margin-top: 2px }
:where([data-scope~="LobbyScreen"]) .lobby-connect { flex-direction: row; align-items: center; flex-shrink: 0 }
:where([data-scope~="LobbyScreen"]) .lobby-connect-text { font-family: var(--font-display-family); color: var(--color-cyan); font-size: var(--font-size-kicker); letter-spacing: 1.5px }
:where([data-scope~="LobbyScreen"]) .lobby-connect-chevron { width: 6px; height: 6px; border-right-width: 2px; border-top-width: 2px; border-left-width: 0; border-bottom-width: 0; border-color: var(--color-cyan); rotate: 45deg; margin-left: var(--space-s); flex-shrink: 0 }
:where([data-scope~="LobbyScreen"]) .lobby-option-row { min-height: 44px }
:where([data-scope~="LobbyScreen"]) .lobby-option-row[data-disabled] { --tint: rgba(0, 0, 0, 0) }
:where([data-scope~="LobbyScreen"]) .lobby-option-row[data-disabled] .switch { opacity: 0.35 }
:where([data-scope~="LobbyScreen"]) .lobby-option-row[data-disabled] .lobby-option-title { color: var(--color-muted) }
:where([data-scope~="LobbyScreen"]) .lobby-option-sub-warn { color: var(--color-yellow) }
:where([data-scope~="LobbyScreen"]) .lobby-option-block { padding-top: 9px; padding-bottom: 12px }
:where([data-scope~="LobbyScreen"]) .lobby-seg { flex-direction: row; margin-top: 8px }
:where([data-scope~="LobbyScreen"]) .lobby-seg-button { flex-grow: 1; flex-basis: 0; min-height: 44px; background-image: none; --spr: none; background-color: rgba(0, 0, 0, 0); border-width: 1px; border-right-width: 0; border-color: var(--color-border); color: var(--color-muted); font-size: 11px; letter-spacing: 1px; padding-top: 0; padding-bottom: 0; padding-left: var(--space-xs); padding-right: var(--space-xs); white-space: nowrap }
:where([data-scope~="LobbyScreen"]) .lobby-seg-button-last { border-right-width: 1px }
@media (hover: hover) { :where([data-scope~="LobbyScreen"]) .lobby-seg-button:hover { background-color: var(--tint-muted-10) } }
:where([data-scope~="LobbyScreen"]) .lobby-seg-button.lobby-seg-on { background-color: var(--tint-cyan-28); border-color: var(--color-cyan); border-right-width: 1px; color: var(--color-cyan) }
:where([data-scope~="LobbyScreen"]) .lobby-player-chip-button { font-family: var(--font-body-family); text-align: left; justify-content: center; --text-v: middle; letter-spacing: 0 }
@media (hover: hover) { :where([data-scope~="LobbyScreen"]) .lobby-player-chip-button:hover { background-color: var(--color-panel-2) } }
@media (hover: hover) { :where([data-scope~="LobbyScreen"]) .lobby-player-chip-host.lobby-player-chip-button:hover { background-color: var(--tint-cyan-28) } }
:where([data-scope~="LobbyScreen"]) .lobby-player-name { font-size: 14px; color: var(--color-white); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
:where([data-scope~="LobbyScreen"]) .lobby-diff-badge { font-family: var(--font-display-family); font-size: var(--font-size-kicker); letter-spacing: 1px; white-space: nowrap; border-width: 1px; border-color: var(--color-cyan); color: var(--color-cyan); padding-top: 2px; padding-bottom: 2px; padding-left: 5px; padding-right: 5px }
:where([data-scope~="LobbyScreen"]) .lobby-diff-auto { border-color: var(--color-border); color: var(--color-muted-2) }
:where([data-scope~="LobbyScreen"]) .lobby-diff-easy { border-color: var(--color-green); color: var(--color-green) }
:where([data-scope~="LobbyScreen"]) .lobby-diff-hard { border-color: var(--color-red); color: var(--color-red) }
:where([data-scope~="LobbyScreen"]) .lobby-mg-overlay { display: none; position: absolute; left: 0; top: 0; right: 0; bottom: 0 }
:where([data-scope~="LobbyScreen"]) .lobby-mg-sheet { position: absolute; left: 0; right: 0; top: 12%; bottom: 0; background-color: var(--color-sheet); border-top-width: 2px; border-top-color: var(--color-cyan) }
:where([data-scope~="LobbyScreen"]) .lobby-mg-close { width: 44px; height: 44px }
:where([data-scope~="LobbyScreen"]) .lobby-mg-note { color: var(--color-text-3); font-size: 13px; padding-left: var(--space-l); padding-right: var(--space-l); margin-bottom: var(--space-s); flex-shrink: 0 }
:where([data-scope~="LobbyScreen"]) .lobby-mg-note-warn { color: var(--color-yellow) }
:where([data-scope~="LobbyScreen"]) .lobby-mg-scroll { flex-grow: 1 }
:where([data-scope~="LobbyScreen"]) .lobby-mg-scroll > .unity-scroll-view__content-and-vertical-scroll-container > .unity-scroll-view__content-viewport > .unity-scroll-view__content-container { width: 100% }
:where([data-scope~="LobbyScreen"]) .lobby-mg-list { padding-left: var(--space-l); padding-right: var(--space-l); padding-bottom: var(--space-xl) }
:where([data-scope~="LobbyScreen"]) .lobby-mg-group { margin-top: 12px; margin-bottom: var(--space-xs) }
:where([data-scope~="LobbyScreen"]) .lobby-mg-row { border-bottom-width: 1px; border-bottom-color: var(--color-border-dark) }
:where([data-scope~="LobbyScreen"]) .lobby-mg-id { font-family: var(--font-display-family); font-size: 11px; letter-spacing: 1px; color: var(--color-cyan); width: 40px; flex-shrink: 0; white-space: nowrap }
:where([data-scope~="LobbyScreen"]) .lobby-mg-row-idle .lobby-option-title { color: var(--color-muted) }
:where([data-scope~="LobbyScreen"]) .lobby-tv-row { padding-left: var(--space-m) }
:where([data-scope~="LobbyScreen"]) .lobby-tv-sheet { position: absolute; left: 0; right: 0; bottom: 0; background-color: var(--color-sheet); border-top-width: 2px; border-top-color: var(--color-cyan) }
:where([data-scope~="LobbyScreen"]) .lobby-tv-body { padding-left: var(--space-l); padding-right: var(--space-l); padding-bottom: var(--space-xl) }
:where([data-scope~="LobbyScreen"]) .lobby-tv-done { margin-top: var(--space-m) }
:where([data-scope~="LobbyScreen"]) .lobby-actions { flex-direction: row; flex-shrink: 0; margin-top: var(--space-m); margin-bottom: var(--space-xl) }
:where([data-scope~="LobbyScreen"]) .safe-bottom-inset .lobby-actions { margin-bottom: 0 }
:where([data-scope~="LobbyScreen"]) .lobby-start-button { flex-grow: 1.6; flex-basis: 0; min-height: 52px; padding-top: 0; padding-bottom: 0; margin-left: var(--space-m) }
:where([data-scope~="LobbyScreen"]) .lobby-start-button[data-disabled] { --tint: var(--color-border-dark) }
:where([data-scope~="LobbyScreen"]) .lobby-leave-button { flex-grow: 1; flex-basis: 0; min-height: 52px; padding-top: 0; padding-bottom: 0 }
:where([data-scope~="LobbyScreen"]) .lobby-roles-list { margin-top: var(--space-s) }
:where([data-scope~="LobbyScreen"]) .lobby-roles-list > * { flex-shrink: 0 }
:where([data-scope~="LobbyScreen"]) .lobby-role-team { margin-top: var(--space-m); margin-bottom: var(--space-xs) }
:where([data-scope~="LobbyScreen"]) .lobby-role-row { padding-top: var(--space-s); padding-bottom: var(--space-s); border-top-width: 1px; border-top-color: var(--color-border-dark) }
:where([data-scope~="LobbyScreen"]) .lobby-role-row > * { flex-shrink: 0 }
:where([data-scope~="LobbyScreen"]) .lobby-role-name { font-family: var(--font-display-family); font-size: 13px; letter-spacing: 0.5px }
:where([data-scope~="LobbyScreen"]) .lobby-role-steppers { flex-direction: row; align-items: center; justify-content: space-between; margin-top: var(--space-xs) }
:where([data-scope~="LobbyScreen"]) .lobby-role-stepper-label { color: var(--color-muted); font-size: 11px; margin-right: var(--space-xs) }
:where([data-scope~="LobbyScreen"]) .lobby-role-stepper-group { flex-direction: row; align-items: center }
:where([data-scope~="LobbyScreen"]) .lobby-role-row-off .lobby-role-name { color: var(--color-muted) }
:where([data-scope~="LobbyScreen"]) .lobby-rules-roles { margin-top: var(--space-m) }
:where([data-scope~="LobbyScreen"]) .lobby-rules-roles > * { flex-shrink: 0 }
:where([data-scope~="LobbyScreen"]) .lobby-rules-roles-head { margin-bottom: var(--space-xs) }
:where([data-scope~="LobbyScreen"]) .lobby-role-odds { font-family: var(--font-display-family); color: var(--color-cyan); font-size: 11px; letter-spacing: 0.5px; margin-top: 2px }
/* ---- Assets/UI/Screens/Location/LocationSetupScreen.uss (scoped: LocationSetupScreen) ---- */
:where([data-scope~="LocationSetupScreen"]) .setup-root { flex-grow: 1 }
:where([data-scope~="LocationSetupScreen"]) .setup-view { flex-grow: 1 }
:where([data-scope~="LocationSetupScreen"]) .setup-wizard-bar { margin-top: 12px; margin-left: var(--space-l); margin-right: var(--space-l) }
:where([data-scope~="LocationSetupScreen"]) .setup-kicker { margin-top: 7px; margin-left: var(--space-l); margin-right: var(--space-l) }
:where([data-scope~="LocationSetupScreen"]) .setup-cta { margin-top: var(--space-m); margin-bottom: 26px; margin-left: var(--space-l); margin-right: var(--space-l) }
:where([data-scope~="LocationSetupScreen"]) .intro-cards { flex-grow: 1; margin-top: var(--space-l); margin-left: var(--space-l); margin-right: var(--space-l) }
:where([data-scope~="LocationSetupScreen"]) .intro-cards .unity-scroll-view__content-container { width: 100% }
:where([data-scope~="LocationSetupScreen"]) .intro-card { flex-direction: row; padding-top: 14px; padding-bottom: 14px; padding-left: var(--space-l); padding-right: var(--space-l); margin-bottom: var(--space-m) }
:where([data-scope~="LocationSetupScreen"]) .intro-num { font-family: var(--font-display-family); width: 34px; height: 34px; flex-shrink: 0; margin-right: 14px; border-width: 1px; border-color: var(--color-cyan); color: var(--color-cyan); font-size: 13px; text-align: center; justify-content: center; --text-v: middle }
:where([data-scope~="LocationSetupScreen"]) .intro-card-text { flex-grow: 1 }
:where([data-scope~="LocationSetupScreen"]) .intro-card-title { font-size: 17px; font-weight: bold; font-style: normal; color: var(--color-white); white-space: pre-line }
:where([data-scope~="LocationSetupScreen"]) .intro-card-body { font-size: var(--font-size-body); color: var(--color-text-3); white-space: pre-line; margin-top: 2px }
:where([data-scope~="LocationSetupScreen"]) .setup-scan { background-color: rgba(0, 0, 0, 0) }
:where([data-scope~="LocationSetupScreen"]) .scan-camera-window { height: 340px; flex-shrink: 0; background-color: rgba(0, 0, 0, 0); align-items: center; justify-content: center; overflow: hidden }
:where([data-scope~="LocationSetupScreen"]) .scan-mode-tag { font-family: var(--font-display-family); position: absolute; left: 12px; top: 12px; font-size: var(--font-size-kicker); letter-spacing: 1px; color: var(--color-cyan); background-color: var(--scrim-70); border-width: 1px; border-color: var(--tint-cyan-40); padding-top: 5px; padding-bottom: 5px; padding-left: 8px; padding-right: 8px; white-space: nowrap }
:where([data-scope~="LocationSetupScreen"]) .scan-help-button { font-family: var(--font-display-family); position: absolute; right: 12px; top: 8px; width: 34px; height: 34px; background-color: var(--scrim-70); border-color: var(--tint-cyan-50); color: var(--color-cyan); font-size: 13px }
@media (hover: hover) { :where([data-scope~="LocationSetupScreen"]) .scan-help-button:hover { background-color: var(--scrim-90) } }
:where([data-scope~="LocationSetupScreen"]) .scan-camera-window .scan-reticle { position: relative; width: 120px; height: 120px }
:where([data-scope~="LocationSetupScreen"]) .scan-instruction { position: absolute; left: 12px; right: 12px; bottom: 10px; background-color: var(--scrim-70); border-left-width: 3px; border-color: var(--color-cyan); padding-top: 9px; padding-bottom: 9px; padding-left: 12px; padding-right: 12px }
:where([data-scope~="LocationSetupScreen"]) .scan-instruction-title { font-size: 16px; font-weight: bold; font-style: normal; color: var(--color-white); white-space: pre-line }
:where([data-scope~="LocationSetupScreen"]) .scan-instruction-sub { display: none; font-size: 13px; color: var(--color-text-2); white-space: pre-line; margin-top: 3px }
:where([data-scope~="LocationSetupScreen"]) .scan-celebrate { position: absolute; left: 0; right: 0; top: 0; bottom: 0; align-items: center; justify-content: center; background-color: var(--scrim-75); opacity: 0; transition-property: opacity; transition-duration: 0.2s; transition-timing-function: ease-out }
:where([data-scope~="LocationSetupScreen"]) .scan-celebrate-on { opacity: 1 }
:where([data-scope~="LocationSetupScreen"]) .scan-celebrate-badge { width: 92px; height: 92px; border-radius: 46px; border-width: 4px; border-color: var(--color-green); background-color: rgba(47, 211, 90, 0.04); align-items: center; justify-content: center; scale: 0.4 0.4; transition-property: scale; transition-duration: 0.35s; transition-timing-function: ease-out-back }
:where([data-scope~="LocationSetupScreen"]) .scan-celebrate-on .scan-celebrate-badge { scale: 1 1 }
:where([data-scope~="LocationSetupScreen"]) .scan-celebrate-tick { width: 20px; height: 40px; border-right-width: 7px; border-bottom-width: 7px; border-top-width: 0; border-left-width: 0; border-color: var(--color-green); rotate: 45deg; translate: 0 -5px }
:where([data-scope~="LocationSetupScreen"]) .scan-celebrate-title { font-family: var(--font-display-family); font-size: 20px; letter-spacing: 1px; color: var(--color-green); text-align: center; justify-content: center; --text-v: middle; white-space: pre-line; margin-top: 16px; margin-left: var(--space-l); margin-right: var(--space-l); translate: 0 10px; transition-property: translate; transition-duration: 0.3s; transition-timing-function: ease-out }
:where([data-scope~="LocationSetupScreen"]) .scan-celebrate-on .scan-celebrate-title { translate: 0 0 }
:where([data-scope~="LocationSetupScreen"]) .scan-celebrate-sub { font-size: 16px; font-weight: bold; font-style: normal; color: var(--color-white); text-align: center; justify-content: center; --text-v: middle; white-space: pre-line; margin-top: 6px; margin-left: var(--space-l); margin-right: var(--space-l) }
:where([data-scope~="LocationSetupScreen"]) .scan-sheet { flex-grow: 1; background-color: var(--color-sheet); border-top-width: 2px; border-top-color: var(--color-cyan); padding-top: 14px; padding-left: var(--space-l); padding-right: var(--space-l); padding-bottom: 20px }
:where([data-scope~="LocationSetupScreen"]) .sheet-progress { flex-grow: 1 }
:where([data-scope~="LocationSetupScreen"]) .scan-progress-row { flex-direction: row; justify-content: space-between; align-items: flex-end }
:where([data-scope~="LocationSetupScreen"]) .scan-progress-label { font-size: var(--font-size-title); font-weight: bold; font-style: normal; color: var(--color-white); white-space: nowrap; overflow: hidden }
:where([data-scope~="LocationSetupScreen"]) .scan-progress-hint { font-size: 12px; color: var(--color-muted); flex-shrink: 0; margin-left: 8px; margin-bottom: 3px }
:where([data-scope~="LocationSetupScreen"]) .scan-dots { flex-direction: row; margin-top: 8px; flex-shrink: 0 }
:where([data-scope~="LocationSetupScreen"]) .scan-dot { flex-grow: 1; flex-basis: 0; height: 4px; background-color: var(--color-border); margin-right: 5px }
:where([data-scope~="LocationSetupScreen"]) .scan-dot.on { background-color: var(--color-cyan) }
:where([data-scope~="LocationSetupScreen"]) .scan-dot.extra { background-color: var(--color-green) }
:where([data-scope~="LocationSetupScreen"]) .scan-map-holder { flex-grow: 1; min-height: 120px; margin-top: var(--space-m); background-color: var(--color-panel-2); overflow: hidden }
:where([data-scope~="LocationSetupScreen"]) .map-legend { position: absolute; left: 8px; right: 8px; bottom: 8px; flex-direction: row; flex-wrap: wrap }
:where([data-scope~="LocationSetupScreen"]) .legend-item { flex-direction: row; align-items: center; margin-right: var(--space-m); margin-top: 2px }
:where([data-scope~="LocationSetupScreen"]) .legend-line { width: 10px; height: 2px; margin-right: var(--space-xs) }
:where([data-scope~="LocationSetupScreen"]) .legend-wall { background-color: #4a7bd6 }
:where([data-scope~="LocationSetupScreen"]) .legend-unsure { background-color: #c8433a }
:where([data-scope~="LocationSetupScreen"]) .legend-guessed { background-color: #3aa95a }
:where([data-scope~="LocationSetupScreen"]) .legend-path { background-color: rgba(138, 154, 166, 0.6) }
:where([data-scope~="LocationSetupScreen"]) .legend-door { width: 10px; height: 7px; border-left-width: 1.5px; border-right-width: 1.5px; border-color: var(--color-muted); margin-right: var(--space-xs) }
:where([data-scope~="LocationSetupScreen"]) .legend-dot { width: 8px; height: 8px; border-radius: 4px; background-color: var(--marker-station); margin-right: var(--space-xs) }
:where([data-scope~="LocationSetupScreen"]) .legend-text { font-size: 10px; color: var(--color-muted) }
:where([data-scope~="LocationSetupScreen"]) .scan-hint { font-size: 13px; color: var(--color-muted); text-align: center; justify-content: center; --text-v: middle; white-space: pre-line; margin-top: 8px }
:where([data-scope~="LocationSetupScreen"]) .scan-actions { flex-direction: row; margin-top: var(--space-m); flex-shrink: 0 }
:where([data-scope~="LocationSetupScreen"]) .scan-edit-button { flex-grow: 1; flex-basis: 0; font-size: 11px; letter-spacing: 1.5px; padding-top: 14px; padding-bottom: 14px; padding-left: var(--space-s); padding-right: var(--space-s); margin-right: var(--space-s); white-space: nowrap }
:where([data-scope~="LocationSetupScreen"]) .scan-done-button { flex-grow: 1.4; flex-basis: 0; font-size: 12px; letter-spacing: 1.5px; padding-top: 15px; padding-bottom: 15px; padding-left: var(--space-s); padding-right: var(--space-s); --tint: var(--color-green); color: var(--color-ink); white-space: nowrap }
@media (hover: hover) { :where([data-scope~="LocationSetupScreen"]) .scan-done-button:hover { --tint: var(--color-green-hover) } }
:where([data-scope~="LocationSetupScreen"]) .scan-done-dim { --tint: var(--color-border-dark); color: var(--color-muted-2) }
@media (hover: hover) { :where([data-scope~="LocationSetupScreen"]) .scan-done-dim:hover { --tint: var(--color-border-dark) } }
:where([data-scope~="LocationSetupScreen"]) .scan-banner { display: none; background-color: var(--color-panel); border-left-width: 3px; border-color: var(--color-cyan); color: var(--color-text-2); font-size: 12px; white-space: pre-line; padding-top: 8px; padding-bottom: 8px; padding-left: var(--space-m); padding-right: var(--space-m); margin-top: 8px; flex-shrink: 0 }
:where([data-scope~="LocationSetupScreen"]) .scan-banner-warn { border-color: var(--color-yellow) }
:where([data-scope~="LocationSetupScreen"]) .scan-banner-action { display: none; align-self: flex-start; background-image: none; --spr: none; background-color: rgba(0, 0, 0, 0); border-width: 1px; border-color: var(--color-yellow); color: var(--color-yellow); font-size: 11px; letter-spacing: 1px; padding-top: 8px; padding-bottom: 8px; padding-left: 12px; padding-right: 12px; margin-top: var(--space-s); flex-shrink: 0 }
@media (hover: hover) { :where([data-scope~="LocationSetupScreen"]) .scan-banner-action:hover { background-color: var(--tint-yellow-12); --tint: rgba(0, 0, 0, 0) } }
:where([data-scope~="LocationSetupScreen"]) .sheet-card { display: none; flex-grow: 1 }
:where([data-scope~="LocationSetupScreen"]) .card-spacer { flex-grow: 1; min-height: var(--space-m) }
:where([data-scope~="LocationSetupScreen"]) .card-head-row { flex-direction: row; justify-content: space-between; align-items: flex-end }
:where([data-scope~="LocationSetupScreen"]) .card-title { font-size: var(--font-size-title); font-weight: bold; font-style: normal; color: var(--color-white); white-space: pre-line }
:where([data-scope~="LocationSetupScreen"]) .card-title-found { color: var(--color-green) }
:where([data-scope~="LocationSetupScreen"]) .card-code { font-size: var(--font-size-small); color: var(--color-muted); max-width: 55%; margin-left: 8px; margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
:where([data-scope~="LocationSetupScreen"]) .card-code-block { margin-left: 0; margin-top: var(--space-xs); max-width: 100% }
:where([data-scope~="LocationSetupScreen"]) .card-sub { font-size: var(--font-size-body); color: var(--color-text-2); white-space: pre-line; margin-top: var(--space-xs) }
:where([data-scope~="LocationSetupScreen"]) .card-ask-row { flex-direction: row; flex-wrap: wrap; margin-top: var(--space-xs) }
:where([data-scope~="LocationSetupScreen"]) .card-ask { font-size: var(--font-size-body); color: var(--color-text-2); margin-right: var(--space-xs) }
:where([data-scope~="LocationSetupScreen"]) .card-suggest-hint { display: none; font-size: var(--font-size-body); color: var(--color-muted); white-space: pre-line }
:where([data-scope~="LocationSetupScreen"]) .chip-row { flex-direction: row; flex-wrap: wrap }
:where([data-scope~="LocationSetupScreen"]) .type-chip { background-image: none; --spr: none; background-color: var(--color-panel); border-width: 1px; border-color: var(--color-border); border-radius: 0; color: var(--color-text); font-size: 12px; letter-spacing: 0; white-space: nowrap; flex-shrink: 0; padding-top: 8px; padding-bottom: 8px; padding-left: 12px; padding-right: 12px; margin-top: 0; margin-left: 0; margin-right: var(--space-s); margin-bottom: var(--space-s) }
@media (hover: hover) { :where([data-scope~="LocationSetupScreen"]) .type-chip:hover { background-color: var(--color-panel-2); --tint: rgba(0, 0, 0, 0) } }
:where([data-scope~="LocationSetupScreen"]) .chip-grid { margin-top: 8px; flex-shrink: 0 }
:where([data-scope~="LocationSetupScreen"]) .chip-grid .type-chip { flex-basis: 23%; height: 52px; align-items: center; justify-content: center; padding-top: var(--space-s); padding-bottom: 7px; padding-left: 2px; padding-right: 2px; margin-right: 5px; margin-bottom: 5px }
:where([data-scope~="LocationSetupScreen"]) .chip-emoji { font-size: 16px }
:where([data-scope~="LocationSetupScreen"]) .chip-name { font-size: var(--font-size-small); color: var(--color-white); white-space: nowrap; overflow: hidden }
:where([data-scope~="LocationSetupScreen"]) .type-chip.type-chip-selected { border-color: var(--color-cyan); background-color: var(--tint-cyan-20); color: var(--color-white) }
:where([data-scope~="LocationSetupScreen"]) .card-which-chips { margin-top: 8px }
:where([data-scope~="LocationSetupScreen"]) .card-which-suggest { display: none; font-size: var(--font-size-body); color: var(--color-cyan); white-space: pre-line; margin-top: var(--space-xs) }
:where([data-scope~="LocationSetupScreen"]) .type-chip.which-chip-suggested { border-width: 2px; font-weight: bold; font-style: normal }
:where([data-scope~="LocationSetupScreen"]) .card-name-field { margin-top: 8px; padding-top: 8px; padding-bottom: 8px; padding-left: 12px; padding-right: 12px; flex-shrink: 0 }
:where([data-scope~="LocationSetupScreen"]) .card-name-field .unity-base-text-field__input { font-size: 18px }
:where([data-scope~="LocationSetupScreen"]) .card-meeting-toggle { flex-direction: row; align-items: center; background-color: var(--color-panel-2); border-width: 1px; border-color: var(--color-border); padding-top: var(--space-m); padding-bottom: var(--space-m); padding-left: 12px; padding-right: 12px; margin-top: 8px; margin-bottom: 0; margin-left: 0; margin-right: 0; flex-shrink: 0 }
:where([data-scope~="LocationSetupScreen"]) .card-meeting-toggle .unity-toggle__input { flex-grow: 1; align-items: center }
:where([data-scope~="LocationSetupScreen"]) .card-meeting-toggle .unity-toggle__checkmark { width: 22px; height: 22px; min-width: 22px; min-height: 22px; margin-right: var(--space-m); background-color: rgba(0, 0, 0, 0); border-width: 1px; border-color: var(--color-cyan); border-radius: 0 }
:where([data-scope~="LocationSetupScreen"]) .card-meeting-toggle[data-checked] .unity-toggle__checkmark { background-color: var(--tint-cyan-55) }
:where([data-scope~="LocationSetupScreen"]) .card-meeting-toggle .unity-toggle__text { white-space: pre-line; font-size: 13px; color: var(--color-text); margin-left: 0 }
:where([data-scope~="LocationSetupScreen"]) .card-error { display: none; background-color: var(--tint-red-12); border-left-width: 3px; border-color: var(--color-red); color: var(--color-text); font-size: 12px; white-space: pre-line; padding-top: 8px; padding-bottom: 8px; padding-left: var(--space-m); padding-right: var(--space-m); margin-top: 8px; flex-shrink: 0 }
:where([data-scope~="LocationSetupScreen"]) .setup-action-row { flex-direction: row; flex-shrink: 0 }
:where([data-scope~="LocationSetupScreen"]) .setup-action-secondary { flex-grow: 1; flex-basis: 0; font-size: 12px; letter-spacing: 1.5px; padding-top: 15px; padding-bottom: 15px; padding-left: var(--space-s); padding-right: var(--space-s); margin-right: var(--space-s); white-space: nowrap }
:where([data-scope~="LocationSetupScreen"]) .setup-action-primary { flex-grow: 1.4; flex-basis: 0; font-size: 12px; letter-spacing: 1.5px; padding-top: 15px; padding-bottom: 15px; padding-left: var(--space-s); padding-right: var(--space-s); white-space: nowrap }
:where([data-scope~="LocationSetupScreen"]) .setup-full-action { font-size: 12px; letter-spacing: 1.5px; padding-top: 15px; padding-bottom: 15px; margin-top: var(--space-s); flex-shrink: 0 }
:where([data-scope~="LocationSetupScreen"]) .setup-button-primary { font-size: 12px; letter-spacing: 1.5px; padding-top: 15px; padding-bottom: 15px; margin-top: var(--space-s); flex-shrink: 0 }
:where([data-scope~="LocationSetupScreen"]) .setup-button-secondary { background-image: none; --spr: none; background-color: rgba(0, 0, 0, 0); border-width: 1px; border-color: var(--color-border); color: var(--color-muted); font-size: 12px; letter-spacing: 1.5px; padding-top: 13px; padding-bottom: 13px; margin-top: var(--space-s); flex-shrink: 0 }
@media (hover: hover) { :where([data-scope~="LocationSetupScreen"]) .setup-button-secondary:hover { background-color: var(--tint-muted-10); --tint: rgba(0, 0, 0, 0) } }
:where([data-scope~="LocationSetupScreen"]) .card-stations-list { flex-grow: 1; margin-top: 8px }
:where([data-scope~="LocationSetupScreen"]) .card-stations-list .unity-scroll-view__content-container { width: 100% }
:where([data-scope~="LocationSetupScreen"]) .scan-station-row { flex-direction: row; align-items: center; background-color: var(--color-panel-2); border-width: 1px; border-color: var(--color-border); padding-top: var(--space-m); padding-bottom: var(--space-m); padding-left: 12px; padding-right: 12px; margin-bottom: var(--space-s) }
:where([data-scope~="LocationSetupScreen"]) .scan-station-emoji { font-size: 18px; flex-shrink: 0; margin-right: var(--space-m) }
:where([data-scope~="LocationSetupScreen"]) .scan-station-text { flex-grow: 1; overflow: hidden }
:where([data-scope~="LocationSetupScreen"]) .scan-station-name { font-size: var(--font-size-heading); color: var(--color-white); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
:where([data-scope~="LocationSetupScreen"]) .scan-station-tag { font-size: var(--font-size-small); color: var(--color-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
:where([data-scope~="LocationSetupScreen"]) .scan-station-delete { width: 34px; height: 34px; flex-shrink: 0; background-image: none; --spr: none; background-color: rgba(0, 0, 0, 0); border-width: 1px; border-color: var(--color-border); border-radius: 0; color: var(--color-red); font-family: var(--font-body-family); font-size: 18px; letter-spacing: 0; padding-top: 0; padding-bottom: 0; padding-left: 0; padding-right: 0; text-align: center; justify-content: center; --text-v: middle }
@media (hover: hover) { :where([data-scope~="LocationSetupScreen"]) .scan-station-delete:hover { background-color: var(--tint-red-12); --tint: rgba(0, 0, 0, 0) } }
:where([data-scope~="LocationSetupScreen"]) .scan-debug-row { margin-top: 8px; flex-shrink: 0 }
:where([data-scope~="LocationSetupScreen"]) .scan-debug-button { background-image: none; --spr: none; background-color: var(--color-panel); border-width: 1px; border-color: var(--color-border); color: var(--color-muted); font-size: 10px; letter-spacing: 0; white-space: nowrap; flex-shrink: 0; padding-top: var(--space-s); padding-bottom: var(--space-s); padding-left: var(--space-m); padding-right: var(--space-m); margin-top: 0; margin-right: var(--space-s) }
:where([data-scope~="LocationSetupScreen"]) .scan-debug-stats { font-size: 9px; color: var(--color-muted-2); white-space: pre-line; margin-top: var(--space-xs); flex-shrink: 0 }
:where([data-scope~="LocationSetupScreen"]) .review-kicker-row { flex-direction: row; align-items: center; justify-content: space-between; margin-top: 7px; margin-left: var(--space-l); margin-right: var(--space-l); flex-shrink: 0 }
:where([data-scope~="LocationSetupScreen"]) .review-level-picker { display: none; flex-direction: row }
:where([data-scope~="LocationSetupScreen"]) .level-chip { font-family: var(--font-display-family); background-image: none; --spr: none; background-color: rgba(0, 0, 0, 0); border-width: 1px; border-color: var(--color-border); color: var(--color-muted); font-size: var(--font-size-kicker); letter-spacing: 1px; padding-top: 3px; padding-bottom: 3px; padding-left: var(--space-m); padding-right: var(--space-m); margin-top: 0; margin-bottom: 0; margin-left: 3px; margin-right: 0 }
:where([data-scope~="LocationSetupScreen"]) .level-chip.type-chip-selected { background-color: var(--color-cyan); border-color: var(--color-cyan); color: var(--color-ink) }
:where([data-scope~="LocationSetupScreen"]) .review-map-holder { flex-grow: 1; flex-shrink: 1; min-height: 200px; margin-top: 8px; margin-left: var(--space-l); margin-right: var(--space-l); background-color: var(--color-panel-2); overflow: hidden }
:where([data-scope~="LocationSetupScreen"]) .review-map-caption { position: absolute; right: 8px; bottom: 8px; font-size: 10px; color: var(--color-muted) }
:where([data-scope~="LocationSetupScreen"]) .review-map-rotate-button { position: absolute; top: 6px; right: 6px; font-family: var(--font-display-family); background-image: none; --spr: none; background-color: rgba(17, 24, 31, 0.85); border-width: 1px; border-color: var(--color-border); border-radius: 0; color: var(--color-text-2); font-size: var(--font-size-kicker); letter-spacing: 1px; padding-top: var(--space-xs); padding-bottom: var(--space-xs); padding-left: var(--space-m); padding-right: var(--space-m); margin: 0 }
@media (hover: hover) { :where([data-scope~="LocationSetupScreen"]) .review-map-rotate-button:hover { border-color: var(--color-cyan); --tint: rgba(0, 0, 0, 0) } }
:where([data-scope~="LocationSetupScreen"]) .review-toolbar { flex-direction: row; margin-top: 6px; margin-left: var(--space-l); margin-right: var(--space-l); flex-shrink: 0 }
:where([data-scope~="LocationSetupScreen"]) .wall-tool-button { font-family: var(--font-display-family); flex-grow: 1; flex-basis: 0; background-image: none; --spr: none; background-color: rgba(0, 0, 0, 0); border-width: 1px; border-color: var(--color-border); border-radius: 0; color: var(--color-text-2); font-size: var(--font-size-kicker); letter-spacing: 1px; white-space: pre-line; padding-top: var(--space-m); padding-bottom: var(--space-m); padding-left: 2px; padding-right: 2px; margin-right: var(--space-xs) }
@media (hover: hover) { :where([data-scope~="LocationSetupScreen"]) .wall-tool-button:hover { border-color: var(--color-cyan); --tint: rgba(0, 0, 0, 0) } }
:where([data-scope~="LocationSetupScreen"]) .wall-tool-button[data-disabled] { color: var(--color-muted-2); border-color: var(--color-border-dark) }
:where([data-scope~="LocationSetupScreen"]) .wall-tool-on { color: var(--color-cyan); border-color: var(--color-cyan) }
:where([data-scope~="LocationSetupScreen"]) .wall-tool-reset { color: var(--color-muted); margin-right: 0 }
:where([data-scope~="LocationSetupScreen"]) .review-stations-kicker { margin-top: 8px; margin-bottom: var(--space-xs); margin-left: var(--space-l); margin-right: var(--space-l); flex-shrink: 0 }
:where([data-scope~="LocationSetupScreen"]) .review-station-list { flex-grow: 0; flex-shrink: 1; min-height: 48px; max-height: 150px; margin-left: var(--space-l); margin-right: var(--space-l) }
:where([data-scope~="LocationSetupScreen"]) .review-station-list .unity-scroll-view__content-container { width: 100% }
:where([data-scope~="LocationSetupScreen"]) .review-error { margin-top: var(--space-xs); margin-left: var(--space-l); margin-right: var(--space-l); flex-shrink: 0 }
:where([data-scope~="LocationSetupScreen"]) .review-row { flex-direction: row; align-items: center; background-color: var(--color-panel-2); border-width: 1px; border-color: var(--color-border); padding-top: 8px; padding-bottom: 8px; padding-left: var(--space-m); padding-right: var(--space-m); margin-bottom: var(--space-s) }
:where([data-scope~="LocationSetupScreen"]) .review-row-emergency { width: 34px; height: 30px; flex-shrink: 0; margin-right: 8px; background-image: none; --spr: none; background-color: rgba(0, 0, 0, 0); border-width: 1px; border-color: var(--color-border); border-radius: 0; padding-top: 0; padding-bottom: 0; padding-left: 0; padding-right: 0; font-size: 14px; text-align: center; justify-content: center; --text-v: middle; opacity: 0.45 }
@media (hover: hover) { :where([data-scope~="LocationSetupScreen"]) .review-row-emergency:hover { border-color: var(--color-red); --tint: rgba(0, 0, 0, 0) } }
:where([data-scope~="LocationSetupScreen"]) .review-row-emergency.review-row-emergency-on { background-color: var(--tint-red-12); border-color: var(--color-red); opacity: 1 }
:where([data-scope~="LocationSetupScreen"]) .review-row-text { flex-grow: 1; overflow: hidden }
:where([data-scope~="LocationSetupScreen"]) .review-row-title { flex-direction: row; align-items: center }
:where([data-scope~="LocationSetupScreen"]) .review-row-name { font-size: 15px; color: var(--color-white); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
:where([data-scope~="LocationSetupScreen"]) .review-row-meeting-label { font-size: var(--font-size-small); color: var(--color-red); flex-shrink: 0; margin-left: var(--space-s) }
:where([data-scope~="LocationSetupScreen"]) .review-row-code { font-size: var(--font-size-small); color: var(--color-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
:where([data-scope~="LocationSetupScreen"]) .review-row-delete { width: 30px; height: 30px; flex-shrink: 0; margin-left: 8px; background-image: none; --spr: none; background-color: rgba(0, 0, 0, 0); border-width: 1px; border-color: var(--color-border); border-radius: 0; color: var(--color-red); font-family: var(--font-body-family); font-size: 18px; letter-spacing: 0; padding-top: 0; padding-bottom: 0; padding-left: 0; padding-right: 0; text-align: center; justify-content: center; --text-v: middle }
@media (hover: hover) { :where([data-scope~="LocationSetupScreen"]) .review-row-delete:hover { background-color: var(--tint-red-12); --tint: rgba(0, 0, 0, 0) } }
:where([data-scope~="LocationSetupScreen"]) .review-row-delete.review-row-delete-armed { background-color: var(--color-red); border-color: var(--color-red); color: var(--color-white) }
:where([data-scope~="LocationSetupScreen"]) .review-footer { margin-top: var(--space-s); margin-bottom: 16px; margin-left: var(--space-l); margin-right: var(--space-l); flex-shrink: 0 }
:where([data-scope~="LocationSetupScreen"]) .review-name-row { flex-direction: row; align-items: stretch; margin-top: var(--space-xs) }
:where([data-scope~="LocationSetupScreen"]) .review-name-field { flex-grow: 1; flex-shrink: 1; margin-top: 0; margin-bottom: 0; margin-left: 0; padding-top: 8px; padding-bottom: 8px; padding-left: 12px; padding-right: 12px }
:where([data-scope~="LocationSetupScreen"]) .review-name-field .unity-base-text-field__input { font-size: var(--font-size-title) }
:where([data-scope~="LocationSetupScreen"]) .review-save-button { flex-shrink: 0; margin-top: 0; margin-bottom: 0; margin-left: var(--space-s); padding-left: 22px; padding-right: 22px }
:where([data-scope~="LocationSetupScreen"]) .floorplan-map { flex-grow: 1 }
:where([data-scope~="LocationSetupScreen"]) .floorplan-station-label { position: absolute; white-space: nowrap; font-size: var(--font-size-small); color: var(--color-white) }
:where([data-scope~="LocationSetupScreen"]) .floorplan-level-label { position: absolute; white-space: nowrap; font-family: var(--font-display-family); font-size: var(--font-size-kicker); letter-spacing: 1px; color: var(--color-cyan) }
:where([data-scope~="LocationSetupScreen"]) .setup-button-toolactive { background-color: var(--tint-cyan-15); border-color: var(--color-cyan); color: var(--color-cyan) }
/* ---- Assets/UI/Screens/Sample/SampleScreen.uss (scoped: SampleScreen) ---- */
:where([data-scope~="SampleScreen"]) .screen { flex-grow: 1 }
:where([data-scope~="SampleScreen"]) .sample-body { margin-top: var(--space-xl); margin-left: var(--space-l); margin-right: var(--space-l) }
:where([data-scope~="SampleScreen"]) .sample-name-field { margin-top: var(--space-s) }
:where([data-scope~="SampleScreen"]) .sample-spacer { flex-grow: 1 }
:where([data-scope~="SampleScreen"]) .sample-submit-button { margin-left: var(--space-l); margin-right: var(--space-l); margin-bottom: 26px }
/* ---- Assets/UI/Screens/Voting/VotingScreen.uss (scoped: VotingScreen) ---- */
:where([data-scope~="VotingScreen"]) .voting-root { flex-grow: 1 }
:where([data-scope~="VotingScreen"]) .vote-content { flex-grow: 1; padding-top: var(--space-l); padding-left: var(--space-l); padding-right: var(--space-l) }
:where([data-scope~="VotingScreen"]) .vote-header-card { flex-direction: row; align-items: center; background-color: var(--color-panel); border-width: 1px; border-color: var(--color-red); padding-top: 14px; padding-bottom: 14px; padding-left: var(--space-l); padding-right: var(--space-l); margin-bottom: 12px; flex-shrink: 0 }
:where([data-scope~="VotingScreen"]) .vote-ring-slot { width: 76px; height: 76px; flex-shrink: 0; margin-right: 14px }
:where([data-scope~="VotingScreen"]) .vote-ring { position: absolute; left: 0; top: 0; right: 0; bottom: 0 }
:where([data-scope~="VotingScreen"]) .vote-timer { position: absolute; left: 0; top: 0; right: 0; bottom: 0; font-family: var(--font-display-family); font-size: 22px; color: var(--color-white); text-align: center; justify-content: center; --text-v: middle; white-space: nowrap }
:where([data-scope~="VotingScreen"]) .vote-header-text { flex-grow: 1; min-width: 0 }
:where([data-scope~="VotingScreen"]) .vote-kicker { color: var(--color-red) }
:where([data-scope~="VotingScreen"]) .vote-title { font-size: var(--font-size-title); font-weight: bold; font-style: normal; color: var(--color-white); margin-top: 3px; margin-bottom: 3px }
:where([data-scope~="VotingScreen"]) .vote-sub { font-size: 13px; color: var(--color-text-3) }
:where([data-scope~="VotingScreen"]) .vote-deadbody-row { flex-direction: row; align-items: center; background-color: var(--color-panel); border-width: 1px; border-color: var(--color-border); padding-top: var(--space-m); padding-bottom: var(--space-m); padding-left: 14px; padding-right: 14px; margin-bottom: 12px; flex-shrink: 0 }
:where([data-scope~="VotingScreen"]) .vote-deadbody-disc { width: 38px; height: 38px; border-radius: 19px; background-color: var(--color-panel-2); border-width: 2px; border-color: var(--color-muted-2); align-items: center; justify-content: center; flex-shrink: 0; margin-right: 12px }
:where([data-scope~="VotingScreen"]) .vote-deadbody-skull { width: 18px; height: 18px; background-image: url("assets/Assets/TEMP/skull-and-crossbones_2620-fe0f.png"); --spr: url("generated/assets/Assets/TEMP/skull-and-crossbones_2620-fe0f.png"); --tint: var(--color-muted) }
:where([data-scope~="VotingScreen"]) .vote-deadbody-text { flex-grow: 1; min-width: 0; margin-right: var(--space-m) }
:where([data-scope~="VotingScreen"]) .vote-deadbody-name { font-size: 15px; color: var(--color-white); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
:where([data-scope~="VotingScreen"]) .vote-bomb-timer { font-size: 12px; color: var(--color-muted); white-space: nowrap }
:where([data-scope~="VotingScreen"]) .vote-replay-button { border-color: var(--color-amber); color: var(--color-amber); font-size: var(--font-size-kicker); letter-spacing: 1px; padding-top: 9px; padding-bottom: 9px; padding-left: var(--space-m); padding-right: var(--space-m); flex-shrink: 0 }
@media (hover: hover) { :where([data-scope~="VotingScreen"]) .vote-replay-button:hover { background-color: var(--tint-amber-12) } }
:where([data-scope~="VotingScreen"]) .vote-replay-button:active { background-color: var(--tint-amber-20) }
:where([data-scope~="VotingScreen"]) .vote-gather { align-items: center; padding-top: 40px; flex-shrink: 0 }
:where([data-scope~="VotingScreen"]) .vote-gather-ring { width: 150px; height: 150px; border-radius: 75px; border-width: 2px; border-color: var(--color-red); align-items: center; justify-content: center; margin-bottom: 14px }
:where([data-scope~="VotingScreen"]) .vote-gather-pulse { position: absolute; left: -2px; top: -2px; right: -2px; bottom: -2px; border-radius: 75px; border-width: 2px; border-color: var(--color-red); opacity: 0.140 }
:where([data-scope~="VotingScreen"]) .vote-gather-mark { width: 64px; height: 64px; background-size: contain }
:where([data-scope~="VotingScreen"]) .vote-gather-mark-siren { background-image: url("assets/Assets/TEMP/police-car-light_1f6a8.png"); --spr: url("generated/assets/Assets/TEMP/police-car-light_1f6a8.png") }
:where([data-scope~="VotingScreen"]) .vote-gather-mark-skull { background-image: url("assets/Assets/TEMP/skull-and-crossbones_2620-fe0f.png"); --spr: url("generated/assets/Assets/TEMP/skull-and-crossbones_2620-fe0f.png") }
:where([data-scope~="VotingScreen"]) .vote-gather-line { flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: flex-end }
:where([data-scope~="VotingScreen"]) .vote-gather-line ui-label { font-size: 18px; color: var(--color-white); white-space: nowrap }
:where([data-scope~="VotingScreen"]) .vote-gather-word { margin-right: var(--space-xs) }
:where([data-scope~="VotingScreen"]) .vote-gather-station { color: var(--color-cyan); font-weight: bold; font-style: normal }
:where([data-scope~="VotingScreen"]) .vote-gather-hint { font-size: var(--font-size-body); color: var(--color-muted); text-align: center; justify-content: center; --text-v: middle; margin-top: var(--space-xs) }
:where([data-scope~="VotingScreen"]) .vote-accent-amber > .vote-content > .vote-header-card > .vote-header-text > .vote-kicker { color: var(--color-amber) }
:where([data-scope~="VotingScreen"]) .vote-accent-amber > .vote-content > .vote-header-card,
:where([data-scope~="VotingScreen"]) .vote-accent-amber > .vote-content > .vote-gather > .vote-gather-ring,
:where([data-scope~="VotingScreen"]) .vote-accent-amber > .vote-content > .vote-gather > .vote-gather-ring > .vote-gather-pulse { border-color: var(--color-amber) }
:where([data-scope~="VotingScreen"]) .vote-info { margin-bottom: 12px; flex-shrink: 0 }
:where([data-scope~="VotingScreen"]) .vote-grid-scroll { flex-grow: 1; min-height: 0 }
:where([data-scope~="VotingScreen"]) .vote-grid-scroll .unity-scroll-view__content-container { width: 100% }
:where([data-scope~="VotingScreen"]) .vote-grid { width: 100%; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-content: flex-start }
:where([data-scope~="VotingScreen"]) .vote-tile { width: 49%; height: 58px; flex-direction: row; align-items: center; flex-shrink: 0; background-image: none; --spr: none; background-color: var(--color-panel); border-width: 2px; border-color: var(--color-border); margin-bottom: var(--space-s); padding-top: 0; padding-bottom: 0; padding-left: 12px; padding-right: 12px; letter-spacing: 0; text-align: left; justify-content: center; --text-v: middle }
@media (hover: hover) { :where([data-scope~="VotingScreen"]) .vote-tile:hover { background-color: var(--color-panel-2) } }
:where([data-scope~="VotingScreen"]) .vote-tile-mine { border-color: var(--color-cyan) }
:where([data-scope~="VotingScreen"]) .vote-tile[data-disabled] { opacity: 0.178; background-color: var(--color-panel) }
:where([data-scope~="VotingScreen"]) .vote-tile-avatar { width: 30px; height: 30px; border-radius: 15px; background-color: var(--color-bg); border-width: 1px; border-color: var(--color-border); flex-shrink: 0; margin-right: var(--space-m); font-family: var(--font-display-family); font-size: var(--font-size-small); color: var(--color-white); text-align: center; justify-content: center; --text-v: middle; white-space: nowrap }
:where([data-scope~="VotingScreen"]) .vote-tile-text { flex-grow: 1; min-width: 0 }
:where([data-scope~="VotingScreen"]) .vote-tile-name { font-size: 15px; color: var(--color-white); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
:where([data-scope~="VotingScreen"]) .vote-tile-status { font-size: var(--font-size-small); color: var(--color-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
:where([data-scope~="VotingScreen"]) .vote-tile-status-voted { color: var(--color-green) }
:where([data-scope~="VotingScreen"]) .vote-tile-status-dead { color: var(--color-muted-2) }
:where([data-scope~="VotingScreen"]) .map-header .vote-replay-title { color: var(--color-amber) }
:where([data-scope~="VotingScreen"]) .vote-replay-phases { position: absolute; left: var(--space-l); right: var(--space-l); bottom: 92px; flex-direction: row }
:where([data-scope~="VotingScreen"]) .vote-phase-chip { flex-grow: 1; flex-basis: 0; background-color: var(--color-border-dark); color: var(--color-muted); font-size: var(--font-size-kicker); text-align: center; justify-content: center; --text-v: middle; padding-top: 5px; padding-bottom: 5px; padding-left: 2px; padding-right: 2px; margin-right: var(--space-xs) }
:where([data-scope~="VotingScreen"]) .vote-phase-chip-on { background-color: var(--color-amber); color: var(--color-ink) }