:root{
  --bg:#05060a; --fg:#9fffcb; --dim:#2aff8a; --dim2:#1a5f3a; --glow:#00ff88;
  --accent:#ff4fd8; --amber:#ffb84d;
}
*{box-sizing:border-box; margin:0; padding:0}
html,body{height:100%}
body{
  background:radial-gradient(ellipse at 50% 0%, #0a1420 0%, var(--bg) 60%);
  color:var(--fg);
  font-family:"Courier New", ui-monospace, monospace;
  overflow-x:hidden;
}
.hidden{display:none !important}

/* boot screen */
#boot{
  position:fixed; inset:0; background:#000; z-index:99;
  display:flex; align-items:center; justify-content:center; padding:2rem;
}
#boottext{color:#33ff66; font-size:13px; line-height:1.5; white-space:pre; text-shadow:0 0 6px #33ff66aa}

/* scanline overlay */
.scanlines{
  pointer-events:none; position:fixed; inset:0; z-index:50; mix-blend-mode:overlay;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.55) 0 1px, transparent 1px 3px);
  opacity:.6;
}

#app{position:relative; z-index:2; max-width:780px; margin:0 auto; padding:2rem 1.5rem 3rem; min-height:100vh; display:flex; flex-direction:column; gap:1.2rem}
header{text-align:center; border-bottom:1px solid var(--dim2); padding-bottom:1rem}
h1{font-size:clamp(1.6rem,4vw,2.6rem); letter-spacing:.35em; text-shadow:0 0 18px var(--glow); font-weight:700}
.sub{color:var(--dim); font-size:.7rem; letter-spacing:.25em; margin-top:.4rem}
.clock{color:var(--amber); font-size:.75rem; letter-spacing:.3em; margin-top:.6rem}

.stage{
  position:relative; display:flex; flex-direction:column; align-items:center; gap:.8rem;
  padding:1rem; border:1px solid var(--dim2); border-radius:14px;
  background:linear-gradient(180deg, #060d12, #03060a);
  box-shadow:inset 0 0 60px #000, 0 0 30px #00ff8818;
}
#sigil{width:min(340px,70vw); height:min(340px,70vw); filter:drop-shadow(0 0 14px var(--glow))}
.answer{
  min-height:4.2em; font-size:clamp(1rem,2.6vw,1.35rem); text-align:center;
  padding: .6rem 1rem; border-left:3px solid var(--accent);
  color:#eafff2; line-height:1.5; text-shadow:0 0 10px #ffffff66;
  max-width:90%;
}
.answer.pending{color:var(--dim2); font-style:italic}
.meta{display:flex; justify-content:space-between; width:100%; font-size:.6rem; color:var(--dim); letter-spacing:.15em; padding:0 .2rem}

.controls{display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center}
button{
  background:linear-gradient(180deg,#0c1a14,#081009); color:var(--fg);
  border:1px solid var(--dim2); padding:.65rem 1.1rem; cursor:pointer;
  font-family:inherit; font-size:.85rem; letter-spacing:.15em; border-radius:8px;
  transition:all .15s; box-shadow:0 0 0 transparent;
}
button:hover{background:linear-gradient(180deg,#123022,#0a1812); border-color:var(--dim); box-shadow:0 0 16px #00ff8822; transform:translateY(-1px)}
button:active{transform:translateY(1px)}
button#ask{border-color:var(--glow); color:#b6ffd9; text-shadow:0 0 8px var(--glow)}

.log{
  margin-top:auto; border-top:1px dashed var(--dim2); padding-top:.8rem;
  font-size:.65rem; color:var(--dim); line-height:1.7; max-height:170px; overflow-y:auto;
}
.log div span.time{color:var(--amber); margin-right:.5em}
.log div span.roll{color:#ff9de0}
.log div span.coin{color:#8fd0ff}

footer{display:flex; justify-content:space-between; flex-wrap:wrap; gap:.4rem; font-size:.6rem; color:var(--dim); letter-spacing:.1em}
footer b{color:var(--accent)}
#seed{color:var(--dim2)}