/* FOGLINE PARCEL SCOUTS — grunge: asphalt, torn flyers, spray paint, rubber stamps */
:root{
  --bg:#161310; --paper:#1e1a15; --paper2:#241e17;
  --ink:#e8ddc4; --dim:#a89a7d;
  --acid:#d8ff3d; --rust:#ff4a2d; --violet:#9d7bff;
  --fog:#0c0b09; --line:#3a3227;
  --red:#c8321e;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; color:var(--ink);
  font:15px/1.5 "Courier New", ui-monospace, Menlo, Consolas, monospace;
  background:
    repeating-linear-gradient(178deg, rgba(255,255,255,.014) 0 2px, transparent 2px 5px),
    repeating-linear-gradient(93deg, rgba(0,0,0,.25) 0 3px, transparent 3px 9px),
    radial-gradient(1200px 500px at 20% -5%, #2b241a 0%, transparent 60%),
    radial-gradient(900px 600px at 105% 10%, #2a1512 0%, transparent 55%),
    var(--bg);
  min-height:100vh; overflow-x:hidden;
}
.grain{position:fixed; inset:0; pointer-events:none; z-index:50; opacity:.5; mix-blend-mode:overlay;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.12) 0 1px, transparent 1px 4px);
}
.tape{position:fixed; top:-14px; width:150px; height:38px; z-index:51; opacity:.75;
  background:repeating-linear-gradient(45deg, rgba(232,221,196,.28) 0 8px, rgba(232,221,196,.18) 8px 16px);
  box-shadow:0 2px 6px rgba(0,0,0,.5); filter:contrast(1.1);}
.tape-a{left:8%; transform:rotate(-8deg)} .tape-b{right:8%; transform:rotate(7deg)}

