/* TANKS: Frontline — the HUD is paper too: hand-ruled boxes, marker type. */
:root{
  --paper:#fbfbfa; --ink:#2b2b2b; --pencil:#5a6472;
  --blue:#196db4; --red:#ee4648;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;background:var(--paper);
  font-family:"Patrick Hand",system-ui,sans-serif;color:var(--ink);
  -webkit-font-smoothing:antialiased;user-select:none}
#view{position:fixed;inset:0;width:100%;height:100%;display:block;cursor:crosshair}
.hidden{display:none !important}
.blue{color:var(--blue)} .red{color:var(--red)}
button,.btn{font:inherit;cursor:pointer;color:var(--ink);background:var(--paper);text-decoration:none;
  border:2px solid var(--ink);border-radius:14px 6px 16px 5px;padding:5px 14px;font-size:18px;display:inline-block}
button:hover,.btn:hover{background:#f0f0ec}
button.on{background:var(--ink);color:var(--paper)}
button.go{background:var(--blue);border-color:var(--blue);color:#fff;font-size:22px;padding:6px 26px}

/* ---- the sheets: start, pause, end, shop ---- */
#start,#pause,#end{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(251,251,250,.55);z-index:20;padding:16px}
.sheet{background:var(--paper);border:2.5px solid var(--ink);border-radius:22px 8px 26px 10px;
  box-shadow:4px 5px 0 rgba(43,43,43,.12);padding:22px 28px;max-width:640px;width:100%;
  max-height:calc(100vh - 32px);overflow:auto}
.menu{display:flex;flex-direction:column;gap:14px;text-align:center;align-items:center}
.menu.small{max-width:440px}
.logo{font-family:"Rock Salt",cursive;font-size:clamp(40px,8vw,64px);line-height:1.2;letter-spacing:2px}
.sub{font-size:22px;color:var(--pencil);margin-top:-10px}
.blurb{font-size:18px;line-height:1.35;max-width:52ch}
.opts{display:flex;flex-direction:column;gap:8px}
.opt{display:flex;align-items:center;gap:12px;justify-content:center;flex-wrap:wrap}
.opt>span{color:var(--pencil);width:90px;text-align:right}
.row{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.row button{font-size:16px;padding:3px 12px}
.keys{list-style:none;font-size:16px;color:var(--pencil);line-height:1.5}
.keys b{color:var(--ink)}
.foot{color:var(--pencil);font-size:14px}
.foot a{color:inherit}
#endtitle{font-family:"Rock Salt",cursive;font-size:clamp(40px,8vw,60px)}

/* ---- HUD ---- */
#hud{position:fixed;inset:0;pointer-events:none;z-index:5}
#cross,#hit{position:absolute;left:50%;top:50%;width:40px;height:40px;margin:-20px 0 0 -20px;
  fill:none;stroke:var(--ink);stroke-width:2.4;stroke-linecap:round}
#cross.red{stroke:var(--red)} #cross.blue{stroke:var(--blue)}
#hit{stroke:var(--red);stroke-width:3;opacity:0;transition:opacity .08s}
.aim{position:absolute;left:50%;top:calc(50% + 28px);transform:translateX(-50%);text-align:center;font-size:17px;
  background:rgba(251,251,250,.7);padding:0 8px;border-radius:6px}
.aim.blue{color:var(--blue)} .aim.red{color:var(--red)}
.aim i,.bar,#bases i{display:block;height:7px;border:1.6px solid currentColor;border-radius:4px;overflow:hidden;margin-top:2px}
.aim i b,.bar b,#bases i b{display:block;height:100%;background:currentColor}
.aim i{width:110px;margin:2px auto 0}
#prompt{position:absolute;left:50%;top:80%;transform:translateX(-50%);font-size:22px;
  background:rgba(251,251,250,.8);padding:0 10px;border-radius:8px;white-space:nowrap}
#prompt:empty{display:none}
#hurt{position:absolute;inset:0;opacity:0;
  box-shadow:inset 0 0 120px 30px rgba(238,70,72,.55)}

.box{position:absolute;bottom:18px;background:rgba(251,251,250,.86);border:2.4px solid var(--ink);
  border-radius:16px 6px 18px 6px;padding:6px 14px;min-width:200px}
