* { margin: 0; padding: 0; box-sizing: border-box; }

/* Notch / Dynamic Island / home-indicator insets. These resolve to 0 on
   desktop and non-notched devices, so the same values are safe everywhere. */
:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
}

html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  background: #6ec9e8;
  font-family: 'Press Start 2P', monospace;
  -webkit-user-select: none; user-select: none;
}

#app { position: fixed; inset: 0; }
/* Saturate/brighten the rendered scene for extra "pop" — device-independent,
   unlike a Display P3 buffer. Tune the numbers to taste. */
#app canvas { display: block; filter: saturate(1.2) brightness(1.15); }

/* ---------- Minecraft-style panels & buttons ---------- */
.mc-panel {
  background: rgba(58, 58, 58, 0.92);
  border: 3px solid;
  border-color: #9c9c9c #2b2b2b #2b2b2b #9c9c9c;
  outline: 2px solid #1a1a1a;
  color: #fff;
  padding: 10px 12px;
  font-size: 10px;
  text-shadow: 2px 2px 0 #1a1a1a;
  image-rendering: pixelated;
}

.mc-btn {
  font-family: 'Press Start 2P', monospace;
  font-size: 10px;
  color: #fff;
  text-shadow: 2px 2px 0 #3a3a3a;
  background: linear-gradient(#8a8a8a, #6e6e6e);
  border: 3px solid;
  border-color: #c6c6c6 #3f3f3f #3f3f3f #c6c6c6;
  outline: 2px solid #1a1a1a;
  padding: 10px 12px;
  cursor: pointer;
}
.mc-btn:hover { background: linear-gradient(#9a9aba, #7e7e9e); }
.mc-btn:active { border-color: #3f3f3f #c6c6c6 #c6c6c6 #3f3f3f; }
.mc-btn.on { background: linear-gradient(#5fae3f, #46892c); }
.mc-btn.small-btn { padding: 10px 12px; min-width: 42px; }

/* ---------- Layout ---------- */
#title-bar {
  position: fixed; top: calc(10px + var(--safe-top)); left: 50%; transform: translateX(-50%);
  text-align: center; z-index: 10; pointer-events: none;
}
#game-title .world-arrow, #world-name {
  pointer-events: auto; cursor: pointer;
}
.world-arrow { color: #ffe54c; }
.world-arrow:hover { color: #ffffff; }
#game-title {
  font-size: 20px; color: #fff;
  text-shadow: 3px 3px 0 #1a1a1a, -1px -1px 0 #1a1a1a, 1px -1px 0 #1a1a1a, -1px 1px 0 #1a1a1a;
  letter-spacing: 2px;
}
#game-subtitle {
  margin-top: 6px; font-size: 8px; color: #ffe54c;
  text-shadow: 2px 2px 0 #1a1a1a;
}

#stats-panel {
  position: fixed; top: calc(10px + var(--safe-top)); left: calc(10px + var(--safe-left)); z-index: 10;
  min-width: 230px;
}
#stats-panel.slim { min-width: 175px; padding: 8px 10px; }

#weapon-dock {
  position: fixed; right: calc(10px + var(--safe-right)); top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 10px; z-index: 10;
}
.weapon-btn { font-size: 20px; padding: 10px; min-width: 54px; line-height: 1; }
.weapon-btn img { display: block; margin: 0 auto; width: 32px; height: 32px; image-rendering: pixelated; }
.weapon-btn.on {
  background: linear-gradient(#caa53d, #9a7a20);
  outline-color: #ffe54c;
}
.stat-row { display: flex; justify-content: space-between; gap: 12px; margin: 6px 0; }
.stat-row.small { font-size: 8px; opacity: 0.85; }
.stat-label { color: #c9c9c9; }
.stat-value { color: #ffe54c; }
.stat-value.mode-chaos { color: #ff5a3c; }
.stat-value.mode-disc { color: #6dff5a; }
.stat-divider { height: 2px; background: #2b2b2b; border-bottom: 1px solid #777; margin: 8px 0; }
.congestion-bar {
  height: 10px; margin: 4px 0 8px;
  background: #222; border: 2px solid #1a1a1a;
}
#cong-fill {
  height: 100%; width: 0%;
  background: #6dff5a;
  transition: width 0.3s, background 0.3s;
}

#controls-panel {
  position: fixed; top: calc(10px + var(--safe-top)); right: calc(10px + var(--safe-right)); z-index: 10;
  display: flex; flex-direction: column; gap: 8px; align-items: flex-end;
}
#controls-panel > * { pointer-events: auto; }

#left-controls {
  position: fixed; top: calc(96px + var(--safe-top)); left: calc(10px + var(--safe-left)); z-index: 10;
}
#btn-night.on { background: linear-gradient(#2c3e6b, #1a2747); }
#traffic-vol { display: flex; gap: 4px; margin-top: 6px; }
#traffic-vol .vol-btn { padding: 8px 6px; min-width: 34px; }
#blast-counter { font-size: 11px; color: #ffb13c; }
#stat-blast { color: #fff; }

/* ---------- Brawl mode ---------- */
#brawl-ui { display: none; }
body.brawl #brawl-ui { display: block; }
body.brawl #stats-panel, body.brawl #controls-panel, body.brawl #left-controls,
body.brawl #weapon-dock, body.brawl #title-bar { display: none; }

#brawl-top {
  position: fixed; top: calc(12px + var(--safe-top)); left: 50%; transform: translateX(-50%);
  z-index: 20; min-width: 300px; text-align: center;
}
#brawl-name { color: #ffe54c; font-size: 11px; margin-bottom: 8px; }
.hp-bar { height: 14px; background: #222; border: 2px solid #1a1a1a; }
#hp-fill { height: 100%; width: 100%; background: #6dff5a; transition: width 0.15s, background 0.3s; }

#btn-brawl-exit { position: fixed; top: calc(12px + var(--safe-top)); left: calc(12px + var(--safe-left)); z-index: 20; }

#brawl-dock {
  position: fixed; right: calc(10px + var(--safe-right)); top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 10px; z-index: 20;
}
.brawl-btn { font-size: 22px; padding: 10px; min-width: 56px; line-height: 1; }
.brawl-btn img { display: block; margin: 0 auto; width: 32px; height: 32px; image-rendering: pixelated; }
.brawl-btn.on { background: linear-gradient(#caa53d, #9a7a20); outline-color: #ffe54c; }

@media (max-width: 760px) {
  #brawl-top { min-width: 220px; }
  #brawl-name { font-size: 8px; }
}

/* ---------- Modal ---------- */
#info-modal {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(0,0,0,0.55);
  display: flex; align-items: center; justify-content: center;
}
#info-modal.hidden { display: none; }
.modal-box { max-width: 540px; width: calc(100% - 40px); padding: 22px; }
.modal-title { font-size: 14px; color: #ffe54c; margin-bottom: 14px; text-align: center; }
.modal-box p { font-size: 9px; line-height: 1.8; margin: 10px 0; color: #e8e8e8; }
.modal-box b { color: #ffe54c; }
.modal-hint { color: #9adcff !important; text-align: center; }
.modal-box .mc-btn { display: block; margin: 16px auto 0; }

/* ---------- Floating popups ---------- */
#fx-layer { position: fixed; inset: 0; pointer-events: none; z-index: 40; }
.popup {
  position: absolute; transform: translate(-50%, -50%);
  font-family: 'Press Start 2P', monospace;
  font-size: 13px; color: #ffe54c;
  text-shadow: 2px 2px 0 #1a1a1a;
  animation: popup-rise 1s ease-out forwards;
  white-space: nowrap;
}
.popup.bad { color: #9adcff; font-size: 9px; }
@keyframes popup-rise {
  0%   { opacity: 0; margin-top: 0; transform: translate(-50%,-50%) scale(0.5); }
  15%  { opacity: 1; transform: translate(-50%,-50%) scale(1.25); }
  30%  { transform: translate(-50%,-50%) scale(1); }
  100% { opacity: 0; margin-top: -60px; transform: translate(-50%,-90%) scale(1); }
}

/* ---------- Mobile ---------- */
@media (max-width: 760px) {
  #game-title { font-size: 13px; }
  #game-subtitle { font-size: 6px; }
  /* the congestion meter hogs precious space on phones */
  #stats-panel { display: none; }
  #left-controls { top: calc(64px + var(--safe-top)); }
  #controls-panel { top: calc(64px + var(--safe-top)); }
  .mc-btn { font-size: 8px; }
  #blast-counter { font-size: 9px; }
}