/* Smelthand — the crucible. Dark charcoal ground, one amber accent, a side rail carrying the CA. */
:root{--ground:#1B1D21;--bench:#23262C;--seam:#33373F;--ink:#ECE9E2;--dim:#9A9891;--amber:#FFAE3B;--amber2:rgba(255,174,59,.16);--amber3:rgba(255,174,59,.45);--ember:#FF6A2A;--slagc:#5C6170;--ok:#8FD18B;
  --disp:"Bai Jamjuree",system-ui,sans-serif;--body:"Instrument Sans",system-ui,sans-serif;--mono:"Spline Sans Mono",ui-monospace,monospace;--dock:74px}
*{box-sizing:border-box}html{color-scheme:dark;background:var(--ground)}
body.forge{margin:0;background:var(--ground);color:var(--ink);font:15px/1.5 var(--body);-webkit-font-smoothing:antialiased;display:grid;grid-template-columns:minmax(0,1fr);gap:18px;padding:14px 14px calc(var(--dock) + 24px);min-height:100vh}
a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}code{font-family:var(--mono)}input{font:inherit}[hidden]{display:none!important}

/* ---- the feed pane ---- */
.tuyere{display:flex;flex-direction:column;gap:16px;min-width:0}
.stamp{display:flex;align-items:center;gap:10px;height:40px}
.stamp-mark{width:28px;height:28px;border-radius:8px;object-fit:cover}
.stamp-name{font:600 19px/1 var(--disp);letter-spacing:.02em}
.stamp-melt{font:500 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--dim);border:1px solid var(--seam);border-radius:6px;padding:4px 8px;margin-left:auto;white-space:nowrap}
.stamp-melt.live{color:var(--amber);border-color:var(--amber3)}
.tie{border:1px solid var(--seam);border-radius:8px;padding:7px 12px;font-size:13px;background:var(--bench);white-space:nowrap}.tie.on{border-color:var(--amber);color:var(--amber)}

