sim.css

/* PROJECT ULTIMATE — living world styles (world/simulation/sim.css)
 * Tropical-futurist archipelago skin. CWI logo on everything; gold crown
 * exclusive to KingCode. */
:root{
  --ink:#eaf6ff; --dim:#9db8d6; --panel:rgba(6,14,30,.82);
  --line:rgba(120,180,255,.16); --glow:#8fc3ff; --gold:#ffd75e;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:#04070f;color:var(--ink);
  font-family:"Avenir Next","Segoe UI",system-ui,sans-serif}
#camera{position:fixed;inset:0;transform-origin:0 0}
#sky{position:absolute;inset:0;width:100%;height:100%;display:block}
#stage{position:absolute;inset:0;pointer-events:none}
#stage .island-sign,#stage .agent{pointer-events:auto}

/* ---------- brand / clock / watermark ---------- */
#brand{position:fixed;top:14px;left:14px;z-index:30;display:flex;align-items:center;gap:10px;
  background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:8px 12px;
  font-weight:700;letter-spacing:.18em;font-size:12px}
#brand img{width:30px;height:30px;border-radius:50%;object-fit:cover}
#world-clock{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:30;
  background:var(--panel);border:1px solid var(--line);border-radius:999px;
  padding:8px 18px;font-size:13px;color:var(--dim);white-space:nowrap}
#watermark{position:fixed;right:14px;bottom:12px;z-index:30;display:flex;align-items:center;gap:8px;
  background:rgba(4,8,16,.66);border:1px solid var(--line);border-radius:999px;
  padding:6px 12px 6px 6px;font-size:12px;color:var(--dim);font-variant-numeric:tabular-nums}
#watermark img{width:24px;height:24px;border-radius:50%;object-fit:cover}
#watermark.behind{border-color:rgba(255,180,80,.6);color:#ffcf8a}

/* ---------- metrics (honest, query-linked) ---------- */
#metrics{position:fixed;top:64px;right:14px;z-index:30;display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.metric{background:var(--panel);border:1px solid var(--line);border-radius:10px;
  padding:8px 12px;min-width:86px;text-align:center;cursor:help}
