: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;
  user-select: none;
}
.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 { 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; touch-action: none; }
.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: 440px;
}
h2 { font-family: Cinzel, Palatino, serif; margin: 0 0 8px; color: var(--brass); }
.panel p { margin: 0 0 8px; line-height: 1.45; }
button {
  font: inherit; background: #2a2218; color: var(--ink);
  border: 1px solid var(--brass-2); border-radius: 8px; padding: 6px 10px; cursor: pointer;
}
button:hover { border-color: var(--brass); color: var(--brass); }
button.primary { background: var(--brass); color: #1a1612; min-width: 96px; }
button.primary:hover { filter: brightness(1.06); color: #1a1612; }
#btn-mode.daily { border-color: var(--cyan); color: var(--cyan); }
.hint { font-size: 0.8rem; opacity: 0.75; flex: 1; }
.pad {
  display: grid;
  grid-template-columns: repeat(3, 52px);
  grid-template-rows: repeat(3, 46px);
  gap: 5px;
}
.pad i { visibility: hidden; }
.pad button { min-width: 0; height: 100%; font-size: 1.05rem; touch-action: none; }
.pad button.primary { min-width: 0; padding: 0 4px; }
.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; } }