:root {
  --ink: #fff7ee;
  --panel: rgba(24, 16, 12, .86);
  --line: rgba(255, 240, 225, .22);
  --good: #6fe09a;
  --bad: #ff8a7a;
  --alert: #ffcf5a;
  --ice: #9fe8ff;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #1a110c; color: var(--ink); font: 17px/1.45 system-ui, "Segoe UI", sans-serif; }
#stage { position: fixed; inset: 0; }
#view, #specks, #labels { position: absolute; inset: 0; width: 100%; height: 100%; }
#view { display: block; cursor: pointer; touch-action: none; }
#specks, #labels { pointer-events: none; }
#flat { position: absolute; top: 50%; left: 50%; height: min(100vh, 100vw); width: min(100vh, 100vw); transform: translate(-50%, -50%); cursor: pointer; touch-action: none; }
.mode-3d #flat, .mode-2d #view, .mode-2d #minimap, .mode-2d #labels, .mode-2d #specks { display: none; }
body:not(.mode-3d):not(.mode-2d) #flat, body:not(.mode-3d):not(.mode-2d) .hud, body:not(.mode-3d):not(.mode-2d) #minimap { visibility: hidden; }

/* The storm: a coloured edge, so it is clear even with motion turned off. */
body.storm #stage::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 8px rgba(111, 224, 154, .7); }
body.storm.outside #stage::after { box-shadow: inset 0 0 0 10px rgba(255, 110, 90, .9), inset 0 0 120px rgba(255, 255, 255, .35); }

.lbl { position: absolute; transform: translate(-50%, -100%); padding: 1px 8px; border-radius: 999px; background: rgba(24, 16, 12, .72); font-size: 14px; font-weight: 600; white-space: nowrap; }
.lbl.big { font-size: 16px; color: #0f2417; background: var(--good); }
.lbl.ice { color: #0c2a35; background: var(--ice); }
.lbl.river { color: #fff; background: #3b6fe0; }

.hud { position: absolute; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); }
.top-left { top: 12px; left: 12px; width: 230px; }
.hud p { margin: 0; }
.day { font-weight: 700; margin-bottom: 6px !important; }
.row { display: flex; justify-content: space-between; gap: 12px; }
.row strong { font-variant-numeric: tabular-nums; }
.good { color: var(--good); }
.bad, .warn { color: var(--bad); }
.warn { font-size: 14px; }
.bar { height: 8px; margin: 4px 0 8px; border-radius: 4px; background: rgba(255, 255, 255, .18); overflow: hidden; }
#timeFill { height: 100%; width: 100%; background: var(--alert); }

button { font: inherit; font-weight: 700; color: #1a110c; background: var(--alert); border: 0; border-radius: 12px; padding: 10px 18px; min-height: 44px; cursor: pointer; }
button:hover { filter: brightness(1.08); }
button:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
button:disabled { background: #6b625c; color: #d8cfc8; cursor: not-allowed; }
#robotBtn { width: 100%; margin-top: 10px; }
#langBtn { position: absolute; top: 12px; right: 12px; z-index: 2; min-height: 40px; padding: 6px 14px; font-size: 15px; color: var(--ink); background: var(--panel); border: 1px solid var(--line); }

.banner { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); width: min(560px, calc(100vw - 280px)); padding: 12px 18px; border-radius: 14px; border: 3px solid var(--line); background: var(--panel); text-align: center; }
.banner h2 { margin: 0; font-size: 22px; }
.banner p { margin: 4px 0 0; }
.banner p:empty { display: none; }
.banner.alert { border-color: var(--alert); }
.banner.alert h2 { color: var(--alert); }
.banner.danger { border-color: var(--bad); background: rgba(90, 20, 12, .92); }
.banner.safe { border-color: var(--good); }
.banner.hint h2 { font-size: 18px; font-weight: 600; }

#minimap { position: absolute; right: 12px; bottom: 34px; width: 190px; height: 190px; border: 2px solid var(--line); border-radius: 12px; cursor: pointer; touch-action: none; }
#sources { position: absolute; left: 12px; right: 12px; bottom: 6px; margin: 0; font-size: 11px; opacity: .8; text-shadow: 0 1px 2px #000; pointer-events: none; }

#panel { position: absolute; inset: 0; display: grid; place-items: center; padding: 16px; background: rgba(10, 6, 4, .6); }
#panel[hidden], .banner[hidden] { display: none; }
#panelBody { width: min(620px, 100%); max-height: 100%; overflow: auto; padding: 24px 28px; border: 1px solid var(--line); border-radius: 18px; background: var(--panel); text-align: center; }
#panelBody h1 { margin: 0 0 10px; font-size: 30px; }
#panelBody p { margin: 8px 0; font-size: 19px; }
#panelBody .note { font-size: 15px; opacity: .85; }
#panelBody button { margin-top: 14px; font-size: 20px; }

@media (max-width: 720px) {
  .top-left { width: 180px; font-size: 14px; }
  .banner { top: auto; bottom: 240px; width: calc(100vw - 24px); }
  #minimap { width: 130px; height: 130px; }
}