:root{
  --bg0:#0b0f17;
  --bg1:#101a2f;
  --bg2:#0f2a2a;
  --ink:#e8f0ff;
  --muted:#b6c3da;
  --line:rgba(232,240,255,.10);
  --glass:rgba(20,28,48,.62);
  --glass2:rgba(14,22,40,.55);
  --hot:#ffda7a;
  --good:#7dffb2;
  --bad:#ff6b6b;
  --vio:#7aa7ff;
  --fontA:"Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --fontB:"SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--ink);
  background: radial-gradient(1200px 700px at 20% 0%, rgba(122,167,255,.25), transparent 60%),
              radial-gradient(900px 520px at 80% 10%, rgba(125,255,178,.18), transparent 60%),
              radial-gradient(1000px 700px at 60% 100%, rgba(255,218,122,.12), transparent 65%),
              linear-gradient(180deg, var(--bg0), var(--bg1) 55%, var(--bg2));
  font-family:var(--fontA);
  overflow-x:hidden;
}

#bg{
  position:fixed; inset:0;
  background:
    radial-gradient(circle at 30% 40%, rgba(255,255,255,.07), transparent 28%),
    radial-gradient(circle at 70% 60%, rgba(255,255,255,.05), transparent 25%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.03) 0px, rgba(255,255,255,.03) 1px, transparent 1px, transparent 9px);
  mix-blend-mode:overlay;
  pointer-events:none;
  opacity:.55;
}

#top{
  position:sticky; top:0; z-index:5;
  display:flex; gap:18px;
  align-items:center; justify-content:space-between;
  padding:14px 16px;
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg, rgba(9,12,18,.82), rgba(9,12,18,.58));
  backdrop-filter: blur(10px);
}

.brand{display:flex; align-items:center; gap:12px}
.sigil{
  width:34px; height:34px; border-radius:10px;
  background:
    conic-gradient(from 90deg, rgba(255,218,122,.85), rgba(122,167,255,.75), rgba(125,255,178,.70), rgba(255,107,107,.68), rgba(255,218,122,.85));
  box-shadow:0 12px 30px rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.10);
}
.title .kicker{font-family:var(--fontB); letter-spacing:.10em; font-size:11px; color:var(--muted); text-transform:uppercase}
.title .name{font-size:18px; letter-spacing:.02em}

.controls{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.btn{
  border:1px solid rgba(255,255,255,.14);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  color:var(--ink);
  padding:10px 12px;
  border-radius:12px;
  cursor:pointer;
  font-family:var(--fontB);
  font-size:12px;
}
.btn.tiny{padding:6px 8px; border-radius:10px; font-size:11px}
.btn:hover{border-color:rgba(255,255,255,.28)}
.btn.primary{
  background:linear-gradient(180deg, rgba(255,218,122,.22), rgba(255,218,122,.08));
  border-color:rgba(255,218,122,.32);
}
.btn.on{border-color:rgba(125,255,178,.55); background:linear-gradient(180deg, rgba(125,255,178,.20), rgba(125,255,178,.08))}

.field{display:flex; align-items:center; gap:8px; padding:6px 10px; border-radius:12px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.03)}
.field label{font-family:var(--fontB); font-size:11px; color:var(--muted)}
.field input{width:140px}

#grid{
  display:grid;
  grid-template-columns: 1.65fr 1fr;
  gap:14px;
  padding:14px;
}

.panel{
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px;
  background:linear-gradient(180deg, var(--glass), var(--glass2));
  box-shadow:0 26px 60px rgba(0,0,0,.30);
  overflow:hidden;
}
.panelHead{
  padding:12px 14px;
  border-bottom:1px solid var(--line);
  display:flex; align-items:baseline; justify-content:space-between; gap:14px;
}
.panelHead h2{margin:0; font-size:15px; letter-spacing:.03em}
.meta{font-family:var(--fontB); font-size:11px; color:var(--muted)}
.panelBody{padding:12px 14px}

