:root { --accent:#f1b90c; --bg:#000000; }
* { box-sizing: border-box; }
html, body { height:100%; }
body {
  margin:0;
  background: #000;
  color: var(--accent);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  letter-spacing: .3px;
}
/* star field backdrop */
body::before, body::after{
  content:"";
  position: fixed;
  inset:0;
  pointer-events:none;
}
body::before{
  background-image:
    radial-gradient(var(--accent) 0.7px, transparent 1px),
    radial-gradient(var(--accent) 0.7px, transparent 1px);
  background-size: 3px 3px, 2px 2px;
  background-position: 0 0, 1px 1px;
  opacity: .2;
}
body::after{
  background: radial-gradient(closest-side, rgba(241,185,12,.15), transparent 60%) center/120vmax 120vmax no-repeat;
  mix-blend-mode: screen;
}
a { color: var(--accent); text-decoration: none; }
a:focus, a:hover { text-shadow: 0 0 8px var(--accent); }

.desktop {
  position: relative;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 80px 24px 80px 24px;
}

/* OS-style window */
.window {
  position: relative;
  border: 1px solid var(--accent);
  outline: 2px dotted rgba(241,185,12,.35);
  border-radius: 10px;
  box-shadow: 0 0 24px rgba(241,185,12,.15);
  background: rgba(0,0,0,.66);
  backdrop-filter: blur(2px);
}
.window .titlebar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 8px 12px;
  border-bottom: 1px dashed rgba(241,185,12,.35);
  font-weight: 700;
}
.win-controls{
  display:flex; gap:6px;
}
.ctrl{
  width:10px; height:10px; border:1px solid var(--accent); border-radius:2px;
}
.window .content{ padding: 12px; }

/* top-right gif window */
#gifWin{
  position: fixed; top:12px; right:12px; width:180px; height:180px; z-index:10;
}
#gifWin .content{ padding:0; overflow:hidden; display:grid; place-items:center; height: calc(100% - 36px); }
#gifWin img{ width:100%; height:100%; object-fit: cover; filter: contrast(120%) brightness(120%) saturate(120%); }

/* frequency analyzer */
#freqWin{
  position: fixed; top:210px; right:12px; width:220px; height:140px; z-index:9;
}
#freqCanvas{ width:100%; height:100%; display:block; }

/* main map */
#mapWin{
  max-width:1000px; width:100%;
}
.map-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(160px,1fr));
  gap:16px;
  padding:16px;
}
.node{
  border:1px solid var(--accent);
  border-radius:16px;
  padding:16px;
  min-height:140px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  background: rgba(0,0,0,.4);
  cursor:pointer;
  transition: transform .15s ease, box-shadow .2s ease;
}
.node:hover{ transform: translateY(-4px); box-shadow: 0 0 16px rgba(241,185,12,.25); }
.node h3{ margin:0 0 8px 0; font-size:16px; }
.node small{ opacity:.8; }

.badge{ padding:2px 8px; border:1px solid var(--accent); border-radius:999px; font-size:12px; width:max-content; }

.logo{
  position: fixed; left:12px; top:12px; display:flex; align-items:center; gap:10px; z-index:12;
}
.logo img{ height:78px; aspect-ratio:1; object-fit:contain; border:1px solid var(--accent); border-radius:8px; padding:6px; background:#000; }

.taskbar{
  position: fixed; left:12px; right:12px; bottom:12px; display:flex; gap:12px; z-index:11;
}
.taskbar .window{ flex:1; }

.terminal{
  font-size:14px;
  line-height:1.4;
}
.terminal pre{ margin:0; white-space:pre-wrap; }
.inputline{ display:flex; gap:8px; margin-top:8px; }
.inputline input{
  flex:1; background:#000; color:var(--accent); border:1px solid var(--accent); padding:6px 8px; border-radius:8px;
}
.btn{ border:1px solid var(--accent); background:#000; color:var(--accent); padding:6px 10px; border-radius:8px; cursor:pointer; }
.btn:hover{ box-shadow: 0 0 8px rgba(241,185,12,.5); }

/* room page */
.room-wrap{ max-width: 900px; margin: 80px auto; padding: 0 16px 80px 16px; }
.room-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px;}
.room-head .back{ border:1px solid var(--accent); padding:6px 10px; border-radius:8px; }
.room-title{ font-weight:800; font-size:22px; }
.dialog{
  border:1px solid var(--accent);
  border-radius:16px;
  padding:16px;
  background: rgba(0,0,0,.55);
  line-height:1.7;
}
.line{ display:flex; gap:8px; margin:8px 0; }
.speaker{ font-weight:700; }
.ascii{
  font-family: monospace;
  white-space: pre;
  padding:8px;
  margin:8px 0;
  border:1px dotted var(--accent);
  border-radius:10px;
  opacity:.9;
}

footer{ text-align:center; opacity:.8; padding:18px; }