:root{
  --bg:#0b1220;
  --panel:#0f1b2e;
  --ink:#e6f0ff;
  --accent:#62d26f;
  --accent2:#f0d35e;
  --shadow: rgba(0,0,0,.35);
}

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

body{
  margin:0;
  color:var(--ink);
  background:
    radial-gradient(1200px 600px at 30% -10%, rgba(98,210,111,.25), transparent 60%),
    radial-gradient(900px 500px at 80% 0%, rgba(240,211,94,.18), transparent 55%),
    linear-gradient(180deg, #060a12, var(--bg));
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  letter-spacing: .2px;
}

.top{
  padding:18px 16px 10px;
  display:flex;
  flex-direction:column;
  gap:8px;
  align-items:center;
}

.brand{
  font-size:44px;
  font-weight:900;
  text-transform:uppercase;
  padding:10px 18px;
  background: linear-gradient(180deg, rgba(98,210,111,.25), rgba(98,210,111,.05));
  border:4px solid rgba(230,240,255,.18);
  box-shadow: 0 12px 0 rgba(0,0,0,.22);
  border-radius:10px;
  text-shadow: 2px 2px 0 rgba(0,0,0,.5), 0 0 18px rgba(98,210,111,.25);
}

.hint{ opacity:.9; font-size:14px; text-align:center; }

.wrap{ padding: 10px 16px 24px; display:flex; justify-content:center; }

.panel{
  width:min(1060px, 100%);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border: 4px solid rgba(230,240,255,.14);
  border-radius:14px;
  box-shadow: 0 18px 0 rgba(0,0,0,.22), 0 28px 60px var(--shadow);
  padding: 14px;
}

#game{
  width:100%;
  height:auto;
  display:block;
  border-radius:10px;
  border:4px solid rgba(0,0,0,.35);
  background: repeating-linear-gradient(45deg, rgba(255,255,255,.025) 0 8px, rgba(0,0,0,.03) 8px 16px);
  image-rendering: pixelated;
}

.legend{
  margin-top:10px;
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  justify-content:center;
  font-size:13px;
  opacity:.95;
}

.kbd{
  display:inline-block;
  padding: 2px 8px;
  border:2px solid rgba(230,240,255,.18);
  background: rgba(0,0,0,.25);
  border-radius:8px;
  box-shadow: 0 6px 0 rgba(0,0,0,.22);
}