/* PICKAXE — a 16-bit mining game HUD. The mine cross-section is the supply; the rest
   is the heads-up display around it. Hard pixel outlines, no gradients, no blur. */

/* Fonts ship with the site (SIL OFL) so nothing depends on a third-party CDN. */
@font-face{font-family:"Press Start 2P";font-style:normal;font-weight:400;font-display:swap;src:url("assets/fonts/press-start-2p.woff2") format("woff2");}
@font-face{font-family:"VT323";font-style:normal;font-weight:400;font-display:swap;src:url("assets/fonts/vt323.woff2") format("woff2");}
:root{
  --sky:#7fc4e4;
  --sky-deep:#4d9bc4;
  --cloud:#f4f7f8;
  --grass:#5aa63f;
  --grass-dark:#3f7f2c;
  --dirt:#8a5a34;
  --dirt-2:#7a4d2b;
  --dirt-dark:#5b3a1f;
  --rock:#5f5c63;
  --rock-2:#4c4950;
  --rock-deep:#1e1710;
  --tunnel:#14100c;
  --ore:#f2c14e;
  --ore-dark:#b8862b;
  --torch:#ff8c2b;
  --spark:#fff2a8;
  --steel:#b9c2c9;
  --paper:#f4e7c8;
  --paper-2:#e6d6ae;
  --paper-dark:#c9b385;
  --ink:#14100c;
  --ink-soft:#5a4a33;
  --red:#d64541;
  --green:#3f9b3a;
  --screen:#0f1a14;
  --phos:#8ff08a;
  --phos-dim:#4f9a56;
  --px:3px;                       /* one "pixel" of chrome */
  color-scheme: light;
}
*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  background:var(--rock-deep);
  color:var(--ink);
  font-family:"Press Start 2P","VT323",monospace;
  font-size:10px;
  line-height:1.5;
  overflow:auto;
  -webkit-font-smoothing:none;
  image-rendering:pixelated;
}
button,input,a{font-family:inherit;}
a{color:inherit;}

/* ---------- pixel frame (the one border used everywhere) ---------- */
.px{
  position:relative;
  background:var(--paper);
  border:var(--px) solid var(--ink);
  box-shadow:
    inset var(--px) var(--px) 0 #fff9e8,
    inset calc(var(--px) * -1) calc(var(--px) * -1) 0 var(--paper-dark),
    var(--px) var(--px) 0 var(--ink);
}
.px.dark{
  background:var(--screen);
  color:var(--phos);
  box-shadow:
    inset var(--px) var(--px) 0 #1f3327,
    inset calc(var(--px) * -1) calc(var(--px) * -1) 0 #06100a,
    var(--px) var(--px) 0 var(--ink);
}

/* ---------- layout: one screen ---------- */
.game{
  min-height:100%;
  display:grid;
  grid-template-rows:auto auto auto;
  align-content:start;
  gap:10px;
  padding:12px;
  max-width:1180px;
  margin:0 auto;
}

