/* Chaff — a weighing station standing on the threshing floor. The scene is the background of the
   whole page, the scales stay on the left, the heap scrolls past on the right. */

@font-face{
  font-family:"Silkscreen";
  src:url("/fonts/Silkscreen-Regular.ttf") format("truetype");
  font-weight:400; font-display:block;
}

:root{
  --straw:#d9b24a;
  --dust:#cbbfa0;
  --rust:#a4441f;
  --shade:#3b3326;
  --sky:#7fa8c9;
  --bone:#efe6d2;
  --ink:#241f18;
  --dim:#7a6d56;
  --pix:"Silkscreen", "Courier New", monospace;
  --mono:ui-monospace, "SF Mono", Consolas, monospace;
}

*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--dust); color:var(--ink);
  font-family:var(--mono); font-size:15px; line-height:1.55;
  image-rendering:pixelated; -webkit-font-smoothing:none;
}
img{image-rendering:pixelated}
h1,h2{font-family:var(--pix); font-weight:400; margin:0}
code{font-family:var(--mono); background:#0000000f; padding:2px 5px}
.muted{color:var(--dim)}
.small{font-size:12px}
.empty{color:var(--dim); padding:14px 0; margin:0}

/* ---------- the floor behind the station ---------- */
.field{
  position:fixed; inset:0; z-index:-2;
  background:url("/art/hero.png") center 26% / cover no-repeat fixed, var(--sky);
}
.field::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, #cbbfa01f 0%, #cbbfa0a6 52%, #cbbfa0f2 82%);
}
/* husk blowing across the whole station, not just a strip */
.husk{position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none}
.husk i{position:absolute; display:block; width:6px; height:6px; background:var(--straw); opacity:.8; animation:drift linear infinite}
.husk i:nth-child(even){background:var(--bone); width:4px; height:4px}
@keyframes drift{
  0%{transform:translate(0,0) rotate(0deg); opacity:0}
  10%{opacity:.85} 90%{opacity:.85}
  100%{transform:translate(70vw,-14vh) rotate(180deg); opacity:0}
}
@media (prefers-reduced-motion:reduce){ .husk{display:none} }

/* ---------- the thin yard line at the top ---------- */
.yardline{
  display:flex; align-items:center; gap:16px;
  padding:9px 18px; background:#3b3326e6; color:var(--bone);
  font-family:var(--pix); font-size:11px; letter-spacing:.5px;
  border-bottom:4px solid var(--ink);
}
.yardline-mark{display:flex; align-items:center; gap:8px; color:var(--straw)}
.yardline-mark img{width:18px; height:18px}
.yardline-state{margin-left:auto; color:var(--straw)}

/* ---------- keys ---------- */
.key{
  font-family:var(--pix); font-size:12px; letter-spacing:.5px;
  color:var(--bone); background:var(--rust);
  border:4px solid var(--ink); box-shadow:4px 4px 0 var(--shade);
  padding:8px 14px; cursor:pointer;
}
.key:hover{background:var(--straw); color:var(--ink)}
.key:active{transform:translate(2px,2px); box-shadow:2px 2px 0 var(--shade)}
.key[disabled]{background:var(--dim); box-shadow:none; cursor:not-allowed; opacity:.75}
.key-small{font-size:10px; padding:5px 9px; border-width:3px; box-shadow:2px 2px 0 var(--shade)}
.key-big{width:100%; font-size:26px; padding:16px}

/* ---------- the station: scales left, heap right ---------- */
.station{
  max-width:1220px; margin:0 auto; padding:24px 18px 50px;
  display:grid; grid-template-columns:minmax(300px, 380px) 1fr; gap:28px; align-items:start;
}

