* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; background: #0c0e14; color: #e7e9f0; font-family: system-ui, "Segoe UI", sans-serif; }

#viewport {
  position: fixed; inset: 0; display: grid; place-items: center; overflow: hidden;
}
/* #stage is sized to the design resolution and scaled with a CSS var (letterbox fit) */
#stage {
  position: relative; transform-origin: top left;
  background: #11131b; box-shadow: 0 0 40px rgba(0,0,0,.6);
}

/* default: keep each asset's aspect ratio (no stretching), centered */
.el { position: absolute; background-size: contain; background-position: center; background-repeat: no-repeat; }
/* containers/frames/full-bleed art are meant to fill their box */
.el.cat-background { z-index: 0; background-size: 100% 100%; }
.el.cat-panel { background-size: 100% 100%; }
.el.cat-decoration { background-size: 100% 100%; }
.el.cat-interactive { cursor: pointer; transition: filter .08s ease, transform .08s ease; }
.el.cat-interactive:hover { filter: brightness(1.15) saturate(1.1); }
.el.cat-interactive:active { filter: brightness(.9); transform: translateY(1px) scale(.99); }
/* when real per-state art exists, swap images instead of faking with filters */
.el.cat-interactive.has-states:hover { filter: none; }
.el.cat-interactive.has-states:active { filter: none; transform: none; }
.el.cat-interactive[data-disabled="1"] { filter: grayscale(1) brightness(.6); cursor: not-allowed; }

.el.cat-value {
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; text-shadow: 0 1px 2px rgba(0,0,0,.9); pointer-events: none;
  line-height: 1.05; overflow: hidden;
}
.el.cat-value.is-bar {
  background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.15);
  border-radius: 6px; overflow: hidden; padding: 0;
}
.el.cat-value.is-bar .bar-fill {
  display: block; height: 100%; width: 50%;
  background: linear-gradient(90deg, #43e0ff, #7cf58f);
  transition: width .4s ease;
}
.el.cat-text { display: flex; align-items: center; justify-content: center;
  pointer-events: none; font-weight: 600; text-shadow: 0 1px 3px rgba(0,0,0,.9);
  white-space: pre-line; line-height: 1.1; overflow: hidden; text-align: center; }
.el.cat-text.is-longtext { align-items: flex-start; justify-content: flex-start;
  text-align: left; padding: 4px 6px; font-weight: 500; opacity: .92; }

/* dynamic feel: engine-driven, not baked. two mechanisms:
   1) particle layer for category=dynamic areas
   2) pulsing glow (drop-shadow follows alpha) for any element with a dynamic hint */
.el.cat-dynamic { pointer-events: none; }
.fx-layer { position: absolute; inset: 0; overflow: visible; }
.fx { position: absolute; left: 0; top: 0; will-change: transform, opacity; border-radius: 50%; }
.fx.ember { background: radial-gradient(circle, #fff2c4 0%, #ffcf6e 40%, rgba(255,170,60,.5) 60%, transparent 72%);
  box-shadow: 0 0 6px rgba(255,190,90,.8); }
.fx.dot { background: radial-gradient(circle, #d8fbff 0%, rgba(110,230,255,.7) 45%, transparent 72%);
  box-shadow: 0 0 6px rgba(90,220,255,.8); }
.fx.shimmer { filter: blur(5px);
  background: radial-gradient(circle, rgba(120,255,210,.55) 0%, transparent 70%); }
#stage.fx-off .fx-layer { display: none; }

.fx-glow { animation: fxGlow 2.4s ease-in-out infinite; }
.fx-glow.fx-warm { animation-name: fxGlowWarm; }
#stage.fx-off .fx-glow { animation: none !important; }
@keyframes fxGlow {
  0%,100% { filter: drop-shadow(0 0 2px rgba(120,230,255,.35)); }
  50%     { filter: drop-shadow(0 0 12px rgba(120,230,255,.9)); }
}
@keyframes fxGlowWarm {
  0%,100% { filter: drop-shadow(0 0 3px rgba(255,200,110,.4)); }
  50%     { filter: drop-shadow(0 0 14px rgba(255,200,110,.95)); }
}

/* debug boxes */
#stage.show-boxes .el { outline: 1px solid rgba(255,255,255,.25); }
#stage.show-boxes .el.cat-interactive { outline-color: #ff5050; }
#stage.show-boxes .el.cat-value { outline-color: #ffc828; }
#stage.show-boxes .el.cat-dynamic { outline-color: #b450ff; }

#hud {
  position: fixed; left: 12px; bottom: 12px; display: flex; gap: 16px; align-items: center;
  background: rgba(0,0,0,.55); padding: 8px 14px; border-radius: 10px; font-size: 13px;
  backdrop-filter: blur(6px);
}
#hud label { display: flex; gap: 6px; align-items: center; cursor: pointer; }
#hud-name { font-weight: 700; color: #8fd0ff; }