#hpbox{left:18px;color:var(--blue)}
#hpbox.low{color:var(--red)}
#ammobox{right:18px;text-align:right}
.box .lab{font-size:15px;color:var(--pencil);display:block}
.box .big{font-size:34px;line-height:1.1;display:flex;justify-content:space-between;gap:20px;align-items:baseline}
#ammobox .big{justify-content:flex-end;color:var(--ink)}
.cred{font-size:22px;color:#c98a1e}
#lowpower{display:block;color:var(--red);font-size:14px;margin-top:3px}

#bases{position:absolute;left:14px;top:12px;display:flex;gap:12px;font-size:14px;
  background:rgba(251,251,250,.8);border:2px solid var(--ink);border-radius:12px 5px 14px 4px;padding:5px 10px}
#bases h4{font-size:16px;line-height:1.1}
#bases ul{list-style:none}
#bases li{width:110px;line-height:1.05;margin-bottom:3px}
#bases li i{height:5px;margin-top:1px}
#bases div:first-child{color:var(--blue)} #bases div:last-child{color:var(--red)}
#bases li span{color:var(--ink)}
#bases li.dead span{text-decoration:line-through;color:var(--pencil)}
#bases li.dead i{opacity:.3}

#mapbox{position:absolute;right:14px;top:12px;display:flex;flex-direction:column;align-items:flex-end;gap:6px}
#minimap{width:240px;height:134px;border:2px solid var(--ink);border-radius:4px;background:#f4f4f2}
#feed{list-style:none;font-size:15px;text-align:right}
#feed li{background:rgba(251,251,250,.8);padding:0 6px;border-radius:5px;margin-bottom:2px}
#feed li span{color:var(--pencil)}
#msgs{position:absolute;left:50%;top:12px;transform:translateX(-50%);list-style:none;text-align:center;font-size:19px}
#msgs li{background:rgba(251,251,250,.85);padding:0 10px;border-radius:6px;margin-bottom:3px}

#dead{position:absolute;left:50%;top:30%;transform:translateX(-50%);text-align:center;
  background:rgba(251,251,250,.88);border:2.4px solid var(--ink);border-radius:18px 6px 20px 6px;padding:10px 26px}
#dead h2{font-family:"Rock Salt",cursive;color:var(--red);font-size:30px}
#dead p{font-size:19px}
#deadcls b{font-weight:normal;border:1.6px solid var(--pencil);border-radius:8px;padding:0 6px;margin:0 3px;color:var(--pencil)}
#deadcls b.on{border-color:var(--blue);color:var(--blue)}

#score{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;gap:30px;
  background:rgba(251,251,250,.94);border:2.4px solid var(--ink);border-radius:18px 6px 20px 6px;padding:14px 24px;font-size:17px}
#score table{border-collapse:collapse}
#score th{color:var(--pencil);font-weight:normal;text-align:left;padding-right:14px}
#score td{padding-right:14px}
#score tr.me td{color:var(--blue);text-decoration:underline}

/* ---- the purchase terminal ---- */
#shop{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:15;max-width:720px}
.shead{display:flex;align-items:baseline;gap:14px}
.shead h3{font-family:"Rock Salt",cursive;font-size:24px;flex:1}
.shead button{font-size:15px;padding:0 9px}
#shop h4{font-size:18px;margin:12px 0 6px;color:var(--pencil);font-weight:normal}
#shop h4 small{font-size:14px}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.card{text-align:left;display:grid;grid-template-columns:auto 1fr auto;gap:0 8px;align-items:baseline;padding:6px 10px}
.card .k,.refill .k{color:var(--pencil);font-size:15px}
.card b{font-weight:normal;font-size:19px}
.card .p{color:#c98a1e}
.card small{grid-column:1/-1;color:var(--pencil);font-size:14px;line-height:1.2}
.card.no{opacity:.5}
.refill{margin-top:10px;width:100%;font-size:16px}
.warn{color:var(--red)}
#shopmsg{margin-top:8px;min-height:1.2em;color:var(--blue)}

@media (max-width:720px){
  .grid{grid-template-columns:1fr}
  #bases{display:none}
  #minimap{width:160px;height:89px}
}

/* ---- paper grain over the whole view, so the 3D reads as printed on a page ---- */
#grain{position:fixed;inset:0;pointer-events:none;z-index:4;opacity:.22;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45  0 0 0 0 .44  0 0 0 0 .4  0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  box-shadow:inset 0 0 160px rgba(90,100,114,.18)}
#hurtdir{position:absolute;left:50%;top:50%;width:240px;height:240px;transform:translate(-50%,-50%);
  fill:none;stroke:var(--red);stroke-width:4;stroke-linecap:round;opacity:0}