.row{display:grid; grid-template-columns: 1fr 1fr .9fr; gap:12px; margin-bottom:12px}
.card{
  border:1px solid rgba(255,255,255,.10);
  border-radius:14px;
  background:rgba(0,0,0,.10);
  overflow:hidden;
}
.cardHead{
  padding:10px 12px;
  border-bottom:1px solid var(--line);
  font-family:var(--fontB);
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
}

.form{padding:10px 12px; display:flex; flex-direction:column; gap:10px}
.frow{display:grid; grid-template-columns: 130px 1fr; gap:10px; align-items:center}
.frow label{font-family:var(--fontB); font-size:11px; color:var(--muted)}
.frow input{
  width:100%;
  padding:10px 10px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(0,0,0,.18);
  color:var(--ink);
  font-family:var(--fontB);
  font-size:12px;
}
.frow select{
  width:100%;
  padding:10px 10px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(0,0,0,.18);
  color:var(--ink);
  font-family:var(--fontB);
  font-size:12px;
}
.cardFoot{padding:10px 12px; border-top:1px solid var(--line)}
.board{display:flex; justify-content:center; padding:10px; min-height:468px}
.board svg{max-width:100%; height:auto}

.feed{padding:10px 12px; font-family:var(--fontB); font-size:12px; line-height:1.35; min-height:468px}
.feed .item{
  padding:10px 10px; margin-bottom:8px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
  animation: rise .22s ease-out both;
}
.feed .item .tag{color:var(--hot)}
.feed .item .sub{color:var(--muted); font-size:11px; margin-top:4px}

@keyframes rise{
  from{transform:translateY(6px); opacity:.0}
  to{transform:translateY(0); opacity:1}
}

.creatures{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:10px;
  padding:10px;
}
.creature{
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px;
  background:rgba(0,0,0,.12);
  padding:10px;
}
.creature.dead{opacity:.58; filter:saturate(.75)}
.creature .head{display:flex; align-items:flex-start; justify-content:space-between; gap:10px}
.creature .name{font-family:var(--fontB); font-size:12px}
.creature .badge{
  font-family:var(--fontB); font-size:11px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px;
  padding:4px 8px;
  color:var(--muted);
}
.creature .badge.live{border-color:rgba(125,255,178,.35); color:rgba(125,255,178,.92)}
.creature .badge.dead{border-color:rgba(255,107,107,.35); color:rgba(255,107,107,.92)}
.creature .grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:8px;
  margin-top:10px;
}
.stat .k{font-family:var(--fontB); font-size:10px; letter-spacing:.10em; color:var(--muted); text-transform:uppercase}
.stat .v{font-family:var(--fontB); font-size:12px; margin-top:4px}
.bar{height:8px; background:rgba(255,255,255,.08); border-radius:999px; overflow:hidden; margin-top:6px}
.bar > i{display:block; height:100%; width:0%; background:linear-gradient(90deg, rgba(122,167,255,.75), rgba(255,218,122,.70))}
.bar.good > i{background:linear-gradient(90deg, rgba(125,255,178,.80), rgba(122,167,255,.50))}
.bar.bad > i{background:linear-gradient(90deg, rgba(255,107,107,.75), rgba(255,218,122,.35))}

.traits{margin-top:10px; display:flex; flex-wrap:wrap; gap:6px}
.trait{
  font-family:var(--fontB);
  font-size:11px;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
  color:var(--muted);
}

