:root { --kp-bg: #030605; --kp-bg-deep: #020403; --kp-panel: #07110d; --kp-panel-raised: #0b1812; --kp-panel-track: #050b08; --kp-panel-targeted: #10160d; --kp-panel-hover: #0d2016; --kp-action-hover: #111409; --kp-text: #63ff91; --kp-text-dim: #7a9783; --kp-border: #14592f; --kp-border-subtle: #0c2d1b; --kp-border-meter: #0d3a22; --kp-border-empty: #0a2416; --kp-border-strong: #27d866; --kp-warning: #ffb347; --kp-beneficial: #57d8ff; --kp-accent: #ff7a1a; --kp-danger: #ff5f5f; --kp-damage: #ffd166; --kp-status-harmful: #ff4fa3; --kp-kill: #ff3333; --kp-empty-fill: #050a07; --kp-overlay: rgba(0, 0, 0, 0.88); --kp-lang-c: #8ea4a9; --kp-lang-cpp: #6da6ff; --kp-lang-rust: #d78b4a; --kp-lang-python: #4fb8ff; --kp-lang-javascript: #f7df1e; --kp-lang-typescript: #5aa7ff; --kp-lang-haskell: #b48cff; --kp-lang-assembly: #ff6b6b; --kp-lang-java: #ff8c42; --kp-lang-go: #6de6ff; --kp-lang-ruby: #ff5f7d; --kp-lang-php: #9aa2ff; --kp-primary: var(--kp-text); --kp-scroll-track: var(--kp-panel); --kp-scroll-thumb: var(--kp-text-dim); --kp-scroll-thumb-hover: var(--kp-border-strong); } .combat-root { background-color: var(--kp-bg); color: var(--kp-text); font-size: 13px; opacity: 1; transition-property: opacity; transition-duration: 220ms; } .combat-root.scene-fade-hidden { opacity: 0; } .combat-root.reduced-motion { transition-duration: 0ms; } .scene-fade-curtain { position: absolute; left: 0; right: 0; top: 0; bottom: 0; background-color: rgb(0, 0, 0); opacity: 0; transition-property: opacity; transition-duration: 200ms; } .scene-fade-curtain.scene-fade-visible { opacity: 1; } .reduced-motion .scene-fade-curtain { transition-duration: 0ms; } .combat-status-bar { height: 34px; padding-left: 10px; padding-right: 10px; flex-direction: row; align-items: center; background-color: var(--kp-bg-deep); border-bottom-width: 1px; border-bottom-color: var(--kp-border); } .status-cluster { flex-direction: row; align-items: center; margin-right: 14px; } .status-label { color: var(--kp-text-dim); font-size: 11px; margin-right: 5px; } .status-value { color: var(--kp-text); -unity-font-style: bold; } .phase-pill { color: var(--kp-bg); background-color: var(--kp-accent); padding-left: 8px; padding-right: 8px; padding-top: 2px; padding-bottom: 2px; -unity-font-style: bold; } .status-spacer { flex-grow: 1; } .seed-value { color: var(--kp-text-dim); font-size: 11px; } .main-layout { flex-grow: 1; min-height: 0; flex-direction: row; padding: 10px; } .bottom-layout { min-height: 178px; flex-direction: row; padding-left: 10px; padding-right: 10px; padding-bottom: 10px; } .panel { min-height: 0; padding: 10px; background-color: var(--kp-panel); border-left-width: 1px; border-right-width: 1px; border-top-width: 1px; border-bottom-width: 1px; border-color: var(--kp-border); } .panel-header { flex-direction: row; align-items: center; margin-bottom: 10px; border-bottom-width: 1px; border-bottom-color: var(--kp-border-subtle); padding-bottom: 5px; } .panel-title { color: var(--kp-text); -unity-font-style: bold; font-size: 15px; flex-grow: 1; } .panel-subtitle { color: var(--kp-text-dim); font-size: 11px; } .field-panel { flex-grow: 1; margin-left: 10px; margin-right: 10px; } .hand-panel { flex-grow: 1; } .turn-panel { margin-left: 10px; } .meter-block { margin-bottom: 10px; } .meter-head { flex-direction: row; align-items: center; margin-bottom: 4px; } .metric-label { color: var(--kp-text-dim); font-size: 11px; flex-grow: 1; } .metric-value { color: var(--kp-text); -unity-font-style: bold; } .metric-value-muted { color: var(--kp-text-dim); } .meter-track { height: 13px; background-color: var(--kp-bg-deep); border-left-width: 1px; border-right-width: 1px; border-top-width: 1px; border-bottom-width: 1px; border-color: var(--kp-border-meter); } .meter-fill { height: 100%; background-color: var(--kp-text); transition-property: width, background-color; transition-duration: 220ms; } .meter-fill-warning { background-color: var(--kp-warning); } .meter-fill-danger { background-color: var(--kp-danger); } .meter-fill-beneficial { background-color: var(--kp-beneficial); } .cycle-row { margin-top: 2px; margin-bottom: 10px; } .cycle-pips { color: var(--kp-warning); font-size: 17px; -unity-font-style: bold; } .ram-note { color: var(--kp-text-dim); font-size: 11px; margin-bottom: 8px; } .status-section-title { color: var(--kp-text-dim); font-size: 11px; margin-top: 8px; margin-bottom: 5px; } .status-row { flex-direction: row; flex-wrap: wrap; } .status-pip { flex-direction: row; align-items: center; margin-right: 5px; margin-bottom: 5px; padding-left: 5px; padding-right: 5px; padding-top: 2px; padding-bottom: 2px; background-color: var(--kp-bg-deep); border-left-width: 1px; border-right-width: 1px; border-top-width: 1px; border-bottom-width: 1px; border-color: var(--kp-border); } .status-pip-harmful { color: var(--kp-warning); border-color: var(--kp-warning); } .status-pip-beneficial { color: var(--kp-beneficial); border-color: var(--kp-beneficial); } .status-pip-empty { color: var(--kp-text-dim); } .status-tooltip { color: var(--kp-text-dim); font-size: 11px; white-space: normal; margin-bottom: 4px; } .track-zone { flex-grow: 1; min-height: 0; margin-bottom: 8px; padding: 8px; background-color: var(--kp-panel-track); border-left-width: 2px; border-right-width: 1px; border-top-width: 1px; border-bottom-width: 1px; border-color: var(--kp-border); } .track-zone-queue { border-left-color: var(--kp-lang-python); } .track-zone-stack { border-left-color: var(--kp-lang-haskell); } .track-zone-token { border-left-color: var(--kp-lang-go); } .track-header { flex-direction: row; align-items: center; margin-bottom: 6px; } .track-title { color: var(--kp-text); -unity-font-style: bold; flex-grow: 1; } .track-subtitle { color: var(--kp-text-dim); font-size: 11px; } .track-contents { flex-grow: 1; min-height: 36px; flex-direction: row; flex-wrap: wrap; align-items: flex-start; } .empty-state { color: var(--kp-text-dim); font-size: 12px; background-color: var(--kp-empty-fill); padding-left: 8px; padding-right: 8px; padding-top: 5px; padding-bottom: 5px; border-left-width: 2px; border-right-width: 1px; border-top-width: 1px; border-bottom-width: 1px; border-color: var(--kp-border-empty); border-left-color: var(--kp-text-dim); } .card-chip { margin-right: 6px; margin-bottom: 6px; padding-left: 7px; padding-right: 7px; padding-top: 5px; padding-bottom: 5px; background-color: var(--kp-bg-deep); border-left-width: 2px; border-right-width: 1px; border-top-width: 1px; border-bottom-width: 1px; border-color: var(--kp-border); } .card-chip-name { color: var(--kp-text); -unity-font-style: bold; font-size: 12px; } .card-chip-meta { color: var(--kp-text-dim); font-size: 10px; } .enemy-row { flex-direction: row; flex-wrap: wrap; flex-grow: 1; align-content: flex-start; } .enemy-card { width: 132px; min-height: 154px; margin-right: 8px; margin-bottom: 8px; padding: 8px; background-color: var(--kp-panel-raised); border-left-width: 2px; border-right-width: 1px; border-top-width: 1px; border-bottom-width: 1px; border-color: var(--kp-border); color: var(--kp-text); } .enemy-card:hover { border-color: var(--kp-border-strong); } .enemy-card-targeted { border-color: var(--kp-accent); background-color: var(--kp-panel-targeted); } .enemy-name { color: var(--kp-text); -unity-font-style: bold; font-size: 14px; margin-bottom: 7px; white-space: normal; } .enemy-shield { color: var(--kp-beneficial); font-size: 11px; margin-top: 4px; margin-bottom: 4px; } .intent-panel { margin-top: 8px; padding: 6px; background-color: var(--kp-bg-deep); border-left-width: 1px; border-right-width: 1px; border-top-width: 1px; border-bottom-width: 1px; border-color: var(--kp-border-meter); } .intent-label { color: var(--kp-text-dim); font-size: 10px; } .intent-value { -unity-font-style: bold; font-size: 18px; } .intent-attack { color: var(--kp-warning); border-color: var(--kp-warning); } .intent-defend { color: var(--kp-beneficial); border-color: var(--kp-beneficial); } .intent-special { color: var(--kp-accent); border-color: var(--kp-accent); } .hand-row { flex-direction: row; flex-grow: 1; min-height: 0; } .hand-card { width: 158px; min-height: 146px; margin-right: 8px; padding: 8px; background-color: var(--kp-panel-raised); color: var(--kp-text); border-left-width: 2px; border-right-width: 1px; border-top-width: 1px; border-bottom-width: 1px; border-color: var(--kp-border); } .hand-card:hover { border-color: var(--kp-border-strong); background-color: var(--kp-panel-hover); } .hand-card-selected { border-color: var(--kp-accent); background-color: var(--kp-action-hover); } .hand-card-unaffordable { opacity: 0.48; } .hand-card-rare { border-left-color: var(--kp-beneficial); border-right-color: var(--kp-beneficial); border-right-width: 4px; } .hand-card-epic { border-left-color: var(--kp-lang-haskell); border-right-color: var(--kp-lang-haskell); border-right-width: 4px; } .hand-card-legendary { border-left-color: var(--kp-warning); border-right-color: var(--kp-warning); border-right-width: 4px; } .rarity-rare { color: var(--kp-beneficial); border-color: var(--kp-beneficial); } .rarity-epic { color: var(--kp-lang-haskell); border-color: var(--kp-lang-haskell); } .rarity-legendary { color: var(--kp-warning); border-color: var(--kp-warning); } .card-top-row { flex-direction: row; align-items: center; margin-bottom: 6px; } .card-cost { width: 28px; height: 28px; margin-right: 7px; background-color: var(--kp-bg-deep); border-left-width: 1px; border-right-width: 1px; border-top-width: 1px; border-bottom-width: 1px; border-color: var(--kp-warning); color: var(--kp-warning); -unity-text-align: middle-center; -unity-font-style: bold; font-size: 16px; } .card-name { flex-grow: 1; color: var(--kp-text); -unity-font-style: bold; font-size: 14px; white-space: normal; } .tag-row { flex-direction: row; flex-wrap: wrap; margin-bottom: 7px; } .tag { font-size: 10px; padding-left: 5px; padding-right: 5px; padding-top: 2px; padding-bottom: 2px; margin-right: 5px; margin-bottom: 4px; background-color: var(--kp-bg-deep); border-left-width: 1px; border-right-width: 1px; border-top-width: 1px; border-bottom-width: 1px; border-color: var(--kp-border); } .track-tag { color: var(--kp-text-dim); } .language-c { color: var(--kp-lang-c); border-color: var(--kp-lang-c); } .language-cpp { color: var(--kp-lang-cpp); border-color: var(--kp-lang-cpp); } .language-rust { color: var(--kp-lang-rust); border-color: var(--kp-lang-rust); } .language-python { color: var(--kp-lang-python); border-color: var(--kp-lang-python); } .language-javascript { color: var(--kp-lang-javascript); border-color: var(--kp-lang-javascript); } .language-typescript { color: var(--kp-lang-typescript); border-color: var(--kp-lang-typescript); } .language-haskell { color: var(--kp-lang-haskell); border-color: var(--kp-lang-haskell); } .language-assembly { color: var(--kp-lang-assembly); border-color: var(--kp-lang-assembly); } .language-java { color: var(--kp-lang-java); border-color: var(--kp-lang-java); } .language-go { color: var(--kp-lang-go); border-color: var(--kp-lang-go); } .language-ruby { color: var(--kp-lang-ruby); border-color: var(--kp-lang-ruby); } .language-php { color: var(--kp-lang-php); border-color: var(--kp-lang-php); } .card-effect { color: var(--kp-text-dim); white-space: normal; font-size: 11px; flex-grow: 1; } .turn-resource-grid { margin-bottom: 10px; } .turn-stat-row { flex-direction: row; margin-bottom: 4px; } .turn-stat-label { color: var(--kp-text-dim); width: 72px; font-size: 11px; } .turn-stat-value { color: var(--kp-text); -unity-font-style: bold; } .primary-action { height: 44px; background-color: var(--kp-bg-deep); color: var(--kp-text); border-left-width: 2px; border-right-width: 1px; border-top-width: 1px; border-bottom-width: 1px; border-color: var(--kp-accent); -unity-font-style: bold; } .primary-action:hover { background-color: var(--kp-action-hover); } .log-line { color: var(--kp-text-dim); white-space: normal; margin-top: 8px; font-size: 11px; } .overlay { position: absolute; left: 0; right: 0; top: 0; bottom: 0; background-color: var(--kp-overlay); justify-content: center; align-items: center; } .overlay-title { color: var(--kp-warning); -unity-font-style: bold; font-size: 28px; margin-bottom: 10px; } .overlay-line { color: var(--kp-text); margin-bottom: 6px; } .repository { width: 900px; height: 86%; padding: 14px; background-color: var(--kp-panel); border-left-width: 2px; border-right-width: 1px; border-top-width: 1px; border-bottom-width: 1px; border-color: var(--kp-accent); } .repository-header { flex-direction: row; align-items: center; margin-bottom: 8px; } .repository-header-copy { flex-grow: 1; } .repository-wallet { min-width: 132px; padding: 8px; background-color: var(--kp-bg-deep); border-left-width: 2px; border-right-width: 1px; border-top-width: 1px; border-bottom-width: 1px; border-color: var(--kp-accent); } .repository-wallet-value { color: var(--kp-warning); -unity-font-style: bold; font-size: 22px; } .repository-body { flex-grow: 1; min-height: 0; margin-top: 8px; margin-bottom: 10px; } .repository-offers { flex-direction: row; flex-wrap: wrap; margin-bottom: 10px; } .repository-row { margin-bottom: 8px; padding: 8px; background-color: var(--kp-panel-raised); border-left-width: 2px; border-right-width: 1px; border-top-width: 1px; border-bottom-width: 1px; border-color: var(--kp-border); } .repository-tile { width: 270px; min-height: 244px; margin-right: 10px; margin-bottom: 10px; padding: 8px; background-color: var(--kp-panel-raised); border-left-width: 2px; border-right-width: 1px; border-top-width: 1px; border-bottom-width: 1px; border-color: var(--kp-border); } .repository-tile-card { border-left-color: var(--kp-accent); } .repository-tile-upgrade { border-left-color: var(--kp-beneficial); } .repository-tile-stat { border-left-color: var(--kp-warning); min-height: 190px; } .repository-tile-top { flex-direction: row; align-items: center; margin-bottom: 7px; } .repository-kind { color: var(--kp-text-dim); font-size: 11px; flex-grow: 1; } .repository-price { min-width: 46px; padding-left: 7px; padding-right: 7px; padding-top: 3px; padding-bottom: 3px; color: var(--kp-bg); background-color: var(--kp-warning); -unity-font-style: bold; -unity-text-align: middle-center; } .repository-price-warning { color: var(--kp-warning); background-color: var(--kp-bg-deep); border-left-width: 1px; border-right-width: 1px; border-top-width: 1px; border-bottom-width: 1px; border-color: var(--kp-warning); } .repository-name { color: var(--kp-text); -unity-font-style: bold; margin-bottom: 4px; } .repository-description { color: var(--kp-text-dim); white-space: normal; margin-bottom: 6px; } .repository-action { height: 28px; margin-top: 7px; background-color: var(--kp-bg-deep); color: var(--kp-text); border-left-width: 1px; border-right-width: 1px; border-top-width: 1px; border-bottom-width: 1px; border-color: var(--kp-accent); -unity-font-style: bold; } .repository-card-content { flex-grow: 1; } .repository-card-preview { width: 100%; min-height: 154px; margin-right: 0; } .repository-run-only-tag { color: var(--kp-accent); border-color: var(--kp-accent); } .repository-upgrade-content { flex-grow: 1; } .repository-upgrade-card { width: 100%; min-height: 126px; margin-right: 0; opacity: 0.72; } .repository-delta { flex-direction: row; align-items: center; margin-top: 7px; padding: 7px; background-color: var(--kp-bg-deep); border-left-width: 1px; border-right-width: 1px; border-top-width: 1px; border-bottom-width: 1px; border-color: var(--kp-beneficial); } .repository-delta-icon { color: var(--kp-beneficial); -unity-font-style: bold; font-size: 18px; margin-right: 7px; } .repository-delta-text { color: var(--kp-text); white-space: normal; flex-grow: 1; } .repository-stat-content { flex-grow: 1; justify-content: center; } .repository-stat-icon { color: var(--kp-warning); -unity-font-style: bold; font-size: 30px; margin-bottom: 10px; } .repository-footer { flex-direction: row; min-height: 44px; flex-shrink: 0; } .repository-footer-action { width: 210px; margin-right: 8px; } .repository-leave-action { flex-grow: 1; } .repository-leave-block { flex-grow: 1; } .repository-banked-hint { color: var(--kp-text-dim); font-size: 11px; margin-top: 4px; -unity-text-align: middle-center; } .repository-remove { margin-bottom: 2px; padding: 8px; background-color: var(--kp-bg-deep); border-left-width: 1px; border-right-width: 1px; border-top-width: 1px; border-bottom-width: 1px; border-color: var(--kp-border-empty); } .repository-remove-list { flex-direction: row; flex-wrap: wrap; } .repo-remove-button { height: 24px; margin-right: 6px; margin-bottom: 6px; background-color: var(--kp-bg-deep); color: var(--kp-text-dim); border-left-width: 1px; border-right-width: 1px; border-top-width: 1px; border-bottom-width: 1px; border-color: var(--kp-border); } .repo-unaffordable { opacity: 0.45; } .repo-sold { opacity: 0.72; border-color: var(--kp-text-dim); } .feedback-layer { position: absolute; left: 0; right: 0; top: 0; bottom: 0; } .damage-vignette { position: absolute; left: 0; right: 0; top: 0; bottom: 0; opacity: 0; border-left-width: 10px; border-right-width: 10px; border-top-width: 10px; border-bottom-width: 10px; border-color: transparent; transition-property: opacity; transition-duration: 120ms; } .damage-vignette-on { opacity: 0.62; border-color: var(--kp-danger); } .damage-vignette-crit { opacity: 0.82; border-color: var(--kp-kill); } .float-number { position: absolute; min-width: 60px; height: 24px; -unity-text-align: middle-center; -unity-font-style: bold; font-size: 18px; opacity: 1; color: var(--kp-warning); transition-property: top, opacity; transition-duration: 420ms; } .float-damage { color: var(--kp-damage); } .float-heal { color: var(--kp-beneficial); } .float-status { color: var(--kp-status-harmful); } .float-muted { color: var(--kp-text-dim); } .float-kill { color: var(--kp-kill); } .float-large { font-size: 23px; } .float-static { transition-duration: 0ms; } .impact-marker { position: absolute; min-width: 48px; height: 18px; padding-left: 4px; padding-right: 4px; -unity-text-align: middle-center; -unity-font-style: bold; font-size: 10px; opacity: 1; background-color: var(--kp-bg-deep); border-left-width: 1px; border-right-width: 1px; border-top-width: 1px; border-bottom-width: 1px; transition-property: left, opacity; transition-duration: 320ms; } .impact-marker-hit { color: var(--kp-damage); border-color: var(--kp-damage); } .impact-marker-crit { color: var(--kp-kill); border-color: var(--kp-kill); } .impact-marker-clang { color: var(--kp-beneficial); border-color: var(--kp-beneficial); } .feedback-card-ghost { opacity: 0.9; transition-property: left, top, opacity; transition-duration: 260ms; } .feedback-card-route { border-color: var(--kp-accent); } .feedback-card-strike { border-color: var(--kp-damage); } .feedback-card-discard { border-color: var(--kp-text-dim); } .feedback-card-instant { opacity: 0.72; transition-duration: 0ms; } .feedback-hit { background-color: var(--kp-action-hover); border-color: var(--kp-damage); translate: 3px 0; scale: 1.025 0.98; transition-property: scale, translate, background-color, border-color; transition-duration: 90ms; } .feedback-crit { background-color: #2d0707; border-color: var(--kp-kill); translate: 8px 0; scale: 1.08 0.9; transition-property: scale, translate, background-color, border-color; transition-duration: 170ms; } .feedback-clang, .feedback-block { background-color: var(--kp-bg-deep); border-color: var(--kp-beneficial); scale: 1.02 1.02; transition-property: scale, background-color, border-color; transition-duration: 80ms; } .feedback-status { border-color: var(--kp-status-harmful); } .feedback-boost { border-color: var(--kp-beneficial); } .feedback-killed { opacity: 0.28; scale: 0.76 0.28; background-color: #240606; border-color: var(--kp-kill); transition-property: opacity, scale, background-color, border-color; transition-duration: 220ms; } .death-ghost { background-color: #240606; border-left-width: 2px; border-right-width: 1px; border-top-width: 1px; border-bottom-width: 1px; border-color: var(--kp-kill); opacity: 0.74; transition-property: opacity, scale; transition-duration: 220ms; } .enemy-anticipating { border-color: var(--kp-accent); translate: -8px 0; scale: 0.94 1.06; background-color: var(--kp-action-hover); transition-property: translate, scale, border-color, background-color; transition-duration: 170ms; } .enemy-acting { border-color: var(--kp-accent); scale: 1.035 1.035; transition-property: scale, border-color; transition-duration: 120ms; } .status-state-segfault, .status-state-deadlock { opacity: 0.68; border-color: var(--kp-lang-haskell); transition-property: opacity, border-color; transition-duration: 300ms; } .status-state-race { border-color: var(--kp-warning); translate: 1px 0; transition-property: translate, border-color; transition-duration: 120ms; } .status-state-deprecated, .status-state-dependency-error { border-color: var(--kp-text-dim); opacity: 0.76; } .status-state-upgrading { border-color: var(--kp-beneficial); border-right-color: var(--kp-beneficial); border-right-width: 3px; } .phase-pulse { background-color: var(--kp-warning); transition-property: background-color; transition-duration: 120ms; } .cycles-spent-beat { opacity: 0.62; transition-property: opacity; transition-duration: 120ms; } .feedback-denied { border-color: var(--kp-danger); translate: 4px 0; transition-property: translate, border-color; transition-duration: 70ms; } .hand-card-drawn { border-color: var(--kp-beneficial); translate: 0 -8px; transition-property: translate, border-color; transition-duration: 160ms; } .queue-chip-resolve { border-color: var(--kp-warning); scale: 1.06 1.06; transition-property: scale, border-color; transition-duration: 110ms; } .stack-chip-resolve { border-color: var(--kp-lang-haskell); scale: 1.08 1.08; transition-property: scale, border-color; transition-duration: 130ms; } .reduced-motion .float-number, .reduced-motion .impact-marker, .reduced-motion .feedback-card-ghost, .reduced-motion .damage-vignette, .reduced-motion .feedback-hit, .reduced-motion .feedback-crit, .reduced-motion .feedback-clang, .reduced-motion .feedback-killed, .reduced-motion .enemy-anticipating, .reduced-motion .enemy-acting, .reduced-motion .phase-pulse, .reduced-motion .cycles-spent-beat, .reduced-motion .feedback-denied, .reduced-motion .hand-card-drawn, .reduced-motion .queue-chip-resolve, .reduced-motion .stack-chip-resolve, .reduced-motion .death-ghost { transition-duration: 0ms; }