/* The Proving Depths — Apple II phosphor */
:root {
  --phos: #33ff66;
  --phos-dim: #1d8f3d;
  --amber: #ffd23f;
  --blood: #ff5a5a;
  --bg: #000;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: #0a0a0a; min-height: 100vh; }
body {
  font-family: "VT323", monospace;
  color: var(--phos);
  display: flex; justify-content: center; padding: 12px;
  font-size: 19px; line-height: 1.25;
}
.crt {
  width: 100%; max-width: 780px;
  background: var(--bg);
  border: 2px solid var(--phos-dim);
  border-radius: 10px;
  padding: 12px 14px 8px;
  position: relative;
  box-shadow: 0 0 40px rgba(51, 255, 102, 0.12), inset 0 0 80px rgba(51, 255, 102, 0.04);
}
/* scanlines */
.crt::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: 10px;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,0.18) 0 1px, transparent 1px 3px);
}
@media (prefers-reduced-motion: no-preference) {
  header h1 { text-shadow: 0 0 6px rgba(51,255,102,.7); }
}

header { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1px solid var(--phos-dim); padding-bottom: 6px; margin-bottom: 10px; }
header h1 { font-size: 26px; letter-spacing: 3px; font-weight: normal; }
.depth { color: var(--amber); font-size: 17px; }

main { display: grid; grid-template-columns: 1fr 280px; gap: 10px; }
.left, .right { display: flex; flex-direction: column; gap: 10px; min-width: 0; }

.panel { border: 1px solid var(--phos-dim); padding: 6px; background: #020402; }
.viewport-panel { display: flex; justify-content: center; }
#view { width: 100%; height: auto; image-rendering: pixelated; }
.msg-panel { min-height: 120px; }
#msg { height: 150px; overflow-y: auto; font-size: 17px; }
#msg div { padding: 1px 2px; }

#party { width: 100%; border-collapse: collapse; font-size: 16px; }
#party th { text-align: left; color: var(--phos-dim); border-bottom: 1px solid var(--phos-dim); font-weight: normal; }
#party td { padding: 1px 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 90px; }
#party .r, #party th.r { text-align: right; }
#party .warn td { color: var(--amber); }
#party .bad td { color: var(--blood); }

.menu-panel { flex: 1; }
.menu-title { color: var(--amber); border-bottom: 1px dashed var(--phos-dim); margin-bottom: 4px; padding-bottom: 2px; font-size: 17px; }
.menu-item { cursor: pointer; padding: 1px 2px; font-size: 17px; }
.menu-item:hover { background: rgba(51,255,102,.12); }
.menu-item:focus-visible { outline: 1px solid var(--amber); }
.menu-item .key { color: var(--amber); }
.menu-item .key::before { content: "["; color: var(--phos-dim); }
.menu-item .key::after { content: "]"; color: var(--phos-dim); }
.dim { color: var(--phos-dim); }
.dim .key { color: var(--phos-dim); }

.map-panel { display: flex; justify-content: center; }
#automap { width: 200px; height: 200px; image-rendering: pixelated; }

footer { margin-top: 8px; text-align: center; color: var(--phos-dim); font-size: 15px; }

@media (max-width: 700px) {
  main { grid-template-columns: 1fr; }
  .map-panel { order: 3; }
  body { font-size: 17px; }
}