.scales{
  position:sticky; top:16px;
  background:var(--bone); border:4px solid var(--ink); box-shadow:6px 6px 0 var(--shade);
  padding:20px 20px 18px;
}
.scales h1{font-size:40px; color:var(--rust); line-height:1}
.scales-line{margin:8px 0 18px; font-size:13px}
.weigh{
  background:var(--shade); color:var(--bone); border:4px solid var(--ink);
  padding:14px 16px; text-align:right; margin-bottom:16px;
}
.weigh-label{display:block; font-family:var(--pix); font-size:10px; color:var(--dust)}
.weigh-num{font-family:var(--pix); font-size:40px; color:var(--straw); line-height:1.1}
.weigh-unit{font-family:var(--pix); font-size:16px; color:var(--straw)}
.weigh-sub{display:block; font-size:11px; color:var(--dust); margin-top:4px}
.scales-note{font-size:12px; color:var(--dim); margin:12px 0 0}

.furnace{display:flex; gap:14px; align-items:flex-start; margin-top:20px; border-top:4px dashed #3b332633; padding-top:16px}
.furnace img{width:86px; flex:none}
.furnace-head{font-family:var(--pix); font-size:12px; color:var(--rust)}
.furnace p{margin:6px 0 0; font-size:12px}

/* ---------- the heap ---------- */
.heapside{display:flex; flex-direction:column; gap:24px}
.heap-head{display:flex; align-items:center; gap:12px; margin-bottom:10px; flex-wrap:wrap}
.heap-head h2{font-size:18px; color:var(--rust)}
.heap-tools{margin-left:auto; display:flex; gap:8px}
.heap{
  background:var(--bone); border:4px solid var(--ink); box-shadow:6px 6px 0 var(--shade);
  padding:6px 16px 14px; display:flex; flex-direction:column;
}
.row{
  display:grid; grid-template-columns:26px 1fr 96px 108px 96px; gap:10px; align-items:center;
  padding:9px 2px; border-bottom:2px dashed #3b332633;
}
.row:hover{background:#d9b24a26}
.row input{width:16px; height:16px; accent-color:var(--rust)}
.row-name{font-family:var(--pix); font-size:13px}
.row-sub{display:block; font-size:11px; color:var(--dim)}
.row-bal,.row-val{text-align:right; font-variant-numeric:tabular-nums}
.row-val{color:var(--rust); font-weight:600}
.tag{font-family:var(--pix); font-size:9px; padding:3px 6px; border:2px solid var(--ink); text-align:center}
.tag-sell{background:var(--straw)}
.tag-burn{background:var(--rust); color:var(--bone); border-color:var(--rust)}
.tag-grad{background:var(--sky)}

.pile, .rulebook{
  background:var(--bone); border:4px solid var(--ink); box-shadow:6px 6px 0 var(--shade); padding:16px;
}
.pile-list{list-style:none; margin:0; padding:0; max-height:260px; overflow:auto}
.pile-list li{display:flex; gap:12px; padding:6px 0; border-bottom:2px dashed #3b332633; font-size:13px}
.pile-when{color:var(--dim); font-size:11px; margin-left:auto}
.rules{margin:0; padding-left:20px}
.rules li{margin:6px 0; font-size:13px}

/* ---------- the weighbridge receipt ---------- */
.receipt{max-width:660px; margin:0 auto 54px; padding:0 18px; text-align:center}
.receipt-body{
  background:var(--bone); color:var(--ink);
  border:4px solid var(--ink); border-top-style:dashed;
  padding:18px 20px 16px;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:12px;
  box-shadow:6px 6px 0 var(--shade);
}
.receipt-name{font-family:var(--pix); font-size:14px; color:var(--rust)}
.links{display:flex; gap:14px; font-family:var(--pix); font-size:11px; flex-basis:100%; justify-content:center}
.links a{color:var(--rust); text-decoration:none; border-bottom:2px solid var(--straw)}
.links a:hover{color:var(--ink)}
.receipt .small{margin-top:12px}

@media (max-width:900px){
  .station{grid-template-columns:1fr}
  .scales{position:static}
  .row{grid-template-columns:22px 1fr 88px; row-gap:4px}
  .row-val{grid-column:2 / 4; text-align:left}
  .tag{grid-column:2 / 4; justify-self:start}
}

/* 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; align-self:flex-start; 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}