/* ============================================================================
 * KELVIN UNIVERSE — top-down office game UI
 * ==========================================================================*/
:root{
  --ink:#0c0a14; --glass:rgba(20,18,34,0.82); --brd:rgba(120,140,220,0.2);
  --text:#e8eefc; --dim:#9aa4c0; --accent:#5aa6ff; --accent-2:#a98bff;
  --good:#38d39f; --bad:#ff6b7d; --warn:#ffb648;
  --font:"Space Grotesk","Segoe UI",-apple-system,BlinkMacSystemFont,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --r-sm:8px; --r-md:12px; --r-lg:16px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;background:var(--ink);color:var(--text);
  font-family:var(--font);font-feature-settings:"ss01","cv01";-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{text-wrap:balance;letter-spacing:-0.01em}
p{text-wrap:pretty}
button{font-family:inherit;cursor:pointer}
a{color:var(--accent);text-decoration:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
button:focus:not(:focus-visible){outline:none}
kbd{background:#f4f6ff;color:#14121f;border-radius:5px;padding:2px 7px;font-weight:700;font-size:12px;
  font-family:var(--mono);box-shadow:0 1px 0 rgba(0,0,0,.35)}
#game{position:fixed;inset:0;display:block;image-rendering:pixelated;cursor:pointer}

/* respect users who prefer less motion */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* HUD */
#hud{position:fixed;top:0;left:0;right:0;z-index:20;display:flex;justify-content:space-between;
  align-items:center;padding:12px 20px;pointer-events:none;
  background:linear-gradient(180deg,rgba(12,10,20,.9),rgba(12,10,20,0))}
#hud>*{pointer-events:auto}
.brand{display:flex;align-items:center;gap:12px}
.logo{font-size:22px;color:var(--accent);filter:drop-shadow(0 0 8px var(--accent))}
.brand h1{font-size:15px;letter-spacing:3px}
.brand p{font-size:11px;color:var(--dim)}
#hud nav{display:flex;gap:8px}
#hud nav button{background:var(--glass);border:1px solid var(--brd);color:var(--text);
  padding:8px 12px;border-radius:10px;font-size:12.5px;backdrop-filter:blur(10px);transition:.15s}
#hud nav button:hover{border-color:var(--accent);transform:translateY(-1px)}
#hud nav button.primary{background:linear-gradient(180deg,#6cb2ff,#3d83e6);border-color:transparent;font-weight:600;color:#fff}
#hud nav button.primary:hover{box-shadow:0 6px 16px color-mix(in srgb,var(--accent) 45%,transparent)}

