:root{
  --bg:#070910;
  --card:#0f1422;
  --text:#e9ecf4;
  --muted:#a6afc4;
  --line:rgba(255,255,255,.10);
  --shadow: 0 24px 70px rgba(0,0,0,.55);
  --radius: 26px;

  --accent:#8b5cf6;
  --accent2:#22c55e;
  --warn:#f59e0b;
  --danger:#ef4444;

  --doom: 0;              /* 0..100 */
  --glitch: 0;            /* 0 or 1 */
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:
    radial-gradient(1000px 600px at 22% 10%, rgba(139,92,246,.18), transparent 60%),
    radial-gradient(900px 600px at 82% 70%, rgba(34,197,94,.12), transparent 55%),
    radial-gradient(800px 500px at 50% 95%, rgba(239,68,68,.10), transparent 55%),
    var(--bg);
  overflow-x:hidden;
}

.noise{
  position:fixed; inset:0;
  pointer-events:none;
  opacity:.08;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
  background-size:160px 160px;
}

.wrap{min-height:100%; display:flex; flex-direction:column; align-items:center; padding:26px 14px 40px}
.header{
  max-width:860px; width:100%;
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:12px; margin:10px 0 16px;
}
.brand{display:flex; align-items:center; gap:12px}
.sigil{
  width:44px; height:44px; border-radius:14px;
  display:grid; place-items:center;
  background:rgba(255,255,255,.05);
  border:1px solid var(--line);
  box-shadow: 0 14px 30px rgba(0,0,0,.35);
  font-size:18px;
}
h1{margin:0; font-size:26px; letter-spacing:.2px}
.dim{color:var(--muted); font-weight:500}
.sub{margin:6px 0 0; color:var(--muted)}
.topRight{display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end}
.chip{
  font-size:12px;
  padding:7px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.05);
  border:1px solid var(--line);
  color:var(--muted);
}

.card{
  max-width:860px; width:100%;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  border:1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding:20px;
}

.btn{
  width:100%;
  border:0;
  border-radius:22px;
  padding:22px 18px;
  cursor:pointer;
  color:white;
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(1200px 260px at 50% 0%, rgba(255,255,255,.18), transparent 55%),
    linear-gradient(135deg, rgba(139,92,246,.96), rgba(99,102,241,.92));
  box-shadow: 0 18px 50px rgba(139,92,246,.22);
  transform: translateZ(0);
}
.btn:hover{filter:brightness(1.05)}
.btn:active{transform:translateY(1px) scale(.997)}
.btnTitle{display:block; font-weight:900; letter-spacing:1.6px; font-size:16px}
.btnSubtitle{display:block; opacity:.92; margin-top:7px; font-size:13px; color:rgba(255,255,255,.92)}
.btnAura{
  position:absolute; inset:-40px;
  background:
    radial-gradient(closest-side, rgba(34,197,94,.30), transparent 60%),
    radial-gradient(closest-side, rgba(239,68,68,.22), transparent 55%);
  opacity: calc(.10 + (var(--doom) / 140));
  transform: rotate(8deg);
  filter: blur(12px);
}

.row{display:flex; gap:14px; align-items:stretch; justify-content:space-between; margin:16px 0 10px}
.meter{flex:1; padding:12px; border-radius:18px; border:1px solid var(--line); background:rgba(0,0,0,.18)}
.meterTop{display:flex; justify-content:space-between; color:var(--muted); font-size:13px; margin-bottom:8px}
.bar{height:11px; background:rgba(255,255,255,.08); border-radius:999px; overflow:hidden}
.barFill{
  height:100%; width:0%;
  background:linear-gradient(90deg, var(--accent2), var(--warn), var(--danger));
  transition:width .35s ease;
}
.meterHint{margin-top:8px; color:var(--muted); font-size:12px}

.stack{width:150px; display:flex; flex-direction:column; gap:10px}
.stat{
  padding:12px;
  border-radius:18px;
  border:1px solid var(--line);
  background:rgba(0,0,0,.18);
  display:flex; justify-content:space-between; align-items:baseline;
  color:var(--muted); font-size:12px;
}
.stat strong{color:var(--text); font-size:15px}

.fortuneBox{
  margin-top:10px;
  padding:14px;
  border-radius:20px;
  background:rgba(0,0,0,.20);
  border:1px solid var(--line);
}
.fortuneHead{display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:10px}
.tag{
  font-size:12px; letter-spacing:.9px; font-weight:700;
  padding:6px 10px; border-radius:999px;
  background:rgba(255,255,255,.05);
  border:1px solid var(--line);
  color:var(--muted);
}
.fortuneActions{display:flex; gap:8px}
.ghost{
  background: rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.10);
  color:var(--text);
  padding:9px 11px;
  border-radius: 14px;
  cursor:pointer;
  font-size:13px;
}
.ghost:hover{background: rgba(255,255,255,.06)}
.fortune{font-size:17px; line-height:1.5}
.aftertaste{margin-top:10px; color:var(--muted); font-size:13px}

.ledger{margin-top:14px; padding:14px; border-radius:20px; border:1px solid var(--line); background:rgba(0,0,0,.16)}
.ledgerHead{display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:10px}
.ledgerHead h2{margin:0; font-size:14px; color:var(--muted); letter-spacing:.6px; text-transform:uppercase}
.ledgerActions{display:flex; gap:8px; flex-wrap:wrap}
.log{
  margin:0; padding-left:18px;
  max-height:220px; overflow:auto;
  color:var(--muted); font-size:13px;
}
.log li{margin:8px 0}
.log em{color:var(--text); font-style:normal}
.hint{margin:12px 2px 0; color:var(--muted); font-size:12px}
kbd{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size:11px;
  padding:2px 6px;
  border-radius:8px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.04);
  color:var(--text);
}

.footer{margin-top:16px; color:var(--muted); font-size:12px; text-align:center}

.toast{
  position:fixed; left:50%; bottom:18px; transform:translateX(-50%);
  padding:10px 12px;
  border-radius:14px;
  border:1px solid var(--line);
  background: rgba(10,12,18,.85);
  color:var(--text);
  font-size:13px;
  opacity:0; pointer-events:none;
  transition: opacity .18s ease, transform .18s ease;
  box-shadow: 0 18px 60px rgba(0,0,0,.55);
}
.toast.show{opacity:1; transform:translateX(-50%) translateY(-4px)}

/* GLITCH MODE (subtle) */
body.glitch .btnTitle{
  text-shadow:
    -1px 0 rgba(239,68,68,.55),
     1px 0 rgba(34,197,94,.45);
}
body.glitch .sigil{animation: wob 1.8s infinite ease-in-out}
@keyframes wob{
  0%,100%{transform:rotate(0)}
  40%{transform:rotate(-2deg)}
  70%{transform:rotate(2deg)}
}