.shardSummary{
  padding:10px 12px;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  border-bottom:1px solid var(--line);
}
.tierBadge{
  font-family:var(--fontB);
  font-size:11px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px;
  padding:4px 8px;
  color:var(--muted);
  background:rgba(255,255,255,.03);
}
.tierBadge.bronze{
  border-color:rgba(180,120,70,.35);
  color:rgba(220,190,160,.92);
  background:rgba(180,120,70,.09);
}
.tierBadge.silver{
  border-color:rgba(190,205,225,.28);
  color:rgba(220,235,255,.88);
  background:rgba(190,205,225,.07);
}
.tierBadge.gold{
  border-color:rgba(255,202,80,.35);
  color:rgba(255,225,160,.96);
  background:rgba(255,202,80,.10);
  box-shadow:0 0 18px rgba(255,202,80,.14);
}
.tierBadge.diamond{
  border-color:rgba(255,218,122,.52);
  color:rgba(255,240,200,.98);
  background:rgba(255,218,122,.14);
  box-shadow:0 0 22px rgba(255,218,122,.30), 0 0 46px rgba(255,218,122,.12);
}

.shards{padding:0}
.shardTableWrap{max-height:360px; overflow:auto}
.shardTable{
  width:100%;
  border-collapse:collapse;
  font-family:var(--fontB);
  font-size:11px;
}
.shardTable thead th{
  position:sticky; top:0; z-index:1;
  text-align:left;
  padding:8px 10px;
  color:var(--muted);
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg, rgba(9,12,18,.66), rgba(9,12,18,.40));
  backdrop-filter: blur(10px);
}
.shardTable td{
  padding:9px 10px;
  border-bottom:1px solid rgba(255,255,255,.06);
  vertical-align:top;
}
.shardRow.consumed{opacity:.55}
.shardPrompt{color:rgba(255,255,255,.78)}
.shardFoot{display:flex; align-items:center; justify-content:space-between; gap:12px}
.shardFoot .btn{white-space:nowrap}

.events{
  font-family:var(--fontB);
  font-size:11px;
  line-height:1.35;
  max-height: calc(100vh - 140px);
  overflow:auto;
  padding:6px;
}

.pairGrid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:10px;
  padding:10px;
}
.pairTile{
  border:1px solid rgba(255,255,255,.10);
  border-radius:12px;
  background:rgba(0,0,0,.10);
  padding:10px;
  cursor:pointer;
}
.pairTile.pin{border-color:rgba(255,218,122,.38)}
.pairHead{font-family:var(--fontB); font-size:11px; color:var(--muted); margin-bottom:8px}
.pairTile .mini{display:flex; justify-content:center}
.pairTile .mini svg{max-width:100%; height:auto}
.ev{
  padding:10px 10px;
  margin:8px 0;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.10);
}
.ev .t{color:var(--muted)}
.ev .type{color:var(--vio)}
.ev .pill{display:inline-block; margin-left:8px; padding:2px 8px; border-radius:999px; border:1px solid rgba(255,255,255,.12); color:var(--muted)}
.ev .hash{color:rgba(255,255,255,.45); font-size:10px; margin-top:6px}

.modal{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  padding:18px;
  background:rgba(0,0,0,.55);
  z-index:999;
}
.modal.show{display:flex}
.modalBox{
  width:min(620px, 100%);
  border:1px solid rgba(255,255,255,.14);
  border-radius:16px;
  background:linear-gradient(180deg, rgba(20,28,48,.92), rgba(14,22,40,.86));
  box-shadow:0 26px 60px rgba(0,0,0,.50);
  overflow:hidden;
}
.modalHead{
  padding:12px 14px;
  border-bottom:1px solid var(--line);
  font-family:var(--fontB);
  font-size:11px;
  letter-spacing:.10em;
  text-transform:uppercase;
  color:var(--muted);
}
.modalBody{padding:0}
.modalFoot{
  padding:12px 14px;
  border-top:1px solid var(--line);
  display:flex;
  justify-content:flex-end;
  gap:10px;
}
.mono{font-family:var(--fontB); font-size:12px; color:rgba(255,255,255,.80); word-break:break-all}

@media (max-width: 1020px){
  #grid{grid-template-columns:1fr}
  .row{grid-template-columns:1fr}
  .creatures{grid-template-columns:1fr}
  .events{max-height: 440px}
  .pairGrid{grid-template-columns: repeat(2, minmax(0,1fr))}
}