.masthead{max-width:1060px; margin:26px auto 0; padding:0 16px; transform:rotate(-.6deg)}
.kicker{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.stamp{display:inline-block; border:3px double var(--red); color:var(--red); font-weight:700;
  letter-spacing:2px; padding:2px 10px; transform:rotate(-4deg); font-size:12px;
  text-shadow:0 0 1px var(--red); mask:linear-gradient(90deg,#000 96%,transparent);}
.kicker-text{color:var(--dim); letter-spacing:3px; font-size:11px; text-transform:uppercase}
h1{font-family:Impact, "Arial Black", "Franklin Gothic Heavy", Haettenschweiler, sans-serif;
  font-size:clamp(38px,7vw,72px); letter-spacing:2px; line-height:.95; margin:8px 0 2px; color:var(--ink);
  text-shadow:3px 3px 0 #000, -1px -1px 0 rgba(216,255,61,.25);}
h1 em{font-style:normal; color:var(--acid); position:relative; display:inline-block; transform:rotate(1deg)}
h1 em::after{content:""; position:absolute; left:-4%; right:-4%; bottom:2px; height:10px;
  background:rgba(216,255,61,.28); z-index:-1; transform:skewX(-12deg)}
.tag{margin:0 0 4px; color:var(--dim); font-size:13px; letter-spacing:1px}
.tag::before{content:"✕ ✕ ✕ "; color:var(--red); letter-spacing:4px}

#app{max-width:1060px; margin:0 auto; padding:12px 16px 40px}
.hud{background:linear-gradient(180deg,var(--paper2),var(--paper));
  border:1px solid var(--line); border-top:5px solid var(--acid);
  box-shadow:6px 6px 0 #000; padding:12px; transform:rotate(.4deg)}
.meters{display:grid; grid-template-columns:repeat(6,1fr); gap:8px}
.meter{border:1px dashed var(--line); padding:6px 8px; background:rgba(0,0,0,.35)}
.meter label{display:block; font-size:10px; letter-spacing:2px; color:var(--dim)}
.meter b{font-family:Impact,"Arial Black",sans-serif; font-size:22px; letter-spacing:1px}
.meter.you b{color:var(--acid)} .meter.r1 b{color:var(--rust)} .meter.r2 b{color:var(--violet)}
.seedbar{display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; align-items:center}
.seedbar label{font-size:11px; letter-spacing:3px; color:var(--dim)}
input#seed{flex:1; min-width:120px; background:#0d0c0a; border:1px solid var(--line); color:var(--acid);
  font:700 14px "Courier New",monospace; letter-spacing:2px; padding:9px 10px; text-transform:uppercase}
button{font:700 13px "Courier New",monospace; letter-spacing:1px; cursor:pointer;
  background:var(--acid); color:#111; border:2px solid #111; box-shadow:3px 3px 0 #000;
  padding:9px 12px; text-transform:uppercase}
button:hover{transform:translate(-1px,-1px); box-shadow:4px 4px 0 #000}
button:active{transform:translate(2px,2px); box-shadow:1px 1px 0 #000}
#btnDice,#btnHelp,#btnMute{background:#0d0c0a; color:var(--ink); border:2px solid var(--line)}

.board-wrap{display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:16px; margin-top:16px; align-items:start}
.board-frame{position:relative; background:#0a0908; border:1px solid var(--line);
  box-shadow:8px 8px 0 #000; padding:10px; transform:rotate(-.5deg)}
.board-frame::before{content:"SECTOR K — DO NOT FOLD"; position:absolute; top:-12px; left:14px;
  background:var(--red); color:#fff; font-size:10px; letter-spacing:2px; padding:2px 8px; transform:rotate(-2deg)}
canvas#map{display:block; width:100%; height:auto; image-rendering:pixelated; cursor:crosshair;
  background:var(--fog); border:2px solid #000; touch-action:manipulation}
.banner{position:absolute; inset:10px; display:grid; place-items:center; text-align:center;
  background:rgba(10,9,8,.82); padding:20px; z-index:5}
.banner.hidden{display:none}
.banner .big{font-family:Impact,"Arial Black",sans-serif; font-size:clamp(30px,6vw,54px);
  color:var(--acid); text-shadow:3px 3px 0 #000; transform:rotate(-2deg); letter-spacing:2px}
.banner p{max-width:420px; margin:8px auto}
.banner button{margin-top:10px}

.side{display:flex; flex-direction:column; gap:14px}
.card{background:linear-gradient(180deg,var(--paper2),var(--paper)); border:1px solid var(--line);
  box-shadow:5px 5px 0 #000; padding:12px 14px}
.orders{transform:rotate(.7deg)} .logcard{transform:rotate(-.4deg)}
.card h2{font-family:Impact,"Arial Black",sans-serif; letter-spacing:2px; font-size:20px; margin:0 0 8px;
  border-bottom:2px solid var(--red); display:inline-block; padding-bottom:2px}
.orders ol{margin:0; padding-left:20px; font-size:13px}
.orders li{margin:6px 0} .orders b{color:var(--acid)}
kbd{background:#000; border:1px solid var(--line); border-bottom-width:3px; padding:0 6px; font-size:12px; color:var(--ink)}
.btnrow{display:flex; gap:8px; margin-top:10px; flex-wrap:wrap}
#btnStake{background:transparent; color:var(--acid); border:2px solid var(--acid)}
#btnRestart{background:transparent; color:var(--ink); border:2px solid var(--line)}
.legend{display:flex; flex-wrap:wrap; gap:8px 12px; font-size:11px; color:var(--dim); margin:10px 0 0}
.sw{display:inline-block; width:12px; height:12px; margin-right:4px; vertical-align:-1px; border:1px solid #000}
.sw.you{background:var(--acid)} .sw.r1{background:var(--rust)} .sw.r2{background:var(--violet)}
.sw.fog{background:repeating-linear-gradient(45deg,#222 0 3px,#0c0b09 3px 6px)}
#log{list-style:none; margin:0; padding:0; max-height:180px; overflow:auto; font-size:12px}
#log li{padding:5px 6px; border-left:3px solid var(--line); margin:6px 0; background:rgba(0,0,0,.3)}
#log li.good{border-color:var(--acid)} #log li.bad{border-color:var(--rust)} #log li.info{border-color:var(--violet)}
#log li:first-child{transform:rotate(-.4deg)}

.dpad{display:none; gap:6px; justify-content:center; text-align:center}
.dpad button{width:56px; height:48px; font-size:18px}
.dpad>div{display:flex; gap:6px}

.foot{display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-top:16px;
  color:var(--dim); font-size:12px; letter-spacing:1px}
.foot b{color:var(--acid)}
.help{position:fixed; inset:0; z-index:60; display:grid; place-items:center; background:rgba(0,0,0,.7); padding:16px}
.help.hidden{display:none}
.help-card{max-width:520px; background:var(--paper2); border:1px solid var(--line);
  border-top:6px solid var(--red); box-shadow:8px 8px 0 #000; padding:20px; transform:rotate(-1deg)}

@media (max-width:860px){
  .board-wrap{grid-template-columns:1fr}
  .meters{grid-template-columns:repeat(3,1fr)}
  .dpad{display:grid}
}
@media (max-width:375px){
  #app{padding:8px 8px 30px}
  .masthead{margin-top:16px}
  .meters{grid-template-columns:repeat(2,1fr)}
  .meter b{font-size:18px}
}