#killtext{position:absolute;left:50%;top:calc(50% - 52px);transform:translateX(-50%);font-family:"Rock Salt",cursive;
  font-size:18px;color:var(--red);opacity:0}
#killtext.head{font-size:22px}
#mark{position:absolute;transform:translate(-50%,-100%);text-align:center;color:var(--blue);font-size:17px;line-height:1.05}
#mark b{font-weight:normal;display:block;background:rgba(251,251,250,.8);padding:0 6px;border-radius:6px}
#mark span{font-size:14px;color:var(--pencil)}
#mark svg{display:block;width:20px;height:14px;margin:2px auto 0;fill:none;stroke:var(--blue);stroke-width:2.4;stroke-linecap:round}

/* ---- campaign ---- */
.row.big button{font-size:22px;padding:6px 26px}
button.go.alt{background:var(--paper);color:var(--blue)}
.logo.small{font-size:30px}
#missionlist{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%;max-width:520px}
.mcard{text-align:left;display:flex;gap:10px;align-items:baseline;font-size:18px}
.mcard .n{color:var(--pencil);font-size:15px;min-width:20px}
.mcard small{margin-left:auto;color:var(--pencil);font-size:13px}
.mcard.done small{color:var(--blue)}
.mcard:disabled{opacity:.42;cursor:default}
#campaign,#briefing{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(251,251,250,.6);z-index:21;padding:16px}
.brief{max-width:680px}
.bhead{border-bottom:2px solid var(--ink);padding-bottom:6px;margin-bottom:10px}
.bhead .no{font-family:"Rock Salt",cursive;color:var(--blue);font-size:15px}
.bhead h2{font-family:"Rock Salt",cursive;font-size:30px;line-height:1.3}
.bhead .where{color:var(--pencil);font-size:16px}
.story p{font-size:18px;line-height:1.38;margin-bottom:8px}
.brief h4{font-size:17px;color:var(--pencil);font-weight:normal;margin-top:8px}
#briefobj{margin:4px 0 8px 22px;font-size:18px}
.tip{font-size:16px;color:var(--blue);margin-bottom:10px}
.brief .row{justify-content:flex-end}
#objectives{position:absolute;left:14px;top:12px;background:rgba(251,251,250,.85);border:2px solid var(--ink);
  border-radius:12px 5px 14px 4px;padding:6px 12px;min-width:250px;max-width:330px}
#objectives h4{font-size:15px;color:var(--pencil);font-weight:normal}
#objlist{list-style:none;font-size:17px;line-height:1.25}
#objlist li{position:relative;padding-left:22px;margin-bottom:2px}
#objlist li::before{content:"\2610";color:var(--ink);position:absolute;left:0;top:0}
#objlist li.done{color:var(--pencil);text-decoration:line-through}
#objlist li.done::before{content:"\2611";color:var(--blue);text-decoration:none}
#objlist li.sec{font-size:15px;color:var(--pencil)}
#objlist li.sec span::before{content:"secondary: ";font-style:italic}
#objlist li b{font-weight:normal;float:right;margin-left:10px;color:var(--blue)}
#endtitle.small{font-size:clamp(28px,5vw,42px)}
#objlist li.failed{color:var(--red);text-decoration:line-through}
#objlist li.failed::before{content:"\2612";color:var(--red);text-decoration:none}

/* the commando's kit: armour under health, the guns on the number keys, the scope */
.bar.arm{height:5px;color:var(--pencil);margin-top:3px}
#arsenal{list-style:none;margin:0 0 4px;padding:0;font-size:14px;color:var(--pencil);line-height:1.25}
#arsenal li b{display:inline-block;min-width:1.1em;margin-right:4px;font-weight:normal;opacity:.7}
#arsenal li.on{color:var(--ink)}
#arsenal li.on b{opacity:1}
#scope{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 50% 50%,transparent 0 31vmin,rgba(40,40,46,.92) 31.4vmin)}
#scope::before,#scope::after{content:'';position:absolute;left:50%;top:50%;background:var(--ink)}
#scope::before{width:62vmin;height:1.6px;transform:translate(-50%,-50%)}
#scope::after{width:1.6px;height:62vmin;transform:translate(-50%,-50%)}
#scope i{position:absolute;left:50%;top:50%;width:62vmin;height:62vmin;transform:translate(-50%,-50%);
  border:2.5px solid var(--ink);border-radius:50%}