:root{
    --sky:#7ec8e8; --grass:#6abe30; --ink:#2b2117; --cream:#fff6e3;
    --red:#e84b4b; --yellow:#ffd23f; --green:#3fae4c; --warn:#f08c1d; --cold:#3f8fd2;
    --ua-b:#0a63c9; --ua-y:#ffd500;
    --px:'Press Start 2P','Courier New',monospace;
  }
  *{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
  html,body{height:100%}
  body{font-family:var(--px);color:var(--ink);background:var(--sky);overflow:hidden}
  canvas{image-rendering:pixelated;display:block}

  #bg{position:fixed;inset:0;width:100%;height:100%;z-index:0;object-fit:cover}
  .cloud{position:fixed;z-index:1;opacity:.95;pointer-events:none}
  .cloud.c1{top:6%;animation:drift 38s linear infinite}
  .cloud.c2{top:14%;animation:drift 55s linear infinite reverse}
  @keyframes drift{from{left:-160px}to{left:110%}}

  .screen{position:fixed;inset:0;z-index:5;display:flex;flex-direction:column;
    align-items:center;justify-content:center;padding:clamp(10px,2vmin,22px);overflow:auto}
  .screen.hidden{display:none}

  .panel{background:var(--cream);border:3px solid var(--ink);
    box-shadow:5px 5px 0 rgba(43,33,23,.45);padding:18px 16px;width:100%;max-width:440px}

  .pbtn{display:inline-block;font-family:var(--px);
    font-size:clamp(10px,1.4vmin,12px);letter-spacing:1px;
    padding:14px 18px;cursor:pointer;color:var(--cream);background:var(--green);
    border:3px solid var(--ink);box-shadow:0 4px 0 var(--ink);
    transition:transform .05s,box-shadow .05s;text-transform:uppercase}
  .pbtn:active{transform:translateY(4px);box-shadow:0 0 0 var(--ink)}
  .pbtn.yellow{background:var(--yellow);color:var(--ink)}
  .pbtn.block{display:block;width:100%}
  .pbtn.block + .pbtn.block{margin-top:12px}
  .linkbtn{background:none;border:none;font-family:var(--px);font-size:8px;color:#5a4a38;
    margin-top:12px;cursor:pointer;border-bottom:2px dotted #5a4a38;padding:2px}

  .brand{margin-top:14px;font-size:clamp(7px,1vmin,9px);color:#5a4a38;letter-spacing:1px;
    text-align:center;line-height:2}
  .brand a{color:#5a4a38;text-decoration:none;border-bottom:2px dotted #5a4a38}
  .brand a:active,.brand a:hover{color:var(--red);border-color:var(--red)}
  .screen > .brand{background:rgba(255,246,227,.85);padding:6px 12px;border:2px solid var(--ink)}

  /* ---------- title ---------- */
  #titleScreen .sub{font-size:clamp(8px,1.4vmin,11px);color:var(--ink);
    text-shadow:2px 2px 0 var(--cream);margin:16px 0 24px;letter-spacing:1px;
    text-align:center;line-height:2.1}
  #logoCv{max-width:min(92vw,560px);height:auto;animation:bob 2.4s steps(2) infinite}
  @keyframes bob{50%{transform:translateY(-6px)}}
  #titleScreen .pbtn{animation:pulse 1.4s steps(2) infinite;min-width:min(300px,80vw)}
  @keyframes pulse{50%{filter:brightness(1.12)}}
  #heroPutin{margin:4px 0 16px;animation:bob 1.8s steps(2) infinite;
    box-shadow:5px 5px 0 rgba(43,33,23,.45)}

  /* ---------- loading ---------- */
  #loadPanel .lbl{font-size:9px;line-height:2.1;min-height:40px;text-align:center}
  #bar{height:26px;border:3px solid var(--ink);background:#e8dcc4;margin-top:14px;overflow:hidden}
  #barFill{height:100%;width:0%;
    background:repeating-linear-gradient(90deg,var(--green) 0 12px,#5cc468 12px 24px)}
  #barPct{font-size:9px;text-align:center;margin-top:10px}

  /* ---------- campaign ---------- */
  #campScreen{justify-content:flex-start;gap:clamp(8px,1.6vmin,18px);padding-top:clamp(12px,3vmin,30px)}
  #logoCv2{max-width:min(60vw,300px);height:auto}
  #rusWrap{width:min(96vw,980px);position:relative}
  #rusCv{width:100%;height:auto;cursor:pointer}
  #rusWrap.shake{animation:shake .35s steps(2)}
  #campPanel{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;justify-content:center;
    background:var(--cream);border:3px solid var(--ink);
    box-shadow:4px 4px 0 rgba(43,33,23,.45);
    padding:12px 14px;max-width:min(96vw,720px)}
  #campStats{font-size:clamp(8px,1.3vmin,10px);line-height:2;text-align:center}
  #campStats b{color:var(--ua-b);font-weight:normal}
  #campBar{width:min(60vw,300px);height:16px;border:3px solid var(--ink);background:#e8dcc4;overflow:hidden}
  #campFill{height:100%;width:0%;background:linear-gradient(180deg,var(--ua-b) 0 50%,var(--ua-y) 50% 100%)}
  #campBtns{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}

  /* ---------- game ---------- */
  #gameScreen{justify-content:center;padding:0}
  #mapWrap{position:relative;width:100vw;height:100dvh}
  #mapCv{width:100%;height:100%;transition:filter .4s}
  #mapWrap.night #mapCv{filter:brightness(.38) saturate(.55)}

  #hud{position:absolute;top:0;left:0;right:0;z-index:8;display:flex;
    justify-content:space-between;align-items:center;padding:10px;
    font-size:clamp(8px,1.2vmin,10px)}
  #hud .chip{background:var(--cream);border:2px solid var(--ink);
    box-shadow:2px 2px 0 rgba(43,33,23,.4);padding:6px 8px;line-height:1}
  #secChip{color:var(--red)}
  #hearts{color:var(--red);letter-spacing:2px;font-size:clamp(10px,1.5vmin,13px)}
  #hearts .off{color:#c9bda4}
  #sndChip{cursor:pointer;user-select:none}

  #signal{position:absolute;left:8px;right:8px;bottom:10px;z-index:8;
    background:var(--cream);border:3px solid var(--ink);
    box-shadow:3px 3px 0 rgba(43,33,23,.4);
    font-size:clamp(7px,1.1vmin,9px);line-height:1.9;letter-spacing:1px;padding:9px 10px;
    text-align:center;min-height:38px;display:flex;align-items:center;justify-content:center}
  #signal.hot{border-color:var(--red);color:var(--red)}
  #signal.warm{border-color:var(--warn);color:var(--warn)}
  #signal.cold{border-color:var(--cold);color:var(--cold)}
  #signal.found{border-color:var(--green);color:var(--green)}

  .bunker{position:absolute;z-index:6;background:none;border:none;cursor:pointer;
    padding:0;transform:translate(-50%,-50%);
    display:flex;flex-direction:column;align-items:center;gap:2px;transition:filter .35s}
  .bunker canvas{width:100%;height:auto;filter:drop-shadow(2px 3px 0 rgba(43,33,23,.25))}
  .bunker:active canvas{transform:scale(.9)}
  .bunker.done{pointer-events:none}
  .bunker.dark{filter:brightness(.2)}
  .bunker .tag{font-family:var(--px);font-size:7px;background:var(--cream);
    border:2px solid var(--ink);padding:3px 4px;visibility:hidden;white-space:nowrap}
  .bunker .tag.show{visibility:visible}
  .bunker .tag.hot{color:var(--red);border-color:var(--red)}
  .bunker .tag.warm{color:var(--warn);border-color:var(--warn)}
  .bunker .tag.cold{color:var(--cold);border-color:var(--cold)}
  .bunker .tag.win{color:var(--green);border-color:var(--green)}
  .bunker.shake{animation:shake .35s steps(2)}
  @keyframes shake{25%{margin-left:-3px}50%{margin-left:3px}75%{margin-left:-2px}}
  #mapWrap.boom{animation:boomShake .45s steps(5)}
  @keyframes boomShake{
    20%{transform:translate(-6px,4px)}40%{transform:translate(6px,-5px)}
    60%{transform:translate(-4px,-3px)}80%{transform:translate(3px,3px)}}
  .bunker.pop canvas{animation:pop .45s steps(3)}
  @keyframes pop{0%{transform:scale(.5)}60%{transform:scale(1.3)}100%{transform:scale(1)}}

  .smoke{position:absolute;top:-4px;left:26%;width:7px;height:7px;background:#d8dedb;
    animation:smk 1.3s steps(4) infinite;z-index:7;pointer-events:none}
  .smoke::after{content:"";position:absolute;left:7px;top:-7px;width:5px;height:5px;
    background:#eaf0ed;animation:smk 1.3s steps(4) infinite .45s}
  @keyframes smk{0%{transform:translateY(0);opacity:.95}100%{transform:translateY(-16px);opacity:0}}

  #ovCard{position:absolute;inset:0;z-index:12;display:flex;align-items:center;
    justify-content:center;background:rgba(43,33,23,.35);padding:14px}
  #ovCard.hidden{display:none}
  #ovCard .panel{max-width:340px;text-align:center}
  #ovCard h2{font-size:clamp(13px,2vmin,18px);margin-bottom:10px;line-height:1.5}
  #ovCard h2.good{color:var(--green)} #ovCard h2.bad{color:var(--red)} #ovCard h2.neutral{color:var(--red)}
  #ovCard .mods{font-size:8px;line-height:2.2;color:#5a4a38;margin-bottom:4px}

  /* ---------- victory ---------- */
  #vicScreen .panel{text-align:center;max-width:min(96vw,640px)}
  #vicTitle{font-size:clamp(15px,2.6vmin,24px);margin-bottom:8px}
  #vicTitle span{color:var(--ua-b)} #vicTitle i{color:#c9a400;font-style:normal}
  #vicSub{font-size:9px;line-height:2;color:#5a4a38;margin:8px 0 14px}
  #vicMap{width:100%;max-width:560px;margin:0 auto 8px}

  .toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:99;
    background:var(--ink);color:var(--cream);font-size:8px;font-family:var(--px);
    padding:10px 14px;border:2px solid var(--cream);opacity:0;pointer-events:none;transition:opacity .2s}
  .toast.show{opacity:1}