.charge{background:var(--bench);border:1px solid var(--seam);border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:12px}
.charge-lbl{display:flex;justify-content:space-between;align-items:baseline;gap:6px 10px;flex-wrap:wrap;font:600 13px var(--disp);letter-spacing:.08em;text-transform:uppercase}
.charge-hold{font:400 12px var(--body);text-transform:none;letter-spacing:0;color:var(--dim);text-align:right;min-width:0;overflow-wrap:anywhere}
.scoop{display:flex;align-items:center;gap:8px;background:var(--ground);border:1px solid var(--seam);border-radius:10px;padding:6px 12px}
.scoop:focus-within{border-color:var(--amber3)}
.scoop input{flex:1;min-width:0;background:none;border:0;outline:0;color:var(--ink);font:500 26px/1.3 var(--mono);padding:4px 0}
.scoop input::placeholder{color:#4C5058}
.scoop-unit{font:500 11px var(--mono);letter-spacing:.08em;color:var(--dim);white-space:nowrap}
.scoops{display:flex;gap:6px;flex-wrap:wrap}
.scoops button{flex:1 1 auto;border:1px solid var(--seam);border-radius:8px;padding:7px 8px;font:500 12px var(--mono);color:var(--dim);white-space:nowrap}
.scoops button:hover,.scoops button.on{color:var(--amber);border-color:var(--amber3)}
.ram{background:var(--amber);color:#1a1206;border-radius:10px;padding:14px 16px;font:700 16px var(--disp);letter-spacing:.02em;box-shadow:0 0 0 1px var(--amber3),0 10px 30px rgba(255,174,59,.18);transition:transform .12s}
.ram:active{transform:translateY(1px)}.ram[disabled]{opacity:.45;cursor:not-allowed;box-shadow:none}
.charge-fine{margin:0;font-size:13px;color:var(--dim);min-height:1.4em}.charge-fine.err{color:var(--ember)}.charge-fine.ok{color:var(--ok)}

.gauges{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.gauge{background:var(--bench);border:1px solid var(--seam);border-radius:10px;padding:10px 10px 8px;min-width:0}
.gauge-k{display:block;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.gauge-v{display:block;font:500 clamp(15px,4vw,20px)/1.15 var(--mono);margin-top:3px;overflow-wrap:anywhere}
.gauge-warm{color:var(--amber)}

.ledger{border:1px solid var(--seam);border-radius:12px;overflow:hidden}
.ledger-h{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:10px 12px;font:600 12px var(--disp);letter-spacing:.1em;text-transform:uppercase;background:var(--bench)}
.ledger-note{font:400 11px var(--body);letter-spacing:0;text-transform:none;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ledger-rows{display:flex;flex-direction:column}
.hrow{display:grid;grid-template-columns:30px 1fr auto;gap:8px;align-items:center;padding:8px 12px;border-top:1px solid var(--seam);font-size:13px;min-width:0}
.hrow.mine-row{background:var(--amber2)}
.hrow .hn{font:500 11px var(--mono);color:var(--dim)}
.hrow .hw{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--dim)}.hrow .hw a:hover{color:var(--ink)}
.hrow .hw small{display:block;font:400 11px var(--mono);color:#6E727B}
.hrow .ha{font:500 13px var(--mono);text-align:right;white-space:nowrap}
.hrow .ha small{display:block;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.hrow.under .ha{color:var(--amber)}.hrow.over .ha{color:var(--slagc)}.hrow.cut .ha{color:var(--amber)}
.ledger-empty{padding:16px 12px;color:var(--dim);font-size:13px;border-top:1px solid var(--seam)}
.mrow{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;padding:9px 12px;border-top:1px solid var(--seam);font-size:13px}
.mrow .mn{font:500 11px var(--mono);letter-spacing:.06em;color:var(--dim);border:1px solid var(--seam);border-radius:6px;padding:2px 6px}
.mrow .ms{color:var(--dim);min-width:0;overflow-wrap:anywhere}.mrow .ms b{color:var(--ink);font-weight:500;font-family:var(--mono)}
.mrow .mt{font:400 11px var(--mono);color:var(--dim);white-space:nowrap}
.drawbtn{border:1px solid var(--amber3);color:var(--amber);border-radius:8px;padding:6px 10px;font:500 12px var(--mono);white-space:nowrap}.drawbtn[disabled]{opacity:.4;cursor:not-allowed}

.rules{border:1px solid var(--seam);border-radius:12px;background:var(--bench)}
.rules summary{cursor:pointer;padding:11px 12px;font:600 12px var(--disp);letter-spacing:.1em;text-transform:uppercase;list-style:none;display:flex;justify-content:space-between}
.rules summary::-webkit-details-marker{display:none}.rules summary::after{content:"+";color:var(--amber)}.rules[open] summary::after{content:"–"}
.rules-body{padding:4px 12px 12px;display:flex;flex-direction:column;gap:10px;color:var(--dim);font-size:13.5px}
.rule b{display:block;color:var(--ink);font:600 15px var(--disp);margin-bottom:2px}.rule p{margin:0}
.rule-ca{margin:6px 0 0;font-size:12px}.rule-ca code{color:var(--ink);overflow-wrap:anywhere}

/* ---- the hearth: the isometric crucible ---- */
.hearth{display:flex;flex-direction:column;gap:8px;min-width:0}
.hearth-cap{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font:600 12px var(--disp);letter-spacing:.1em;text-transform:uppercase;padding:0 4px}
.hearth-tag{color:var(--dim);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hearth-tag #heatTag.live{color:var(--amber)}
.hearth-name{color:var(--ink);font-weight:700;margin-right:8px}
.hearth-clock{font:500 12px var(--mono);letter-spacing:.06em;color:var(--dim);white-space:nowrap}
.crucible{width:100%;max-width:440px;height:auto;margin:0 auto;display:block;filter:drop-shadow(0 24px 40px rgba(0,0,0,.5))}
.cold-text{font:600 26px var(--disp);letter-spacing:.2em;text-transform:uppercase;fill:#3E424B}
.pour-text{font:500 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;fill:var(--amber)}
.band{transform-box:fill-box;animation:landed .5s ease-out both}
@keyframes landed{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
.band.mine-band path{stroke:var(--amber);stroke-width:2}
.crucible.sealed #mouthFront{animation:seal 1.1s ease-in-out infinite alternate}
@keyframes seal{from{stroke:#8A8F9B}to{stroke:var(--amber)}}
.hearth-foot{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;font-size:11.5px;color:var(--dim)}
.hearth-key{display:inline-flex;align-items:center;gap:6px}
.sw{width:12px;height:8px;border-radius:2px;display:inline-block}.sw-ingot{background:var(--amber)}.sw-slag{background:var(--slagc)}.sw-mine{background:none;border:2px solid var(--amber);width:10px;height:6px}

/* ---- the dock: the contract address above the thumb, with its copy control ---- */
#pourdock{position:fixed;left:0;right:0;bottom:0;display:flex;align-items:center;gap:10px;padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:rgba(35,38,44,.96);border-top:1px solid var(--seam);backdrop-filter:blur(10px);z-index:6;box-shadow:0 -10px 30px rgba(0,0,0,.35)}
.dock-k{font:600 10px var(--disp);letter-spacing:.16em;color:var(--dim);flex:0 0 auto}
.dock-ca{flex:1;min-width:0;font:500 11.5px/1.25 var(--mono);color:var(--ink);overflow-wrap:anywhere;user-select:all}
.dock-ca.cold{color:var(--dim);letter-spacing:.1em;text-transform:uppercase;font-size:11px}
.dock-copy{flex:0 0 auto;font:600 11px var(--disp);letter-spacing:.14em;text-transform:uppercase;color:#1a1206;background:var(--amber);border-radius:8px;padding:9px 12px}
.dock-copy[disabled]{background:var(--seam);color:var(--dim);cursor:not-allowed}.dock-copy.done{background:var(--ok)}
.dock-gmgn{flex:0 0 auto;font:500 10px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dim);border:1px solid var(--seam);border-radius:8px;padding:8px 9px}
.dock-gmgn:hover{color:var(--amber);border-color:var(--amber3)}

/* ---- the ladle (a sheet for the wallet chooser) ---- */
.ladle{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;z-index:20;padding:16px}
.ladle-box{width:100%;max-width:420px;background:var(--bench);border:1px solid var(--seam);border-radius:14px;padding:14px 16px 18px}
.ladle-h{display:flex;justify-content:space-between;align-items:center;font:600 15px var(--disp);margin-bottom:10px}#ladleX{font-size:20px;color:var(--dim)}
.wpick{display:flex;flex-direction:column;gap:8px}.wpick button{display:flex;align-items:center;gap:10px;width:100%;padding:11px;border:1px solid var(--seam);border-radius:10px;text-align:left}.wpick img{width:22px;height:22px;border-radius:6px}
.notice{position:fixed;left:50%;bottom:calc(var(--dock) + 14px);transform:translateX(-50%);background:var(--ink);color:#141518;padding:9px 14px;border-radius:9px;font-size:13px;z-index:30;box-shadow:0 8px 30px rgba(0,0,0,.4);max-width:calc(100vw - 80px)}

/* ---- footer ---- */
.slag{grid-column:1/-1;border-top:1px solid var(--seam);padding-top:14px;display:flex;flex-direction:column;gap:6px;font-size:12px;color:var(--dim)}
.slag-row{display:flex;gap:10px;align-items:baseline;min-width:0}.slag-k{letter-spacing:.12em;text-transform:uppercase;font-size:10px;flex:0 0 58px}.slag-row code{overflow-wrap:anywhere;color:var(--ink);font-size:11.5px}
.slag-links{display:flex;gap:14px;margin-top:4px}.slag-links a{color:var(--dim);border-bottom:1px solid var(--seam)}.slag-links a:hover{color:var(--amber)}
.slag-line{font:500 11px var(--disp);letter-spacing:.1em;text-transform:uppercase;color:#5C6170;margin-top:6px}

/* ---- widths ---- */
@media (min-width:640px){
  body.forge{padding:22px 22px calc(var(--dock) + 30px);gap:22px}
  #pourdock{padding-left:22px;padding-right:22px}.dock-ca{font-size:13px}
  .crucible{max-width:520px}
  .stamp-name{font-size:22px}
  .scoop input{font-size:30px}
}
@media (min-width:1000px){
  body.forge{grid-template-columns:minmax(0,1fr) minmax(380px,460px);gap:36px;max-width:1180px;margin:0 auto;padding:30px 30px calc(var(--dock) + 40px);align-items:start}
  .hearth{position:sticky;top:30px}
  #pourdock{left:50%;right:auto;transform:translateX(-50%);width:min(760px,calc(100vw - 40px));border:1px solid var(--seam);border-bottom:0;border-radius:14px 14px 0 0;padding:12px 18px}
  .dock-ca{font-size:14px}
  .crucible{max-width:600px}
  .hearth-cap{font-size:13px}
  .gauge-v{font-size:20px}
}
@media (max-width:400px){
  .scoops button{padding:7px 6px;font-size:11px}
  .gauge-v{font-size:14px}
}