/* Buckshot — a backyard range. The page is the shed wall, the target hangs on it and stays put
   while the bench is loaded on the left. No hero strip, no stack of panels. */

@font-face{
  font-family:"Jersey";
  src:url("/fonts/jersey10.woff2") format("woff2");
  font-weight:400; font-display:block;
}

:root{
  --olive:#4a5340;
  --brass:#c9a227;
  --paper:#efe6d2;
  --red:#c8302e;
  --steel:#23262b;
  --wood:#7a5230;
  --ink:#1a1c16;
  --dim:#8d9482;
  --pix:"Jersey", ui-monospace, monospace;
  --mono:ui-monospace, "SF Mono", Consolas, monospace;
}

*{box-sizing:border-box}
html,body{margin:0}
body{
  /* the shed wall, tiled; everything else sits on top of it */
  background:url("/art/wall.png") repeat top left / 256px auto, var(--steel);
  color:var(--paper);
  font-family:var(--mono); font-size:15px; line-height:1.55;
}
img{image-rendering:pixelated}
h1,h2{font-family:var(--pix); font-weight:400; margin:0; letter-spacing:1px}
code{font-family:var(--mono); background:#00000038; padding:3px 8px; color:var(--paper)}
.fine{font-size:12px; color:var(--dim)}
.empty{color:var(--dim); padding:12px 0; margin:0}

/* ---------- the range: bench on the left, target on the right ---------- */
.range{
  max-width:1240px; margin:0 auto; padding:26px 20px 40px;
  display:grid; grid-template-columns:minmax(360px, 520px) 1fr; gap:34px; align-items:start;
}

/* the bench is a sheet of paper clipped to the wall */
.bench{
  background:var(--paper); color:var(--ink);
  border:3px solid var(--steel);
  box-shadow:10px 10px 0 #0000004d;
  padding:20px 22px 24px;
  transform:rotate(-.4deg);
}
.bench-head{display:flex; align-items:center; gap:14px; margin-bottom:18px}
.bench-mark{width:40px; height:40px}
.bench h1{font-size:46px; line-height:.9; color:var(--ink)}
.bench-sub{margin:2px 0 0; font-size:13px; color:#6d6a58}
.bench-head .btn{margin-left:auto}

.field{display:block; margin-bottom:16px}
.field-name{display:block; font-family:var(--pix); font-size:20px; letter-spacing:1px; color:var(--ink)}
.field-hint{display:block; font-size:11px; color:#6d6a58; margin-bottom:6px}
#list{
  width:100%; min-height:220px; resize:vertical;
  background:#fffdf4; color:var(--ink); border:2px solid var(--steel);
  font-family:var(--mono); font-size:13px; line-height:1.8; padding:10px 12px;
  /* ruled like a range sheet */
  background-image:repeating-linear-gradient(180deg, #0000 0 22px, #23262b1f 22px 23px);
}
.pair{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.pair select, .pair input{
  width:100%; background:#fffdf4; color:var(--ink); border:2px solid var(--steel);
  font-family:var(--mono); font-size:13px; padding:9px 10px;
}
.loaded{font-family:var(--pix); font-size:22px; color:var(--red); margin:4px 0 12px}

.tally{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:18px}
.tally div{border-top:2px solid var(--steel); padding-top:6px}
.tally span{display:block; font-size:10px; letter-spacing:1px; text-transform:uppercase; color:#6d6a58}
.tally b{font-family:var(--pix); font-size:28px; color:var(--ink)}

/* ---------- buttons ---------- */
.btn{
  font-family:var(--pix); font-size:22px; letter-spacing:1px;
  background:var(--brass); color:var(--ink); border:2px solid var(--steel); padding:4px 16px; cursor:pointer;
}
.btn:hover{background:var(--paper)}
.btn[disabled]{background:#9a9a90; color:#5d5d55; cursor:not-allowed}
.btn-small{font-size:17px; padding:2px 10px}
.btn-fire{
  width:100%; font-size:38px; padding:8px; background:var(--red); color:var(--paper);
  border-color:var(--ink);
}
.btn-fire:hover{background:#e04a46}
.btn-fire[disabled]{background:#6b6b63; color:#a9a9a0}

/* ---------- the target on the wall ---------- */
.butt{position:sticky; top:20px; display:flex; flex-direction:column; align-items:center; gap:10px}
.target-wrap{position:relative; width:min(520px, 100%)}
.target-art{display:block; width:100%; filter:drop-shadow(0 14px 0 #00000059)}
/* holes are placed by app.js in percentages of this box */
.target-face{position:absolute; inset:12%}
.hole{
  position:absolute; width:12px; height:12px; margin:-6px 0 0 -6px;
  background:var(--steel); border-radius:50%;
  box-shadow:0 0 0 2px #00000040;
}
.shells{width:min(360px,80%); opacity:.9}

/* ---------- ledger and rules, painted straight on the wall ---------- */
.ledger, .rules-board{max-width:1240px; margin:0 auto 40px; padding:18px 20px 22px}
.ledger, .rules-board{background:#1a1c16bf; border-top:3px solid #c9a22759; border-bottom:3px solid #00000040}
.ledger h2, .rules-board h2{font-size:34px; color:var(--brass); margin-bottom:12px}
.volleys-list{list-style:none; margin:0; padding:0; max-height:260px; overflow:auto}
.volleys-list li{
  display:flex; gap:14px; align-items:center; padding:10px 0;
  border-bottom:1px dashed #efe6d233; font-size:13px;
}
.volleys-list .when{margin-left:auto; color:var(--dim); font-size:12px}
.pill{font-family:var(--pix); font-size:18px; background:var(--brass); color:var(--ink); padding:0 9px}

.rules-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:14px}
.rules-grid p{
  margin:0; font-size:13px; background:#1a1c16cc; border-left:4px solid var(--brass);
  padding:12px 14px;
}
.rules-grid b{font-family:var(--pix); font-size:20px; color:var(--brass); margin-right:8px}

/* ---------- the card nailed to the door ---------- */
.card{
  position:relative; max-width:640px; margin:0 auto 60px; text-align:center;
  background:var(--paper); color:var(--ink); border:3px solid var(--steel);
  padding:22px 24px 18px; transform:rotate(.6deg); box-shadow:8px 8px 0 #0000004d;
  display:flex; flex-direction:column; align-items:center; gap:10px;
}
.nail{
  position:absolute; top:10px; width:10px; height:10px; border-radius:50%;
  background:var(--steel); box-shadow:inset 0 0 0 2px #ffffff40;
}
.nail-l{left:14px}
.nail-r{right:14px}
.card-name{font-family:var(--pix); font-size:26px; color:var(--red)}
.links{display:flex; gap:18px; font-family:var(--pix); font-size:21px}
.links a{color:var(--ink); text-decoration:none; border-bottom:2px solid var(--brass)}
.links a:hover{color:var(--red)}
.card .fine{color:#6d6a58; margin:4px 0 0}

@media (max-width:980px){
  .range{grid-template-columns:1fr}
  .butt{position:static}
  .bench{transform:none}
  .tally{grid-template-columns:repeat(2,1fr)}
}

/* links that exist but lead nowhere until the coin launches */
.links a.soon{opacity:.4; pointer-events:none; cursor:default}

/* a coin the index has not caught up with yet, added by hand */
.add-coin{
  display:inline-block; margin-top:10px; cursor:pointer;
  background:transparent; border:1px dashed currentColor; opacity:.7;
  font:inherit; font-size:12px; padding:6px 10px; color:inherit;
}
.add-coin:hover{opacity:1}