.m-value{display:block;font-size:20px;font-weight:800;color:#fff;font-variant-numeric:tabular-nums}
.m-label{display:block;font-size:10px;letter-spacing:.08em;color:var(--dim);text-transform:uppercase}

/* ---------- island signs ---------- */
#island-signs{position:absolute;inset:0}
.island-sign{position:absolute;left:0;top:0;text-align:center;cursor:pointer;will-change:transform}
.island-name{font-weight:800;font-size:clamp(15px,1.7vw,26px);letter-spacing:.14em;color:#fff;
  text-shadow:0 0 14px var(--glow),0 2px 6px rgba(0,0,0,.7)}
.island-verbs{font-size:clamp(9px,.85vw,13px);letter-spacing:.22em;color:var(--glow);
  text-shadow:0 0 10px var(--glow);margin-top:2px}
.hub-sign .island-name{color:var(--gold);text-shadow:0 0 16px var(--gold),0 2px 6px rgba(0,0,0,.7)}

/* ---------- agents ---------- */
.agent{position:absolute;width:74px;height:74px;transform:translate(-50%,-62%);cursor:pointer;will-change:left,top}
.agent video,.agent .kc-avatar{width:64px;height:64px;border-radius:50%;object-fit:cover;display:block;
  margin:0 auto;border:2px solid rgba(140,200,255,.7);box-shadow:0 0 16px rgba(120,180,255,.45)}
.agent .ring{position:absolute;left:50%;top:32px;width:74px;height:74px;transform:translate(-50%,-50%);
  border-radius:50%;border:1px dashed rgba(140,200,255,.35);pointer-events:none}
.agent .nameplate{margin-top:4px;text-align:center;font-size:11px;font-weight:700;letter-spacing:.06em;
  color:#fff;text-shadow:0 1px 4px #000;background:rgba(4,8,16,.55);border-radius:6px;padding:2px 6px;
  display:inline-block;position:relative;left:50%;transform:translateX(-50%);white-space:nowrap}
.agent .crown{position:absolute;left:50%;top:-16px;transform:translateX(-50%);width:34px;height:24px;
  background:linear-gradient(180deg,#ffe9a8,#f5b301 60%,#9a6b00);
  clip-path:polygon(0 100%,0 35%,18% 62%,32% 12%,50% 55%,68% 12%,82% 62%,100% 35%,100% 100%);
  filter:drop-shadow(0 0 8px rgba(255,215,94,.9))}
.expr-celebrating video{animation:celebrate 1.2s ease-in-out infinite}
.expr-working{filter:saturate(1.15)}
.expr-alert video{box-shadow:0 0 18px rgba(255,120,120,.8)}
@keyframes celebrate{0%,100%{transform:scale(1)}50%{transform:scale(1.12) rotate(-2deg)}}

/* ---------- panels ---------- */
.panel{position:fixed;z-index:40;background:var(--panel);border:1px solid var(--line);
  border-radius:14px;padding:14px 16px;backdrop-filter:blur(6px);max-width:320px}
.panel h3{margin:0 0 8px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
#rules-panel{left:14px;bottom:14px}
#owner-toggle{position:fixed;right:14px;top:14px;z-index:45;background:rgba(20,32,56,.9);color:var(--ink);
  border:1px solid var(--line);border-radius:999px;padding:8px 16px;cursor:pointer;font-size:13px}
#owner-panel{right:14px;top:56px;display:none;max-height:70vh;overflow:auto}
#owner-panel.open{display:block}
.owner-row{display:flex;align-items:center;gap:8px;margin:6px 0}
.owner-row input[type=range]{flex:1}
.owner-row button,.owner-row select{background:#0d1830;color:var(--ink);border:1px solid var(--line);
  border-radius:8px;padding:6px 10px;font-size:12px}
#tod-label{font-variant-numeric:tabular-nums;color:var(--gold);min-width:52px;text-align:right}
#ledger-list,#feed-list{display:flex;flex-direction:column;gap:8px;max-height:260px;overflow:auto}
.ledger-entry,.feed-entry{background:rgba(10,20,40,.6);border:1px solid var(--line);border-radius:8px;
  padding:6px 9px;font-size:12px}
.f-seq{color:var(--gold);font-variant-numeric:tabular-nums}
.actor{color:#8fd0ff;font-weight:700}
.ts{color:var(--dim);font-size:10px;margin-top:2px}
.mquery{display:flex;gap:8px;font-size:11px;margin:4px 0}
.mquery .k{color:var(--gold);font-family:monospace;white-space:nowrap}
.mquery .q{color:var(--dim);font-family:monospace}

/* ---------- feed ---------- */
#feed-panel{position:fixed;left:14px;bottom:14px;z-index:35;width:300px;background:var(--panel);
  border:1px solid var(--line);border-radius:14px;backdrop-filter:blur(6px)}
#feed-header{display:flex;align-items:center;justify-content:space-between;padding:10px 14px}
#feed-header h3{margin:0;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
#feed-toggle{background:#0d1830;color:var(--ink);border:1px solid var(--line);border-radius:8px;
  width:26px;height:26px;cursor:pointer}
#feed-panel #feed-list{padding:0 14px 14px}
#feed-panel.collapsed #feed-list{display:none}
#rules-panel{bottom:auto;top:170px}
.incoming{color:var(--dim);font-size:12px;font-style:italic}

/* ---------- nav ---------- */
#nav-controls{position:fixed;right:14px;bottom:64px;z-index:35;display:flex;flex-direction:column;gap:8px}
#nav-controls button{width:40px;height:40px;border-radius:50%;background:var(--panel);
  border:1px solid var(--line);color:var(--ink);font-size:18px;cursor:pointer}

