/* ============================================================
   CINDERFORGE — obsidian/molten terminal theme
   ============================================================ */

:root{
  --void-0:#050403;
  --void-1:#0b0807;
  --panel:#120d0a;
  --panel-2:#1a130e;
  --line:rgba(255,144,64,0.28);
  --line-bright:rgba(255,166,84,0.65);

  --ember-100:#fff3d6;
  --ember-300:#ffc878;
  --ember-500:#ff8a3d;
  --ember-600:#ff6a1a;
  --ember-800:#b8390a;
  --ember-900:#5c1c04;

  --alert-500:#ff4d4d;
  --gold-400:#f3cd6b;
  --gold-600:#c99a2e;
  --starlight-300:#d8e8ff;
  --starlight-500:#9fc1ee;

  --ink-100:#f4ece1;
  --ink-300:#cdbfaf;
  --ink-500:#988a7a;
  --ink-700:#5c5147;

  --font-display:'Unbounded', system-ui, sans-serif;
  --font-mono:'Martian Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --cut:14px;
  --cut-sm:7px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ color-scheme:dark; }

body{
  margin:0;
  min-height:100vh;
  background:var(--void-0);
  color:var(--ink-300);
  font-family:var(--font-mono);
  font-size:14px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3{ font-family:var(--font-display); color:var(--ink-100); margin:0; }

p{ margin:0 0 0.8em; }

button{ font-family:inherit; color:inherit; }

::selection{ background:var(--ember-600); color:var(--void-0); }

::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:var(--void-1); }
::-webkit-scrollbar-thumb{ background:var(--ember-900); border:2px solid var(--void-1); }
::-webkit-scrollbar-thumb:hover{ background:var(--ember-800); }

/* ===== background layers ===== */

#bg-canvas{
  position:fixed; inset:0; z-index:-2; width:100%; height:100%; display:block;
}

.vignette{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(ellipse 90% 80% at 50% 38%, transparent 35%, rgba(2,1,1,0.55) 78%, rgba(2,1,1,0.92) 100%);
}

.scanlines{
  position:fixed; inset:0; z-index:5; pointer-events:none;
  background:repeating-linear-gradient(to bottom, rgba(255,235,210,0.035) 0px, rgba(255,235,210,0.035) 1px, transparent 1px, transparent 3px);
  mix-blend-mode:overlay;
  opacity:0.6;
}

#fx-canvas{
  position:fixed; inset:0; z-index:60; pointer-events:none; width:100%; height:100%; display:block;
}

/* ===== angular panel shell ===== */

.angular-panel{
  position:relative;
  background:linear-gradient(165deg, var(--panel), var(--panel-2));
  border:1px solid var(--line);
  clip-path:polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  filter:drop-shadow(0 0 0 transparent);
}

.angular-panel::before{
  content:'';
  position:absolute; inset:0;
  background:
    linear-gradient(90deg, var(--line-bright) 0 18px, transparent 18px) top left / 100% 1px no-repeat,
    linear-gradient(0deg, var(--line-bright) 0 18px, transparent 18px) bottom right / 1px 100% no-repeat;
  opacity:0.7;
  pointer-events:none;
}

/* ===== top HUD bar ===== */

.hud-bar{
  display:flex; align-items:center; gap:24px;
  padding:18px clamp(16px,4vw,40px);
  border-bottom:1px solid var(--line);
  background:linear-gradient(to bottom, rgba(20,14,10,0.9), rgba(10,7,5,0.5));
  position:sticky; top:0; z-index:40;
  backdrop-filter:blur(6px);
  flex-wrap:wrap;
}

.brand{ display:flex; flex-direction:column; margin-right:auto; }
.brand h1{
  font-size:clamp(20px,2.4vw,28px);
  font-weight:800;
  letter-spacing:0.04em;
  background:linear-gradient(120deg, var(--ember-100), var(--ember-500) 60%, var(--ember-800));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 0 30px rgba(255,106,26,0.25);
}
.brand .tagline{
  font-size:10px; letter-spacing:0.24em; text-transform:uppercase; color:var(--ink-500);
}

