:root{
  --bg:#050805;
  --fg:#27ff6a;
  --fg-dim: rgba(39,255,106,.65);
  --border: rgba(39,255,106,.35);
  --glow: rgba(39,255,106,.18);
}

*{box-sizing:border-box}
html,body{height:100%}

body{
  margin:0;
  background:
    radial-gradient(1200px 800px at 50% 30%, rgba(39,255,106,.10), transparent 55%),
    linear-gradient(180deg, #020402, #060a06);
  color: var(--fg);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
}

.wrap{
  width: min(92vw, 900px);
  display:flex;
  flex-direction:column;
  gap:10px;
}

.hud{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  color: var(--fg-dim);
  font-size: 13px;
  letter-spacing: .02em;
  user-select:none;
}

.screen{
  position:relative;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(0,0,0,.4);
  box-shadow: 0 0 0 1px rgba(39,255,106,.08) inset, 0 18px 60px rgba(0,0,0,.55);
  overflow:hidden;
}

canvas{
  display:block;
  width:100%;
  height:auto;
  image-rendering: pixelated;
}

/* subtle terminal scanlines + vignette */
.screen::before{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(to bottom, rgba(255,255,255,.04), rgba(255,255,255,0) 10%),
    repeating-linear-gradient(
      to bottom,
      rgba(39,255,106,.045),
      rgba(39,255,106,.045) 1px,
      rgba(0,0,0,0) 3px,
      rgba(0,0,0,0) 6px
    );
  mix-blend-mode: overlay;
  pointer-events:none;
  opacity:.28;
}

.screen::after{
  content:"";
  position:absolute; inset:-2px;
  background: radial-gradient(900px 600px at 50% 40%, transparent 55%, rgba(0,0,0,.55));
  pointer-events:none;
}

.hint{
  color: var(--fg-dim);
  font-size: 12px;
  line-height: 1.35;
  user-select:none;
}

.hint code{color: var(--fg)}

.hintSpacer{
  display:inline-block;
  margin-left:10px;
}

.modalOverlay{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  background: rgba(0,0,0,0.72);
  z-index: 50;
}

.modalOverlay[hidden]{
  display:none !important;
}

.modal{
  width: min(640px, 96vw);
  border: 1px solid var(--border);
  border-radius: 12px;
  background:
    radial-gradient(800px 400px at 50% 0%, rgba(39,255,106,0.10), transparent 60%),
    rgba(0,0,0,0.82);
  box-shadow: 0 0 0 1px rgba(39,255,106,.10) inset, 0 18px 70px rgba(0,0,0,0.65);
  color: var(--fg);
}

.modalHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 14px 14px 10px;
  border-bottom: 1px solid rgba(39,255,106,.18);
}

.modalTitle{
  font-size: 14px;
  letter-spacing: .04em;
  color: var(--fg);
}

.modalClose{
  border: 1px solid rgba(39,255,106,.28);
  background: rgba(39,255,106,.06);
  color: var(--fg);
  border-radius: 8px;
  padding: 6px 10px;
  font: inherit;
  cursor:pointer;
}

.modalBody{
  padding: 12px 14px;
  color: var(--fg-dim);
  font-size: 13px;
  line-height: 1.45;
}

.modalBody strong{ color: var(--fg); font-weight: 600; }

.modalActions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  padding: 0 14px 12px;
}

.modalActions button{
  border: 1px solid rgba(39,255,106,.35);
  background: rgba(39,255,106,.08);
  color: var(--fg);
  border-radius: 10px;
  padding: 10px 12px;
  font: inherit;
  font-size: 13px;
  cursor:pointer;
}

.modalActions button:hover{ background: rgba(39,255,106,.14); }

.modalActions button.danger{
  border-color: rgba(255,90,90,.55);
  background: rgba(255,90,90,.10);
}

.modalHint{
  padding: 0 14px 14px;
  color: rgba(39,255,106,.55);
  font-size: 12px;
}