* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0; height: 100%; overflow: hidden;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: #a8d5a2;
  user-select: none;
}
#map {
  position: absolute; inset: 0; z-index: 1;
  background: #a8d5a2;
}
/* dämpa kartan lite så spelfigurerna syns */
.leaflet-container { background: #aadaa0; }
#game {
  position: absolute; inset: 0; z-index: 400;
  pointer-events: none;
}

#hud {
  position: absolute; top: 10px; left: 10px; z-index: 500;
  display: flex; flex-direction: column; gap: 8px;
}
.panel {
  background: rgba(20, 30, 20, 0.82);
  color: #eafbe7;
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 14px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.25);
  backdrop-filter: blur(3px);
}
.panel .row { display: flex; justify-content: space-between; align-items: center; gap: 18px; }
.panel b { color: #ffe97a; }
.bar { width: 90px; height: 10px; background: rgba(255,255,255,0.18); border-radius: 6px; overflow: hidden; }
.bar i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg,#e53935,#ff7043); transition: width .15s; }
.bar i.car { background: linear-gradient(90deg,#42a5f5,#7e57c2); }
#statePanel #modeLine { font-weight: 700; }
.hint { color: #ffd76a; font-size: 13px; margin-top: 4px; min-height: 16px; }
.buffs { color: #8ef; font-size: 13px; margin-top: 2px; min-height: 16px; font-weight: 600; }

#scoreboard {
  position: absolute; top: 10px; right: 10px; z-index: 500;
  min-width: 150px; font-size: 13px;
}
#scoreboard .sb-row { display: flex; justify-content: space-between; gap: 10px; padding: 2px 0; }
#scoreboard .sb-me { color: #ffe97a; font-weight: 700; }
#scoreboard h4 { margin: 0 0 6px; font-size: 13px; opacity: .8; }

#controls {
  position: absolute; bottom: 10px; left: 10px; z-index: 500;
  font-size: 12px; line-height: 1.5; max-width: 280px; opacity: .92;
}
#controls b { color: #ffe97a; }

#startOverlay {
  position: absolute; inset: 0; z-index: 1000;
  background: radial-gradient(circle at 50% 40%, #2e7d32, #14331a);
  display: flex; align-items: center; justify-content: center;
}
.startBox {
  background: rgba(0,0,0,0.35);
  padding: 32px 40px; border-radius: 20px; text-align: center;
  color: #fff; max-width: 460px;
}
.startBox h1 { margin: 0 0 8px; font-size: 34px; }
.startBox p { margin: 8px 0; opacity: .95; }
.startBox .small { font-size: 13px; opacity: .8; }
#nameInput {
  display: block; width: 100%; margin: 16px 0 12px;
  padding: 12px 14px; font-size: 16px; border-radius: 10px;
  border: none; text-align: center;
}
#startBtn {
  padding: 12px 28px; font-size: 18px; font-weight: 700;
  background: #ffd54a; color: #263312; border: none;
  border-radius: 12px; cursor: pointer;
}
#startBtn:hover { background: #ffe27a; }

#toast {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  z-index: 800; font-size: 40px; font-weight: 800; color: #fff;
  text-shadow: 0 2px 8px rgba(0,0,0,.6); pointer-events: none;
  opacity: 0; transition: opacity .2s;
}
#toast.show { opacity: 1; }