.gauges{ display:flex; gap:clamp(14px,2.4vw,34px); flex-wrap:wrap; }
.gauge{ display:flex; flex-direction:column; min-width:108px; }
.gauge-label{ font-size:9px; letter-spacing:0.18em; color:var(--ink-500); }
.gauge-value{ font-size:clamp(16px,1.8vw,21px); font-weight:600; color:var(--ink-100); font-variant-numeric:tabular-nums; }
.gauge-sub{ font-size:10px; color:var(--ember-500); font-variant-numeric:tabular-nums; }
.gauge-primary .gauge-value{ color:var(--ember-300); text-shadow:0 0 14px rgba(255,138,61,0.5); }

.icon-btn{
  background:transparent; border:1px solid var(--line); color:var(--ink-300);
  padding:8px 14px; cursor:pointer; letter-spacing:0.12em; font-size:11px;
  transition:border-color .2s, color .2s, box-shadow .2s;
}
.icon-btn:hover{ border-color:var(--line-bright); color:var(--ember-300); box-shadow:0 0 14px rgba(255,138,61,0.18); }

/* ===== layout ===== */

.layout{
  display:grid; grid-template-columns:1.05fr 1fr; gap:22px;
  max-width:1360px; margin:0 auto; width:100%;
  padding:26px clamp(16px,4vw,40px);
  flex:1;
}

@media (max-width:920px){
  .layout{ grid-template-columns:1fr; }
}

/* ===== core panel ===== */

.core-panel{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:22px; padding:20px;
}