/* ---------- interior overlay / status card ---------- */
#interior-overlay{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;
  background:rgba(2,6,14,.55);backdrop-filter:blur(3px)}
#interior-overlay.hidden{display:none}
.interior-card{position:relative;max-width:560px;width:92vw;max-height:86vh;overflow:auto;
  background:linear-gradient(180deg,rgba(10,20,40,.96),rgba(6,12,26,.96));
  border:1px solid var(--glow);border-radius:18px;padding:26px 28px;box-shadow:0 0 60px rgba(120,180,255,.25)}
.interior-close{position:absolute;top:12px;right:12px;background:none;border:none;color:var(--dim);
  font-size:18px;cursor:pointer}
.interior-logo{width:44px;height:44px;border-radius:50%;object-fit:cover}
.interior-kicker{font-size:10px;letter-spacing:.24em;color:var(--dim);margin:10px 0 4px}
.interior-card h2{margin:0 0 6px;font-size:30px;letter-spacing:.1em;text-shadow:0 0 18px var(--glow)}
.interior-verbs{letter-spacing:.2em;font-size:12px;color:var(--glow);margin-bottom:12px}
.interior-theme{color:var(--dim);font-size:14px;line-height:1.5}
.interior-stations{display:flex;flex-direction:column;gap:6px;margin:12px 0}
.station{display:flex;align-items:center;gap:8px;font-size:13px}
.station-dot{width:8px;height:8px;border-radius:50%;background:var(--glow);box-shadow:0 0 8px var(--glow)}
.interior-bridges{margin-top:10px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.interior-bridges .k{font-size:10px;letter-spacing:.2em;color:var(--dim)}
.bridge-link{background:#0d1830;border:1px solid var(--line);color:var(--ink);border-radius:999px;
  padding:6px 12px;font-size:12px;cursor:pointer}
.interior-residents{display:flex;gap:10px;flex-wrap:wrap;margin:12px 0}
.interior-residents.none{color:var(--dim);font-style:italic;font-size:13px}
.resident{display:flex;align-items:center;gap:10px;background:#0d1830;border:1px solid var(--line);
  border-radius:12px;padding:8px 12px 8px 8px;cursor:pointer;color:var(--ink)}
.resident video{width:44px;height:44px;border-radius:50%;object-fit:cover}
.resident span{text-align:left}
.resident b{display:block;font-size:13px}
.resident i{display:block;font-style:normal;font-size:11px;color:var(--dim)}

#status-card{position:fixed;z-index:50;width:320px;background:var(--panel);border:1px solid var(--line);
  border-radius:14px;padding:16px 18px;display:none;backdrop-filter:blur(8px);
  box-shadow:0 8px 40px rgba(0,0,0,.5)}
#status-card.open{display:block}
#status-card .close{position:absolute;top:10px;right:12px;cursor:pointer;color:var(--dim)}
#status-card h2{margin:0 0 4px;font-size:20px}
#status-card .dept{font-size:12px;color:var(--dim);margin-bottom:10px}
.expr-tag{color:var(--gold);text-transform:uppercase;font-size:11px;letter-spacing:.1em}
#status-card .row{margin:8px 0;font-size:13px}
#status-card .row .k{display:block;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim)}
#status-card .win{margin-top:6px;font-size:12px}

/* ---------- loading ---------- */
#loading{position:fixed;inset:0;z-index:100;background:#04070f;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:16px}
#loading.hidden{display:none}
#loading img{width:88px;height:88px;border-radius:50%;object-fit:cover}
#loading .spin{width:34px;height:34px;border-radius:50%;border:3px solid rgba(140,200,255,.25);
  border-top-color:#8fc3ff;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

@media (max-width:760px){
  #rules-panel{display:none}
  #feed-panel{width:240px}
  #metrics{top:110px}
}