/* Dune Arcanum styles */
:root{
  --paper:#f8f3e8;
  --ink:#2b2a28;
  --brass:#b08d57;
  --lapis:#1e5aa8;
  --onyx:#1b1b1b;
  --sand:#cdaa7d;
  --teal:#2e8b8b;
}
html,body{margin:0;padding:0;height:100%;background:var(--paper);color:var(--ink);}
#hud{
  position:fixed; top:0; left:0; right:0;
  display:flex; justify-content:space-between; align-items:center;
  padding:8px 12px; z-index:10;
  mix-blend-mode: multiply;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}
#hud .left{display:flex; gap:16px; font-weight:600}
#hud .right{display:flex; gap:8px}
#hud button{
  background: var(--brass); color:#fff; border:none; border-radius:10px;
  padding:6px 10px; font-size:18px; cursor:pointer; box-shadow:0 2px 0 rgba(0,0,0,.2);
}
#stage{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
#overlay{
  position:fixed; inset:auto 0 8% 0; display:flex; flex-direction:column; align-items:center; gap:6px;
  pointer-events:none; font-family: ui-sans-serif, system-ui; color:rgba(0,0,0,.65);
  text-shadow:0 1px 0 rgba(255,255,255,.5);
}
#title{ font-weight:800; letter-spacing:.06em; }
#subtitle{ font-size:14px; opacity:.9 }
@media (min-width: 960px){
  #title{ font-size:28px }
}
@media (max-width: 959px){
  #title{ font-size:22px }
}
/* Canvas border frame */
.canvas-frame{
  border: 16px solid var(--brass);
  box-shadow:
    inset 0 0 0 3px rgba(255,255,255,.18),
    0 12px 30px rgba(0,0,0,.25);
  border-radius: 22px;
  overflow:hidden;
}