.buy-amount-select{ display:flex; gap:6px; }
.buy-amt-btn{
  background:var(--panel); border:1px solid var(--line); color:var(--ink-500);
  padding:7px 14px; cursor:pointer; font-family:var(--font-mono); font-size:12px; letter-spacing:0.06em;
  clip-path:polygon(6px 0,100% 0,100% 100%,0 100%,0 6px);
  transition:all .15s;
}
.buy-amt-btn:hover{ color:var(--ember-300); border-color:var(--line-bright); }
.buy-amt-btn.active{ background:var(--ember-700,#a14c12); background:linear-gradient(135deg,var(--ember-600),var(--ember-800)); color:var(--ember-100); border-color:var(--ember-500); box-shadow:0 0 16px rgba(255,106,26,0.4); }

.core-wrap{ display:flex; flex-direction:column; align-items:center; gap:16px; }

.core{
  background:none; border:none; padding:0; cursor:pointer;
  width:clamp(190px,30vw,320px); height:clamp(190px,30vw,320px);
  position:relative;
  -webkit-tap-highlight-color:transparent;
  transition:transform .08s ease-out;
}
.core:active{ transform:scale(0.96); }
.core-svg{ width:100%; height:100%; overflow:visible; filter:drop-shadow(0 0 26px rgba(255,106,26,0.55)) drop-shadow(0 0 60px rgba(255,106,26,0.25)); }

.ring{ fill:none; transform-box:fill-box; transform-origin:50% 50%; }
.ring polygon{ fill:none; }
.ring-outer polygon{ stroke:var(--ember-500); stroke-width:1.4; opacity:0.55; }
.ring-mid polygon{ stroke:var(--starlight-300); stroke-width:1; opacity:0.35; }
.ring-inner polygon{ stroke:var(--ember-100); stroke-width:1.2; opacity:0.7; }

.ring-outer{ animation:spin-cw 22s linear infinite; }
.ring-mid{ animation:spin-ccw 16s linear infinite; }
.ring-inner{ animation:spin-cw 11s linear infinite; }

.core-fill{ transform-box:fill-box; transform-origin:50% 50%; animation:core-pulse 3.6s ease-in-out infinite; }

.core.struck .core-fill{ animation:core-strike 0.32s ease-out; }
.core.struck .core-svg{ filter:drop-shadow(0 0 44px rgba(255,160,80,0.85)) drop-shadow(0 0 90px rgba(255,106,26,0.4)); }

.core-hint{
  font-size:11px; letter-spacing:0.3em; color:var(--ink-500); text-transform:uppercase;
  animation:hint-fade 2.4s ease-in-out infinite;
}

.run-stats{ display:flex; gap:28px; font-size:11px; color:var(--ink-500); }
.run-stats div{ display:flex; flex-direction:column; align-items:center; gap:2px; }
.run-stats strong{ color:var(--ember-300); font-size:14px; font-weight:600; }

/* floating click text */
.float-text{
  position:fixed; z-index:65; pointer-events:none;
  font-family:var(--font-mono); font-weight:700; font-size:15px;
  color:var(--ember-100);
  text-shadow:0 0 8px var(--ember-500), 0 0 18px var(--ember-600);
  transform:translate(-50%,-50%);
  animation:float-up 0.9s ease-out forwards;
  white-space:nowrap;
}

/* ===== console panel ===== */

.console-panel{
  display:flex; flex-direction:column;
  min-height:520px; max-height:78vh;
  padding:4px;
}

.tabs{ display:flex; flex-wrap:wrap; border-bottom:1px solid var(--line); }
.tab{
  background:none; border:none; padding:14px 16px; cursor:pointer;
  font-family:var(--font-mono); font-size:11px; letter-spacing:0.1em; color:var(--ink-500);
  position:relative; transition:color .2s;
}
.tab:hover{ color:var(--ink-100); }
.tab.active{ color:var(--ember-300); }
.tab.active::after{
  content:''; position:absolute; left:14px; right:14px; bottom:-1px; height:2px;
  background:linear-gradient(90deg,var(--ember-500),var(--ember-800));
  box-shadow:0 0 10px var(--ember-600);
}
.tab-badge{
  display:inline-block; margin-left:6px; min-width:16px; padding:0 4px; border-radius:1px;
  background:var(--ember-700,#8a3a0e); background:var(--ember-600); color:var(--void-0);
  font-size:9px; font-weight:700; line-height:16px; text-align:center;
}
.tab-badge:empty{ display:none; }

.tab-panels{ flex:1; overflow-y:auto; padding:14px 16px 18px; }
.tab-panel{ display:none; }
.tab-panel.active{ display:block; animation:panel-in .25s ease; }

.empty-state{ color:var(--ink-700); font-size:11px; letter-spacing:0.08em; text-align:center; padding:30px 10px; }

/* ===== row items (generators / upgrades) ===== */

.list{ display:flex; flex-direction:column; gap:8px; }

.row-item{
  display:flex; align-items:center; gap:14px;
  padding:12px 14px;
  background:rgba(255,255,255,0.015);
  border:1px solid rgba(255,144,64,0.14);
  clip-path:polygon(var(--cut-sm) 0,100% 0,100% calc(100% - var(--cut-sm)),calc(100% - var(--cut-sm)) 100%,0 100%,0 var(--cut-sm));
  transition:border-color .2s, background .2s;
}
.row-item:hover{ border-color:var(--line-bright); background:rgba(255,144,64,0.05); }
.row-item.locked{ opacity:0.45; }
.row-item.owned, .upg-row.owned{ opacity:0.5; }

.gen-icon{
  width:34px; height:34px; flex-shrink:0; position:relative;
  background:linear-gradient(135deg,var(--ember-300),var(--ember-800));
  transform:rotate(45deg);
  box-shadow:0 0 calc(4px + var(--i,3) * 1.4px) var(--ember-600);
}
.gen-icon::after{
  content:''; position:absolute; inset:7px; background:var(--panel);
}
.gen-icon.upg-icon{ width:26px; height:26px; }
.gen-icon.upg-icon::after{ inset:5px; }
.gen-icon.locked-icon{ background:linear-gradient(135deg,var(--ink-700),var(--void-1)); box-shadow:none; }

.row-info{ flex:1; min-width:0; }
.row-title{ font-size:13px; color:var(--ink-100); font-weight:600; display:flex; align-items:center; gap:8px; }
.row-owned{ font-size:11px; color:var(--ember-500); font-weight:400; }
.row-desc{ font-size:11px; color:var(--ink-500); margin-top:2px; }
.row-meta{ font-size:10px; color:var(--ink-700); margin-top:4px; letter-spacing:0.03em; }

.buy-btn{
  flex-shrink:0; display:flex; flex-direction:column; align-items:center; gap:2px;
  min-width:96px;
  background:var(--void-1); border:1px solid var(--line); color:var(--ink-500);
  padding:8px 12px; cursor:pointer;
  clip-path:polygon(6px 0,100% 0,100% 100%,0 100%,0 6px);
  transition:all .15s;
}
.buy-btn .buy-qty{ font-size:10px; letter-spacing:0.08em; }
.buy-btn .buy-cost{ font-size:13px; font-weight:600; font-variant-numeric:tabular-nums; }
.buy-btn:disabled{ cursor:not-allowed; }
.buy-btn.affordable{
  border-color:var(--ember-500); color:var(--ember-100);
  background:linear-gradient(160deg, rgba(255,138,61,0.22), rgba(255,106,26,0.08));
  box-shadow:0 0 16px rgba(255,106,26,0.28);
}
.buy-btn.affordable:hover{ transform:translateY(-1px); box-shadow:0 0 22px rgba(255,106,26,0.45); }
.buy-btn.affordable .buy-cost{ color:var(--ember-300); }

.upg-row.owned .buy-btn{ border-color:var(--ink-700); color:var(--ink-700); }

/* ===== achievements ===== */

.grid-achievements{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px;
}
.ach-card{
  background:rgba(255,255,255,0.015); border:1px solid rgba(255,144,64,0.12);
  padding:14px 12px; text-align:center;
  clip-path:polygon(var(--cut-sm) 0,100% 0,100% calc(100% - var(--cut-sm)),calc(100% - var(--cut-sm)) 100%,0 100%,0 var(--cut-sm));
  display:flex; flex-direction:column; align-items:center; gap:6px;
  opacity:0.5; transition:opacity .2s, border-color .2s;
}
.ach-card.unlocked{ opacity:1; border-color:rgba(255,166,84,0.45); background:rgba(255,138,61,0.06); }
.ach-icon{
  width:24px; height:24px; transform:rotate(45deg);
  border:1.5px solid var(--ink-700); flex-shrink:0;
}
.ach-card.unlocked .ach-icon{
  background:linear-gradient(135deg,var(--ember-300),var(--ember-700,var(--ember-600)));
  border-color:var(--ember-300);
  box-shadow:0 0 12px var(--ember-600);
}
.ach-name{ font-size:11px; color:var(--ink-100); font-weight:600; }
.ach-desc{ font-size:10px; color:var(--ink-500); }
.ach-tag{ font-size:8px; letter-spacing:0.16em; color:var(--ink-700); margin-top:auto; padding-top:4px; }
.ach-card.unlocked .ach-tag{ color:var(--gold-400); }

/* ===== prestige ===== */

.prestige-panel{ max-width:520px; margin:0 auto; text-align:center; padding:10px 4px 20px; }
.prestige-panel h3{ font-size:18px; letter-spacing:0.04em; color:var(--gold-400); margin-bottom:10px; }
.prestige-desc{ font-size:12px; color:var(--ink-500); }
.prestige-desc strong{ color:var(--ember-300); }

.prestige-stats{
  display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:18px 0;
}
.prestige-stat{
  background:rgba(255,255,255,0.02); border:1px solid var(--line); padding:12px;
  display:flex; flex-direction:column; gap:4px;
  clip-path:polygon(var(--cut-sm) 0,100% 0,100% calc(100% - var(--cut-sm)),calc(100% - var(--cut-sm)) 100%,0 100%,0 var(--cut-sm));
}
.prestige-stat span{ font-size:9px; letter-spacing:0.12em; color:var(--ink-500); }
.prestige-stat strong{ font-size:18px; color:var(--gold-400); font-variant-numeric:tabular-nums; }

.prestige-hint{ font-size:11px; color:var(--ink-700); margin-top:14px; }
.prestige-hint strong{ color:var(--ink-300); }

/* ===== stats tab ===== */

.stats-list{ display:flex; flex-direction:column; gap:1px; }
.stat-row{
  display:flex; justify-content:space-between; padding:10px 6px;
  border-bottom:1px dashed rgba(255,144,64,0.15);
  font-size:12px;
}
.stat-row span{ color:var(--ink-500); }
.stat-row strong{ color:var(--ink-100); font-variant-numeric:tabular-nums; }

/* ===== buttons (generic) ===== */

.btn{
  background:var(--void-1); border:1px solid var(--line); color:var(--ink-300);
  padding:10px 18px; cursor:pointer; font-family:var(--font-mono); font-size:12px; letter-spacing:0.08em;
  clip-path:polygon(7px 0,100% 0,100% 100%,0 100%,0 7px);
  transition:all .15s;
}
.btn:hover{ border-color:var(--line-bright); color:var(--ink-100); }
.btn-primary{ background:linear-gradient(135deg,var(--ember-600),var(--ember-800)); color:var(--ember-100); border-color:var(--ember-500); }
.btn-primary:hover{ box-shadow:0 0 18px rgba(255,106,26,0.4); }
.btn-danger{ border-color:var(--alert-500); color:var(--alert-500); }
.btn-danger:hover{ background:rgba(255,77,77,0.12); color:#ff8080; }
.btn-prestige{
  width:100%; padding:14px; font-size:13px; letter-spacing:0.14em;
  background:linear-gradient(135deg,var(--gold-400),var(--ember-800)); color:#1a0e02; border-color:var(--gold-400);
  font-weight:700;
}
.btn-prestige:disabled{ background:var(--void-1); color:var(--ink-700); border-color:var(--line); cursor:not-allowed; }
.btn-prestige:not(:disabled):hover{ box-shadow:0 0 26px rgba(243,205,107,0.5); transform:translateY(-1px); }

/* ===== footer ticker ===== */

.event-ticker{
  display:flex; align-items:center; gap:14px;
  padding:10px clamp(16px,4vw,40px);
  border-top:1px solid var(--line);
  background:rgba(8,5,4,0.7);
  font-size:11px;
}
.ticker-label{
  flex-shrink:0; color:var(--ember-600); letter-spacing:0.2em; font-size:9px;
  border:1px solid var(--line); padding:3px 8px;
}
.ticker-feed{
  color:var(--ink-300); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  transition:opacity .25s ease, transform .25s ease;
}

/* ===== toasts ===== */

.toast-stack{ position:fixed; top:18px; right:18px; z-index:100; display:flex; flex-direction:column; gap:8px; max-width:300px; }
.toast{
  background:linear-gradient(160deg, var(--panel), var(--panel-2));
  border:1px solid var(--ember-500);
  padding:12px 14px;
  clip-path:polygon(var(--cut-sm) 0,100% 0,100% calc(100% - var(--cut-sm)),calc(100% - var(--cut-sm)) 100%,0 100%,0 var(--cut-sm));
  box-shadow:0 0 26px rgba(255,106,26,0.3);
  transform:translateX(120%); opacity:0;
  transition:transform .35s cubic-bezier(.2,.9,.3,1.2), opacity .3s;
}
.toast.show{ transform:translateX(0); opacity:1; }
.toast.hide{ transform:translateX(120%); opacity:0; }
.toast-title{ font-size:11px; letter-spacing:0.1em; color:var(--gold-400); font-weight:700; }
.toast-desc{ font-size:11px; color:var(--ink-300); margin-top:3px; }

/* ===== modals ===== */

.modal-overlay{
  position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center;
  background:rgba(3,2,1,0.78); backdrop-filter:blur(5px); padding:20px;
}
.modal-overlay.hidden{ display:none; }
.modal{
  width:min(440px,100%); padding:28px 26px; animation:modal-in .25s ease;
}
.modal h2{ font-size:16px; letter-spacing:0.08em; color:var(--ember-300); margin-bottom:14px; }
.modal p{ font-size:12px; color:var(--ink-300); }
.modal p strong{ color:var(--ember-300); }
.modal-actions{ display:flex; gap:10px; margin-top:18px; }
.modal-actions .btn{ flex:1; }

.reignite-stats{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:16px 0; }
.reignite-stats div{ background:rgba(255,255,255,0.02); border:1px solid var(--line); padding:10px; display:flex; flex-direction:column; gap:3px; }
.reignite-stats span{ font-size:9px; color:var(--ink-500); letter-spacing:0.08em; }
.reignite-stats strong{ font-size:16px; color:var(--gold-400); }

.settings-row{ display:flex; justify-content:space-between; align-items:center; padding:10px 0; border-bottom:1px dashed rgba(255,144,64,0.15); font-size:12px; }
.toggle{
  background:var(--void-1); border:1px solid var(--line); color:var(--ink-500);
  padding:5px 14px; cursor:pointer; font-size:11px; letter-spacing:0.08em;
  clip-path:polygon(5px 0,100% 0,100% 100%,0 100%,0 5px);
}
.toggle:not(.off){ border-color:var(--ember-500); color:var(--ember-300); }
#settings-close{ width:100%; margin-top:18px; }

/* ===== app shake (prestige / big moments) ===== */

#app.pulse{ animation:shake .4s ease; }

/* ===== keyframes ===== */

@keyframes spin-cw{ from{ transform:rotate(0); } to{ transform:rotate(360deg); } }
@keyframes spin-ccw{ from{ transform:rotate(0); } to{ transform:rotate(-360deg); } }

@keyframes core-pulse{
  0%,100%{ transform:scale(1); opacity:0.92; }
  50%{ transform:scale(1.045); opacity:1; }
}
@keyframes core-strike{
  0%{ transform:scale(1.22); opacity:1; }
  100%{ transform:scale(1); opacity:0.92; }
}

@keyframes hint-fade{
  0%,100%{ opacity:0.55; }
  50%{ opacity:1; }
}

@keyframes float-up{
  0%{ transform:translate(-50%,-50%) scale(1); opacity:1; }
  100%{ transform:translate(-50%,-130%) scale(1.2); opacity:0; }
}

@keyframes panel-in{
  from{ opacity:0; transform:translateY(6px); }
  to{ opacity:1; transform:translateY(0); }
}

@keyframes modal-in{
  from{ opacity:0; transform:scale(.96); }
  to{ opacity:1; transform:scale(1); }
}

@keyframes shake{
  10%,90%{ transform:translateX(-1px); }
  20%,80%{ transform:translateX(2px); }
  30%,50%,70%{ transform:translateX(-5px); }
  40%,60%{ transform:translateX(5px); }
}

/* ===== responsive ===== */

@media (max-width:680px){
  .hud-bar{ gap:14px; }
  .gauges{ gap:14px; order:3; width:100%; justify-content:space-between; }
  .brand{ order:1; }
  #settings-btn{ order:2; }
  .console-panel{ max-height:none; }
  .prestige-stats{ grid-template-columns:1fr; }
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
  }
}