/* intro overlay */
#intro{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 40%,#1a1030,#07060f 75%);transition:opacity .4s}
#intro.gone{opacity:0;pointer-events:none}
.intro-card{max-width:440px;text-align:center;padding:36px 34px;background:var(--glass);
  border:1px solid var(--brd);border-radius:20px;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.intro-logo{font-size:38px;color:var(--accent);filter:drop-shadow(0 0 14px var(--accent));margin-bottom:8px}
.intro-card h2{font-size:clamp(22px,3vw,27px);margin-bottom:12px;letter-spacing:-.01em;font-weight:600}
.intro-card p{font-size:14px;color:#c4cee2;line-height:1.6;margin-bottom:16px}
.intro-keys{display:flex;flex-direction:column;gap:8px;font-size:13px;color:var(--dim);margin-bottom:16px}
.intro-keys kbd{margin:0 1px}
.intro-tip{font-size:12.5px;color:var(--dim);background:rgba(79,157,255,.08);border-radius:10px;padding:10px}
.enter{margin-top:6px;background:linear-gradient(180deg,#6cb2ff,#3d83e6);color:#fff;border:none;
  padding:14px 28px;border-radius:var(--r-md);font-size:15px;font-weight:600;
  box-shadow:0 8px 22px color-mix(in srgb,var(--accent) 40%,transparent);transition:transform .15s,box-shadow .15s}
.enter:hover{transform:translateY(-2px);box-shadow:0 12px 28px color-mix(in srgb,var(--accent) 50%,transparent)}

/* Ops Center agents */
.agent{background:rgba(12,14,28,.55);border:1px solid var(--brd);border-radius:14px;padding:14px;margin-bottom:12px}
.agent.auto-agent{opacity:.92}
.ag-top{display:flex;align-items:center;gap:11px}
.av{width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:18px;flex:none}
.ag-id{flex:1;min-width:0}
.ag-id b{font-size:15px}
.ag-id span{display:block;font-size:11px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ag-state{font-size:11px;font-weight:700;white-space:nowrap}
.ag-state.busy{color:var(--warn)}
.ag-state.idle{color:var(--good)}
.ag-task{font-size:12px;color:#c4cee2;margin-top:10px;line-height:1.5;background:rgba(0,0,0,.2);
  border-radius:9px;padding:8px 10px}
.ag-actions{margin-top:11px}
.qa-label{font-size:11px;color:var(--dim);margin-bottom:7px;text-transform:uppercase;letter-spacing:.4px}
.qa-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.qa{background:rgba(79,157,255,.12);border:1px solid var(--brd);color:var(--text);font-size:12px;
  padding:9px 10px;border-radius:10px;text-align:left;transition:.14s;line-height:1.3}
.qa:hover{border-color:var(--accent);background:rgba(79,157,255,.22)}
.qa.dis{opacity:.4;cursor:not-allowed}

/* prompt */
#prompt{position:fixed;bottom:64px;left:50%;transform:translateX(-50%) translateY(10px);z-index:18;
  background:rgba(12,10,20,.9);border:1px solid var(--brd);border-radius:12px;padding:10px 16px;
  font-size:13.5px;opacity:0;pointer-events:none;transition:.16s;backdrop-filter:blur(8px);white-space:nowrap;cursor:pointer}
#prompt.show{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto}
#prompt span{color:var(--dim)}

/* "Today" KPI ribbon */
#ribbon{position:fixed;top:58px;left:50%;transform:translateX(-50%) translateY(-6px);z-index:17;
  display:none;gap:8px;opacity:0;transition:.25s;max-width:96vw;overflow-x:auto;padding:2px}
#ribbon.show{display:flex;opacity:1;transform:translateX(-50%) translateY(0)}
.rt{display:flex;flex-direction:column;align-items:center;gap:2px;background:rgba(14,12,26,.82);
  border:1px solid var(--brd);border-radius:11px;padding:7px 14px;backdrop-filter:blur(10px);white-space:nowrap}
.rk{font-size:9.5px;color:var(--dim);letter-spacing:.4px;text-transform:uppercase}
.rv{font-size:16px;font-weight:700;color:#fff;font-family:var(--mono);font-variant-numeric:tabular-nums}

/* zoom controls */
#zoomctl{position:fixed;left:16px;bottom:16px;z-index:16;display:flex;flex-direction:column;gap:6px}
#zoomctl button{width:34px;height:34px;border-radius:9px;background:rgba(14,12,26,.82);border:1px solid var(--brd);
  color:var(--text);font-size:18px;line-height:1;backdrop-filter:blur(8px);transition:.14s}
#zoomctl button:hover{border-color:var(--accent);color:var(--accent)}
#zoomctl #zreset{font-size:14px}

/* mobile interact FAB (hidden on desktop) */
#touchAct{display:none;position:fixed;right:20px;bottom:130px;z-index:19;width:64px;height:64px;border-radius:50%;
  background:linear-gradient(180deg,#6cb2ff,#3d83e6);color:#fff;border:none;font-size:22px;font-weight:800;
  box-shadow:0 8px 24px rgba(122,77,255,.5)}
/* only shown on touch devices — see @media (pointer:coarse) below */

/* project board */
.field2{font-size:13px;line-height:1.6;margin-bottom:8px;color:#c4cee2}
.phases{display:flex;flex-direction:column;gap:9px;margin-bottom:8px}
.phase{background:rgba(12,14,28,.5);border:1px solid var(--brd);border-radius:11px;padding:11px 13px}
.phase.active{border-color:rgba(56,211,159,.5);background:rgba(56,211,159,.06)}
.ph-h{font-size:13.5px;font-weight:700}
.ph-t{font-size:12px;color:var(--dim);margin-top:4px;line-height:1.5}

/* help */
#help{position:fixed;bottom:16px;left:50%;transform:translateX(-50%);z-index:16;font-size:11.5px;
  color:var(--dim);background:rgba(12,10,20,.55);padding:6px 14px;border-radius:20px;border:1px solid var(--brd)}
#help b{color:var(--text)}

/* toast */
#toast{position:fixed;top:70px;left:50%;transform:translateX(-50%) translateY(-8px);z-index:30;
  background:rgba(20,18,34,.95);border:1px solid var(--brd);border-radius:12px;padding:11px 18px;
  font-size:13.5px;opacity:0;pointer-events:none;transition:.2s;box-shadow:0 10px 30px rgba(0,0,0,.5)}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* side panel */
#sidePanel{position:fixed;top:0;right:0;height:100%;width:400px;max-width:92vw;z-index:25;
  background:var(--glass);backdrop-filter:blur(20px);border-left:1px solid var(--brd);
  box-shadow:-20px 0 60px rgba(0,0,0,.5);transform:translateX(100%);
  transition:transform .3s cubic-bezier(.4,1.1,.4,1);overflow-y:auto}
