:root{
  --bg:#0a0e12; --panel:#121820ee; --panel2:#0d1218; --line:#233040;
  --ink:#e7f0f5; --dim:#8fa3b0; --acc:#ffd23f; --acc2:#4fd1c5; --danger:#ff5d6c;
  --good:#5ad17a; --warn:#ffb454; --font:"Segoe UI",system-ui,sans-serif;
  --mono:ui-monospace,"Cascadia Mono",Consolas,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--bg); color:var(--ink); font-family:var(--font);
  overflow:hidden; -webkit-user-select:none; user-select:none;
  image-rendering:pixelated;
}
.hidden{display:none !important}

/* ============ BOOT ============ */
.boot{position:fixed; inset:0; z-index:100; display:block; overflow-y:auto; overflow-x:hidden;
  background:radial-gradient(120% 120% at 50% 26%, #10202a 0%, #06090c 72%);}
.boot-hero{min-height:100vh; min-height:100dvh; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center; padding:40px 24px 64px;
  position:relative; animation:fadeIn .8s ease}
/* animated pixel mascot */
.boot-mascot, .welcome-mascot{width:86px; height:78px; margin-bottom:14px;
  background-repeat:no-repeat; background-position:center; background-size:contain;
  image-rendering:pixelated; animation:mascotBob 2.4s ease-in-out infinite;
  filter:drop-shadow(0 8px 14px rgba(0,0,0,.5));
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22' shape-rendering='crispEdges'%3E%3Crect x='6' y='2' width='12' height='2' fill='%234fd1c5'/%3E%3Crect x='4' y='4' width='16' height='2' fill='%234fd1c5'/%3E%3Crect x='3' y='6' width='18' height='9' fill='%234fd1c5'/%3E%3Crect x='4' y='15' width='16' height='2' fill='%2343b8ad'/%3E%3Crect x='6' y='17' width='4' height='3' fill='%2343b8ad'/%3E%3Crect x='14' y='17' width='4' height='3' fill='%2343b8ad'/%3E%3Crect x='7' y='7' width='3' height='4' fill='%23081018'/%3E%3Crect x='14' y='7' width='3' height='4' fill='%23081018'/%3E%3Crect x='8' y='8' width='1' height='1' fill='%23ffd23f'/%3E%3Crect x='15' y='8' width='1' height='1' fill='%23ffd23f'/%3E%3C/svg%3E")}
.welcome-mascot{width:64px; height:58px; margin:0 auto 6px}
.boot-mascot::after{content:""; position:absolute}
.boot-title{font-size:66px; font-weight:900; letter-spacing:.04em; line-height:.92;
  text-shadow:0 0 34px #4fd1c555, 0 0 6px #4fd1c533; display:flex; flex-direction:column}
.boot-title span{color:var(--acc); font-size:.62em; letter-spacing:.32em; margin-top:2px}
.boot-tag{color:#cde0e6; margin-top:18px; font-style:italic; font-size:16px; max-width:30ch}
.boot-engine{display:inline-block; margin-top:14px; padding:4px 12px; border:1px solid #2b5c59;
  border-radius:999px; color:#9ff4e8; background:#071514aa; font-size:11px; font-weight:700;
  letter-spacing:.1em}
.boot-wink{color:var(--acc2); font-weight:700; letter-spacing:.05em}
.boot-scrollhint{margin-top:34px; color:#5f7480; font-size:12px; letter-spacing:.16em;
  text-transform:uppercase; cursor:pointer; animation:hintPulse 2s ease-in-out infinite}
.boot-scrollhint span{display:block; margin-top:2px; font-size:16px; color:var(--acc)}
.boot-project{margin:0 auto; width:min(720px,94%); text-align:left; background:#05080bcc;
  border:1px solid #263747; border-radius:14px; padding:20px 22px 26px; margin-bottom:48px}
@keyframes mascotBob{0%,100%{transform:translateY(0) scaleY(1)}50%{transform:translateY(-7px) scaleY(1.04)}}
@keyframes hintPulse{0%,100%{opacity:.5}50%{opacity:1}}
.boot-project-kicker{font-size:10px; color:var(--acc); font-weight:900; letter-spacing:.18em; margin-bottom:5px}
.boot-project p{font-size:13px; color:#d6e4ea; line-height:1.45}
.boot-project-list{display:grid; gap:4px; margin-top:8px}
.boot-project-list span{font-size:11px; color:#8fa3b0; padding-left:12px; position:relative; line-height:1.35}
/* THIS PROJECT - expandable full inventory */
.bp-toggle{width:100%; margin-top:10px; display:flex; align-items:center; justify-content:space-between;
  gap:8px; font-size:12px; font-weight:700; color:var(--acc2); border-color:#1e3a38}
.bp-toggle:hover{border-color:var(--acc2)}
.bp-count{margin-left:auto; font-size:10px; color:var(--dim); font-weight:600;
  background:#0a1017; border:1px solid var(--line); border-radius:20px; padding:2px 8px}
.bp-arrow{color:var(--acc)}
.boot-project-full{margin-top:10px; max-height:46vh; overflow-y:auto; padding-right:6px;
  display:flex; flex-direction:column; gap:12px; animation:fadeIn .25s ease}
.bp-cat h4{font-size:13px; color:var(--acc); letter-spacing:.06em; text-transform:uppercase;
  margin-bottom:6px; border-bottom:1px solid var(--line); padding-bottom:4px}
.bp-item{font-size:13.5px; color:#b4c4cf; line-height:1.55; padding:3px 0 3px 14px; position:relative}
.bp-toggle{font-size:13.5px}
.boot-project p{font-size:14px}
.bp-item::before{content:""; position:absolute; left:0; top:.6em; width:4px; height:4px;
  border-radius:50%; background:var(--acc2)}
.project-modal{width:min(620px,94vw); max-height:88vh; overflow-y:auto}
.project-modal p b, .project-modal p em{color:#e7f0f5}
.project-connections{font-size:12px; color:#8fa3b0; line-height:1.5; background:#0a1017;
  border:1px solid var(--line); border-left:3px solid var(--acc2); border-radius:8px;
  padding:10px 12px; margin-bottom:14px}
.project-connections b{color:var(--acc2)}

.boot-project-list span::before{content:""; position:absolute; left:0; top:.55em; width:4px; height:4px;
  background:var(--acc2); border-radius:50%}
.boot-log{font-family:var(--mono); font-size:12px; color:var(--good); text-align:left;
  height:164px; overflow:hidden; margin:22px auto; width:min(520px,90%);
  background:#05080b88; border:1px solid var(--line); border-radius:8px; padding:12px}
.boot-log div{opacity:.9; white-space:pre}
.boot-actions{display:flex; gap:16px; align-items:center; justify-content:center; flex-wrap:wrap}
.boot-check{color:var(--dim); font-size:13px; display:flex; gap:6px; align-items:center; cursor:pointer}
.boot-warn{color:#5b6b76; font-size:11px; margin-top:20px; line-height:1.5}

/* ============ BUTTONS ============ */
.btn{background:#1a2530; color:var(--ink); border:1px solid var(--line);
  padding:9px 16px; border-radius:8px; cursor:pointer; font-size:14px; font-weight:600;
  transition:.12s}
.btn:hover{background:#22303d; border-color:#38506a}
.btn:active{transform:translateY(1px)}
.btn-primary{background:linear-gradient(180deg,#ffd23f,#f0a800); color:#241a00; border:none;
  font-size:16px; padding:12px 26px; box-shadow:0 6px 24px #ffd23f33}
.btn.ic{padding:8px 10px; min-width:40px}
.btn.wide{width:100%; margin:4px 0; text-align:left}
.btn.danger,.btn.wide.danger{color:var(--danger); border-color:#5a2a30}
.btn.danger:hover{background:#2a1418}
.btn-deep{background:linear-gradient(180deg,#7b5cff,#5b3fd6); border:none; color:#fff}

/* ============ HUD ============ */
.app{position:fixed; inset:0}
.hud{position:absolute; top:0; left:0; right:0; height:52px; z-index:20;
  display:flex; align-items:center; gap:14px; padding:0 12px;
  background:linear-gradient(180deg,#0b1116f0,#0b111600); pointer-events:none}
.hud>*{pointer-events:auto}
.hud-brand{font-weight:900; letter-spacing:.03em}
.hud-brand span{color:var(--acc); margin-left:.28em; letter-spacing:.12em}

/* LIVE audience chip */
.live-chip{display:inline-flex; align-items:center; gap:5px; margin-left:12px; cursor:pointer;
  background:#1a0d10; border:1px solid #4a2028; color:#ff6b7a; border-radius:999px;
  padding:3px 10px; font-size:11px; font-weight:800; letter-spacing:.08em; vertical-align:middle}
.live-chip:hover{border-color:#ff6b7a; box-shadow:0 0 8px #ff6b7a44}
.live-chip b{color:#ffd7db; font-size:12px}
.live-dot{width:7px; height:7px; border-radius:50%; background:#ff3b52; box-shadow:0 0 6px #ff3b52;
  animation:livePulse 1.6s ease-in-out infinite}
.live-cam{width:13px; height:13px; color:#5ad17a; margin-left:2px}
.live-cam-n{color:#5ad17a !important; font-size:11px !important}
@keyframes livePulse{0%,100%{opacity:1}50%{opacity:.35}}

/* WHO IS WATCHING panel */
.watch-layer{position:fixed; inset:0; z-index:70; background:#000a; display:grid; place-items:center;
  animation:fadeIn .2s ease}
.watch-layer.hidden{display:none}
.watch-panel{position:relative; width:min(460px,92vw); background:linear-gradient(180deg,#141b24f8,#080d12f8);
  border:1px solid var(--line); border-radius:16px; padding:22px 22px 18px; text-align:center;
  box-shadow:0 24px 60px #000a}
.watch-close{position:absolute; top:10px; right:12px; background:none; border:none; color:var(--dim);
  font-size:18px; cursor:pointer}
.watch-kicker{font-size:10px; color:#ff6b7a; letter-spacing:.22em; font-weight:900}
.watch-big{font-size:52px; font-weight:900; line-height:1; margin:6px 0 2px; color:#fff}
.watch-big span{font-size:15px; font-weight:600; color:var(--dim); letter-spacing:.02em}
.watch-sub{font-size:13px; color:#b4c4cf; line-height:1.5; margin:6px auto 14px; max-width:36ch}
.watch-sub b{color:#5ad17a}
.watch-grid{display:flex; flex-wrap:wrap; gap:5px; justify-content:center; max-height:150px; overflow-y:auto;
  padding:6px; background:#05080b88; border:1px solid var(--line); border-radius:10px}
.watch-dot{width:9px; height:9px; border-radius:50%; background:#3a4d5a}
.watch-dot.cam{background:#5ad17a; box-shadow:0 0 6px #5ad17a}
.watch-more{font-size:11px; color:var(--dim); margin-top:8px}
.watch-foot{font-size:11.5px; color:#7f93a0; line-height:1.5; margin-top:14px}
.watch-foot b{color:#cfe0e8}
.watch-peak{display:block; margin-top:4px; color:var(--acc2); font-weight:700}
.hud-brand em{color:var(--dim); font-size:11px; font-style:normal; font-weight:600}
.hud-stats{display:flex; gap:14px; margin-left:6px}
.stat{display:flex; align-items:center; gap:5px; font-size:13px; color:var(--dim)}
.stat b{color:var(--ink); font-variant-numeric:tabular-nums}
.stat .ico{opacity:.8}
.hud-controls{margin-left:auto; display:flex; gap:6px; flex:0 0 auto; flex-wrap:nowrap}
/* twardo: HUD nie zawija, statystyki się kurczą, przyciski trzymają rozmiar */
.hud{flex-wrap:nowrap; overflow:hidden}
.hud-brand{flex:0 0 auto; white-space:nowrap}
.hud-stats{flex:1 1 auto; min-width:0; overflow:hidden; flex-wrap:nowrap}
.hud-controls .btn.ic{flex:0 0 auto; width:40px; height:36px; padding:0; display:flex;
  align-items:center; justify-content:center; font-size:15px; line-height:1}
#btnSpeed{width:auto; min-width:40px; padding:0 8px}
/* panel: zakładki nie rozpychają, zawijają schludnie */
.wp-tabs{flex-wrap:wrap}
.wp-tab{flex:0 0 auto; white-space:nowrap}

/* ============ CANVAS ============ */
#world{position:absolute; inset:0; width:100%; height:100%; display:block;
  cursor:grab; touch-action:none; background:#0a1a12}
#world.drag{cursor:grabbing}

/* ============ TICKER ============ */
.ticker{position:absolute; bottom:0; left:0; right:0; height:30px; z-index:15;
  background:#08111aee; border-top:1px solid var(--line); overflow:hidden;
  display:flex; align-items:center}
.ticker::before{content:"LIVE"; color:var(--danger); font-size:11px; font-weight:800;
  padding:0 12px; letter-spacing:.05em; white-space:nowrap; border-right:1px solid var(--line);
  height:100%; display:flex; align-items:center; background:#0a0e12;
  position:relative; z-index:3; flex:0 0 auto}
/* obszar przewijania - oddzielny, przycięty, NIE wchodzi pod badge */
.ticker-clip{position:relative; flex:1 1 auto; height:100%; overflow:hidden}
.ticker-text{position:absolute; top:0; height:100%; line-height:30px;
  white-space:nowrap; color:var(--ink); font-size:13px; will-change:transform; z-index:1}
.ticker-text b{color:var(--acc)}

/* ============ INSPECTOR / CHAT ============ */
.inspector{position:absolute; top:60px; right:12px; bottom:40px; width:340px; z-index:25;
  background:var(--panel); border:1px solid var(--line); border-radius:12px;
  display:flex; flex-direction:column; backdrop-filter:blur(8px);
  box-shadow:0 20px 60px #000a; animation:slideIn .18s ease}
.insp-close{position:absolute; top:8px; right:8px; background:none; border:none; color:var(--dim);
  font-size:16px; cursor:pointer; z-index:2}
.insp-close:hover{color:var(--ink)}
.insp-head{display:flex; gap:12px; padding:14px 44px 14px 14px; border-bottom:1px solid var(--line)}
/* the portrait wears an era-tinted ring (border color set from JS per the world's current age) */
.insp-portrait{width:72px; height:72px; border-radius:50%; background:#0a1017;
  border:2px solid var(--line); image-rendering:pixelated; flex:0 0 auto;
  box-shadow:0 0 0 3px #0a101788, 0 0 14px #0006; transition:border-color .4s, box-shadow .4s}
.insp-id{min-width:0}
/* the NAME is the being's face - make it unmissable */
.insp-name{font-size:21px; font-weight:900; letter-spacing:.01em; line-height:1.1;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.insp-meta{font-size:11px; color:var(--dim); margin-top:3px}
.insp-mood{font-size:12.5px; margin-top:6px; color:var(--acc2); font-style:italic}
/* bond with the watcher - the pink thread chat.js has been growing all along, finally visible */
.insp-bond{margin-top:7px; font-size:10px; color:#ff8ab0; letter-spacing:.05em}
.insp-bond .bar{height:5px; background:#0a1017; border-radius:4px; overflow:hidden; margin-top:2px}
.insp-bond .fill{height:100%; background:linear-gradient(90deg,#a04a68,#ff8ab0); border-radius:4px; transition:width .4s}
/* VITALS DEMOTED: the body report lives under the tabs now, quiet and compact - the mind leads */
.insp-needs{padding:8px 14px 4px; display:grid; grid-template-columns:1fr 1fr; gap:3px 12px;
  border-top:1px dashed var(--line); opacity:.88}
.insp-needs::before{content:"body & needs"; grid-column:1/-1; font-size:9px; color:#5f7480;
  text-transform:uppercase; letter-spacing:.14em}
.need{font-size:10px; color:var(--dim)}
.need .bar{height:6px; background:#0a1017; border-radius:4px; overflow:hidden; margin-top:2px}
.need .fill{height:100%; border-radius:4px; transition:width .3s}
.insp-traits{padding:8px 14px 10px; display:flex; flex-wrap:wrap; gap:5px;
  border-top:1px dashed var(--line)}
.tag{font-size:11px; background:#16212c; border:1px solid var(--line); color:var(--dim);
  padding:2px 8px; border-radius:20px}
.tag.g{color:var(--good); border-color:#254a30}
.tag.b{color:var(--danger); border-color:#4a2530}

.chat{flex:1; display:flex; flex-direction:column; min-height:0; border-top:1px solid var(--line)}
.chat-log{flex:1; overflow-y:auto; padding:12px; display:flex; flex-direction:column; gap:8px}
.msg{max-width:85%; padding:7px 11px; border-radius:12px; font-size:13px; line-height:1.4;
  animation:pop .15s ease}
.msg.them{background:#16212c; align-self:flex-start; border-bottom-left-radius:3px}
.msg.me{background:#2a3a2a; align-self:flex-end; border-bottom-right-radius:3px; color:#e8ffe8}
.msg.sys{align-self:center; background:none; color:var(--dim); font-size:11px; font-style:italic}
.msg.ai{border:1px solid #5b3fd6; background:#1a1530}
.chat-input{display:flex; gap:6px; padding:10px; border-top:1px solid var(--line)}
.chat-input input{flex:1; background:#0a1017; border:1px solid var(--line); color:var(--ink);
  border-radius:8px; padding:8px 10px; font-size:13px; font-family:var(--font)}
.chat-input input:focus{outline:none; border-color:var(--acc2)}

/* ============ MENU ============ */
.menu{position:absolute; inset:0; z-index:40; background:#0009; display:grid; place-items:center}
.menu-panel{background:var(--panel); border:1px solid var(--line); border-radius:14px;
  padding:20px; width:min(360px,92%); max-height:86vh; overflow:auto}
.menu-panel h3{font-size:13px; color:var(--dim); text-transform:uppercase; letter-spacing:.1em;
  margin:14px 0 8px}
.menu-panel h3:first-child{margin-top:0}
.opt-range{-webkit-appearance:none; appearance:none; width:120px; height:4px; border-radius:3px;
  background:#22323f; outline:none}
.opt-range::-webkit-slider-thumb{-webkit-appearance:none; width:14px; height:14px; border-radius:50%;
  background:var(--acc); border:2px solid #08131a; cursor:pointer; box-shadow:0 0 6px var(--acc)}
.opt-range::-moz-range-thumb{width:12px; height:12px; border-radius:50%; background:var(--acc);
  border:none; cursor:pointer}
.row{display:flex; justify-content:space-between; align-items:center; padding:8px 2px;
  font-size:14px; color:var(--dim)}
.menu-note{font-size:11px; color:#5b6b76; text-align:center; margin:12px 0}

/* ============ FX ============ */
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes slideIn{from{opacity:0; transform:translateX(20px)}to{opacity:1;transform:none}}
@keyframes pop{from{opacity:0; transform:scale(.9)}to{opacity:1;transform:none}}

/* scrollbars */
::-webkit-scrollbar{width:8px}
::-webkit-scrollbar-thumb{background:#243240; border-radius:8px}

/* ============ RESBAR ============ */
.resbar{position:absolute; top:52px; left:0; right:0; height:26px; z-index:18;
  display:flex; gap:10px; align-items:center; padding:0 12px; pointer-events:none;
  background:linear-gradient(180deg,#0b1116c0,transparent); font-size:12px; overflow-x:auto}
.res{color:var(--dim); display:flex; align-items:center; gap:3px; white-space:nowrap}
.res b{color:var(--ink); font-variant-numeric:tabular-nums}
.res.build{color:var(--acc); font-weight:700}

/* ============ INSPECTOR EXTRAS ============ */
/* the thought is the being's face: give it room to finish a sentence (was clamped to 2 lines) */
.insp-thought{padding:8px 14px; font-style:italic; color:#bfe6dd; font-size:13px;
  min-height:40px; line-height:18px;
  display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden}
/* the memory they carry - one warm line under the thought */
.insp-memline{padding:2px 14px 8px; font-size:11.5px; color:#e0c98f; line-height:1.45}
.insp-memline::before{content:"still carries: "; color:#8a7b55; font-style:normal;
  text-transform:uppercase; font-size:9px; letter-spacing:.12em}
.insp-tabs{display:flex; gap:4px; padding:8px 12px 0}
.itab{flex:1; background:#0f1620; border:1px solid var(--line); color:var(--dim);
  padding:5px; border-radius:6px 6px 0 0; font-size:12px; cursor:pointer; transition:.12s}
.itab:hover{color:var(--ink); border-color:#38506a}
.itab.active{background:#16212c; color:var(--acc2); border-bottom-color:transparent;
  box-shadow:inset 0 2px 0 var(--acc2)}
.insp-details{padding:10px 14px; max-height:210px; overflow-y:auto; font-size:12px;
  border-bottom:1px solid var(--line)}
.mb-grid{display:grid; gap:5px}
.mb{display:grid; grid-template-columns:78px 1fr 26px; gap:6px; align-items:center; font-size:11px; color:var(--dim)}
.mb .mbar{height:6px; background:#0a1017; border-radius:4px; overflow:hidden}
.mb .mbar i{display:block; height:100%}
.mb b{color:var(--ink); text-align:right; font-variant-numeric:tabular-nums}
.insp-details h5{margin:10px 0 4px; color:var(--dim); font-size:11px; text-transform:uppercase; letter-spacing:.08em}
.emos{display:flex; flex-wrap:wrap; gap:5px}
.emo{background:#16212c; border:1px solid var(--line); border-radius:20px; padding:1px 8px; font-size:11px; color:#e7d5ff}
.story{line-height:1.6; color:#c3d0d8; white-space:normal}

/* ============ WORLD PANEL ============ */
.worldpanel{position:absolute; top:60px; left:12px; bottom:40px; width:340px; z-index:26;
  background:var(--panel); border:1px solid var(--line); border-radius:12px;
  display:flex; flex-direction:column; backdrop-filter:blur(8px); box-shadow:0 20px 60px #000a;
  animation:slideIn .18s ease}
.wp-head{display:flex; align-items:flex-start; border-bottom:1px solid var(--line); padding:6px}
/* tabs live in four labeled families (People / Mind / Chronicle / World) - findable, not a wall */
.wp-tabs{display:flex; gap:2px 10px; flex:1; flex-wrap:wrap}
.wp-group{display:flex; align-items:center; gap:2px; flex-wrap:wrap; padding:1px 4px 2px;
  border-left:2px solid #1c2937; margin:2px 0}
.wp-group-lbl{font-size:8px; color:#54697a; text-transform:uppercase; letter-spacing:.16em;
  font-weight:800; padding:0 4px 0 2px; align-self:center}
.wp-tab{background:none; border:none; color:var(--dim); padding:6px 8px; font-size:12px;
  border-radius:6px; cursor:pointer; transition:.12s}
.wp-tab:hover{color:var(--ink); background:#121b26}
.wp-tab.active{background:#16212c; color:var(--acc)}
.wp-close,.insp-close{background:none;border:none;color:var(--dim);font-size:18px;cursor:pointer}
/* comfortable close targets (>=40px) on every panel, consistent hover */
.wp-close,.insp-close,.watch-close,.admin-close{min-width:40px; min-height:40px;
  display:grid; place-items:center; border-radius:10px; line-height:1}
.wp-close:hover,.insp-close:hover,.watch-close:hover,.admin-close:hover{color:var(--ink); background:#16212c}
/* warm empty states: an empty tab should feel like patience, not breakage */
.wp-empty{color:#8fa3b0; font-size:12.5px; line-height:1.6; padding:14px 10px; text-align:center;
  font-style:italic; background:#0d141c66; border:1px dashed #223040; border-radius:10px; margin:8px 0}
.wp-body{flex:1; overflow-y:auto; padding:14px}
.wp-big{font-size:34px; font-weight:900; color:var(--ink); line-height:1}
.wp-big small{display:block; font-size:12px; color:var(--dim); font-weight:400}
.wp-stats3{display:flex; gap:8px; margin:12px 0}
.wp-stats3>div{flex:1; background:#0f1620; border:1px solid var(--line); border-radius:8px;
  padding:8px; text-align:center; font-size:18px; font-weight:700}
.wp-stats3 small{display:block; font-size:10px; color:var(--dim); font-weight:400}
.wp-body h4{margin:14px 0 6px; font-size:12px; color:var(--dim); text-transform:uppercase; letter-spacing:.08em}
.wp-row{display:grid; grid-template-columns:1fr 90px 46px; gap:8px; align-items:center; margin:5px 0; font-size:12px}
.wp-lbl{color:var(--dim)} .wp-val{text-align:right; color:var(--ink); font-size:11px}
.wp-bar{height:8px; background:#0a1017; border-radius:5px; overflow:hidden}
.wp-bar i{display:block; height:100%}
.wp-chips{display:flex; flex-wrap:wrap; gap:5px}
.wp-chip{background:#16212c; border:1px solid var(--line); border-radius:20px; padding:2px 9px; font-size:11px; color:var(--dim)}
.wp-note{color:#6b7b86; font-size:11px; margin-top:8px; line-height:1.5}
.wp-who{background:#0f1620; border:1px solid var(--line); border-radius:8px; padding:8px 10px; margin:6px 0; cursor:pointer}
.wp-who:hover{border-color:#38506a}
.wp-who-lbl{font-size:10px; color:var(--acc); text-transform:uppercase; letter-spacing:.06em}
.wp-who-name{font-weight:700; font-size:15px}
.wp-who-desc{font-size:11px; color:var(--dim)}
.wp-log{display:flex; flex-direction:column; gap:5px}
.wp-log-item{background:#0f1620; border-left:2px solid var(--acc); padding:5px 8px; font-size:12px; border-radius:4px}

/* ============ TONGUE (living language) ============ */
.tongue-eg{background:linear-gradient(90deg,rgba(124,240,224,.08),transparent); border-left:3px solid var(--acc2);
  border-radius:8px; padding:10px 12px; margin:8px 0 12px}
.tongue-eg b{display:block; font-size:18px; color:#e8f6f2; letter-spacing:.02em}
.tongue-eg span{display:block; font-size:12px; color:#9fb0b8; margin-top:2px; font-style:italic}

/* ============ THE GAZETTE ============ */
.gaz-masthead{text-align:center; border-bottom:3px double #c9bfa6; padding-bottom:8px; margin-bottom:10px}
.gaz-title{font-family:Georgia,"Times New Roman",serif; font-weight:900; letter-spacing:.04em; font-size:26px; color:#e8dfc8; text-shadow:0 1px 0 #000}
.gaz-sub{font-size:11px; color:#a99; text-transform:uppercase; letter-spacing:.14em; margin-top:3px}
.gaz-empty{color:var(--dim); font-size:13px; padding:16px; text-align:center}
.gaz-scroll{display:flex; flex-direction:column; gap:0}
.gaz-entry{border-bottom:1px solid #2a3441; padding:9px 4px}
.gaz-year{font-size:10px; color:var(--acc); text-transform:uppercase; letter-spacing:.1em}
.gaz-head{font-family:Georgia,serif; font-size:15px; font-weight:700; color:#e8dfc8; line-height:1.3; margin-top:2px}
.gaz-big .gaz-head{font-size:19px; color:#ffe9a8; text-shadow:0 0 12px rgba(255,200,90,.25)}
.gaz-big{background:linear-gradient(90deg,rgba(255,200,90,.06),transparent); border-left:3px solid #ffcf6a; padding-left:9px}

/* FEATS - achievement popups + panel */
.ach-layer{position:fixed; right:14px; bottom:54px; z-index:125; display:flex; flex-direction:column; gap:8px; pointer-events:none}
.ach-card{display:flex; gap:11px; align-items:center; width:min(330px,80vw); background:linear-gradient(180deg,#141b24f6,#0a0f14f6);
  border:1px solid #2a3a48; border-left:3px solid var(--acc); border-radius:12px; padding:11px 13px;
  transform:translateX(120%); opacity:0; transition:transform .5s cubic-bezier(.2,.9,.2,1), opacity .5s; box-shadow:0 12px 32px #0009}
.ach-card.ach-in{transform:translateX(0); opacity:1}
.ach-card.ach-out{transform:translateX(120%); opacity:0}
.ach-medal{flex:0 0 auto; width:34px; height:34px; border-radius:50%; display:grid; place-items:center; font-size:17px;
  color:#0a0f14; background:radial-gradient(circle at 40% 35%, #ffe9a8, #ffcf6a 60%, #d99a2a); box-shadow:0 0 12px #ffcf6a66}
.ach-kicker{font-size:9px; letter-spacing:.2em; color:var(--acc); font-weight:900}
.ach-title{font-size:14px; font-weight:800; color:#eef5f8; margin-top:1px}
.ach-txt{font-size:11.5px; color:#9fb0b8; line-height:1.4; margin-top:2px}
.ach-mind{border-left-color:#7cf0e0} .ach-tech{border-left-color:#ffd23f} .ach-faith{border-left-color:#c58aff}
.ach-age{border-left-color:#ff6b7a} .ach-work{border-left-color:#a9713e} .ach-life{border-left-color:#5ad17a}
.feat-head{font-size:12px; color:var(--acc2); font-weight:700; margin-bottom:8px}
.feat-grid{display:flex; flex-direction:column; gap:6px; margin-bottom:12px}
.feat{display:flex; gap:10px; align-items:flex-start; background:#0a1017; border:1px solid var(--line); border-radius:8px; padding:8px 10px}
.feat-locked{opacity:.5}
.feat-medal{flex:0 0 auto; width:22px; height:22px; border-radius:50%; display:grid; place-items:center; font-size:12px; color:#0a0f14; background:#3a4d5a}
.feat-got .feat-medal{background:radial-gradient(circle at 40% 35%, #ffe9a8, #ffcf6a 60%, #d99a2a)}
.feat-title{font-size:13px; font-weight:700; color:#e7f0f5}
.feat-txt{font-size:11px; color:#8fa3b0; line-height:1.4}
.feat-year{color:var(--acc2); font-weight:700}

/* ENGAGEMENT HINT bar */
.hint-bar{position:fixed; left:50%; bottom:44px; transform:translateX(-50%) translateY(20px); z-index:60; opacity:0;
  background:#0c1620ee; border:1px solid #2a3a48; border-radius:20px; padding:7px 14px; display:flex; gap:10px; align-items:center;
  font-size:12.5px; color:#cfe0e8; transition:opacity .4s, transform .4s; pointer-events:auto; max-width:90vw}
.hint-bar.hint-show{opacity:1; transform:translateX(-50%) translateY(0)}
.hint-bar b{color:var(--acc)}
.hint-x{cursor:pointer; color:var(--dim); font-size:14px; margin-left:2px}
.hint-x:hover{color:#fff}

/* KEEPER'S CONSOLE (admin) */
.admin-layer{position:fixed; inset:0; z-index:140; background:#000b; display:grid; place-items:center; animation:fadeIn .2s ease; overflow-y:auto}
.admin-layer.hidden{display:none}
.admin-box{position:relative; width:min(560px,94vw); max-height:92vh; overflow-y:auto; margin:16px;
  background:linear-gradient(180deg,#101822f8,#0a0f14f8); border:1px solid #2a3a48; border-radius:14px; padding:18px 20px;
  box-shadow:0 24px 60px #000a}
.admin-close{position:absolute; top:10px; right:12px; background:none; border:none; color:var(--dim); font-size:18px; cursor:pointer}
.admin-title{font-size:14px; font-weight:900; letter-spacing:.16em; color:#ff6b7a}
.admin-title span{color:var(--dim); font-weight:600; font-size:10px; letter-spacing:.1em; margin-left:6px}
.adm-stats{display:flex; flex-wrap:wrap; gap:6px; margin:10px 0 4px}
.adm-stats span{font-size:11px; color:#8fa3b0; background:#0a1017; border:1px solid var(--line); border-radius:6px; padding:3px 8px}
.adm-stats b{color:#e7f0f5}
.adm-sec{margin-top:14px; border-top:1px solid #1e2a36; padding-top:10px}
.adm-sec h4{font-size:12px; color:var(--acc2); text-transform:uppercase; letter-spacing:.1em; margin-bottom:6px}
.adm-note{font-size:11.5px; color:#7f93a0; line-height:1.5; margin-bottom:8px}
.adm-note b{color:#cfe0e8}
.adm-row{display:flex; align-items:center; justify-content:space-between; gap:10px; margin:6px 0; font-size:13px; color:#c4d2da}
.adm-btns{display:flex; flex-wrap:wrap; gap:6px; margin:8px 0}
.adm-chip{font-size:12px; color:#cfe0e8; background:#0e1620; border:1px solid #2a3a48; border-radius:20px; padding:5px 11px; cursor:pointer}
.adm-chip:hover{border-color:var(--acc2)}
.adm-chip.adm-danger{border-color:#5a2028; color:#ff8b98}
.adm-act.adm-free b{color:#5ad17a}
.adm-act.adm-paid b{color:#ffd23f}
.adm-act.adm-blocked b{color:#ff6b7a}
.adm-blocked{border-color:#5a2028 !important; color:#ff8b98 !important}
.adm-select{background:#0e1620; color:#cfe0e8; border:1px solid #2a3a48; border-radius:6px; padding:4px 8px; font-size:12px}

/* THE INTERFACE - a transmission from them to you */
.tx-layer{position:fixed; left:0; right:0; top:20%; z-index:130; pointer-events:none; display:flex;
  flex-direction:column; align-items:center; gap:10px}
.tx-box{position:relative; overflow:hidden; width:min(560px,92vw); background:rgba(4,10,8,0.94);
  border:1px solid #2effc0; border-radius:12px; padding:16px 22px;
  box-shadow:0 0 40px rgba(46,255,192,.25), inset 0 0 30px rgba(46,255,192,.06);
  animation:txIn .5s ease forwards; transform:translateY(-10px); opacity:0}
.tx-kicker{font-size:11px; color:#2effc0; letter-spacing:.2em; font-weight:800}
.tx-from{font-size:11px; color:#7fa99a; margin-top:2px; letter-spacing:.05em}
.tx-msg{font-family:var(--mono); font-size:16px; color:#d8fff0; line-height:1.5; margin-top:10px;
  min-height:1.5em; text-shadow:0 0 8px rgba(46,255,192,.4)}
.tx-scan{position:absolute; left:0; right:0; top:0; bottom:0; pointer-events:none;
  background:repeating-linear-gradient(rgba(46,255,192,.05) 0 2px, transparent 2px 4px)}
.tx-out{animation:txOut 1s ease forwards}
@keyframes txIn{from{opacity:0; transform:translateY(-10px)} to{opacity:1; transform:translateY(0)}}
@keyframes txOut{to{opacity:0; transform:translateY(-8px)}}

/* breaking-news headline sweep */
.headline-layer{position:fixed; left:0; right:0; top:16%; z-index:120; pointer-events:none; display:flex; flex-direction:column; align-items:center; gap:8px}
.headline-flash{background:linear-gradient(90deg,rgba(10,14,20,.0),rgba(10,14,20,.92) 12%,rgba(10,14,20,.92) 88%,rgba(10,14,20,.0));
  border-top:1px solid rgba(255,207,106,.4); border-bottom:1px solid rgba(255,207,106,.4);
  padding:10px 40px; text-align:center; max-width:92vw; transform:translateY(-8px); opacity:0;
  animation:hlIn .5s cubic-bezier(.2,.9,.2,1) forwards}
.hl-kicker{display:block; font-size:10px; letter-spacing:.24em; color:#ffcf6a; text-transform:uppercase}
.hl-text{display:block; font-family:Georgia,serif; font-weight:800; font-size:18px; color:#f2ecdc; margin-top:2px}
.headline-big .hl-text{font-size:24px; color:#ffe9a8; text-shadow:0 0 18px rgba(255,200,90,.4)}
.headline-big{border-color:rgba(255,207,106,.75)}
.hl-out{animation:hlOut .8s ease forwards}
@keyframes hlIn{from{opacity:0; transform:translateY(-14px)} to{opacity:1; transform:translateY(0)}}
@keyframes hlOut{to{opacity:0; transform:translateY(-10px)}}

/* ============ HELP PANEL ============ */
.helppanel{position:absolute; inset:0; z-index:45; background:#000a; display:grid; place-items:center}
.help-inner{background:var(--panel); border:1px solid var(--line); border-radius:16px;
  padding:24px; width:min(560px,94%); max-height:88vh; overflow:auto; position:relative}
.help-inner h3{font-size:22px; margin-bottom:4px}
.help-lead{color:var(--dim); font-size:13px; margin-bottom:16px; line-height:1.5}
.help-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px}
/* gift cards, not shop tiles: soft ring, glyph + name on one line, warm hover lift */
.help-card{background:#0f1620; border:1px solid var(--line); border-radius:12px; padding:13px 14px;
  cursor:pointer; text-align:left; transition:.14s; color:var(--ink); position:relative}
.help-card:hover{border-color:var(--acc); transform:translateY(-2px); box-shadow:0 10px 24px #0007}
.help-top{display:flex; align-items:center; gap:9px}
.help-ico{width:34px; height:34px; border-radius:50%; display:flex; align-items:center;
  justify-content:center; font-size:16px; font-weight:900; flex:0 0 auto}
.help-name{font-weight:700; margin-top:6px}
.help-top .help-name{margin-top:0}
.help-desc{font-size:11px; color:var(--dim); margin:6px 0 9px; line-height:1.45}
.help-price{display:inline-block; background:linear-gradient(180deg,#ffd23f,#f0a800);
  color:#241a00; font-weight:800; padding:2px 12px; border-radius:20px; font-size:12px}
.help-req{display:inline-block; margin-left:6px; font-size:10px; color:#8fa3b0;
  border:1px solid #2a3a48; border-radius:20px; padding:2px 8px; vertical-align:middle}
.help-foot{color:#6b7b86; font-size:11px; margin-top:16px; text-align:center; line-height:1.5}

/* ============ IN-GAME MODALS / TOASTS ============ */
.modal-layer{position:absolute; inset:0; z-index:80; display:grid; place-items:center; background:#0009;
  backdrop-filter:blur(4px)}
.mc-modal{width:min(420px,92vw); background:linear-gradient(180deg,#121b24f8,#080d12f8);
  border:1px solid #314557; border-radius:14px; padding:22px; box-shadow:0 24px 80px #000c;
  animation:pop .16s ease}
.mc-kicker{font-size:10px; color:var(--acc2); letter-spacing:.22em; font-weight:900; margin-bottom:8px}
.mc-modal h3{font-size:22px; margin-bottom:8px}
.mc-modal p{color:#aebbc4; font-size:13px; line-height:1.55; margin-bottom:14px}
.mc-input{width:100%; background:#070c11; border:1px solid var(--line); border-radius:8px;
  color:var(--ink); padding:10px 12px; font-size:15px; margin-bottom:14px}
.mc-input:focus{outline:none; border-color:var(--acc2)}
.mc-actions{display:flex; gap:8px; justify-content:flex-end}
.project-modal{width:min(620px,94vw)}
.project-list{display:grid; gap:6px; margin:12px 0 16px}
.project-list div{background:#0b1219; border:1px solid var(--line); border-radius:8px;
  padding:7px 9px; color:#b9c8d0; font-size:12px; line-height:1.4}
.checkout-status{border-left:3px solid var(--acc); padding-left:10px}
.choice-list{display:grid; gap:6px; max-height:260px; overflow:auto; margin:10px 0 14px}
.choice-row{display:flex; gap:9px; align-items:flex-start; background:#0b1219; border:1px solid var(--line);
  border-radius:8px; padding:8px; cursor:pointer}
.choice-row:hover{border-color:#38506a}
.choice-row span{display:grid; gap:2px}
.choice-row b{font-size:13px}
.choice-row small{font-size:11px; color:var(--dim)}
.toast-layer{position:absolute; right:14px; top:88px; z-index:90; display:flex; flex-direction:column; gap:8px;
  pointer-events:none; max-width:min(360px,80vw)}
.toast{background:#0d151dF2; border:1px solid #314557; border-left:3px solid var(--acc2);
  border-radius:9px; padding:9px 12px; color:var(--ink); font-size:13px; box-shadow:0 12px 40px #0008;
  animation:slideIn .16s ease}
.toast.good{border-left-color:var(--good)}
.toast.warn{border-left-color:var(--warn)}
.toast.out{opacity:0; transform:translateX(20px); transition:.35s}

/* ============ SVG ICONS (consistent on every browser) ============ */
.stat svg.ico{width:14px; height:14px; color:#8fa3b0; flex:0 0 auto}
.btn.ic svg{width:16px; height:16px; display:block; margin:auto; color:currentColor}
.res .dot{display:inline-block; width:9px; height:9px; border-radius:2px; margin-right:4px;
  vertical-align:middle; box-shadow:0 0 0 1px #0006 inset}

/* ============ WORLD END (epitaph) ============ */
.worldend{position:fixed; inset:0; z-index:200; display:grid; place-items:center;
  background:radial-gradient(120% 120% at 50% 30%, #1a1024 0%, #05060a 70%)}
.we-inner{max-width:640px; width:92%; max-height:90vh; overflow:auto; text-align:center;
  padding:28px; animation:fadeIn 1.2s ease}
.we-kicker{font-size:11px; letter-spacing:.35em; color:var(--acc2); font-weight:800}
.we-title{font-size:42px; font-weight:900; margin:10px 0 16px; text-shadow:0 0 40px #b06ab055}
.we-story{color:#c3d0d8; line-height:1.7; font-size:15px; margin-bottom:18px}
.we-columns{display:grid; grid-template-columns:1fr 1fr; gap:14px; text-align:left; margin-bottom:14px}
.we-columns h4{font-size:11px; text-transform:uppercase; letter-spacing:.1em; color:var(--dim); margin-bottom:6px}
.we-columns ul{list-style:none; font-size:13px; color:#aebbc4; line-height:1.6}
.we-columns li::before{content:"- "; color:var(--acc2)}
.we-last{text-align:left; font-size:12px; color:#8394a0; line-height:1.7; margin-bottom:18px;
  background:#0d121866; border:1px solid var(--line); border-radius:10px; padding:12px}
.we-last h4{font-size:11px; text-transform:uppercase; letter-spacing:.1em; color:var(--dim); margin-bottom:6px}
.we-count{color:#5b6b76; font-size:12px; margin-top:12px}
@media (max-width:560px){ .we-columns{grid-template-columns:1fr} .we-title{font-size:30px} }

/* ============ FAMILY ============ */
.kin{color:var(--acc2); cursor:pointer; border-bottom:1px dotted #2a5a55}
.kin:hover{color:#8ff0e5}
.kin.dead{color:#6b7b86; cursor:default; border-bottom:none; font-style:italic}

/* the Book + lexicon */
.book-list{display:flex; flex-direction:column; gap:3px}
.book-item{font-size:12px; color:#aebbc4; background:#0f1620; border-radius:4px; padding:4px 8px;
  border-left:2px solid #3a4656; font-style:italic}
.lex{display:flex; flex-direction:column; gap:4px}
.lex-item{font-size:13px; background:#0f1620; border-radius:5px; padding:5px 9px}
.lex-item b{color:var(--acc2)}
.lex-item small{display:block; color:#6b7b86; font-size:11px}

/* living minds */
.mind-list{display:flex; flex-direction:column; gap:5px}
.mind-item{font-size:13px; color:#dfe8ee; background:#0f1620; border-left:2px solid #4fd1c5;
  border-radius:5px; padding:6px 9px; line-height:1.35}
.mind-item b{color:#fff}
.mind-item small{display:block; color:#748592; font-size:11px; margin-top:2px}

/* age requirement checklist */
.wp-reqs{margin:8px 0; display:flex; flex-direction:column; gap:4px}
.wp-req{font-size:12px; color:#8fa3b0; background:#0f1620; border-left:2px solid #3a4656;
  padding:4px 8px; border-radius:4px}
.wp-req.ok{color:#5ad17a; border-left-color:#2a6a3a; text-decoration:none}

/* pogoda w pasku */
.res.wx{color:#bfe6dd; font-weight:600}
.wp-weather{color:#bfe6dd; font-size:13px; margin:6px 0 10px; padding:6px 10px;
  background:#0f1620; border:1px solid var(--line); border-radius:8px}

/* RODY */
.clan-card{background:#0f1620; border:1px solid var(--line); border-radius:8px; padding:8px 10px; margin:6px 0}
.clan-top{display:flex; justify-content:space-between; align-items:center; font-size:14px}
.clan-top span{color:var(--dim); font-size:11px}
.clan-sub{font-size:11px; color:var(--acc); margin:2px 0}
.clan-rel{font-size:11px; margin-top:4px; display:flex; flex-wrap:wrap; gap:6px}

/* KRONIKA / HISTORIA */
.hist-line{display:flex; flex-direction:column; gap:4px}
.hist-item{display:grid; grid-template-columns:44px 18px 1fr; gap:6px; align-items:start;
  font-size:12px; background:#0f1620; border-radius:5px; padding:4px 6px}
.hist-day{color:var(--dim); font-variant-numeric:tabular-nums}
.hist-ic{text-align:center}
.hist-dot{display:inline-block; width:8px; height:8px; border-radius:50%; margin-top:4px}
.hist-txt{color:var(--ink)}
.spark{margin:8px 0}
.spark-lbl{font-size:12px; color:var(--dim); margin-bottom:3px}
.spark-lbl b{color:var(--ink)}
.spark-bars{display:flex; align-items:flex-end; gap:1px; height:44px;
  background:#0a1017; border-radius:5px; padding:3px}
.spark-bars i{flex:1; min-width:1px; border-radius:1px 1px 0 0; display:block}
.recap-time{color:var(--acc); font-size:13px; margin-bottom:8px}
.recap-list{display:flex; flex-direction:column; gap:5px; font-size:13px}
.recap-list b{color:var(--acc2)}

@media (max-width:560px){
  .inspector{left:auto; right:12px; width:min(340px,92vw); top:56px}
  .worldpanel{width:min(340px,92vw)}
  .help-grid{grid-template-columns:1fr}
  .hud-brand em{display:none}
  .boot-title{font-size:44px}
}

/* Welcome modal (in-game expectations pitch) */
.welcome-modal{max-width:min(640px,94vw)}
.welcome-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:14px 0}
.welcome-card{background:#0a1017; border:1px solid var(--line); border-radius:10px; padding:11px 12px;
  font-size:12.5px; color:#aebbc4; line-height:1.5}
.welcome-card .wc-h{color:var(--acc2); font-weight:700; font-size:12px; margin-bottom:4px;
  text-transform:uppercase; letter-spacing:.05em}
.welcome-card b{color:#e7f0f5}
.welcome-foot{font-size:12.5px; color:#8fa3b0; line-height:1.55}
@media (max-width:560px){ .welcome-grid{grid-template-columns:1fr} }

/* ===================== MOBILE / PHONE ===================== */
.hud-burger{display:none}                       /* hidden on desktop; the button row shows inline */
@media (max-width:600px){
  .hud{overflow:visible; gap:8px; padding:0 8px}
  .hud-brand{font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:26vw}
  .hud-brand span{letter-spacing:.06em}
  /* stat chips: scroll the strip instead of clipping, so no stat is ever lost off-screen */
  .hud-stats{gap:9px; font-size:12px; overflow-x:auto; overflow-y:hidden; flex-wrap:nowrap;
    scrollbar-width:none; -webkit-overflow-scrolling:touch; scroll-snap-type:x proximity}
  .hud-stats::-webkit-scrollbar{display:none}
  .hud-stats .stat{flex:0 0 auto; scroll-snap-align:start}
  .live-chip{margin-left:6px; padding:2px 7px}
  /* the button cluster collapses behind a hamburger, opened as a tidy dropdown */
  .hud-burger{display:inline-flex}
  .hud-controls{ position:absolute; top:50px; right:6px; z-index:41;
    flex-direction:column; align-items:stretch; gap:6px;
    background:#0d1218f7; border:1px solid var(--line); border-radius:12px; padding:8px;
    box-shadow:0 12px 34px #000c; display:none; max-height:78vh; overflow:auto }
  .hud-controls.open{ display:flex }
  .hud-controls .btn.ic{ width:auto; min-width:42px; justify-content:center }
  /* panels become near-full-width sheets that never run off the screen */
  /* --sheet-bottom lets JS lift the inspector above the on-screen keyboard while chatting */
  #panel, #help, .worldpanel, .helppanel, .inspector{
    left:6px !important; right:6px !important; width:auto !important; max-width:none !important;
    top:82px !important; bottom:var(--sheet-bottom, 36px) !important; transform:none !important }
  #settingsPanel{ left:6px !important; right:6px !important; width:auto !important; max-width:none !important; top:60px !important }
  .resbar{ font-size:11px }
  .ach-layer{ right:6px; left:6px; align-items:stretch }
}

/* ===================== UI HARDENING (audit pass) =====================
   Panels must NEVER run off-screen or bury each other: every floating window is
   viewport-bounded with its own scroll, and layers are ordered so content panels
   sit above ambient chrome (feed/ticker) but below modals. */
.inspector, .worldpanel{ max-height:calc(100vh - 104px) }
.insp-details{ max-height:34vh }                    /* room for the Mind tab to actually read */
#eventFeed{ z-index:18 !important; max-width:min(270px,44vw) }   /* under panels (25/26), never over them */
#settingsPanel{ max-height:80vh; overflow-y:auto }
.help-grid{ max-height:56vh; overflow-y:auto }
.watch-panel{ max-height:86vh; overflow-y:auto }
@media (max-width:900px){
  /* mid-size screens: both side panels can't fit together - the newest opened wins the width */
  .inspector{ width:min(320px,46vw) }
  .worldpanel{ width:min(320px,46vw) }
}

/* CHAT MUST NEVER VANISH: the Mind-tab hardening let .insp-details grow until the flexbox squeezed
   the chat to zero height - "nie da się z nimi pisać". The conversation is the soul of the game:
   it gets a guaranteed floor, and the details pane yields instead. */
.inspector .chat{ min-height:216px; flex-shrink:0 }
.insp-details{ max-height:24vh }
#btnExportSoul{ margin:6px 10px !important; width:auto !important }

/* ===================== UI GRAND PASS (mind-first, honest, keyboard-kind) ===================== */

/* keyboard focus is visible everywhere, using the world's own teal */
.btn:focus-visible, .wp-tab:focus-visible, .itab:focus-visible, .help-card:focus-visible,
.wp-close:focus-visible, .insp-close:focus-visible, .live-chip:focus-visible,
input:focus-visible, .choice-row:focus-visible{
  outline:2px solid var(--acc2); outline-offset:2px; border-radius:8px }

/* the words they live by are share-able: allow selecting text inside content panes
   (the canvas + HUD chrome stay unselectable so panning never highlights the page) */
.insp-details, .insp-thought, .insp-memline, .wp-body, .chat-log, .story,
.gaz-entry, .mind-item, .lex-item, .we-inner{ -webkit-user-select:text; user-select:text }

/* PAUSED IS NOT CRASHED: the world visibly holds its breath, and says so */
body.world-paused #world{ filter:saturate(.55) brightness(.72); transition:filter .4s }
.pause-pill{ position:fixed; left:50%; top:46%; transform:translateX(-50%); z-index:55;
  background:#0c1620f0; border:1px solid #2a3a48; border-radius:999px; padding:10px 22px;
  color:#cfe0e8; font-size:14px; font-weight:600; letter-spacing:.02em; cursor:pointer;
  box-shadow:0 14px 40px #000b; display:none; pointer-events:auto; animation:fadeIn .3s ease }
.pause-pill b{ color:var(--acc) }
body.world-paused .pause-pill{ display:block }

/* DEPARTED: sealed souls read as kept things, not log rows */
.wp-soul{ background:#0f1620; border:1px solid var(--line); border-left:3px solid #9aa4b2;
  border-radius:8px; padding:8px 10px; margin:6px 0; cursor:pointer; transition:.12s }
.wp-soul:hover{ border-color:#38506a; border-left-color:#cfd6de }
.wp-soul-name{ font-weight:700; font-size:14px; color:#e7f0f5 }
.wp-soul-sub{ font-size:11px; color:var(--dim); margin-top:2px; font-style:italic }
.soul-pre{ font-family:var(--mono); font-size:11px; line-height:1.5; color:#c3d0d8;
  background:#070c11; border:1px solid var(--line); border-radius:8px; padding:10px 12px;
  max-height:46vh; overflow:auto; white-space:pre-wrap; text-align:left;
  -webkit-user-select:text; user-select:text }

/* settings panel: mind the small screens; the reset section only exists when it is allowed */
#settingsPanel button:focus-visible{ outline:2px solid var(--acc2); outline-offset:2px }

/* mobile: the memory line stays one quiet row; tab groups wrap without their side rule */
@media (max-width:600px){
  .insp-memline{ -webkit-line-clamp:2; display:-webkit-box; -webkit-box-orient:vertical; overflow:hidden }
  .wp-group{ border-left:none; padding-left:0 }
}