* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #06080d; overflow: hidden; }
body {
  font-family: "Trebuchet MS", "Segoe UI", Verdana, Arial, sans-serif;
  font-size: 12px;
  font-weight: bold;
  color: #eaf1f5;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.75);
  user-select: none;
  -webkit-user-select: none;
  --panel: rgba(16, 20, 30, 0.93);
  --edge: #3a5470;
  --edge-soft: #2a3346;
  --slot: #0f1421;
  --accent: #57d6c4;
  --gold: #f2c058;
}
button { font: inherit; }
.hidden { display: none !important; }

#game { position: relative; width: 100%; height: 100%; }
/* Cinematic vignette so the world reads as its own moody place, not flat daylight. */
#game::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 5; box-shadow: inset 0 0 220px 30px rgba(6, 10, 18, 0.6), inset 0 0 60px 0 rgba(6, 10, 18, 0.25); }
#view { position: absolute; inset: 0; width: 100%; height: 100%; display: block; image-rendering: pixelated; image-rendering: crisp-edges; cursor: default; }
#view.use-mode { cursor: crosshair; }
#overlay { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 6; }

/* World labels */
.label { position: absolute; transform: translate(-50%, -100%); white-space: nowrap; text-align: center; pointer-events: none; text-shadow: 0 0 3px #05070c, 0 1px 2px #05070c; }
.label .name { font-size: 11px; }
.label .name.player { color: #fff; }
.label .name.monster { color: #ffd54a; }
.label .name.npc { color: #7ad0ff; }
.label .name.me { color: #7fff7f; }
.label .name.skull::before { content: "\2620"; display: inline-block; font-size: 21px; line-height: 1; margin-right: 5px; vertical-align: -3px; color: #fff; text-shadow: -1px -1px 0 #281d20, 1px -1px 0 #281d20, -1px 1px 0 #281d20, 1px 1px 0 #281d20; }
.label .hpbar { width: 34px; height: 4px; margin: 1px auto 0; background: #400; border: 1px solid #000; }
.label .hpbar div { height: 100%; background: #4c4; }
.label .say { color: #ffff40; font-size: 12px; max-width: 220px; white-space: normal; margin-bottom: 2px; }
.label .say.spell { color: #ff9040; }
.splat { position: absolute; transform: translate(-50%, -50%); width: 24px; height: 24px; border-radius: 50%; background: #c00; color: #fff; font-size: 11px; line-height: 24px; text-align: center; pointer-events: none; border: 1px solid #400; }
.float { position: absolute; transform: translate(-50%, -50%); color: #ffd54a; pointer-events: none; font-size: 12px; animation: floatup 1.2s ease-out forwards; }
@keyframes floatup { from { opacity: 1; margin-top: 0; } to { opacity: 0; margin-top: -40px; } }