/* ---------- top HUD ---------- */
.hud{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:8px 12px;
}
.hud .logo{display:flex;align-items:center;gap:10px;min-width:0;}
.hud .logo img{width:40px;height:40px;image-rendering:pixelated;border:var(--px) solid var(--ink);background:var(--rock-deep);}
.hud h1{margin:0;font-size:16px;line-height:1;letter-spacing:1px;}
.hud .tag{margin:6px 0 0;font-size:9px;color:var(--ink-soft);}
.hud nav{display:flex;gap:6px;flex-wrap:wrap;margin-left:auto;}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;padding:9px 12px;font-size:9px;line-height:1;
  color:var(--ink);background:var(--paper-2);text-decoration:none;cursor:pointer;
  border:var(--px) solid var(--ink);
  box-shadow:inset var(--px) var(--px) 0 #fff9e8, inset calc(var(--px) * -1) calc(var(--px) * -1) 0 var(--paper-dark), 0 var(--px) 0 var(--ink);
  text-transform:uppercase;white-space:nowrap;
}
.btn:hover{background:#fff3d0;}
.btn:active:not(:disabled),.btn.pressed{
  transform:translateY(var(--px));box-shadow:inset var(--px) var(--px) 0 var(--paper-dark), inset calc(var(--px) * -1) calc(var(--px) * -1) 0 #fff9e8, 0 0 0 var(--ink);
}
.btn:disabled,.btn.disabled{color:#9a8b6c;cursor:default;pointer-events:none;background:var(--paper-2);}
.btn.primary{background:var(--ore);box-shadow:inset var(--px) var(--px) 0 #ffe79a, inset calc(var(--px) * -1) calc(var(--px) * -1) 0 var(--ore-dark), 0 var(--px) 0 var(--ink);}
.btn.primary:hover{background:#ffd35e;}
.btn.danger{background:var(--torch);box-shadow:inset var(--px) var(--px) 0 #ffb77a, inset calc(var(--px) * -1) calc(var(--px) * -1) 0 #b85a12, 0 var(--px) 0 var(--ink);}
.btn:focus-visible{outline:var(--px) dashed var(--red);outline-offset:2px;}

/* ---------- main stage ---------- */
.stage{
  display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:10px;min-height:0;align-items:start;
}
.mine-wrap{display:flex;flex-direction:column;min-height:0;padding:8px;overflow:auto;}
.mine-head{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:9px;margin-bottom:6px;}
.mine-head .depth{color:var(--ink-soft);}

/* the mine itself */
.mine{
  position:relative;flex:none;
  display:grid;grid-template-rows:64px auto;
  border:var(--px) solid var(--ink);
  background:var(--sky);
  overflow:hidden;
}
.surface{position:relative;background:var(--sky);overflow:hidden;}
.surface svg{position:absolute;inset:0;width:100%;height:100%;}
#grid{
  display:grid;grid-template-columns:repeat(40,1fr);grid-auto-rows:1fr;
  aspect-ratio:40 / 20;   /* square blocks: the grid's height follows its width */
  gap:1px;background:var(--tunnel);padding:1px;
  border-top:var(--px) solid var(--grass-dark);
}
#grid i{display:block;background:var(--dirt);position:relative;min-height:0;}
#grid i.dirt2{background:var(--dirt-2);}
#grid i.rock{background:var(--rock);}
#grid i.rock::after{content:"";position:absolute;left:25%;top:25%;width:30%;height:30%;background:var(--rock-2);}
#grid i.ore{background:var(--dirt-dark);}
#grid i.ore::after{content:"";position:absolute;left:20%;top:20%;width:60%;height:60%;background:var(--ore);box-shadow:inset -2px -2px 0 var(--ore-dark);}
#grid i.dug{background:var(--tunnel);}
#grid i.dug::after{display:none;}
#grid i.hit{background:var(--spark);animation:hit .45s steps(3) forwards;}
#grid i.hit::after{display:none;}
@keyframes hit{0%{background:var(--spark);}50%{background:var(--torch);}100%{background:var(--tunnel);}}

/* the miner sprite, parked on the newest tunnel block */
.miner{position:absolute;width:0;height:0;pointer-events:none;transition:left .3s steps(4),top .3s steps(4);}
.miner svg{position:absolute;left:-14px;top:-30px;width:28px;height:32px;overflow:visible;}
.miner .arm{transform-origin:14px 12px;}
.miner.working .arm{animation:swing .5s steps(2) infinite;}
@keyframes swing{0%{transform:rotate(-40deg);}100%{transform:rotate(25deg);}}

/* legend */
.legend{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:8px;margin-top:8px;color:var(--ink-soft);align-items:center;}
.legend b{display:inline-block;width:10px;height:10px;vertical-align:-1px;margin-right:6px;border:2px solid var(--ink);}
.legend .k-ore{background:var(--ore);}
.legend .k-dirt{background:var(--dirt);}
.legend .k-hit{background:var(--torch);}
.legend .k-dug{background:var(--tunnel);}
.legend .note{margin-left:auto;}

/* ---------- side column ---------- */
.side{display:flex;flex-direction:column;gap:10px;min-height:0;overflow:auto;}
.stat{padding:10px 12px;}
.stat .label{font-size:8px;letter-spacing:1px;color:var(--phos-dim);text-transform:uppercase;}
.stat .value{font-family:"VT323",monospace;font-size:44px;line-height:1;margin-top:4px;font-variant-numeric:tabular-nums;color:var(--phos);}
.stat .sub{font-family:"VT323",monospace;font-size:21px;line-height:1.1;color:var(--phos-dim);}

.fees{display:flex;padding:0;margin:0;}
.fees div{flex:1;padding:8px 6px;text-align:center;border-right:2px solid var(--paper-dark);}
.fees div:last-child{border-right:0;}
.fees dt{font-size:7px;letter-spacing:1px;color:var(--ink-soft);text-transform:uppercase;}
.fees dd{margin:4px 0 0;font-size:14px;}

.ca-box{padding:8px 10px;}
.ca-box .label{font-size:7px;letter-spacing:1px;color:var(--ink-soft);text-transform:uppercase;margin-bottom:4px;}
.ca-row{display:flex;gap:6px;align-items:stretch;}
.ca{
  flex:1;min-width:0;padding:6px 8px;background:#fff9e8;
  font-family:"VT323",monospace;font-size:20px;line-height:1.2;
  border:2px solid var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.actions{display:flex;flex-direction:column;gap:8px;}
.actions .btn{text-align:center;}

.contracts{display:grid;grid-template-columns:1fr 1fr;gap:4px 8px;padding:8px 10px;}
.contracts div{display:flex;flex-direction:column;gap:2px;min-width:0;}
.contracts .k{font-size:7px;letter-spacing:1px;text-transform:uppercase;color:var(--ink-soft);}
.contracts a,.contracts .v{font-family:"VT323",monospace;font-size:19px;line-height:1;text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.contracts a:hover{color:var(--red);text-decoration:underline;}
.contracts .v{color:#9a8b6c;}

/* ---------- bottom status ---------- */
.status{display:flex;align-items:center;gap:10px;padding:8px 12px;font-size:8px;}
.status .log{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.meter{display:flex;gap:2px;padding:3px;width:140px;border:2px solid var(--ink);background:#fff9e8;}
.meter s{display:block;flex:1;height:8px;background:var(--paper-dark);text-decoration:none;}
.meter s.on{background:var(--torch);}
.status .pct{font-family:"VT323",monospace;font-size:22px;line-height:1;min-width:40px;text-align:right;}

/* ---------- dialogs ---------- */
.dialog{
  position:fixed;inset:0;z-index:50;display:none;align-items:center;justify-content:center;
  background:rgba(20,16,12,.72);padding:12px;
}
.dialog[open]{display:flex;}
.dialog .box{width:min(460px,100%);max-height:calc(100% - 24px);overflow:auto;padding:0;}
.dialog.wide .box{width:min(560px,100%);}
.dialog .title{
  display:flex;align-items:center;gap:8px;padding:8px 10px;background:var(--ink);color:var(--paper);
  font-size:9px;text-transform:uppercase;letter-spacing:1px;
}
.dialog .title span{flex:1;}
.dialog .close{width:24px;height:24px;padding:0;font-size:9px;line-height:1;}
.dialog .body{padding:12px;}

.rows{margin:0 0 10px;padding:4px 8px;}
.rows div{display:flex;justify-content:space-between;gap:12px;padding:6px 0;font-size:8px;align-items:baseline;}
.rows div + div{border-top:2px solid var(--paper-dark);}
.rows span:last-child{font-family:"VT323",monospace;font-size:20px;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:60%;}
.rows .strong span:last-child{color:var(--green);}
.rows a{color:var(--red);}

.wallet-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:10px;}
.addr{font-family:"VT323",monospace;font-size:16px;color:var(--ink-soft);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;}
label{display:block;font-size:8px;margin-bottom:4px;text-transform:uppercase;letter-spacing:1px;color:var(--ink-soft);}
.amount-row{display:flex;gap:6px;margin-bottom:10px;}
input{
  flex:1;min-width:0;width:100%;padding:6px 8px;background:#fff9e8;color:var(--ink);
  font-family:"VT323",monospace;font-size:18px;border:2px solid var(--ink);outline:none;
}
input:focus{box-shadow:0 0 0 2px var(--ore);}
.buttons{display:flex;flex-wrap:wrap;gap:8px;align-items:center;}
.msg{margin:10px 0 0;font-size:8px;color:var(--ink-soft);min-height:1.5em;line-height:1.6;}
.note{font-size:8px;color:var(--ink-soft);margin:10px 0 0;line-height:1.7;}

.history{margin-top:10px;padding:6px 8px;max-height:150px;overflow:auto;}
.history-head{font-size:7px;letter-spacing:1px;text-transform:uppercase;color:var(--ink-soft);margin-bottom:4px;}
.history ul{list-style:none;margin:0;padding:0;}
.history li{display:flex;justify-content:space-between;gap:10px;padding:3px 0;font-family:"VT323",monospace;font-size:16px;}
.history li + li{border-top:2px solid var(--paper-dark);}

.log-screen{
  padding:8px 10px;margin-bottom:10px;font-family:"VT323",monospace;font-size:16px;
  height:180px;overflow:auto;
}
.log-screen div{padding:2px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.log-screen .empty{color:var(--phos-dim);white-space:normal;}
.log-screen a{color:var(--phos);}
.ops-head{font-size:8px;text-transform:uppercase;letter-spacing:1px;margin:0 0 8px;color:var(--ink-soft);}

.tabs{display:flex;gap:4px;margin-bottom:8px;}
.tab{padding:7px 10px;}
.tab.active{background:var(--ore);}
.tab-panel[hidden]{display:none;}

.about-head{display:flex;gap:12px;align-items:center;margin-bottom:10px;}
.about-head img{width:48px;height:48px;image-rendering:pixelated;border:var(--px) solid var(--ink);}
.about-head b{font-size:12px;}
.steps-list{margin:0;padding-left:18px;font-size:8px;line-height:1.8;}
.steps-list li{padding:2px 0;}

/* ---------- phones: stack, scroll ---------- */
@media (max-width:860px){
  .game{display:flex;flex-direction:column;padding:10px;}
  .stage{grid-template-columns:1fr;}
  .hud nav{margin-left:0;width:100%;}
  .hud h1{font-size:13px;}
  .side{overflow:visible;}
  .status{flex-wrap:wrap;}
  .legend .note{margin-left:0;width:100%;}
}
@media (max-width:480px){
  .hud .logo img{width:32px;height:32px;}
  .stat .value{font-size:30px;}
  .mine{grid-template-rows:44px auto;}
  #grid i.rock::after,#grid i.ore::after{left:15%;top:15%;width:70%;height:70%;}
}
@media (prefers-reduced-motion:reduce){
  #grid i.hit{animation:none;background:var(--tunnel);}
  .miner{transition:none;}
  .miner.working .arm{animation:none;}
}

/* ---------- og:image capture (scripts/og-image.mjs opens ?demo&og) ---------- */
body.og{overflow:hidden;}
body.og .game{padding:14px;gap:8px;max-width:none;}
body.og .status,body.og .contracts,body.og #x-link{display:none;}

/* ---------- native <dialog> reset: we paint our own backdrop ---------- */
dialog.dialog{margin:0;width:100%;height:100%;max-width:none;max-height:none;border:0;padding:12px;color:inherit;}
dialog.dialog::backdrop{background:transparent;}

/* ---------- the mine at work ---------- */
@keyframes spin{from{transform:translate(200px,12px) rotate(0deg);}to{transform:translate(200px,12px) rotate(360deg);}}
.mine.working #wheel{animation:spin 1.2s steps(8) infinite;}
@keyframes puff{0%{transform:translateY(0);opacity:1;}100%{transform:translateY(-6px);opacity:0;}}
.mine.working #smoke{animation:puff 1s steps(3) infinite;}