/* Reset, page shell and the full-screen post-processing overlays. */

*{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;height:100%;overflow:hidden;background:#05070a;
  /* Stops Android pull-to-refresh and iOS rubber-banding. Without it a downward
     drag on the look surface could reload the page and destroy the run. */
  overscroll-behavior:none;
  /* manipulation kills double-tap-to-zoom while leaving scrolling alive for the
     menu pages, which still need to scroll on a short screen. */
  touch-action:manipulation}
body{font-family:"Trebuchet MS","Segoe UI",Arial,sans-serif;color:#e8e2d2;user-select:none;-webkit-user-select:none;
  /* Long-pressing anything in the game raised the iOS callout ("Copy", "Save
     Image") over a soldier portrait or the canvas. */
  -webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
canvas{display:block}
/* The canvas must never receive a browser gesture — no pan, no pinch, no
   double-tap zoom. `none` here rather than `manipulation` because the game
   handles every touch on it itself. */
#root{position:fixed;inset:0;touch-action:none}
#root canvas{touch-action:none}
/* ---------- post fx overlays ---------- */
#vignette{position:fixed;inset:0;pointer-events:none;z-index:40;
  background:radial-gradient(ellipse at center,transparent 42%,rgba(0,0,0,.55) 82%,rgba(0,0,0,.92) 100%)}
#chroma{position:fixed;inset:0;pointer-events:none;z-index:41;opacity:.05;
  background:linear-gradient(90deg,rgba(255,0,60,.5),transparent 30%,transparent 70%,rgba(0,180,255,.5))}
#grain{position:fixed;inset:-100px;pointer-events:none;z-index:42;opacity:.07}
#dmg-vignette{position:fixed;inset:0;pointer-events:none;z-index:43;opacity:0;transition:opacity .1s;
  background:radial-gradient(ellipse at center,transparent 30%,rgba(160,0,0,.55) 75%,rgba(120,0,0,.85) 100%)}
#threat-vignette{position:fixed;inset:-4%;pointer-events:none;z-index:42;opacity:0;transition:opacity .08s linear;
  background:
    radial-gradient(ellipse at center,transparent 33%,rgba(26,0,0,.12) 58%,rgba(80,0,0,.46) 100%),
    repeating-radial-gradient(ellipse at center,transparent 0 48%,rgba(110,15,5,.08) 49%,transparent 51%);
  transform:scale(1.02)}
#heal-flash{position:fixed;inset:0;pointer-events:none;z-index:43;opacity:0;transition:opacity .5s;
  background:radial-gradient(ellipse at center,transparent 40%,rgba(80,200,120,.25) 100%)}
#dmg-arc{position:fixed;left:50%;top:50%;width:340px;height:340px;margin:-170px 0 0 -170px;pointer-events:none;z-index:44;opacity:0}
#dmg-arc .arcseg{position:absolute;left:50%;top:50%;width:120px;height:26px;margin:-150px 0 0 -60px;border-radius:50%;
  background:radial-gradient(ellipse at 50% 100%,rgba(255,30,20,.9),transparent 70%);transform-origin:50% 150px}
#flash{position:fixed;inset:0;pointer-events:none;z-index:45;opacity:0;background:#fff}
#local-mode-warning{position:fixed;z-index:95;left:50%;top:16px;display:none;width:min(680px,calc(100vw - 28px));
  transform:translateX(-50%);padding:12px 42px 12px 16px;border:1px solid rgba(216,161,80,.65);
  border-left:4px solid #b74428;background:rgba(12,11,9,.96);box-shadow:0 10px 40px rgba(0,0,0,.8);
  color:#cfc6ae;font:700 12px/1.5 "Courier New",monospace;letter-spacing:.04em;text-transform:uppercase}
#local-mode-warning.show{display:block}
#local-mode-warning b{color:#f0d59b}
#local-mode-warning button{position:absolute;right:10px;top:7px;border:0;background:transparent;color:#cfc6ae;
  font:22px/1 Arial,sans-serif;cursor:pointer}