/* PYRE — cabinet + manual. Fully committed arcade look: one dark theme, pixel type. */
:root {
  --black: #07060a;
  --ash: #2b2529;
  --ash-2: #17141a;
  --cream: #f3e7c9;
  --cream-dim: #a8997f;
  --ember: #ff7a1a;
  --gold: #ffd27a;
  --hot: #fff6dc;
  --blue: #4f8cff;
  --toxic: #9ef01a;
  --grey: #8a8086;
  --display: "Press Start 2P", "Courier New", monospace;
  --body: "VT323", "Courier New", monospace;
  --shadow: 3px 3px 0 #000;
  color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { height: 100%; }
body { margin: 0; background: var(--black); color: var(--cream); font-family: var(--body); font-size: 22px; line-height: 1.35; min-height: 100%; }
a { color: var(--gold); }
code { font-family: var(--body); font-size: 20px; color: var(--cream-dim); word-break: break-all; }
button { font-family: inherit; }
button:focus-visible, input:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

/* ================= CABINET ================= */
.cabinet { position: relative; width: 100%; height: 100vh; height: 100dvh; background: var(--black); overflow: hidden; }
.cabinet:fullscreen { height: 100%; }
#game { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }

.hud { position: absolute; z-index: 3; font-family: var(--display); color: var(--cream); text-shadow: var(--shadow); }
.hud-score { left: max(14px, env(safe-area-inset-left, 0px)); top: max(12px, env(safe-area-inset-top, 0px)); display: grid; gap: 6px; font-size: clamp(8px, 1.1vw, 13px); }
.hud-score div { display: flex; gap: 10px; align-items: baseline; }
.hud-score span { color: var(--gold); font-size: .75em; }
.hud-score b { font-weight: normal; letter-spacing: 1px; }

.hud-says { left: 50%; top: max(12px, env(safe-area-inset-top, 0px)); transform: translateX(-50%); width: min(560px, 56vw);
  display: flex; gap: 10px; align-items: center; background: rgba(7,6,10,.78); border: 3px solid var(--cream); box-shadow: inset 0 0 0 3px var(--black), var(--shadow);
  padding: 8px 12px; font-family: var(--body); font-size: clamp(14px, 1.5vw, 22px); text-shadow: none; }
.hud-says .face { width: 36px; height: 42px; flex: none; image-rendering: auto; }
.hud-says .text { min-width: 0; line-height: 1.15; }

.hud-heat { right: max(14px, env(safe-area-inset-right, 0px)); top: max(12px, env(safe-area-inset-top, 0px)); display: grid; justify-items: end; gap: 6px; font-size: clamp(8px, 1.1vw, 13px); }
.hud-heat .state { color: var(--gold); letter-spacing: 1px; }
.hud-heat .state.mania { animation: blink .4s steps(1) infinite; color: var(--hot); }
.hud-heat .state.starving { color: var(--blue); }
.gauge { display: flex; gap: 3px; }
.gauge i { width: clamp(10px, 1.3vw, 18px); height: clamp(14px, 1.8vw, 24px); background: var(--ash); border: 2px solid #000; }
.gauge i.on { background: var(--ember); box-shadow: 0 0 6px var(--ember); }
.gauge i.on.hot { background: var(--gold); box-shadow: 0 0 8px var(--gold); }
.gauge i.on.white { background: var(--hot); box-shadow: 0 0 10px var(--hot); }
.hud-heat .loc { display: grid; justify-items: end; gap: 4px; font-size: .8em; color: var(--cream-dim); }
.hud-heat .loc i { display: block; width: 120px; height: 6px; background: var(--ash); border: 2px solid #000; position: relative; }
.hud-heat .loc i::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: var(--p, 0%); background: linear-gradient(90deg, var(--ember), var(--gold)); }

.hud-mine { left: max(14px, env(safe-area-inset-left, 0px)); bottom: calc(44px + max(0px, env(safe-area-inset-bottom, 0px))); font-family: var(--body); font-size: clamp(14px, 1.4vw, 20px); text-shadow: none;
  background: rgba(7,6,10,.8); border: 3px solid var(--gold); box-shadow: inset 0 0 0 3px var(--black); padding: 8px 12px; max-width: min(300px, 48vw); display: flex; gap: 10px; align-items: center; }
.hud-mine canvas, .hud-mine img { width: 40px; height: 48px; flex: none; image-rendering: auto; }
.hud-mine b { font-family: var(--display); font-size: .5em; color: var(--gold); display: block; margin-bottom: 4px; }
.hud-mine small { color: var(--cream-dim); font-size: .85em; }

.coin-slot { right: max(14px, env(safe-area-inset-right, 0px)); bottom: calc(44px + max(0px, env(safe-area-inset-bottom, 0px))); cursor: pointer;
  background: linear-gradient(180deg, #ff9a3c, #d65300); color: #1a0d05; border: 3px solid #000; box-shadow: inset 0 0 0 3px #ffb347, 4px 4px 0 #000;
  padding: 12px 16px; font-size: clamp(9px, 1.1vw, 13px); text-shadow: none; display: flex; align-items: center; gap: 10px; animation: pulse 1.6s ease-in-out infinite; }
.coin-slot .slot { width: 6px; height: 22px; background: #000; box-shadow: inset 2px 0 0 #3a1a05; }
.coin-slot:hover { animation: none; filter: brightness(1.1); }
.coin-slot:active { transform: translate(2px, 2px); box-shadow: inset 0 0 0 3px #ffb347, 2px 2px 0 #000; }
@keyframes pulse { 50% { box-shadow: inset 0 0 0 3px #ffb347, 4px 4px 0 #000, 0 0 22px rgba(255,122,26,.7); } }

.ticker { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; height: 34px; background: var(--black); border-top: 3px solid var(--cream); overflow: hidden;
  padding-bottom: env(safe-area-inset-bottom, 0px); box-sizing: content-box; }
.ticker-track { display: inline-flex; gap: 48px; white-space: nowrap; padding-left: 100%; font-family: var(--display); font-size: 10px; line-height: 34px; animation: crawl var(--dur, 40s) linear infinite; will-change: transform; }
.ticker:hover .ticker-track { animation-play-state: paused; }
@keyframes crawl { to { transform: translateX(-100%); } }
.tk { color: var(--cream-dim); } .tk b { font-weight: normal; }
.tk.ember b { color: var(--cream); } .tk.kindling b { color: var(--gold); } .tk.blaze b { color: var(--gold); text-shadow: 0 0 8px var(--ember); }
.tk.inferno b { color: var(--hot); text-shadow: 0 0 10px var(--hot); } .tk.sacrifice b { color: #ff5d5d; text-shadow: 0 0 10px #ff5d5d; }
.tk.sacrifice::before { content: "★ "; color: #ff5d5d; }

.fs { right: max(14px, env(safe-area-inset-right, 0px)); top: calc(max(12px, env(safe-area-inset-top, 0px)) + 84px); background: rgba(7,6,10,.7); border: 2px solid var(--cream-dim); color: var(--cream); width: 34px; height: 34px; cursor: pointer; font-size: 14px; text-shadow: none; }
@media (max-width: 760px) { .fs { top: auto; bottom: calc(100px + env(safe-area-inset-bottom, 0px)); } }

.card { position: absolute; z-index: 4; background: var(--black); border: 3px solid var(--cream); box-shadow: inset 0 0 0 3px var(--black), var(--shadow); padding: 8px 12px; font-size: 18px; min-width: 180px; pointer-events: none; }
.card b { font-family: var(--display); font-size: 9px; color: var(--gold); display: block; margin-bottom: 4px; }
.card small { display: block; color: var(--cream-dim); font-size: 16px; }
.toast { position: absolute; z-index: 5; left: 50%; bottom: 100px; transform: translateX(-50%); background: var(--black); border: 3px solid var(--ember); padding: 10px 14px; font-size: 20px; max-width: 86%; text-align: center; box-shadow: var(--shadow); }

/* feed dialog */
.dialog-wrap { position: absolute; inset: 0; z-index: 6; display: grid; place-items: center; background: rgba(0,0,0,.55); }
.dialog { width: min(440px, 92vw); background: var(--black); border: 4px solid var(--cream); box-shadow: inset 0 0 0 4px var(--black), 6px 6px 0 #000; padding: 16px; display: grid; gap: 12px; }
.dlg-head { display: flex; justify-content: space-between; align-items: center; font-family: var(--display); font-size: 12px; color: var(--gold); }
.dlg-head .x { background: none; border: 2px solid var(--cream-dim); color: var(--cream); width: 28px; height: 28px; cursor: pointer; }
.dlg-row { display: flex; align-items: center; gap: 10px; }
.dlg-row input { flex: 1; min-width: 0; background: var(--ash-2); color: var(--cream); border: 3px solid var(--cream-dim); padding: 8px 10px; font-family: var(--display); font-size: 13px; }
.dlg-row span { font-family: var(--display); font-size: 10px; color: var(--cream-dim); }
.dlg-tier { font-family: var(--display); font-size: 10px; color: var(--gold); min-height: 1.4em; line-height: 1.5; }
.dlg-tier.dust { color: var(--grey); }
.dlg-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.pix { cursor: pointer; border: 3px solid #000; background: var(--ash); color: var(--cream); padding: 12px 14px; font-family: var(--display); font-size: 10px; box-shadow: 3px 3px 0 #000; }
.pix.primary { background: linear-gradient(180deg, #ff9a3c, #d65300); color: #1a0d05; }
.pix:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 #000; }
.pix[disabled] { opacity: .5; cursor: wait; }
.dlg-hint { margin: 0; color: var(--cream-dim); font-size: 18px; line-height: 1.25; }

/* title screen */
.intro { position: absolute; inset: 0; z-index: 8; background: var(--black); display: grid; place-items: center; overflow: hidden; transition: opacity .6s ease; }
.intro.out { opacity: 0; pointer-events: none; }
.intro-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.45) saturate(.9); transform: scale(1.03); }
.intro::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7,6,10,.15), rgba(7,6,10,.55) 60%, rgba(7,6,10,.92)); z-index: 1; }
.crt { position: absolute; inset: 0; pointer-events: none; z-index: 3; background: repeating-linear-gradient(0deg, rgba(0,0,0,.25) 0 2px, transparent 2px 4px); }
.crt::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.7) 100%); }
.boot { position: absolute; left: 4%; top: 5%; margin: 0; font-family: var(--display); font-size: clamp(8px, 1.1vw, 13px); line-height: 2; color: var(--toxic); text-shadow: 0 0 6px rgba(158,240,26,.6); white-space: pre-wrap; z-index: 2; }
.title-card { position: relative; z-index: 2; display: grid; justify-items: center; gap: clamp(10px, 2vh, 22px); text-align: center; width: 100%; padding: 0 16px; }
.logo { margin: 0; font-family: var(--display); font-size: clamp(34px, 9vw, 104px); color: var(--gold); letter-spacing: 6px;
  text-shadow: 0 0 12px var(--ember), 0 0 40px rgba(255,122,26,.6), 6px 6px 0 #5a1d00, 8px 8px 0 #000; animation: hum 2.4s ease-in-out infinite; }
@keyframes hum { 50% { text-shadow: 0 0 18px var(--gold), 0 0 60px rgba(255,160,60,.8), 6px 6px 0 #5a1d00, 8px 8px 0 #000; } }
#intro-canvas { width: min(94%, 900px); height: auto; }
.lore { margin: 0; max-width: 60ch; font-size: clamp(18px, 2.2vw, 28px); line-height: 1.3; color: var(--cream); text-shadow: 2px 2px 0 #000; }
.press-start { font-family: var(--display); font-size: clamp(12px, 1.6vw, 18px); color: #1a0d05; background: linear-gradient(180deg, #ff9a3c, #d65300); border: 4px solid #000; box-shadow: inset 0 0 0 3px #ffb347, 6px 6px 0 #000; padding: 16px 28px; cursor: pointer; animation: blink 1.1s steps(1) infinite; }
.press-start:hover { animation: none; filter: brightness(1.1); }
.press-start:active { transform: translate(3px, 3px); box-shadow: inset 0 0 0 3px #ffb347, 3px 3px 0 #000; }
@keyframes blink { 50% { opacity: .35 } }
.credits { font-family: var(--display); font-size: clamp(7px, .9vw, 10px); color: var(--cream-dim); letter-spacing: 1px; }
.loading { position: absolute; inset: 0; z-index: 7; display: grid; place-items: center; font-family: var(--display); font-size: 12px; color: var(--gold); background: var(--black); }

/* ================= MANUAL ================= */
.manual { max-width: 1040px; margin: 0 auto; padding-block: 48px 40px; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); display: grid; gap: 56px; }
.sec h2 { font-family: var(--display); font-size: clamp(13px, 2vw, 20px); color: var(--ember); margin: 0 0 18px; letter-spacing: 1px; text-shadow: 3px 3px 0 #000; text-wrap: balance; }
.sec h2::before { content: "▸ "; color: var(--gold); }
.sec p { margin: 0 0 12px; max-width: 70ch; }
.sec em { color: var(--gold); font-style: normal; }
.cols { display: grid; grid-template-columns: minmax(0, 1fr) 200px; gap: 28px; align-items: start; }
.fig { margin: 0; display: grid; justify-items: center; gap: 6px; position: relative; padding-top: 50px; }
.fig .pyre-ill { width: 140px; image-rendering: auto; }
.fig .flame-ill { position: absolute; top: 0; width: 74px; }
.fig figcaption { font-family: var(--display); font-size: 8px; color: var(--cream-dim); }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; counter-reset: s; }
.steps li { display: grid; justify-items: center; text-align: center; gap: 8px; padding: 18px 12px; border: 3px solid var(--ash); box-shadow: inset 0 0 0 3px var(--black); background: var(--ash-2); min-width: 0; }
.steps li img { height: 56px; image-rendering: auto; }
.steps li b { font-family: var(--display); font-size: 11px; color: var(--gold); }
.steps li span { font-size: 19px; line-height: 1.25; color: var(--cream-dim); }
.why { display: grid; gap: 18px; }
.why > div { border-left: 6px solid var(--ember); padding-left: 16px; }
.why b { font-family: var(--display); font-size: 11px; color: var(--cream); display: block; margin-bottom: 6px; }
.why p { margin: 0; color: var(--cream-dim); }
.rule-line { font-family: var(--display); font-size: 10px; color: var(--cream-dim); margin-bottom: 14px; line-height: 2; }
.rule-line b { color: var(--gold); font-weight: normal; }
.tiers { width: 100%; border-collapse: collapse; font-size: 20px; }
.tiers th { font-family: var(--display); font-size: 9px; color: var(--cream-dim); text-align: left; padding: 8px 10px; border-bottom: 3px solid var(--ash); }
.tiers td { padding: 10px; border-bottom: 2px dashed var(--ash); vertical-align: top; }
.tiers td:first-child { font-family: var(--display); font-size: 10px; white-space: nowrap; }
.tiers td:nth-child(2) { font-family: var(--display); font-size: 10px; white-space: nowrap; color: var(--cream-dim); }
.t-ember td:first-child { color: var(--cream); } .t-kindling td:first-child { color: var(--gold); } .t-blaze td:first-child { color: var(--gold); text-shadow: 0 0 8px var(--ember); }
.t-inferno td:first-child { color: var(--hot); text-shadow: 0 0 10px var(--hot); } .t-sacrifice td:first-child { color: #ff5d5d; text-shadow: 0 0 10px #ff5d5d; }
.rule-note { color: var(--cream-dim); margin-top: 14px; }
.soon { font-family: var(--display); font-size: 8px; color: var(--toxic); margin-left: 8px; }
.wallets { display: grid; gap: 14px; }
.wallets > div { display: grid; gap: 2px; }
.wallets span { font-family: var(--display); font-size: 9px; color: var(--gold); }
.wallets i { font-style: normal; color: var(--cream-dim); font-size: 18px; }
.route { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 0; font-family: var(--display); font-size: 10px; color: var(--cream-dim); }
.route li::after { content: "  ▸  "; color: var(--ash); white-space: pre; }
.route li:last-child::after { content: ""; }
.route li.now { color: var(--gold); }
.foot { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; border-top: 3px solid var(--ash); padding-top: 18px; font-family: var(--display); font-size: 9px; color: var(--cream-dim); }

@media (max-width: 760px) {
  body { font-size: 20px; }
  .cols { grid-template-columns: 1fr; }
  .fig { padding-top: 40px; }
  .steps { grid-template-columns: 1fr 1fr; }
  .hud-says { width: min(560px, 52vw); font-size: 13px; padding: 6px 8px; }
  .hud-says .face { display: none; }
  .hud-score { font-size: 8px; }
  .hud-heat { font-size: 8px; }
  .hud-heat .loc i { width: 80px; }
  .hud-mine { max-width: 46vw; font-size: 13px; }
  .coin-slot { padding: 10px 12px; font-size: 9px; }
  .tiers td { padding: 8px 6px; font-size: 17px; }
}
@media (max-width: 480px) { .steps { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .logo, .press-start, .coin-slot, .hud-heat .state.mania, .ticker-track { animation: none; } }