/* =========================================================================
   HJEMMET — Tavlens levende verden: lag-styling.
   DOM-elementerne oprettes af hjemmet.js; klassernes udseende bor her.
   Alle klasser er præfikset hjemmet- så de ikke støder ind i værtsappens CSS.
   ========================================================================= */

.hjemmet-canvas {
  position: fixed; inset: 0; width: 100%; height: 100%;
  display: block; touch-action: none; cursor: crosshair; z-index: 0;
}
/* modul-mode: fast baggrundslag bag appen, klik går videre til appen */
.hjemmet-canvas.hjemmet-baggrund { z-index: -1; pointer-events: none; cursor: default; }

.hjemmet-sig, .hjemmet-note {
  position: fixed; bottom: 12px; pointer-events: none; user-select: none;
  font: 10px/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .18em; text-transform: uppercase; color: #ece2ca;
  text-shadow: 0 1px 8px rgba(8, 20, 26, .75);
}
.hjemmet-sig  { left: 14px; opacity: .55; z-index: 2; }
.hjemmet-sig b { color: #e8b64c; font-weight: 400; }
.hjemmet-note { right: 14px; opacity: 0; transition: opacity .6s; z-index: 2; }
.hjemmet-note.on { opacity: .65; }

/* lille diskret demo-panel øverst til højre — kan foldes væk bag en prik */
.hjemmet-panel {
  position: fixed; top: 10px; right: 12px; z-index: 3;
  display: flex; gap: 10px; align-items: center;
  font: 10px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .12em; text-transform: uppercase; color: #ece2ca;
  background: rgba(13, 29, 41, .55); border: 1px solid rgba(236, 226, 202, .22);
  border-radius: 7px; padding: 6px 10px; transition: opacity .3s;
}
.hjemmet-panel.off { opacity: 0; pointer-events: none; }
.hjemmet-panel label { display: flex; gap: 4px; align-items: center; }
.hjemmet-panel select {
  font: inherit; color: #e8b64c; background: transparent; border: 0;
  border-bottom: 1px dotted rgba(236, 226, 202, .4); outline: none; cursor: pointer;
}
.hjemmet-panel select option { color: #ece2ca; background: #0d1d29; }
.hjemmet-panel-dot { cursor: pointer; opacity: .65; user-select: none; }
.hjemmet-dot {
  position: fixed; top: 6px; right: 12px; z-index: 3; display: none; cursor: pointer;
  font: 16px/1 ui-monospace, monospace; color: #ece2ca; opacity: .55; user-select: none;
}
.hjemmet-dot.on { display: block; }