@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700;900&family=IM+Fell+English:ital@0;1&family=Special+Elite&display=swap');

:root{
  --iron:#14100b;
  --iron2:#1e1610;
  --panel:#241811;
  --panel2:#2e2014;
  --brass:#c9a227;
  --brass-hi:#f0d878;
  --brass-lo:#7a5c14;
  --copper:#c47b3a;
  --copper-hi:#f0a95c;
  --parch:#f1e2bd;
  --parch2:#e4cf9e;
  --ink:#2b1e10;
  --rust:#8a4b1f;
  --steam:#cfd6d4;
  --ok:#8fd18f;
  --danger:#d96a4a;
  --focus:#ffd75e;
  --gear-speed:14s;
  --radius:14px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; color:var(--parch);
  background:
    radial-gradient(1200px 500px at 50% -10%, #3a2517 0%, transparent 60%),
    radial-gradient(900px 600px at 100% 100%, #241a10 0%, transparent 55%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.015) 0 2px, transparent 2px 5px),
    linear-gradient(180deg, var(--iron) 0%, var(--iron2) 60%, #100c08 100%);
  font-family:"IM Fell English", Georgia, serif;
  min-height:100vh;
}
body::before{ /* vignette + grain */
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:radial-gradient(120% 90% at 50% 20%, transparent 55%, rgba(0,0,0,.55) 100%);
}
.rivets{
  position:fixed; inset:10px; pointer-events:none; z-index:0; opacity:.5;
  border:2px solid rgba(201,162,39,.35); border-radius:18px;
}
.skip{
  position:absolute; left:12px; top:-60px; z-index:50;
  background:var(--brass); color:#1c1408; padding:8px 14px; border-radius:8px;
  font-family:"Special Elite", monospace; text-decoration:none; transition:top .15s;
}
.skip:focus{top:12px; outline:3px solid var(--focus)}
:focus-visible{outline:3px solid var(--focus); outline-offset:2px; border-radius:6px}
kbd{
  font-family:"Special Elite", monospace; font-size:.75em;
  background:#0f0b07; border:1px solid var(--brass-lo); border-bottom-width:3px;
  border-radius:5px; padding:0 5px; color:var(--brass-hi); white-space:nowrap;
}

.masthead{
  position:relative; z-index:1; text-align:center; padding:44px 20px 10px; max-width:900px; margin:0 auto;
}
.kicker{font-family:"Special Elite", monospace; letter-spacing:.35em; font-size:.7rem; color:var(--copper-hi); margin:0 0 6px}
.masthead h1{
  font-family:"Cinzel Decorative", serif; font-weight:900; margin:0;
  font-size:clamp(2.2rem, 7vw, 4rem); line-height:1;
  background:linear-gradient(180deg, #fff3c4 5%, var(--brass-hi) 30%, var(--brass) 50%, #6e5210 55%, var(--brass-hi) 90%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 2px 0 rgba(0,0,0,.6);
  filter:drop-shadow(0 3px 8px rgba(0,0,0,.7));
}
.sub{font-style:italic; color:#d9c48f; margin:10px auto 4px; max-width:34rem}
.kbd-hint{font-size:.9rem; color:#a98f5f; margin:0 0 6px}
.gears{display:flex; justify-content:center; gap:0; margin-bottom:2px}
.gear{width:64px; height:64px; fill:none; stroke:var(--brass); stroke-width:5; opacity:.9; animation:spin var(--gear-speed) linear infinite}
.gear circle{fill:#17100a; stroke-width:4}
.g2{width:46px; height:46px; margin:14px -8px 0; animation-direction:reverse; stroke:var(--copper)}
.g3{width:56px; height:56px; stroke:#8a6d2a}
body.stoking .gears{--gear-speed:1.2s}
@keyframes spin{to{transform:rotate(360deg)}}

#app{position:relative; z-index:1; max-width:900px; margin:0 auto; padding:12px 16px 40px; display:grid; gap:18px}
.panel{
  background:linear-gradient(180deg, var(--panel2), var(--panel));
  border:1px solid #6b5320; border-radius:var(--radius);
  box-shadow:inset 0 1px 0 rgba(240,216,120,.25), inset 0 -18px 40px rgba(0,0,0,.45), 0 10px 30px rgba(0,0,0,.5);
  padding:18px 18px 16px; position:relative;
}
.panel::before,.panel::after{ /* corner screws */
  content:"✦"; position:absolute; top:8px; color:var(--brass-lo); font-size:.8rem;
}
.panel::before{left:12px}.panel::after{right:12px}
.panel h2{font-family:"Cinzel Decorative", serif; font-size:1.15rem; margin:2px 0 12px; color:var(--brass-hi); letter-spacing:.02em}
.plate-no{
  display:inline-grid; place-items:center; width:1.7em; height:1.7em; margin-right:.4em;
  border:2px solid var(--brass); border-radius:50%; font-size:.8em; color:var(--brass-hi);
  background:radial-gradient(circle at 35% 30%, #4a3416, #241a0e);
}
.dim{color:#a98f5f; font-size:.92rem}
.field-label{display:block; font-family:"Cinzel Decorative", serif; font-size:.95rem; color:var(--brass-hi); margin-bottom:6px}
#moral{
  width:100%; resize:vertical; min-height:3.4em; color:var(--parch);
  background:linear-gradient(180deg, #120d08, #1c130b);
  border:1px solid var(--brass-lo); border-radius:10px; padding:12px 14px;
  font-family:"IM Fell English", serif; font-size:1.15rem; line-height:1.4;
  box-shadow:inset 0 3px 12px rgba(0,0,0,.7);
}
#moral::placeholder{color:#7d6845; font-style:italic}
.moral-row{display:flex; justify-content:space-between; align-items:center; gap:10px; margin:8px 0}
.count{font-family:"Special Elite", monospace; font-size:.8rem; color:#a98f5f}
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chip{
  font-family:"Special Elite", monospace; font-size:.8rem; cursor:pointer;
  color:var(--parch); background:#171008; border:1px dashed #8a6d2a; border-radius:999px; padding:6px 12px;
}
.chip:hover,.chip:focus-visible{border-style:solid; border-color:var(--brass-hi); color:var(--brass-hi); transform:translateY(-1px)}

.valves{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:14px}
.valve{border:1px solid #6b5320; border-radius:10px; padding:8px 12px 12px; margin:0; background:rgba(0,0,0,.25)}
.valve legend{font-family:"Cinzel Decorative", serif; font-size:.85rem; color:var(--copper-hi); padding:0 8px}
.valve label{display:flex; gap:8px; align-items:baseline; padding:5px 4px; border-radius:8px; cursor:pointer; font-size:1rem}
.valve label:hover{background:rgba(201,162,39,.1)}
.valve input{accent-color:var(--brass); width:1.1em; height:1.1em}
.valve b{color:var(--parch)} .valve i{color:#a98f5f; font-size:.85em}

.press-body{display:grid; grid-template-columns:220px 1fr; gap:16px; align-items:center}
.gauge{width:100%; height:auto}
.gauge .needle{transform-origin:100px 105px; transform:rotate(-70deg); transition:transform .2s}
.gauge .needle line{filter:drop-shadow(0 0 4px rgba(232,163,61,.8))}
.gauge .needle circle{fill:#2a1c0d; stroke:var(--brass-hi); stroke-width:3}
#gaugeArc{transition:stroke-dashoffset .2s}
.gtick{fill:#a98f5f; font-family:"Special Elite", monospace; font-size:11px; letter-spacing:.1em}
.press-state{font-family:"Special Elite", monospace; font-size:.85rem; color:var(--copper-hi); text-align:center; margin:6px 0 0; min-height:2.4em}
.lever{
  width:100%; cursor:pointer; border:2px solid var(--brass-lo); border-radius:12px; padding:14px;
  background:linear-gradient(180deg, #3d2a12, #241708);
  color:var(--brass-hi); box-shadow:0 6px 0 #4a3510, 0 12px 24px rgba(0,0,0,.6);
  transition:transform .06s, box-shadow .06s;
}
.lever:hover{border-color:var(--brass-hi)}
.lever:active{transform:translateY(4px); box-shadow:0 2px 0 #4a3510, 0 6px 12px rgba(0,0,0,.6)}
.lever-handle{display:block; width:26px; height:52px; margin:0 auto 8px; border-radius:13px;
  background:linear-gradient(90deg, #6e5210, var(--brass-hi) 45%, #6e5210);
  box-shadow:0 0 12px rgba(240,216,120,.5); position:relative;
}
.lever-handle::after{content:""; position:absolute; top:-12px; left:50%; transform:translateX(-50%);
  width:40px; height:22px; border-radius:11px; background:radial-gradient(circle at 35% 30%, #7a2e1a, #3d1408);
  border:2px solid var(--copper);}
.lever-text{display:block; font-family:"Cinzel Decorative", serif; font-weight:700; font-size:1.2rem; letter-spacing:.06em}
.lever-sub{display:block; margin-top:4px; font-size:.85rem; color:#a98f5f}
.press-actions{display:flex; gap:8px; margin-top:10px; flex-wrap:wrap}
.btn{
  font-family:"Special Elite", monospace; cursor:pointer; color:var(--parch);
  background:#171008; border:1px solid #8a6d2a; border-radius:9px; padding:9px 13px; font-size:.9rem;
}
.btn:hover:not(:disabled){border-color:var(--brass-hi); color:var(--brass-hi)}
.btn:disabled{opacity:.4; cursor:not-allowed}
.btn.small{padding:7px 10px; font-size:.82rem}
.brass-btn{background:linear-gradient(180deg, #6e5210, #3d2f0c); border-color:var(--brass); color:var(--brass-hi)}
.danger{border-color:#8a3d28; color:#f0a08a}
.steam{position:absolute; inset:0; overflow:hidden; pointer-events:none; border-radius:var(--radius)}
.puff{position:absolute; bottom:20px; width:26px; height:26px; border-radius:50%;
  background:radial-gradient(circle, rgba(230,235,233,.85), transparent 70%);
  animation:rise 1.6s ease-out forwards;}
@keyframes rise{from{transform:translateY(0) scale(.6); opacity:.9} to{transform:translateY(-160px) translateX(var(--dx,20px)) scale(2.2); opacity:0}}
body.stoking .press{animation:shake .12s linear infinite}
@keyframes shake{0%{transform:translate(0)}25%{transform:translate(1px,-1px)}50%{transform:translate(-1px,1px)}75%{transform:translate(1px,1px)}100%{transform:translate(0)}}

.parchment-wrap{overflow:hidden}
.parchment{
  background:
    radial-gradient(140px 40px at 15% 8%, rgba(120,70,20,.25), transparent 70%),
    radial-gradient(200px 60px at 85% 90%, rgba(120,70,20,.3), transparent 70%),
    linear-gradient(180deg, var(--parch), var(--parch2));
  color:var(--ink); border-radius:8px; padding:22px 22px 18px;
  border:1px solid #8a6d2a; box-shadow:inset 0 0 40px rgba(120,70,20,.35), 0 4px 14px rgba(0,0,0,.5);
  min-height:180px; font-size:1.12rem; line-height:1.65;
}
.parchment h3{font-family:"Cinzel Decorative", serif; margin:0 0 4px; font-size:1.4rem; color:#4a2c10}
.parchment .moral-stamp{
  margin-top:14px; padding:10px 14px; border:2px solid #6e4a1c; border-radius:6px;
  font-family:"Special Elite", monospace; background:rgba(110,74,28,.12);
  transform:rotate(-.6deg); box-shadow:0 2px 0 rgba(110,74,28,.4);
}
.parchment p{margin:.55em 0}
.parchment p:first-of-type::first-letter{
  font-family:"Cinzel Decorative", serif; font-size:2.6em; float:left; line-height:.9;
  padding:2px 8px 0 0; color:#6e2f14; font-weight:900;
}
.story-empty{color:#6e5a38 !important; font-style:italic}
.story-empty::first-letter{all:unset !important}
.parchment.typing::after{content:"▌"; animation:blink 1s steps(1) infinite; color:#6e2f14}
@keyframes blink{50%{opacity:0}}
.story-meta{display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:10px; flex-wrap:wrap}
#storyMeta{font-family:"Special Elite", monospace; font-size:.8rem; color:#a98f5f}
.story-btns{display:flex; gap:8px}

.ingots-head{display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap}
.ingots-head h2{margin:2px 0 0}
.ingot-count{
  display:inline-grid; place-items:center; min-width:1.8em; height:1.8em; padding:0 .3em;
  font-family:"Special Elite", monospace; font-size:.75em; border-radius:999px;
  background:#171008; border:1px solid var(--brass); color:var(--brass-hi);
}
.ingots-tools{display:flex; gap:8px; flex-wrap:wrap}
.ingot-grid{list-style:none; margin:12px 0 0; padding:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:12px}
.ingot{
  border-radius:10px; padding:14px 12px 10px; position:relative; overflow:hidden;
  background:linear-gradient(165deg, #8a6d2a 0%, var(--brass) 22%, #fff3c4 38%, var(--brass) 55%, #6e5210 80%, #4a3510 100%);
  color:#241a08; box-shadow:0 6px 16px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.6);
  border:1px solid #3d2f0c;
}
.ingot::after{ /* shine sweep */
  content:""; position:absolute; top:0; bottom:0; width:40px; left:-60px; transform:skewX(-18deg);
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
}
.ingot:hover::after,.ingot:focus-within::after{animation:sheen 1s ease}
@keyframes sheen{to{left:110%}}
.ingot-no{font-family:"Special Elite", monospace; font-size:.72rem; letter-spacing:.2em; color:#4a3510}
.ingot h3{font-family:"Cinzel Decorative", serif; font-size:1rem; margin:4px 0 2px; line-height:1.25}
.ingot .ingot-moral{font-style:italic; font-size:.92rem; margin:0 0 4px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.ingot .ingot-date{font-family:"Special Elite", monospace; font-size:.72rem; color:#4a3510}
.ingot-btns{display:flex; gap:6px; margin-top:8px}
.ingot-btns .btn{background:rgba(20,12,4,.85); color:var(--brass-hi); border-color:#3d2f0c; font-size:.75rem; padding:6px 9px}
.ingot-btns .btn:hover{border-color:#fff3c4; color:#fff}
.ingot-empty{color:#a98f5f; font-style:italic; grid-column:1/-1; text-align:center; padding:18px; border:1px dashed #6b5320; border-radius:10px}

.ledger-toggle{background:none; border:none; color:inherit; font:inherit; cursor:pointer; padding:0}
.ledger-body table{width:100%; border-collapse:collapse; font-size:.95rem}
.ledger-body td{padding:6px 8px; border-bottom:1px dotted #6b5320}
.ledger-body td:first-child{width:9em}
.foot{text-align:center; color:#7d6845; font-size:.85rem; padding:0 20px 30px; position:relative; z-index:1}
.foot code{color:var(--copper-hi)}

.toast{
  position:fixed; left:50%; bottom:22px; transform:translateX(-50%); z-index:60;
  background:#171008; color:var(--brass-hi); border:1px solid var(--brass);
  border-radius:10px; padding:10px 18px; font-family:"Special Elite", monospace; font-size:.9rem;
  box-shadow:0 10px 30px rgba(0,0,0,.7);
}

@media (max-width:640px){
  .press-body{grid-template-columns:1fr}
  .gauge-wrap{max-width:260px; margin:0 auto}
  .valves{grid-template-columns:1fr}
  .masthead{padding-top:30px}
  #app{padding:8px 10px 30px}
  .parchment{font-size:1.05rem; padding:16px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important; transition-duration:.01ms !important}
  html{scroll-behavior:auto}
}