:root { color-scheme: dark; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #cceef9; }
body { font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; }

#game {
  position: fixed;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(#78bdda, #d8eef4);
  touch-action: none;
}

.hud-card {
  position: fixed;
  z-index: 4;
  left: 24px;
  top: 24px;
  display: flex;
  align-items: flex-start;
  max-width: min(430px, calc(100vw - 48px));
  gap: 12px;
  border: 1px solid rgba(255,255,255,.42);
  border-radius: 16px;
  padding: 12px 15px 13px 13px;
  background: rgba(9, 27, 35, .72);
  box-shadow: 0 10px 32px rgba(18,39,47,.18);
  backdrop-filter: blur(14px) saturate(1.2);
  color: white;
  pointer-events: none;
  transition: transform .25s ease, opacity .25s ease;
}

#location-dot {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  margin-top: 5px;
  border-radius: 50%;
  background: #c9ff54;
  box-shadow: 0 0 0 5px rgba(201,255,84,.14);
}

#location strong { display: block; font-size: 14px; letter-spacing: .015em; }
#location small { display: block; margin-top: 3px; color: rgba(255,255,255,.68); font-size: 11px; line-height: 1.4; }

#overview {
  position: fixed;
  z-index: 4;
  right: 24px;
  top: 24px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(255,255,255,.46);
  border-radius: 999px;
  padding: 11px 15px;
  background: rgba(9,27,35,.74);
  box-shadow: 0 8px 24px rgba(10,28,35,.2);
  color: white;
  cursor: pointer;
  font: 800 10px/1 Inter, ui-sans-serif, system-ui, sans-serif;
  letter-spacing: .13em;
  backdrop-filter: blur(12px);
}
#overview span { color: #d8ff54; font-size: 15px; }
#overview:hover, #overview[aria-pressed="true"] { background: #d8ff54; color: #13262f; }
#overview:hover span, #overview[aria-pressed="true"] span { color: #13262f; }
#overview:focus-visible { outline: 3px solid white; outline-offset: 3px; }

#visitor-count {
  position: fixed;
  z-index: 4;
  right: 24px;
  top: 132px;
  display: flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  padding: 8px 12px;
  background: rgba(9,27,35,.66);
  color: rgba(255,255,255,.72);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .12em;
  backdrop-filter: blur(10px);
}
#visitor-count i { width: 7px; height: 7px; border-radius: 50%; background: #7dff72; box-shadow: 0 0 0 4px rgba(125,255,114,.13); }
#visitor-count strong { color: white; }

#security-status {
  position: fixed;
  z-index: 4;
  right: 24px;
  top: 168px;
  display:flex;
  align-items:center;
  gap:5px;
  border-radius:999px;
  padding:8px 12px;
  background:rgba(9,27,35,.66);
  color:rgba(255,255,255,.72);
  font-size:9px;
  font-weight:800;
  letter-spacing:.1em;
  backdrop-filter:blur(10px);
}
#security-status i { width:7px;height:7px;border-radius:50%;background:#ffb84d;box-shadow:0 0 0 4px rgba(255,184,77,.13); }
#security-status strong { color:white; }

#join-panel, #chat-panel {
  position: fixed;
  z-index: 7;
  right: 24px;
  bottom: 24px;
  width: min(330px,calc(100vw - 48px));
  border: 1px solid rgba(255,255,255,.42);
  border-radius: 18px;
  padding: 15px;
  background: rgba(9,27,35,.88);
  color: white;
  box-shadow: 0 14px 42px rgba(4,18,24,.35);
  backdrop-filter: blur(16px);
}
#join-panel > strong { display:block;font-size:12px;letter-spacing:.11em; }
#join-panel > span { display:block;margin:5px 0 12px;color:#b7c5ca;font-size:10px;line-height:1.4; }
#join-panel > div, #chat-form { display:flex;gap:7px; }
#join-panel input, #chat-input { min-width:0;flex:1;border:1px solid rgba(255,255,255,.24);border-radius:9px;padding:10px 11px;background:#1c343e;color:white;outline:none; }
#join-panel input:focus, #chat-input:focus { border-color:#d8ff54; }
#join-panel button, #chat-form button { border:0;border-radius:9px;padding:0 13px;background:#d8ff54;color:#14262e;font-weight:950;cursor:pointer; }
#join-panel small { display:block;margin-top:8px;color:#82969e;font-size:8px;letter-spacing:.05em; }
#chat-panel { display:flex;flex-direction:column;height:310px; }
#chat-panel header { display:flex;justify-content:space-between;align-items:center;padding-bottom:10px;border-bottom:1px solid rgba(255,255,255,.12);font-size:10px;letter-spacing:.1em; }
#chat-user { color:#d8ff54; }
#chat-messages { flex:1;overflow:auto;padding:9px 2px;font-size:11px;line-height:1.4; }
.chat-message { margin-bottom:8px;color:#d6e0e3;overflow-wrap:anywhere; }
.chat-message strong { color:#6ee7ff;margin-right:5px; }
#chat-form { padding-top:9px;border-top:1px solid rgba(255,255,255,.12); }
#chat-form button { padding:0 11px;font-size:9px; }

#hk-clock {
  position: fixed;
  z-index: 4;
  right: 24px;
  top: 76px;
  min-width: 172px;
  border: 1px solid rgba(255,255,255,.42);
  border-radius: 13px;
  padding: 8px 12px;
  background: rgba(9,27,35,.72);
  color: white;
  text-align: right;
  backdrop-filter: blur(12px);
  pointer-events: none;
}
#hk-clock span { float:left; margin-top:4px; color:#d8ff54; font-size:8px; font-weight:900; letter-spacing:.14em; }
#hk-clock strong { display:block; font:900 18px/1.1 ui-monospace,Consolas,monospace; letter-spacing:.04em; }
#hk-clock small { display:block; margin-top:2px; color:rgba(255,255,255,.6); font-size:8px; font-weight:800; letter-spacing:.08em; }

#enter-building, #enter-room {
  position: fixed;
  z-index: 5;
  left: 50%;
  bottom: 112px;
  transform: translateX(-50%);
  border: 2px solid white;
  border-radius: 999px;
  padding: 13px 20px;
  background: #d8ff54;
  color: #13262f;
  box-shadow: 0 8px 24px rgba(8,25,32,.3);
  cursor: pointer;
  font: 900 11px/1 Inter,system-ui,sans-serif;
  letter-spacing: .12em;
}
#enter-room { background:#6ee7ff; }

