/* ===== Dashboard ===== */ #screen-dashboard { position: fixed; inset: 0; flex-direction: column; padding: max(18px, env(safe-area-inset-top)) 16px 92px; overflow-y: auto; z-index: 20; background: var(--ka-bg-screen); } .dash-open { width: 100%; margin: 14px 0 2px; background: rgba(8,18,28,.7); border: 1px solid rgba(var(--ka-cyan-rgb),.22); color: var(--ka-text-5); font-size: 14px; font-weight: 600; padding: 13px; border-radius: 14px; cursor: pointer; } .dash-top { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; } .dash-back { background: rgba(8,18,28,.55); border: 1px solid rgba(var(--ka-cyan-rgb),.22); color: var(--ka-text-5); font-size: 15px; font-weight: 600; cursor: pointer; padding: 7px 14px; border-radius: 12px; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .dash-title { font-size: 18px; font-weight: 700; color: var(--ka-text-1); } .dash-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; } .dash-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .dcard { position: relative; overflow: hidden; background: linear-gradient(145deg, rgba(var(--ka-cyan-rgb),.10), rgba(153,0,255,.10) 60%, rgba(8,18,28,.55)); border: 1px solid rgba(var(--ka-cyan-rgb),.22); border-radius: 14px; padding: 14px; box-shadow: 0 6px 22px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06); } .dcard::after { content: ''; position: absolute; top: -40%; right: -30%; width: 80px; height: 120px; background: radial-gradient(circle, rgba(var(--ka-cyan-rgb),.20), transparent 70%); pointer-events: none; } .dval { font-family: Orbitron, Inter, sans-serif; font-weight: 700; font-size: 24px; color: var(--ka-text-4); text-shadow: 0 0 16px rgba(var(--ka-cyan-rgb),.55); } .dlabel { font-size: 11px; color: var(--ka-text-6); margin-top: 3px; } .dsection { display: flex; align-items: center; justify-content: space-between; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--ka-text-9); margin: 22px 0 10px; } .dseg { display: flex; gap: 6px; } .dseg-btn { background: rgba(10,30,42,.6); border: 1px solid rgba(var(--ka-cyan-rgb),.2); color: var(--ka-text-8); font-size: 11px; font-weight: 600; padding: 5px 10px; border-radius: 9px; cursor: pointer; text-transform: none; letter-spacing: 0; } .dseg-btn.on { background: var(--ka-surface-active); border-color: var(--ka-cyan); color: var(--ka-text-4); } .dchart { display: flex; align-items: flex-end; gap: 3px; height: 140px; padding: 8px 4px 0; background: rgba(8,18,28,.5); border: 1px solid rgba(var(--ka-cyan-rgb),.12); border-radius: 14px 14px 0 0; } .dbar { flex: 1; min-height: 3px; background: linear-gradient(180deg, var(--ka-cyan), var(--ka-blue)); border-radius: 3px 3px 0 0; transition: height .3s; } .dchart-ax { display: flex; justify-content: space-between; font-size: 10px; color: var(--ka-text-10); padding: 6px 10px; background: rgba(8,18,28,.5); border: 1px solid rgba(var(--ka-cyan-rgb),.12); border-top: 0; border-radius: 0 0 14px 14px; } /* glowing area+line chart (reference dashboard) */ .dline { display: block; width: 100%; height: auto; background: linear-gradient(180deg, rgba(var(--ka-cyan-rgb),.06), rgba(153,0,255,.05)); border: 1px solid rgba(var(--ka-cyan-rgb),.16); border-radius: 14px 14px 0 0; } .dline-stroke { filter: drop-shadow(0 0 5px rgba(var(--ka-cyan-rgb),.65)); } .dpt { fill: var(--ka-text-1); stroke: var(--ka-cyan); stroke-width: 1; filter: drop-shadow(0 0 4px rgba(var(--ka-cyan-rgb),.9)); } /* donut consistency (reference traffic-sources ring) */ .dconsist { display: flex; align-items: center; gap: 18px; background: rgba(8,18,28,.5); border: 1px solid rgba(var(--ka-cyan-rgb),.14); border-radius: 16px; padding: 14px 16px; } .ddonut { width: 104px; height: 104px; flex: 0 0 104px; filter: drop-shadow(0 0 6px rgba(var(--ka-cyan-rgb),.25)); } .ddonut .dseg { transition: stroke-dasharray .4s; } .dconsist-leg { flex: 1; display: flex; flex-direction: column; gap: 9px; } .dleg { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ka-text-2); } .dleg b { margin-left: auto; font-family: Orbitron, Inter, sans-serif; color: var(--ka-text-1); } .dleg-dot { width: 11px; height: 11px; border-radius: 50%; flex: 0 0 11px; box-shadow: 0 0 7px rgba(255,255,255,.25); } .dcards2 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; } .dcard2 { background: rgba(8,18,28,.6); border: 1px solid rgba(var(--ka-cyan-rgb),.14); border-radius: 14px; padding: 12px; text-align: center; min-width: 0; } .dcards-2 { grid-template-columns: 1fr 1fr; } .dcard2 span { display: block; font-size: 12px; color: var(--ka-text-6); margin-bottom: 6px; } .dcard2 b { font-family: Orbitron, Inter, sans-serif; font-size: 20px; color: var(--ka-text-2); } .dnote { font-size: 11px; color: var(--ka-text-11); margin-top: 8px; } .dtree { background: rgba(8,18,28,.6); border: 1px solid rgba(var(--ka-cyan-rgb),.14); border-radius: 14px; padding: 14px; font-size: 13px; color: var(--ka-text-4); } .dnext { display: inline-block; font-size: 11px; font-weight: 500; color: var(--ka-green); background: rgba(var(--ka-green-rgb),.10); border: 1px solid rgba(var(--ka-green-rgb),.22); border-radius: 8px; padding: 3px 10px; margin-top: 9px; line-height: 1.3; } .dbadges { display: flex; flex-wrap: wrap; gap: 8px; } .dbadge { font-size: 12px; color: var(--ka-text-4); background: rgba(18,35,58,.7); border: 1px solid rgba(var(--ka-cyan-rgb),.3); border-radius: 20px; padding: 6px 12px; } /* OT / NT proportion split */ .dsplit { margin-top: 10px; } .dsplit-bar { display: flex; height: 12px; border-radius: 6px; overflow: hidden; background: rgba(8,18,28,.7); border: 1px solid rgba(var(--ka-cyan-rgb),.12); } .dsplit-bar .ot { background: linear-gradient(90deg, var(--ka-blue), var(--ka-cyan)); } .dsplit-bar .nt { background: linear-gradient(90deg, var(--ka-lvl-violet), var(--ka-lvl-pink)); } .dsplit-leg { display: flex; justify-content: space-between; font-size: 11px; color: var(--ka-text-6); margin-top: 7px; } /* per-book Bible breakdown */ .dbooks { display: flex; flex-direction: column; gap: 9px; margin-top: 10px; } .dbook { display: flex; align-items: center; gap: 8px; font-size: 12px; } .dbook-n { flex: 0 0 88px; color: var(--ka-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dbook-n em { font-style: normal; font-size: 9px; color: var(--ka-text-9); border: 1px solid rgba(var(--ka-cyan-rgb),.25); border-radius: 5px; padding: 0 4px; margin-left: 4px; } .dbook-bar { flex: 1 1 auto; min-width: 20px; height: 8px; background: rgba(8,18,28,.7); border-radius: 6px; overflow: hidden; } .dbook-bar > span { display: block; height: 100%; background: linear-gradient(90deg, var(--ka-cyan), var(--ka-blue)); border-radius: 6px; } .dbook-v { flex: 0 0 72px; text-align: right; color: var(--ka-text-7); white-space: nowrap; } /* ===== Word / Bible reader ===== */ #screen-word { position: fixed; inset: 0; flex-direction: column; padding: max(18px, env(safe-area-inset-top)) 16px max(18px, env(safe-area-inset-bottom)); z-index: 22; background: var(--ka-bg-screen); } .wd-top { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; } .wd-title { flex: 1; font-size: 18px; font-weight: 700; color: var(--ka-text-1); } .wd-timer { font-family: Orbitron, Inter, sans-serif; font-size: 14px; color: var(--ka-cyan); } .wd-controls { display: flex; gap: 8px; margin-bottom: 12px; } .wd-sel { flex: 1; background: rgba(8,18,28,.8); border: 1px solid rgba(var(--ka-cyan-rgb),.22); color: var(--ka-text-2); font-size: 14px; font-weight: 600; padding: 10px; border-radius: 12px; -webkit-appearance: none; appearance: none; cursor: pointer; } .wd-sel.wd-ch { flex: 0 0 92px; } .wd-nav { flex: 0 0 44px; background: rgba(8,18,28,.8); border: 1px solid rgba(var(--ka-cyan-rgb),.22); color: var(--ka-text-5); font-size: 20px; border-radius: 12px; cursor: pointer; } .wd-plan { font-size: 12px; color: var(--ka-text-8); background: rgba(8,18,28,.5); border: 1px solid rgba(var(--ka-cyan-rgb),.12); border-radius: 12px; padding: 10px 12px; margin-bottom: 12px; line-height: 1.5; } .wd-plan b { color: var(--ka-text-4); } .wd-passage { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 4px 2px 16px; } .wd-ref { font-family: Orbitron, Inter, sans-serif; font-size: 17px; color: var(--ka-cyan); margin-bottom: 14px; } .wd-v { font-family: var(--font-serif, Georgia, serif); font-size: 18px; line-height: 1.7; color: var(--ka-text-3); margin-bottom: 9px; } .wd-vn { font-family: Inter, sans-serif; font-size: 11px; font-weight: 700; color: var(--ka-text-9); vertical-align: super; margin-right: 5px; } .wd-trans { font-size: 11px; color: var(--ka-text-11); margin-top: 14px; } .wd-loading, .wd-err { text-align: center; color: var(--ka-text-8); font-size: 14px; padding: 40px 12px; line-height: 1.7; } .wd-retry { margin-top: 12px; background: var(--ka-surface); border: 1px solid var(--ka-cyan); color: var(--ka-text-4); font-size: 13px; font-weight: 600; padding: 8px 18px; border-radius: 10px; cursor: pointer; } .wd-done { width: 100%; margin-top: 10px; background: var(--ka-surface); border: 1.5px solid var(--ka-cyan); color: var(--ka-text-4); font-size: 15px; font-weight: 600; padding: 14px; border-radius: 14px; cursor: pointer; } .wd-done:disabled { background: rgba(8,18,28,.6); border-color: rgba(var(--ka-cyan-rgb),.18); color: var(--ka-text-10); cursor: default; } /* ===== Ministry / Kingdom Channels (look ported 1:1 from the GKC website hero) ===== */ #screen-ministry { position: fixed; inset: 0; flex-direction: column; padding: max(18px, env(safe-area-inset-top)) 16px max(18px, env(safe-area-inset-bottom)); z-index: 22; background: var(--ka-bg-screen); } .mn-scroll { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; margin: 0 -2px; } .mn-hint { font-size: 12px; color: var(--ka-text-8); line-height: 1.55; margin: 14px 6px 4px; } .yt-channels-header { display: flex; align-items: baseline; gap: 12px; margin: 4px 2px 16px; border-bottom: 2px solid var(--ka-yt-red); padding-bottom: 9px; } .yt-channels-label { font-size: 11px; font-weight: 800; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ka-yt-red); } .yt-channels-title { font-size: 18px; font-weight: 900; letter-spacing: -0.01em; color: #fff; } .yt-channels-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; } .yt-ch-card { position: relative; display: flex; flex-direction: column; text-decoration: none; color: inherit; overflow: hidden; cursor: default; background: var(--ka-bg-void); aspect-ratio: 16/11; border-radius: 4px; } .yt-ch-card.has-link { cursor: pointer; } .yt-ch-thumb { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; transition: transform 0.35s cubic-bezier(.25,.46,.45,.94); } .yt-ch-card.has-link:hover .yt-ch-thumb { transform: scale(1.06); } .yt-ch-emoji { font-size: 30px; filter: drop-shadow(0 4px 16px rgba(0,0,0,0.6)); transition: transform 0.3s; } .yt-ch-card.has-link:hover .yt-ch-emoji { transform: scale(1.12); } .yt-ch-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.15) 40%, rgba(0,0,0,0.82) 80%, rgba(0,0,0,0.95) 100%); pointer-events: none; } .yt-ch-stripe { position: absolute; top: 0; left: 0; right: 0; height: 3px; } .yt-ch-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -60%); width: 38px; height: 38px; background: rgba(204,0,0,0.85); border-radius: 50%; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.25s, transform 0.25s; pointer-events: none; } .yt-ch-play::after { content: ''; display: block; width: 0; height: 0; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-left: 13px solid #fff; margin-left: 3px; } .yt-ch-card.has-link:hover .yt-ch-play { opacity: 1; transform: translate(-50%, -60%) scale(1.1); } .yt-ch-info { position: absolute; bottom: 0; left: 0; right: 0; padding: 7px 8px; z-index: 2; } .yt-ch-tag { font-size: 7px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: #fff; opacity: 0.55; margin-bottom: 2px; display: block; } .yt-ch-name { font-size: 11px; font-weight: 800; color: #fff; line-height: 1.18; letter-spacing: -0.01em; display: block; } .yt-ch-cta { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; font-size: 8px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ka-yt-red-2); opacity: 0; transform: translateY(4px); transition: opacity 0.2s, transform 0.2s; } .yt-ch-card.has-link:hover .yt-ch-cta { opacity: 1; transform: translateY(0); } .yt-ch-card:not(.has-link) .yt-ch-thumb { opacity: 0.45; } .yt-ch-card:not(.has-link) .yt-ch-tag { color: rgba(255,255,255,0.35); } .yt-ch-card:not(.has-link) .yt-ch-name { opacity: 0.45; } .yt-ch-coming { display: none; position: absolute; top: 8px; right: 8px; font-size: 7px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15); color: rgba(255,255,255,0.4); padding: 3px 6px; border-radius: 4px; } .yt-ch-card:not(.has-link) .yt-ch-coming { display: block; } /* dashboard per-channel list — wider name column (channel names are long, values short) */ .dbooks-ch .dbook-n { flex-basis: 128px; } .dbooks-ch .dbook-v { flex-basis: 36px; } /* ===== Messenger ===== */ #screen-messages { position: fixed; inset: 0; flex-direction: column; padding: max(18px, env(safe-area-inset-top)) 0 0; z-index: 23; background: var(--ka-bg-screen); } #screen-messages .wd-top { padding: 0 16px; margin-bottom: 8px; } .msg-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 6px 12px; } .msg-empty { text-align: center; color: var(--ka-text-8); font-size: 14px; line-height: 1.7; padding: 48px 18px; } .msg-empty b { color: var(--ka-text-4); } /* conversation list */ .msg-list { display: flex; flex-direction: column; } .msg-conv { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: transparent; border: 0; border-bottom: 1px solid rgba(var(--ka-cyan-rgb),.08); padding: 12px 6px; cursor: pointer; } .msg-conv .mring { width: 44px; height: 44px; border-radius: 50%; flex: 0 0 44px; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; color: var(--ka-text-5); background: var(--ka-bg-ring); position: relative; overflow: hidden; } .mc-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; } .mc-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; } .mc-name { font-size: 14px; font-weight: 600; color: var(--ka-text-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mc-time { font-size: 11px; color: var(--ka-text-10); flex: 0 0 auto; } .mc-last { font-size: 13px; color: var(--ka-text-7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mc-last.unread { color: var(--ka-text-2); font-weight: 600; } .mc-dot { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; background: var(--ka-cyan); box-shadow: 0 0 8px rgba(var(--ka-cyan-rgb),.7); } /* thread bubbles */ .msg-thread { display: flex; flex-direction: column; gap: 8px; padding: 8px 2px 14px; } .bubble { max-width: 80%; padding: 9px 13px 7px; border-radius: 16px; font-size: 14px; line-height: 1.45; position: relative; word-wrap: break-word; } .bubble.theirs { align-self: flex-start; background: var(--ka-bubble); border: 1px solid rgba(var(--ka-cyan-rgb),.12); color: var(--ka-text-3); border-bottom-left-radius: 5px; } .bubble.mine { align-self: flex-end; background: linear-gradient(135deg, var(--ka-surface-3), var(--ka-surface-active)); color: var(--ka-text-1); border-bottom-right-radius: 5px; } .b-time { display: block; font-size: 9px; opacity: .55; margin-top: 3px; text-align: right; } /* composer */ .msg-composer { display: flex; gap: 8px; padding: 10px 12px max(12px, env(safe-area-inset-bottom)); border-top: 1px solid rgba(var(--ka-cyan-rgb),.12); background: rgba(5,8,14,.95); } .msg-input { flex: 1; background: rgba(8,18,28,.9); border: 1px solid rgba(var(--ka-cyan-rgb),.25); color: var(--ka-text-1); font-size: 16px; /* ≥16px — prevent iOS zoom */ padding: 11px 14px; border-radius: 22px; outline: none; } .msg-input:focus { border-color: var(--ka-cyan); box-shadow: 0 0 0 3px rgba(var(--ka-cyan-rgb),.1); } .msg-send { flex: 0 0 44px; height: 44px; border-radius: 50%; background: var(--ka-surface); border: 1.5px solid var(--ka-cyan); color: var(--ka-text-4); font-size: 16px; cursor: pointer; } /* entry button badge + person-card message button */ .msg-badge { display: inline-flex; min-width: 18px; height: 18px; padding: 0 5px; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: var(--ka-bg-tag); background: var(--ka-cyan); border-radius: 9px; vertical-align: middle; } .pc-btnrow { display: flex; gap: 8px; margin: 4px 0 12px; } .pc-msg { flex: 1; background: var(--ka-surface); border: 1.5px solid var(--ka-cyan); color: var(--ka-text-4); font-size: 13px; font-weight: 600; padding: 11px 8px; border-radius: 12px; cursor: pointer; } .pc-lead { flex: 1; background: rgba(8,18,28,.7); border: 1px solid rgba(var(--ka-warn-rgb),.4); color: var(--ka-warn); font-size: 13px; font-weight: 600; padding: 11px 8px; border-radius: 12px; cursor: pointer; } .pc-lead.on { background: var(--ka-surface-gold); border-color: var(--ka-warn); color: var(--ka-warn-3); } .you.ready { background: rgba(var(--ka-warn-rgb),.15); color: var(--ka-warn-2); border-color: rgba(var(--ka-warn-rgb),.45); } /* ===== Map mode (Leaflet + OpenStreetMap) ===== */ #screen-map { position: fixed; inset: 0; z-index: 24; background: var(--ka-map-bg); } #map-canvas { position: absolute; inset: 0; width: 100%; height: 100%; background: var(--ka-map-bg); } .leaflet-container { background: var(--ka-map-bg); font-family: Inter, system-ui, sans-serif; } .map-back { position: absolute; top: max(14px, env(safe-area-inset-top)); left: 14px; z-index: 1000; background: rgba(5,8,14,.85); border: 1px solid rgba(var(--ka-cyan-rgb),.3); color: var(--ka-text-5); font-size: 15px; font-weight: 600; padding: 9px 15px; border-radius: 12px; cursor: pointer; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .map-ctrl { position: absolute; left: 50%; transform: translateX(-50%); bottom: max(18px, env(safe-area-inset-bottom)); z-index: 1000; background: rgba(5,8,14,.9); border: 1px solid rgba(var(--ka-cyan-rgb),.25); border-radius: 16px; padding: 10px 12px; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); width: min(92%, 380px); } .map-ctrl-title { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--ka-text-9); margin-bottom: 8px; text-align: center; } .map-ctrl-row { display: flex; gap: 8px; } .map-seg { flex: 1; background: rgba(8,18,28,.85); border: 1px solid rgba(var(--ka-cyan-rgb),.25); color: var(--ka-text-5); font-size: 13px; font-weight: 600; padding: 10px; border-radius: 11px; cursor: pointer; } .map-seg.on { background: var(--ka-surface-gold); border-color: var(--ka-warn); color: var(--ka-warn-3); } .map-search { display: flex; gap: 8px; margin-top: 8px; } .map-addr { flex: 1; background: rgba(8,18,28,.9); border: 1px solid rgba(var(--ka-cyan-rgb),.25); color: var(--ka-text-1); font-size: 16px; /* ≥16px — prevent iOS zoom */ padding: 10px 12px; border-radius: 11px; outline: none; } .map-addr:focus { border-color: var(--ka-cyan); } .map-addr-go { flex: 0 0 44px; background: var(--ka-surface); border: 1.5px solid var(--ka-cyan); color: var(--ka-text-4); font-size: 15px; border-radius: 11px; cursor: pointer; } .map-results { display: none; flex-direction: column; gap: 5px; max-height: 38vh; overflow-y: auto; margin-bottom: 9px; } .map-results.show { display: flex; } .map-res { text-align: left; background: rgba(8,18,28,.85); border: 1px solid rgba(var(--ka-cyan-rgb),.18); color: var(--ka-text-2); font-size: 12px; line-height: 1.4; padding: 9px 11px; border-radius: 10px; cursor: pointer; } .map-res:hover { border-color: var(--ka-cyan); background: var(--ka-surface-2); } .map-res-msg { font-size: 12px; color: var(--ka-text-8); text-align: center; padding: 12px; } /* neon KG markers */ .kgm-icon { background: none; border: 0; } .kgm-dot { display: block; border-radius: 50%; background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.7), var(--c) 60%); border: 2px solid #fff; box-shadow: 0 0 0 1.5px rgba(8,18,40,.55), 0 2px 6px rgba(0,0,0,.35), 0 0 8px var(--c); } .kgm-v { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 10px; } /* dark popups */ .leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--ka-bg-popup); color: var(--ka-text-3); border: 1px solid rgba(var(--ka-cyan-rgb),.25); box-shadow: 0 6px 24px rgba(0,0,0,.5); } .leaflet-popup-content { margin: 11px 13px; } .kgm-pop-name { font-weight: 700; color: var(--ka-text-1); font-size: 14px; } .kgm-you { font-size: 10px; color: var(--ka-bg-tag); background: var(--ka-cyan); border-radius: 6px; padding: 1px 5px; font-weight: 700; vertical-align: middle; } .kgm-pop-sub { font-size: 12px; color: var(--ka-text-6); margin-top: 3px; } .kgm-pop-mode { font-size: 12px; color: var(--ka-green); margin-top: 4px; } .kgm-pop-btns { display: flex; gap: 6px; margin-top: 9px; flex-wrap: wrap; } .kgm-pop-open { background: var(--ka-surface); border: 1px solid var(--ka-cyan); color: var(--ka-text-4); font-size: 12px; font-weight: 600; padding: 7px 12px; border-radius: 9px; cursor: pointer; } .kgm-pop-edit { background: rgba(8,18,28,.85); border: 1px solid rgba(var(--ka-warn-rgb),.5); color: var(--ka-warn); font-size: 12px; font-weight: 600; padding: 7px 12px; border-radius: 9px; cursor: pointer; } .leaflet-container a.leaflet-popup-close-button { color: var(--ka-text-5); } .leaflet-control-zoom a { background: rgba(5,8,14,.9); color: var(--ka-text-5); border-color: rgba(var(--ka-cyan-rgb),.25); } .leaflet-control-attribution { background: rgba(5,8,14,.7); color: var(--ka-text-8); } .leaflet-control-attribution a { color: var(--ka-text-5); } /* ===== Raise a leader / plant chooser ===== */ .pp-lead { font-size: 13px; color: var(--ka-text-6); line-height: 1.5; margin-bottom: 14px; } .pp-list { max-height: 42vh; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; } .pp-row { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 12px; border: 1px solid rgba(var(--ka-cyan-rgb),.12); background: rgba(8,18,28,.5); cursor: pointer; } .pp-row.ready { border-color: rgba(var(--ka-warn-rgb),.4); } .pp-row.chosen { border-color: var(--ka-cyan); background: var(--ka-surface-2); box-shadow: inset 0 0 0 1px var(--ka-cyan); } .pp-pick { width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(var(--ka-cyan-rgb),.4); flex: 0 0 auto; transition: all .15s; } .pp-row.chosen .pp-pick { background: var(--ka-cyan); border-color: var(--ka-cyan); box-shadow: 0 0 8px rgba(var(--ka-cyan-rgb),.6); } .pp-row .mring { width: 40px; height: 40px; border-radius: 50%; flex: 0 0 40px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; color: var(--ka-text-5); background: var(--ka-bg-ring); position: relative; overflow: hidden; } .pp-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .pp-name { font-size: 14px; font-weight: 600; color: var(--ka-text-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pp-star { color: var(--ka-warn-2); } .pp-lvl { font-size: 11px; color: var(--ka-text-7); } .pp-bring { flex: 0 0 32px; width: 32px; height: 32px; border-radius: 50%; background: rgba(8,18,28,.85); border: 1px solid rgba(var(--ka-cyan-rgb),.3); color: var(--ka-text-5); font-size: 18px; line-height: 1; cursor: pointer; } .pp-bring.on { background: var(--ka-surface-3); border-color: var(--ka-cyan); color: var(--ka-text-4); } .pp-bring.hidden { visibility: hidden; } .pp-name-in { margin-bottom: 10px; } .pp-dayrow { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; } .pp-daylabel { font-size: 12px; color: var(--ka-text-6); } /* ===== Prayer Session ===== */ .prayer { position: fixed; inset: 0; z-index: 80; display: none; align-items: center; justify-content: center; background: var(--ka-bg-void); overflow: hidden; } .prayer.open { display: flex; } .prayer-bg { position: absolute; inset: -20%; background: radial-gradient(circle at 50% 45%, rgba(22,110,200,0.30), rgba(2,6,12,0) 60%); opacity: 0; } .prayer-bg.on { animation: prayer-pulse 7s ease-in-out infinite; } @keyframes prayer-pulse { 0%, 100% { opacity: 0.35; transform: scale(1); } 50% { opacity: 0.8; transform: scale(1.12); } } .prayer-inner { position: relative; z-index: 1; width: 100%; max-width: 460px; padding: 24px 22px max(24px, env(safe-area-inset-bottom)); text-align: center; } .prayer-close { position: absolute; top: 6px; right: 14px; background: transparent; border: 0; color: var(--ka-text-9); font-size: 28px; line-height: 1; cursor: pointer; } .prayer-kicker { font-family: Orbitron, Inter, sans-serif; font-size: 13px; letter-spacing: 5px; color: var(--ka-text-9); } .prayer-timer { font-family: Orbitron, Inter, sans-serif; font-weight: 700; font-size: 56px; color: var(--ka-cyan); text-shadow: 0 0 26px rgba(var(--ka-cyan-rgb),.5); margin: 6px 0 2px; } .prayer-min { font-size: 12px; color: var(--ka-text-8); margin-bottom: 22px; } .prayer-min.reached { color: var(--ka-green); } .prayer-verse { min-height: 132px; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 10px; font-family: var(--font-serif, Georgia, serif); font-size: 18px; line-height: 1.55; color: var(--ka-text-3); transition: opacity .5s; padding: 0 6px; } .prayer-verse .pv-text { display: block; text-align: center; } .prayer-verse .pv-ref { font-family: Inter, sans-serif; font-size: 12px; letter-spacing: 1px; color: var(--ka-text-9); } .prayer-controls { margin: 22px 0 18px; display: flex; flex-direction: column; gap: 10px; } .pc-row { display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--ka-text-6); } .pc-row > span:first-child { width: 92px; text-align: left; } .pc-row input[type=range] { flex: 1; accent-color: var(--ka-cyan); } .pc-freqval { width: 36px; text-align: right; color: var(--ka-cyan); font-size: 12px; } .pc-toggle { background: rgba(10,30,42,.6); border: 1px solid rgba(var(--ka-cyan-rgb),.25); color: var(--ka-text-8); font-size: 12px; font-weight: 600; padding: 6px 14px; border-radius: 10px; cursor: pointer; } .pc-toggle.on { background: var(--ka-surface-active); border-color: var(--ka-cyan); color: var(--ka-text-4); } .prayer-actions { display: flex; gap: 10px; } .prayer-btn { flex: 1; padding: 13px; border-radius: 14px; font-size: 14px; font-weight: 600; cursor: pointer; background: transparent; border: 1px solid rgba(var(--ka-cyan-rgb),.4); color: var(--ka-text-5); } .prayer-btn.primary { background: var(--ka-surface); border: 1.5px solid var(--ka-cyan); color: var(--ka-text-4); } /* ===== Giving ===== */ .give-msg { font-size: 14px; color: var(--ka-text-3); line-height: 1.6; margin-bottom: 12px; } .give-verse { font-family: var(--font-serif, Georgia, serif); font-size: 13px; color: var(--ka-text-6); line-height: 1.55; font-style: italic; margin-bottom: 16px; } .give-actions { display: flex; gap: 10px; } * { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; } html, body { height: 100%; overflow: hidden; background: var(--ka-bg); } body { font-family: Inter, system-ui, sans-serif; color: var(--ka-text-2); -webkit-user-select: none; user-select: none; position: relative; } /* Remove 300ms tap delay + iOS callout on all interactive elements */ button, a, input, select, textarea, label, .ic, .dpad-b, .tog, .day, .mk-btn, .plant-btn, .td-link, .auth-go, .auth-alt, .auth-forgot, .dir-row, .tm-card, .act, .ec-tab, .nt-tab-btn, .cl-row, .jrn-ptab, .nav-btn { touch-action: manipulation; } button, .ic, .dpad-b, a { -webkit-touch-callout: none; } /* GKC website background — abyss + animated blue/violet/cyan plasma mesh + fine noise */ body::before { content: ''; position: fixed; inset: 0; z-index: -2; pointer-events: none; background: radial-gradient(ellipse 80% 60% at 15% 20%, rgba(0,85,255,0.18) 0%, transparent 65%), radial-gradient(ellipse 70% 50% at 85% 75%, rgba(102,0,204,0.20) 0%, transparent 60%), radial-gradient(ellipse 50% 40% at 50% 50%, rgba(0,204,255,0.07) 0%, transparent 70%), var(--ka-bg); animation: plasma-drift 18s ease-in-out infinite alternate; } body::after { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0.4; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E"); background-size: 200px 200px; } @keyframes plasma-drift { 0% { background-position: 0% 0%, 100% 100%, 50% 50%; } 100% { background-position: 30% 20%, 70% 80%, 60% 40%; } } input { font-family: inherit; } #stage { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; touch-action: none; cursor: grab; } #stage:active { cursor: grabbing; } /* PLANT button — DOM pill under the expanded leader; positioned each frame by map.js. pointer-events:none so taps fall through to the canvas hit-zone (plantBannerZone). */ #plant-cta { position: fixed; z-index: 18; transform: translateX(-50%); display: inline-flex; align-items: center; justify-content: center; padding: 4px 14px; border: 1px solid rgba(160,245,255,.45); border-radius: 999px; font: 800 12px/1 Inter, system-ui, -apple-system, sans-serif; letter-spacing: .04em; color: #042630; white-space: nowrap; pointer-events: none; background: linear-gradient(180deg, #4fe6ff, #12b9dc); box-shadow: 0 0 15px rgba(22,224,255,.5), 0 2px 7px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.45); text-shadow: 0 1px 1px rgba(200,250,255,.35); } #plant-cta[hidden] { display: none; } /* Leader avatar — circular DOM image over the expanded leader; positioned each frame by map.js. */ #leader-av { position: fixed; z-index: 16; transform: translate(-50%, -50%); border-radius: 50%; background-size: cover; background-position: center top; background-repeat: no-repeat; pointer-events: none; } #leader-av[hidden] { display: none; } #plant-cta.locked { background: linear-gradient(180deg, #2c5966, #1f4552); color: rgba(230,248,255,.9); border-color: rgba(160,245,255,.22); box-shadow: 0 2px 8px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.15); text-shadow: none; opacity: .92; } /* view visibility */ #hud { position: fixed; inset: 0; pointer-events: none; } #hud button, #hud a, #id-gauge { pointer-events: auto; } body:not(.view-tree) #hud { display: none; } #screen-mykg, #screen-today, #screen-dashboard, #screen-word, #screen-ministry, #screen-messages, #screen-map, #screen-directory, #screen-team, #screen-profile, #screen-clusters, #screen-constellations, #screen-nations, #screen-journey { display: none; } body.view-team #screen-team { display: flex; } body.view-team #nav { display: none; } body.view-profile #screen-profile { display: flex; } body.view-profile #nav { display: none; } body.view-directory #screen-directory { display: flex; } body.view-directory #nav { display: none; } body.view-mykg #screen-mykg { display: flex; } body.view-today #screen-today { display: flex; } body.view-dashboard #screen-dashboard { display: flex; } body.view-word #screen-word { display: flex; } body.view-ministry #screen-ministry { display: flex; } body.view-messages #screen-messages { display: flex; } body.view-map #screen-map { display: block; } body.view-word #nav, body.view-ministry #nav, body.view-messages #nav, body.view-map #nav { display: none; } /* immersive — return via Back */ /* content screens share the GKC plasma background (Map mode stays bright — see below) */ #screen-today, #screen-dashboard, #screen-mykg, #screen-word, #screen-ministry, #screen-messages, #screen-team, #screen-profile { background: radial-gradient(ellipse 80% 55% at 12% 8%, rgba(0,85,255,0.16) 0%, transparent 60%), radial-gradient(ellipse 75% 55% at 90% 90%, rgba(102,0,204,0.18) 0%, transparent 60%), radial-gradient(ellipse 60% 45% at 55% 50%, rgba(0,204,255,0.06) 0%, transparent 70%), var(--ka-bg); } /* ── aqua screen frame ── all full-screen panels get a neon inset border */ #screen-today, #screen-dashboard, #screen-mykg, #screen-word, #screen-ministry, #screen-messages, #screen-map, #screen-directory, #screen-team, #screen-profile { box-shadow: inset 0 0 0 1.5px rgba(var(--ka-cyan-rgb),.32), inset 0 0 60px rgba(var(--ka-cyan-rgb),.04); } /* identity */ .hud-tl { position: fixed; top: max(12px, env(safe-area-inset-top)); left: 12px; display: flex; align-items: center; background: linear-gradient(150deg, rgba(30,130,210,.26), rgba(130,50,210,.22) 55%, rgba(7,14,28,.9)); border: 1.5px solid rgba(125,212,255,.7); border-radius: 18px; padding: 7px 15px 7px 8px; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 8px 24px rgba(0,0,0,.55), 0 0 26px rgba(50,150,255,.28), inset 0 1px 0 rgba(255,255,255,.14); } .hud-id { display: flex; align-items: center; gap: 11px; } .hud-next { position: fixed; top: calc(max(12px, env(safe-area-inset-top)) + 58px); left: 12px; max-width: 86vw; font-size: 10.5px; font-weight: 500; color: var(--ka-green-text); background: linear-gradient(150deg, rgba(var(--ka-green-rgb),.12), rgba(153,0,255,.06) 70%, rgba(8,18,30,.6)); border: 1.5px solid rgba(var(--ka-green-rgb),.5); border-radius: 13px; padding: 5px 13px; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 6px 18px rgba(2,4,12,.45), inset 0 1px 0 rgba(255,255,255,.08); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hud-next:empty { display: none; } .avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--ka-bg-ring); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 13px; color: var(--ka-text-5); border: 2.5px solid var(--ka-blue); position: relative; overflow: hidden; } /* photo overlay — sits over the initials, clipped to the circular avatar */ .av-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; } .mring, .pc-ring, .td-ring { position: relative; overflow: hidden; } .who { flex: 1; min-width: 0; } .who-name { font-size: 14.5px; font-weight: 600; color: var(--ka-text-1); line-height: 1.12; letter-spacing: -0.2px; } .who-level { font-size: 10.5px; font-weight: 500; color: var(--ka-text-6); line-height: 1.3; margin-top: 2px; letter-spacing: 0.3px; } .who-next { display: inline-block; margin-left: 51px; max-width: min(300px, calc(100vw - 80px)); font-size: 10.5px; font-weight: 500; color: var(--ka-green); background: rgba(var(--ka-green-rgb),.10); border: 1px solid rgba(var(--ka-green-rgb),.22); border-radius: 8px; padding: 3px 9px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .who-next:empty { display: none; } /* score */ .hud-tr { position: fixed; top: max(12px, env(safe-area-inset-top)); right: 12px; text-align: right; background: linear-gradient(150deg, rgba(30,130,210,.26), rgba(130,50,210,.22) 55%, rgba(7,14,28,.9)); border: 1.5px solid rgba(125,212,255,.7); border-radius: 18px; padding: 7px 15px 8px; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 8px 24px rgba(0,0,0,.55), 0 0 26px rgba(50,150,255,.28), inset 0 1px 0 rgba(255,255,255,.14); } .score-label { font-size: 8.5px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--ka-text-8); } .score-num { font-family: Orbitron, Inter, sans-serif; font-weight: 700; font-size: 28px; color: var(--ka-cyan); line-height: 1.04; text-shadow: 0 0 18px rgba(var(--ka-cyan-rgb),.65); } .score-sub { font-size: 10px; color: var(--ka-text-8); margin-top: 1px; } /* legibility scrims — darken top & bottom so HUD text reads over the busy map */ .scrim { position: fixed; left: 0; right: 0; pointer-events: none; } #scrim-top { top: 0; height: 150px; background: linear-gradient(var(--ka-bg), rgba(4,6,10,0)); } #scrim-bottom { bottom: 0; height: 260px; background: linear-gradient(rgba(4,6,10,0), var(--ka-bg) 78%); } /* consolidated bottom info card */ .bottombar { position: fixed; left: 50%; transform: translateX(-50%); bottom: 142px; width: min(92vw, 420px); text-align: center; background: rgba(5,11,19,0.72); backdrop-filter: blur(8px); border: 1px solid rgba(var(--ka-cyan-rgb),0.16); border-radius: 14px; padding: 9px 14px; } .sel-name { display: block; font-size: 13px; font-weight: 600; color: var(--ka-text-5); } .sel-meta { display: block; font-size: 11px; color: var(--ka-text-8); margin-top: 2px; } .sel-meta a { color: var(--ka-cyan); text-decoration: none; } .bb-next { font-size: 11px; color: var(--ka-text-7); margin-top: 6px; padding-top: 6px; border-top: 1px solid rgba(var(--ka-cyan-rgb),0.1); } .bb-next:empty { display: none; } .bb-sel:empty { display: none; } body.deep-zoom #bottombar { display: none !important; } /* floating KG label that tracks the selected node */ .kglabel { position: fixed; left: 0; top: 0; transform: translateX(-50%); display: none; text-align: center; max-width: 78vw; padding: 7px 13px; border-radius: 12px; background: rgba(5,12,20,0.66); border: 1px solid rgba(var(--ka-cyan-rgb),0.22); backdrop-filter: blur(12px) saturate(1.4); -webkit-backdrop-filter: blur(12px) saturate(1.4); pointer-events: none; z-index: 25; } .kglabel.show { display: block; } .kgl-name { font-size: 13px; font-weight: 600; color: var(--ka-text-5); } .kgl-cluster { font-family: Orbitron, Inter, system-ui, sans-serif; font-size: 14px; font-weight: 700; color: var(--ka-cyan); letter-spacing: .04em; } .kgl-sub { font-size: 11px; color: var(--ka-text-8); margin-top: 1px; } .kgl-meet { font-size: 11px; color: var(--ka-text-6); margin-top: 3px; } .kgl-meet b { color: var(--ka-text-2); font-weight: 600; } .kglabel a { pointer-events: auto; color: var(--ka-cyan); text-decoration: none; font-weight: 600; white-space: nowrap; } .kglabel a:hover { text-shadow: 0 0 10px rgba(var(--ka-cyan-rgb),.6); } .kgl-ready { color: var(--ka-green); font-weight: 600; } .kgl-addmember { margin-top: 7px; display: block; width: 100%; background: rgba(var(--ka-cyan-rgb),.12); border: 1px solid rgba(var(--ka-cyan-rgb),.45); border-radius: 8px; color: var(--ka-cyan); font-size: 12px; font-weight: 600; padding: 6px 10px; cursor: pointer; letter-spacing: .03em; transition: background .15s; } .kgl-addmember:hover { background: rgba(var(--ka-cyan-rgb),.22); } /* ===== Member Picker sheet ===== */ .mpick-overlay { position: fixed; inset: 0; background: rgba(2,6,16,.7); z-index: 70; display: flex; align-items: flex-end; opacity: 0; pointer-events: none; transition: opacity .22s; } .mpick-overlay.open { opacity: 1; pointer-events: auto; } .mpick-sheet { width: 100%; max-height: 72vh; background: var(--ka-bg-card); border-top: 1px solid rgba(var(--ka-cyan-rgb),.3); border-radius: 18px 18px 0 0; display: flex; flex-direction: column; transform: translateY(100%); transition: transform .25s cubic-bezier(.32,1.2,.5,1); } .mpick-overlay.open .mpick-sheet { transform: translateY(0); } .mpick-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px 10px; border-bottom: 1px solid rgba(var(--ka-cyan-rgb),.12); flex-shrink: 0; } .mpick-title { font-family: Orbitron, Inter, system-ui, sans-serif; font-size: 13px; font-weight: 700; color: var(--ka-cyan); letter-spacing: .06em; } .mpick-close { background: none; border: none; color: var(--ka-text-8); font-size: 17px; cursor: pointer; padding: 2px 6px; } .mpick-section-head { font-size: 10px; font-weight: 700; letter-spacing: .1em; color: var(--ka-text-11); text-transform: uppercase; padding: 8px 18px 4px; flex-shrink: 0; } .mpick-pending-wrap { flex-shrink: 0; } .mpick-pending-wrap.hidden { display: none; } .mpick-list { overflow-y: auto; flex: 1; padding: 4px 12px 16px; display: flex; flex-wrap: wrap; gap: 8px; align-content: flex-start; } /* seeker cards inside picker reuse .ht-card styles but are smaller */ .mpick-list .ht-card, .mpick-pending .ht-card { min-width: 88px; } .mpick-empty { color: var(--ka-text-11); font-size: 13px; padding: 20px 0; text-align: center; width: 100%; } .mpick-pending { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 12px 8px; } /* invited ghost state in the picker */ .ht-invite.cancel-invite { background: rgba(255,80,80,.1); border-color: rgba(255,80,80,.4); color: var(--ka-error-mid); } /* level-up celebration */ .levelup { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(2,6,12,0.62); opacity: 0; pointer-events: none; transition: opacity .3s; z-index: 60; } .levelup.show { opacity: 1; pointer-events: auto; } .lu-card { text-align: center; transform: scale(0.82); transition: transform .45s cubic-bezier(.2,1.5,.4,1); } .levelup.show .lu-card { transform: scale(1); } .lu-ring { width: 104px; height: 104px; border-radius: 50%; margin: 0 auto 18px; box-sizing: border-box; position: relative; overflow: hidden; background: var(--ka-bg-ring); animation: lu-pulse 1.3s ease-in-out infinite; } .lu-kicker { font-family: Orbitron, Inter, sans-serif; font-size: 14px; letter-spacing: 5px; color: var(--ka-cyan); text-shadow: 0 0 20px rgba(var(--ka-cyan-rgb),.75); } .lu-level { font-size: 18px; font-weight: 600; color: var(--ka-text-1); margin-top: 9px; } @keyframes lu-pulse { 0%, 100% { box-shadow: 0 0 12px 2px rgba(var(--ka-cyan-rgb),.25); } 50% { box-shadow: 0 0 34px 8px rgba(var(--ka-cyan-rgb),.55); } } /* plant CTA */ .plant-btn { position: fixed; left: 50%; transform: translateX(-50%); bottom: max(78px, calc(env(safe-area-inset-bottom) + 78px)); background: var(--ka-surface); color: var(--ka-text-4); border: 1.5px solid var(--ka-cyan); cursor: pointer; font-weight: 600; font-size: 14px; padding: 11px 22px; border-radius: 24px; box-shadow: 0 0 22px rgba(var(--ka-cyan-rgb),.4); transition: transform .12s, box-shadow .12s, background .12s; } .plant-btn span { font-size: 17px; vertical-align: -1px; } .plant-btn:hover { background: var(--ka-surface-hover); box-shadow: 0 0 30px rgba(var(--ka-cyan-rgb),.65); } .plant-btn:active { transform: translateX(-50%) scale(.96); } .ctrls { position: fixed; right: 14px; bottom: max(86px, calc(env(safe-area-inset-bottom) + 86px)); display: flex; flex-direction: column; align-items: flex-end; gap: 8px; } /* directional pan pad (Kingdom Tree + Map mode) */ .dpad { display: none !important; } .dpad-b { width: 27px; height: 27px; border-radius: 8px; cursor: pointer; background: rgba(10,30,42,.72); border: 1px solid rgba(var(--ka-cyan-rgb),.35); color: var(--ka-text-5); font-size: 10px; line-height: 1; display: flex; align-items: center; justify-content: center; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); -webkit-user-select: none; user-select: none; touch-action: none; } .dpad-b:active { background: rgba(16,58,79,.95); border-color: var(--ka-cyan); transform: scale(.9); } .dpad .up { grid-column: 2; grid-row: 1; } .dpad .left { grid-column: 1; grid-row: 2; } .dpad .right { grid-column: 3; grid-row: 2; } .dpad .down { grid-column: 2; grid-row: 3; } /* tree d-pad sits at the bottom of the right control column (thumb zone); add a little gap above it */ #tree-pad { margin-top: 6px; } .map-dpad { position: absolute; top: auto; bottom: 168px; right: 10px; z-index: 1000; } .ic { width: 40px; height: 40px; border-radius: 12px; cursor: pointer; background: rgba(10,30,42,.72); border: 1px solid rgba(var(--ka-cyan-rgb),.35); color: var(--ka-text-5); font-size: 17px; line-height: 1; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(6px); } .ic:hover { background: rgba(16,58,79,.9); border-color: var(--ka-cyan); } /* legend */ .legend { position: fixed; left: 14px; bottom: 92px; width: 196px; background: rgba(6,16,24,.92); border: 1px solid rgba(var(--ka-cyan-rgb),.3); border-radius: 14px; padding: 12px 14px; backdrop-filter: blur(8px); opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity .18s, transform .18s; } .legend.open { opacity: 1; transform: translateY(0); } .legend-title { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--ka-text-9); margin-bottom: 8px; } .lg { display: flex; align-items: center; gap: 9px; font-size: 11px; color: var(--ka-text-4); padding: 2px 0; } .ring { width: 16px; height: 16px; border-radius: 50%; flex: 0 0 auto; box-sizing: border-box; } .r-blank { border: 2.5px solid var(--ka-lvl-blank); } .r-lr { border: 2.5px solid var(--ka-lvl-lr); } .r-sr { border: 2.5px solid var(--ka-lvl-sr); } .r-ruby { border: 2.5px solid var(--ka-ruby); } .r-lg { border: 2.5px solid var(--ka-green); } .r-sg { border: 2.5px solid var(--ka-lvl-sg); } .r-em { border: 2.5px solid var(--ka-lvl-em); } .r-lb { border: 2.5px solid var(--ka-lvl-lb); } .r-db { border: 2.5px solid var(--ka-lvl-db); } .r-sa { border: 2.5px solid var(--ka-blue); } .r-d1 { border: 2.5px solid var(--ka-ruby); box-shadow: inset 0 0 0 2px var(--ka-blue); } .r-d2 { border: 2.5px solid var(--ka-lvl-em); box-shadow: inset 0 0 0 2px var(--ka-blue); } .r-d3 { border: 2.5px solid var(--ka-ruby); box-shadow: inset 0 0 0 2px var(--ka-blue), 0 0 0 2px var(--ka-lvl-em); } /* bottom nav */ #nav { position: fixed; left: 50%; transform: translateX(-50%); bottom: max(16px, calc(env(safe-area-inset-bottom) + 14px)); display: flex; gap: 4px; max-width: 96vw; background: rgba(6,16,24,.85); border: 1px solid rgba(var(--ka-cyan-rgb),.25); border-radius: 22px; padding: 5px; backdrop-filter: blur(8px); z-index: 30; } #nav button { background: transparent; border: 0; color: var(--ka-text-8); font-size: 11px; font-weight: 600; padding: 6px 11px; border-radius: 16px; cursor: pointer; white-space: nowrap; display: flex; flex-direction: column; align-items: center; gap: 4px; line-height: 1; } #nav button.on { background: var(--ka-surface); color: var(--ka-text-4); } /* WhatsApp-style stacked icon above label */ .nav-ic { width: 22px; height: 22px; display: block; flex: 0 0 auto; opacity: .92; transition: transform .16s ease, opacity .16s ease; } .nav-lbl { display: block; } #nav button.on .nav-ic { opacity: 1; transform: translateY(-1px) scale(1.06); filter: drop-shadow(0 0 6px rgba(var(--ka-cyan-rgb),.5)); } body.theme-light #nav button.on .nav-ic { filter: none; } /* MY KG screen */ #screen-mykg { position: fixed; inset: 0; flex-direction: column; padding: max(18px, env(safe-area-inset-top)) 16px 92px; overflow-y: auto; z-index: 20; background: var(--ka-bg-screen); } .mk-kg-tabs { display: flex; gap: 8px; overflow-x: auto; flex-wrap: nowrap; padding: 4px 0 12px; margin-bottom: 4px; scrollbar-width: none; } .mk-kg-tabs::-webkit-scrollbar { display: none; } .mk-kg-tab { flex: 0 0 auto; padding: 8px 16px; border-radius: 12px; border: 1px solid rgba(125,212,255,.2); background: rgba(0,20,44,.5); color: rgba(125,212,255,.65); font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: all .18s; } .mk-kg-tab.on { border-color: rgba(125,212,255,.7); background: rgba(0,50,90,.45); color: rgba(125,212,255,1); box-shadow: 0 0 14px rgba(125,212,255,.18); } .mk-head { padding: 8px 2px 14px; border-bottom: 1px solid rgba(var(--ka-cyan-rgb),.14); margin-bottom: 10px; } .mk-name { width: 100%; background: transparent; border: 0; color: var(--ka-text-1); font-size: 22px; font-weight: 700; outline: none; } .mk-line { display: flex; align-items: center; gap: 10px; margin: 4px 0 12px; } .mk-count { font-size: 12px; color: var(--ka-text-8); } .mk-ready { display: none; align-items: center; font-size: 11px; color: var(--ka-green); border: 1px solid rgba(var(--ka-green-rgb),.4); border-radius: 12px; padding: 2px 9px; } .mk-main-btn { margin-left: auto; flex: 0 0 auto; font-size: 11px; font-weight: 700; letter-spacing: .02em; color: var(--ka-text-5); background: rgba(var(--ka-cyan-rgb),.08); border: 1px solid rgba(var(--ka-cyan-rgb),.3); border-radius: 12px; padding: 4px 11px; cursor: pointer; transition: background .15s, border-color .15s, color .15s; } .mk-main-btn:hover { background: rgba(var(--ka-cyan-rgb),.16); border-color: rgba(var(--ka-cyan-rgb),.5); } .mk-main-btn.on { color: var(--ka-gold); background: rgba(255,200,60,.12); border-color: rgba(255,200,60,.5); cursor: default; } .mk-daywrap { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; } .mk-daylabel { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--ka-text-9); } .mk-days { display: flex; gap: 6px; flex-wrap: wrap; } .mk-timewrap { display: flex; align-items: center; gap: 10px; margin-top: 11px; } .mk-time { background: rgba(8,18,28,.85); border: 1px solid rgba(var(--ka-cyan-rgb),.28); color: var(--ka-text-1); font-size: 14px; font-weight: 600; padding: 7px 11px; border-radius: 10px; outline: none; } .mk-time:focus { border-color: var(--ka-cyan); } .mk-time::-webkit-calendar-picker-indicator { filter: invert(0.8) sepia(1) saturate(3) hue-rotate(150deg); cursor: pointer; } .day { background: rgba(10,30,42,.6); border: 1px solid rgba(var(--ka-cyan-rgb),.2); color: var(--ka-text-6); font-size: 12px; padding: 6px 9px; border-radius: 9px; cursor: pointer; } .day.on { background: var(--ka-surface); border-color: var(--ka-cyan); color: var(--ka-text-4); } .mk-list { display: flex; flex-direction: column; gap: 7px; } .mrow { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: rgba(8,18,28,.6); border: 1px solid rgba(var(--ka-cyan-rgb),.12); border-radius: 14px; padding: 10px 12px; cursor: pointer; } .mrow:hover { border-color: rgba(var(--ka-cyan-rgb),.4); } .mring { width: 38px; height: 38px; flex: 0 0 auto; border-radius: 50%; background: var(--ka-bg-ring); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; color: var(--ka-text-2); box-sizing: border-box; } .mmeta { flex: 1; min-width: 0; } .mname { display: block; font-size: 14px; font-weight: 600; color: var(--ka-text-1); } .you { font-size: 10px; color: var(--ka-cyan); border: 1px solid rgba(var(--ka-cyan-rgb),.4); border-radius: 8px; padding: 1px 6px; margin-left: 4px; } .you.lead { color: var(--ka-green); border-color: rgba(var(--ka-green-rgb),.4); } .msub { display: block; font-size: 11px; color: var(--ka-text-8); margin-top: 2px; } .chip { display: inline-block; font-size: 10px; color: var(--ka-green-text); margin-left: 6px; } .mchev { color: var(--ka-text-12); font-size: 20px; } .mk-actions { display: flex; gap: 10px; margin-top: 16px; } .mk-btn { flex: 1; padding: 13px; border-radius: 14px; font-size: 14px; font-weight: 600; cursor: pointer; } .mk-btn.ghost { background: transparent; border: 1px solid rgba(var(--ka-cyan-rgb),.4); color: var(--ka-text-5); } .mk-btn.solid { background: var(--ka-surface); border: 1.5px solid var(--ka-cyan); color: var(--ka-text-4); box-shadow: 0 0 18px rgba(var(--ka-cyan-rgb),.3); } /* invite code + join-a-group */ .mk-invite { margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(var(--ka-cyan-rgb),.12); display: flex; flex-direction: column; gap: 11px; } .mk-inv-row { display: flex; align-items: center; gap: 10px; } .mk-inv-label { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--ka-text-9); } .mk-code { flex: 1; font-family: Orbitron, Inter, sans-serif; font-weight: 700; font-size: 16px; letter-spacing: 1.5px; color: var(--ka-text-4); } .mk-inv-btn { background: rgba(8,18,28,.8); border: 1px solid rgba(var(--ka-cyan-rgb),.3); color: var(--ka-text-5); font-size: 12px; font-weight: 600; padding: 8px 13px; border-radius: 10px; cursor: pointer; } .mk-joined { display: flex; flex-direction: column; gap: 7px; } .mk-joined-title { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--ka-text-9); margin-top: 4px; } .mk-joined-row { display: flex; align-items: center; gap: 10px; background: rgba(8,18,28,.55); border: 1px solid rgba(var(--ka-cyan-rgb),.14); border-radius: 12px; padding: 10px 12px; cursor: pointer; } .mkj-name { flex: 1; font-size: 14px; font-weight: 600; color: var(--ka-text-1); } .mkj-sub { font-size: 12px; color: var(--ka-text-7); } .mkj-leave { background: transparent; border: 0; color: var(--ka-text-10); font-size: 20px; line-height: 1; cursor: pointer; padding: 0 4px; } .mkj-leave:hover { color: var(--ka-error); } /* join requests (leader) + discoverable toggle + browse row */ .mk-requests { display: flex; flex-direction: column; gap: 7px; } .mk-req-title { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--ka-warn); } .mk-req-row { display: flex; align-items: center; gap: 10px; background: rgba(42,36,16,.4); border: 1px solid rgba(var(--ka-warn-rgb),.3); border-radius: 12px; padding: 9px 11px; } .mk-req-av { width: 30px; height: 30px; border-radius: 50%; flex: 0 0 30px; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; color: var(--ka-warn-3); background: rgba(var(--ka-warn-rgb),.15); border: 1px solid rgba(var(--ka-warn-rgb),.4); } .mk-req-name { flex: 1; font-size: 14px; color: var(--ka-text-1); } .mk-req-yes { background: var(--ka-surface); border: 1px solid var(--ka-cyan); color: var(--ka-text-4); font-size: 12px; font-weight: 600; padding: 7px 12px; border-radius: 9px; cursor: pointer; } .mk-req-no { background: transparent; border: 0; color: var(--ka-text-10); font-size: 20px; line-height: 1; cursor: pointer; padding: 0 4px; } .mk-disc-row { display: flex; align-items: center; gap: 10px; } .mk-disc-label { flex: 1; font-size: 13px; color: var(--ka-text-4); } .mk-disc-toggle { background: rgba(8,18,28,.8); border: 1px solid rgba(var(--ka-cyan-rgb),.3); color: var(--ka-text-8); font-size: 12px; font-weight: 700; padding: 6px 16px; border-radius: 10px; cursor: pointer; } .mk-disc-toggle.on { background: var(--ka-surface-active); border-color: var(--ka-cyan); color: var(--ka-text-4); } .mk-jrow { display: flex; gap: 10px; } /* members who joined this group (leader roster) */ .mk-joiners { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; } .mk-joiners-title { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--ka-text-9); margin-top: 6px; } .mrow.joiner { display: flex; align-items: center; gap: 12px; background: rgba(8,18,28,.45); border: 1px solid rgba(var(--ka-cyan-rgb),.1); border-radius: 14px; padding: 10px 12px; } .you.joined { background: rgba(var(--ka-green-rgb),.14); color: var(--ka-green); border-color: rgba(var(--ka-green-rgb),.4); } .joiner-remove { background: transparent; border: 0; color: var(--ka-text-10); font-size: 20px; line-height: 1; cursor: pointer; padding: 0 4px; flex: 0 0 auto; } .joiner-remove:hover { color: var(--ka-error); } /* directory */ #screen-directory { position: fixed; inset: 0; flex-direction: column; padding: max(18px, env(safe-area-inset-top)) 16px max(18px, env(safe-area-inset-bottom)); z-index: 23; background: var(--ka-bg); } .dir-note { font-size: 12px; color: var(--ka-text-8); line-height: 1.5; margin: 0 2px 12px; } .dir-list { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; display: flex; flex-direction: column; gap: 8px; } .dir-empty { text-align: center; color: var(--ka-text-8); font-size: 14px; padding: 40px 18px; } .dir-row { display: flex; align-items: center; gap: 11px; background: rgba(8,18,28,.55); border: 1px solid rgba(var(--ka-cyan-rgb),.14); border-radius: 14px; padding: 11px 12px; } .dir-row .mring { width: 42px; height: 42px; border-radius: 50%; flex: 0 0 42px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; color: var(--ka-text-5); background: var(--ka-bg-ring); position: relative; overflow: hidden; } .dir-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; } .dir-name { font-size: 14px; font-weight: 600; color: var(--ka-text-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dir-sub { font-size: 11.5px; color: var(--ka-text-7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dir-req { flex: 0 0 auto; background: var(--ka-surface); border: 1px solid var(--ka-cyan); color: var(--ka-text-4); font-size: 12px; font-weight: 600; padding: 8px 12px; border-radius: 10px; cursor: pointer; } .dir-state { flex: 0 0 auto; font-size: 12px; font-weight: 600; padding: 7px 11px; border-radius: 10px; } .dir-state.joined { color: var(--ka-green); } .dir-state.pending { color: var(--ka-warn); } .join-browse { width: 100%; background: transparent; border: 0; color: var(--ka-text-5); font-size: 13px; padding: 12px; margin-top: 4px; cursor: pointer; } .dir-toggle { flex: 0 0 auto; background: rgba(8,18,28,.8); border: 1px solid rgba(var(--ka-cyan-rgb),.3); color: var(--ka-text-5); font-size: 13px; font-weight: 600; padding: 7px 13px; border-radius: 11px; cursor: pointer; } /* directory map mode: hide the "my KG meeting" editor card (browsing, not editing) */ body.dir-map-mode #map-ctrl { display: none; } .kgm-pop-req { background: var(--ka-surface); border: 1px solid var(--ka-cyan); color: var(--ka-text-4); font-size: 12px; font-weight: 600; padding: 7px 12px; border-radius: 9px; cursor: pointer; } .kgm-mem { font-size: 12px; font-weight: 600; color: var(--ka-green); } .kgm-mem.pend { color: var(--ka-warn); } /* TODAY / WALK screen */ #screen-today { position: fixed; inset: 0; flex-direction: column; padding: max(20px, env(safe-area-inset-top)) 16px 92px; overflow-y: auto; z-index: 20; background: var(--ka-bg-screen); } .td-head { display: flex; align-items: center; gap: 14px; margin-bottom: 4px; } .td-ring { width: 50px; height: 50px; flex: 0 0 auto; border-radius: 50%; background: var(--ka-bg-ring); display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 600; color: var(--ka-text-2); box-sizing: border-box; } .td-hi { font-size: 20px; font-weight: 700; color: var(--ka-text-1); } .td-level { font-size: 12px; color: var(--ka-text-8); margin-top: 2px; } .td-date { font-size: 12px; color: var(--ka-text-9); margin: 6px 2px 16px; } .td-acts { display: flex; flex-direction: column; gap: 10px; } .act { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; background: rgba(8,18,28,.7); border: 1px solid rgba(var(--ka-cyan-rgb),.16); border-radius: 16px; padding: 14px 14px; cursor: pointer; } .act:hover { border-color: rgba(var(--ka-cyan-rgb),.45); } .act.done { border-color: rgba(var(--ka-green-rgb),.45); background: rgba(11,48,33,.4); } .act.broken { border-color: rgba(255,107,107,.4); } .act-ico { font-size: 26px; width: 34px; text-align: center; } .act-main { flex: 1; } .act-label { display: block; font-size: 16px; font-weight: 600; color: var(--ka-text-1); } .act-streak { display: block; font-size: 12px; color: var(--ka-text-5); margin-top: 2px; } .act.done .act-streak { color: var(--ka-green-text); } .act.broken .act-streak { color: var(--ka-error); } .act-state { font-size: 13px; font-weight: 600; color: var(--ka-cyan); } .act.done .act-state { color: var(--ka-green); } .td-card { margin-top: 18px; background: rgba(8,18,28,.6); border: 1px solid rgba(var(--ka-cyan-rgb),.14); border-radius: 16px; padding: 14px; } .td-green-top { display: flex; justify-content: space-between; font-size: 12px; color: var(--ka-green-text); margin-bottom: 9px; } .td-bar { height: 8px; background: rgba(40,90,70,.35); border-radius: 6px; overflow: hidden; } .td-bar-fill { height: 100%; background: linear-gradient(90deg, var(--ka-lvl-sg), var(--ka-lvl-em)); border-radius: 6px; transition: width .35s; } .td-next { display: inline-block; font-size: 11px; font-weight: 500; color: var(--ka-green); background: rgba(var(--ka-green-rgb),.10); border: 1px solid rgba(var(--ka-green-rgb),.22); border-radius: 8px; padding: 3px 10px; margin-top: 10px; line-height: 1.3; } .td-freeze { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; padding: 11px 14px; background: rgba(12,42,58,.4); border: 1px solid rgba(var(--ka-cyan-rgb),.14); border-radius: 14px; font-size: 13px; color: var(--ka-text-4); } .td-freeze-note { font-size: 11px; color: var(--ka-text-9); } .td-dev { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 20px; padding: 11px 14px; border: 1px dashed rgba(120,170,200,.3); border-radius: 14px; font-size: 11px; color: var(--ka-text-10); } .td-dev-btn { background: rgba(10,30,42,.6); border: 1px solid rgba(var(--ka-cyan-rgb),.3); color: var(--ka-text-5); font-size: 12px; font-weight: 600; padding: 8px 13px; border-radius: 11px; cursor: pointer; white-space: nowrap; } /* check-in modal content */ .ci-head { font-size: 20px; font-weight: 700; color: var(--ka-text-1); margin: 2px 0 14px; } .ci-lead { font-size: 16px; color: var(--ka-text-3); line-height: 1.5; } .ci-sub { font-size: 13px; color: var(--ka-text-8); margin-top: 8px; } .ci-title { font-size: 16px; font-weight: 600; color: var(--ka-text-5); margin-bottom: 8px; } .ci-body { font-size: 14px; color: var(--ka-text-3); line-height: 1.6; } .ci-complete { width: 100%; margin-top: 20px; background: var(--ka-surface); border: 1.5px solid var(--ka-cyan); color: var(--ka-text-4); font-size: 15px; font-weight: 600; padding: 14px; border-radius: 14px; cursor: pointer; box-shadow: 0 0 18px rgba(var(--ka-cyan-rgb),.3); } /* Person card */ .person { position: fixed; inset: 0; background: rgba(2,6,12,.66); display: none; align-items: flex-end; justify-content: center; z-index: 40; } .person.open { display: flex; } .person-sheet { width: 100%; max-width: 460px; max-height: 88vh; overflow-y: auto; background: var(--ka-bg-card); border: 1px solid rgba(var(--ka-cyan-rgb),.25); border-radius: 22px 22px 0 0; padding: 18px 18px max(22px, env(safe-area-inset-bottom)); position: relative; } .person-close { position: absolute; top: 12px; right: 14px; background: transparent; border: 0; color: var(--ka-text-8); font-size: 26px; line-height: 1; cursor: pointer; } .pc-head { display: flex; align-items: center; gap: 14px; margin: 4px 0 14px; } .pc-ring { width: 56px; height: 56px; flex: 0 0 auto; border-radius: 50%; background: var(--ka-bg-ring); display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 600; color: var(--ka-text-2); box-sizing: border-box; } .pc-name { background: transparent; border: 0; border-bottom: 1px solid transparent; color: var(--ka-text-1); font-size: 18px; font-weight: 700; outline: none; width: 100%; } .pc-name:focus { border-bottom-color: rgba(var(--ka-cyan-rgb),.4); } .pc-level { font-size: 12px; color: var(--ka-text-8); margin-top: 3px; } .pc-tree { font-size: 12px; color: var(--ka-text-7); background: rgba(12,42,58,.5); border-radius: 10px; padding: 8px 10px; margin-bottom: 6px; } .pc-sec { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--ka-text-9); margin: 16px 0 9px; } .pc-note { text-transform: none; letter-spacing: 0; color: var(--ka-green-text); margin-left: 6px; } .togs { display: flex; gap: 8px; flex-wrap: wrap; } .tog { background: rgba(10,30,42,.6); border: 1px solid rgba(var(--ka-cyan-rgb),.22); color: var(--ka-text-6); font-size: 13px; padding: 9px 13px; border-radius: 11px; cursor: pointer; } .tog.on { background: var(--ka-surface-active); border-color: var(--ka-cyan); color: var(--ka-text-4); } .tog.dim { opacity: .35; cursor: not-allowed; } .srow { display: flex; align-items: center; gap: 12px; margin: 9px 0; } .srow label { width: 64px; font-size: 13px; color: var(--ka-text-5); } .srow input[type=range] { flex: 1; accent-color: var(--ka-cyan); } .sval { width: 36px; text-align: right; font-size: 12px; color: var(--ka-cyan); } .pc-next { margin-top: 14px; font-size: 12px; color: var(--ka-green); background: rgba(12,42,58,.4); border-radius: 10px; padding: 9px 11px; } .pc-since { font-size: 12.5px; color: var(--ka-text-4); line-height: 1.7; } .pc-intents { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .pc-intent { font-size: 11px; color: var(--ka-text-4); background: rgba(18,35,58,.7); border: 1px solid rgba(var(--ka-cyan-rgb),.3); border-radius: 14px; padding: 4px 11px; } /* toast */ .toast { position: fixed; left: 50%; top: 80px; transform: translate(-50%, -8px); background: rgba(12,42,58,.95); border: 1px solid rgba(var(--ka-cyan-rgb),.4); color: var(--ka-text-4); font-size: 12px; padding: 8px 16px; border-radius: 20px; opacity: 0; transition: opacity .2s, transform .2s; pointer-events: none; z-index: 50; } .toast.show { opacity: 1; transform: translate(-50%, 0); } /* auth */ .auth { position: fixed; inset: 0; background: rgba(4,4,15,0.82); display: none; align-items: center; justify-content: center; z-index: 100; } .auth-card { width: min(88%, calc(100vw - 32px)); max-width: 380px; text-align: center; padding: 24px; max-height: 92vh; overflow-y: auto; overscroll-behavior: contain; } /* sign-up extra questions */ .signup-extra { display: none; text-align: left; margin-bottom: 4px; } .su-sec { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--ka-text-9); margin: 16px 0 9px; border-bottom: 1px solid rgba(var(--ka-cyan-rgb),.12); padding-bottom: 6px; } .su-q { margin-bottom: 11px; } .su-q.disabled { opacity: .4; } .su-qrow { display: flex; align-items: center; gap: 10px; justify-content: space-between; } .su-qlabel { font-size: 13px; color: var(--ka-text-2); line-height: 1.32; flex: 1; } .su-yn { display: flex; gap: 6px; flex: 0 0 auto; } .su-yn button { background: rgba(8,18,28,.8); border: 1px solid rgba(var(--ka-cyan-rgb),.25); color: var(--ka-text-5); font-size: 12px; font-weight: 600; padding: 6px 14px; border-radius: 9px; cursor: pointer; } .su-yn button.on { background: var(--ka-surface-active); border-color: var(--ka-cyan); color: var(--ka-text-4); } .su-yn button:disabled { cursor: default; } .su-since { margin: 8px 0 0 !important; font-size: 13px !important; padding: 10px 12px !important; } .su-note { font-size: 11px; color: var(--ka-text-8); line-height: 1.45; margin-top: 10px; font-style: italic; } .auth-logo { font-family: Orbitron, Inter, sans-serif; font-weight: 700; font-size: 24px; letter-spacing: 3px; color: var(--ka-cyan); text-shadow: 0 0 22px rgba(var(--ka-cyan-rgb),.6), 0 0 44px rgba(var(--ka-cyan-rgb),.35); margin-bottom: 4px; } .auth-sub { font-size: 13px; color: var(--ka-text-6); margin: 6px 0 24px; letter-spacing: 0.05em; } .auth-in { width: 100%; background: rgba(10,30,42,.5); border: 1px solid rgba(var(--ka-cyan-rgb),.25); border-radius: 12px; color: var(--ka-text-1); font-size: 16px; /* ≥16px prevents iOS auto-zoom on focus */ padding: 14px; margin-bottom: 11px; outline: none; } .auth-in:focus { border-color: var(--ka-cyan); box-shadow: 0 0 0 3px rgba(var(--ka-cyan-rgb),.12), 0 0 16px rgba(var(--ka-cyan-rgb),.2); } .pw-wrap { position: relative; margin-bottom: 11px; } .pw-wrap .auth-in { margin-bottom: 0; padding-right: 66px; } .pw-eye { position: absolute; right: 7px; top: 50%; transform: translateY(-50%); background: rgba(var(--ka-cyan-rgb),.12); border: 1px solid rgba(var(--ka-cyan-rgb),.28); color: var(--ka-text-5); font-size: 12px; font-weight: 600; padding: 6px 11px; border-radius: 9px; cursor: pointer; } .pw-eye:hover { background: rgba(var(--ka-cyan-rgb),.2); } .auth-go { width: 100%; background: linear-gradient(150deg, var(--ka-surface-active), var(--ka-surface-deep)); border: 1.5px solid var(--ka-cyan); color: var(--ka-text-4); font-size: 16px; font-weight: 700; padding: 15px; min-height: 52px; border-radius: 14px; cursor: pointer; letter-spacing: 0.3px; box-shadow: 0 0 24px rgba(var(--ka-cyan-rgb),.4), 0 4px 18px rgba(0,0,0,.4); } .auth-note { font-size: 10px; color: var(--ka-text-12); margin-top: 14px; } .auth-err { font-size: 12px; color: var(--ka-error); min-height: 16px; margin: 2px 2px 8px; } .auth-alt { width: 100%; background: transparent; border: 0; color: var(--ka-text-8); font-size: 13px; padding: 12px; margin-top: 4px; cursor: pointer; } .auth-alt:hover { color: var(--ka-text-5); } .auth-forgot { width: 100%; background: transparent; border: 0; color: var(--ka-text-11); font-size: 12px; padding: 12px 4px; cursor: pointer; } .auth-forgot:hover { color: var(--ka-text-5); } .td-acct-btns { display: flex; gap: 8px; align-items: center; } .td-link { background: transparent; border: 1px solid rgba(var(--ka-cyan-rgb),0.4); color: var(--ka-text-5); font-size: 12px; font-weight: 600; padding: 8px 12px; border-radius: 11px; cursor: pointer; white-space: nowrap; } .td-link:hover { background: rgba(var(--ka-cyan-rgb),0.1); } /* Today: account / sign out */ .td-account { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 22px; padding-top: 16px; border-top: 1px solid rgba(var(--ka-cyan-rgb),0.1); } .td-acct-email { font-size: 12px; color: var(--ka-text-10); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .td-signout { background: transparent; border: 1px solid rgba(var(--ka-error-rgb),0.4); color: var(--ka-error); font-size: 12px; font-weight: 600; padding: 8px 14px; border-radius: 11px; cursor: pointer; white-space: nowrap; } .td-signout:hover { background: rgba(var(--ka-error-rgb),0.1); } /* Overscroll containment — prevents scroll chaining to the body on iOS/Android */ .dir-list, .pp-list, .mpick-list, .wd-passage, .mn-scroll, .msg-body, .msg-thread, .auth-card, .jrn-col-dash, .jrn-col-level, .jrn-col-list, .nations-body, .cl-list, .pf-kpis, #screen-team, #screen-profile, #screen-clusters, #screen-constellations { overscroll-behavior: contain; } /* Momentum scrolling on iOS for all scrollable panels */ #screen-team, #screen-profile, #screen-clusters, #screen-constellations, .dir-list, .pp-list, .mpick-list, .nations-body, .msg-body, .wd-passage { -webkit-overflow-scrolling: touch; } /* ============================================================ LOOK & FEEL 2026 — glassmorphism, sci-fi framing, micro-interactions ============================================================ */ /* frosted glass on floating HUD panels */ .bottombar, #nav, .ic, .legend { backdrop-filter: blur(18px) saturate(1.5); -webkit-backdrop-filter: blur(18px) saturate(1.5); background-color: rgba(6,13,22,0.55); } .person-sheet { backdrop-filter: blur(22px) saturate(1.4); -webkit-backdrop-filter: blur(22px) saturate(1.4); background-color: rgba(7,14,22,0.86); } /* sci-fi corner brackets on the bottom info card + nav (both already position:fixed) */ .bottombar::before, .bottombar::after, #nav::before, #nav::after { content: ''; position: absolute; width: 12px; height: 12px; pointer-events: none; opacity: .7; } .bottombar::before, #nav::before { top: -1px; left: -1px; border-top: 1.5px solid var(--ka-cyan); border-left: 1.5px solid var(--ka-cyan); border-top-left-radius: 6px; } .bottombar::after, #nav::after { bottom: -1px; right: -1px; border-bottom: 1.5px solid var(--ka-cyan); border-right: 1.5px solid var(--ka-cyan); border-bottom-right-radius: 6px; } /* tactile micro-interactions */ .ic, .day, .tog, .mk-btn, .mk-btn, #nav button, .plant-btn, .auth-go, .auth-in, .ci-complete, .prayer-btn, .pc-toggle, .td-link, .td-signout, .td-dev-btn, .mrow, .act, .give-actions .mk-btn, .pw-save, #give-now, #give-later { transition: transform .14s cubic-bezier(.2,1.6,.4,1), box-shadow .22s ease, background-color .2s, border-color .2s; } .ic:active, .day:active, .tog:active, .mk-btn:active, #nav button:active, .plant-btn:active, .auth-go:active, .ci-complete:active, .prayer-btn:active, .pc-toggle:active, .td-link:active, .td-signout:active, .td-dev-btn:active, .act:active, .mrow:active { transform: scale(.94); } .ic:hover { box-shadow: 0 0 16px rgba(var(--ka-cyan-rgb),.35); } .mrow:hover { transform: translateX(3px); box-shadow: -3px 0 0 rgba(var(--ka-cyan-rgb),.4); } /* nav active glow */ #nav button { transition: color .2s, background-color .2s, box-shadow .25s, transform .14s; } #nav button.on { box-shadow: 0 0 18px rgba(var(--ka-cyan-rgb),.45), inset 0 0 0 1px rgba(var(--ka-cyan-rgb),.4); } /* breathing primary CTA + score */ @keyframes cta-pulse { 0%, 100% { box-shadow: 0 0 20px rgba(var(--ka-cyan-rgb),.32); } 50% { box-shadow: 0 0 36px rgba(var(--ka-cyan-rgb),.62); } } .plant-btn { animation: cta-pulse 3.4s ease-in-out infinite; } .score-num { letter-spacing: 1px; } .avatar { box-shadow: 0 0 16px rgba(var(--ka-blue-rgb),.55); } /* glints across primary buttons */ .plant-btn, .auth-go, .ci-complete, #give-now { position: relative; overflow: hidden; } .plant-btn::after, .auth-go::after, .ci-complete::after, #give-now::after { content: ''; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; background: linear-gradient(100deg, transparent, rgba(174,243,255,.28), transparent); transform: skewX(-18deg); animation: glint 5s ease-in-out infinite; } @keyframes glint { 0%, 70% { left: -60%; } 88%, 100% { left: 130%; } } /* ===== App boundary frame (Kingdom Tree / My Walk / My Kingdom Group) ===== */ /* two L-brackets: TR corner (::before) + BL corner (::after) — TL and BR stay open */ #app-frame { display: none; position: fixed; top: max(7px, env(safe-area-inset-top)); left: 7px; right: 7px; bottom: max(7px, env(safe-area-inset-bottom)); pointer-events: none; z-index: 45; } #app-frame::before, #app-frame::after { content: ''; position: absolute; filter: drop-shadow(0 0 5px rgba(80,170,255,.35)); } #app-frame::before { top: 0; right: 0; left: 30px; bottom: 30px; border-top: 1.5px solid rgba(125,212,255,.5); border-right: 1.5px solid rgba(125,212,255,.5); border-top-right-radius: 22px; } #app-frame::after { bottom: 0; left: 0; right: 30px; top: 30px; border-bottom: 1.5px solid rgba(125,212,255,.5); border-left: 1.5px solid rgba(125,212,255,.5); border-bottom-left-radius: 22px; } body.view-tree #app-frame, body.view-today #app-frame, body.view-mykg #app-frame { display: block; } /* ===== KA unified styling — reference analytics dashboard, extended app-wide ===== */ :root { /* ── Brand primitives ── */ --ka-cyan: #16E0FF; --ka-cyan-rgb: 22, 224, 255; --ka-cyan-bright: #5FF3FF; --ka-cyan-dim: #7FD4FF; --ka-blue: #1453E8; --ka-blue-rgb: 20, 83, 232; --ka-blue-light: #93C5FD; --ka-violet: #9b5cff; --ka-violet-rgb: 155, 92, 255; --ka-violet-light: #C79BFF; --ka-violet-mid: #B06BFF; --ka-pink: #ff5ca8; --ka-pink-rgb: 255, 92, 168; --ka-magenta: #FF80C8; --ka-green: #7CFFB2; --ka-green-rgb: 124, 255, 178; --ka-green-text: #8DF0B6; --ka-ruby: #C8102E; --ka-ruby-rgb: 200, 16, 46; --ka-gold: #F5C518; --ka-gold-rgb: 245, 193, 24; --ka-gold-light: #FFD36A; --ka-gold-pale: #FFE6A8; --ka-gold-dim: #C9A86A; --ka-gold-badge: #5A3D00; --ka-yt-red: #cc0000; --ka-yt-red-2: #FF3B3B; --ka-white: #ffffff; /* ── Semantic ── */ --ka-warn: #E8C878; --ka-warn-rgb: 232, 184, 64; --ka-warn-2: #FFD479; --ka-warn-gold: #FFD874; --ka-warn-3: #FFE19A; --ka-error: #F3A0A0; --ka-error-rgb: 243, 160, 160; --ka-error-mid: #FF8080; --ka-error-bright: #FF7090; /* ── Background scale ── */ --ka-bg-void: #02050A; /* deepest black */ --ka-bg: #04040f; /* app shell */ --ka-bg-screen: #05080E; /* full-screen panels */ --ka-bg-card: #080F1E; /* raised cards */ --ka-bg-ring: #081A26; /* avatar / ring backgrounds */ --ka-bg-popup: #0A1622; /* toasts, popups */ --ka-bg-tag: #03242E; /* selected badge bg */ --ka-map-bg: #EEF2F6; /* light map background */ /* ── Surface scale ── */ --ka-surface: #0C2A3A; /* primary interactive surface */ --ka-surface-2: #0C2436; /* alt surface */ --ka-surface-3: #0C3350; /* deep surface */ --ka-surface-active: #12233A; /* active / lifted */ --ka-surface-hover: #103A4F; /* hover state */ --ka-bubble: #11202E; /* message bubbles */ --ka-surface-deep: #2A1550; /* deep violet gradient stop */ --ka-surface-gold: #2A2410; /* dark gold surface */ --ka-surface-gold-dark: #1A0E00; /* darkest gold surface */ /* ── Text scale (light → dim) ── */ --ka-text-1: #EAF6FF; --ka-text-2: #CFE6F5; --ka-text-3: #DCECF6; --ka-text-4: #AEF3FF; --ka-text-5: #9FE9FF; --ka-text-6: #8FB4CC; --ka-text-7: #7FA6C0; --ka-text-8: #6F9BBB; --ka-text-9: #5A93C8; --ka-text-10: #4D7D9C; --ka-text-11: #3F6F8C; --ka-text-12: #3A5468; /* ── Level ring colours ── */ --ka-lvl-blank: #3A4456; --ka-lvl-lr: #FF6B6B; --ka-lvl-sr: #E01E1E; --ka-lvl-sg: #1FCB6B; --ka-lvl-em: #0BE08A; --ka-lvl-lb: #5AC8FF; --ka-lvl-db: #1E5AE0; --ka-lvl-violet: #7C5CFF; --ka-lvl-pink: #C16BFF; /* ── Glass presets ── */ --ka-glass: linear-gradient(150deg, rgba(var(--ka-cyan-rgb),.09), rgba(153,0,255,.09) 55%, rgba(8,18,30,.62)); --ka-glass-soft: linear-gradient(150deg, rgba(var(--ka-cyan-rgb),.055), rgba(153,0,255,.06) 58%, rgba(8,18,30,.6)); } /* glassy blue→violet surfaces across screens */ .act, .td-card, .td-freeze, .td-dev, .td-account, .mrow, .mk-joined-row, .dir-row, .mk-req-row, .pc-tree, .dcard2, .dtree, .dconsist, .kglabel { background: var(--ka-glass-soft); } /* soft neon glow + top highlight on prominent cards */ .act, .td-card, .dir-row, .mk-joined-row, .mk-req-row, .dcard2, .dtree, .dconsist { box-shadow: 0 6px 20px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.05); } /* glowing key numbers */ .score-num, .dval, .dcard2 b, .dleg b { text-shadow: 0 0 16px rgba(var(--ka-cyan-rgb),.5); } .score-num { color: var(--ka-text-4); } /* gradient screen titles */ .dash-title, .wd-title { background: linear-gradient(120deg, var(--ka-text-4), var(--ka-violet-light)); -webkit-background-clip: text; background-clip: text; color: transparent; } /* primary buttons: blue→violet sheen + glow */ .mk-btn.solid, .ci-complete:not(:disabled), .wd-done:not(:disabled), .auth-go, .dash-open, .plant-btn { background: linear-gradient(135deg, var(--ka-surface) 0%, var(--ka-surface-active) 55%, var(--ka-surface-deep) 100%); box-shadow: 0 0 22px rgba(var(--ka-cyan-rgb),.28), 0 0 34px rgba(130,0,255,.16); } /* login screen as a glass card */ .auth-card { background: linear-gradient(160deg, rgba(8,20,40,.82) 0%, rgba(14,8,34,.88) 100%); border: 1px solid rgba(var(--ka-cyan-rgb),.28); border-radius: 24px; box-shadow: 0 20px 60px rgba(0,0,0,.6), 0 0 60px rgba(130,0,255,.18), 0 0 30px rgba(var(--ka-cyan-rgb),.08), inset 0 1px 0 rgba(255,255,255,.07); } /* active chips get a violet halo */ .dseg-btn.on, .day.on, .pc-toggle.on, .su-yn button.on, .mk-disc-toggle.on { box-shadow: 0 0 14px rgba(130,80,255,.32); } /* violet/pink secondary accents on a few bars/rings for palette depth */ .td-bar-fill { background: linear-gradient(90deg, var(--ka-cyan), var(--ka-green)) !important; } .dbook-bar > span { background: linear-gradient(90deg, var(--ka-cyan), var(--ka-violet-mid)) !important; } /* ── member readiness (lead / plant / host) + questionnaire ───────────────── */ .pc-ready { display: flex; gap: 6px; margin: 2px 0 4px; } .pc-rdy { flex: 1; padding: 9px 4px; border-radius: 11px; border: 1px solid rgba(var(--ka-cyan-rgb),.22); background: rgba(8,18,28,.5); color: var(--ka-text-5); font-size: 12.5px; font-weight: 600; cursor: pointer; transition: border-color .18s, background .18s, color .18s; } .pc-rdy.on { border-color: rgba(var(--ka-warn-rgb),.7); background: rgba(var(--ka-warn-rgb),.1); color: var(--ka-warn-gold); box-shadow: 0 0 12px rgba(255,200,80,.18); } .ready-form { display: flex; flex-direction: column; gap: 14px; margin-bottom: 6px; } .ready-q { display: flex; flex-direction: column; gap: 7px; } .ready-qt { font-size: 13.5px; color: var(--ka-text-2); line-height: 1.45; } .ready-yn { display: flex; gap: 8px; } .ready-opt { flex: 1; padding: 9px; border-radius: 10px; border: 1px solid rgba(var(--ka-cyan-rgb),.2); background: rgba(8,18,28,.5); color: var(--ka-text-5); font-size: 13px; font-weight: 600; cursor: pointer; transition: all .15s; } .ready-opt.on { border-color: var(--ka-cyan); background: var(--ka-surface-2); color: var(--ka-text-4); box-shadow: inset 0 0 0 1px var(--ka-cyan); } .ready-text { margin: 0 !important; } .ready-remove { width: 100%; margin-top: 10px; background: rgba(var(--ka-error-rgb),.08); border: 1px solid rgba(var(--ka-error-rgb),.25); color: var(--ka-error); font-size: 13px; font-weight: 600; padding: 11px; border-radius: 12px; cursor: pointer; } .ready-remove:hover { background: rgba(var(--ka-error-rgb),.16); } /* ── Team Space (staff & leaders portal) ──────────────────────────────────── */ #screen-team { position: fixed; inset: 0; flex-direction: column; padding: max(18px, env(safe-area-inset-top)) 16px max(18px, env(safe-area-inset-bottom)); z-index: 23; overflow-y: auto; } .team-mode { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ka-warn-gold); background: rgba(var(--ka-warn-rgb),.1); border: 1px solid rgba(var(--ka-warn-rgb),.3); border-radius: 6px; padding: 3px 8px; } .team-mode:empty { display: none; } .team-tabs { display: flex; gap: 6px; overflow-x: auto; padding: 12px 0 14px; margin: 0 -2px; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .team-tabs::-webkit-scrollbar { display: none; } .team-tab { flex: 0 0 auto; padding: 8px 14px; border-radius: 11px; border: 1px solid rgba(var(--ka-cyan-rgb),.2); background: rgba(8,18,28,.5); color: var(--ka-text-5); font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: all .18s; } .team-tab.on { border-color: var(--ka-cyan); background: var(--ka-surface-2); color: var(--ka-text-4); box-shadow: 0 0 14px rgba(var(--ka-cyan-rgb),.22); } .team-body { display: flex; flex-direction: column; gap: 12px; } /* post forms */ .tm-form { background: linear-gradient(150deg, rgba(30,130,210,.14), rgba(130,50,210,.12) 60%, rgba(7,14,24,.6)); border: 1px solid rgba(var(--ka-cyan-rgb),.22); border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 10px; margin-bottom: 4px; } .tm-fh { font-size: 13px; font-weight: 700; letter-spacing: .04em; color: var(--ka-text-4); } .tm-in { width: 100%; padding: 11px 13px; background: rgba(4,10,18,.6); border: 1px solid rgba(var(--ka-cyan-rgb),.2); border-radius: 10px; color: var(--ka-text-1); font-size: 14px; font-family: inherit; outline: none; transition: border-color .18s; } .tm-in:focus { border-color: var(--ka-cyan); } .tm-in::placeholder { color: var(--ka-text-10); } .tm-ta { min-height: 78px; resize: vertical; } .tm-check { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ka-text-5); cursor: pointer; } .tm-check input { width: 16px; height: 16px; accent-color: var(--ka-cyan); } .tm-submit { align-self: flex-start; padding: 10px 20px; border: 1.5px solid var(--ka-cyan); border-radius: 12px; background: var(--ka-surface); color: var(--ka-text-4); font-size: 13px; font-weight: 700; cursor: pointer; box-shadow: 0 0 16px rgba(var(--ka-cyan-rgb),.25); } .tm-msg { font-size: 12px; } .tm-msg.err { color: var(--ka-error); } .tm-msg.ok { color: var(--ka-green); } /* cards */ .tm-card { background: rgba(8,18,28,.55); border: 1px solid rgba(var(--ka-cyan-rgb),.16); border-radius: 14px; padding: 14px 16px; } .tm-card.pinned { border-color: rgba(var(--ka-warn-rgb),.45); background: rgba(var(--ka-warn-rgb),.06); } .tm-meta { display: flex; align-items: center; gap: 10px; font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ka-text-8); margin-bottom: 6px; } .tm-pin { color: var(--ka-warn-gold); } .tm-title { font-size: 15.5px; font-weight: 700; color: var(--ka-text-1); margin-bottom: 5px; } .tm-text { font-size: 13.5px; line-height: 1.6; color: var(--ka-text-3); } .tm-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 11px; } .tm-del { font-size: 11px; padding: 5px 12px; border-radius: 8px; background: rgba(var(--ka-error-rgb),.08); border: 1px solid rgba(var(--ka-error-rgb),.25); color: var(--ka-error); cursor: pointer; } .tm-mini { font-size: 11px; padding: 5px 12px; border-radius: 8px; background: rgba(var(--ka-cyan-rgb),.08); border: 1px solid rgba(var(--ka-cyan-rgb),.25); color: var(--ka-text-4); cursor: pointer; } .tm-link { font-size: 12px; font-weight: 600; padding: 5px 12px; border-radius: 8px; background: rgba(var(--ka-green-rgb),.08); border: 1px solid rgba(var(--ka-green-rgb),.28); color: var(--ka-green-text); text-decoration: none; } .tm-status { margin-left: auto; font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 3px 8px; border-radius: 5px; } .tm-status.open { background: rgba(96,165,250,.15); color: var(--ka-blue-light); } .tm-status.accepted { background: rgba(var(--ka-green-rgb),.15); color: var(--ka-green-text); } .tm-status.declined { background: rgba(var(--ka-error-rgb),.15); color: var(--ka-error); } /* grids (training + calendar) */ .tm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; } .tm-tile { background: rgba(8,18,28,.55); border: 1px solid rgba(var(--ka-cyan-rgb),.16); border-radius: 14px; padding: 14px 16px; } .tm-tile.past { opacity: .55; } .tm-cat, .tm-date { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ka-cyan); margin-bottom: 6px; } /* members list */ .tm-search { width: 100%; padding: 11px 14px; background: rgba(4,10,18,.6); border: 1px solid rgba(var(--ka-cyan-rgb),.2); border-radius: 10px; color: var(--ka-text-1); font-size: 13px; font-family: inherit; outline: none; margin-bottom: 10px; } .tm-search:focus { border-color: var(--ka-cyan); } .tm-count { font-size: 11px; color: var(--ka-text-8); margin-bottom: 8px; } .tm-mlist { display: flex; flex-direction: column; gap: 6px; } .tm-mrow { display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 12px; border: 1px solid rgba(var(--ka-cyan-rgb),.12); background: rgba(8,18,28,.5); cursor: pointer; transition: border-color .18s; } .tm-mrow:hover { border-color: rgba(var(--ka-cyan-rgb),.35); } .tm-mring { width: 38px; height: 38px; border-radius: 50%; flex: 0 0 38px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: var(--ka-text-5); background: var(--ka-bg-ring); } .tm-minfo { flex: 1; min-width: 0; } .tm-mname { font-size: 14px; font-weight: 600; color: var(--ka-text-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tm-msub { font-size: 11.5px; color: var(--ka-text-8); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tm-mrole { font-size: 10.5px; font-weight: 700; color: var(--ka-text-7); white-space: nowrap; } .tm-empty { text-align: center; padding: 40px 20px; color: var(--ka-text-8); font-size: 14px; } .tm-empty-i { font-size: 34px; margin-bottom: 10px; } /* ── My Profile + serving roles + sign-up photo ───────────────────────────── */ #screen-profile { position: fixed; inset: 0; flex-direction: column; padding: max(18px, env(safe-area-inset-top)) 16px max(18px, env(safe-area-inset-bottom)); z-index: 23; overflow-y: auto; } #profile-body { display: flex; flex-direction: column; gap: 12px; padding-top: 8px; } .pf-idcard { display: flex; align-items: center; gap: 14px; background: linear-gradient(150deg, rgba(30,130,210,.2), rgba(130,50,210,.16) 60%, rgba(7,14,24,.7)); border: 1px solid rgba(var(--ka-cyan-rgb),.25); border-radius: 18px; padding: 16px; } .pf-id-ring { width: 64px; height: 64px; border-radius: 50%; flex: 0 0 64px; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 700; color: var(--ka-text-4); background: var(--ka-bg-ring); position: relative; overflow: hidden; } .pf-id-ring .av-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; } .pf-id-info { min-width: 0; } .pf-id-name { font-size: 19px; font-weight: 800; color: var(--ka-text-1); } .pf-flag { margin-left: 5px; font-size: 16px; vertical-align: middle; font-weight: 400; } .pf-id-meta { font-size: 13px; color: var(--ka-text-7); margin-top: 2px; } .pf-id-sub { font-size: 11.5px; color: var(--ka-text-8); margin-top: 3px; } .pf-decl { font-style: italic; font-size: 14px; line-height: 1.6; color: var(--ka-text-2); background: rgba(8,18,28,.5); border-left: 2px solid rgba(var(--ka-cyan-rgb),.5); border-radius: 8px; padding: 12px 14px; } .pf-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; } .pf-kpi { background: rgba(8,18,28,.55); border: 1px solid rgba(var(--ka-cyan-rgb),.16); border-radius: 13px; padding: 13px 8px; text-align: center; } .pf-kpi-ic { font-size: 17px; } .pf-kpi-val { font-size: 21px; font-weight: 800; color: var(--ka-text-1); font-family: Orbitron, Inter, sans-serif; margin: 3px 0 2px; text-shadow: 0 0 12px rgba(var(--ka-cyan-rgb),.3); } .pf-kpi-val.gold { color: var(--ka-warn-gold); } .pf-kpi-val.green { color: var(--ka-green-text); } .pf-kpi-val.violet { color: var(--ka-violet-light); } .pf-kpi-lbl { font-size: 10px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ka-text-8); } .pf-sec { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ka-text-7); margin: 8px 0 -2px; } .pf-kg { display: flex; flex-direction: column; gap: 2px; background: rgba(8,18,28,.55); border: 1px solid rgba(var(--ka-cyan-rgb),.18); border-radius: 13px; padding: 13px 15px; cursor: pointer; } .pf-kg-name { font-size: 15px; font-weight: 700; color: var(--ka-text-1); } .pf-kg-sub { font-size: 12px; color: var(--ka-text-8); } .pf-contact { font-size: 13px; color: var(--ka-text-5); padding: 2px 2px; } .pf-roles { display: flex; gap: 7px; flex-wrap: wrap; } .pf-role { flex: 1 1 30%; min-width: 92px; padding: 10px 6px; border-radius: 12px; border: 1px solid rgba(var(--ka-cyan-rgb),.22); background: rgba(8,18,28,.5); color: var(--ka-text-5); font-size: 12.5px; font-weight: 600; cursor: pointer; transition: all .18s; } .pf-role.on { border-color: rgba(var(--ka-warn-rgb),.7); background: rgba(var(--ka-warn-rgb),.1); color: var(--ka-warn-gold); box-shadow: 0 0 12px rgba(255,200,80,.18); } /* edit-profile modal photo + sign-up photo */ .pf-photo, .su-photo { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; } .pf-avatar, .su-avatar { width: 62px; height: 62px; border-radius: 50%; flex: 0 0 62px; display: flex; align-items: center; justify-content: center; font-size: 24px; color: var(--ka-text-8); background: var(--ka-bg-ring) center/cover no-repeat; border: 1.5px dashed rgba(var(--ka-cyan-rgb),.35); overflow: hidden; position: relative; } .pf-avatar .av-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .su-photo-btn { font-size: 13px; font-weight: 600; color: var(--ka-text-4); background: rgba(var(--ka-cyan-rgb),.08); border: 1px solid rgba(var(--ka-cyan-rgb),.3); border-radius: 10px; padding: 9px 14px; cursor: pointer; display: inline-block; } /* Avatar upload wrapper — makes the whole circle a click target */ .su-av-wrap { display: block; border-radius: 50%; flex: 0 0 auto; cursor: pointer; line-height: 0; } .su-avatar, .pf-avatar { cursor: pointer; } /* Camera hint shown inside the circle when no photo is loaded */ .su-av-hint { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 22px; border-radius: 50%; opacity: .75; transition: opacity .2s; pointer-events: none; } .su-av-wrap:hover .su-av-hint { opacity: 1; } /* Hover overlay once a photo is loaded */ .su-avatar.has-photo::after, .pf-avatar.has-photo::after { content: '📷'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 18px; background: rgba(0,0,0,.45); border-radius: 50%; opacity: 0; transition: opacity .2s; pointer-events: none; } .su-av-wrap:hover .su-avatar.has-photo::after, .su-av-wrap:hover .pf-avatar.has-photo::after { opacity: 1; } /* Right-side info column next to the avatar */ .su-photo-info { display: flex; flex-direction: column; gap: 5px; } .su-photo-sub { font-size: 10.5px; color: var(--ka-text-8); line-height: 1.4; } .pf-label { display: block; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ka-text-8); margin: 8px 0 5px; } .su-decl { min-height: 64px; resize: vertical; font-family: inherit; } /* Person-card profile extras */ .pc-decl { font-style: italic; font-size: 13.5px; line-height: 1.55; color: var(--ka-text-2); border-left: 2px solid rgba(var(--ka-cyan-rgb),.45); padding: 6px 0 6px 12px; margin: 2px 0; } .pc-contact { font-size: 12.5px; color: var(--ka-text-5); margin: 2px 0; } .pc-rolechips { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0 2px; } .pc-rolechip { font-size: 11px; font-weight: 600; color: var(--ka-warn-gold); background: rgba(var(--ka-warn-rgb),.1); border: 1px solid rgba(var(--ka-warn-rgb),.3); border-radius: 8px; padding: 4px 9px; } /* ── Readiness buttons now stack (full labels + Join a Kingdom Group) ──────── */ .pc-ready { flex-direction: column; gap: 7px; } .pc-rdy { flex: none; width: 100%; text-align: left; padding: 11px 14px; } /* ── Holding tank: people ready to be invited to a Kingdom Group (tree view) ─ */ #holding-tank { position: fixed; left: 8px; right: 8px; bottom: max(64px, calc(env(safe-area-inset-bottom) + 62px)); z-index: 26; display: none; flex-direction: column; pointer-events: none; } body.view-tree.ht-open #holding-tank { display: flex; } .ht-bar { pointer-events: auto; width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 16px; border: 1.5px solid rgba(var(--ka-cyan-rgb),.58); border-radius: 14px; background: linear-gradient(150deg, rgba(10,30,52,.95), rgba(22,10,48,.92) 70%); color: var(--ka-text-2); font-family: inherit; font-size: 14px; cursor: pointer; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 0 28px rgba(var(--ka-cyan-rgb),.32), inset 0 0 18px rgba(var(--ka-cyan-rgb),.08); } .ht-counts { display: flex; flex-wrap: wrap; gap: 3px 16px; text-align: left; } .ht-count { white-space: nowrap; color: rgba(190,238,255,.92); font-weight: 600; text-shadow: 0 0 10px rgba(var(--ka-cyan-rgb),.28); } .ht-chev { color: var(--ka-cyan); font-size: 24px; flex: 0 0 auto; line-height: 1; text-shadow: 0 0 10px rgba(var(--ka-cyan-rgb),1), 0 0 22px rgba(var(--ka-cyan-rgb),.65); } .ht-strip { pointer-events: auto; display: flex; gap: 10px; overflow-x: auto; padding: 12px 8px; margin-top: 8px; border: 1px solid rgba(var(--ka-cyan-rgb),.28); border-radius: 14px; background: rgba(6,14,24,.84); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); scrollbar-width: none; box-shadow: 0 0 22px rgba(var(--ka-cyan-rgb),.14); } .ht-strip::-webkit-scrollbar { display: none; } #holding-tank.collapsed .ht-strip { display: none; } .ht-card { flex: 0 0 auto; width: 84px; display: flex; flex-direction: column; align-items: center; gap: 4px; } .ht-ring { width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; color: var(--ka-text-5); background: var(--ka-bg-ring); overflow: hidden; position: relative; } .ht-name { font-size: 12px; font-weight: 600; color: var(--ka-text-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 82px; } .ht-sub { font-size: 9.5px; color: var(--ka-text-8); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 82px; } .ht-invite { margin-top: 2px; width: 100%; padding: 5px 4px; border-radius: 9px; border: 1px solid var(--ka-cyan); background: rgba(var(--ka-cyan-rgb),.12); color: var(--ka-text-4); font-size: 11px; font-weight: 700; cursor: pointer; transition: all .15s; } .ht-invite:active { transform: scale(.95); } .ht-invite.invited { border-color: rgba(var(--ka-green-rgb),.7); background: rgba(var(--ka-green-rgb),.14); color: var(--ka-green-text); cursor: default; } body.ht-open #btn-plant { opacity: 0; pointer-events: none; } body.view-tree #btn-plant { bottom: max(118px, calc(env(safe-area-inset-bottom) + 118px)); } /* ── neon HUD numbers in the Kingdom Tree (visual cue from the dashboard image) ── */ .neon-num { font-family: 'Orbitron', 'Inter', sans-serif; font-size: 1.25em; font-weight: 800; color: var(--ka-cyan-bright); text-shadow: 0 0 8px rgba(var(--ka-cyan-rgb),1), 0 0 20px rgba(var(--ka-cyan-rgb),.7), 0 0 36px rgba(var(--ka-cyan-rgb),.35); } .neon-num.green { color: var(--ka-green); text-shadow: 0 0 6px rgba(var(--ka-green-rgb),.9), 0 0 16px rgba(var(--ka-green-rgb),.5); } .score-num { text-shadow: 0 0 10px rgba(var(--ka-cyan-rgb),.85), 0 0 26px rgba(var(--ka-cyan-rgb),.45) !important; } .score-sub #downline { color: var(--ka-cyan-dim); text-shadow: 0 0 8px rgba(var(--ka-cyan-rgb),.6); } /* ── Holding tank segmented by country ────────────────────────────────────── */ .ht-strip { flex-direction: column; align-items: stretch; gap: 14px; max-height: 44vh; overflow-y: auto; overflow-x: hidden; } .ht-country { display: flex; flex-direction: column; gap: 7px; } .ht-chead { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; color: var(--ka-text-2); letter-spacing: .02em; padding: 0 2px; } .ht-flag { font-size: 18px; line-height: 1; } .ht-cname { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ht-cnt { font-size: 10px; font-weight: 700; color: var(--ka-text-6); background: rgba(var(--ka-cyan-rgb),.1); border: 1px solid rgba(var(--ka-cyan-rgb),.25); border-radius: 999px; padding: 1px 8px; } .ht-row { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; } .ht-row::-webkit-scrollbar { display: none; } /* ── Invite link + QR code (share a Kingdom Group) ────────────────────────── */ .mk-inv-note { font-size: 11px; color: var(--ka-text-7); line-height: 1.45; margin: 6px 2px 4px; } .mk-inv-btn.on { background: var(--ka-cyan); color: var(--ka-bg-screen); border-color: var(--ka-cyan); } .mk-qr { margin: 8px 0 6px; padding: 14px; border: 1px solid rgba(var(--ka-cyan-rgb),.25); border-radius: 14px; background: var(--ka-white); text-align: center; box-shadow: 0 0 22px rgba(var(--ka-cyan-rgb),.18); } .mk-qr img { width: 172px; height: 172px; image-rendering: pixelated; display: inline-block; border-radius: 4px; } .mk-qr-cap { margin-top: 9px; font-size: 11.5px; font-weight: 600; color: var(--ka-bg-card); } .mk-qr-msg { font-size: 12px; color: var(--ka-error-bright); } /* sign-up country dropdown */ .su-country { color: var(--ka-text-2); } .su-country option { background: var(--ka-bg-screen); color: var(--ka-text-2); } /* ── Top-right HUD: three neon dials (Kingdom Groups · People · Tree Value) ── */ .hud-tr { display: flex; gap: 6px; align-items: flex-start; text-align: center; padding: 7px 9px; background: linear-gradient(150deg, rgba(20,42,72,.52), rgba(42,20,72,.44) 60%, rgba(7,14,28,.74)); border: 1px solid rgba(125,212,255,.5); border-radius: 16px; box-shadow: 0 8px 24px rgba(0,0,0,.5), 0 0 24px rgba(50,150,255,.22), inset 0 0 18px rgba(50,150,255,.05); } .dial { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 50px; } .dial-face { position: relative; width: 48px; height: 48px; } .dial-svg { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 0 3px var(--dc)); } .dial-num { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: Orbitron, Inter, sans-serif; font-weight: 700; font-size: 13px; color: var(--ka-text-1); text-shadow: 0 0 9px rgba(var(--ka-cyan-rgb),.75); letter-spacing: .2px; } .dial-label { font-size: 7.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ka-text-5); text-align: center; line-height: 1.16; } /* ── Item 4 polish: top-left identity card + bottom tabs ── */ .hud-tl { box-shadow: 0 8px 24px rgba(0,0,0,.55), 0 0 26px rgba(50,150,255,.3), inset 0 1px 0 rgba(255,255,255,.16); } .who-name { letter-spacing: .2px; } #nav { background: linear-gradient(150deg, rgba(12,30,52,.9), rgba(20,12,46,.86)); border-color: rgba(125,212,255,.4); box-shadow: 0 8px 22px rgba(0,0,0,.5), 0 0 22px rgba(50,150,255,.16); } #nav button { transition: color .18s, background .18s, box-shadow .18s; border-radius: 16px; } #nav button.on { background: linear-gradient(150deg, rgba(var(--ka-cyan-rgb),.18), rgba(124,80,255,.16)); color: var(--ka-text-4); box-shadow: 0 0 16px rgba(var(--ka-cyan-rgb),.4), inset 0 0 12px rgba(var(--ka-cyan-rgb),.12); text-shadow: 0 0 10px rgba(var(--ka-cyan-rgb),.6); } /* ── Premium dial upgrade (cyan/magenta HUD gauge) ────────────────────────── */ .hud-tr { gap: 7px; padding: 8px 11px; background: linear-gradient(150deg, rgba(18,44,78,.58), rgba(48,18,78,.5) 60%, rgba(6,12,26,.8)); border: 1px solid rgba(125,212,255,.55); box-shadow: 0 10px 28px rgba(0,0,0,.55), 0 0 28px rgba(40,150,255,.28), 0 0 40px rgba(255,60,170,.12), inset 0 0 18px rgba(60,160,255,.06); } .dial { width: 60px; gap: 4px; } .dial-face { width: 58px; height: 58px; } .dial-svg { filter: drop-shadow(0 0 3px rgba(25,228,255,.85)) drop-shadow(0 0 8px rgba(255,69,168,.5)); } .dial-svg .dspin { transform-origin: 50% 50%; animation: dial-rot 26s linear infinite; } @keyframes dial-rot { to { transform: rotate(360deg); } } .dial-num { font-size: 17px; font-weight: 700; color: var(--ka-white); text-shadow: 0 0 8px rgba(25,228,255,.95), 0 0 18px rgba(25,228,255,.6), 0 0 30px rgba(255,69,168,.35); } .dial-label { font-size: 8px; font-weight: 800; color: var(--ka-text-6); letter-spacing: .1em; } @media (max-width: 440px) { .dial { width: 50px; } .dial-face { width: 48px; height: 48px; } .dial-num { font-size: 14px; } .dial-label { font-size: 7px; } } /* ── Top-left identity as a bigger neon HUD gauge (item 6) ────────────────── */ /* 3: stronger frame */ .hud-tl { padding: 8px 16px 8px 9px; border: 2px solid rgba(125,212,255,.9); box-shadow: 0 10px 32px rgba(0,0,0,.65), 0 0 36px rgba(40,150,255,.45), 0 0 54px rgba(255,60,170,.16), inset 0 1px 0 rgba(255,255,255,.22); } .hud-id { gap: 12px; } .id-gauge { position: relative; width: 76px; height: 76px; flex: 0 0 76px; display: flex; align-items: center; justify-content: center; } .id-gauge .dial-svg { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 0 4px rgba(25,228,255,.85)) drop-shadow(0 0 9px rgba(255,69,168,.5)); } .id-gauge .dspin { transform-origin: 50% 50%; animation: dial-rot 30s linear infinite; } .id-gauge .avatar { width: 52px; height: 52px; font-size: 16px; } /* 4: level to the right of name, big + neon */ .who { display: flex; flex-direction: row; align-items: center; gap: 10px; } .who-name { font-size: 16px; font-weight: 700; text-shadow: 0 0 10px rgba(25,228,255,.45); flex: 1; min-width: 0; } .who-level { font-size: 28px; font-weight: 800; color: var(--ka-white); font-family: Orbitron, Inter, sans-serif; text-shadow: 0 0 12px rgba(25,228,255,1), 0 0 26px rgba(25,228,255,.65), 0 0 40px rgba(255,69,168,.4); line-height: 1; letter-spacing: -1px; flex: 0 0 auto; } /* push the milestone chip below the taller identity card */ .hud-next { top: calc(max(12px, env(safe-area-inset-top)) + 98px); } @media (max-width: 440px) { .id-gauge { width: 62px; height: 62px; flex-basis: 62px; } .id-gauge .avatar { width: 42px; height: 42px; font-size: 14px; } .who-name { font-size: 14px; } .who-level { font-size: 22px; } .hud-next { top: calc(max(12px, env(safe-area-inset-top)) + 84px); } } /* ── Dials: bigger + stronger bloom + bigger labels (items 1 & 3) ──────────── */ /* 3: stronger frame on dial box */ .hud-tr { gap: 9px; padding: 9px 13px; border: 2px solid rgba(125,212,255,.82); box-shadow: 0 12px 32px rgba(0,0,0,.6), 0 0 34px rgba(40,150,255,.34), 0 0 52px rgba(255,60,170,.16), inset 0 0 20px rgba(60,160,255,.07); } .dial { width: 74px; gap: 5px; } .dial-face { width: 72px; height: 72px; } .dial-svg { filter: drop-shadow(0 0 4px rgba(25,228,255,.95)) drop-shadow(0 0 11px rgba(25,228,255,.55)) drop-shadow(0 0 17px rgba(255,69,168,.5)); } .dial-num { font-size: 22px; text-shadow: 0 0 10px rgba(25,228,255,1), 0 0 22px rgba(25,228,255,.7), 0 0 34px rgba(255,69,168,.45); } .dial-num.long { font-size: 17px; } /* 1: bigger, brighter dial labels */ .dial-label { font-size: 11px; color: rgba(174,243,255,.92); letter-spacing: .06em; } @media (max-width: 440px) { .dial { width: 56px; } .dial-face { width: 54px; height: 54px; } .dial-num { font-size: 16px; } .dial-num.long { font-size: 13px; } .dial-label { font-size: 9px; } } /* ── Merge milestone into the identity card as one box (cyan, not green) ───── */ /* 2A: bigger box */ .hud-tl { flex-direction: column; align-items: stretch; gap: 8px; padding: 11px 18px 11px 11px; } .hud-next { position: static; top: auto; left: auto; max-width: none; width: auto; margin: 0; padding: 6px 2px 1px 4px; background: none; border: none; border-top: 1px solid rgba(125,212,255,.22); border-radius: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; color: var(--ka-text-5); font-size: 11px; font-weight: 600; letter-spacing: .2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hud-next:empty { display: none; } /* ── Vertical Kingdom Levels progress bar (left edge) ──────────────────────── */ .levels-bar { position: fixed; left: 6px; top: max(8px, env(safe-area-inset-top)); bottom: 74px; width: min(266px, 82vw); z-index: 33; display: none; flex-direction: column; overflow: hidden; background: linear-gradient(180deg, rgba(10,22,44,.93), rgba(28,12,50,.9)); border: 1px solid rgba(125,212,255,.45); border-radius: 14px; box-shadow: 0 10px 28px rgba(0,0,0,.55), 0 0 22px rgba(50,150,255,.2); -webkit-backdrop-filter: blur(11px); backdrop-filter: blur(11px); transition: left .28s cubic-bezier(.2,.7,.2,1); } body.view-tree .levels-bar { display: flex; } .lvl-row { flex: 1 1 0; min-height: 0; display: flex; align-items: center; gap: 8px; padding: 0 6px; border-bottom: 1px solid rgba(125,212,255,.07); position: relative; } .lvl-row:last-child { border-bottom: none; } .lvl-num { flex: 0 0 20px; text-align: center; font-family: Orbitron, Inter, sans-serif; font-weight: 700; font-size: 11px; color: var(--lac); opacity: .5; text-shadow: 0 0 6px var(--lac); } .lvl-row.done .lvl-num { opacity: .85; } .lvl-row.current { background: linear-gradient(90deg, rgba(255,255,255,.08), transparent 70%); } .lvl-row.current .lvl-num { opacity: 1; font-size: 13px; } .lvl-detail { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 3px; overflow: hidden; } .lvl-name { font-size: 11px; font-weight: 700; color: var(--ka-text-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.1; } .lvl-desc { font-size: 8px; color: var(--ka-text-6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.1; } .lvl-track { height: 4px; border-radius: 3px; background: rgba(255,255,255,.08); overflow: hidden; } .lvl-fill { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--ka-cyan), var(--lac)); box-shadow: 0 0 8px var(--lac); transition: width .4s; } /* shift the identity card right so the collapsed bar clears it */ .hud-tl { left: 42px; } .levels-bar { bottom: max(80px, calc(env(safe-area-inset-bottom) + 76px)); } /* Levels bar: all-cyan + more readable descriptions */ .lvl-name { font-size: 12px; color: var(--ka-text-1); } .lvl-desc { font-size: 10px; color: var(--ka-text-6); line-height: 1.25; } .lvl-fill { background: linear-gradient(90deg, var(--ka-cyan), var(--ka-cyan-dim)) !important; box-shadow: 0 0 8px rgba(var(--ka-cyan-rgb),.7) !important; } /* Levels bar: every number fully bright (06–12 as bright as 05); current = white + larger */ .lvl-num { opacity: 1; color: var(--ka-text-5); text-shadow: 0 0 8px rgba(var(--ka-cyan-rgb),.9), 0 0 15px rgba(var(--ka-cyan-rgb),.5); } .lvl-row.done .lvl-num { opacity: 1; } .lvl-row.current .lvl-num { opacity: 1; color: var(--ka-white); font-size: 13.5px; text-shadow: 0 0 10px rgba(var(--ka-cyan-rgb),1), 0 0 20px rgba(var(--ka-cyan-rgb),.65); } /* 1. Levels 11 & 12 more pronounced (12 the most — bigger than the current level) */ .lvl-num { flex-basis: 26px; } .hud-tl { left: 50px; } .lvl-row[data-lvl="11"] .lvl-num { font-size: 14.5px; color: var(--ka-text-1); text-shadow: 0 0 10px rgba(var(--ka-cyan-rgb),.95), 0 0 18px rgba(var(--ka-cyan-rgb),.55); } .lvl-row[data-lvl="12"] .lvl-num { font-size: 17.5px; font-weight: 800; color: var(--ka-white); text-shadow: 0 0 13px rgba(var(--ka-cyan-rgb),1), 0 0 24px rgba(var(--ka-cyan-rgb),.75), 0 0 34px rgba(124,200,255,.5); } /* 2. Holding-tank "ready to be invited" bar — centred, Control-Bar width */ #holding-tank { left: 50%; right: auto; transform: translateX(-50%); width: min(600px, 94vw); bottom: max(74px, calc(env(safe-area-inset-bottom) + 72px)); } /* 3. Control Bar (bottom nav) — premium & pronounced */ #nav { padding: 7px; gap: 6px; border: 1.5px solid rgba(125,212,255,.55); border-radius: 20px; background: linear-gradient(150deg, rgba(14,34,60,.95), rgba(28,14,56,.92)); box-shadow: 0 16px 40px rgba(0,0,0,.62), 0 0 32px rgba(40,150,255,.32), 0 0 56px rgba(124,60,255,.16), inset 0 1px 0 rgba(255,255,255,.14); -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3); } #nav button { font-size: 13px; font-weight: 700; padding: 11px 18px; border-radius: 15px; color: var(--ka-text-4); letter-spacing: .3px; border: 1px solid transparent; } #nav button.on { background: linear-gradient(150deg, rgba(var(--ka-cyan-rgb),.26), rgba(124,80,255,.2)); color: var(--ka-text-1); border-color: rgba(var(--ka-cyan-rgb),.55); box-shadow: 0 0 20px rgba(var(--ka-cyan-rgb),.5), inset 0 0 14px rgba(var(--ka-cyan-rgb),.16); text-shadow: 0 0 12px rgba(var(--ka-cyan-rgb),.85); } /* Invitation bar: centre the wording, chevron tucked to the right edge (no dead space) */ .ht-bar { justify-content: center; position: relative; } .ht-counts { justify-content: center; text-align: center; flex: 0 1 auto; } .ht-chev { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); margin: 0; } /* Progress bar now sits UNDER the top-left info box, both left-aligned (frees horizontal space) */ .hud-tl { left: 12px; } .levels-bar { left: 12px; top: 138px; bottom: 80px; } /* progress bar bottom aligns with the Control Bar bottom */ .levels-bar { bottom: max(80px, calc(env(safe-area-inset-bottom) + 76px)); } /* remove the protruding corner brackets on the Control Bar */ #nav::before, #nav::after { display: none !important; } /* ── Reusable identity box on My Walk / My Kingdom Group (same look as Kingdom Tree card) ── */ .idbox { display: inline-flex; flex-direction: column; align-items: stretch; align-self: flex-start; gap: 7px; margin-bottom: 16px; padding: 9px 16px 9px 9px; background: linear-gradient(150deg, rgba(30,130,210,.26), rgba(130,50,210,.22) 55%, rgba(7,14,28,.9)); border: 1.5px solid rgba(125,212,255,.6); border-radius: 18px; box-shadow: 0 10px 28px rgba(0,0,0,.55), 0 0 28px rgba(40,150,255,.3), 0 0 40px rgba(255,60,170,.1), inset 0 1px 0 rgba(255,255,255,.16); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); } .idbox-row { display: flex; align-items: center; gap: 12px; } .idbox-next { border-top: 1px solid rgba(125,212,255,.22); padding: 6px 2px 1px 4px; color: var(--ka-text-5); font-size: 11px; font-weight: 600; letter-spacing: .2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .idbox-next:empty { display: none; } .mk-idbox { align-self: flex-start; } /* ── My Kingdom Group: top row (id box left, generational dials right) ─────── */ .mk-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .mk-dials { display: flex; align-items: flex-end; justify-content: flex-end; gap: 9px; flex-wrap: wrap; max-width: 72%; } .mkd { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 58px; } .mkd-big { width: 78px; } .mkd-face { position: relative; width: 56px; height: 56px; display: flex; flex-direction: column; align-items: center; justify-content: center; } .mkd-big .mkd-face { width: 76px; height: 76px; } .mkd-face .dial-svg { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 0 3px rgba(25,228,255,.85)) drop-shadow(0 0 8px rgba(255,69,168,.5)); } .mkd-top, .mkd-bot { position: relative; z-index: 1; font-family: Orbitron, Inter, sans-serif; font-weight: 700; font-size: 12.5px; line-height: 1; letter-spacing: .2px; } .mkd-top { color: var(--ka-white); text-shadow: 0 0 8px rgba(25,228,255,.9), 0 0 16px rgba(25,228,255,.5); } .mkd-bot { color: var(--ka-text-4); text-shadow: 0 0 8px rgba(25,228,255,.6); } .mkd-div { position: relative; z-index: 1; width: 44%; height: 1px; margin: 3px 0; background: rgba(125,212,255,.55); box-shadow: 0 0 6px rgba(25,228,255,.7); } .mkd-big .mkd-top, .mkd-big .mkd-bot { font-size: 16px; } .mkd .dial-label { font-size: 8px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--ka-text-6); text-align: center; line-height: 1.15; margin-top: 1px; } @media (max-width: 560px) { .mk-dials { max-width: 100%; gap: 6px; } .mkd { width: 48px; } .mkd-face { width: 46px; height: 46px; } .mkd-top, .mkd-bot { font-size: 10.5px; } .mkd-big { width: 60px; } .mkd-big .mkd-face { width: 58px; height: 58px; } .mkd-big .mkd-top, .mkd-big .mkd-bot { font-size: 13px; } } /* KG name in the My-KG box doubles as a link to the group in the Kingdom Tree */ .mk-idbox .mk-name-link { cursor: pointer; transition: color .15s; } .mk-idbox .mk-name-link:hover { color: var(--ka-text-4); text-decoration: underline; text-decoration-color: rgba(var(--ka-cyan-rgb),.65); text-underline-offset: 2px; } /* ── Symmetric left (progress) ↔ right (controls) rails ───────────────────── */ /* levels 11 & 12 back to the normal size/brightness (only the CURRENT level stands out) */ .lvl-row[data-lvl="11"] .lvl-num, .lvl-row[data-lvl="12"] .lvl-num { font-size: 11px; color: var(--ka-text-5); text-shadow: 0 0 8px rgba(var(--ka-cyan-rgb),.9), 0 0 15px rgba(var(--ka-cyan-rgb),.5); } /* achieved levels (≤ current) get a filled-in background */ .lvl-row.done { background: linear-gradient(90deg, rgba(var(--ka-cyan-rgb),.2), rgba(var(--ka-cyan-rgb),.05)); } .lvl-row.current { background: linear-gradient(90deg, rgba(var(--ka-cyan-rgb),.34), rgba(var(--ka-cyan-rgb),.1)); } /* both rails: same top and bottom */ .levels-bar { top: max(8px, env(safe-area-inset-top)); bottom: max(80px, calc(env(safe-area-inset-bottom) + 76px)); } .hud-tl { left: 54px; } /* right controls → a vertical bar mirroring the levels bar (fixes the buttons drifting over the border) */ .ctrls { right: 6px; top: max(8px, env(safe-area-inset-top)); bottom: max(80px, calc(env(safe-area-inset-bottom) + 76px)); width: 40px; align-items: center; justify-content: space-evenly; gap: 4px; padding: 8px 0; z-index: 33; pointer-events: auto; background: linear-gradient(180deg, rgba(10,22,44,.93), rgba(28,12,50,.9)); border: 1px solid rgba(125,212,255,.45); border-radius: 14px; box-shadow: 0 10px 28px rgba(0,0,0,.55), 0 0 22px rgba(50,150,255,.2); -webkit-backdrop-filter: blur(11px); backdrop-filter: blur(11px); } .ctrls .ic { width: 32px; height: 32px; border-radius: 9px; font-size: 14px; background: rgba(10,30,42,.55); border: 1px solid rgba(var(--ka-cyan-rgb),.3); } #tree-pad { margin-top: 0; } .ctrls .dpad { grid-template-columns: repeat(3, 11px); grid-template-rows: repeat(3, 11px); gap: 1.5px; } .ctrls .dpad-b { width: 11px; height: 11px; font-size: 6.5px; border-radius: 3px; } /* shift the dials left so they sit beside the right rail (mirror of identity box ↔ levels rail) */ .hud-tr { right: 54px; } /* ── Rails start BELOW the top info boxes + brighter control squares + pad outside ── */ .levels-bar { top: calc(max(8px, env(safe-area-inset-top)) + 128px); } .ctrls { top: calc(max(8px, env(safe-area-inset-top)) + 128px); } /* glowing, bright control squares + symbols */ .ctrls .ic { width: 34px; height: 34px; border-radius: 10px; font-size: 15px; background: linear-gradient(150deg, rgba(var(--ka-cyan-rgb),.2), rgba(80,40,140,.24)); border: 1.5px solid rgba(var(--ka-cyan-rgb),.75); color: var(--ka-text-1); box-shadow: 0 0 12px rgba(var(--ka-cyan-rgb),.5), inset 0 0 9px rgba(var(--ka-cyan-rgb),.2); text-shadow: 0 0 8px rgba(var(--ka-cyan-rgb),.95), 0 0 14px rgba(var(--ka-cyan-rgb),.5); } .ctrls .ic:active { background: linear-gradient(150deg, rgba(var(--ka-cyan-rgb),.36), rgba(80,40,140,.32)); box-shadow: 0 0 16px rgba(var(--ka-cyan-rgb),.75), inset 0 0 12px rgba(var(--ka-cyan-rgb),.32); transform: scale(.92); } /* pan-pad OUTSIDE the bar, full usable size, bottom-right beside the rail */ #tree-pad { position: fixed; right: 54px; bottom: max(80px, calc(env(safe-area-inset-bottom) + 76px)); z-index: 33; margin: 0; pointer-events: auto; grid-template-columns: repeat(3, 27px); grid-template-rows: repeat(3, 27px); gap: 2px; } #tree-pad .dpad-b { width: 27px; height: 27px; font-size: 10px; border-radius: 8px; } /* align each rail's OUTER edge with the info box above it */ .hud-tl { left: 12px; } .levels-bar { left: 12px; } .hud-tr { right: 12px; } .ctrls { right: 12px; } #tree-pad { right: 60px; } /* auth logo: KINGDOM and ADVANCERS stacked, equal size */ .auth-logo { line-height: 1.04; } .auth-logo span { display: block; font-size: 30px; } /* scripture that fades in and out while signing in / connecting */ .auth-verse { position: fixed; left: 0; right: 0; bottom: 11%; z-index: 110; pointer-events: none; padding: 0 9%; text-align: center; font-family: Inter, system-ui, sans-serif; font-style: italic; font-size: 16px; line-height: 1.6; color: var(--ka-text-4); text-shadow: 0 0 18px rgba(var(--ka-cyan-rgb),.6), 0 0 36px rgba(var(--ka-cyan-rgb),.3); opacity: 0; } .auth-verse.show { animation: verseFade 6.5s ease-in-out infinite; } @keyframes verseFade { 0%, 100% { opacity: 0; } 22%, 72% { opacity: .95; } } /* verse: just below the connecting card + faster fade so it shows even during a brief connect */ .auth-verse { top: 62%; bottom: auto; font-size: 17px; } .auth-verse.show { animation: verseFade 3.4s ease-in-out infinite; } @keyframes verseFade { 0% { opacity: 0; } 16%, 66% { opacity: .96; } 100% { opacity: 0; } } /* verse bigger + lower (more space from the card) + attribution line; boot status line */ .auth-verse { top: 70%; font-size: 20px; } .av-quote { display: block; } .av-attr { display: block; margin-top: 10px; font-size: 14px; font-style: normal; color: var(--ka-text-5); text-shadow: 0 0 14px rgba(var(--ka-cyan-rgb),.4); } .auth-status { font-size: 11px; color: var(--ka-text-10); letter-spacing: .05em; margin-top: 5px; } /* ── Kingdom Economy (commercial division) ────────────────────────────────── */ #nav button { font-size: 10.5px; padding: 8px 9px; } /* fit the 4th tab */ /* ══════════════════════════════════════════════════════════════════ KINGDOM ECONOMY — premium commerce division ══════════════════════════════════════════════════════════════════ */ #screen-economy { display: none; position: fixed; inset: 0; flex-direction: column; padding: max(18px, env(safe-area-inset-top)) 16px 96px; overflow-y: auto; z-index: 20; background: radial-gradient(ellipse 70% 40% at 15% 5%, rgba(var(--ka-gold-rgb),.08) 0%, transparent 60%), radial-gradient(ellipse 80% 55% at 12% 8%, rgba(0,85,255,.12) 0%, transparent 60%), radial-gradient(ellipse 75% 55% at 90% 90%, rgba(102,0,204,.14) 0%, transparent 60%), radial-gradient(ellipse 60% 45% at 55% 50%, rgba(0,204,255,.05) 0%, transparent 70%), var(--ka-bg); box-shadow: inset 0 0 0 1.5px rgba(var(--ka-gold-rgb),.14), inset 0 0 60px rgba(var(--ka-cyan-rgb),.03); } body.view-economy #screen-economy { display: flex; } #screen-economy > * { flex-shrink: 0; } .ec-header { margin-bottom: 6px; padding-bottom: 14px; border-bottom: 1px solid rgba(var(--ka-gold-rgb),.12); } .ec-eyebrow { font-size: 9.5px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; background: linear-gradient(90deg, var(--ka-gold), var(--ka-gold-light), var(--ka-cyan)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .ec-title { font-size: 22px; font-weight: 900; color: var(--ka-text-1); margin-top: 4px; line-height: 1.2; letter-spacing: -.3px; } .ec-header-sub { font-size: 11px; font-weight: 500; color: var(--ka-text-10); margin-top: 5px; letter-spacing: .04em; } .ec-tabs { display: flex; gap: 8px; overflow: visible; flex-wrap: wrap; padding: 6px 0 16px; margin-bottom: 4px; scrollbar-width: none; } .ec-tabs::-webkit-scrollbar { display: none; } .ec-tab { flex: 0 0 auto; padding: 9px 18px; border-radius: 12px; border: 1px solid rgba(var(--ka-gold-rgb),.18); background: rgba(12,10,4,.5); color: var(--ka-text-5); font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: all .18s; } .ec-tab.on { border-color: var(--ka-gold); background: linear-gradient(135deg, rgba(var(--ka-gold-rgb),.18), rgba(var(--ka-warn-rgb),.07)); color: var(--ka-gold-pale); box-shadow: 0 0 18px rgba(var(--ka-gold-rgb),.22), inset 0 1px 0 rgba(255,255,255,.07); } .ec-body { display: flex; flex-direction: column; gap: 12px; padding-top: 4px; } .ec-body > .ec-note:first-child { margin-top: 2px; margin-bottom: 4px; } .ec-note { font-size: 12.5px; color: var(--ka-text-6); line-height: 1.55; } .ec-empty { text-align: center; padding: 28px 16px; color: var(--ka-text-11); font-size: 13px; line-height: 1.5; } .ec-opt { font-weight: 400; font-style: italic; color: var(--ka-text-10); } .ec-sec { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ka-text-6); margin: 14px 0 4px; padding-left: 10px; border-left: 2.5px solid rgba(var(--ka-cyan-rgb),.4); } .ec-mapbtn { width: 100%; padding: 14px 18px; border-radius: 14px; border: 1px solid rgba(var(--ka-cyan-rgb),.28); background: linear-gradient(135deg, rgba(22,60,90,.7), rgba(8,20,36,.8)); color: var(--ka-text-4); font-size: 14px; font-weight: 700; cursor: pointer; box-shadow: 0 0 20px rgba(var(--ka-cyan-rgb),.16), inset 0 1px 0 rgba(255,255,255,.05); text-align: left; display: flex; align-items: center; justify-content: space-between; transition: box-shadow .18s, border-color .18s; } .ec-mapbtn::after { content: '›'; font-size: 20px; opacity: .55; } .ec-mapbtn:hover { border-color: rgba(var(--ka-cyan-rgb),.5); box-shadow: 0 0 28px rgba(var(--ka-cyan-rgb),.26); } body.eco-map-mode #map-ctrl { display: none; } .ec-cats { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 4px; } .ec-cat { font-size: 10.5px; font-weight: 600; color: var(--ka-text-5); background: rgba(var(--ka-cyan-rgb),.06); border: 1px solid rgba(var(--ka-cyan-rgb),.16); border-radius: 999px; padding: 4px 11px; } .ec-cat.pick { cursor: pointer; transition: all .15s; } .ec-cat.pick:hover { background: rgba(var(--ka-cyan-rgb),.12); } .ec-cat.pick.on { background: rgba(var(--ka-cyan-rgb),.2); color: var(--ka-text-1); border-color: var(--ka-cyan); } .ec-co { background: linear-gradient(150deg, rgba(20,42,72,.45), rgba(42,20,72,.3) 60%, rgba(7,14,24,.6)); border: 1px solid rgba(var(--ka-cyan-rgb),.16); border-radius: 16px; padding: 14px 16px; cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .12s; position: relative; overflow: hidden; } .ec-co::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(180deg, var(--ka-cyan), rgba(var(--ka-cyan-rgb),.15)); border-radius: 3px 0 0 3px; opacity: 0; transition: opacity .15s; } .ec-co:hover { border-color: rgba(var(--ka-cyan-rgb),.36); box-shadow: 0 4px 20px rgba(var(--ka-cyan-rgb),.1); transform: translateY(-1px); } .ec-co:hover::before { opacity: 1; } .ec-co-top { display: flex; align-items: center; gap: 12px; } .ec-co-init { flex: 0 0 42px; height: 42px; border-radius: 12px; background: linear-gradient(135deg, rgba(var(--ka-cyan-rgb),.16), rgba(80,40,180,.22)); border: 1px solid rgba(var(--ka-cyan-rgb),.26); display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 900; color: var(--ka-text-4); font-family: Orbitron, Inter, sans-serif; } .ec-co-main { flex: 1; min-width: 0; } .ec-co-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .ec-co-name { font-size: 15px; font-weight: 700; color: var(--ka-text-1); } .ec-co-name.big { font-size: 19px; } .ec-spon { font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ka-surface-gold); background: var(--ka-gold); border-radius: 5px; padding: 2px 7px; } .ec-co-sub { font-size: 11.5px; color: var(--ka-text-8); margin-top: 2px; } .ec-co-tag { font-size: 13px; color: var(--ka-text-3); margin-top: 8px; line-height: 1.5; } .ec-co-vlabel { font-size: 12px; font-weight: 600; color: var(--ka-green); margin-top: 10px; display: flex; align-items: center; gap: 4px; } .ec-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 10px; } .ec-stat { background: rgba(8,14,24,.7); border: 1px solid rgba(var(--ka-cyan-rgb),.13); border-radius: 14px; padding: 14px 8px 12px; text-align: center; box-shadow: inset 0 1px 0 rgba(255,255,255,.04); } .ec-stat-i { font-size: 20px; } .ec-stat-v { font-size: 20px; font-weight: 900; color: var(--ka-text-4); font-family: Orbitron, Inter, sans-serif; text-shadow: 0 0 12px rgba(var(--ka-cyan-rgb),.4); margin-top: 4px; } .ec-stat-l { font-size: 9px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ka-text-9); margin-top: 4px; } .ec-voucher { border-radius: 14px; padding: 14px 16px; background: rgba(8,14,24,.65); border: 1.5px dashed rgba(var(--ka-cyan-rgb),.22); position: relative; } .ec-voucher.earned { border-style: solid; border-color: rgba(var(--ka-green-rgb),.45); background: linear-gradient(150deg, rgba(var(--ka-green-rgb),.07), rgba(8,14,24,.7)); box-shadow: 0 0 18px rgba(var(--ka-green-rgb),.1); } .ec-voucher.locked { opacity: .4; filter: grayscale(.3); } .ec-voucher.claimed { border-style: solid; border-color: rgba(var(--ka-gold-rgb),.38); background: linear-gradient(150deg, rgba(var(--ka-gold-rgb),.07), rgba(8,14,24,.7)); } .ec-v-reward { font-size: 15px; font-weight: 800; color: var(--ka-text-1); } .ec-v-by { font-size: 11.5px; color: var(--ka-text-8); margin-top: 3px; font-weight: 500; } .ec-v-for { font-size: 13px; color: var(--ka-text-3); margin-top: 6px; line-height: 1.4; } .ec-v-redeem, .ec-v-claim { margin-top: 12px; padding: 9px 18px; border-radius: 10px; border: 1.5px solid var(--ka-cyan); background: rgba(var(--ka-cyan-rgb),.1); color: var(--ka-text-4); font-size: 13px; font-weight: 700; cursor: pointer; box-shadow: 0 0 14px rgba(var(--ka-cyan-rgb),.18); transition: all .15s; } .ec-v-redeem:hover { background: rgba(var(--ka-cyan-rgb),.18); } .ec-v-claim.claimed { border-color: rgba(var(--ka-green-rgb),.38); color: var(--ka-green-text); background: rgba(var(--ka-green-rgb),.07); box-shadow: none; cursor: default; } .ec-biz { background: linear-gradient(150deg, rgba(var(--ka-cyan-rgb),.07), rgba(80,40,180,.1) 60%, rgba(7,14,24,.65)); border: 1px solid rgba(var(--ka-cyan-rgb),.26); border-radius: 16px; padding: 16px 18px; box-shadow: 0 0 24px rgba(var(--ka-cyan-rgb),.05); } .ec-biz-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .ec-biz-name { font-size: 19px; font-weight: 900; color: var(--ka-text-1); letter-spacing: -.2px; } .ec-biz-edit { font-size: 11.5px; font-weight: 600; color: var(--ka-cyan); background: rgba(var(--ka-cyan-rgb),.09); border: 1px solid rgba(var(--ka-cyan-rgb),.28); border-radius: 8px; padding: 5px 12px; cursor: pointer; white-space: nowrap; } .ec-biz-contact { font-size: 13px; color: var(--ka-text-7); margin-top: 5px; } .ec-register { text-align: center; padding: 24px 16px 16px; border: 1px solid rgba(var(--ka-gold-rgb),.18); border-radius: 16px; background: linear-gradient(150deg, rgba(var(--ka-gold-rgb),.07), rgba(80,40,180,.08), rgba(7,14,24,.6)); } .ec-reg-icon { font-size: 44px; line-height: 1; margin-bottom: 10px; } .ec-reg-head { font-size: 18px; font-weight: 900; color: var(--ka-text-1); letter-spacing: -.2px; } .ec-reg-sub { font-size: 13px; color: var(--ka-text-6); margin-top: 8px; line-height: 1.6; } .ec-reg-btn { width: 100%; padding: 14px; border-radius: 14px; background: linear-gradient(135deg, var(--ka-gold), var(--ka-gold-light)); border: none; color: var(--ka-surface-gold-dark); font-size: 15px; font-weight: 800; cursor: pointer; box-shadow: 0 0 28px rgba(var(--ka-gold-rgb),.38); transition: box-shadow .18s, transform .12s; } .ec-reg-btn:hover { box-shadow: 0 0 36px rgba(var(--ka-gold-rgb),.52); transform: translateY(-1px); } .ec-reg-msg { font-size: 12px; margin-top: 8px; } .ec-reg-msg.err { color: var(--ka-error); } .ec-commit { display: flex; align-items: flex-start; gap: 9px; font-size: 12.5px; color: var(--ka-text-6); line-height: 1.5; cursor: pointer; } .ec-commit input[type=checkbox] { margin-top: 1px; flex-shrink: 0; accent-color: var(--ka-gold); } .ec-field { display: flex; flex-direction: column; gap: 6px; } .ec-field label { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ka-text-8); } .ec-in { padding: 11px 14px; background: rgba(4,10,20,.7); border: 1px solid rgba(var(--ka-cyan-rgb),.18); border-radius: 11px; color: var(--ka-text-1); font-size: 14px; font-family: inherit; outline: none; transition: border-color .18s, box-shadow .18s; } .ec-in:focus { border-color: rgba(var(--ka-cyan-rgb),.52); box-shadow: 0 0 0 3px rgba(var(--ka-cyan-rgb),.07); } .ec-in::placeholder { color: var(--ka-text-12); } .ec-catpick { display: flex; flex-wrap: wrap; gap: 6px; } .ec-buy { align-self: stretch; width: 100%; padding: 13px 22px; border-radius: 12px; border: 1.5px solid rgba(var(--ka-cyan-rgb),.42); background: rgba(var(--ka-cyan-rgb),.09); color: var(--ka-text-4); font-size: 14px; font-weight: 700; cursor: pointer; box-shadow: 0 0 16px rgba(var(--ka-cyan-rgb),.13); transition: all .18s; } .ec-buy:hover { background: rgba(var(--ka-cyan-rgb),.16); box-shadow: 0 0 24px rgba(var(--ka-cyan-rgb),.22); } .ec-buy.on { background: rgba(var(--ka-gold-rgb),.14); border-color: var(--ka-gold); color: var(--ka-gold-pale); box-shadow: 0 0 18px rgba(var(--ka-gold-rgb),.18); } .ecm-dot { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(10,30,42,.92); border: 2px solid var(--c); box-shadow: 0 0 10px var(--c), inset 0 0 6px rgba(255,255,255,.12); color: var(--ka-gold-light); font-size: 14px; line-height: 1; } .ecm-dot.spon { background: radial-gradient(circle at 40% 35%, rgba(255,228,160,.97), rgba(255,180,60,.88)); border-color: var(--ka-gold-pale); box-shadow: 0 0 16px rgba(255,200,80,.9), 0 0 30px rgba(255,180,60,.45); color: var(--ka-gold-badge); font-weight: 900; } .ecm-spon { font-size: 8.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--ka-gold-badge); background: var(--ka-gold-light); border-radius: 4px; padding: 1px 6px; vertical-align: middle; } .ecm-vc { font-size: 12px; font-weight: 700; color: var(--ka-green-text); margin-right: auto; align-self: center; } /* Profile — Kingdom Rewards (achievement vouchers earned through Kingdom impact) */ .pf-rewards { display: flex; flex-direction: column; gap: 8px; } .pf-reward { border: 1px solid rgba(var(--ka-warn-rgb),.4); border-radius: 14px; padding: 12px 14px; background: linear-gradient(150deg, rgba(var(--ka-warn-rgb),.1), rgba(120,80,20,.08) 60%, rgba(8,14,24,.5)); box-shadow: 0 0 14px rgba(255,200,80,.12); } .pf-rw-reward { font-size: 14.5px; font-weight: 700; color: var(--ka-gold-pale); } .pf-rw-by { font-size: 11.5px; color: var(--ka-gold-dim); margin-top: 2px; } .pf-rw-for { font-size: 12px; color: var(--ka-text-6); margin-top: 4px; } .pf-rw-redeem { margin-top: 10px; padding: 8px 16px; border-radius: 10px; border: 1.5px solid var(--ka-gold-light); background: rgba(var(--ka-warn-rgb),.14); color: var(--ka-gold-pale); font-size: 12.5px; font-weight: 700; cursor: pointer; } .pf-rw-redeem:hover { background: rgba(var(--ka-warn-rgb),.24); } /* Voucher management, seasonal campaigns & featured listings */ .ec-vform { border: 1px solid rgba(var(--ka-cyan-rgb),.16); border-radius: 16px; padding: 16px; background: rgba(6,12,22,.55); } .ec-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } @media (max-width: 520px) { .ec-grid2 { grid-template-columns: 1fr; } } .ec-vmsg { font-size: 12px; margin-top: 8px; } .ec-vmsg.err { color: var(--ka-error); } .ec-vlist { display: flex; flex-direction: column; gap: 10px; margin-bottom: 8px; } .ec-vmrow { border: 1px solid rgba(var(--ka-cyan-rgb),.14); border-radius: 14px; padding: 13px 15px; background: rgba(8,14,24,.65); } .ec-vm-top { display: flex; align-items: flex-start; gap: 10px; justify-content: space-between; } .ec-vm-benefit { font-size: 14px; font-weight: 700; color: var(--ka-text-1); } .ec-vm-type { font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 3px 8px; border-radius: 6px; white-space: nowrap; background: rgba(var(--ka-cyan-rgb),.1); color: var(--ka-text-5); border: 1px solid rgba(var(--ka-cyan-rgb),.25); } .ec-vm-type.achievement { background: rgba(var(--ka-gold-rgb),.1); color: var(--ka-gold-pale); border-color: rgba(var(--ka-gold-rgb),.35); } .ec-vm-meta { font-size: 11.5px; color: var(--ka-text-9); margin-top: 6px; } .ec-vm-stats { font-size: 11.5px; color: var(--ka-green-text); margin-top: 4px; } .ec-vm-del { margin-top: 10px; font-size: 11px; padding: 5px 12px; border-radius: 8px; background: rgba(var(--ka-error-rgb),.07); border: 1px solid rgba(var(--ka-error-rgb),.22); color: var(--ka-error); cursor: pointer; } .ec-season { border: 1px solid rgba(var(--ka-gold-rgb),.28); border-radius: 16px; padding: 14px 16px; background: linear-gradient(135deg, rgba(var(--ka-gold-rgb),.1), rgba(120,60,210,.07) 60%, rgba(8,14,24,.5)); box-shadow: 0 0 24px rgba(var(--ka-gold-rgb),.07); } .ec-season-head { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ka-gold-pale); margin-bottom: 10px; } .ec-season-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 7px 0; border-top: 1px solid rgba(var(--ka-gold-rgb),.1); } .ec-season-row:first-of-type { border-top: none; } .ec-season-co { font-size: 13px; font-weight: 600; color: var(--ka-text-1); } .ec-season-you { font-size: 9px; font-weight: 800; color: var(--ka-surface-gold); background: var(--ka-gold); border-radius: 5px; padding: 2px 6px; margin-left: 5px; } .ec-season-offer { font-size: 12px; color: var(--ka-gold-dim); text-align: right; max-width: 55%; } .ec-featrow { display: flex; gap: 12px; overflow-x: auto; padding: 2px 0 10px; margin-bottom: 2px; scrollbar-width: none; } .ec-featrow::-webkit-scrollbar { display: none; } .ec-feat { flex: 0 0 210px; position: relative; overflow: hidden; border: 1.5px solid rgba(var(--ka-gold-rgb),.42); border-radius: 16px; padding: 16px 16px 14px; background: linear-gradient(150deg, rgba(var(--ka-gold-rgb),.13), rgba(120,60,210,.1) 60%, rgba(8,14,24,.7)); box-shadow: 0 0 20px rgba(var(--ka-gold-rgb),.13), inset 0 1px 0 rgba(255,255,255,.05); cursor: pointer; transition: transform .15s, box-shadow .15s; } .ec-feat::before { content: '★'; position: absolute; top: 10px; right: 12px; font-size: 12px; color: var(--ka-gold); opacity: .75; } .ec-feat:hover { transform: translateY(-3px); box-shadow: 0 6px 28px rgba(var(--ka-gold-rgb),.2); } .ec-feat-name { font-size: 14.5px; font-weight: 800; color: var(--ka-gold-pale); line-height: 1.2; padding-right: 22px; } .ec-feat-cat { font-size: 11px; color: var(--ka-text-4); margin-top: 4px; } .ec-feat-tag { font-size: 12px; color: var(--ka-text-5); margin-top: 7px; line-height: 1.45; } .ec-feat-v { font-size: 11.5px; font-weight: 600; color: var(--ka-green); margin-top: 10px; } /* right control rail → cyan-tinted background like the achieved levels (00–04); glow kept INSIDE so it never floats over the boundary */ .ctrls { overflow: hidden; background: linear-gradient(180deg, rgba(var(--ka-cyan-rgb),.18), rgba(var(--ka-cyan-rgb),.05)), linear-gradient(180deg, rgba(10,22,44,.92), rgba(28,12,50,.9)); box-shadow: 0 8px 22px rgba(0,0,0,.5), 0 0 16px rgba(50,150,255,.14); } .ctrls .ic { box-shadow: 0 0 8px rgba(var(--ka-cyan-rgb),.45), inset 0 0 8px rgba(var(--ka-cyan-rgb),.2); } /* Control-rail hover tooltip (rendered on body so the rail's overflow:hidden can't clip it) */ #ctrl-tip { position: fixed; z-index: 60; pointer-events: none; padding: 6px 10px; border-radius: 9px; font-size: 12px; font-weight: 600; white-space: nowrap; background: rgba(10,22,44,.95); color: var(--ka-text-4); border: 1px solid rgba(var(--ka-cyan-rgb),.4); box-shadow: 0 6px 20px rgba(0,0,0,.5); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); opacity: 0; transform: translateX(5px); transition: opacity .12s ease, transform .12s ease; } #ctrl-tip.show { opacity: 1; transform: translateX(0); } body.theme-light #ctrl-tip { background: rgba(255,255,255,.98); color: #1a3a8c; border-color: rgba(26,58,140,.28); box-shadow: 0 6px 20px rgba(26,58,140,.18); } /* Control rail divider between nav and cluster buttons */ .ctrls-div { width: 60%; height: 1px; background: rgba(var(--ka-cyan-rgb),.22); margin: 2px auto; flex-shrink: 0; } /* Letter-icon cluster buttons get a slightly different tint to distinguish from zoom/nav */ .ctrls .ic-letter { font-family: Orbitron, Inter, sans-serif; font-size: 13px; font-weight: 700; color: var(--ka-text-4); border-color: rgba(var(--ka-cyan-rgb),.5); letter-spacing: .03em; } #btn-cluster-new { color: var(--ka-green); border-color: rgba(var(--ka-green-rgb),.55); } #btn-cluster-new:hover { box-shadow: 0 0 16px rgba(var(--ka-green-rgb),.45); } #btn-collapse { color: var(--ka-text-4); } /* Invite button: green tint + count badge */ #btn-ht { color: var(--ka-green); border-color: rgba(var(--ka-green-rgb),.5); position: relative; } #btn-ht:hover { box-shadow: 0 0 16px rgba(var(--ka-green-rgb),.4); } .ic-badge { position: absolute; top: -4px; right: -4px; min-width: 15px; height: 15px; padding: 0 3px; background: var(--ka-ruby); color: var(--ka-white); font-size: 9px; font-weight: 800; line-height: 15px; border-radius: 999px; text-align: center; font-family: Inter, system-ui, sans-serif; pointer-events: none; } /* ===== Clusters & Constellations browse screens ===== */ #screen-clusters, #screen-constellations { position: fixed; inset: 0; flex-direction: column; padding: max(18px, env(safe-area-inset-top)) 16px max(80px, env(safe-area-inset-bottom)); overflow-y: auto; z-index: 23; background: var(--ka-bg); } body.view-clusters #screen-clusters, body.view-constellations #screen-constellations { display: flex; } body.view-clusters #nav, body.view-constellations #nav { display: none; } .cl-list { display: flex; flex-direction: column; gap: 8px; padding: 4px 0 16px; } .cl-group { display: flex; flex-direction: column; gap: 6px; } .cl-group-head { font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ka-text-9); margin: 10px 0 4px; } .cl-row { background: rgba(8,18,28,.65); border: 1px solid rgba(var(--ka-cyan-rgb),.18); border-radius: 14px; padding: 13px 15px; cursor: default; } .cl-row.mine { border-color: rgba(var(--ka-cyan-rgb),.45); background: rgba(8,30,50,.7); box-shadow: 0 0 12px rgba(var(--ka-cyan-rgb),.12); } .cl-name { font-size: 14.5px; font-weight: 700; color: var(--ka-text-1); } .cl-name::before { content: '◈ '; font-size: 10px; color: var(--ka-cyan); opacity: .7; } .cl-meta { font-size: 12px; color: var(--ka-text-7); margin-top: 4px; } .cl-empty { text-align: center; padding: 32px 16px; color: var(--ka-text-10); font-size: 14px; line-height: 1.7; } /* Constellation rows get a magenta tint */ #screen-constellations .cl-name::before { content: '⬟ '; color: var(--ka-magenta); } #screen-constellations .cl-row.mine { border-color: rgba(255,100,180,.45); background: rgba(30,8,28,.7); box-shadow: 0 0 12px rgba(255,100,180,.12); } /* ===== Nations dashboard ===== */ #screen-nations { position: fixed; inset: 0; flex-direction: column; z-index: 20; background: var(--ka-bg); overflow: hidden; } body.view-nations #screen-nations { display: flex; } #screen-nations .wd-top { flex-shrink: 0; padding: max(18px, env(safe-area-inset-top)) 16px 10px; background: rgba(4,4,15,.97); } .nt-tab-strip { flex-shrink: 0; display: flex; gap: 0; padding: 0 12px; background: rgba(4,4,15,.97); border-bottom: 1px solid rgba(var(--ka-cyan-rgb),.1); } .nt-tab-btn { flex: 1; padding: 10px 4px 8px; border: none; border-bottom: 2.5px solid transparent; background: transparent; color: var(--ka-text-11); font-size: 11px; font-weight: 700; cursor: pointer; transition: color .18s, border-color .18s; white-space: nowrap; } .nt-tab-btn.on { color: var(--ka-text-4); border-bottom-color: var(--ka-cyan); text-shadow: 0 0 10px rgba(var(--ka-cyan-rgb),.4); } .nations-body { flex: 1; overflow-y: auto; padding: 12px 16px max(80px, env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 10px; } /* stat cards */ .nt-stat-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; } .nt-stat-card { background: linear-gradient(160deg, rgba(8,18,36,.95), rgba(4,10,22,.9)); border: 1px solid rgba(var(--ka-cyan-rgb),.14); border-radius: 14px; padding: 12px 8px 10px; text-align: center; position: relative; overflow: hidden; } .nt-sc-bar { position: absolute; top: 0; left: 0; right: 0; height: 2.5px; } .nt-sc-icon { font-size: 18px; margin-bottom: 5px; line-height: 1; } .nt-sc-val { font-family: Orbitron, Inter, sans-serif; font-size: min(17px, 4.5vw); font-weight: 700; line-height: 1.1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nt-sc-lbl { font-size: 9px; color: var(--ka-text-7); margin-top: 4px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } /* world map */ .nt-map-wrap { border-radius: 14px; overflow: hidden; border: 1px solid rgba(var(--ka-cyan-rgb),.18); position: relative; } .nt-map-eyebrow { position: absolute; top: 9px; left: 12px; font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: rgba(var(--ka-cyan-rgb),.8); z-index: 2; pointer-events: none; } .nt-world-svg { display: block; width: 100%; height: auto; } /* section head */ .nt-sec-head { font-size: 11px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; color: var(--ka-text-5); padding: 8px 0 4px; } /* bar chart */ .nt-chart-wrap { display: flex; flex-direction: column; gap: 0; padding-top: 4px; } .nt-chart-head { display: flex; align-items: baseline; gap: 8px; padding: 0 0 6px; } .nt-chart-title { font-size: 13px; font-weight: 800; color: var(--ka-text-2); } .nt-chart-metric { font-size: 9.5px; color: var(--ka-text-11); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; } .nt-period-row { display: flex; gap: 6px; margin-bottom: 14px; } .nt-ptab { flex: 1; padding: 8px 2px; border-radius: 9px; border: 1px solid rgba(var(--ka-cyan-rgb),.14); background: rgba(8,18,34,.7); color: var(--ka-text-11); font-size: 11px; font-weight: 700; cursor: pointer; transition: all .15s; } .nt-ptab.on { border-color: var(--ka-cyan); background: rgba(var(--ka-cyan-rgb),.12); color: var(--ka-text-4); text-shadow: 0 0 8px rgba(var(--ka-cyan-rgb),.4); } .nt-chart-rows { display: flex; flex-direction: column; gap: 5px; } .nt-brow { display: grid; grid-template-columns: 68px 20px 1fr 52px; align-items: center; gap: 4px; padding: 3px 0; border-bottom: 1px solid rgba(var(--ka-cyan-rgb),.04); } .nt-brow:last-child { border-bottom: none; } .nt-brow-name { font-size: 10px; font-weight: 600; color: var(--ka-text-2); text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nt-brow-flag { font-size: 14px; text-align: center; line-height: 1; } .nt-brow-bar { height: 20px; background: rgba(var(--ka-cyan-rgb),.06); border-radius: 3px 6px 6px 3px; overflow: hidden; } .nt-bar-fill { height: 100%; border-radius: 3px 6px 6px 3px; width: 0; } .nt-bar-val { font-size: 9px; font-weight: 700; color: var(--ka-text-4); font-family: Orbitron, Inter, sans-serif; text-align: right; } /* legacy card classes kept for backwards compat */ .nt-totals { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .nt-card { background: linear-gradient(145deg, rgba(var(--ka-cyan-rgb),.10), rgba(153,0,255,.10) 60%, rgba(8,18,28,.55)); border: 1px solid rgba(var(--ka-cyan-rgb),.22); border-radius: 14px; padding: 14px; text-align: center; } .nt-val { font-family: Orbitron, Inter, sans-serif; font-size: 22px; font-weight: 700; color: var(--ka-text-4); text-shadow: 0 0 14px rgba(var(--ka-cyan-rgb),.5); } .nt-lbl { font-size: 10.5px; color: var(--ka-text-6); margin-top: 4px; } .nt-cont { border: 1px solid rgba(var(--ka-cyan-rgb),.28); border-radius: 16px; background: rgba(10,22,44,.75); overflow: hidden; } .nt-cont-head { font-size: 13px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--ka-cyan); padding: 7px 14px 5px; display: flex; align-items: center; justify-content: space-between; gap: 8px; } .nt-cont-name { flex: 1; } .nt-cont-summary { font-size: 11.5px; color: var(--ka-text-4); padding: 0 14px 10px; border-bottom: 1px solid rgba(var(--ka-cyan-rgb),.14); } .nt-country { padding: 10px 14px; border-bottom: 1px solid rgba(var(--ka-cyan-rgb),.07); } .nt-country:last-child { border-bottom: none; } .nt-country-head { font-size: 13px; font-weight: 700; color: var(--ka-text-2); } .nt-country-row { font-size: 11.5px; color: var(--ka-text-5); margin-top: 3px; } .nt-state { display: flex; align-items: center; gap: 10px; margin-top: 7px; flex-wrap: wrap; } .nt-state-name { font-size: 11px; font-weight: 600; color: var(--ka-text-4); background: rgba(var(--ka-cyan-rgb),.08); border: 1px solid rgba(var(--ka-cyan-rgb),.2); border-radius: 8px; padding: 2px 9px; } .nt-state-kgs { font-size: 11px; color: var(--ka-text-8); } .nt-cities { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; padding-left: 2px; } .nt-city { font-size: 10.5px; color: var(--ka-text-7); background: rgba(10,30,50,.5); border: 1px solid rgba(var(--ka-cyan-rgb),.1); border-radius: 6px; padding: 1px 8px; } /* ===== Cluster link rows ===== */ .cl-link { cursor: pointer; color: var(--ka-cyan); text-shadow: 0 0 8px rgba(var(--ka-cyan-rgb),.35); } .cl-link:hover { text-shadow: 0 0 14px rgba(var(--ka-cyan-rgb),.6); } .cl-row[data-clroot] { cursor: pointer; position: relative; } .cl-row[data-clroot]:hover { border-color: rgba(var(--ka-cyan-rgb),.45); } /* Collapse / explode toggle on own clusters */ .cl-toggle { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); background: none; border: 1px solid rgba(var(--ka-cyan-rgb),.35); border-radius: 6px; color: var(--ka-cyan); font-size: 18px; line-height: 1; padding: 2px 7px; cursor: pointer; opacity: .75; transition: opacity .15s; } .cl-toggle:hover { opacity: 1; border-color: rgba(var(--ka-cyan-rgb),.8); } .cl-toggle.collapsed { color: var(--ka-magenta); border-color: rgba(255,128,255,.5); } .cl-row.mine { padding-right: 52px; } /* ══════════════════════════════════════════════════════════════════ MY JOURNEY — two-bar progress screen (under My Profile) ══════════════════════════════════════════════════════════════════ */ #screen-journey { position: fixed; inset: 0; z-index: 26; flex-direction: column; overflow: hidden; padding: max(18px, env(safe-area-inset-top)) 0 0; background: var(--ka-bg); } body.view-journey #screen-journey { display: flex; } body.view-journey #nav { display: none; } /* Three-column layout */ .jrn-layout { flex: 1; display: grid; grid-template-columns: 1fr 1fr 1.55fr; min-height: 0; padding: 6px 8px 8px; gap: 6px; } /* Each column */ .jrn-col { display: flex; flex-direction: column; min-height: 0; } .jrn-col-head { font-size: 9px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--ka-text-10); padding: 0 4px 5px; text-align: center; flex-shrink: 0; line-height: 1.2; } .jrn-em { color: var(--ka-cyan); font-style: normal; display: block; font-size: 10.5px; font-weight: 900; margin-top: 2px; letter-spacing: 0; } /* Static progress bars (always-expanded variant of .levels-bar) */ .jrn-bar { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; background: linear-gradient(180deg, rgba(10,22,44,.95), rgba(28,12,50,.92)); border: 1px solid rgba(125,212,255,.38); border-radius: 12px; box-shadow: 0 0 18px rgba(50,150,255,.14); } /* Force detail visible (overrides the .levels-bar hover-only rule) */ .jrn-bar .lvl-detail { opacity: 1 !important; transition: none; } .jrn-bar .lvl-name { font-size: 9.5px; white-space: nowrap; } .jrn-bar .lvl-desc { display: none; } .jrn-bar .lvl-track { height: 3px; } .jrn-bar .lvl-num { flex-basis: 18px; font-size: 10px; } .jrn-bar .lvl-row { padding: 0 4px; gap: 4px; min-height: 22px; } /* Suppress oversized L11/L12 numbers inside journey bars */ .jrn-bar .lvl-row[data-lvl="11"] .lvl-num, .jrn-bar .lvl-row[data-lvl="12"] .lvl-num { font-size: 10.5px; font-weight: 700; color: var(--ka-text-1); text-shadow: 0 0 7px rgba(var(--ka-cyan-rgb),.75), 0 0 14px rgba(var(--ka-cyan-rgb),.4); } /* Phase dividers (KG journey bar only) */ .jrn-phase-div { padding: 7px 8px 5px; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: rgba(var(--ka-cyan-rgb),.9); background: rgba(var(--ka-cyan-rgb),.09); border-top: 1.5px solid rgba(var(--ka-cyan-rgb),.35); border-bottom: 1px solid rgba(var(--ka-cyan-rgb),.12); flex-shrink: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 0 12px rgba(var(--ka-cyan-rgb),.4); } /* Dashboard column */ .jrn-col-dash { overflow-y: auto; padding-right: 1px; } .jrn-dash-head { font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ka-text-8); padding-bottom: 7px; border-bottom: 1px solid rgba(var(--ka-cyan-rgb),.12); margin-bottom: 10px; } /* Stats */ .jrn-stats-row { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; } .jrn-stat { display: flex; align-items: center; gap: 7px; background: rgba(8,14,24,.72); border: 1px solid rgba(var(--ka-cyan-rgb),.12); border-radius: 11px; padding: 7px 9px; } .jrn-stat-ic { font-size: 15px; flex-shrink: 0; } .jrn-stat-info { flex: 1; min-width: 0; } .jrn-stat-val { font-family: Orbitron, Inter, sans-serif; font-size: 17px; font-weight: 900; line-height: 1; text-shadow: 0 0 10px currentColor; } .jrn-stat-lbl { font-size: 8.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ka-text-9); margin-top: 2px; } /* Period tabs */ .jrn-period-tabs { display: flex; gap: 4px; margin-bottom: 10px; } .jrn-ptab { flex: 1; padding: 6px 2px; border-radius: 8px; border: 1px solid rgba(var(--ka-cyan-rgb),.18); background: rgba(8,14,24,.5); color: var(--ka-text-7); font-size: 10px; font-weight: 700; cursor: pointer; text-align: center; transition: all .15s; } .jrn-ptab.on { border-color: var(--ka-cyan); background: rgba(var(--ka-cyan-rgb),.12); color: var(--ka-text-4); box-shadow: 0 0 10px rgba(var(--ka-cyan-rgb),.2); } /* Growth graphs */ #jrn-graphs { display: flex; flex-direction: column; gap: 10px; } .jrn-graph { background: rgba(6,12,22,.65); border: 1px solid rgba(var(--ka-cyan-rgb),.12); border-radius: 12px; padding: 9px; } .jrn-graph-head { display: flex; align-items: center; gap: 7px; margin-bottom: 6px; } .jrn-graph-icon { font-size: 14px; flex-shrink: 0; } .jrn-graph-meta { flex: 1; min-width: 0; } .jrn-graph-label { font-size: 8.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ka-text-9); } .jrn-graph-val { font-size: 16px; font-weight: 900; font-family: Orbitron, Inter, sans-serif; line-height: 1.1; text-shadow: 0 0 8px currentColor; } .jrn-spark { display: block; width: 100%; height: 44px; overflow: visible; } /* Profile: My Journey entry button */ .pf-journey-btn { width: 100%; padding: 12px 16px; border-radius: 14px; border: 1px solid rgba(var(--ka-cyan-rgb),.22); background: linear-gradient(135deg, rgba(22,60,90,.5), rgba(8,20,36,.65)); color: var(--ka-text-4); font-size: 14px; font-weight: 700; cursor: pointer; text-align: left; display: flex; align-items: center; justify-content: space-between; box-shadow: 0 0 14px rgba(var(--ka-cyan-rgb),.07); transition: all .15s; } .pf-journey-btn::after { content: '›'; font-size: 18px; opacity: .55; } .pf-journey-btn:hover { border-color: rgba(var(--ka-cyan-rgb),.42); box-shadow: 0 0 22px rgba(var(--ka-cyan-rgb),.14); } /* ===== Nations drill-down ===== */ .nt-cont-flags { font-size: 14px; letter-spacing: 2px; opacity: .85; line-height: 1; flex-shrink: 0; } .nt-country-tap { cursor: pointer; } .nt-country-tap:hover .nt-country-head { color: var(--ka-text-4); } .nt-chevron { font-size: 11px; color: var(--ka-cyan); margin-left: 4px; opacity: .8; } .nt-drill-sec { font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ka-cyan); opacity: .75; margin: 10px 0 5px; padding-left: 2px; } .nt-drill-row { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; padding: 5px 0; border-bottom: 1px solid rgba(var(--ka-cyan-rgb),.06); } .nt-drill-row:last-child { border-bottom: none; } .nt-drill-name { font-size: 13px; font-weight: 700; color: var(--ka-text-2); flex-shrink: 0; } .nt-drill-name.cl-link { color: var(--ka-cyan); cursor: pointer; } .nt-drill-meta { font-size: 11.5px; color: var(--ka-text-8); } /* ===== Kingdom Company registration ===== */ .ec-register { text-align: center; padding: 10px 0 18px; } .ec-reg-icon { font-size: 44px; margin-bottom: 10px; filter: drop-shadow(0 0 18px rgba(var(--ka-cyan-rgb),.4)); } .ec-reg-head { font-size: 19px; font-weight: 800; color: var(--ka-text-1); margin-bottom: 6px; } .ec-reg-sub { font-size: 13px; color: var(--ka-text-6); line-height: 1.55; margin: 0; } .ec-opt { font-size: 10px; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--ka-text-10); } .ec-commit { display: flex; align-items: flex-start; gap: 10px; font-size: 12.5px; color: var(--ka-text-5); line-height: 1.5; cursor: pointer; padding: 10px 13px; background: rgba(var(--ka-cyan-rgb),.05); border: 1px solid rgba(var(--ka-cyan-rgb),.15); border-radius: 10px; } .ec-commit input[type=checkbox] { flex-shrink: 0; margin-top: 2px; accent-color: var(--ka-cyan); width: 16px; height: 16px; } .ec-reg-msg { font-size: 12.5px; min-height: 18px; color: var(--ka-green); } .ec-reg-msg.err { color: var(--ka-error-bright); } .ec-reg-btn { width: 100%; padding: 14px; border-radius: 13px; border: 1.5px solid var(--ka-green); background: rgba(8,30,18,.7); color: var(--ka-green); font-size: 15px; font-weight: 800; cursor: pointer; box-shadow: 0 0 22px rgba(var(--ka-green-rgb),.3); letter-spacing: .02em; } .ec-reg-btn:hover { box-shadow: 0 0 32px rgba(var(--ka-green-rgb),.45); } .ec-biz-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .ec-biz-edit { font-size: 11px; font-weight: 700; color: var(--ka-text-7); background: transparent; border: 1px solid rgba(var(--ka-cyan-rgb),.25); border-radius: 8px; padding: 4px 11px; cursor: pointer; flex-shrink: 0; } .ec-biz-contact { font-size: 12px; color: var(--ka-text-7); margin-top: 4px; } /* ═══════════════════════════════════════════════════════ MOBILE OPTIMISATIONS — max-width: 430px (overrides the ≤440px dial/gauge blocks above) ═══════════════════════════════════════════════════════ */ @media (max-width: 430px) { /* ── 1. HUD: shrink both sides so they never overlap ── */ .hud-tl { max-width: calc(100vw - 196px); padding: 7px 11px 7px 8px; gap: 5px; } .id-gauge { width: 50px; height: 50px; flex-basis: 50px; } .id-gauge .avatar { width: 34px; height: 34px; font-size: 12px; } .who-name { font-size: 13px; } .who-level { font-size: 10px; } .hud-next { font-size: 10px; letter-spacing: 0; } .hud-tr { padding: 6px 8px; gap: 6px; } .dial { width: 44px; gap: 2px; } .dial-face { width: 42px; height: 42px; } .dial-num { font-size: 12px; } .dial-num.long { font-size: 10px; } .dial-label { font-size: 6.5px; letter-spacing: .06em; } /* ── 2. Bottom nav: tighter to fit 5 tabs ── */ #nav { padding: 5px; gap: 3px; border-radius: 18px; } #nav button { font-size: 9px; padding: 8px 6px; border-radius: 12px; letter-spacing: 0; } /* ── 3. D-pad: bigger touch targets (27 → 36px) ── */ #tree-pad { right: 58px; bottom: max(80px, calc(env(safe-area-inset-bottom) + 76px)); grid-template-columns: repeat(3, 36px); grid-template-rows: repeat(3, 36px); gap: 3px; } #tree-pad .dpad-b { width: 36px; height: 36px; font-size: 13px; border-radius: 9px; } /* ── 4. Journey screen: vertical stack instead of 3 columns ── */ .jrn-layout { grid-template-columns: 1fr; grid-template-rows: 200px 200px 1fr; overflow-y: auto; } .jrn-bar { min-height: 0; } .jrn-col-dash { overflow-y: visible; min-height: 240px; } .jrn-ptabs { gap: 4px; } .jrn-ptab { font-size: 9px; padding: 5px 9px; } /* ── 5. Profile KPIs: 2 columns on mobile ── */ .pf-kpis { grid-template-columns: repeat(2, 1fr); } /* ── 6. My KG top row: stack vertically ── */ .mk-top { flex-direction: column; } .mk-dials { max-width: 100%; justify-content: flex-start; } /* ── 7. Nations: 2 stat columns + tighter bar rows ── */ .nt-stat-grid { grid-template-columns: 1fr 1fr; } .nt-brow { grid-template-columns: 52px 16px 1fr 44px; gap: 3px; } .nt-brow-name { font-size: 9px; } .nt-bar-val { font-size: 8px; } .nt-tab-btn { font-size: 9.5px; padding: 9px 3px 8px; } /* ── 8. Canvas controls: 36px for reachable touch targets ── */ .ctrls .ic { width: 36px; height: 36px; font-size: 15px; } /* ── 9. Today action cards: bigger touch target ── */ .act { min-height: 62px; padding: 14px 12px; } .dash-open { padding: 15px 13px; } /* ── 10. Bottom info bar: clear nav ── */ .bottombar { bottom: max(120px, calc(env(safe-area-inset-bottom) + 116px)); width: min(97vw, 420px); } /* ── 11. Modals and sheets: more vertical space ── */ .person-sheet { max-height: 94vh; } .mpick-sheet { max-height: 80vh; } .auth-card { width: min(94%, calc(100vw - 32px)); padding: 20px 16px; } /* ── 12. Economy tabs: wrap on mobile ── */ .ec-tabs { flex-wrap: wrap; gap: 6px; } .ec-tab { font-size: 12px; padding: 8px 12px; } /* ── 13. Plant picker: larger leader rows ── */ .pp-row { padding: 10px; } /* ── 14. Act check-in sheet: full height ── */ .ci-complete { padding: 15px; } /* ── 15. Holding-tank bar: full mobile width, bigger text ── */ #holding-tank { left: 6px; right: 6px; width: auto; transform: none; } .ht-bar { padding: 13px 14px; font-size: 15px; } .ht-count { font-size: 15px; } .neon-num { font-size: 1.3em; } } /* ═══════════════════════════════════════════════════════ EXTRA SMALL PHONES — max-width: 375px (iPhone SE, compact Android — tighter than the 430px block) ═══════════════════════════════════════════════════════ */ @media (max-width: 375px) { /* Nav overflows at this width — make it horizontally scrollable */ #nav { overflow-x: auto; scrollbar-width: none; justify-content: flex-start; } #nav::-webkit-scrollbar { display: none; } #nav button { flex: 0 0 auto; } /* HUD identity: tighter than the 430px block */ .hud-tl { max-width: calc(100vw - 162px); } .id-gauge { width: 44px; height: 44px; flex-basis: 44px; } .id-gauge .avatar { width: 30px; height: 30px; font-size: 10px; } .who-name { font-size: 11.5px; } /* Dials: even more compact */ .dial { width: 38px; gap: 2px; } .dial-face { width: 36px; height: 36px; } .dial-num { font-size: 10px; } .dial-num.long { font-size: 8.5px; } .dial-label { font-size: 5.5px; } /* Control rail: compact but tappable */ .ctrls { width: 40px; } .ctrls .ic { width: 32px; height: 32px; font-size: 13px; } .hud-tr { right: 46px; } #tree-pad { right: 46px; grid-template-columns: repeat(3, 30px); grid-template-rows: repeat(3, 30px); } #tree-pad .dpad-b { width: 30px; height: 30px; font-size: 11px; } /* Auth card: near full width */ .auth-card { width: min(97%, calc(100vw - 16px)); padding: 18px 12px; } /* Dashboard stat cards: single column at extreme small */ .dash-cards { grid-template-columns: 1fr; } } /* ═══════════════════════════════════════════════════════ TABLET PORTRAIT — min-width: 768px Content centred in a 680px column; larger touch targets ═══════════════════════════════════════════════════════ */ @media (min-width: 768px) { /* ── Content screens: auto side margins → ~680px reading column ── */ #screen-mykg, #screen-today, #screen-dashboard, #screen-word, #screen-ministry, #screen-team, #screen-profile, #screen-clusters, #screen-constellations, #screen-directory, #screen-economy { padding-left: max(20px, calc((100vw - 680px) / 2)); padding-right: max(20px, calc((100vw - 680px) / 2)); } /* Nations: sub-elements carry their own L/R padding */ #screen-nations .wd-top { padding-left: max(16px, calc((100vw - 680px) / 2)); padding-right: max(16px, calc((100vw - 680px) / 2)); } .nt-tab-strip { padding-left: max(12px, calc((100vw - 680px) / 2)); padding-right: max(12px, calc((100vw - 680px) / 2)); } .nations-body { padding-left: max(16px, calc((100vw - 680px) / 2)); padding-right: max(16px, calc((100vw - 680px) / 2)); } /* Messages: sub-elements carry their own L/R padding */ #screen-messages .wd-top { padding-left: max(16px, calc((100vw - 680px) / 2)); padding-right: max(16px, calc((100vw - 680px) / 2)); } .msg-body { padding-left: max(12px, calc((100vw - 680px) / 2)); padding-right: max(12px, calc((100vw - 680px) / 2)); } .msg-composer { padding-left: max(12px, calc((100vw - 680px) / 2)); padding-right: max(12px, calc((100vw - 680px) / 2)); } /* Journey: centred grid, restore 3-column */ .jrn-layout { max-width: 860px; margin: 0 auto; width: 100%; grid-template-columns: 1fr 1fr 2fr; grid-template-rows: unset; overflow-y: unset; } .jrn-col-dash { overflow-y: auto; min-height: unset; } /* ── Bottom nav: larger tap targets on tablet ── */ #nav { gap: 8px; padding: 8px; } #nav button { font-size: 13px; padding: 12px 20px; } /* ── Auth card: wider on tablet ── */ .auth-card { max-width: 460px; width: 78%; } /* ── Grids: more columns on tablet ── */ .dash-cards { grid-template-columns: repeat(3, 1fr); } .pf-kpis { grid-template-columns: repeat(3, 1fr); } /* undo mobile 2-col */ .nt-stat-grid { grid-template-columns: repeat(3, 1fr); } .nt-totals { grid-template-columns: repeat(4, 1fr); } .yt-channels-grid { grid-template-columns: repeat(4, 1fr); } .tm-grid { grid-template-columns: repeat(3, 1fr); } .dcards2 { grid-template-columns: repeat(4, 1fr); } /* ── Modals and sheets: constrained width + centred ── */ .person-sheet { max-width: 540px; max-height: 84vh; } .mpick-overlay { justify-content: center; } .mpick-sheet { max-width: 540px; border-radius: 18px; } /* ── Bottom info bar: wider ── */ .bottombar { width: min(68vw, 560px); } /* ── Level bar: hidden by default on tablet/desktop (toggled via ‹ button) ── */ .hud-tl { left: 12px; } /* ── My KG top row: side-by-side stays comfortable ── */ .mk-top { flex-direction: row; align-items: flex-start; } .mk-dials { max-width: 65%; } } /* ═══════════════════════════════════════════════════════ TABLET LANDSCAPE / LARGE TABLET — min-width: 1024px 800px content column; more generous grid columns ═══════════════════════════════════════════════════════ */ @media (min-width: 1024px) { /* ── Widen content column to 800px ── */ #screen-mykg, #screen-today, #screen-dashboard, #screen-word, #screen-ministry, #screen-team, #screen-profile, #screen-clusters, #screen-constellations, #screen-directory, #screen-economy { padding-left: max(24px, calc((100vw - 800px) / 2)); padding-right: max(24px, calc((100vw - 800px) / 2)); } #screen-nations .wd-top { padding-left: max(20px, calc((100vw - 800px) / 2)); padding-right: max(20px, calc((100vw - 800px) / 2)); } .nt-tab-strip { padding-left: max(14px, calc((100vw - 800px) / 2)); padding-right: max(14px, calc((100vw - 800px) / 2)); } .nations-body { padding-left: max(20px, calc((100vw - 800px) / 2)); padding-right: max(20px, calc((100vw - 800px) / 2)); } #screen-messages .wd-top { padding-left: max(20px, calc((100vw - 800px) / 2)); padding-right: max(20px, calc((100vw - 800px) / 2)); } .msg-body { padding-left: max(16px, calc((100vw - 800px) / 2)); padding-right: max(16px, calc((100vw - 800px) / 2)); } .msg-composer { padding-left: max(16px, calc((100vw - 800px) / 2)); padding-right: max(16px, calc((100vw - 800px) / 2)); } /* Journey: wider dashboard column */ .jrn-layout { max-width: 960px; grid-template-columns: 1fr 1fr 2.2fr; } /* ── Nav: desktop sizing ── */ #nav { gap: 10px; } #nav button { font-size: 14px; padding: 13px 24px; } /* ── Grids: more columns on large tablet ── */ .dash-cards { grid-template-columns: repeat(4, 1fr); } .yt-channels-grid { grid-template-columns: repeat(5, 1fr); } .tm-grid { grid-template-columns: repeat(4, 1fr); } } /* ===== Mobile sidebar toggle buttons ===== */ .sidebar-tog { position: fixed; z-index: 36; display: none; align-items: center; justify-content: center; touch-action: manipulation; cursor: pointer; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); background: linear-gradient(170deg, rgba(14,34,60,.95), rgba(28,14,56,.92)); border: 1px solid rgba(125,212,255,.5); color: var(--ka-cyan); transition: box-shadow .18s, border-color .18s; box-shadow: 0 4px 16px rgba(0,0,0,.5), 0 0 10px rgba(50,150,255,.15); user-select: none; -webkit-user-select: none; } .sidebar-tog-l { left: 0; top: 50%; transform: translateY(-50%); width: 22px; height: 60px; border-left: none; border-radius: 0 14px 14px 0; } .sidebar-tog-r { right: 0; top: 50%; transform: translateY(-50%); width: 22px; height: 60px; border-right: none; border-radius: 14px 0 0 14px; } .sidebar-tog-l::before { content: '›'; font-size: 16px; font-weight: 700; } body.levels-open .sidebar-tog-l::before { content: '‹'; } .sidebar-tog-r::before { content: '‹'; font-size: 16px; font-weight: 700; } body.ctrls-open .sidebar-tog-r::before { content: '›'; } body.levels-open .sidebar-tog-l, body.ctrls-open .sidebar-tog-r { border-color: rgba(125,212,255,.8); box-shadow: 0 4px 16px rgba(0,0,0,.5), 0 0 20px rgba(var(--ka-cyan-rgb),.4); } /* LEFT TOGGLE: global — applies on both mobile and desktop */ .sidebar-tog-l { transition: left .28s cubic-bezier(.2,.7,.2,1); } body.view-tree.levels-open .sidebar-tog-l { left: min(260px, 80vw); border-left: 1px solid rgba(125,212,255,.5); border-radius: 8px; } /* RIGHT TOGGLE: mirrors the left toggle — slides with the ctrls rail */ .sidebar-tog-r { transition: right .28s cubic-bezier(.2,.7,.2,1); } body.view-tree.ctrls-open .sidebar-tog-r { /* rail pill occupies 6–46px from the right; sit the handle fully left of it with an 8px gap so it never covers the buttons */ right: 54px; border-right: 1px solid rgba(125,212,255,.5); border-radius: 8px; } @media (max-width: 768px) { body.view-tree .sidebar-tog-l { display: flex; } body.view-tree .sidebar-tog-r { display: flex; } /* LEFT RAIL: hide off-screen; slide in when open */ body.view-tree .levels-bar { left: -300px; border-radius: 0 14px 14px 0; transition: left .28s cubic-bezier(.2,.7,.2,1); } body.view-tree.levels-open .levels-bar { left: 0; bottom: max(80px, calc(env(safe-area-inset-bottom) + 76px)); } /* RIGHT RAIL: slide in from right; toggle moves with it (see .sidebar-tog-r above) */ body.view-tree .ctrls { right: -50px; transition: right .28s cubic-bezier(.2,.7,.2,1); } body.view-tree.ctrls-open .ctrls { right: 6px; bottom: max(80px, calc(env(safe-area-inset-bottom) + 76px)); } /* NAV BAR: bigger, bolder labels */ #nav button { font-size: 12.5px !important; font-weight: 700 !important; padding: 9px 10px !important; } #nav { overflow-x: auto; scrollbar-width: none; flex-wrap: nowrap; } #nav::-webkit-scrollbar { display: none; } #nav::-webkit-scrollbar { display: none; } /* DIALS: slightly bigger numbers + labels */ .dial { width: 60px; } .dial-face { width: 58px; height: 58px; } .dial-num { font-size: 17px; } .dial-num.long { font-size: 14px; } .dial-label { font-size: 8px; } /* INFO BOX: cap width so it doesn't collide with dials */ .hud-tl { max-width: calc(55vw - 8px); } } @media (min-width: 769px) { /* Right sidebar toggle hidden on desktop; left toggle shown for progress bar */ .sidebar-tog-r { display: none !important; } body.view-tree .sidebar-tog-l { display: flex; } /* LEFT RAIL: hidden by default, slides in when levels-open */ body.view-tree .levels-bar { left: -300px; border-radius: 0 14px 14px 0; transition: left .28s cubic-bezier(.2,.7,.2,1) !important; } body.view-tree.levels-open .levels-bar { left: 0; } /* Right rail and D-pad stay fixed in place on desktop */ body.view-tree .ctrls { right: 6px !important; transition: none !important; } body.view-tree #tree-pad { right: 60px !important; transition: none !important; } } /* ── Narrow phones (≤430px): tighter dials + hard right-anchor on info box ────────────── Dials: 3×48px + 2×6px gaps + 16px h-padding = 172px total; at right:12px their left edge lands at (viewport - 184px). Anchoring hud-tl right to 192px gives a guaranteed 8px gap regardless of viewport width or how long the user's name is. ──────────────── */ @media (max-width: 430px) { .dial { width: 48px; } .dial-face { width: 46px; height: 46px; } .dial-num { font-size: 14px; } .dial-num.long { font-size: 11px; } .dial-label { font-size: 7px; } /* controls rail is hidden on mobile — reset right so dials sit 12px from edge */ .hud-tr { right: 12px; gap: 6px; padding: 6px 8px; } /* stretch hud-tl between left:12 and right:192 — leaves exactly 8px gap to the dials */ .hud-tl { right: 192px; max-width: none; overflow: hidden; } /* NAV: tighter buttons so all 5 tabs are reachable without crowding */ #nav { gap: 2px !important; } #nav button { font-size: 11px !important; padding: 7px 7px !important; letter-spacing: 0 !important; } } /* Mode Bar on phones: span full width and fit all five tabs, wrapping long labels under the icon */ @media (max-width: 600px) { #nav { left: 8px; right: 8px; transform: none; width: auto; max-width: none; gap: 2px !important; padding: 5px 3px !important; overflow-x: visible; } #nav button { flex: 1 1 0; min-width: 0; white-space: normal; font-size: 9.5px !important; padding: 6px 2px !important; gap: 3px; letter-spacing: 0 !important; } #nav .nav-lbl { line-height: 1.06; } #nav .nav-ic { width: 20px; height: 20px; } } /* ═══════════════════════════════════════════════════════ KINGDOM ADVANCERS MANUAL MODAL ═══════════════════════════════════════════════════════ */ .manual-modal { position: fixed; inset: 0; z-index: 9000; background: rgba(0,0,0,.82); display: none; align-items: flex-end; justify-content: center; } .manual-modal.open { display: flex; } .manual-inner { width: 100%; max-width: 680px; height: 92dvh; background: #07111a; border-radius: 22px 22px 0 0; border: 1.5px solid rgba(22,224,255,.3); box-shadow: 0 -12px 64px rgba(0,0,0,.7), 0 0 48px rgba(22,224,255,.08); display: flex; flex-direction: column; overflow: hidden; } .manual-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px 12px; border-bottom: 1px solid rgba(22,224,255,.15); flex: 0 0 auto; } .manual-header-title { font-family: Orbitron, Inter, sans-serif; font-size: 14px; font-weight: 700; color: #16E0FF; letter-spacing: .06em; } .manual-close { background: none; border: none; color: rgba(174,243,255,.7); font-size: 26px; line-height: 1; cursor: pointer; padding: 0 4px; transition: color .15s; } .manual-close:hover { color: #fff; } .manual-body { flex: 1; overflow-y: auto; padding: 0 0 32px; -webkit-overflow-scrolling: touch; } /* Manual typography */ .man-cover { padding: 40px 28px 32px; text-align: center; border-bottom: 1px solid rgba(22,224,255,.12); } .man-logo { font-family: Orbitron, Inter, sans-serif; font-size: 20px; font-weight: 800; color: #16E0FF; letter-spacing: .1em; text-shadow: 0 0 18px rgba(22,224,255,.7); margin-bottom: 8px; } .man-subtitle { font-size: 15px; color: rgba(174,243,255,.9); font-weight: 600; margin-bottom: 6px; } .man-version { font-size: 11px; color: rgba(174,243,255,.5); } .man-toc { padding: 18px 22px 12px; border-bottom: 1px solid rgba(22,224,255,.1); display: flex; flex-direction: column; gap: 2px; } .man-toc-title { font-size: 10px; font-weight: 700; letter-spacing: .12em; color: rgba(22,224,255,.6); text-transform: uppercase; margin-bottom: 8px; } .man-toc-item { display: block; padding: 5px 8px; font-size: 12.5px; color: rgba(174,243,255,.75); text-decoration: none; border-radius: 7px; transition: background .13s, color .13s; } .man-toc-item:hover { background: rgba(22,224,255,.08); color: #aef3ff; } .man-section { padding: 28px 22px 4px; border-bottom: 1px solid rgba(22,224,255,.08); } .man-sec-num { font-family: Orbitron, Inter, sans-serif; font-size: 10px; font-weight: 700; letter-spacing: .15em; color: rgba(22,224,255,.45); margin-bottom: 4px; } .man-sec-title { font-family: Orbitron, Inter, sans-serif; font-size: 16px; font-weight: 800; color: #16E0FF; text-shadow: 0 0 14px rgba(22,224,255,.5); margin: 0 0 16px; line-height: 1.25; } .man-section h3.man-h3 { font-size: 13px; font-weight: 700; color: rgba(174,243,255,.9); margin: 18px 0 7px; letter-spacing: .02em; } .man-section p { font-size: 13px; line-height: 1.65; color: rgba(174,243,255,.72); margin: 0 0 10px; } .man-list { margin: 0 0 12px; padding-left: 18px; } .man-list li { font-size: 13px; line-height: 1.6; color: rgba(174,243,255,.72); margin-bottom: 5px; } .man-ol { margin: 0 0 12px; padding-left: 20px; } .man-ol li { font-size: 13px; line-height: 1.6; color: rgba(174,243,255,.72); margin-bottom: 5px; } .man-callout { background: rgba(22,224,255,.06); border: 1px solid rgba(22,224,255,.18); border-radius: 10px; padding: 12px 14px; font-size: 12.5px; line-height: 1.6; color: rgba(174,243,255,.82); margin: 12px 0; } .man-callout strong { color: #aef3ff; } .man-phase-block { background: rgba(22,224,255,.04); border-left: 3px solid rgba(22,224,255,.3); border-radius: 0 9px 9px 0; padding: 10px 14px; margin: 10px 0; } .man-phase-label { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(22,224,255,.6); margin-bottom: 8px; } .man-phase-intro { font-size: 12.5px; color: rgba(174,243,255,.65); margin-bottom: 8px; } .man-level-row { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 7px; font-size: 12.5px; color: rgba(174,243,255,.72); line-height: 1.5; } .man-lvl-badge { flex: 0 0 auto; background: rgba(22,224,255,.12); border: 1px solid rgba(22,224,255,.3); border-radius: 6px; padding: 2px 7px; font-family: Orbitron, Inter, sans-serif; font-size: 10px; font-weight: 700; color: #16E0FF; white-space: nowrap; } .man-lvl-badge.man-lvl-ka { background: rgba(255,69,168,.12); border-color: rgba(255,69,168,.35); color: #FF45A8; } .man-value { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 14px; } .man-value-icon { font-size: 18px; color: #16E0FF; flex: 0 0 22px; margin-top: 1px; } .man-value-name { font-size: 13px; font-weight: 700; color: #aef3ff; margin-bottom: 4px; } .man-value p { margin: 0; font-size: 12.5px; color: rgba(174,243,255,.68); line-height: 1.6; } .man-pwm-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin: 12px 0; } .man-pwm-card { background: rgba(22,224,255,.05); border: 1px solid rgba(22,224,255,.15); border-radius: 10px; padding: 12px 10px; } .man-pwm-letter { font-family: Orbitron, Inter, sans-serif; font-size: 22px; font-weight: 800; color: #16E0FF; text-shadow: 0 0 14px rgba(22,224,255,.7); margin-bottom: 2px; } .man-pwm-word { font-size: 11px; font-weight: 700; color: rgba(174,243,255,.85); margin-bottom: 6px; } .man-pwm-card p { font-size: 11px; color: rgba(174,243,255,.62); line-height: 1.55; margin: 0; } .man-table { width: 100%; border-collapse: collapse; margin: 8px 0 14px; font-size: 12.5px; } .man-table td { padding: 7px 8px; color: rgba(174,243,255,.72); border-bottom: 1px solid rgba(22,224,255,.08); vertical-align: top; } .man-table td:first-child { color: #aef3ff; white-space: nowrap; padding-right: 14px; width: 120px; } .man-badge-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 12.5px; color: rgba(174,243,255,.72); } .man-badge { padding: 2px 7px; border-radius: 5px; font-size: 11px; font-weight: 700; } .man-badge-l { background: rgba(22,224,255,.15); color: #16E0FF; } .man-badge-p { background: rgba(124,255,178,.15); color: #7cffb2; } .man-badge-h { background: rgba(255,200,100,.15); color: #ffc864; } .man-flag-grid { display: flex; flex-direction: column; gap: 8px; margin: 8px 0; } .man-flag-card { display: flex; gap: 12px; align-items: flex-start; background: rgba(22,224,255,.04); border: 1px solid rgba(22,224,255,.12); border-radius: 10px; padding: 11px 13px; } .man-flag-badge { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; flex: 0 0 28px; background: rgba(22,224,255,.15); color: #16E0FF; border: 1px solid rgba(22,224,255,.3); } .man-flag-badge.man-flag-p { background: rgba(124,255,178,.15); color: #7cffb2; border-color: rgba(124,255,178,.3); } .man-flag-badge.man-flag-h { background: rgba(255,200,100,.15); color: #ffc864; border-color: rgba(255,200,100,.3); } .man-flag-card strong { font-size: 13px; color: #aef3ff; display: block; margin-bottom: 3px; } .man-flag-card p { font-size: 12px; color: rgba(174,243,255,.68); line-height: 1.55; margin: 0; } .man-role-row { margin-bottom: 14px; } .man-role-row strong { font-size: 13px; color: #aef3ff; display: block; margin-bottom: 3px; } .man-role-row p { font-size: 12.5px; color: rgba(174,243,255,.7); line-height: 1.6; margin: 0; } .man-footer { padding: 28px 22px 20px; text-align: center; border-top: 1px solid rgba(22,224,255,.12); } .man-footer-logo { font-family: Orbitron, Inter, sans-serif; font-size: 13px; font-weight: 700; color: rgba(22,224,255,.55); letter-spacing: .1em; margin-bottom: 12px; } .man-footer p { font-size: 12px; color: rgba(174,243,255,.55); line-height: 1.65; margin: 0 0 8px; } .man-footer-verse { font-style: italic; color: rgba(174,243,255,.45) !important; } /* Signup agree checkbox */ .su-agree-wrap { display: flex; align-items: flex-start; gap: 10px; margin: 14px 0 4px; cursor: pointer; } .su-agree-wrap input[type="checkbox"] { width: 18px; height: 18px; flex: 0 0 18px; margin-top: 1px; accent-color: #16E0FF; cursor: pointer; } .su-agree-text { font-size: 12.5px; color: rgba(174,243,255,.75); line-height: 1.55; } .su-agree-link { background: none; border: none; padding: 0; color: #16E0FF; text-decoration: underline; font-size: 12.5px; cursor: pointer; font-family: inherit; } .su-agree-link:hover { color: #aef3ff; } /* Profile Manual button (in profile VIEW, not just edit modal) */ .pf-manual-profile-btn { display: block; width: calc(100% - 32px); margin: 18px 16px 24px; padding: 15px; border-radius: 14px; background: rgba(22,224,255,.07); border: 1.5px solid rgba(22,224,255,.28); color: #16E0FF; font-size: 14px; font-weight: 600; cursor: pointer; text-align: center; transition: background .15s, border-color .15s; } .pf-manual-profile-btn:hover { background: rgba(22,224,255,.13); border-color: rgba(22,224,255,.45); } /* Profile Manual button (edit modal) */ .pf-manual-btn { width: 100%; margin-top: 10px; padding: 13px; border-radius: 14px; background: rgba(22,224,255,.07); border: 1.5px solid rgba(22,224,255,.22); color: #16E0FF; font-size: 14px; font-weight: 600; cursor: pointer; transition: background .15s, border-color .15s; } /* ===================================================================== WHITE / LIGHT MODE — premium classic navy-on-white theme Toggle: body.theme-light (applied by ui.js; persisted in localStorage) ===================================================================== */ body.theme-light { /* Brand accent: cyan → royal navy */ --ka-cyan: #1a3a8c; --ka-cyan-rgb: 26, 58, 140; --ka-cyan-bright: #2452b0; --ka-cyan-dim: #3a66c4; --ka-blue: #1a3a8c; --ka-blue-rgb: 26, 58, 140; --ka-blue-light: #5a7ec8; --ka-violet: #3d2e9a; --ka-violet-rgb: 61, 46, 154; --ka-violet-light: #6a52d4; --ka-violet-mid: #5842c2; /* Backgrounds → clean white / soft pearl */ --ka-bg-void: #ffffff; --ka-bg: #f4f6fb; --ka-bg-screen: #f0f3fa; --ka-bg-card: #ffffff; --ka-bg-ring: #dce6f8; --ka-bg-popup: #ffffff; --ka-bg-tag: #dce8f8; /* Surfaces → light */ --ka-surface: #e6eef8; --ka-surface-2: #dbe5f4; --ka-surface-3: #ccd8ee; --ka-surface-active: #d2e0f2; --ka-surface-hover: #c6d4ec; --ka-bubble: #e8eef8; --ka-surface-deep: #bccaec; --ka-surface-gold: #faf0d8; --ka-surface-gold-dark: #f0e0b8; /* Text scale: dark navy hierarchy (inverted from the cyan-on-black scale) */ --ka-text-1: #0a1628; --ka-text-2: #152342; --ka-text-3: #1c2e52; --ka-text-4: #1a3a8c; --ka-text-5: #2450a8; --ka-text-6: #3b62b8; --ka-text-7: #5478c8; --ka-text-8: #6b8ed8; --ka-text-9: #8caae2; --ka-text-10: #a8c0ee; --ka-text-11: #c4d6f8; --ka-text-12: #d8e4fc; /* Glass presets → soft white wash */ --ka-glass: linear-gradient(150deg, rgba(26,58,140,.06), rgba(26,58,200,.04) 55%, rgba(240,243,250,.88)); --ka-glass-soft: linear-gradient(150deg, rgba(26,58,140,.04), rgba(26,58,200,.03) 58%, rgba(240,243,250,.92)); /* Semantic — darken warn/error for legibility on white */ --ka-warn: #b07a10; --ka-warn-rgb: 176, 122, 16; --ka-warn-2: #c08820; --ka-warn-gold: #c89020; --ka-warn-3: #d4a030; --ka-error: #c83040; --ka-error-rgb: 200, 48, 64; --ka-error-mid: #d03050; --ka-error-bright: #e03860; /* Vivid accents → muted, legible on white */ --ka-gold: #7a5200; --ka-gold-rgb: 122, 82, 0; --ka-gold-light: #8a6010; --ka-gold-pale: #603800; --ka-gold-dim: #5c3e00; --ka-gold-badge: #fffbf0; --ka-green: #1a6b3c; --ka-green-rgb: 26, 107, 60; --ka-green-text: #155e34; --ka-violet-light: #5c3aa0; --ka-violet-mid: #4c2a90; --ka-violet: #5434b0; --ka-violet-rgb: 84, 52, 176; --ka-magenta: #8c2060; --ka-pink: #a01840; --ka-bg-ring: #dde5f4; --ka-bubble: #dde5f4; background: var(--ka-bg); } /* ── Canvas stage ── */ body.theme-light #stage { background: #f4f6fb !important; } /* ── Frame corner accent lines ── */ body.theme-light #app-frame::before, body.theme-light #app-frame::after { border-color: rgba(26,58,140,.30) !important; } /* ── HUD info boxes ── */ body.theme-light .hud-tl, body.theme-light .hud-tr { background: rgba(255,255,255,.97) !important; border-color: rgba(26,58,140,.20) !important; box-shadow: 0 4px 18px rgba(0,0,0,.07), 0 0 0 1px rgba(26,58,140,.07) !important; color: var(--ka-text-1) !important; } /* ── Bottom nav bar ── */ body.theme-light #nav { background: rgba(248,250,255,.98) !important; border-color: rgba(26,58,140,.25) !important; box-shadow: 0 -2px 16px rgba(0,0,0,.06) !important; } body.theme-light #nav button { color: rgba(26,58,140,.60) !important; } body.theme-light #nav button.on { background: rgba(26,58,140,.10) !important; color: rgba(26,58,140,.95) !important; } body.theme-light #nav button.on::after { background: rgba(26,58,140,.75) !important; } /* ── Control rail ── */ body.theme-light .ctrls { background: rgba(248,250,255,.97) !important; border-color: rgba(26,58,140,.20) !important; box-shadow: 0 2px 12px rgba(0,0,0,.06) !important; } body.theme-light .ic { background: rgba(255,255,255,.92) !important; border-color: rgba(26,58,140,.25) !important; color: #1a3a8c !important; box-shadow: 0 1px 6px rgba(0,0,0,.07) !important; } body.theme-light .ic:hover, body.theme-light .ic:active { background: rgba(26,58,140,.10) !important; } body.theme-light .sidebar-tog-l, body.theme-light .sidebar-tog-r { background: rgba(248,250,255,.97) !important; border-color: rgba(26,58,140,.25) !important; color: #1a3a8c !important; } body.theme-light .ctrls-div { border-color: rgba(26,58,140,.18) !important; } /* ── Levels / progress bar ── */ body.theme-light .levels-bar { background: rgba(248,250,255,.97) !important; border-color: rgba(26,58,140,.18) !important; } /* ── KG floating label ── */ body.theme-light .kglabel { background: rgba(255,255,255,.97) !important; border-color: rgba(26,58,140,.28) !important; color: var(--ka-text-2) !important; box-shadow: 0 4px 14px rgba(0,0,0,.09) !important; } /* ── Plant button ── */ body.theme-light #btn-plant { background: linear-gradient(135deg, #1a3a8c, #2452b0 55%, #3a5cc8) !important; color: #ffffff !important; box-shadow: 0 4px 18px rgba(26,58,140,.30) !important; } /* ── Holding tank ── */ body.theme-light #holding-tank { background: rgba(244,246,251,.97) !important; border-color: rgba(26,58,140,.22) !important; } body.theme-light .ht-bar { background: rgba(248,250,255,.95) !important; border-color: rgba(26,58,140,.28) !important; color: var(--ka-text-2) !important; } body.theme-light .ht-count { color: var(--ka-text-3) !important; text-shadow: none !important; } body.theme-light .neon-num { text-shadow: 0 0 6px rgba(26,58,140,.35) !important; color: var(--ka-text-4) !important; } body.theme-light .ht-person-card { background: rgba(255,255,255,.97) !important; border-color: rgba(26,58,140,.16) !important; color: var(--ka-text-2) !important; } /* ── Auth / sign-up card ── */ body.theme-light .auth-card { background: linear-gradient(160deg, rgba(244,247,255,.98), rgba(236,242,255,.99)) !important; border-color: rgba(26,58,140,.20) !important; box-shadow: 0 20px 60px rgba(0,0,0,.10), 0 0 40px rgba(26,58,140,.06) !important; } body.theme-light .auth-input { background: rgba(255,255,255,.92) !important; border-color: rgba(26,58,140,.22) !important; color: var(--ka-text-1) !important; } body.theme-light .auth-input:focus { border-color: #1a3a8c !important; box-shadow: 0 0 0 3px rgba(26,58,140,.10) !important; } body.theme-light .auth-or { color: var(--ka-text-8) !important; } body.theme-light .auth-or::before, body.theme-light .auth-or::after { border-color: rgba(26,58,140,.18) !important; } /* ── WHITE-MODE: Connecting / boot overlay backdrop + scripture ── */ body.theme-light .auth, body.theme-light #boot { background: rgba(238,243,252,.88) !important; -webkit-backdrop-filter: blur(7px) !important; backdrop-filter: blur(7px) !important; } body.theme-light .auth-logo { text-shadow: none !important; } body.theme-light .auth-sub { color: rgba(26,58,140,.62) !important; } body.theme-light .auth-status { color: rgba(26,58,140,.55) !important; } body.theme-light .auth-verse { color: #1a3a8c !important; text-shadow: 0 1px 0 rgba(255,255,255,.5) !important; } body.theme-light .av-attr { color: rgba(26,58,140,.68) !important; text-shadow: none !important; } /* ── Primary buttons ── */ body.theme-light .mk-btn.solid, body.theme-light .ci-complete:not(:disabled), body.theme-light .wd-done:not(:disabled), body.theme-light .auth-go, body.theme-light .dash-open, body.theme-light .plant-btn { background: linear-gradient(135deg, #1a3a8c, #2452b0 55%, #3a5cc8) !important; color: #ffffff !important; box-shadow: 0 4px 18px rgba(26,58,140,.32), 0 0 0 1px rgba(26,58,140,.10) !important; } /* ── Full-screen panels ── */ body.theme-light #screen-dashboard, body.theme-light #screen-word, body.theme-light #screen-ministry, body.theme-light #screen-messages, body.theme-light #screen-profile, body.theme-light #screen-directory, body.theme-light #screen-mykg, body.theme-light #screen-today, body.theme-light #screen-nations, body.theme-light #screen-clusters, body.theme-light #screen-constellations, body.theme-light #screen-team { background: var(--ka-bg-screen) !important; } body.theme-light #screen-economy { background: radial-gradient(ellipse 70% 40% at 15% 5%, rgba(122,82,0,.07) 0%, transparent 60%), radial-gradient(ellipse 75% 55% at 90% 90%, rgba(84,52,176,.04) 0%, transparent 60%), #f8f3e8 !important; box-shadow: inset 0 0 0 1.5px rgba(122,82,0,.09) !important; } /* ── Cards, rows, surfaces ── */ body.theme-light .dcard { background: rgba(255,255,255,.96) !important; border-color: rgba(26,58,140,.14) !important; box-shadow: 0 4px 14px rgba(0,0,0,.07), inset 0 1px 0 rgba(255,255,255,.9) !important; } body.theme-light .dcard2 { background: rgba(255,255,255,.97) !important; border-color: rgba(26,58,140,.13) !important; } body.theme-light .dconsist { background: rgba(255,255,255,.95) !important; border-color: rgba(26,58,140,.13) !important; } body.theme-light .act, body.theme-light .td-card, body.theme-light .mrow, body.theme-light .mk-joined-row, body.theme-light .dir-row, body.theme-light .mk-req-row, body.theme-light .pc-tree, body.theme-light .dtree { background: rgba(255,255,255,.96) !important; border-color: rgba(26,58,140,.13) !important; box-shadow: 0 3px 10px rgba(0,0,0,.05) !important; } body.theme-light .dchart, body.theme-light .dchart-ax, body.theme-light .dline { background: rgba(245,248,255,.92) !important; border-color: rgba(26,58,140,.13) !important; } /* ── Gradient screen titles (navy → deep blue) ── */ body.theme-light .dash-title, body.theme-light .wd-title { background: linear-gradient(120deg, #1a3a8c, #5040c8) !important; -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important; } /* ── Glowing key numbers → gentle navy shadow ── */ body.theme-light .score-num, body.theme-light .dval, body.theme-light .dcard2 b, body.theme-light .dleg b { text-shadow: 0 2px 8px rgba(26,58,140,.18) !important; color: var(--ka-text-4) !important; } /* ── Segmented controls ── */ body.theme-light .dseg-btn { background: rgba(238,243,255,.92) !important; border-color: rgba(26,58,140,.18) !important; color: var(--ka-text-6) !important; } body.theme-light .dseg-btn.on { background: rgba(26,58,140,.12) !important; border-color: rgba(26,58,140,.45) !important; color: var(--ka-text-4) !important; } /* ── Active chip halos ── */ body.theme-light .dseg-btn.on, body.theme-light .day.on, body.theme-light .pc-toggle.on, body.theme-light .su-yn button.on, body.theme-light .mk-disc-toggle.on { box-shadow: 0 0 10px rgba(26,58,140,.18) !important; } /* ── My KGs day pills ── */ body.theme-light .day { background: rgba(238,243,255,.90) !important; border-color: rgba(26,58,140,.18) !important; color: var(--ka-text-5) !important; } body.theme-light .day.on { background: rgba(26,58,140,.13) !important; border-color: rgba(26,58,140,.50) !important; color: #1a3a8c !important; } /* ── Messenger ── */ body.theme-light .msg-composer { background: rgba(248,250,255,.98) !important; border-color: rgba(26,58,140,.14) !important; } body.theme-light .msg-input { background: rgba(238,243,255,.95) !important; border-color: rgba(26,58,140,.22) !important; color: var(--ka-text-1) !important; } body.theme-light .msg-input:focus { border-color: #1a3a8c !important; box-shadow: 0 0 0 3px rgba(26,58,140,.09) !important; } body.theme-light .bubble.theirs { background: rgba(238,243,255,.95) !important; border-color: rgba(26,58,140,.10) !important; color: var(--ka-text-2) !important; } body.theme-light .bubble.mine { background: linear-gradient(135deg, #1a3a8c, #2452b0) !important; color: #ffffff !important; } /* ── Bible reader ── */ body.theme-light .wd-sel, body.theme-light .wd-nav { background: rgba(238,243,255,.95) !important; border-color: rgba(26,58,140,.18) !important; color: var(--ka-text-1) !important; } body.theme-light .wd-plan { background: rgba(238,243,255,.85) !important; border-color: rgba(26,58,140,.12) !important; } body.theme-light .wd-v { color: var(--ka-text-2) !important; } /* ── Community Manual modal ── */ body.theme-light .manual-inner { background: #f8faff !important; border-color: rgba(26,58,140,.25) !important; } body.theme-light .manual-header { background: rgba(240,245,255,.98) !important; border-color: rgba(26,58,140,.18) !important; } body.theme-light .man-h1 { color: var(--ka-text-4) !important; border-color: rgba(26,58,140,.20) !important; } body.theme-light .man-h2 { color: var(--ka-text-4) !important; } body.theme-light .man-h3 { color: var(--ka-text-5) !important; } body.theme-light .man-p, body.theme-light .man-li { color: var(--ka-text-2) !important; } body.theme-light .man-section { border-color: rgba(26,58,140,.12) !important; } /* ── Legend ── */ body.theme-light #legend { background: rgba(248,250,255,.97) !important; border-color: rgba(26,58,140,.18) !important; color: var(--ka-text-2) !important; } /* ── Team Space ── */ body.theme-light .ts-room-card, body.theme-light .ts-msg-box { background: rgba(255,255,255,.97) !important; border-color: rgba(26,58,140,.14) !important; } /* ── Economy / giving ── */ body.theme-light .gv-card, body.theme-light .gv-row { background: rgba(255,255,255,.97) !important; border-color: rgba(26,58,140,.14) !important; } /* ── Person / directory cards ── */ body.theme-light .pc-card, body.theme-light .dir-card { background: rgba(255,255,255,.96) !important; border-color: rgba(26,58,140,.14) !important; } body.theme-light .pc-msg { background: rgba(255,255,255,.95) !important; border-color: rgba(26,58,140,.35) !important; color: var(--ka-text-4) !important; } body.theme-light .pc-lead { border-color: rgba(176,122,16,.40) !important; color: var(--ka-warn-2) !important; } /* ── Sign-up agree link ── */ body.theme-light .su-agree-link { color: var(--ka-text-4) !important; } body.theme-light .su-agree-text { color: var(--ka-text-3) !important; } .pf-manual-btn:hover { background: rgba(22,224,255,.13); border-color: rgba(22,224,255,.38); } /* ===================================================================== WHITE MODE — READABILITY PASS 2 Fixes hardcoded white/light-cyan text and dark-bg surfaces ===================================================================== */ /* ── Dials (HUD top-right + My-KG) ── */ body.theme-light .dial-num { color: #0a1628 !important; text-shadow: none !important; font-size: 17px !important; } body.theme-light .dial-num.long { font-size: 13px !important; } body.theme-light .dial-face { /* soft inner circle makes the dial boundary visible on light bg */ background: radial-gradient(circle, rgba(200,218,255,.65) 52%, transparent 70%) !important; } body.theme-light .dial-label { color: rgba(26,58,140,.82) !important; } body.theme-light .dial-svg { filter: drop-shadow(0 0 3px rgba(26,58,140,.38)) !important; } body.theme-light .id-gauge .dial-svg, body.theme-light .mkd-face .dial-svg { filter: drop-shadow(0 0 3px rgba(26,58,140,.32)) !important; } /* ── Identity card (top-left HUD) ── */ body.theme-light .who-name { color: #0a1628 !important; text-shadow: none !important; } body.theme-light .who-level { color: #1a3a8c !important; text-shadow: 0 1px 6px rgba(26,58,140,.22) !important; } body.theme-light .hud-tl, body.theme-light .hud-tr { box-shadow: 0 4px 16px rgba(0,0,0,.07), 0 0 0 1px rgba(26,58,140,.10) !important; } body.theme-light .hud-next { color: var(--ka-text-5) !important; border-color: rgba(26,58,140,.18) !important; } /* ── Score (top-left tally) ── */ body.theme-light .score-num { text-shadow: 0 1px 4px rgba(26,58,140,.18) !important; } body.theme-light .score-label { color: var(--ka-text-6) !important; } body.theme-light .score-sub, body.theme-light .score-sub #downline { color: var(--ka-text-6) !important; text-shadow: none !important; } /* ── My-KG dials (meetings/people rows) ── */ body.theme-light .mkd-top { color: #0a1628 !important; text-shadow: none !important; } body.theme-light .mkd-bot { color: var(--ka-text-4) !important; text-shadow: none !important; } body.theme-light .mkd-div { background: rgba(26,58,140,.35) !important; box-shadow: none !important; } body.theme-light .mkd .dial-label { color: var(--ka-text-6) !important; } /* ── idbox (identity block in My-KG + profile screens) ── */ body.theme-light .idbox { background: rgba(255,255,255,.98) !important; border-color: rgba(26,58,140,.20) !important; box-shadow: 0 4px 16px rgba(0,0,0,.07) !important; } body.theme-light .idbox-next { color: var(--ka-text-5) !important; border-color: rgba(26,58,140,.16) !important; } /* ── My-KG tab pills ── */ body.theme-light .mk-kg-tab { background: rgba(238,243,255,.90) !important; border-color: rgba(26,58,140,.20) !important; color: rgba(26,58,140,.72) !important; } body.theme-light .mk-kg-tab.on { background: rgba(26,58,140,.12) !important; border-color: rgba(26,58,140,.48) !important; color: rgba(26,58,140,1) !important; box-shadow: 0 0 10px rgba(26,58,140,.15) !important; } /* ── My-KG disc toggle ── */ body.theme-light .mk-disc-toggle { background: rgba(238,243,255,.90) !important; border-color: rgba(26,58,140,.22) !important; color: var(--ka-text-5) !important; } body.theme-light .mk-disc-toggle.on { background: rgba(26,58,140,.12) !important; border-color: rgba(26,58,140,.45) !important; color: var(--ka-text-4) !important; } /* ── Levels bar ── */ body.theme-light .levels-bar { background: rgba(248,250,255,.98) !important; box-shadow: 0 4px 16px rgba(0,0,0,.07) !important; } body.theme-light .lvl-row { border-color: rgba(26,58,140,.08) !important; } body.theme-light .lvl-row.done { background: linear-gradient(90deg, rgba(26,58,140,.10), rgba(26,58,140,.03)) !important; } body.theme-light .lvl-row.current { background: linear-gradient(90deg, rgba(26,58,140,.18), rgba(26,58,140,.06)) !important; } body.theme-light .lvl-row.current .lvl-num { color: #1a3a8c !important; text-shadow: 0 0 8px rgba(26,58,140,.45) !important; } body.theme-light .lvl-row[data-lvl="12"] .lvl-num { color: #1a3a8c !important; text-shadow: 0 0 10px rgba(26,58,140,.50) !important; } body.theme-light .lvl-name { color: var(--ka-text-2) !important; } /* ── Nav active button (suppress hardcoded neon text-shadow) ── */ body.theme-light #nav button.on { text-shadow: none !important; background: rgba(26,58,140,.10) !important; } /* ── Community Manual — full text reset ── */ body.theme-light .manual-header-title { color: var(--ka-text-4) !important; text-shadow: none !important; } body.theme-light .manual-close { color: rgba(26,58,140,.60) !important; } body.theme-light .manual-close:hover { color: #1a3a8c !important; } /* Blanket reset — catches every hardcoded neon element in one rule */ body.theme-light .manual-body, body.theme-light .manual-body * { color: var(--ka-text-2) !important; text-shadow: none !important; } /* Headings: slightly more prominent than body text */ body.theme-light .man-logo, body.theme-light .man-sec-title, body.theme-light .man-h1 { color: var(--ka-text-4) !important; border-color: rgba(26,58,140,.18) !important; } body.theme-light .man-h2, body.theme-light .man-value-name, body.theme-light .man-flag-card strong, body.theme-light .man-role-row strong, body.theme-light .man-table td:first-child { color: var(--ka-text-4) !important; } body.theme-light .man-h3, body.theme-light .man-toc-title, body.theme-light .man-sec-num, body.theme-light .man-phase-label, body.theme-light .man-footer-logo { color: var(--ka-text-5) !important; } /* TOC items */ body.theme-light .man-toc-item { color: var(--ka-text-4) !important; } body.theme-light .man-toc-item:hover { background: rgba(26,58,140,.07) !important; color: var(--ka-text-4) !important; } /* Callout boxes */ body.theme-light .man-callout { background: rgba(26,58,140,.05) !important; border-color: rgba(26,58,140,.18) !important; } /* Phase / section containers */ body.theme-light .man-phase-block { background: rgba(26,58,140,.04) !important; border-left-color: rgba(26,58,140,.30) !important; } body.theme-light .man-section { border-color: rgba(26,58,140,.12) !important; } body.theme-light .man-cover { border-color: rgba(26,58,140,.12) !important; } body.theme-light .man-toc { border-color: rgba(26,58,140,.12) !important; } body.theme-light .man-footer { border-color: rgba(26,58,140,.12) !important; } /* Tables */ body.theme-light .man-table th { color: var(--ka-text-4) !important; background: rgba(26,58,140,.06) !important; } body.theme-light .man-table { border-color: rgba(26,58,140,.14) !important; } body.theme-light .man-table td { border-color: rgba(26,58,140,.10) !important; } /* Level / role badges — keep colour coding; adjust for light bg */ body.theme-light .man-lvl-badge { background: rgba(26,58,140,.10) !important; border-color: rgba(26,58,140,.28) !important; color: var(--ka-text-4) !important; } body.theme-light .man-lvl-badge.man-lvl-ka { background: rgba(180,20,110,.08) !important; border-color: rgba(180,20,110,.30) !important; color: #8c1060 !important; } body.theme-light .man-badge-l { background: rgba(26,58,140,.10) !important; color: var(--ka-text-4) !important; } body.theme-light .man-badge-p { background: rgba(26,107,60,.08) !important; color: #1a6b3c !important; } body.theme-light .man-badge-h { background: rgba(140,80,0,.08) !important; color: #7a4a00 !important; } body.theme-light .man-flag-badge { background: rgba(26,58,140,.10) !important; border-color: rgba(26,58,140,.28) !important; color: var(--ka-text-4) !important; } body.theme-light .man-flag-badge.man-flag-p { background: rgba(26,107,60,.08) !important; border-color: rgba(26,107,60,.25) !important; color: #1a6b3c !important; } body.theme-light .man-flag-badge.man-flag-h { background: rgba(140,80,0,.08) !important; border-color: rgba(140,80,0,.25) !important; color: #7a4a00 !important; } /* Cards inside the manual */ body.theme-light .man-pwm-card, body.theme-light .man-flag-card, body.theme-light .man-value-card { background: rgba(255,255,255,.97) !important; border-color: rgba(26,58,140,.14) !important; } body.theme-light .man-pwm-letter { color: var(--ka-text-4) !important; text-shadow: none !important; } body.theme-light .man-value-icon { color: var(--ka-text-4) !important; } /* ── td-dev (developer panel inside Today screen) ── */ body.theme-light .td-dev { border-color: rgba(26,58,140,.20) !important; color: var(--ka-text-6) !important; } body.theme-light .td-dev-btn { background: rgba(238,243,255,.90) !important; border-color: rgba(26,58,140,.22) !important; color: var(--ka-text-5) !important; } /* ── YT channel grid (Ministry screen) — keep dark internally ── */ /* Channel cards have their own dark colour backgrounds; only the host screen wrapper needs the light bg */ body.theme-light #screen-ministry { background: var(--ka-bg-screen) !important; } body.theme-light .yt-channels-header { border-color: rgba(26,58,140,.35) !important; } body.theme-light .yt-channels-label { color: #1a3a8c !important; } body.theme-light .yt-channels-title { color: #0a1628 !important; } /* ── Nations dashboard — light mode ── */ body.theme-light #screen-nations .wd-top { background: rgba(255,255,255,.98) !important; border-bottom: 1px solid rgba(26,58,140,.12) !important; } body.theme-light .nt-tab-strip { background: rgba(255,255,255,.98) !important; border-bottom-color: rgba(26,58,140,.15) !important; } body.theme-light .nt-map-wrap { border-color: rgba(26,58,140,.20) !important; } body.theme-light .nt-stat-card { background: rgba(255,255,255,.97) !important; border-color: rgba(26,58,140,.18) !important; box-shadow: 0 3px 10px rgba(0,0,0,.06) !important; } body.theme-light .nt-sc-lbl { color: #5a6e8c !important; } body.theme-light .nt-map-eyebrow { color: rgba(26,58,140,.75) !important; } body.theme-light .nt-sec-head { color: #1a3a8c !important; } body.theme-light .nt-cont { background: rgba(255,255,255,.97) !important; border-color: rgba(26,58,140,.22) !important; box-shadow: 0 3px 10px rgba(0,0,0,.06) !important; } body.theme-light .nt-cont-head { color: #1a3a8c !important; } body.theme-light .nt-cont-summary { color: #3a5a8c !important; border-bottom-color: rgba(26,58,140,.14) !important; } body.theme-light .nt-country-head { color: #0a1628 !important; } body.theme-light .nt-country-row { color: #3a5a8c !important; } body.theme-light .nt-country { border-bottom-color: rgba(26,58,140,.1) !important; } body.theme-light .nt-drill-sec { color: #1a3a8c !important; } body.theme-light .nt-drill-name { color: #0a1628 !important; } body.theme-light .nt-drill-meta { color: #3a5a8c !important; } body.theme-light .nt-state-name { background: rgba(26,58,140,.08) !important; border-color: rgba(26,58,140,.2) !important; color: #1a3a8c !important; } body.theme-light .nt-state-kgs { color: #5a6e8c !important; } body.theme-light .nt-city { background: rgba(238,243,255,.9) !important; border-color: rgba(26,58,140,.15) !important; color: #3a5a8c !important; } body.theme-light .nt-tab-btn { color: #5a6e8c !important; } body.theme-light .nt-tab-btn.on { color: #1a3a8c !important; border-bottom-color: #1a3a8c !important; } body.theme-light .nt-ptab { background: rgba(238,243,255,.9) !important; border-color: rgba(26,58,140,.18) !important; color: #5a6e8c !important; } body.theme-light .nt-ptab.on { background: rgba(26,58,140,.12) !important; border-color: #1a3a8c !important; color: #1a3a8c !important; } body.theme-light .nt-chart-title { color: #0a1628 !important; } body.theme-light .nt-chart-metric { color: #5a6e8c !important; } body.theme-light .nt-brow { border-bottom-color: rgba(26,58,140,.08) !important; } body.theme-light .nt-brow-name { color: #0a1628 !important; } body.theme-light .nt-brow-bar { background: rgba(26,58,140,.08) !important; } body.theme-light .nt-bar-val { color: #1a3a8c !important; } /* ═══════════════════════════════════════════════════════════════════════════ PREMIUM DESIGN SYSTEM — Fueled NYC quality Single source of truth for all surface, type, motion, and glow treatments. Appended last so it wins the cascade; !important only where existing rules hardcode values that CSS variables cannot reach. ═══════════════════════════════════════════════════════════════════════════ */ /* ── 1. Update glass variables to pure frosted-white recipe ─────────────── */ :root { --ka-glass: rgba(255,255,255,.044); --ka-glass-soft: rgba(255,255,255,.038); } /* ── 2. Global foundation ────────────────────────────────────────────────── */ body { -webkit-font-smoothing: antialiased !important; -moz-osx-font-smoothing: grayscale !important; text-rendering: optimizeLegibility !important; } ::selection { background: rgba(22,224,255,.22); color: #fff; } ::-webkit-scrollbar { width: 2px; height: 2px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(22,224,255,.20); border-radius: 99px; } ::-webkit-scrollbar-thumb:hover { background: rgba(22,224,255,.40); } :focus-visible { outline: 2px solid rgba(22,224,255,.62); outline-offset: 3px; border-radius: 8px; } input::placeholder, textarea::placeholder { color: rgba(150,185,215,.38) !important; } /* ── 3. Typography — disciplined hierarchy ───────────────────────────────── */ .dash-title, .wd-title { font-size: 22px !important; font-weight: 800 !important; letter-spacing: -0.5px !important; line-height: 1.12 !important; background: linear-gradient(128deg, #EAF6FF 0%, #AEF3FF 52%, #C79BFF 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important; } .td-hi { font-size: 22px !important; font-weight: 800 !important; letter-spacing: -0.3px !important; } .who-name { font-size: 17px !important; font-weight: 700 !important; letter-spacing: -0.15px !important; } .act-label { font-size: 15px !important; font-weight: 700 !important; letter-spacing: -0.1px !important; } .act-streak { font-size: 12px !important; line-height: 1.5 !important; } .score-num { letter-spacing: -0.5px !important; } /* ── 4. Bottom nav — true floating pill ─────────────────────────────────── */ /* Kill the sci-fi L-bracket corners (designed for a rect nav, wrong on a pill) */ #nav::before, #nav::after { display: none !important; } #nav { border-radius: 999px !important; padding: 5px !important; gap: 2px !important; background: rgba(6,10,18,.88) !important; border: 1px solid rgba(255,255,255,.088) !important; box-shadow: 0 24px 64px rgba(0,0,0,.68), 0 8px 18px rgba(0,0,0,.46), inset 0 1px 0 rgba(255,255,255,.09) !important; -webkit-backdrop-filter: blur(32px) saturate(1.8) !important; backdrop-filter: blur(32px) saturate(1.8) !important; } #nav button { border-radius: 999px !important; font-size: 11.5px !important; font-weight: 600 !important; padding: 9px 15px !important; color: rgba(135,175,210,.50) !important; letter-spacing: 0.05px !important; border: none !important; box-shadow: none !important; text-shadow: none !important; transition: color 0.2s ease, background 0.2s ease, text-shadow 0.2s ease !important; } #nav button:hover { color: rgba(135,175,210,.80) !important; } #nav button.on { background: rgba(22,224,255,.11) !important; color: #EAF6FF !important; border: none !important; box-shadow: none !important; text-shadow: 0 0 18px rgba(22,224,255,.52) !important; } /* ── 5. Unified card glass — all list/content surfaces ──────────────────── */ /* box-shadow and border need !important; background comes from the updated var */ .act, .td-card, .mrow, .mk-joined-row, .dir-row, .mk-req-row, .dcard2, .dtree, .dconsist, .kglabel { border: 1px solid rgba(255,255,255,.076) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 8px 24px rgba(0,0,0,.34), 0 2px 6px rgba(0,0,0,.20) !important; transition: transform 0.2s cubic-bezier(0.34,1.2,0.64,1), box-shadow 0.2s ease, border-color 0.18s ease !important; } .act { -webkit-backdrop-filter: blur(14px) !important; backdrop-filter: blur(14px) !important; } .td-card { -webkit-backdrop-filter: blur(14px) !important; backdrop-filter: blur(14px) !important; } /* hover lift */ .act:hover, .dir-row:hover { border-color: rgba(255,255,255,.13) !important; transform: translateY(-1px) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.11), 0 12px 32px rgba(0,0,0,.42), 0 4px 12px rgba(0,0,0,.26) !important; } .act:active { transform: scale(0.985) translateY(0) !important; } /* mrow directional slide */ .mrow:hover { border-color: rgba(255,255,255,.12) !important; transform: translateX(2px) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.09), -3px 0 0 rgba(22,224,255,.48), 0 6px 20px rgba(0,0,0,.34) !important; } .mrow:active { transform: scale(0.985) !important; } /* cluster/constellation rows */ .cl-row { border: 1px solid rgba(255,255,255,.076) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 6px 18px rgba(0,0,0,.28) !important; transition: all 0.2s cubic-bezier(0.34,1.2,0.64,1) !important; } .cl-row.mine { border-color: rgba(22,224,255,.32) !important; background: rgba(22,224,255,.05) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 18px rgba(22,224,255,.08) !important; } .cl-row:hover { transform: translateY(-1px) !important; border-color: rgba(22,224,255,.25) !important; } /* ── 6. Primary CTA — pill with precision glow ──────────────────────────── */ .plant-btn, .mk-btn.solid, .auth-go, .ci-complete:not(:disabled), .wd-done:not(:disabled) { border-radius: 999px !important; background: linear-gradient(140deg, rgba(10,50,115,.97) 0%, rgba(16,26,82,.95) 48%, rgba(72,14,130,.96) 100%) !important; border: 1px solid rgba(22,224,255,.50) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 0 28px rgba(22,224,255,.22), 0 0 56px rgba(130,20,255,.11), 0 8px 28px rgba(0,0,0,.50) !important; font-weight: 700 !important; letter-spacing: 0.2px !important; color: #EAF6FF !important; transition: all 0.22s cubic-bezier(0.34,1.2,0.64,1) !important; } .plant-btn:hover, .mk-btn.solid:hover, .auth-go:hover, .ci-complete:not(:disabled):hover, .wd-done:not(:disabled):hover { border-color: rgba(22,224,255,.72) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 0 38px rgba(22,224,255,.36), 0 0 70px rgba(130,20,255,.20), 0 10px 32px rgba(0,0,0,.55) !important; } .plant-btn:active { transform: translateX(-50%) scale(0.95) !important; } .mk-btn.solid:active, .auth-go:active, .ci-complete:not(:disabled):active { transform: scale(0.96) !important; } /* Replace existing cta-pulse with tighter, more premium breathing */ @keyframes cta-pill-pulse { 0%, 100% { box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 0 28px rgba(22,224,255,.22), 0 0 56px rgba(130,20,255,.11), 0 8px 28px rgba(0,0,0,.50); } 50% { box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 0 40px rgba(22,224,255,.36), 0 0 72px rgba(130,20,255,.22), 0 10px 32px rgba(0,0,0,.55); } } .plant-btn { animation: cta-pill-pulse 3.2s ease-in-out infinite !important; } /* ── 7. Ghost / secondary buttons ───────────────────────────────────────── */ .mk-btn.ghost { border-radius: 999px !important; background: rgba(255,255,255,.054) !important; border: 1px solid rgba(255,255,255,.12) !important; color: rgba(145,188,220,.65) !important; transition: all 0.18s ease !important; } .mk-btn.ghost:hover { background: rgba(255,255,255,.085) !important; border-color: rgba(22,224,255,.30) !important; color: rgba(200,235,255,.82) !important; } .mk-btn.ghost:active { transform: scale(0.96) !important; } /* ── 8. Compact icon buttons (.ic) ──────────────────────────────────────── */ .ic { background: rgba(255,255,255,.055) !important; border: 1px solid rgba(255,255,255,.090) !important; box-shadow: none !important; transition: all 0.18s ease !important; } .ic:hover { background: rgba(255,255,255,.095) !important; border-color: rgba(255,255,255,.16) !important; box-shadow: none !important; } .ic:active { transform: scale(0.88) !important; } /* Day selector chips — pills */ .day { border-radius: 999px !important; } /* ── 9. Input fields — unified premium glass ─────────────────────────────── */ .auth-in, .msg-input, .map-addr, .mk-name, .mk-time, .ec-in, .wd-sel, .tm-in, .tm-search, .tm-ta { background: rgba(255,255,255,.052) !important; border: 1px solid rgba(255,255,255,.10) !important; border-radius: 14px !important; -webkit-backdrop-filter: blur(8px) !important; backdrop-filter: blur(8px) !important; transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease !important; } .auth-in:focus, .msg-input:focus, .map-addr:focus, .mk-name:focus, .mk-time:focus, .ec-in:focus, .wd-sel:focus, .tm-in:focus, .tm-search:focus { background: rgba(22,224,255,.036) !important; border-color: rgba(22,224,255,.50) !important; box-shadow: 0 0 0 3px rgba(22,224,255,.09), 0 0 16px rgba(22,224,255,.09) !important; outline: none !important; } /* ── 10. HUD panels (top-left identity + top-right dials) ───────────────── */ .hud-tl, .hud-tr { background: rgba(6,12,22,.84) !important; border: 1px solid rgba(255,255,255,.11) !important; border-top-color: rgba(255,255,255,.17) !important; border-radius: 20px !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.13), 0 20px 48px rgba(0,0,0,.58), 0 0 32px rgba(22,224,255,.10), 0 0 60px rgba(110,40,255,.05) !important; -webkit-backdrop-filter: blur(28px) saturate(1.5) !important; backdrop-filter: blur(28px) saturate(1.5) !important; } /* ── 11. Identity box ────────────────────────────────────────────────────── */ .idbox { background: rgba(6,12,22,.84) !important; border: 1px solid rgba(255,255,255,.11) !important; border-top-color: rgba(255,255,255,.17) !important; border-radius: 20px !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.13), 0 16px 40px rgba(0,0,0,.52), 0 0 28px rgba(22,224,255,.09) !important; -webkit-backdrop-filter: blur(24px) !important; backdrop-filter: blur(24px) !important; } /* ── 12. Auth / sign-in card ────────────────────────────────────────────── */ .auth-card { background: rgba(5,10,20,.92) !important; border: 1px solid rgba(255,255,255,.11) !important; border-top-color: rgba(255,255,255,.16) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 32px 80px rgba(0,0,0,.72), 0 0 60px rgba(22,224,255,.07), 0 0 120px rgba(130,0,255,.10) !important; -webkit-backdrop-filter: blur(40px) !important; backdrop-filter: blur(40px) !important; } /* ── 13. Bottom score strip + ctrls rail ────────────────────────────────── */ .bottombar::before, .bottombar::after { display: none !important; } .bottombar { background: rgba(6,10,18,.86) !important; border: 1px solid rgba(255,255,255,.09) !important; -webkit-backdrop-filter: blur(24px) !important; backdrop-filter: blur(24px) !important; } .ctrls { background: rgba(6,10,18,.80) !important; border: 1px solid rgba(255,255,255,.08) !important; -webkit-backdrop-filter: blur(20px) !important; backdrop-filter: blur(20px) !important; } /* ── 14. Person sheet + modal overlays ──────────────────────────────────── */ .person-sheet { background: rgba(6,12,22,.94) !important; border: 1px solid rgba(255,255,255,.10) !important; border-top-color: rgba(255,255,255,.15) !important; -webkit-backdrop-filter: blur(36px) saturate(1.5) !important; backdrop-filter: blur(36px) saturate(1.5) !important; } /* ── 15. Tab strips — pill chips ────────────────────────────────────────── */ .team-tab, .ec-tab { border-radius: 999px !important; transition: all 0.18s cubic-bezier(0.34,1.2,0.64,1) !important; } .team-tab.on { border-color: rgba(22,224,255,.40) !important; background: rgba(22,224,255,.09) !important; box-shadow: 0 0 16px rgba(22,224,255,.14) !important; } .nt-tab-btn { transition: all 0.18s ease !important; } /* ── 16. Nations stat cards ─────────────────────────────────────────────── */ .nt-stat-card { background: rgba(255,255,255,.040) !important; border: 1px solid rgba(255,255,255,.076) !important; border-top-color: rgba(255,255,255,.11) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 6px 20px rgba(0,0,0,.30) !important; -webkit-backdrop-filter: blur(12px) !important; backdrop-filter: blur(12px) !important; border-radius: 16px !important; } .nt-cont, .cl-group { border: 1px solid rgba(255,255,255,.076) !important; border-top-color: rgba(255,255,255,.11) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 4px 14px rgba(0,0,0,.26) !important; -webkit-backdrop-filter: blur(10px) !important; backdrop-filter: blur(10px) !important; } /* ── 17. Avatar subtle polish ───────────────────────────────────────────── */ .avatar { box-shadow: 0 0 0 1.5px rgba(255,255,255,.12), 0 4px 14px rgba(0,0,0,.40) !important; } /* ── 18. Legend / tree tooltip ──────────────────────────────────────────── */ .legend { background: rgba(6,10,18,.88) !important; border: 1px solid rgba(255,255,255,.09) !important; } /* ═══════════════════════════════════════════════════════════════════════════ PREMIUM LIGHT MODE — same system, inverted palette ═══════════════════════════════════════════════════════════════════════════ */ /* nav */ body.theme-light #nav::before, body.theme-light #nav::after { display: none !important; } body.theme-light #nav { background: rgba(255,255,255,.94) !important; border-color: rgba(26,58,140,.14) !important; box-shadow: 0 20px 60px rgba(0,0,0,.13), 0 4px 14px rgba(0,0,0,.09), inset 0 -1px 0 rgba(0,0,0,.05), inset 0 1px 0 rgba(255,255,255,.85) !important; } body.theme-light #nav button { color: rgba(50,80,130,.45) !important; text-shadow: none !important; } body.theme-light #nav button:hover { color: rgba(50,80,130,.75) !important; } body.theme-light #nav button.on { background: rgba(26,58,140,.09) !important; color: #0a1628 !important; text-shadow: none !important; } /* cards */ body.theme-light .act, body.theme-light .td-card, body.theme-light .mrow, body.theme-light .mk-joined-row, body.theme-light .dir-row, body.theme-light .mk-req-row, body.theme-light .dcard2, body.theme-light .dtree, body.theme-light .dconsist { background: rgba(255,255,255,.97) !important; border: 1px solid rgba(26,58,140,.11) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 4px 16px rgba(0,0,0,.07), 0 1px 4px rgba(0,0,0,.05) !important; } body.theme-light .cl-row { background: rgba(255,255,255,.96) !important; border-color: rgba(26,58,140,.11) !important; box-shadow: 0 3px 12px rgba(0,0,0,.06) !important; } body.theme-light .cl-row.mine { background: rgba(238,244,255,.97) !important; border-color: rgba(26,58,140,.28) !important; } /* HUD + identity */ body.theme-light .hud-tl, body.theme-light .hud-tr { background: rgba(255,255,255,.96) !important; border: 1px solid rgba(26,58,140,.13) !important; border-top-color: rgba(255,255,255,.9) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 14px 36px rgba(0,0,0,.10), 0 4px 12px rgba(0,0,0,.08) !important; } body.theme-light .idbox { background: rgba(255,255,255,.96) !important; border: 1px solid rgba(26,58,140,.13) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 10px 28px rgba(0,0,0,.09) !important; } /* CTA buttons */ body.theme-light .plant-btn, body.theme-light .mk-btn.solid, body.theme-light .auth-go, body.theme-light .ci-complete:not(:disabled), body.theme-light .wd-done:not(:disabled) { background: linear-gradient(140deg, #0c2e70 0%, #141e6e 48%, #3c0880 100%) !important; border-color: rgba(26,58,140,.75) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 0 20px rgba(26,58,140,.18), 0 6px 22px rgba(0,0,0,.22) !important; color: #fff !important; animation: none !important; } /* inputs */ body.theme-light .auth-in, body.theme-light .msg-input, body.theme-light .mk-name, body.theme-light .mk-time, body.theme-light .ec-in, body.theme-light .tm-in, body.theme-light .tm-search { background: rgba(255,255,255,.92) !important; border-color: rgba(26,58,140,.18) !important; } body.theme-light .auth-in:focus, body.theme-light .msg-input:focus, body.theme-light .mk-name:focus, body.theme-light .mk-time:focus, body.theme-light .ec-in:focus, body.theme-light .tm-in:focus { border-color: #1a3a8c !important; box-shadow: 0 0 0 3px rgba(26,58,140,.10) !important; } /* misc */ body.theme-light .ic { background: rgba(26,58,140,.07) !important; border-color: rgba(26,58,140,.14) !important; box-shadow: none !important; } body.theme-light .bottombar { background: rgba(255,255,255,.94) !important; border-color: rgba(26,58,140,.13) !important; } body.theme-light .avatar { box-shadow: 0 0 0 1.5px rgba(26,58,140,.16), 0 3px 10px rgba(0,0,0,.10) !important; } /* ── WHITE-MODE: remaining dark-background element overrides ─────────────── */ /* Dashboard cards + controls */ body.theme-light .dcard { background: rgba(255,255,255,.97) !important; border-color: rgba(26,58,140,.14) !important; box-shadow: 0 2px 12px rgba(26,58,140,.07) !important; } body.theme-light .dval { text-shadow: none !important; color: var(--ka-text-1) !important; } body.theme-light .dchart { background: rgba(236,242,255,.80) !important; border-color: rgba(26,58,140,.12) !important; } body.theme-light .dchart-ax { color: var(--ka-text-6) !important; } body.theme-light .dseg-btn { background: rgba(238,243,255,.9) !important; border-color: rgba(26,58,140,.15) !important; color: var(--ka-text-5) !important; } body.theme-light .dseg-btn.on { background: rgba(26,58,140,.12) !important; border-color: rgba(26,58,140,.50) !important; color: #1a3a8c !important; box-shadow: none !important; } body.theme-light .dsplit-bar, body.theme-light .dbook-bar { background: rgba(222,230,248,.80) !important; border-color: rgba(26,58,140,.12) !important; } body.theme-light .dash-open { background: rgba(238,243,255,.90) !important; border-color: rgba(26,58,140,.15) !important; color: var(--ka-text-3) !important; } body.theme-light .dbadge { background: rgba(238,243,255,.90) !important; border-color: rgba(26,58,140,.18) !important; color: var(--ka-text-4) !important; box-shadow: none !important; } body.theme-light .dnext { color: #1a6b3c !important; background: rgba(26,107,60,.09) !important; border-color: rgba(26,107,60,.25) !important; box-shadow: none !important; } /* Bible / Word screen */ body.theme-light .wd-sel { background: rgba(238,243,255,.92) !important; border-color: rgba(26,58,140,.16) !important; color: var(--ka-text-2) !important; box-shadow: none !important; } body.theme-light .wd-nav { background: rgba(238,243,255,.92) !important; border-color: rgba(26,58,140,.14) !important; color: var(--ka-text-5) !important; box-shadow: none !important; } body.theme-light .wd-plan { background: rgba(236,241,255,.80) !important; border-color: rgba(26,58,140,.10) !important; color: var(--ka-text-4) !important; } body.theme-light .wd-ref { color: #1a3a8c !important; } body.theme-light .wd-timer { color: #1a3a8c !important; } body.theme-light .wd-retry { background: rgba(238,243,255,.90) !important; border-color: rgba(26,58,140,.40) !important; color: #1a3a8c !important; } /* Messenger */ body.theme-light .msg-composer { background: rgba(245,248,255,.97) !important; border-top-color: rgba(26,58,140,.12) !important; } body.theme-light .msg-input { background: rgba(236,241,255,.90) !important; color: var(--ka-text-1) !important; } body.theme-light .bubble.theirs { background: rgba(232,239,255,.95) !important; border-color: rgba(26,58,140,.12) !important; color: var(--ka-text-2) !important; } body.theme-light .bubble.mine { background: linear-gradient(135deg, rgba(26,58,140,.14), rgba(60,20,140,.10)) !important; color: var(--ka-text-1) !important; } body.theme-light .msg-conv { border-bottom-color: rgba(26,58,140,.10) !important; } body.theme-light .mc-dot { background: #1a3a8c !important; box-shadow: none !important; } /* People picker */ body.theme-light .pp-row { background: rgba(238,243,255,.85) !important; border-color: rgba(26,58,140,.12) !important; } body.theme-light .pp-row.chosen { background: rgba(26,58,140,.10) !important; border-color: rgba(26,58,140,.45) !important; } body.theme-light .pp-bring { background: rgba(238,243,255,.90) !important; border-color: rgba(26,58,140,.20) !important; color: #1a3a8c !important; } body.theme-light .pp-bring.on { background: rgba(26,58,140,.14) !important; border-color: #1a3a8c !important; } body.theme-light .pp-star { color: var(--ka-warn-gold) !important; } /* KG request / pending-member rows */ body.theme-light .mk-req-row { background: rgba(255,250,230,.90) !important; border-color: rgba(176,122,16,.28) !important; } body.theme-light .mk-req-av { background: rgba(176,122,16,.10) !important; border-color: rgba(176,122,16,.32) !important; color: var(--ka-warn-3) !important; } body.theme-light .mk-req-title { color: var(--ka-warn) !important; } /* Economy screen */ body.theme-light .ec-tab { background: rgba(238,243,255,.90) !important; border-color: rgba(26,58,140,.14) !important; color: var(--ka-text-5) !important; box-shadow: none !important; } body.theme-light .ec-tab.on { background: rgba(26,58,140,.12) !important; border-color: rgba(26,58,140,.45) !important; color: #1a3a8c !important; box-shadow: none !important; } body.theme-light .ec-eyebrow { color: var(--ka-gold) !important; background: none !important; -webkit-background-clip: unset !important; -webkit-text-fill-color: unset !important; } body.theme-light .ec-feat { background: rgba(255,252,245,.97) !important; border-color: rgba(122,82,0,.28) !important; box-shadow: 0 3px 10px rgba(0,0,0,.06) !important; } body.theme-light .ec-feat-name { color: var(--ka-gold) !important; } body.theme-light .ec-season { background: rgba(255,252,245,.97) !important; border-color: rgba(122,82,0,.20) !important; box-shadow: none !important; } body.theme-light .ec-season-head { color: var(--ka-gold) !important; } body.theme-light .ec-register { background: rgba(255,252,245,.97) !important; border-color: rgba(122,82,0,.20) !important; } body.theme-light .ec-voucher.claimed { background: rgba(255,252,245,.97) !important; border-color: rgba(122,82,0,.22) !important; } /* Profile — reward rows + KPI vals */ body.theme-light .pf-reward { background: rgba(255,253,242,.97) !important; border-color: rgba(176,122,16,.28) !important; box-shadow: none !important; } body.theme-light .pf-rw-reward { color: var(--ka-gold) !important; } body.theme-light .pf-rw-by { color: var(--ka-gold-dim) !important; } body.theme-light .pf-rw-redeem { background: rgba(122,82,0,.09) !important; border-color: rgba(122,82,0,.35) !important; color: var(--ka-gold) !important; } body.theme-light .pf-kpi-val.gold { color: var(--ka-gold) !important; } body.theme-light .pf-kpi-val.green { color: #1a6b3c !important; } body.theme-light .pf-kpi-val.violet { color: #5434b0 !important; } /* Profile — Community Manual button */ body.theme-light .pf-manual-profile-btn { color: var(--ka-text-4) !important; background: rgba(26,58,140,.06) !important; border-color: rgba(26,58,140,.22) !important; } body.theme-light .pf-manual-profile-btn:hover { background: rgba(26,58,140,.11) !important; border-color: rgba(26,58,140,.38) !important; } /* Profile — card backgrounds in light mode */ body.theme-light .pf-idcard { background: linear-gradient(150deg, rgba(30,100,210,.10) 0%, rgba(110,60,210,.07) 55%, rgba(248,250,255,1)) !important; border-color: rgba(26,58,140,.18) !important; box-shadow: 0 2px 12px rgba(26,58,140,.08) !important; } body.theme-light .pf-decl { background: rgba(230,240,255,.65) !important; border-left-color: rgba(26,58,140,.35) !important; color: rgba(20,44,120,.82) !important; } body.theme-light .pf-kpi { background: rgba(255,255,255,.97) !important; border-color: rgba(26,58,140,.13) !important; box-shadow: 0 2px 8px rgba(0,0,0,.06), inset 0 1px 0 rgba(255,255,255,.9) !important; } body.theme-light .pf-kpi-val { color: #0d1a40 !important; text-shadow: none !important; } body.theme-light .pf-kpi-lbl { color: rgba(26,58,140,.60) !important; } body.theme-light .pf-kg { background: rgba(255,255,255,.97) !important; border-color: rgba(26,58,140,.14) !important; box-shadow: 0 2px 8px rgba(0,0,0,.05) !important; } body.theme-light .pf-kg-name { color: #0d1a40 !important; } body.theme-light .pf-kg-sub { color: rgba(26,58,140,.55) !important; } body.theme-light .pf-role { background: rgba(240,245,255,.85) !important; border-color: rgba(26,58,140,.18) !important; color: rgba(26,58,140,.75) !important; } body.theme-light .pf-role.on { background: rgba(255,200,60,.12) !important; border-color: rgba(180,120,0,.45) !important; color: var(--ka-gold) !important; } /* KGM pop mode badge (neon green tag) */ body.theme-light .kgm-pop-mode { color: #1a6b3c !important; background: rgba(26,107,60,.10) !important; border-color: rgba(26,107,60,.28) !important; box-shadow: none !important; } /* Activity done streak (neon green text) */ body.theme-light .act.done .act-streak { color: #155e34 !important; } /* PC lead readiness row */ body.theme-light .pc-lead { background: rgba(255,252,240,.90) !important; border-color: rgba(176,122,16,.35) !important; color: var(--ka-warn-2) !important; } /* Map controls (KG map view) */ body.theme-light .map-back, body.theme-light .map-ctrl { background: rgba(255,255,255,.96) !important; border-color: rgba(26,58,140,.18) !important; box-shadow: 0 3px 12px rgba(0,0,0,.10) !important; } body.theme-light .map-seg { background: rgba(238,243,255,.90) !important; border-color: rgba(26,58,140,.15) !important; color: var(--ka-text-5) !important; } body.theme-light .map-seg.on { background: rgba(26,58,140,.12) !important; border-color: rgba(26,58,140,.40) !important; color: #1a3a8c !important; } body.theme-light .map-addr { background: rgba(255,255,255,.96) !important; border-color: rgba(26,58,140,.18) !important; color: var(--ka-text-2) !important; } body.theme-light .map-res { background: rgba(238,243,255,.92) !important; border-color: rgba(26,58,140,.14) !important; color: var(--ka-text-2) !important; } /* Team space */ body.theme-light .team-tab { background: rgba(238,243,255,.90) !important; border-color: rgba(26,58,140,.14) !important; color: var(--ka-text-5) !important; } body.theme-light .team-tab.on { background: rgba(26,58,140,.12) !important; border-color: rgba(26,58,140,.42) !important; color: #1a3a8c !important; } body.theme-light .tm-card { background: rgba(255,255,255,.97) !important; border-color: rgba(26,58,140,.14) !important; box-shadow: 0 2px 10px rgba(26,58,140,.07) !important; } body.theme-light .tm-form { background: rgba(238,243,255,.85) !important; border-color: rgba(26,58,140,.14) !important; } /* My KGs — Set as Main KG toggle */ body.theme-light .mk-main-btn { color: #1a3a8c !important; background: rgba(26,58,140,.07) !important; border-color: rgba(26,58,140,.28) !important; } body.theme-light .mk-main-btn:hover { background: rgba(26,58,140,.13) !important; border-color: rgba(26,58,140,.45) !important; } body.theme-light .mk-main-btn.on { color: #9a6a00 !important; background: rgba(255,193,60,.16) !important; border-color: rgba(180,120,0,.45) !important; } /* ── END white-mode element overrides ────────────────────────────────────── */ /* ── My KGs — restore inline name input (premium block added box styling) ── */ #screen-mykg .mk-name { background: transparent !important; border: none !important; border-bottom: 1px solid rgba(var(--ka-cyan-rgb),.18) !important; border-radius: 0 !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; box-shadow: none !important; } body.theme-light #screen-mykg .mk-name { border-bottom-color: rgba(26,58,140,.18) !important; } /* ── Economy — header subtitle visibility in white mode ─────────────────── */ body.theme-light .ec-header-sub { color: rgba(82,50,0,.72) !important; font-weight: 600 !important; } body.theme-light .ec-sec { color: var(--ka-text-4) !important; border-left-color: rgba(26,58,140,.42) !important; } body.theme-light .ec-header { border-bottom-color: rgba(122,82,0,.22) !important; } /* ── END ────────────────────────────────────────────────────────────────── */ /* ── WHITE-MODE: dial SVG element recolouring ───────────────────────────── */ /* Outer boundary ring (r=48, was stroke="#ffffff" = invisible on white) */ body.theme-light .dial-svg > circle:first-of-type { stroke: rgba(26,58,140,0.26) !important; } /* Spinning tick marks (were #19E4FF = pale cyan, barely visible on light bg) */ body.theme-light .dial-svg .dspin line { stroke: rgba(26,58,140,0.68) !important; } /* Inner magenta arc (r=28 — too vivid next to dark numbers on white) */ body.theme-light .dial-svg > circle:nth-of-type(2) { stroke: rgba(150,50,100,0.30) !important; } /* Outer gradient arc (r=37 — replace cyan-magenta gradient with solid navy) */ body.theme-light .dial-svg > circle:nth-of-type(3) { stroke: rgba(26,58,140,0.70) !important; } /* Safe dial number size — 14px fits 4-char localeString numbers inside r=28 inner arc */ body.theme-light .dial-num { font-size: 14px !important; } body.theme-light .dial-num.long { font-size: 11px !important; } /* ── WHITE-MODE: Economy Map button ────────────────────────────────────── */ body.theme-light .ec-mapbtn { background: linear-gradient(135deg, rgba(230,238,255,.95), rgba(210,222,255,.90)) !important; border-color: rgba(26,58,140,.32) !important; color: #1a3a8c !important; box-shadow: 0 2px 10px rgba(26,58,140,.12), inset 0 1px 0 rgba(255,255,255,.9) !important; } body.theme-light .ec-mapbtn:hover { border-color: rgba(26,58,140,.55) !important; box-shadow: 0 4px 18px rgba(26,58,140,.20) !important; } body.theme-light .ec-mapbtn::after { opacity: .6 !important; } /* ── WHITE-MODE: Back buttons (all screens) ─────────────────────────────── */ body.theme-light .dash-back { background: rgba(228,236,255,.88) !important; border-color: rgba(26,58,140,.22) !important; color: #1a3a8c !important; box-shadow: 0 1px 6px rgba(26,58,140,.09) !important; } body.theme-light .dash-back:hover { background: rgba(210,224,255,.96) !important; border-color: rgba(26,58,140,.40) !important; } /* WHITE-MODE: Profile — Edit button */ body.theme-light .dir-toggle { background: rgba(228,236,255,.88) !important; border-color: rgba(26,58,140,.28) !important; color: #1a3a8c !important; } body.theme-light .dir-toggle:hover { background: rgba(210,224,255,.96) !important; border-color: rgba(26,58,140,.45) !important; } /* WHITE-MODE: Profile — identity text readability */ body.theme-light .pf-id-name { color: #0d1a40 !important; } body.theme-light .pf-id-meta { color: rgba(26,58,140,.80) !important; } body.theme-light .pf-id-sub { color: rgba(26,58,140,.58) !important; } /* ── WHITE-MODE: My Journey screen ──────────────────────────────────────── */ /* Journey bars — replace dark navy gradient with clean light card */ body.theme-light .jrn-bar { background: linear-gradient(180deg, rgba(240,245,255,1) 0%, rgba(232,241,255,.97) 100%) !important; border-color: rgba(26,58,140,.18) !important; box-shadow: 0 2px 14px rgba(26,58,140,.08) !important; } /* Column headings */ body.theme-light .jrn-col-head { color: rgba(26,58,140,.55) !important; } body.theme-light .jrn-em { text-shadow: none !important; } /* Phase dividers (cyan-rgb already maps to navy in light mode, just kill glow) */ body.theme-light .jrn-phase-div { text-shadow: none !important; } /* Level rows inside journey bars */ body.theme-light .jrn-bar .lvl-row { border-color: rgba(26,58,140,.07) !important; } body.theme-light .jrn-bar .lvl-row.done { background: linear-gradient(90deg, rgba(26,58,140,.10), rgba(26,58,140,.03)) !important; } body.theme-light .jrn-bar .lvl-row.current { background: linear-gradient(90deg, rgba(26,58,140,.18), rgba(26,58,140,.05)) !important; } body.theme-light .jrn-bar .lvl-row[data-lvl="11"] .lvl-num, body.theme-light .jrn-bar .lvl-row[data-lvl="12"] .lvl-num { text-shadow: 0 0 7px rgba(26,58,140,.35) !important; } /* Dashboard column header */ body.theme-light .jrn-dash-head { color: rgba(26,58,140,.50) !important; border-bottom-color: rgba(26,58,140,.12) !important; } /* Stat cards */ body.theme-light .jrn-stat { background: rgba(255,255,255,.97) !important; border-color: rgba(26,58,140,.12) !important; box-shadow: 0 2px 8px rgba(26,58,140,.06) !important; } body.theme-light .jrn-stat-val { text-shadow: none !important; } body.theme-light .jrn-stat-lbl { color: rgba(26,58,140,.52) !important; } /* Period tabs */ body.theme-light .jrn-ptab { background: rgba(238,243,255,.90) !important; border-color: rgba(26,58,140,.15) !important; color: rgba(26,58,140,.58) !important; } body.theme-light .jrn-ptab.on { background: rgba(26,58,140,.12) !important; border-color: rgba(26,58,140,.42) !important; color: #1a3a8c !important; box-shadow: none !important; } /* Growth graph cards */ body.theme-light .jrn-graph { background: rgba(255,255,255,.97) !important; border-color: rgba(26,58,140,.12) !important; box-shadow: 0 2px 8px rgba(26,58,140,.06) !important; } body.theme-light .jrn-graph-label { color: rgba(26,58,140,.50) !important; } body.theme-light .jrn-graph-val { text-shadow: none !important; } /* ── END ────────────────────────────────────────────────────────────────── */ /* ══ THE WORD — highlights, notes, progress, books grid ══════════════════════ */ /* Highlight colours (verse backgrounds) */ .wd-v.hl-yellow { background: rgba(255,214,64,.30); box-shadow: 0 0 0 2px rgba(255,214,64,.18); border-radius: 5px; } .wd-v.hl-green { background: rgba(60,220,130,.26); box-shadow: 0 0 0 2px rgba(60,220,130,.16); border-radius: 5px; } .wd-v.hl-cyan { background: rgba(34,224,255,.22); box-shadow: 0 0 0 2px rgba(34,224,255,.16); border-radius: 5px; } .wd-v.hl-pink { background: rgba(255,120,190,.26); box-shadow: 0 0 0 2px rgba(255,120,190,.16); border-radius: 5px; } .wd-v.hl-purple { background: rgba(150,110,255,.28); box-shadow: 0 0 0 2px rgba(150,110,255,.16); border-radius: 5px; } .wd-v { cursor: pointer; padding: 2px 5px; transition: background .12s; position: relative; scroll-margin-top: 60px; } .wd-v.sel { outline: 2px dashed rgba(var(--ka-cyan-rgb),.5); outline-offset: 1px; border-radius: 5px; } .wd-v-note { display: inline-block; margin-left: 6px; font-size: 12px; color: var(--ka-cyan); vertical-align: middle; } /* Verse action popover */ .wd-pop { position: fixed; z-index: 60; display: flex; align-items: center; gap: 7px; padding: 8px 10px; background: rgba(8,16,26,.97); border: 1px solid rgba(var(--ka-cyan-rgb),.35); border-radius: 999px; box-shadow: 0 8px 26px rgba(0,0,0,.5); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transform: translate(-50%,-115%); } .wd-pop .sw { width: 24px; height: 24px; border-radius: 50%; cursor: pointer; border: 2px solid rgba(255,255,255,.25); } .wd-pop .sw:hover { transform: scale(1.12); } .wd-pop .sw.sw-yellow { background: #ffd640; } .wd-pop .sw.sw-green { background: #3cdc82; } .wd-pop .sw.sw-cyan { background: #22e0ff; } .wd-pop .sw.sw-pink { background: #ff78be; } .wd-pop .sw.sw-purple { background: #966eff; } .wd-pop .sw.sw-erase { background: repeating-linear-gradient(45deg,#334,#334 3px,#556 3px,#556 6px); position: relative; } .wd-pop .wd-pop-note { background: rgba(var(--ka-cyan-rgb),.14); border: 1px solid rgba(var(--ka-cyan-rgb),.4); color: var(--ka-text-4); border-radius: 999px; width: 30px; height: 26px; font-size: 14px; cursor: pointer; display: flex; align-items: center; justify-content: center; } body.theme-light .wd-pop { background: rgba(255,255,255,.98); border-color: rgba(26,58,140,.28); } /* Note editor sheet */ .wd-note-wrap { position: fixed; inset: 0; z-index: 62; display: none; align-items: flex-end; justify-content: center; background: rgba(2,6,12,.55); } .wd-note-wrap.open { display: flex; } .wd-note-sheet { width: 100%; max-width: 520px; background: var(--ka-bg-card, #0a1626); border: 1px solid rgba(var(--ka-cyan-rgb),.3); border-radius: 18px 18px 0 0; padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); box-shadow: 0 -10px 40px rgba(0,0,0,.5); } .wd-note-head { font-size: 15px; font-weight: 700; color: var(--ka-text-2); margin-bottom: 4px; display: flex; align-items: center; justify-content: space-between; } .wd-note-ref { font-size: 12px; color: var(--ka-text-6); margin-bottom: 10px; } .wd-note-ta { width: 100%; min-height: 120px; resize: vertical; background: rgba(8,18,28,.6); border: 1px solid rgba(var(--ka-cyan-rgb),.2); border-radius: 12px; padding: 11px 12px; color: var(--ka-text-2); font-size: 15px; line-height: 1.5; font-family: inherit; } .wd-note-actions { display: flex; gap: 10px; margin-top: 12px; } .wd-note-actions button { flex: 1; padding: 12px; border-radius: 12px; font-size: 14px; font-weight: 700; cursor: pointer; border: 1px solid transparent; } .wd-note-save { background: var(--ka-cyan); color: #052430; border: none; } .wd-note-cancel { background: rgba(8,18,28,.6); border-color: rgba(var(--ka-cyan-rgb),.22); color: var(--ka-text-5); } body.theme-light .wd-note-sheet { background: #fff; } body.theme-light .wd-note-ta { background: rgba(238,243,255,.7); color: var(--ka-text-2); } /* Progress bar + milestones */ .wd-progress { margin-bottom: 12px; background: rgba(8,18,28,.5); border: 1px solid rgba(var(--ka-cyan-rgb),.14); border-radius: 12px; padding: 10px 12px; } .wd-prog-top { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; } .wd-prog-label { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ka-text-8); } .wd-prog-count { font-family: Orbitron, Inter, sans-serif; font-size: 15px; font-weight: 800; color: var(--ka-text-4); } .wd-prog-count small { font-size: 11px; color: var(--ka-text-8); font-weight: 600; } .wd-prog-track { position: relative; height: 10px; border-radius: 6px; background: rgba(8,18,28,.7); overflow: hidden; border: 1px solid rgba(var(--ka-cyan-rgb),.14); } .wd-prog-fill { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #12b9dc, #22e0ff); border-radius: 6px; box-shadow: 0 0 10px rgba(34,224,255,.5); transition: width .5s; } .wd-prog-ticks { position: absolute; inset: 0; } .wd-prog-tick { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(255,255,255,.14); } .wd-prog-tick.major { width: 2px; background: rgba(255,214,64,.6); } .wd-prog-mile { margin-top: 7px; font-size: 11px; color: var(--ka-text-7); } .wd-prog-mile b { color: var(--ka-text-4); } body.theme-light .wd-progress { background: rgba(238,243,255,.7); } /* Books-progress toggle button + grid */ .wd-nav.wd-books-btn { min-width: 40px; } .wd-books-wrap { position: fixed; inset: 0; z-index: 61; display: none; flex-direction: column; background: var(--ka-bg-screen, #060d18); padding: max(14px, env(safe-area-inset-top)) 14px 14px; } .wd-books-wrap.open { display: flex; } .wd-books-top { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; flex-shrink: 0; } .wd-books-top .wd-title { font-size: 18px; font-weight: 700; color: var(--ka-text-1); } .wd-books-scroll { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: 20px; } .wd-testa { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ka-cyan); margin: 14px 2px 8px; } .wd-book-row { padding: 9px 0; border-bottom: 1px solid rgba(var(--ka-cyan-rgb),.08); } .wd-book-name { display: flex; align-items: baseline; justify-content: space-between; font-size: 14px; font-weight: 600; color: var(--ka-text-3); margin-bottom: 6px; } .wd-book-frac { font-size: 11px; color: var(--ka-text-8); font-family: Orbitron, Inter, sans-serif; } .wd-book-frac.done { color: #3cdc82; } .wd-chips { display: flex; flex-wrap: wrap; gap: 4px; } .wd-chip { width: 22px; height: 22px; border-radius: 5px; border: 1px solid rgba(var(--ka-cyan-rgb),.22); background: rgba(8,18,28,.5); font-size: 9px; color: var(--ka-text-9); display: flex; align-items: center; justify-content: center; cursor: pointer; font-family: Orbitron, Inter, sans-serif; } .wd-chip.read { background: linear-gradient(180deg,#12b9dc,#0e9e8c); border-color: transparent; color: #042430; font-weight: 700; } .wd-chip.read::after { content: '✓'; } .wd-chip.read span { display: none; } .wd-chip.cur { outline: 2px solid var(--ka-cyan); outline-offset: 1px; } body.theme-light .wd-books-wrap { background: #f0f3fa; } body.theme-light .wd-chip { background: rgba(255,255,255,.9); } /* ══ MY JOURNEY — badges ═════════════════════════════════════════════════════ */ .jrn-badges-head { font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ka-text-8); padding-bottom: 7px; border-bottom: 1px solid rgba(var(--ka-cyan-rgb),.12); margin: 18px 0 10px; } .jrn-badge-cat { margin-bottom: 12px; } .jrn-badge-cat-h { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; color: var(--ka-text-6); margin-bottom: 6px; } .jrn-badge-cat-h .cnt { margin-left: auto; font-size: 10px; color: var(--ka-text-9); font-family: Orbitron, Inter, sans-serif; } .jrn-badge-grid { display: flex; flex-wrap: wrap; gap: 6px; } .jrn-badge { display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; background: rgba(var(--ka-cyan-rgb),.10); border: 1px solid rgba(var(--ka-cyan-rgb),.28); color: var(--ka-text-4); } .jrn-badge.locked { background: rgba(8,18,28,.4); border-color: rgba(var(--ka-cyan-rgb),.12); color: var(--ka-text-10); opacity: .6; } .jrn-badge .bi { font-size: 13px; } .jrn-badge.gold { background: rgba(255,200,60,.12); border-color: rgba(200,150,20,.45); color: var(--ka-gold, #ffd166); } body.theme-light .jrn-badge { background: rgba(26,58,140,.08); border-color: rgba(26,58,140,.24); color: var(--ka-text-4); } body.theme-light .jrn-badge.locked { background: rgba(26,58,140,.03); color: var(--ka-text-8); } /* ══ END THE WORD / JOURNEY BADGES ═══════════════════════════════════════════ */ /* ══ KINGDOM MESSENGER (main tab) ════════════════════════════════════════════ */ #screen-messenger { position: fixed; inset: 0; flex-direction: column; z-index: 20; background: var(--ka-bg-screen); display: none; } body.view-messenger #screen-messenger { display: flex; } body.msgr-in-chat #nav { display: none; } /* immersive while inside a chat */ /* nav unread badge */ .nav-badge { position: absolute; top: 4px; right: 22%; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 9px; background: #ff3b5c; color: #fff; font-size: 10px; font-weight: 800; line-height: 16px; text-align: center; box-shadow: 0 0 8px rgba(255,59,92,.6); } #nav button { position: relative; } /* ── list view ── */ .msgr-list-view { flex: 1; display: flex; flex-direction: column; min-height: 0; } .msgr-head { padding: max(16px, env(safe-area-inset-top)) 16px 10px; flex-shrink: 0; border-bottom: 1px solid rgba(var(--ka-cyan-rgb),.1); } .msgr-head-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; } .msgr-title { font-size: 24px; font-weight: 800; color: var(--ka-text-1); font-family: Orbitron, Inter, sans-serif; letter-spacing: .01em; } .msgr-new { width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(var(--ka-cyan-rgb),.28); background: rgba(var(--ka-cyan-rgb),.1); color: var(--ka-text-4); font-size: 18px; cursor: pointer; } .msgr-trust-note { font-size: 11.5px; color: var(--ka-text-7); margin-bottom: 10px; line-height: 1.4; } .msgr-search { width: 100%; background: rgba(8,18,28,.6); border: 1px solid rgba(var(--ka-cyan-rgb),.16); border-radius: 12px; padding: 10px 13px; color: var(--ka-text-2); font-size: 14px; } .msgr-search::placeholder { color: var(--ka-text-9); } .msgr-list { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 6px 8px calc(92px + env(safe-area-inset-bottom)); } .msgr-conv { width: 100%; display: flex; align-items: center; gap: 12px; padding: 11px 10px; background: none; border: none; border-bottom: 1px solid rgba(var(--ka-cyan-rgb),.07); cursor: pointer; text-align: left; } .msgr-conv:active { background: rgba(var(--ka-cyan-rgb),.06); } .msgr-conv-ring { flex: 0 0 auto; width: 50px; height: 50px; } .msgr-conv-meta { flex: 1; min-width: 0; } .msgr-conv-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } .msgr-conv-name { font-size: 15.5px; font-weight: 700; color: var(--ka-text-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .msgr-conv-time { flex: 0 0 auto; font-size: 11px; color: var(--ka-text-9); } .msgr-conv-badge { display: block; margin: 2px 0 3px; } .msgr-conv-last { display: block; font-size: 13px; color: var(--ka-text-7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .msgr-conv-last.unread { color: var(--ka-text-2); font-weight: 600; } .msgr-conv-last .mc-you { color: var(--ka-text-9); } .msgr-conv-dot { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; background: var(--ka-cyan); box-shadow: 0 0 8px rgba(var(--ka-cyan-rgb),.7); } .msgr-empty { text-align: center; color: var(--ka-text-8); font-size: 14px; line-height: 1.7; padding: 46px 22px; } .msgr-empty-sub { font-size: 12px; color: var(--ka-text-9); } /* ── trust badge ── */ .trust-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; border: 1px solid transparent; line-height: 1.4; } .trust-badge.tb-sm { font-size: 10px; padding: 1px 7px; } .trust-badge.tb-new { background: rgba(120,140,160,.14); border-color: rgba(120,140,160,.3); color: #9fb2c4; } .trust-badge.tb-growing { background: rgba(60,220,130,.12); border-color: rgba(60,220,130,.34); color: #4fe08a; } .trust-badge.tb-advancer { background: rgba(34,224,255,.12); border-color: rgba(34,224,255,.36); color: #4fe6ff; } .trust-badge.tb-crown { background: rgba(255,200,60,.14); border-color: rgba(210,160,30,.5); color: #ffd166; } /* ── chat view ── */ .msgr-chat-view { flex: 1; display: none; flex-direction: column; min-height: 0; } .msgr-chat-head { display: flex; align-items: center; gap: 10px; padding: max(12px, env(safe-area-inset-top)) 12px 10px; flex-shrink: 0; border-bottom: 1px solid rgba(var(--ka-cyan-rgb),.12); background: rgba(8,16,26,.6); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .msgr-back { background: none; border: none; color: var(--ka-text-4); font-size: 30px; line-height: 1; cursor: pointer; padding: 0 4px; flex: 0 0 auto; } .msgr-chat-head .mring { width: 40px; height: 40px; flex: 0 0 auto; } .msgr-chat-who { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .msgr-chat-name { font-size: 16px; font-weight: 700; color: var(--ka-text-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .msgr-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 14px 12px; display: flex; flex-direction: column; gap: 8px; } .msgr-body .bubble { max-width: 78%; padding: 9px 13px; border-radius: 16px; font-size: 15px; line-height: 1.4; position: relative; word-wrap: break-word; } .msgr-body .bubble.mine { align-self: flex-end; background: linear-gradient(180deg, #1f5fbf, #143d8c); color: #eaf3ff; border-bottom-right-radius: 5px; } .msgr-body .bubble.theirs { align-self: flex-start; background: rgba(255,255,255,.08); color: var(--ka-text-2); border: 1px solid rgba(var(--ka-cyan-rgb),.14); border-bottom-left-radius: 5px; } .msgr-body .b-time { display: block; font-size: 10px; opacity: .6; margin-top: 3px; text-align: right; } .msgr-plus { background: none; border: none; color: var(--ka-text-4); font-size: 24px; line-height: 1; cursor: pointer; flex: 0 0 auto; padding: 0 4px; } #msgr-composer { padding-bottom: calc(10px + env(safe-area-inset-bottom)); } /* ── new-chat picker sheet ── */ .msgr-pick-wrap { position: fixed; inset: 0; z-index: 40; display: none; align-items: flex-end; justify-content: center; background: rgba(2,6,12,.55); } .msgr-pick-wrap.open { display: flex; } .msgr-pick-sheet { width: 100%; max-width: 520px; max-height: 76vh; display: flex; flex-direction: column; background: var(--ka-bg-card, #0a1626); border: 1px solid rgba(var(--ka-cyan-rgb),.3); border-radius: 18px 18px 0 0; padding: 16px 14px calc(16px + env(safe-area-inset-bottom)); } .msgr-pick-head { display: flex; align-items: center; justify-content: space-between; font-size: 16px; font-weight: 700; color: var(--ka-text-1); margin-bottom: 10px; } .msgr-pick-list { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; margin-top: 8px; } .msgr-pick-row { width: 100%; display: flex; align-items: center; gap: 11px; padding: 9px 6px; background: none; border: none; border-bottom: 1px solid rgba(var(--ka-cyan-rgb),.07); cursor: pointer; text-align: left; } .msgr-pick-row .mring { width: 42px; height: 42px; flex: 0 0 auto; } .msgr-pick-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .msgr-pick-name { font-size: 14.5px; font-weight: 600; color: var(--ka-text-1); } /* ── light mode ── */ body.theme-light .msgr-search { background: rgba(238,243,255,.7); color: var(--ka-text-2); } body.theme-light .msgr-body .bubble.theirs { background: #fff; color: var(--ka-text-2); border-color: rgba(26,58,140,.14); } body.theme-light .msgr-body .bubble.mine { background: linear-gradient(180deg, #2f6fd8, #1a4bb0); color: #fff; } body.theme-light .msgr-chat-head { background: rgba(255,255,255,.85); } body.theme-light .msgr-pick-sheet { background: #fff; } body.theme-light .trust-badge.tb-new { color: #5a6b7c; } /* ══ END KINGDOM MESSENGER ═══════════════════════════════════════════════════ */ /* ══ TRUST & SAFETY (flags + review panel) ═══════════════════════════════════ */ .msgr-head-btns { display: flex; gap: 8px; } .msgr-flag { margin-left: auto; background: none; border: none; color: var(--ka-text-6); font-size: 19px; cursor: pointer; padding: 4px 6px; flex: 0 0 auto; } .msgr-flag:active { color: #ff6b6b; } /* caution chip beside a trust badge */ .flag-chip { display: inline-flex; align-items: center; gap: 3px; padding: 1px 7px; border-radius: 999px; font-size: 10px; font-weight: 700; margin-left: 5px; border: 1px solid transparent; } .flag-chip.open { background: rgba(255,180,40,.14); border-color: rgba(255,180,40,.4); color: #ffc04d; } .flag-chip.upheld { background: rgba(255,70,70,.14); border-color: rgba(255,70,70,.45); color: #ff7a7a; } .flag-chip.cleared { background: rgba(60,220,130,.12); border-color: rgba(60,220,130,.36); color: #4fe08a; } /* flag modal */ #flag-modal .flag-who { display: flex; align-items: center; gap: 11px; padding: 10px; margin-bottom: 10px; border-radius: 12px; background: rgba(var(--ka-cyan-rgb),.06); } #flag-modal .flag-who .mring { width: 44px; height: 44px; flex: 0 0 auto; } .flag-who-name { font-size: 15px; font-weight: 700; color: var(--ka-text-1); margin-bottom: 3px; } .flag-lead { font-size: 12px; color: var(--ka-text-7); line-height: 1.45; margin-bottom: 12px; } .flag-label { display: block; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ka-text-8); margin: 6px 0 5px; } .flag-reason { margin-bottom: 4px; } /* trust & safety panel */ #msgr-safety { z-index: 41; } .safety-hero { display: flex; gap: 12px; align-items: flex-start; background: linear-gradient(150deg, rgba(34,224,255,.10), rgba(124,60,255,.08)); border: 1px solid rgba(var(--ka-cyan-rgb),.2); border-radius: 14px; padding: 14px; margin-bottom: 12px; } .safety-hero-ic { font-size: 30px; flex: 0 0 auto; } .safety-hero-txt { font-size: 12.5px; color: var(--ka-text-4); line-height: 1.5; } .safety-status { font-size: 12.5px; font-weight: 600; padding: 10px 12px; border-radius: 12px; margin-bottom: 6px; background: rgba(8,18,28,.5); border: 1px solid rgba(var(--ka-cyan-rgb),.14); color: var(--ka-text-7); } .safety-status.on { background: rgba(60,220,130,.1); border-color: rgba(60,220,130,.34); color: #4fe08a; } .flag-card { background: rgba(8,18,28,.55); border: 1px solid rgba(var(--ka-cyan-rgb),.14); border-radius: 14px; padding: 12px; margin-bottom: 10px; } .flag-card-top { display: flex; align-items: center; gap: 10px; } .flag-card-top .mring { width: 42px; height: 42px; flex: 0 0 auto; } .flag-card-who { flex: 1; min-width: 0; } .flag-card-name { font-size: 14px; font-weight: 700; color: var(--ka-text-1); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .flag-card-reason { font-size: 12.5px; color: #ff9a6b; font-weight: 600; margin-top: 2px; } .flag-card-note { font-size: 13px; color: var(--ka-text-3); font-style: italic; margin: 9px 0 4px; line-height: 1.5; } .flag-card-meta { font-size: 11px; color: var(--ka-text-9); margin-top: 6px; } .flag-card-actions { display: flex; gap: 9px; margin-top: 11px; } .flag-vote { flex: 1; padding: 10px; border-radius: 11px; font-size: 13px; font-weight: 700; cursor: pointer; border: 1px solid transparent; } .flag-vote.uphold { background: rgba(255,70,70,.12); border-color: rgba(255,70,70,.45); color: #ff7a7a; } .flag-vote.clear { background: rgba(60,220,130,.12); border-color: rgba(60,220,130,.42); color: #4fe08a; } .flag-vote:active { transform: scale(.97); } .flag-card-voted { margin-top: 10px; font-size: 12px; font-weight: 600; color: var(--ka-text-6); text-align: center; padding: 8px; background: rgba(var(--ka-cyan-rgb),.06); border-radius: 10px; } body.theme-light .safety-status { background: rgba(238,243,255,.7); } body.theme-light .flag-card { background: rgba(255,255,255,.9); } body.theme-light .flag-card-note { color: var(--ka-text-3); } /* ══ END TRUST & SAFETY ══════════════════════════════════════════════════════ */ /* ══ MESSENGER — requests + contact-limits ═══════════════════════════════════ */ /* requests banner atop the chat list */ .msgr-req-banner { width: 100%; display: flex; align-items: center; gap: 8px; padding: 12px 14px; margin-bottom: 4px; background: linear-gradient(120deg, rgba(34,224,255,.12), rgba(124,60,255,.1)); border: 1px solid rgba(var(--ka-cyan-rgb),.28); border-radius: 14px; color: var(--ka-text-3); font-size: 14px; cursor: pointer; } .msgr-req-banner b { color: var(--ka-text-1); } .msgr-req-go { margin-left: auto; color: var(--ka-cyan); font-weight: 700; font-size: 13px; } /* requests panel */ #msgr-requests { z-index: 41; } .req-card { background: rgba(8,18,28,.55); border: 1px solid rgba(var(--ka-cyan-rgb),.16); border-radius: 14px; padding: 13px; margin-bottom: 11px; } .req-card.below { border-color: rgba(255,180,40,.34); } .req-card-top { display: flex; align-items: center; gap: 11px; } .req-card-top .mring { width: 46px; height: 46px; flex: 0 0 auto; } .req-card-who { flex: 1; min-width: 0; } .req-card-name { font-size: 15px; font-weight: 700; color: var(--ka-text-1); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .req-card-msg { font-size: 13.5px; color: var(--ka-text-3); font-style: italic; margin-top: 4px; line-height: 1.45; } .req-below-note { font-size: 11.5px; color: #ffc04d; margin-top: 8px; font-weight: 600; } .req-introduced { font-size: 12px; color: var(--ka-text-6); margin-top: 8px; background: rgba(var(--ka-cyan-rgb),.07); padding: 7px 9px; border-radius: 9px; } .req-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; } .req-btn { flex: 1 1 auto; min-width: 88px; padding: 10px 8px; border-radius: 11px; font-size: 13px; font-weight: 700; cursor: pointer; border: 1px solid transparent; } .req-btn.accept { background: rgba(60,220,130,.14); border-color: rgba(60,220,130,.44); color: #4fe08a; } .req-btn.intro { background: rgba(34,224,255,.12); border-color: rgba(34,224,255,.4); color: #4fe6ff; flex: 2 1 140px; } .req-btn.reject { background: rgba(255,70,70,.1); border-color: rgba(255,70,70,.4); color: #ff7a7a; } .req-btn:active { transform: scale(.97); } /* contact-limits sheet */ #msgr-settings .set-scroll { max-height: 62vh; } .set-note { font-size: 12px; color: var(--ka-text-7); line-height: 1.45; margin-bottom: 12px; } .set-sec { font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--ka-cyan); margin: 16px 0 4px; } .set-sec:first-of-type { margin-top: 4px; } .set-sec-sub { color: var(--ka-text-9); font-weight: 600; letter-spacing: 0; text-transform: none; font-size: 10.5px; } #msgr-settings .flag-label { margin: 8px 0 5px; } #msgr-settings select.msgr-search, #msgr-settings input.msgr-search { margin-bottom: 2px; } .set-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } body.theme-light .msgr-req-banner { background: linear-gradient(120deg, rgba(26,58,140,.08), rgba(124,60,255,.06)); } body.theme-light .req-card { background: rgba(255,255,255,.9); } /* ══ END MESSENGER requests + contact-limits ═════════════════════════════════ */ /* ══ MESSENGER — in-chat "+" share menu + KG cards ═══════════════════════════ */ .plus-sheet .plus-action { width: 100%; display: flex; align-items: center; gap: 13px; padding: 14px 12px; margin-top: 8px; background: rgba(var(--ka-cyan-rgb),.06); border: 1px solid rgba(var(--ka-cyan-rgb),.18); border-radius: 14px; cursor: pointer; text-align: left; } .plus-sheet .plus-action:active { background: rgba(var(--ka-cyan-rgb),.12); } .plus-sheet .plus-action:disabled { opacity: .45; cursor: default; } .plus-ic { font-size: 22px; flex: 0 0 auto; } .plus-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .plus-txt b { font-size: 14.5px; color: var(--ka-text-1); } .plus-txt small { font-size: 12px; color: var(--ka-text-7); } .plus-go { color: var(--ka-cyan); font-size: 20px; flex: 0 0 auto; } /* KG invite / join cards inside the chat */ .kg-card { max-width: 82%; padding: 12px 13px; border-radius: 16px; position: relative; margin: 2px 0; border: 1px solid rgba(34,224,255,.3); background: linear-gradient(160deg, rgba(34,224,255,.12), rgba(124,60,255,.1)); } .kg-card.mine { align-self: flex-end; border-bottom-right-radius: 5px; } .kg-card.theirs { align-self: flex-start; border-bottom-left-radius: 5px; } .kg-card-h { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ka-text-6); margin-bottom: 4px; } .kg-card-name { font-size: 16px; font-weight: 800; color: var(--ka-text-1); font-family: Orbitron, Inter, sans-serif; } .kg-card-sub { font-size: 12px; color: var(--ka-text-5); margin-top: 3px; } .kg-card-sub b { color: var(--ka-text-3); } .kg-card-status { font-size: 12.5px; color: #4fe08a; font-weight: 600; margin-top: 9px; } .kg-card-btn { width: 100%; margin-top: 11px; padding: 10px; border-radius: 11px; border: none; cursor: pointer; background: linear-gradient(180deg, #24e089, #12b866); color: #04240f; font-size: 13.5px; font-weight: 800; } .kg-card-btn:active { transform: scale(.98); } .kg-card .b-time { display: block; text-align: right; font-size: 10px; opacity: .6; margin-top: 6px; } body.theme-light .kg-card { background: linear-gradient(160deg, rgba(26,58,140,.08), rgba(124,60,255,.06)); } /* ══ END MESSENGER "+" share ═════════════════════════════════════════════════ */ /* ══ MESSENGER — Kingdom Group chats ═════════════════════════════════════════ */ .msgr-seg { display: flex; gap: 4px; background: rgba(8,18,28,.5); border: 1px solid rgba(var(--ka-cyan-rgb),.14); border-radius: 12px; padding: 3px; margin-bottom: 10px; } .msgr-seg-btn { flex: 1; padding: 8px; border: none; background: none; color: var(--ka-text-7); font-size: 13px; font-weight: 700; border-radius: 9px; cursor: pointer; } .msgr-seg-btn.on { background: rgba(var(--ka-cyan-rgb),.16); color: var(--ka-text-3); box-shadow: 0 0 10px rgba(var(--ka-cyan-rgb),.14); } .group-ring { display: flex; align-items: center; justify-content: center; font-size: 22px; background: linear-gradient(150deg, rgba(34,224,255,.18), rgba(124,60,255,.16)); border: 2px solid rgba(var(--ka-cyan-rgb),.4); border-radius: 50%; } .msgr-chat-head .group-ring { width: 40px; height: 40px; font-size: 20px; } .group-count { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; color: var(--ka-text-6); background: rgba(var(--ka-cyan-rgb),.08); border: 1px solid rgba(var(--ka-cyan-rgb),.2); border-radius: 999px; padding: 1px 8px; } /* group message: sender name + trust badge above their bubble */ .gbubble-wrap { display: flex; flex-direction: column; align-items: flex-start; max-width: 82%; } .gbubble-sender { font-size: 11px; font-weight: 700; color: var(--ka-text-6); margin: 0 0 2px 4px; display: flex; align-items: center; gap: 5px; } .gbubble-wrap .bubble.theirs { align-self: flex-start; } /* group chat: flag + KG-invite "+" don't apply inside a KG group */ body.msgr-group #msgr-flag, body.msgr-group #msgr-plus { display: none; } body.theme-light .msgr-seg { background: rgba(238,243,255,.6); } /* ══ END MESSENGER group chats ═══════════════════════════════════════════════ */ /* ══ MESSENGER — photos ══════════════════════════════════════════════════════ */ .bubble.img { padding: 4px; overflow: hidden; } .chat-img { display: block; max-width: 220px; max-height: 300px; width: auto; border-radius: 12px; cursor: pointer; } .bubble.img .b-time { padding: 0 6px 2px; } #msgr-photo { font-size: 19px; } .msgr-img-viewer { position: fixed; inset: 0; z-index: 70; display: none; align-items: center; justify-content: center; background: rgba(0,0,0,.92); padding: 20px; } .msgr-img-viewer.open { display: flex; } .msgr-img-viewer img { max-width: 100%; max-height: 100%; border-radius: 8px; } /* ══ END MESSENGER photos ════════════════════════════════════════════════════ */ /* ══ MESSENGER — voice notes ═════════════════════════════════════════════════ */ #msgr-mic { font-size: 19px; } /* recording bar (replaces the composer controls while recording) */ .msgr-rec { display: none; flex: 1; align-items: center; gap: 10px; padding: 4px 6px; } .msg-composer.recording > :not(.msgr-rec) { display: none; } .msg-composer.recording .msgr-rec { display: flex; } .rec-dot { width: 12px; height: 12px; border-radius: 50%; background: #ff3b5c; box-shadow: 0 0 10px rgba(255,59,92,.7); animation: recpulse 1s infinite; flex: 0 0 auto; } @keyframes recpulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .4; transform: scale(.8); } } .rec-time { font-family: Orbitron, Inter, sans-serif; font-size: 14px; font-weight: 700; color: var(--ka-text-2); flex: 0 0 auto; } .rec-hint { font-size: 12px; color: var(--ka-text-8); flex: 1; } .rec-cancel { background: none; border: none; color: var(--ka-text-6); font-size: 18px; cursor: pointer; flex: 0 0 auto; padding: 4px 8px; } .rec-send { background: var(--ka-cyan); color: #052430; border: none; font-size: 13px; font-weight: 800; padding: 8px 14px; border-radius: 999px; cursor: pointer; flex: 0 0 auto; } /* audio (voice note) bubble */ .bubble.aud { display: flex; align-items: center; gap: 9px; min-width: 180px; padding: 9px 12px; } .aud-play { width: 34px; height: 34px; border-radius: 50%; border: none; cursor: pointer; flex: 0 0 auto; font-size: 14px; background: rgba(255,255,255,.9); color: #143d8c; display: flex; align-items: center; justify-content: center; } .bubble.aud.theirs .aud-play { background: var(--ka-cyan); color: #052430; } .aud-bar { flex: 1; height: 4px; border-radius: 3px; background: rgba(255,255,255,.28); overflow: hidden; min-width: 60px; } .bubble.aud.theirs .aud-bar { background: rgba(var(--ka-cyan-rgb),.25); } .aud-prog { height: 100%; width: 0%; background: #fff; border-radius: 3px; transition: width .2s linear; } .bubble.aud.theirs .aud-prog { background: var(--ka-cyan); } .aud-dur { font-size: 11px; opacity: .8; flex: 0 0 auto; font-variant-numeric: tabular-nums; } .bubble.aud .b-time { position: absolute; bottom: 1px; right: 8px; } .bubble.aud { position: relative; padding-bottom: 14px; } body.theme-light .aud-play { background: #143d8c; color: #fff; } /* ══ END MESSENGER voice notes ═══════════════════════════════════════════════ */