:root {
  --fg: #c8ffe9;
  --dim: #5f8f80;
  --accent: #00ffaa;
  --panel: rgba(4, 16, 12, 0.72);
  --edge: rgba(0, 255, 170, 0.25);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: radial-gradient(ellipse at center, #06140f 0%, #010403 75%); color: var(--fg); cursor: crosshair; }
#arena { position: fixed; inset: 0; width: 100vw; height: 100vh; }
.panel, #topbar, #foot, .swarm { position: fixed; z-index: 2; pointer-events: none; }
.panel { background: var(--panel); border: 1px solid var(--edge); padding: 10px 12px; backdrop-filter: blur(3px); box-shadow: 0 0 24px rgba(0, 255, 170, 0.07) inset; }
.label { font-size: 10px; letter-spacing: 0.14em; color: var(--dim); text-transform: uppercase; margin-bottom: 4px; }
.dim { color: var(--dim); }
b { color: var(--accent); font-weight: 600; }

#topbar { top: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: center; padding: 8px 14px; font-size: 13px; letter-spacing: 0.12em; border-bottom: 1px solid var(--edge); background: rgba(1, 8, 6, 0.85); }
.blink { color: #ff3b30; animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.threat b { color: inherit; }

.swarm { top: 44px; left: 50%; transform: translateX(-50%); background: #ff3b30; color: #fff; padding: 6px 18px; font-weight: 700; letter-spacing: 0.1em; animation: blink 0.8s steps(2) infinite; }
.swarm b { color: #fff; }
.hidden { display: none; }

#you { top: 52px; left: 12px; width: 260px; }
.you-name { font-size: 18px; color: #fff; }

#tiles { top: 52px; right: 12px; width: 340px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.tile .num { font-size: 20px; color: #fff; font-variant-numeric: tabular-nums; }
.tile.big { grid-column: span 2; }
.tile.big .num { font-size: 54px; color: var(--accent); text-shadow: 0 0 18px rgba(0, 255, 170, 0.6); line-height: 1; }

#server { bottom: 40px; right: 12px; width: 340px; font-size: 12px; }
.row { display: flex; justify-content: space-between; padding: 1px 0; }
.row.cost b { color: #ffcc00; }
#spark { width: 100%; height: 40px; color: var(--accent); margin-top: 6px; }
.fine { font-size: 9px; color: var(--dim); margin-top: 4px; }

#map { bottom: 40px; left: 12px; width: 464px; }
#globe { width: 440px; height: 220px; display: block; }
.countries { display: flex; flex-wrap: wrap; gap: 4px 10px; list-style: none; padding: 0; margin: 6px 0 0; font-size: 11px; }

#boards { top: 160px; left: 12px; width: 260px; font-size: 11px; display: grid; gap: 6px; }
#boards ol { margin: 0; padding-left: 18px; }

#ticker { bottom: 40px; left: 488px; right: 364px; font-size: 11px; max-height: 270px; overflow: hidden; }
#feed { list-style: none; margin: 0; padding: 0; }
#feed li { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#feed li:first-child { color: #fff; }

#foot { bottom: 0; left: 0; right: 0; padding: 6px 14px; font-size: 10px; color: var(--dim); background: rgba(1, 8, 6, 0.85); border-top: 1px solid var(--edge); pointer-events: auto; }
#foot a { color: var(--accent); }
#foot button { float: right; background: none; border: 1px solid var(--edge); color: var(--fg); font: inherit; padding: 1px 8px; cursor: pointer; }
body.nohud .panel, body.nohud #topbar { display: none; }

@media (max-width: 1100px) {
  #ticker, #boards { display: none; }
  #map { width: 300px; }
  #globe { width: 276px; height: 138px; }
}
@media (max-width: 700px) {
  #map, #server, #you { display: none; }
  #tiles { left: 8px; right: 8px; width: auto; top: 46px; grid-template-columns: repeat(3, 1fr); font-size: 10px; }
  .tile.big { grid-column: span 3; }
  .tile .num { font-size: 14px; }
  .tile.big .num { font-size: 36px; }
  #topbar .clock, #topbar .dim { display: none; }
  .swarm { top: auto; bottom: 34px; font-size: 11px; white-space: nowrap; }
}