:root {
  --brass: #c4a574;
  --brass-2: #8a6a3e;
  --ink: #efe6d8;
  --cyan: #3ecfff;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font-family: "Source Sans 3", "Segoe UI", sans-serif;
  background: #0c0d10;
  color: var(--ink);
  overflow: hidden;
}
.shell { display: grid; grid-template-rows: auto 1fr auto; height: 100%; gap: 6px; padding: 8px; }
.hud, .dock {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: #1a1612; border: 1px solid var(--brass-2); border-radius: 10px; padding: 8px 12px;
}
a { color: var(--brass); text-decoration: none; letter-spacing: 0.12em; }
strong { font-family: Cinzel, Palatino, serif; color: var(--brass); }
.stat b, #lname { color: var(--cyan); }
#view-wrap {
  position: relative; border-radius: 12px; overflow: hidden;
  border: 2px solid var(--brass-2); background: #0e1014;
}
#view { width: 100%; height: 100%; display: block; cursor: pointer; }
.modal {
  position: absolute; inset: 0; display: grid; place-items: center; background: #0c0d10cc;
}
.modal[hidden] { display: none !important; }
.panel {
  background: #1a1612; border: 1px solid var(--brass); border-radius: 12px;
  padding: 22px; min-width: min(360px, 90vw); max-width: 460px;
}
h2 { font-family: Cinzel, Palatino, serif; margin: 0 0 8px; color: var(--brass); }
button, select {
  font: inherit; background: #2a2218; color: var(--ink);
  border: 1px solid var(--brass-2); border-radius: 8px; padding: 6px 10px; cursor: pointer;
}
button.on { border-color: var(--cyan); color: var(--cyan); }
.hold { min-width: 88px; }
.hint { font-size: 0.8rem; opacity: 0.75; flex: 1; }
.file-hint {
  position: absolute; top: 8px; left: 8px; right: 8px;
  background: #1a1612ee; border: 1px solid var(--brass-2); border-radius: 8px;
  padding: 8px 10px; font-size: 0.78rem; color: #9a9184; z-index: 3;
}
.file-hint a { letter-spacing: 0; }
@media (max-width: 700px) { .hint { display: none; } }