#elevator-panel {
  position: fixed;
  z-index: 6;
  right: 24px;
  bottom: 24px;
  width: 185px;
  border: 1px solid rgba(255,255,255,.42);
  border-radius: 18px;
  padding: 16px;
  background: rgba(12,28,35,.86);
  box-shadow: 0 16px 46px rgba(4,18,24,.38);
  color: white;
  backdrop-filter: blur(16px);
}
#elevator-panel > strong { display:block; margin-bottom:5px; font-size:12px; }
#elevator-panel > span { color:#aebec4; font-size:9px; font-weight:900; letter-spacing:.18em; }
.floor-buttons { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin:13px 0; }
.floor-buttons button, #exit-building { border:0; border-radius:8px; padding:10px 0; background:#344951; color:white; cursor:pointer; font-weight:900; }
.floor-buttons button.active { background:#d8ff54; color:#14252c; }
#exit-building { width:100%; background:#f05d48; font-size:9px; letter-spacing:.1em; }

#room-panel {
  position:fixed;
  z-index:6;
  right:24px;
  bottom:24px;
  width:190px;
  border:1px solid rgba(255,255,255,.42);
  border-radius:18px;
  padding:16px;
  background:rgba(12,28,35,.88);
  color:white;
  box-shadow:0 16px 46px rgba(4,18,24,.38);
  backdrop-filter:blur(16px);
}
#room-panel strong { display:block;font-size:14px; }
#room-panel span { display:block;margin:5px 0 14px;color:#aebec4;font-size:9px;font-weight:900;letter-spacing:.16em; }
#exit-room { width:100%;border:0;border-radius:8px;padding:11px;background:#55cfe7;color:#102832;cursor:pointer;font-size:9px;font-weight:900;letter-spacing:.09em; }

#radar {
  position: fixed;
  z-index: 4;
  left: 24px;
  bottom: 24px;
  width: 184px;
  height: 184px;
  border-radius: 50%;
  overflow: hidden;
  background: #17272e;
  box-shadow: 0 8px 30px rgba(5,20,27,.38), 0 0 0 4px rgba(255,255,255,.9), 0 0 0 7px rgba(9,27,35,.58);
  pointer-events: none;
}
#minimap { display: block; width: 100%; height: 100%; }
.north {
  position: absolute;
  left: 50%;
  top: 7px;
  transform: translateX(-50%);
  color: white;
  font-size: 10px;
  font-weight: 950;
  text-shadow: 0 1px 4px #000;
}
.radar-ring {
  position: absolute;
  inset: 0;
  border: 2px solid rgba(255,255,255,.38);
  border-radius: 50%;
  background: radial-gradient(circle, transparent 56%, rgba(5,19,25,.18) 82%, rgba(5,19,25,.48));
}

#keys {
  position: fixed;
  z-index: 4;
  left: 50%;
  bottom: 28px;
  display: grid;
  justify-items: center;
  gap: 4px;
  transform: translateX(-50%);
  color: white;
  filter: drop-shadow(0 4px 14px rgba(0,0,0,.36));
  pointer-events: none;
  animation: keys-out .7s 5.5s ease forwards;
}

.key-row { display: flex; gap: 4px; }
.key {
  display: grid;
  place-items: center;
  width: 34px;
  height: 31px;
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 7px;
  background: rgba(9,27,35,.72);
  font-size: 17px;
  font-weight: 800;
  backdrop-filter: blur(8px);
}
#keys > span { margin-top: 6px; font-size: 9px; font-weight: 900; letter-spacing: .18em; }

@keyframes keys-out { to { opacity: .18; } }

@media (max-width: 640px) {
  .hud-card { left: 14px; top: 14px; max-width: calc(100vw - 28px); }
  #overview { right: 14px; top: auto; bottom: 110px; }
  #visitor-count { right: 14px; top: 14px; }
  #security-status { right:14px; top:48px; }
  #hk-clock { right:14px; top:82px; min-width:160px; }
  #join-panel, #chat-panel { right:14px;bottom:14px;width:min(310px,calc(100vw - 28px)); }
  #elevator-panel { right: 14px; bottom: 14px; }
  #radar { left: 16px; bottom: 20px; width: 128px; height: 128px; }
  #keys { bottom: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  #keys { animation: none; }
}