:root{
  --bg:#05070a;
  --card:rgba(10,14,18,.72);
  --card2:rgba(8,10,12,.62);
  --text:#e7eef4;
  --muted:#9fb2c1;

  --g:#7CFF8E;
  --b:#6fb7ff;
  --m:#ff4fd8;
  --gold:#ffd18a;

  --radius:18px;
  --shadow: 0 18px 60px rgba(0,0,0,.58);
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

*{box-sizing:border-box}
html,body{height:100%; margin:0; padding:0;}

body{
  color:var(--text);
  background:
  radial-gradient(1200px 700px at 30% 20%, rgba(124,255,142,.14), transparent 60%),
  radial-gradient(900px 600px at 80% 40%, rgba(111,183,255,.12), transparent 55%),
  radial-gradient(800px 500px at 60% 90%, rgba(255,79,216,.08), transparent 55%),
  linear-gradient(180deg, rgba(0,0,0,.0), rgba(0,0,0,.22)),
  var(--bg);
  font: 16px/1.45 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial;
  overflow-x:hidden;
}

/* scanlines */
body::after{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  background: repeating-linear-gradient(to bottom, rgba(255,255,255,.03), rgba(255,255,255,.03) 1px, transparent 3px, transparent 6px);
  opacity:.12;
  mix-blend-mode: overlay;
}

/* WRAP: Pakotetaan sisältö ylös */
.wrap{
  min-height:100%;
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start; /* Alkaa ylhäältä */
}

.shell{
  width: min(1200px, 100%);
  display:grid;
  grid-template-columns: 1fr 380px;
  gap: 14px;
}
@media (max-width: 980px){
  .shell{ grid-template-columns: 1fr; }
}

.stage{
  background: linear-gradient(180deg, var(--card), var(--card2));
  border:1px solid rgba(255,255,255,.10);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 12px;
  position:relative;
  overflow:hidden;
}

/* TIIVISTETTY OTSIKKOALUE */
.head{
  display:flex;
  gap:12px;
  align-items:center;
  margin-bottom: 5px; /* Minimi väli */
  position:relative;
  z-index:1;
}
.sigil{
  width:40px; height:40px;
  border-radius:12px;
  display:grid; place-items:center;
  background: rgba(124,255,142,.08);
  border:1px solid rgba(124,255,142,.20);
  font-family: var(--mono);
}
h1{ margin:0; font-weight:900; letter-spacing:.6px; line-height:0.9; font-size: 24px; }
.sub{ margin:2px 0 0; color:var(--muted); font-size:11px; font-family: var(--mono); }

/* KESKIALUE: Napit heti otsikon alle */
.center{
  position:relative;
  z-index:1;
  min-height: 0;
  padding: 5px 0;
  display: flex;
  justify-content: center;
}

.bigBtn{
  width: 200px;
  height: 200px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.18);
  color: var(--text);
  cursor:pointer;
  display:grid;
  place-items:center;
  gap:4px;
  transition: transform .15s ease;
}
.bigBtn:hover{ transform: translateY(-2px); border-color: rgba(124,255,142,.22); }
.bigIcon{ font-size: 40px; }
.bigText{ font-family: var(--mono); letter-spacing: 2px; font-weight: 900; font-size: 12px; color: var(--muted); }

/* GRID ALANAPEILLE */
.mini{
  width: 100%;
  margin-top: 10px;
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
}

.panel{
  background: rgba(0,0,0,.18);
  border:1px solid rgba(255,255,255,.10);
  border-radius: var(--radius);
  padding: 12px;
  text-decoration: none;
  color: var(--text);
}

.lbl{ font-family: var(--mono); font-size:11px; color: var(--muted); }
.hint{ margin-top: 4px; color: var(--muted); font-size: 11px; }

/* Status-pisteet */
.dot{ width:10px; height:10px; border-radius:50%; display:inline-block; margin-right:5px; }
.dot.ok{ background: var(--g); box-shadow: 0 0 10px var(--g); }