#sidePanel.show{transform:translateX(0)}
#sidePanel .close{position:absolute;top:14px;right:14px;z-index:2;background:var(--glass);
  border:1px solid var(--brd);color:var(--text);width:32px;height:32px;border-radius:9px;font-size:14px}
#sidePanel .close:hover{border-color:var(--bad);color:var(--bad)}
#panelContent{padding:52px 24px 40px}

/* panel header */
.ph{display:flex;align-items:center;gap:13px;margin-bottom:18px}
.ph .dot{width:44px;height:44px;border-radius:50%;flex:none;box-shadow:0 0 20px currentColor}
.ph h2{font-size:clamp(19px,2.4vw,23px);font-weight:600}
.ph .sub{font-size:12.5px;color:var(--dim);margin-top:3px;display:flex;align-items:center;gap:8px}
.pill{font-size:10px;font-weight:700;text-transform:uppercase;padding:2px 8px;border-radius:20px;letter-spacing:.4px}
.st-live{background:rgba(56,211,159,.16);color:var(--good)}
.st-internal{background:rgba(142,162,184,.16);color:#aeb9cc}
.st-wip{background:rgba(255,182,72,.16);color:var(--warn)}
.st-archived{background:rgba(255,107,125,.16);color:var(--bad)}

.links{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:20px}
.lnk{background:linear-gradient(180deg,#6cb2ff,#3d83e6);color:#fff;padding:9px 14px;border-radius:11px;
  font-size:12.5px;font-weight:600;box-shadow:0 6px 16px rgba(79,157,255,.3)}
.lnk:hover{transform:translateY(-2px)}
.empty{color:var(--dim);font-size:13px;font-style:italic;margin-bottom:14px}
.working{color:var(--warn);font-size:14px;line-height:1.6;background:rgba(255,182,72,.08);
  border:1px solid rgba(255,182,72,.3);border-radius:12px;padding:14px}

.lh{font-size:13px;letter-spacing:.5px;color:var(--dim);text-transform:uppercase;margin:6px 0 12px;display:flex;align-items:center;gap:8px}
.live-dot{font-size:10px;font-weight:700;color:#38d39f;background:rgba(56,211,159,.14);
  padding:2px 8px;border-radius:20px;letter-spacing:.5px;animation:livepulse 2s ease-in-out infinite}
@keyframes livepulse{50%{opacity:.5}}
/* activity log */
ul.log{list-style:none;display:flex;flex-direction:column;gap:2px}
ul.log li{display:flex;gap:12px;padding:11px 12px;border-radius:11px;transition:.12s}
ul.log li:hover{background:rgba(255,255,255,.03)}
.li-ic{font-size:16px;flex:none;width:22px;text-align:center}
.li-tx{font-size:13.5px;line-height:1.45}
.li-t{font-size:11px;color:var(--dim);margin-top:3px}
.li-t .tag{font-weight:700}
ul.log li+li{border-top:1px solid rgba(255,255,255,.05)}
.feed li:first-child .li-tx{color:#fff}

/* chris orders */
.orders{display:flex;flex-direction:column;gap:10px;margin-bottom:14px}
.order{display:flex;justify-content:space-between;align-items:center;background:rgba(79,157,255,.1);
  border:1px solid var(--brd);color:var(--text);padding:13px 15px;border-radius:12px;font-size:14px;text-align:left;transition:.15s}
.order:hover{border-color:var(--accent);background:rgba(79,157,255,.2);transform:translateX(3px)}
.order em{font-style:normal;color:var(--dim);font-size:11px}
.hint2{font-size:12px;color:var(--dim);line-height:1.5}

/* mcp */
.mcp{background:rgba(12,14,28,.5);border:1px solid var(--brd);border-radius:12px;padding:13px 15px;margin-bottom:11px}
.mcp-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.mcp b{font-size:14.5px}
.sub2{font-size:11.5px;color:var(--dim);margin-top:4px}
.flag{font-size:11px;font-weight:700;white-space:nowrap}
.mcp-act{display:flex;gap:8px;margin-top:11px;flex-wrap:wrap}
.mini{background:rgba(79,157,255,.12);border:1px solid var(--brd);color:var(--text);font-size:11.5px;
  padding:6px 10px;border-radius:8px;display:inline-block}
.mini:hover{border-color:var(--accent)}
.mini.ok{border-color:var(--good);color:var(--good)}
.cmd{font-family:"SF Mono",Menlo,monospace;font-size:10.5px;color:#9fd0ff;background:rgba(0,0,0,.35);
  padding:8px 10px;border-radius:8px;margin-top:8px;line-height:1.5;word-break:break-word}

/* automations */
.auto{background:rgba(12,14,28,.5);border:1px solid var(--brd);border-radius:12px;padding:13px 15px;margin-bottom:11px}
.auto h4{font-size:14.5px;display:flex;align-items:center;gap:8px}
.a-s{color:var(--accent);font-size:12px;font-weight:600;margin-top:4px}
.a-d{font-size:12px;color:#c4cee2;margin-top:7px;line-height:1.5}
.pulse{width:9px;height:9px;border-radius:50%;background:var(--good);position:relative;flex:none}
.pulse::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--good);animation:ping 1.8s ease-out infinite}
@keyframes ping{to{transform:scale(3);opacity:0}}
.pulse.paused{background:var(--warn)}.pulse.paused::after{display:none}

@media (max-width:640px){
  #hud{padding:10px 12px}
  #hud nav{gap:5px}
  #hud nav button{font-size:11px;padding:7px 9px}
  #hud nav button.primary{font-size:11px}
  .brand h1{font-size:12px;letter-spacing:1.5px}
  #help{display:none}
  #ribbon{top:96px}
  .rt{padding:6px 10px}
  #zoomctl{bottom:12px;left:12px}
}
/* touch devices: bigger tap targets (44px min) + show interact FAB */
@media (pointer:coarse){
  #touchAct.show{display:block}
  #help{display:none}
  #hud nav button{min-height:44px;padding:0 14px}
  #zoomctl button{width:44px;height:44px;font-size:20px}
  #sidePanel .close{width:44px;height:44px}
  .order,.qa,.lnk,.mini{min-height:44px}
}