* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: #171a21;
  color: #e8e6df;
  font-family: "Courier New", ui-monospace, monospace;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hidden { display: none !important; }

.panel {
  background: #232735;
  border: 4px solid #3c4358;
  border-radius: 6px;
  padding: 24px 28px;
  box-shadow: 0 8px 0 #10121a;
  width: min(92vw, 420px);
}

h1 {
  font-size: 28px;
  letter-spacing: 2px;
  color: #f4d03f;
  text-shadow: 2px 2px 0 #10121a;
}

.subtitle { margin: 4px 0 16px; color: #9aa3b8; }

#creator-body { display: flex; gap: 20px; align-items: flex-start; }

#preview {
  width: 112px;
  height: 140px;
  image-rendering: pixelated;
  background: #2c3145;
  border: 3px solid #3c4358;
  border-radius: 4px;
  flex: none;
}

#creator-controls { flex: 1; display: flex; flex-direction: column; gap: 10px; }

.swatch-row .label {
  font-size: 12px;
  color: #9aa3b8;
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.swatches { display: flex; gap: 6px; flex-wrap: wrap; }

.swatch {
  width: 26px;
  height: 26px;
  border: 3px solid #10121a;
  border-radius: 4px;
  cursor: pointer;
  padding: 0;
}

.swatch.selected { border-color: #f4d03f; transform: scale(1.1); }

#name-row { display: block; margin-top: 16px; font-size: 13px; color: #9aa3b8; }

#name-input {
  width: 100%;
  margin-top: 4px;
  background: #171a21;
  color: #e8e6df;
  border: 3px solid #3c4358;
  border-radius: 4px;
  padding: 8px;
  font-family: inherit;
  font-size: 15px;
}

#name-input:focus { outline: none; border-color: #f4d03f; }

#start-btn {
  margin-top: 18px;
  width: 100%;
  background: #3da05a;
  color: #fff;
  border: 0;
  border-bottom: 4px solid #2a7040;
  border-radius: 4px;
  padding: 12px;
  font-family: inherit;
  font-size: 16px;
  font-weight: bold;
  letter-spacing: 1px;
  cursor: pointer;
}

#start-btn:hover { filter: brightness(1.1); }
#start-btn:active { border-bottom-width: 0; transform: translateY(4px); }

#game-wrap { display: flex; flex-direction: column; align-items: center; gap: 10px; }

#game {
  image-rendering: pixelated;
  background: #000;
  border: 4px solid #3c4358;
  border-radius: 4px;
}

#hint { font-size: 12px; color: #9aa3b8; }

#net-status { font-size: 11px; color: #6e7689; }
#net-status.online { color: #5fae74; }