:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #0a1018;
  color: #f7f1df;
}

* { box-sizing: border-box; }
html, body, #map3d { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { background: radial-gradient(circle at 50% 35%, #263b35, #081019 70%); }
button, a { font: inherit; }

#diagonal3d { display: block; width: 100%; height: 100%; touch-action: none; outline: none; }

.topbar {
  position: fixed;
  z-index: 2;
  top: max(14px, env(safe-area-inset-top));
  left: max(14px, env(safe-area-inset-left));
  right: max(14px, env(safe-area-inset-right));
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 11px 14px;
  border: 1px solid rgba(255, 239, 190, .2);
  border-radius: 16px;
  background: rgba(8, 13, 20, .78);
  box-shadow: 0 16px 50px rgba(0, 0, 0, .28);
  backdrop-filter: blur(14px);
}

.topbar h1 { margin: 1px 0 0; font: 750 clamp(18px, 2.1vw, 28px)/1.05 Georgia, serif; letter-spacing: -.02em; }
.eyebrow { margin: 0; color: #d9b95e; font-size: 11px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.back, .actions button {
  min-height: 39px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 10px;
  background: rgba(255, 255, 255, .08);
  color: #fff7df;
  padding: 9px 12px;
  font-size: 13px;
  font-weight: 750;
  text-decoration: none;
  cursor: pointer;
}
.back:hover, .actions button:hover { background: rgba(255, 255, 255, .15); }
.actions { display: flex; gap: 7px; }
.actions button[aria-pressed="true"] { border-color: #e3bd4f; background: rgba(189, 143, 31, .32); }

.mapkey {
  position: fixed;
  z-index: 2;
  left: max(16px, env(safe-area-inset-left));
  bottom: max(46px, calc(env(safe-area-inset-bottom) + 42px));
  display: grid;
  gap: 7px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 13px;
  background: rgba(7, 12, 18, .72);
  backdrop-filter: blur(12px);
  font-size: 12px;
}
.mapkey div { display: grid; grid-template-columns: 9px auto; column-gap: 8px; align-items: center; }
.mapkey i { grid-row: 1 / 3; width: 9px; height: 30px; border-radius: 5px; }
.mapkey b { color: #fff7df; }
.mapkey span { color: #aab7bd; }
.mapkey .army { background: #315fda; }
.mapkey .horde { background: #a82d2a; }
.mapkey .neutral { background: #d5b86d; }

.hint, .stats {
  position: fixed;
  z-index: 2;
  bottom: max(13px, env(safe-area-inset-bottom));
  color: #aeb9bf;
  font-size: 11px;
  letter-spacing: .02em;
  text-shadow: 0 1px 3px #000;
}
.hint { left: 50%; transform: translateX(-50%); white-space: nowrap; }
.stats { right: max(16px, env(safe-area-inset-right)); font-variant-numeric: tabular-nums; }
.error { position: fixed; inset: 50% auto auto 50%; transform: translate(-50%, -50%); max-width: 420px; padding: 22px; border-radius: 14px; background: #311b1a; border: 1px solid #a84d42; text-align: center; }

@media (max-width: 760px) {
  .topbar { grid-template-columns: auto 1fr; align-items: center; }
  .actions { grid-column: 1 / -1; }
  .actions button { flex: 1; min-height: 35px; padding: 7px 8px; font-size: 12px; }
  .mapkey { bottom: max(40px, calc(env(safe-area-inset-bottom) + 34px)); }
  .hint { display: none; }
  .stats { left: 16px; right: auto; }
}

@media (max-width: 480px) {
  .topbar { gap: 9px; padding: 9px; }
  .topbar h1 { font-size: 17px; }
  .eyebrow { font-size: 9px; }
  .back { min-height: 35px; padding: 7px 9px; }
  .mapkey { display: none; }
}