:root { color-scheme: dark; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #02030a; }
#world { display: block; width: 100%; height: 100%; touch-action: none; }
#hud { position: fixed; top: max(16px, env(safe-area-inset-top)); left: max(16px, env(safe-area-inset-left)); width: min(430px, calc(100vw - 32px)); padding: 14px 16px; border: 1px solid rgba(73,255,230,.4); border-radius: 12px; background: rgba(2,7,18,.78); backdrop-filter: blur(12px); box-shadow: 0 0 35px rgba(0,255,220,.12); pointer-events: none; z-index:8; }
h1 { margin: 0 0 7px; font-size: clamp(18px, 4vw, 27px); letter-spacing: -.05em; }
h1 span { color: #4fffe6; text-shadow: 0 0 13px #11e8cf; }
#status, #stats, #location, #renderer { margin: 3px 0; color: #b7c9dd; font-size: 12px; }
#location { color: #77ffe9; }
#eventLog { margin-top: 9px; max-height: 96px; overflow: hidden; color: #ff7bea; font-size: 11px; line-height: 1.45; }
.event { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#mission { position: fixed; top: max(18px, env(safe-area-inset-top)); right: max(18px, env(safe-area-inset-right)); width: min(300px, calc(100vw - 36px)); padding: 11px 13px; border: 1px solid rgba(255,65,220,.32); border-radius: 10px; background: rgba(8,3,19,.74); color: #b8bfd0; font-size: 11px; line-height: 1.4; pointer-events: none; }
#mission strong { display:block; color:#ff68e4; letter-spacing:.15em; margin-bottom:4px; }
#minimap { position: fixed; right: max(18px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom)); width: 180px; height: 180px; border: 1px solid rgba(79,255,230,.38); border-radius: 50%; background: rgba(1,5,14,.82); box-shadow: 0 0 25px rgba(0,255,220,.1); pointer-events:none; }
#help { position: fixed; bottom: max(14px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); padding: 8px 12px; border-radius: 999px; color: #91a6ba; background: rgba(2,7,18,.72); font-size: 11px; white-space: nowrap; pointer-events: none; }
#crosshair { position: fixed; left: 50%; top: 50%; transform: translate(-50%,-50%); color: rgba(79,255,230,.55); font-size: 20px; pointer-events: none; }
#fatal { position:fixed; inset:50% auto auto 50%; transform:translate(-50%,-50%); width:min(650px,calc(100vw - 32px)); padding:20px; border:1px solid #ff4a78; border-radius:12px; background:rgba(22,2,12,.96); color:#ffd4df; z-index:20; }
#fatal h2 { margin-top:0; color:#ff6d95; }
#fatal pre { white-space:pre-wrap; overflow-wrap:anywhere; color:#fff; }
@media (max-width: 700px) { #help { font-size: 9px; } #hud { padding: 10px 12px; } #mission { display:none; } #minimap { width:120px; height:120px; } }

#renderer { color:#8396aa; }
#rendererMode { color:#f6bf62; font-weight:600; }
html[data-renderer="canvas2d"] #world { image-rendering:auto; }
#profilePanel { position:fixed; left:max(16px,env(safe-area-inset-left)); top:var(--profile-panel-top,245px); width:min(310px,calc(100vw - 32px)); max-height:var(--profile-panel-room,calc(100vh - 260px)); overflow:auto; padding:10px 12px; border:1px solid rgba(116,168,255,.35); border-radius:10px; background:rgba(2,7,18,.76); color:#aebed0; font-size:11px; z-index:7; }
#profilePanel > div { display:flex; align-items:center; justify-content:space-between; gap:8px; }
#profilePanel strong { color:#74a8ff; }
#profilePanel button, dialog button { border:1px solid rgba(79,255,230,.45); border-radius:6px; background:#071b27; color:#7fffe9; padding:5px 9px; cursor:pointer; }
#qualityControls { margin-top:14px; }
#qualityControls button.selected { border-color:#f6bf62; color:#ffe0a1; background:#241b08; box-shadow:0 0 16px rgba(246,191,98,.16); }
#qualityStatus { margin:9px 0 0; color:#91a6ba; font-size:11px; line-height:1.45; }
#interaction { position:fixed; left:50%; bottom:70px; transform:translateX(-50%); width:min(520px,calc(100vw - 32px)); padding:12px 15px; border:1px solid rgba(255,104,228,.55); border-radius:10px; background:rgba(12,3,21,.9); text-align:center; pointer-events:none; }
#interaction strong { color:#ff68e4; } #interaction p { margin:5px 0 0; color:#d4ccdb; font-size:12px; }
dialog { width:min(560px,calc(100vw - 30px)); border:1px solid rgba(79,255,230,.5); border-radius:12px; background:#050b17; color:#c5d3e1; box-shadow:0 0 70px #000; }
dialog::backdrop { background:rgba(0,0,0,.7); backdrop-filter:blur(5px); } dialog .close { float:right; font-size:20px; } dialog form { display:grid; gap:8px; margin-top:18px; padding-top:12px; border-top:1px solid #183047; } dialog h2, dialog h3 { color:#7fffe9; } dialog input { width:100%; padding:9px; border:1px solid #234158; border-radius:6px; background:#020711; color:white; }
@media (max-width:700px) { #profilePanel { width:min(250px,calc(100vw - 32px)); } }

/* Compact non-modal direct chat. It stays docked while the world remains interactive. */
.chat-dialog {
  position:fixed;
  inset:auto auto max(52px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left));
  margin:0;
  width:min(340px,calc(100vw - 28px));
  max-height:min(430px,55vh);
  padding:10px;
  z-index:15;
  border-color:rgba(255,104,228,.45);
  border-radius:10px;
  background:rgba(5,11,23,.94);
  box-shadow:0 10px 36px rgba(0,0,0,.55),0 0 24px rgba(255,104,228,.08);
}
.chat-dialog::backdrop { display:none; }
.chat-dialog h2 { margin:0 28px 2px 0; font-size:13px; }
.chat-dialog .close { position:absolute; top:5px; right:6px; float:none; padding:2px 7px; line-height:1.1; }
#chatStatus { margin:0 0 7px; color:#8094a9; font-size:9px; }
#chatMessages { height:min(210px,30vh); overflow-y:auto; display:flex; flex-direction:column; gap:5px; padding:7px; border:1px solid #183047; border-radius:7px; background:#020711; }
.chat-message { max-width:88%; padding:5px 7px; border-radius:7px; overflow-wrap:anywhere; font-size:11px; }
.chat-message.mine { align-self:flex-end; background:rgba(79,255,230,.13); border:1px solid rgba(79,255,230,.28); }
.chat-message.theirs { align-self:flex-start; background:rgba(255,104,228,.12); border:1px solid rgba(255,104,228,.25); }
.chat-body { color:#e1edf5; white-space:pre-wrap; }
.chat-meta { margin-top:2px; color:#71879a; font-size:8px; }
#chatForm { grid-template-columns:1fr auto; align-items:center; gap:5px; margin-top:7px; padding-top:7px; }
#chatForm input { min-width:0; padding:7px; font-size:11px; }
#chatForm button { padding:7px 9px; }
@media (max-width:700px) {
  .chat-dialog { bottom:max(48px,env(safe-area-inset-bottom)); width:min(300px,calc(100vw - 24px)); }
  #chatMessages { height:min(170px,27vh); }
}

#modeLine { color:#f6bf62; font-size:11px; margin-top:3px; }
#factionControls { margin-top:12px; border:1px solid #183047; display:flex; gap:5px; flex-wrap:wrap; }
#factionControls legend { color:#ffb45e; }
#scoreboard { margin-top:10px; padding:8px; border:1px solid #183047; font-size:11px; }
#scoreboard h3 { margin:0 0 5px; }

#factionControls button { transition:transform .12s ease, box-shadow .12s ease, background .12s ease; }
#factionControls button.selected,
#factionControls button[aria-pressed="true"] { background:#153f4a; color:#d7fff9; border-color:#4fffe6; box-shadow:0 0 0 1px rgba(79,255,230,.35),0 0 14px rgba(79,255,230,.24); transform:translateY(-1px); }
#factionControls button.selected::before { content:'✓ '; }
#accountStatus.success { color:#8fffe9; font-weight:700; }

/* v4.6 persistent social routes and packet profiles */
.profile-actions { display:flex; gap:5px; align-items:center; }
#unreadBadge { display:inline-flex; min-width:17px; height:17px; align-items:center; justify-content:center; margin-left:3px; padding:0 4px; border-radius:999px; background:#ff4c9a; color:#fff; font-size:9px; }
#unreadBadge[hidden] { display:none; }
.profile-card { margin:12px 0; padding:10px; border:1px solid #183047; border-radius:8px; background:rgba(2,7,17,.58); }
.profile-card h3 { margin:0 0 8px; }
.profile-card dl, .player-profile-dialog dl { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; margin:0; }
.profile-card dl div, .player-profile-dialog dl div { padding:7px; border:1px solid rgba(116,168,255,.2); border-radius:6px; background:rgba(8,18,34,.62); }
.profile-card dt, .player-profile-dialog dt { color:#71879a; font-size:9px; text-transform:uppercase; }
.profile-card dd, .player-profile-dialog dd { margin:2px 0 0; color:#e5f3ff; font-size:13px; }
#factionEffects, #playerProfileEffects { color:#aebed0; font-size:10px; line-height:1.45; }

.messages-dialog {
  position:fixed;
  inset:max(105px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) auto auto;
  margin:0;
  width:min(390px,calc(100vw - 28px));
  max-height:min(620px,72vh);
  padding:12px;
  z-index:14;
  background:rgba(5,11,23,.96);
}
.messages-dialog::backdrop, .player-profile-dialog::backdrop { display:none; }
.messages-dialog h2 { margin:0 30px 4px 0; font-size:15px; }
.messages-dialog .close, .player-profile-dialog .close { position:absolute; right:7px; top:6px; }
#messagesStatus { margin:0 0 8px; color:#8094a9; font-size:10px; }
#conversationList { display:flex; flex-direction:column; gap:6px; max-height:430px; overflow:auto; }
.conversation-row { width:100%; display:grid; grid-template-columns:1fr auto; gap:5px 9px; text-align:left; padding:8px 9px; border:1px solid #183047; border-radius:8px; background:#07131f; color:#c9d9e6; }
.conversation-row:hover { border-color:#4fffe6; }
.conversation-row .conversation-name { color:#7fffe9; font-weight:700; }
.conversation-row .conversation-preview { grid-column:1 / -1; color:#8498aa; font-size:9px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.conversation-row .conversation-unread { align-self:start; min-width:20px; padding:2px 5px; border-radius:999px; background:#ff4c9a; color:#fff; text-align:center; font-size:9px; }
.conversation-row.blocked { opacity:.65; }
#blockedRoutes { margin-top:10px; border-top:1px solid #183047; padding-top:8px; font-size:10px; }
#blockedList { display:flex; flex-direction:column; gap:5px; margin-top:7px; }
.blocked-row { display:flex; align-items:center; justify-content:space-between; gap:8px; }

.player-profile-dialog { position:fixed; inset:50% auto auto 50%; transform:translate(-50%,-50%); margin:0; width:min(420px,calc(100vw - 28px)); z-index:18; background:rgba(5,11,23,.98); }
.player-profile-dialog h2 { margin:0 30px 2px 0; }
#playerProfileFaction { color:#ffb45e; letter-spacing:.12em; font-size:11px; }

#chatForm { grid-template-columns:minmax(0,1fr) repeat(4,auto); }
#chatForm #chatInput { grid-column:1 / -1; }
#blockChat.blocked { border-color:#ff6d95; color:#ffd4df; background:#32101c; }
.world-feed-sector { color:#74a8ff; }
.world-feed-combat { color:#ff7bea; }
.world-feed-incident { color:#7fffe9; }

@media (max-width:700px) {
  .messages-dialog { top:auto; bottom:max(48px,env(safe-area-inset-bottom)); max-height:64vh; }
  .profile-card dl, .player-profile-dialog dl { grid-template-columns:1fr 1fr; }
  #help { max-width:calc(100vw - 20px); overflow:hidden; text-overflow:ellipsis; }
}

#safehouseBanner {
  position:fixed;
  top:max(18px,env(safe-area-inset-top));
  right:max(18px,env(safe-area-inset-right));
  width:min(320px,calc(100vw - 36px));
  padding:13px 14px;
  border:1px solid rgba(255,196,119,.5);
  border-radius:12px;
  background:rgba(9,10,17,.92);
  box-shadow:0 14px 40px rgba(0,0,0,.45),0 0 30px rgba(255,180,94,.12);
  color:#d7e3eb;
  z-index:12;
}
#safehouseBanner[hidden] { display:none; }
#safehouseBanner .safehouse-status { color:#8fffe9; font-size:9px; letter-spacing:.16em; margin-bottom:5px; }
#safehouseBanner strong { display:block; color:#ffc477; font-size:16px; margin-bottom:5px; }
#safehouseBanner span { display:block; color:#9eafbd; font-size:10px; line-height:1.45; margin-top:3px; }
#safehouseBanner button { margin-top:10px; border:1px solid rgba(255,196,119,.5); border-radius:7px; background:#21180d; color:#ffd8a8; padding:7px 10px; cursor:pointer; }
body.safehouse-active #mission { display:none; }
body.safehouse-active #crosshair { color:rgba(255,196,119,.38); }
body.safehouse-active #minimap { opacity:.7; }
@media (max-width:700px) {
  #safehouseBanner { top:auto; bottom:max(16px,env(safe-area-inset-bottom)); right:max(12px,env(safe-area-inset-right)); width:min(280px,calc(100vw - 24px)); }
}


/* v4.9 presence and combat feedback */
#damageFlash {
  position:fixed; inset:0; z-index:11; pointer-events:none; opacity:0;
  background:radial-gradient(circle at center,rgba(255,40,84,0) 28%,rgba(255,35,74,.22) 68%,rgba(255,20,58,.72) 100%);
  mix-blend-mode:screen;
}
#damageFlash.pulse { animation:syncity-damage-flash .42s ease-out; }
#damageFlash.pulse-heavy { animation:syncity-damage-flash-heavy .55s ease-out; }
@keyframes syncity-damage-flash { 0%{opacity:.92} 28%{opacity:.38} 100%{opacity:0} }
@keyframes syncity-damage-flash-heavy { 0%{opacity:1;filter:saturate(1.45)} 35%{opacity:.55} 100%{opacity:0;filter:none} }
.safehouse-actions { display:flex; flex-wrap:wrap; gap:7px; margin-top:3px; }
#safehouseBanner .safehouse-actions button { margin-top:7px; }
#awayToggle[aria-pressed="true"] { border-color:#ffb45e; background:#33220e; color:#fff0c8; box-shadow:0 0 16px rgba(255,180,94,.18); }
body.packet-away #safehouseBanner .safehouse-status::after { content:' · AWAY'; color:#ffb45e; }

/* v4.10 avatar preferences and visible achievement details */
#avatarControls { margin-top:14px; border:1px solid #183047; }
#avatarControls legend { color:#ffb45e; }
.avatar-colour-row { display:flex; flex-wrap:wrap; align-items:center; gap:7px; }
#avatarColour {
  width:48px;
  min-width:48px;
  height:34px;
  padding:2px;
  border:1px solid rgba(79,255,230,.45);
  border-radius:7px;
  background:#020711;
  cursor:pointer;
}
#avatarColourStatus { margin:8px 0 0; color:#91a6ba; font-size:10px; line-height:1.45; }
#avatarColourStatus.success { color:#8fffe9; font-weight:700; }
.profile-card h4, .player-profile-dialog h3 { margin:12px 0 7px; color:#ffb45e; font-size:11px; letter-spacing:.08em; text-transform:uppercase; }
.achievement-list { display:flex; flex-direction:column; gap:7px; }
.achievement-card { padding:8px 9px; border:1px solid rgba(255,180,94,.25); border-radius:7px; background:rgba(29,19,8,.45); }
.achievement-card strong { display:block; color:#ffd89b; font-size:11px; }
.achievement-card p { margin:3px 0 5px; color:#b9c7d2; font-size:9px; line-height:1.45; }
.achievement-card time { color:#71879a; font-size:8px; }
.empty-achievements { margin:0; color:#71879a; font-size:9px; }
.player-profile-dialog::after {
  content:'';
  position:absolute;
  inset:0 auto 0 0;
  width:4px;
  border-radius:12px 0 0 12px;
  background:var(--profile-avatar-colour,transparent);
  box-shadow:0 0 18px var(--profile-avatar-colour,transparent);
  pointer-events:none;
}
#profilePanel .inline-stat {
  display:inline;
  padding:0;
  border:0;
  background:transparent;
  color:inherit;
  font:inherit;
  text-decoration:underline dotted rgba(116,168,255,.65);
  text-underline-offset:2px;
}
#profilePanel .inline-stat:hover { color:#dbe8ff; }
#accountDialog, .player-profile-dialog {
  max-height:calc(100vh - 30px);
  overflow:auto;
}